Fix pause, mobile transcription, and diarization

app/static/index.html

@@ -3,13 +3,19 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>LiveFlow — Transcription de réunions</title>
+  <title>LiveFlow - Transcription de réunions</title>
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3C/svg%3E">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%23151a18'/%3E%3Cpath d='M50 18c-9 0-16 7-16 16v21c0 9 7 16 16 16s16-7 16-16V34c0-9-7-16-16-16Z' fill='%23e9f6ef'/%3E%3Cpath d='M27 52c0 13 10 23 23 23s23-10 23-23' fill='none' stroke='%2322a06b' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M50 75v13' stroke='%23e4572e' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E">
-  <link rel="stylesheet" href="style.css?v=2">
+  <link rel="stylesheet" href="style.css?v=3">
 </head>
 <body>
   <header>
-    <h1>🎙️ LiveFlow</h1>
+    <div class="brand-mark" aria-hidden="true">
+      <span></span>
+    </div>
+    <div>
+      <h1>LiveFlow</h1>
+      <p>Transcription de réunion en direct</p>
+    </div>
     <span id="status" class="badge idle">Prêt</span>
   </header>
 
@@ -21,19 +27,20 @@
 
     <main>
       <section class="controls">
-        <input id="title" type="text" placeholder="Titre de la réunion (optionnel)">
+        <input id="title" type="text" placeholder="Titre de la réunion">
         <select id="mic-select" title="Choisir le microphone">
           <option value="">Micro par défaut</option>
         </select>
-        <button id="record-btn" class="record">● Démarrer</button>
+        <button id="record-btn" class="record">Démarrer</button>
-        <button id="pause-btn" class="pause hidden">⏸ Pause</button>
+        <button id="pause-btn" class="pause hidden">Pause</button>
+        <button id="stop-btn" class="stop hidden">Terminer</button>
         <span id="timer">00:00</span>
         <div id="volume-container" class="volume-container" title="Volume du micro">
           <div id="volume-bar" class="volume-bar"></div>
         </div>
         <label id="diarization-toggle" class="toggle" title="Identifier les locuteurs">
           <input type="checkbox" id="diarization-cb">
-          <span>👥 Locuteurs</span>
+          <span>Locuteurs</span>
         </label>
       </section>
 
@@ -41,21 +48,21 @@
         <div class="panel-head">
           <h2 id="transcript-title">Transcription</h2>
           <div id="export-bar" class="hidden">
-            <button id="copy-btn" title="Copier le texte">📋 Copier</button>
+            <button id="copy-btn" title="Copier le texte">Copier</button>
             <a id="export-txt" download>TXT</a>
             <a id="export-md" download>MD</a>
             <a id="export-srt" download>SRT</a>
             <a id="export-json" download>JSON</a>
-            <button id="delete-btn" title="Supprimer la réunion">🗑️</button>
+            <button id="delete-btn" title="Supprimer la réunion">Suppr.</button>
           </div>
         </div>
         <div id="transcript">
-          <p class="placeholder">Appuyez sur « Démarrer » et parlez : le texte apparaît ici au fil de l'eau.</p>
+          <p class="placeholder">Appuyez sur Démarrer et parlez : le texte apparaît ici au fil de l'eau.</p>
         </div>
       </section>
     </main>
   </div>
 
-  <script src="app.js?v=2"></script>
+  <script src="app.js?v=3"></script>
 </body>
 </html>