V1

alfred/app/templates/index.html

@@ -7,6 +7,7 @@
   <title>{{ name }}</title>
   <link rel="stylesheet" href="/static/css/alfred.css">
   <link rel="stylesheet" href="/static/css/alfred-controls.css">
+  <link rel="stylesheet" href="/static/css/alfred-views.css">
   <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
 </head>
 <body>
@@ -18,14 +19,30 @@
         <span id="mode" data-mode="idle">En attente</span>
       </div>
 
-      <div class="header-actions" aria-label="Commandes audio">
+      <div class="header-actions" aria-label="Navigation et commandes audio">
+        <button id="viewHome" class="icon-button" type="button" title="Accueil" aria-label="Accueil">⌂</button>
+        <button id="viewCalendar" class="icon-button" type="button" title="Agenda" aria-label="Agenda">▦</button>
+        <button id="viewWeather" class="icon-button" type="button" title="Météo Home Assistant" aria-label="Météo Home Assistant">☀</button>
+        <button id="viewTemperatures" class="icon-button" type="button" title="Températures" aria-label="Températures">°</button>
+        <button id="viewCameras" class="icon-button" type="button" title="Caméras Home Assistant" aria-label="Caméras Home Assistant">▣</button>
         <button id="audioSettingsButton" class="icon-button" type="button"
-                aria-label="Réglages audio" aria-haspopup="dialog" aria-expanded="false"
-                aria-controls="audioSettingsPanel" title="Volume et microphone">
+                aria-label="Réglages audio et caméra" aria-haspopup="dialog" aria-expanded="false"
+                aria-controls="audioSettingsPanel" title="Réglages audio et caméra">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2.5" fill="#272b30"/><circle cx="16" cy="17" r="2.5" fill="#272b30"/>
           </svg>
         </button>
+        <button id="micMute" class="icon-button" type="button"
+                aria-label="Couper le microphone" aria-pressed="false" title="Couper le microphone">
+          <svg class="mic-on-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="9" y="2.5" width="6" height="12" rx="3"/>
+            <path d="M5.5 10.5v1.5a6.5 6.5 0 0 0 13 0v-1.5M12 18.5v3M8 21.5h8"/>
+          </svg>
+          <svg class="mic-off-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M9.2 5.3V5.5a3 3 0 0 1 5.5-1.4M15 10.6v.9c0 .5-.1 1-.3 1.5M9 9.5v2A3 3 0 0 0 13.6 14"/>
+            <path d="M5.5 10.5V12a6.5 6.5 0 0 0 11.5 4.1M12 18.5v3M8 21.5h8M3 3l18 18"/>
+          </svg>
+        </button>
         <button id="speakerMuteQuick" class="icon-button" type="button"
                 aria-label="Couper le son" aria-pressed="false" title="Couper le son">
           <svg class="speaker-on-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -40,11 +57,16 @@
 
     <!-- Pop-up : commandes connectées à /api/audio/settings -->
     <div id="audioSettingsPanel" class="audio-popover" role="dialog"
-         aria-label="Réglages audio" aria-modal="false" hidden>
+         aria-label="Réglages audio et caméra" aria-modal="false" hidden>
       <div class="popover-heading">
-        <strong>Réglages audio</strong>
+        <strong>Réglages</strong>
         <button id="closeAudioSettings" class="icon-button mini" type="button" aria-label="Fermer les réglages">×</button>
       </div>
+      <div class="settings-tabs" role="tablist" aria-label="Catégories de réglages">
+        <button id="audioTab" class="settings-tab" type="button" role="tab" aria-selected="true" aria-controls="audioSettingsSection">Audio</button>
+        <button id="cameraTab" class="settings-tab" type="button" role="tab" aria-selected="false" aria-controls="cameraSettingsSection">Caméra</button>
+      </div>
+      <div id="audioSettingsSection" role="tabpanel" aria-labelledby="audioTab">
       <div class="setting-row">
         <label for="volumeSlider">Volume du haut-parleur</label>
         <output id="volumeValue" for="volumeSlider">70 %</output>
@@ -55,11 +77,17 @@
         <output id="micGainValue" for="micGainSlider">—</output>
       </div>
       <input id="micGainSlider" type="range" min="0" max="100" value="50" step="1">
-      <div class="setting-toggle">
-        <span>Microphone</span>
-        <button id="micMute" type="button" class="quiet-button" aria-pressed="false">Actif</button>
-      </div>
       <p id="audioSettingsMessage" class="settings-message" role="status" aria-live="polite"></p>
+      </div>
+      <div id="cameraSettingsSection" role="tabpanel" aria-labelledby="cameraTab" hidden>
+        <p class="camera-settings-note">Webcam locale · réglages matériels V4L2.<br>Tu peux voir le résultat dans l’aperçu « CAMÉRA » en bas à gauche.</p>
+        <div id="cameraSettingsItems" class="camera-settings-items" aria-live="off"></div>
+        <div class="camera-settings-actions">
+          <button id="cameraSettingsReload" class="camera-settings-action" type="button">Actualiser</button>
+          <button id="cameraSettingsReset" class="camera-settings-action reset" type="button">Valeurs d’usine</button>
+        </div>
+        <p id="cameraSettingsMessage" class="settings-message" role="status" aria-live="polite"></p>
+      </div>
     </div>
 
     <section id="stage" aria-label="Réponse d'Alfred">
@@ -97,7 +125,9 @@
   </main>
 
   <script src="/static/js/alfred.js"></script>
+  <script src="/static/js/alfred-views.js"></script>
   <script src="/static/js/alfred-controls.js"></script>
   <script src="/static/js/alfred-camera.js"></script>
+  <script src="/static/js/alfred-camera-settings.js"></script>
 </body>
 </html>