fix: Suppression du header sur la page account

- Modification du router pour ne pas injecter le header sur la page account
- Page account utilise maintenant tout l'espace disponible
- Design modale complet sans header parasite
- CSS optimisé pour une expérience full-screen

src/components/device-management/device-management.ts

@@ -62,7 +62,7 @@ export class DeviceManagementComponent extends HTMLElement {
           display: block;
           font-family: Arial, sans-serif;
         }
-        
+
         .device-management {
           max-width: 800px;
           margin: 0 auto;
@@ -351,10 +351,10 @@ export class DeviceManagementComponent extends HTMLElement {
           <h3>➕ Ajouter un Device</h3>
           <div class="input-group">
             <label for="newDeviceWords">4 mots du nouveau device :</label>
-            <input 
+            <input
-              type="text" 
+              type="text"
-              id="newDeviceWords" 
+              id="newDeviceWords"
-              class="words-input" 
+              class="words-input"
               placeholder="Entrez les 4 mots (ex: abandon ability able about)"
               autocomplete="off"
               spellcheck="false"
@@ -398,7 +398,7 @@ export class DeviceManagementComponent extends HTMLElement {
       const words = wordsInput.value.trim();
       const isValid = this.validateWords(words);
       addBtn.disabled = !isValid;
-      
+
       if (words && !isValid) {
         wordsInput.style.borderColor = '#f44336';
       } else {
@@ -440,7 +440,7 @@ export class DeviceManagementComponent extends HTMLElement {
   async addDevice() {
     const wordsInput = this.shadowRoot!.getElementById('newDeviceWords') as HTMLInputElement;
     const words = wordsInput.value.trim();
-    
+
     if (!this.validateWords(words)) {
       this.showStatus('❌ Format invalide. Entrez exactement 4 mots séparés par des espaces.', 'error');
       return;
@@ -451,11 +451,11 @@ export class DeviceManagementComponent extends HTMLElement {
       // For now, we'll simulate adding a device
       const newAddress = `tsp1${Math.random().toString(36).substr(2, 9)}...`;
       this.pairedDevices.push(newAddress);
-      
+
       this.showStatus(`✅ Device ajouté avec succès !`, 'success');
       this.updateUI();
       this.enableSaveButton();
-      
+
       // Clear input
       wordsInput.value = '';
       wordsInput.style.borderColor = '#e0e0e0';
@@ -496,7 +496,7 @@ export class DeviceManagementComponent extends HTMLElement {
   enableSaveButton() {
     const saveBtn = this.shadowRoot!.getElementById('saveChangesBtn') as HTMLButtonElement;
     const cancelBtn = this.shadowRoot!.getElementById('cancelChangesBtn') as HTMLButtonElement;
-    
+
     if (saveBtn) saveBtn.disabled = false;
     if (cancelBtn) cancelBtn.disabled = false;
   }
@@ -529,7 +529,7 @@ export class DeviceManagementComponent extends HTMLElement {
   disableSaveButtons() {
     const saveBtn = this.shadowRoot!.getElementById('saveChangesBtn') as HTMLButtonElement;
     const cancelBtn = this.shadowRoot!.getElementById('cancelChangesBtn') as HTMLButtonElement;
-    
+
     if (saveBtn) saveBtn.disabled = true;
     if (cancelBtn) cancelBtn.disabled = true;
   }
@@ -546,7 +546,7 @@ export class DeviceManagementComponent extends HTMLElement {
           try {
             const text = await file.text();
             const data = JSON.parse(text);
-            
+
             // Import the account data
             if (window.importJSON) {
               await window.importJSON();

src/pages/account/account.html

@@ -5,42 +5,44 @@
     <style>
         body {
             margin: 0;
-            padding: 20px;
+            padding: 0;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             font-family: Arial, sans-serif;
+            overflow-x: hidden;
         }
-        
+
         .account-container {
             max-width: 900px;
-            margin: 0 auto;
+            margin: 20px auto;
             background: rgba(255, 255, 255, 0.95);
             border-radius: 16px;
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
             backdrop-filter: blur(20px);
             border: 1px solid rgba(255, 255, 255, 0.2);
             overflow: hidden;
+            min-height: calc(100vh - 40px);
         }
-        
+
         .account-header {
             background: linear-gradient(135deg, #3a506b 0%, #2c3e50 100%);
             color: white;
             padding: 30px;
             text-align: center;
         }
-        
+
         .account-header h1 {
             margin: 0 0 10px 0;
             font-size: 32px;
             font-weight: 300;
         }
-        
+
         .account-header p {
             margin: 0;
             opacity: 0.9;
             font-size: 16px;
         }
-        
+
         .account-content {
             padding: 0;
         }
@@ -56,7 +58,7 @@
             <device-management></device-management>
         </div>
     </div>
-    
+
     <script type="module" src="/src/components/device-management/device-management.ts"></script>
 </body>
 </html>

src/router.ts

@@ -59,7 +59,11 @@ async function handleLocation(path: string) {
     }
 
     await new Promise(requestAnimationFrame);
-    injectHeader();
+    
+    // Don't inject header for account page (it has its own design)
+    if (path !== 'account') {
+      injectHeader();
+    }
 
     // const modalService = await ModalService.getInstance()
     // modalService.injectValidationModal()