7ebba4e755
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>
65 lines
3.5 KiB
HTML
65 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="de" class="h-full">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>Voice Assistant</title>
|
|
<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 class="h-[100dvh] flex flex-col bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-100">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|