From db7575a8b063ebb0476d393675b0eeae45f17af0 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 13 Jun 2026 16:12:50 +0000 Subject: [PATCH] =?UTF-8?q?Refonte=20compl=C3=A8te=20du=20design=20(deskto?= =?UTF-8?q?p=20+=20mobile)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Nouvelle identité visuelle : thème sombre soigné, dégradés d'accent, cartes, ombres, bouton d'enregistrement en pilule avec point animé, badges d'état - Mise en page responsive mobile-first : la liste des réunions devient un tiroir latéral (bouton ☰ + voile), contrôles empilés et tactiles, vumètre pleine largeur, bouton Démarrer proéminent - Page de connexion redessinée dans le même style - Étiquettes de locuteurs en pastilles colorées - Cache-busting des assets (?v=2) Aucun changement de logique : tous les identifiants/hooks JS préservés. https://claude.ai/code/session_01YHMp3EKzr4s6o8w1ygxuUe --- app/static/app.js | 11 +- app/static/index.html | 64 ++++--- app/static/login.html | 54 +++--- app/static/style.css | 377 +++++++++++++++++++++++------------------- 4 files changed, 286 insertions(+), 220 deletions(-) diff --git a/app/static/app.js b/app/static/app.js index 101c9eb..e586126 100644 --- a/app/static/app.js +++ b/app/static/app.js @@ -140,7 +140,7 @@ async function startRecording() { state.heardSound = false; state.silentWarned = false; state.timerInterval = setInterval(updateTimer, 500); - $('record-btn').textContent = '■ Arrêter'; + $('record-btn').querySelector('.rec-label').textContent = 'Arrêter'; $('record-btn').classList.add('recording'); $('pause-btn').classList.remove('hidden', 'paused'); $('pause-btn').textContent = '⏸ Pause'; @@ -203,7 +203,7 @@ function stopRecording(abrupt = false) { setStatus('idle', 'Prêt'); } - $('record-btn').textContent = '● Démarrer'; + $('record-btn').querySelector('.rec-label').textContent = 'Démarrer'; $('record-btn').classList.remove('recording'); $('pause-btn').classList.add('hidden'); state.paused = false; @@ -323,7 +323,7 @@ async function loadMeetings() { const date = new Date(m.created_at).toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' }); li.innerHTML = `${date} · ${fmtTs(m.duration)}`; li.querySelector('.m-title').textContent = m.title; - li.onclick = () => openMeeting(m.id); + li.onclick = () => { openMeeting(m.id); document.body.classList.remove('drawer-open'); }; if (m.id === state.currentMeetingId) li.classList.add('active'); ul.appendChild(li); } @@ -433,6 +433,11 @@ window.addEventListener('focus', () => { if (!state.recording) loadMeetings(); } // rafraîchit régulièrement la liste (réunions faites depuis un autre appareil) setInterval(() => { if (!state.recording) loadMeetings(); }, 20000); +// tiroir latéral (mobile) +const closeDrawer = () => document.body.classList.remove('drawer-open'); +if ($('menu-btn')) $('menu-btn').onclick = () => document.body.classList.toggle('drawer-open'); +if ($('scrim')) $('scrim').onclick = closeDrawer; + $('record-btn').onclick = () => (state.recording ? stopRecording() : startRecording()); $('pause-btn').onclick = togglePause; $('logout-btn').onclick = async () => { await fetch('/api/logout', { method: 'POST' }); location.href = '/login'; }; diff --git a/app/static/index.html b/app/static/index.html index 2791675..c04b64f 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -2,48 +2,60 @@ - + + LiveFlow — Transcription de réunions - + -
-

🎙️ LiveFlow

+
+ +
LiveFlow
Prêt - +
-
- + diff --git a/app/static/login.html b/app/static/login.html index 03aa7cf..8695651 100644 --- a/app/static/login.html +++ b/app/static/login.html @@ -2,39 +2,45 @@ - + + LiveFlow — Connexion - + -