UI polish: consistent nav, login glow, cleaner header

- Consistent nav across all pages (Team UI / Lab / Admin / Logout)
- Main header: separator between nav and auth actions, smaller text
- Login box: subtle purple glow shadow, wider card
- Demo banner: gradient background, bolder text, larger font
- Lab + Admin: matching nav with logout link
- Reduced visual clutter in main header

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
root 2026-03-25 03:39:52 -05:00
parent 211e11b718
commit c493b10d2d

View File

@ -135,7 +135,7 @@ LOGIN_HTML = """
:root{--bg:#0a0c10;--surface:#151820;--border:#272d3f;--text:#e4e4e7;--text2:#a1a1aa;--accent:#6366f1;--accent2:#818cf8;--red:#ef4444;--green:#22c55e}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px;width:360px}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:36px;width:380px;box-shadow:0 0 40px rgba(99,102,241,0.06),0 8px 32px rgba(0,0,0,0.3)}
.login-box h1{font-size:22px;margin-bottom:6px;font-weight:700}
.login-box h1 span{background:linear-gradient(135deg,var(--accent2),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-box .sub{color:var(--text2);font-size:13px;margin-bottom:24px}
@ -537,13 +537,14 @@ HTML = r"""
<header>
<h1><span>LLM</span> Team</h1>
<div class="badge" id="model-count"><span class="dot"></span>0 models</div>
<div style="margin-left:auto;display:flex;gap:6px">
<button onclick="toggleHistory()" style="color:var(--text2);background:none;font-size:12px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;cursor:pointer;">History</button>
<a href="/lab" style="color:var(--green);text-decoration:none;font-size:12px;padding:4px 10px;border:1px solid rgba(34,197,94,0.3);border-radius:6px;">Lab</a>
<a href="/admin" style="color:var(--text2);text-decoration:none;font-size:12px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;">Admin</a>
<button id="demo-toggle" onclick="toggleDemo()" style="display:none;color:var(--orange);background:none;font-size:11px;padding:4px 8px;border:1px solid rgba(245,158,11,0.3);border-radius:6px;cursor:pointer">Demo</button>
<a href="/logout" style="color:#ef4444;text-decoration:none;font-size:11px;padding:4px 8px;border:1px solid rgba(239,68,68,0.2);border-radius:6px;opacity:0.7">Logout</a>
</div>
<nav style="margin-left:auto;display:flex;align-items:center;gap:4px">
<button onclick="toggleHistory()" style="color:var(--text2);background:none;font-size:11px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;cursor:pointer">History</button>
<a href="/lab" style="color:var(--green);text-decoration:none;font-size:11px;padding:5px 10px;border:1px solid rgba(34,197,94,0.2);border-radius:6px">Lab</a>
<a href="/admin" style="color:var(--text2);text-decoration:none;font-size:11px;padding:5px 10px;border:1px solid var(--border);border-radius:6px">Admin</a>
<span style="width:1px;height:16px;background:var(--border);margin:0 2px"></span>
<button id="demo-toggle" onclick="toggleDemo()" style="display:none;color:var(--orange);background:none;font-size:10px;padding:4px 8px;border:1px solid rgba(245,158,11,0.3);border-radius:6px;cursor:pointer">Demo</button>
<a href="/logout" style="color:var(--text2);text-decoration:none;font-size:10px;padding:4px 8px;opacity:0.5">Logout</a>
</nav>
</header>
<div class="grid">
<div class="left-scroll">
@ -1153,8 +1154,8 @@ function updateDemoUI(active) {
if (!banner) {
const b = document.createElement('div');
b.id = 'demo-banner';
b.style.cssText = 'position:fixed;top:0;left:0;right:0;background:rgba(34,197,94,0.1);border-bottom:1px solid rgba(34,197,94,0.3);color:#22c55e;text-align:center;font-size:11px;padding:4px;z-index:50;font-weight:500';
b.textContent = 'DEMO MODE — public access enabled';
b.style.cssText = 'position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(34,197,94,0.08),rgba(34,197,94,0.15),rgba(34,197,94,0.08));border-bottom:1px solid rgba(34,197,94,0.25);color:#22c55e;text-align:center;font-size:12px;padding:6px;z-index:50;font-weight:600;letter-spacing:1px';
b.textContent = 'DEMO MODE';
document.body.prepend(b);
}
} else if (banner) {
@ -1274,7 +1275,7 @@ ADMIN_HTML = r"""
<div class="container">
<header>
<h1><span>LLM</span> Team Admin</h1>
<a href="/">Team UI</a> <a href="/lab" style="color:var(--green)">Lab</a>
<nav style="margin-left:auto;display:flex;gap:8px;align-items:center"><a href="/">Team UI</a><a href="/lab" style="color:var(--green)">Lab</a><span style="opacity:0.3">|</span><a href="/logout" style="opacity:0.5;font-size:11px">Logout</a></nav>
</header>
<div class="tabs">
<div class="tab active" onclick="switchTab('providers')">Providers</div>
@ -1731,7 +1732,7 @@ LAB_HTML = r"""
<div class="c">
<header>
<h1><span>Lab</span> AutoResearch</h1>
<nav><a href="/">Team UI</a><a href="/admin">Admin</a></nav>
<nav style="margin-left:auto;display:flex;gap:8px;align-items:center"><a href="/">Team UI</a><a href="/admin">Admin</a><span style="opacity:0.3">|</span><a href="/logout" style="opacity:0.5;font-size:11px">Logout</a></nav>
</header>
<div class="tabs">
<div class="tab active" onclick="labTab('experiments')">Experiments</div>