102 lines
5.1 KiB
HTML
102 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>tüit Transkriptor — Einstellungen</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root { --red:#DA251C;--yellow:#FFD802;--bg:#111;--surface:#1a1a1a;--surface2:#232323;--text:#e8e8e8;--muted:#888;--border:#2e2e2e; }
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{font-family:'Overpass',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;}
|
|
header{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border);}
|
|
.header-logo{height:28px;width:auto;display:block;}
|
|
.header-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;}
|
|
.header-appname{font-size:1rem;font-weight:600;letter-spacing:.04em;color:var(--muted);}
|
|
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
|
|
.back-btn{font-size:.75rem;padding:4px 10px;border-radius:20px;background:none;border:1px solid var(--border);color:var(--muted);cursor:pointer;font-family:inherit;text-decoration:none;transition:border-color .15s,color .15s;}
|
|
.back-btn:hover{border-color:var(--red);color:var(--red);}
|
|
main{flex:1;display:flex;flex-direction:column;gap:24px;padding:24px;max-width:700px;width:100%;margin:0 auto;}
|
|
h2{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
|
|
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
|
|
label{font-size:.78rem;color:var(--muted);letter-spacing:.04em;}
|
|
select,input[type=text]{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:.9rem;outline:none;transition:border-color .15s;width:100%;}
|
|
select:focus,input[type=text]:focus{border-color:var(--yellow);}
|
|
.btn-row{display:flex;gap:10px;margin-top:4px;}
|
|
.btn{font-size:.82rem;padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;}
|
|
.btn:hover{border-color:var(--red);}
|
|
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;}
|
|
.btn.primary:hover{background:#b81e16;border-color:#b81e16;}
|
|
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:.85rem;opacity:0;transition:opacity .2s;pointer-events:none;}
|
|
.toast.show{opacity:1;}
|
|
.combined-form{display:none;flex-direction:column;gap:10px;margin-top:10px;padding:12px;background:var(--surface2);border-radius:8px;border:1px solid var(--border);}
|
|
.combined-form.visible{display:flex;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img src="/logo.svg" class="header-logo" alt="tüit">
|
|
<div class="header-divider"></div>
|
|
<span class="header-appname">Transkriptor — Einstellungen</span>
|
|
<div class="header-right">
|
|
<a href="/" class="back-btn">← Zurück</a>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<h2>Audio</h2>
|
|
<div class="field">
|
|
<label>Aufnahmequelle</label>
|
|
<select id="audio-device">
|
|
<option value="">Systemstandard</option>
|
|
</select>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn" id="refresh-devices-btn">Geräte aktualisieren</button>
|
|
<button class="btn" id="create-combined-btn">Combined Source erstellen</button>
|
|
</div>
|
|
<div class="combined-form" id="combined-form">
|
|
<div class="field">
|
|
<label>Mikrofon</label>
|
|
<select id="combined-mic"></select>
|
|
</div>
|
|
<div class="field">
|
|
<label>System-Audio Monitor</label>
|
|
<select id="combined-monitor"></select>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn primary" id="combined-confirm-btn">Erstellen</button>
|
|
<button class="btn" id="combined-cancel-btn">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Verarbeitung</h2>
|
|
<div class="field">
|
|
<label>Whisper Server URL (leer = lokal)</label>
|
|
<input type="text" id="whisper-url" placeholder="http://beastix:8000">
|
|
</div>
|
|
<div class="field">
|
|
<label>Whisper Modell</label>
|
|
<input type="text" id="whisper-model" placeholder="large-v3">
|
|
</div>
|
|
<div class="field">
|
|
<label>Ollama Server URL</label>
|
|
<input type="text" id="ollama-url" placeholder="http://localhost:11434">
|
|
</div>
|
|
<div class="field">
|
|
<label>Ollama Modell</label>
|
|
<select id="ollama-model"></select>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn primary" id="save-btn">Speichern</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<div class="toast" id="toast"></div>
|
|
<script src="/settings.js"></script>
|
|
</body>
|
|
</html>
|