feat(web): Tailwind-Redesign-UI + Doku (Nachtrag zu 3470c0e)
Eigentliche UI-Dateien: neues Tailwind-Layout (index.html), Theme-Umschalter + Bubble-Stile + Mic-Status (app.js); README-Abschnitt aktualisiert. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter
parent
3470c0e262
commit
7ebba4e755
3 changed files with 91 additions and 40 deletions
|
|
@ -1,43 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<html lang="de" class="h-full">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>Voice Assistant</title>
|
||||
<link rel="stylesheet" href="/style.css?v=5" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>tailwind.config = { darkMode: "class" };</script>
|
||||
<script>
|
||||
// Theme vor dem Rendern setzen (kein Flackern): manuell > System.
|
||||
(function () {
|
||||
try {
|
||||
var t = localStorage.getItem("theme");
|
||||
if (t === "dark" || (!t && matchMedia("(prefers-color-scheme: dark)").matches))
|
||||
document.documentElement.classList.add("dark");
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<aside id="menu">
|
||||
<h2>Voice Assistant</h2>
|
||||
<div id="identity" class="muted">lade …</div>
|
||||
<label id="tts-row">Stimme:
|
||||
<select id="tts">
|
||||
<option value="">Schnell (piper)</option>
|
||||
<option value="chatterbox">Hohe Qualität (chatterbox)</option>
|
||||
<option value="openrouter">Cloud (OpenRouter)</option>
|
||||
</select>
|
||||
</label>
|
||||
<div id="admin" class="hidden">
|
||||
<h3>Admin</h3>
|
||||
<button id="reload-users">Nutzer laden</button>
|
||||
<ul id="user-list"></ul>
|
||||
<a href="/api/metrics" target="_blank" rel="noopener">Metriken</a>
|
||||
</div>
|
||||
<a id="logout" class="hidden" href="#">Abmelden</a>
|
||||
</aside>
|
||||
<body class="h-[100dvh] flex flex-col bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
||||
|
||||
<main id="chat">
|
||||
<div id="messages"></div>
|
||||
<header class="shrink-0 h-14 flex items-center gap-3 px-4 border-b border-slate-200 dark:border-slate-700 bg-white/80 dark:bg-slate-800/80 backdrop-blur">
|
||||
<h1 class="flex-1 truncate font-semibold text-base">Voice Assistant</h1>
|
||||
<select id="tts" title="Stimme"
|
||||
class="text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-transparent px-2 py-1.5">
|
||||
<option value="">Schnell</option>
|
||||
<option value="chatterbox">Hohe Qualität</option>
|
||||
<option value="openrouter">Cloud</option>
|
||||
</select>
|
||||
<button id="admin-toggle" title="Nutzer"
|
||||
class="hidden h-9 w-9 grid place-items-center rounded-lg border border-slate-300 dark:border-slate-600">👥</button>
|
||||
<button id="theme-toggle" title="Tag/Nacht"
|
||||
class="h-9 w-9 grid place-items-center rounded-lg border border-slate-300 dark:border-slate-600">🌙</button>
|
||||
</header>
|
||||
|
||||
<form id="prompt-form">
|
||||
<button type="button" id="mic" title="Mikrofon" aria-label="Mikrofon">🎤</button>
|
||||
<input id="prompt" type="text" placeholder="Nachricht eingeben …" autocomplete="off" />
|
||||
<button type="submit" id="send">Senden</button>
|
||||
</form>
|
||||
<div id="status" class="muted"></div>
|
||||
</main>
|
||||
<div class="shrink-0 flex items-center justify-between px-4 py-1 text-xs text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
|
||||
<span id="identity">lade …</span>
|
||||
<a id="logout" class="hidden hover:underline" href="#">Abmelden</a>
|
||||
</div>
|
||||
<script src="/app.js?v=5"></script>
|
||||
|
||||
<div id="admin" class="hidden shrink-0 px-4 py-2 border-b border-slate-200 dark:border-slate-700 bg-slate-100/60 dark:bg-slate-800/60">
|
||||
<div class="flex items-center gap-2 mb-1 text-sm">
|
||||
<span class="font-medium">Nutzer</span>
|
||||
<button id="reload-users" class="text-xs rounded border border-slate-300 dark:border-slate-600 px-2 py-0.5">aktualisieren</button>
|
||||
</div>
|
||||
<ul id="user-list" class="text-xs text-slate-600 dark:text-slate-300 space-y-0.5 max-h-32 overflow-auto"></ul>
|
||||
</div>
|
||||
|
||||
<main id="messages" class="flex-1 overflow-y-auto px-4 py-4 space-y-3 w-full max-w-3xl mx-auto"></main>
|
||||
|
||||
<footer class="shrink-0 border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+0.6rem)]">
|
||||
<form id="prompt-form" class="flex items-center gap-2 w-full max-w-3xl mx-auto">
|
||||
<button type="button" id="mic" title="Mikrofon"
|
||||
class="shrink-0 h-11 w-11 grid place-items-center rounded-full bg-emerald-600 text-white text-lg">🎤</button>
|
||||
<input id="prompt" type="text" autocomplete="off" placeholder="Nachricht …"
|
||||
class="flex-1 rounded-xl border border-slate-300 dark:border-slate-600 bg-transparent px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||
<button type="submit" id="send"
|
||||
class="shrink-0 rounded-xl bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 font-medium">Senden</button>
|
||||
</form>
|
||||
<div id="status" class="w-full max-w-3xl mx-auto mt-1 min-h-[1rem] text-xs text-slate-500 dark:text-slate-400"></div>
|
||||
</footer>
|
||||
|
||||
<script src="/app.js?v=6"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue