mirror of
https://github.com/R0m1k3/LiveFlow.git
synced 2026-10-11 17:27:19 +02:00
Claude
db7575a8b0
- 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
72 lines
2.9 KiB
HTML
72 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0b0d12">
|
|
<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="stylesheet" href="style.css?v=2">
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<button id="menu-btn" class="icon-btn" aria-label="Réunions">☰</button>
|
|
<div class="brand"><span class="brand-logo">🎙️</span><span>LiveFlow</span></div>
|
|
<span id="status" class="badge idle">Prêt</span>
|
|
<button id="logout-btn" class="icon-btn ghost" title="Se déconnecter">Déconnexion</button>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<aside id="sidebar" class="sidebar">
|
|
<div class="sidebar-head">Réunions</div>
|
|
<ul id="meeting-list" class="meeting-list"></ul>
|
|
</aside>
|
|
<div id="scrim" class="scrim"></div>
|
|
|
|
<main class="main">
|
|
<section class="controls card">
|
|
<input id="title" type="text" placeholder="Titre de la réunion (optionnel)">
|
|
|
|
<div class="control-row">
|
|
<select id="mic-select" title="Choix du micro">
|
|
<option value="">Micro par défaut</option>
|
|
</select>
|
|
<label id="diarization-toggle" class="toggle" title="Identifier qui parle (Locuteur 1, 2...)">
|
|
<input type="checkbox" id="diarization-cb" checked>
|
|
<span>Locuteurs</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="record-row">
|
|
<button id="record-btn" class="record">
|
|
<span class="rec-dot"></span><span class="rec-label">Démarrer</span>
|
|
</button>
|
|
<button id="pause-btn" class="pause hidden">⏸ Pause</button>
|
|
<span id="timer">00:00</span>
|
|
<div id="vu" title="Niveau du micro"><div id="vu-bar"></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="transcript-panel" class="card">
|
|
<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>
|
|
<a id="export-txt" class="chip" download>TXT</a>
|
|
<a id="export-md" class="chip" download>MD</a>
|
|
<a id="export-srt" class="chip" download>SRT</a>
|
|
<a id="export-json" class="chip" download>JSON</a>
|
|
<button id="delete-btn" title="Supprimer la réunion">🗑️</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>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="app.js?v=2"></script>
|
|
</body>
|
|
</html>
|