claw/diarization-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(diarization-ui): restyle entire app shell to project-suite look (sidebar + topbar + light tables)

Browse Source
This commit is contained in:
OpenClaw Bot
2026-03-21 15:42:36 +01:00
parent a1e35e98f3
commit 955cd5c5ba
1 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app.py
View File

@@ -129,37 +129,42 @@ def layout(title: str, body: str) -> str:
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<title>{title}</title>
<style>
:root{{--bg:#0b1020;--bg2:#111827;--card:#0f172a;--txt:#e5e7eb;--muted:#94a3b8;--acc:#22d3ee;--acc2:#38bdf8;--ok:#34d399;--border:#1f2937}}
:root{{--bg:#0b1020;--panel:#070c1b;--panel2:#0b1222;--card:#ffffff;--txt:#0f172a;--muted:#64748b;--acc:#0ea5e9;--acc2:#2563eb;--ok:#14b8a6;--border:#e2e8f0}}
*{{box-sizing:border-box}}
body{{font-family:Inter,system-ui,Arial;margin:0;background:linear-gradient(180deg,var(--bg),#020617);color:var(--txt);display:flex;min-height:100vh}}
nav{{width:250px;background:rgba(15,23,42,.92);backdrop-filter:blur(8px);border-right:1px solid var(--border);padding:16px;position:sticky;top:0;height:100vh}}
.brand{{font-weight:700;letter-spacing:.3px;margin:0 0 12px 0}}
nav a{{display:flex;gap:10px;align-items:center;color:var(--txt);text-decoration:none;padding:10px 12px;border-radius:12px;margin:6px 0;border:1px solid transparent}}
nav a:hover{{background:#0b1222;border-color:#243244}}
main{{flex:1;padding:18px;max-width:1200px}}
.card{{background:rgba(15,23,42,.88);border:1px solid var(--border);border-radius:16px;padding:14px;margin:10px 0;box-shadow:0 8px 30px rgba(0,0,0,.25)}}
input,select,textarea,button{{padding:10px 12px;font-size:14px;border-radius:12px;border:1px solid #334155;background:#0b1222;color:var(--txt)}}
button{{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#001018;border:none;font-weight:700}}
button:hover{{filter:brightness(1.05)}}
body{{font-family:Inter,system-ui,Arial;margin:0;background:#f1f5f9;color:var(--txt);display:flex;min-height:100vh}}
nav{{width:236px;background:linear-gradient(180deg,#050a17,#0a1329);color:#e2e8f0;border-right:1px solid #0f172a;padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto}}
.brand{{font-weight:800;letter-spacing:.2px;margin:4px 8px 12px 8px;color:#c7d2fe}}
.navsection{{margin:12px 8px 6px 8px;color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:.08em}}
nav a{{display:flex;gap:10px;align-items:center;color:#e2e8f0;text-decoration:none;padding:10px 10px;border-radius:10px;margin:4px 6px;border:1px solid transparent}}
nav a:hover{{background:#0f1b36;border-color:#1e2a4a}}
.app{{flex:1;display:flex;flex-direction:column;min-width:0}}
.topbar{{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;position:sticky;top:0;z-index:10}}
.topbar h1{{font-size:18px;margin:0;font-weight:700}}
.topbar .right{{margin-left:auto;display:flex;gap:8px;color:#64748b}}
main{{padding:14px;max-width:1400px}}
.card{{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;margin:10px 0;box-shadow:0 2px 10px rgba(15,23,42,.04)}}
input,select,textarea,button{{padding:9px 11px;font-size:14px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;color:#0f172a}}
button{{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;border:none;font-weight:700}}
button:hover{{filter:brightness(1.02)}}
textarea{{width:100%;min-height:150px}}
pre{{white-space:pre-wrap;background:#020617;color:#86efac;padding:12px;border-radius:12px;border:1px solid #1e293b}}
pre{{white-space:pre-wrap;background:#0f172a;color:#a7f3d0;padding:12px;border-radius:10px;border:1px solid #1e293b}}
.mdview{{line-height:1.55}}
.mdview h1,.mdview h2,.mdview h3{{margin:16px 0 8px}}
.mdview p{{margin:10px 0}}
.mdview ul,.mdview ol{{padding-left:22px}}
.mdview code{{background:#0b1222;padding:2px 5px;border-radius:6px}}
.mdview pre code{{display:block;padding:10px}}
.mdview blockquote{{border-left:3px solid #334155;padding-left:10px;color:#cbd5e1}}
.mdview code{{background:#e2e8f0;padding:2px 5px;border-radius:6px}}
.mdview pre code{{display:block;padding:10px;background:transparent}}
.mdview blockquote{{border-left:3px solid #94a3b8;padding-left:10px;color:#334155}}
.row{{display:flex;gap:8px;flex-wrap:wrap;align-items:center}}
small{{color:var(--muted)}}
.hint{{color:var(--muted);font-size:13px}}
@media (max-width:900px){{nav{{width:86px;padding:10px}} nav a span{{display:none}} .brand{{font-size:12px}} main{{padding:12px}}}}
.modal-backdrop{{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:2000}}
.modal{{width:min(92vw,520px);background:#0b1222;border:1px solid #334155;border-radius:16px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}}
@media (max-width:900px){{nav{{width:76px;padding:8px}} nav a span{{display:none}} .brand{{font-size:11px}} .topbar h1{{font-size:15px}} main{{padding:10px}}}}
.modal-backdrop{{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:2000}}
.modal{{width:min(92vw,520px);background:#fff;border:1px solid #cbd5e1;border-radius:14px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.25)}}
.modal h4{{margin:0 0 8px 0}}
.modal .actions{{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}}
.modal input,.modal select{{width:100%}}
.iconbtn{{text-decoration:none;font-size:18px;padding:2px 6px;border-radius:8px;border:1px solid #334155;background:#0b1222}}
.iconbtn{{text-decoration:none;font-size:18px;padding:2px 6px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#0f172a}}
</style>
<script>
if ('serviceWorker' in navigator) {{ window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(()=>{{}})); }}
@@ -196,14 +201,23 @@ window.uiSelect = async function(title, options, placeholder='') {{
<div id='modal-backdrop' class='modal-backdrop'><div id='modal-box' class='modal'></div></div>
<nav>
<div class='brand'>🎙️ Audio Copilot</div>
<a href='/'><span>⤴️</span><span>Upload</span></a>
<a href='/library'><span>🗂️</span><span>Datenbank</span></a>
<a href='/prompts'><span>🧩</span><span>Prompts</span></a>
<div class='navsection'>Navigation</div>
<a href='/'><span>🏠</span><span>Home / Upload</span></a>
<a href='/library'><span>📁</span><span>Projekte</span></a>
<a href='/prompts'><span>🧩</span><span>Vorlagen</span></a>
<div class='navsection'>Automatisierung</div>
<a href='/run'><span>🤖</span><span>Prompt ausführen</span></a>
<a href='/jobs'><span>⏳</span><span>Hintergrundjobs</span></a>
<div class='navsection'>System</div>
<a href='/healthz'><span>💚</span><span>Health</span></a>
</nav>
<main>{body}</main>
<div class='app'>
<div class='topbar'>
<h1>{title}</h1>
<div class='right'>🔍 🔔 ⚙️ 👤</div>
</div>
<main>{body}</main>
</div>
</body></html>
"""