Vertice restyle: fullscreen layout, lime/gray palette, mini-canvas project cards
- Token swap to near-black grays + lime accent + yellow secondary across index.css, all shared chart/card components, and every feature page - PlatformShell: 62px icon rail, 46px telemetry ticker topbar, containr wordmark, env pill; mobile header preserved - ProjectsPage rebuilt: cursor heading, host stat row (CPU sparkline, MEM/DISK meters, DEPLOYS), Railway-style mini-canvas project cards, mono deployment feed table - All layout-level max-w-[1400px] caps removed -> w-full px-8 - New lime containr.svg synced to public/, root, and dist - Auth glow, chart series colors, service-type colors retuned to palette - Demo mode now seeds representative host telemetry - Smoke test updated for new heading/copy Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
No files matched your search
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>01 — Midnight Ops</title>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0d0e12; color:#e8e9f0; display:flex; min-height:100vh; }
|
||||
.rail { width:64px; border-right:1px solid rgba(255,255,255,.06); background:#101116; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:22px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; }
|
||||
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#5c5f6e; }
|
||||
.rail .ic.on { background:rgba(232,49,106,.14); color:#e8316a; }
|
||||
main { flex:1; }
|
||||
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
|
||||
.search { background:#17181e; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#6b6e7d; font-size:13px; width:280px; }
|
||||
.btn-upgrade { margin-left:auto; background:#e8316a; color:#fff; border:none; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:600; }
|
||||
.crumb { padding:14px 24px 10px; font-size:13px; color:#6b6e7d; }
|
||||
.crumb b { color:#9295a4; font-weight:500; }
|
||||
.svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
|
||||
.avatar { width:46px; height:46px; border-radius:13px; background:#e8316a; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
|
||||
.svc h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; }
|
||||
.badge { display:inline-flex; align-items:center; gap:5px; background:rgba(61,214,140,.12); color:#3dd68c; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.05em; }
|
||||
.badge i { width:5px; height:5px; border-radius:50%; background:#3dd68c; }
|
||||
.sub { font-size:12.5px; color:#6b6e7d; margin-top:4px; }
|
||||
.acts { margin-left:auto; display:flex; gap:10px; }
|
||||
.btn-stop { background:#f5f6f8; color:#0d0e12; border:none; border-radius:11px; padding:10px 20px; font-weight:700; font-size:13px; letter-spacing:.02em; }
|
||||
.btn-restart { background:#e8316a; color:#fff; border:none; border-radius:11px; padding:10px 20px; font-weight:700; font-size:13px; }
|
||||
.tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13.5px; }
|
||||
.tab { padding:11px 2px; color:#6b6e7d; }
|
||||
.tab.on { color:#e8e9f0; font-weight:600; border-bottom:2px solid #e8316a; }
|
||||
.grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
|
||||
.card { background:#17181e; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px; display:flex; flex-direction:column; }
|
||||
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:600; }
|
||||
.cicon { width:34px; height:34px; border-radius:9px; background:#1e1f27; border:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:#9295a4; font-size:15px; }
|
||||
.big { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
|
||||
.meta { font-size:12px; color:#6b6e7d; margin-top:5px; }
|
||||
.meta b { font-weight:700; } .g{color:#3dd68c}.a{color:#f0a040}
|
||||
.segbar { display:flex; gap:5px; height:34px; margin-top:14px; }
|
||||
.segbar div { border-radius:6px; }
|
||||
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
|
||||
.foot span { font-size:13px; color:#6b6e7d; font-weight:500; }
|
||||
.arrow { width:30px; height:30px; border-radius:9px; background:#e8316a; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
|
||||
.legend { display:flex; gap:26px; margin-top:12px; font-size:12px; color:#6b6e7d; }
|
||||
.legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
|
||||
.wide { grid-column:span 1; }
|
||||
.bars { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; }
|
||||
.bars div { flex:1; background:linear-gradient(180deg,#e8316a,#e8316a33); border-radius:4px 4px 0 0; }
|
||||
.speed { font-size:12px; color:#6b6e7d; display:flex; gap:6px; align-items:center; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
|
||||
<div class="crumb">‹ Servers / <b>api-gateway</b></div>
|
||||
<div class="svc">
|
||||
<div class="avatar">⏸</div>
|
||||
<div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ · Project Information ›</div></div>
|
||||
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
|
||||
</div>
|
||||
<div class="tabs"><div class="tab on">◮ Metrics</div><div class="tab">↧ Requests</div><div class="tab">⑃ APIs</div><div class="tab">⚙ Config</div></div>
|
||||
<div class="grid">
|
||||
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> Daily usage</div>
|
||||
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff8a5c" stroke-width="2"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)" opacity=".6"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5c" stop-opacity=".25"/><stop offset="1" stop-color="#ff8a5c" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> Daily usage</div>
|
||||
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(255,255,255,.07)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="#9c7ef0" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#6b6e7d" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#e8e9f0" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff8a5c">220MB Average</b> cached images and files</div>
|
||||
<div class="segbar"><div style="width:48%;background:#ff8a5c"></div><div style="width:20%;background:#9c7ef0"></div><div style="width:32%;background:rgba(255,255,255,.07)"></div></div>
|
||||
<div class="legend"><span><i style="background:#ff8a5c"></i>Cache <b style="color:#e8e9f0">212 MB</b> 12%</span><span><i style="background:#9c7ef0"></i>Non-Cache <b style="color:#e8e9f0">85 MB</b> 4%</span><span><i style="background:#444"></i>Total <b style="color:#e8e9f0">1.75 GB</b></span></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
|
||||
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> Last scan today</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#e8316a">↑</span> 5.2 Mbps up</div></div>
|
||||
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>02 — Terminal</title>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'JetBrains Mono','SF Mono',monospace; background:#0a0a0a; color:#d4d4d4; display:flex; min-height:100vh; font-size:13px; }
|
||||
.rail { width:56px; border-right:1px solid #1f1f1f; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:18px; }
|
||||
.rail .mark { width:32px; height:32px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; }
|
||||
.rail .ic { color:#404040; font-size:14px; } .rail .ic.on { color:#4ade80; }
|
||||
main { flex:1; }
|
||||
.topbar { display:flex; align-items:center; gap:14px; padding:10px 24px; border-bottom:1px solid #1f1f1f; }
|
||||
.search { border:1px solid #262626; padding:6px 12px; color:#525252; width:300px; font-size:12px; }
|
||||
.search::before { content:'$ '; color:#4ade80; }
|
||||
.btn-upgrade { margin-left:auto; background:#4ade80; color:#0a0a0a; border:none; padding:7px 16px; font-family:inherit; font-size:12px; font-weight:700; }
|
||||
.crumb { padding:12px 24px 8px; font-size:12px; color:#525252; }
|
||||
.crumb b { color:#a3a3a3; font-weight:400; }
|
||||
.svc { display:flex; align-items:center; padding:0 24px 16px; gap:14px; }
|
||||
.avatar { width:42px; height:42px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; }
|
||||
.svc h1 { font-size:17px; font-weight:700; }
|
||||
.badge { color:#4ade80; font-size:11px; border:1px solid #4ade8033; padding:2px 8px; }
|
||||
.badge::before { content:'● '; }
|
||||
.sub { font-size:11px; color:#525252; margin-top:4px; }
|
||||
.acts { margin-left:auto; display:flex; gap:8px; }
|
||||
.btn-stop { background:transparent; color:#d4d4d4; border:1px solid #404040; padding:9px 18px; font-family:inherit; font-size:12px; font-weight:700; }
|
||||
.btn-restart { background:#4ade80; color:#0a0a0a; border:none; padding:9px 18px; font-family:inherit; font-size:12px; font-weight:700; }
|
||||
.tabs { display:flex; gap:22px; padding:0 24px; border-bottom:1px solid #1f1f1f; font-size:12px; }
|
||||
.tab { padding:10px 2px; color:#525252; }
|
||||
.tab.on { color:#4ade80; border-bottom:1px solid #4ade80; }
|
||||
.grid { padding:18px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
|
||||
.card { border:1px solid #1f1f1f; padding:18px; display:flex; flex-direction:column; background:#0e0e0e; }
|
||||
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12px; color:#a3a3a3; }
|
||||
.card .hd::before { content:'▣'; color:#4ade80; font-size:11px; }
|
||||
.big { font-size:30px; font-weight:700; color:#e5e5e5; }
|
||||
.meta { font-size:11px; color:#525252; margin-top:4px; }
|
||||
.g{color:#4ade80}.a{color:#fbbf24}
|
||||
.segbar { display:flex; gap:3px; height:26px; margin-top:14px; }
|
||||
.legend { display:flex; gap:20px; margin-top:12px; font-size:11px; color:#525252; }
|
||||
.legend b { color:#d4d4d4; font-weight:400; }
|
||||
.foot { margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#525252; }
|
||||
.foot .arrow { color:#4ade80; }
|
||||
.bars { display:flex; align-items:flex-end; gap:4px; height:70px; margin-top:10px; }
|
||||
.bars div { flex:1; background:#4ade80; opacity:.85; }
|
||||
.speed { font-size:11px; color:#525252; display:flex; gap:6px; }
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic">~</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar"><div class="search">search projects, builds, logs_</div><button class="btn-upgrade">upgrade --pro</button></div>
|
||||
<div class="crumb">~/servers/<b>api-gateway</b></div>
|
||||
<div class="svc">
|
||||
<div class="avatar">AG</div>
|
||||
<div><h1>api-gateway <span class="badge">ACTIVE</span></h1><div class="sub">→ https://api.containr.dev · ./project-info</div></div>
|
||||
<div class="acts"><button class="btn-stop">[ stop ]</button><button class="btn-restart">[ restart ]</button></div>
|
||||
</div>
|
||||
<div class="tabs"><div class="tab on">metrics</div><div class="tab">requests</div><div class="tab">apis</div><div class="tab">config</div></div>
|
||||
<div class="grid">
|
||||
<div class="card"><div class="hd">cpu_usage</div><div class="big">12%</div><div class="meta"><span class="g">[OK]</span> daily usage</div>
|
||||
<svg viewBox="0 0 200 55" style="margin-top:12px;width:100%"><path d="M0 42 L18 40 L36 44 L54 38 L72 41 L90 33 L108 37 L126 28 L144 32 L162 20 L180 24 L200 12" fill="none" stroke="#4ade80" stroke-width="1.5"/></svg>
|
||||
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
|
||||
<div class="card"><div class="hd">ram_usage</div><div class="big">65%</div><div class="meta"><span class="a">[WARN]</span> daily usage</div>
|
||||
<svg viewBox="0 0 160 80" style="margin:8px auto 0;display:block"><path d="M14 72 A 62 62 0 0 1 146 72" fill="none" stroke="#262626" stroke-width="10"/><path d="M14 72 A 62 62 0 0 1 115 32" fill="none" stroke="#fbbf24" stroke-width="10" stroke-dasharray="4 3"/><text x="80" y="58" text-anchor="middle" fill="#525252" font-size="8">USED</text><text x="80" y="72" text-anchor="middle" fill="#d4d4d4" font-size="11" font-weight="700">5.4G/8G</text></svg>
|
||||
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
|
||||
<div class="card"><div class="hd">cache</div><div class="big">352M</div><div class="meta"><span class="a">220M avg</span> cached images/files</div>
|
||||
<div class="segbar"><div style="width:48%;background:#4ade80"></div><div style="width:20%;background:#fbbf24"></div><div style="width:32%;background:#1f1f1f"></div></div>
|
||||
<div class="legend"><span>cache <b>212M</b></span><span>other <b>85M</b></span><span>total <b>1.75G</b></span></div>
|
||||
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
|
||||
<div class="card" style="grid-column:span 2"><div class="hd">active_users</div><div class="big">475,231</div><div class="meta">users online right now</div>
|
||||
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
|
||||
<div class="foot"><span>[ details ]</span><span class="arrow">→</span></div></div>
|
||||
<div class="card"><div class="hd">performance</div><div class="big">89%</div><div class="meta"><span class="g">[OK]</span> last scan today</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;margin-top:12px"><div class="speed">↓ 10.4 Mbps</div><div class="speed">↑ 5.2 Mbps</div></div>
|
||||
<div class="foot"><span>[ check speed ]</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>03 — Aurora Glass</title>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; color:#eef0ff; display:flex; min-height:100vh;
|
||||
background:radial-gradient(1200px 800px at 15% -10%, #3b2a6e 0%, transparent 55%),
|
||||
radial-gradient(1000px 700px at 90% 10%, #6e1f4a 0%, transparent 55%),
|
||||
radial-gradient(900px 900px at 50% 110%, #1f3a5e 0%, transparent 55%), #0b0d18; }
|
||||
.rail { width:68px; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
|
||||
.rail .mark { width:40px; height:40px; border-radius:14px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(255,92,138,.4); }
|
||||
.rail .ic { width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:rgba(238,240,255,.35); background:rgba(255,255,255,.04); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.07); }
|
||||
.rail .ic.on { background:linear-gradient(135deg,rgba(255,92,138,.25),rgba(160,108,255,.25)); color:#fff; border-color:rgba(255,140,180,.3); }
|
||||
main { flex:1; padding:0 8px; }
|
||||
.topbar { display:flex; align-items:center; gap:14px; padding:16px 24px 4px; }
|
||||
.search { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:9px 16px; color:rgba(238,240,255,.5); font-size:13px; width:280px; backdrop-filter:blur(12px); }
|
||||
.btn-upgrade { margin-left:auto; background:linear-gradient(135deg,#ff5c8a,#a06cff); color:#fff; border:none; border-radius:13px; padding:9px 20px; font-size:13px; font-weight:600; box-shadow:0 4px 20px rgba(200,80,160,.35); }
|
||||
.crumb { padding:14px 24px 8px; font-size:13px; color:rgba(238,240,255,.45); }
|
||||
.crumb b { color:rgba(238,240,255,.8); font-weight:500; }
|
||||
.svc { display:flex; align-items:center; padding:0 24px 20px; gap:14px; }
|
||||
.avatar { width:50px; height:50px; border-radius:16px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; box-shadow:0 6px 24px rgba(255,92,138,.35); }
|
||||
.svc h1 { font-size:21px; font-weight:700; letter-spacing:-.4px; }
|
||||
.badge { display:inline-flex; align-items:center; gap:5px; background:rgba(80,227,194,.14); color:#50e3c2; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
|
||||
.badge i { width:5px; height:5px; border-radius:50%; background:#50e3c2; box-shadow:0 0 8px #50e3c2; }
|
||||
.sub { font-size:12.5px; color:rgba(238,240,255,.45); margin-top:4px; }
|
||||
.acts { margin-left:auto; display:flex; gap:10px; }
|
||||
.btn-stop { background:rgba(255,255,255,.09); color:#eef0ff; border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:10px 20px; font-weight:600; font-size:13px; backdrop-filter:blur(10px); }
|
||||
.btn-restart { background:linear-gradient(135deg,#ff5c8a,#a06cff); color:#fff; border:none; border-radius:13px; padding:10px 20px; font-weight:700; font-size:13px; box-shadow:0 4px 20px rgba(200,80,160,.35); }
|
||||
.tabs { display:flex; gap:8px; padding:0 24px 18px; font-size:13px; }
|
||||
.tab { padding:8px 16px; color:rgba(238,240,255,.5); border-radius:11px; }
|
||||
.tab.on { color:#fff; font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
|
||||
.grid { padding:0 24px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
|
||||
.card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:20px; display:flex; flex-direction:column; backdrop-filter:blur(18px); box-shadow:0 8px 32px rgba(0,0,0,.25); }
|
||||
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13.5px; font-weight:600; }
|
||||
.cicon { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:center; font-size:14px; }
|
||||
.big { font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1; }
|
||||
.meta { font-size:12px; color:rgba(238,240,255,.45); margin-top:5px; }
|
||||
.meta b { font-weight:600; } .g{color:#50e3c2}.a{color:#fbbf24}
|
||||
.segbar { display:flex; gap:5px; height:32px; margin-top:14px; }
|
||||
.segbar div { border-radius:9px; }
|
||||
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
|
||||
.foot span { font-size:13px; color:rgba(238,240,255,.5); font-weight:500; }
|
||||
.arrow { width:30px; height:30px; border-radius:10px; background:linear-gradient(135deg,#ff5c8a,#a06cff); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; box-shadow:0 3px 14px rgba(200,80,160,.4); }
|
||||
.legend { display:flex; gap:24px; margin-top:12px; font-size:12px; color:rgba(238,240,255,.5); }
|
||||
.legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
|
||||
.legend b { color:#eef0ff; font-weight:600; }
|
||||
.bars { display:flex; align-items:flex-end; gap:6px; height:76px; margin-top:10px; }
|
||||
.bars div { flex:1; background:linear-gradient(180deg,#ff5c8a,#a06cff88); border-radius:5px 5px 0 0; }
|
||||
.speed { font-size:12px; color:rgba(238,240,255,.5); display:flex; gap:6px; align-items:center; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="6"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
|
||||
<div class="crumb">‹ Servers / <b>api-gateway</b></div>
|
||||
<div class="svc">
|
||||
<div class="avatar">⏸</div>
|
||||
<div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ · Project Information ›</div></div>
|
||||
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
|
||||
</div>
|
||||
<div class="tabs"><div class="tab on">Metrics</div><div class="tab">Requests</div><div class="tab">APIs</div><div class="tab">Config</div></div>
|
||||
<div class="grid">
|
||||
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> · Daily usage</div>
|
||||
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff9a6c" stroke-width="2.5" stroke-linecap="round"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9a6c" stop-opacity=".3"/><stop offset="1" stop-color="#ff9a6c" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> · Daily usage</div>
|
||||
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><defs><linearGradient id="ram" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#a06cff"/><stop offset="1" stop-color="#ff5c8a"/></linearGradient></defs><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(255,255,255,.08)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="url(#ram)" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="rgba(238,240,255,.45)" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#eef0ff" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff9a6c">220MB Average</b> · cached images and files</div>
|
||||
<div class="segbar"><div style="width:48%;background:linear-gradient(135deg,#ff9a6c,#ff5c8a)"></div><div style="width:20%;background:linear-gradient(135deg,#a06cff,#6c8ef0)"></div><div style="width:32%;background:rgba(255,255,255,.08)"></div></div>
|
||||
<div class="legend"><span><i style="background:#ff9a6c"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#a06cff"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:rgba(255,255,255,.25)"></i>Total <b>1.75 GB</b></span></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
|
||||
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> · Last scan today</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#ff5c8a">↑</span> 5.2 Mbps up</div></div>
|
||||
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>04 — Paper Ops (Light)</title>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#f2f0ea; color:#17171c; display:flex; min-height:100vh; }
|
||||
.rail { width:64px; border-right:1.5px solid #17171c; background:#faf9f6; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:11px; background:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; display:flex; align-items:center; justify-content:center; }
|
||||
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#8a8a92; }
|
||||
.rail .ic.on { background:#fff; color:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; }
|
||||
main { flex:1; }
|
||||
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1.5px solid #17171c; background:#faf9f6; }
|
||||
.search { background:#fff; border:1.5px solid #17171c; border-radius:9px; padding:7px 14px; color:#8a8a92; font-size:13px; width:280px; }
|
||||
.btn-upgrade { margin-left:auto; background:#e8316a; color:#fff; border:1.5px solid #17171c; border-radius:9px; padding:8px 18px; font-size:13px; font-weight:700; box-shadow:3px 3px 0 #17171c; }
|
||||
.crumb { padding:14px 24px 10px; font-size:13px; color:#8a8a92; }
|
||||
.crumb b { color:#17171c; font-weight:600; }
|
||||
.svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
|
||||
.avatar { width:46px; height:46px; border-radius:13px; background:#e8316a; border:1.5px solid #17171c; box-shadow:3px 3px 0 #17171c; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#fff; }
|
||||
.svc h1 { font-size:20px; font-weight:800; letter-spacing:-.5px; }
|
||||
.badge { display:inline-flex; align-items:center; gap:5px; background:#d9f5e5; color:#0d7a45; font-size:10px; font-weight:800; padding:3px 9px; border-radius:4px; border:1.5px solid #17171c; letter-spacing:.05em; }
|
||||
.sub { font-size:12.5px; color:#8a8a92; margin-top:4px; }
|
||||
.sub a { color:#17171c; }
|
||||
.acts { margin-left:auto; display:flex; gap:10px; }
|
||||
.btn-stop { background:#fff; color:#17171c; border:1.5px solid #17171c; border-radius:11px; padding:10px 20px; font-weight:800; font-size:13px; box-shadow:3px 3px 0 #17171c; }
|
||||
.btn-restart { background:#e8316a; color:#fff; border:1.5px solid #17171c; border-radius:11px; padding:10px 20px; font-weight:800; font-size:13px; box-shadow:3px 3px 0 #17171c; }
|
||||
.tabs { display:flex; gap:24px; padding:0 24px; border-bottom:1.5px solid #17171c; font-size:13.5px; }
|
||||
.tab { padding:11px 2px; color:#8a8a92; font-weight:600; }
|
||||
.tab.on { color:#17171c; border-bottom:3px solid #e8316a; }
|
||||
.grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
|
||||
.card { background:#fff; border:1.5px solid #17171c; border-radius:14px; padding:20px; display:flex; flex-direction:column; box-shadow:4px 4px 0 rgba(23,23,28,.9); }
|
||||
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:700; }
|
||||
.cicon { width:34px; height:34px; border-radius:9px; background:#f2f0ea; border:1.5px solid #17171c; display:flex; align-items:center; justify-content:center; font-size:15px; }
|
||||
.big { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
|
||||
.meta { font-size:12px; color:#8a8a92; margin-top:5px; }
|
||||
.meta b { font-weight:800; } .g{color:#0d7a45}.a{color:#c47a00}
|
||||
.segbar { display:flex; gap:5px; height:34px; margin-top:14px; }
|
||||
.segbar div { border:1.5px solid #17171c; border-radius:6px; }
|
||||
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
|
||||
.foot span { font-size:13px; color:#8a8a92; font-weight:600; }
|
||||
.arrow { width:30px; height:30px; border-radius:9px; background:#e8316a; border:1.5px solid #17171c; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; box-shadow:2px 2px 0 #17171c; }
|
||||
.legend { display:flex; gap:26px; margin-top:12px; font-size:12px; color:#8a8a92; }
|
||||
.legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; border:1.5px solid #17171c; }
|
||||
.legend b { color:#17171c; }
|
||||
.bars { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; }
|
||||
.bars div { flex:1; background:#e8316a; border:1.5px solid #17171c; border-radius:3px 3px 0 0; }
|
||||
.speed { font-size:12px; color:#8a8a92; display:flex; gap:6px; align-items:center; font-weight:600; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
|
||||
<div class="crumb">‹ Servers / <b>api-gateway</b></div>
|
||||
<div class="svc">
|
||||
<div class="avatar">⏸</div>
|
||||
<div><h1>api-gateway <span class="badge">● ACTIVE</span></h1><div class="sub"><a href="#">https://api.containr.dev ↗</a> · Project Information ›</div></div>
|
||||
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
|
||||
</div>
|
||||
<div class="tabs"><div class="tab on">◮ Metrics</div><div class="tab">↧ Requests</div><div class="tab">⑃ APIs</div><div class="tab">⚙ Config</div></div>
|
||||
<div class="grid">
|
||||
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">Good</b> · Daily usage</div>
|
||||
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#ff8a5c" stroke-width="2.5"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="#ff8a5c" opacity=".12"/></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">Average</b> · Daily usage</div>
|
||||
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="#e3e0d8" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="#9c7ef0" stroke-width="13" stroke-dasharray="5 4" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#8a8a92" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#17171c" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#ff6a3c">220MB Average</b> cached images and files</div>
|
||||
<div class="segbar"><div style="width:48%;background:#ff8a5c"></div><div style="width:20%;background:#9c7ef0"></div><div style="width:32%;background:#e3e0d8"></div></div>
|
||||
<div class="legend"><span><i style="background:#ff8a5c"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#9c7ef0"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:#e3e0d8"></i>Total <b>1.75 GB</b></span></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">User active right now</div>
|
||||
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">Good</b> · Last scan today</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#e8316a">↑</span> 5.2 Mbps up</div></div>
|
||||
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>05 — Orbit Slate</title>
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0f1420; color:#e2e8f2; display:flex; min-height:100vh; }
|
||||
.rail { width:66px; border-right:1px solid rgba(148,163,184,.1); background:#0c101a; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:20px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(34,211,238,.35); }
|
||||
.rail .ic { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#475569; font-size:15px; }
|
||||
.rail .ic.on { color:#22d3ee; background:rgba(34,211,238,.1); }
|
||||
main { flex:1; }
|
||||
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid rgba(148,163,184,.1); }
|
||||
.search { background:#151b2a; border:1px solid rgba(148,163,184,.12); border-radius:999px; padding:7px 16px; color:#64748b; font-size:13px; width:300px; }
|
||||
.btn-upgrade { margin-left:auto; background:transparent; color:#22d3ee; border:1px solid rgba(34,211,238,.4); border-radius:999px; padding:7px 18px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
|
||||
.crumb { padding:14px 24px 10px; font-size:11px; color:#64748b; letter-spacing:.14em; text-transform:uppercase; }
|
||||
.crumb b { color:#94a3b8; font-weight:600; }
|
||||
.svc { display:flex; align-items:center; padding:0 24px 18px; gap:14px; }
|
||||
.avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; box-shadow:0 0 22px rgba(34,211,238,.3); }
|
||||
.svc h1 { font-size:19px; font-weight:700; letter-spacing:-.3px; }
|
||||
.badge { display:inline-flex; align-items:center; gap:5px; background:rgba(52,211,153,.1); color:#34d399; font-size:9px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.12em; border:1px solid rgba(52,211,153,.25); }
|
||||
.badge i { width:5px; height:5px; border-radius:50%; background:#34d399; box-shadow:0 0 6px #34d399; }
|
||||
.sub { font-size:12px; color:#64748b; margin-top:4px; }
|
||||
.acts { margin-left:auto; display:flex; gap:10px; }
|
||||
.btn-stop { background:transparent; color:#e2e8f2; border:1px solid rgba(148,163,184,.3); border-radius:999px; padding:9px 20px; font-weight:600; font-size:12px; letter-spacing:.08em; }
|
||||
.btn-restart { background:linear-gradient(135deg,#22d3ee,#6366f1); color:#fff; border:none; border-radius:999px; padding:9px 20px; font-weight:700; font-size:12px; letter-spacing:.08em; box-shadow:0 0 18px rgba(34,211,238,.3); }
|
||||
.tabs { display:flex; gap:26px; padding:0 24px; border-bottom:1px solid rgba(148,163,184,.1); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
|
||||
.tab { padding:11px 2px; color:#64748b; }
|
||||
.tab.on { color:#22d3ee; font-weight:700; border-bottom:2px solid #22d3ee; }
|
||||
.grid { padding:20px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
|
||||
.card { background:#131a29; border:1px solid rgba(148,163,184,.1); border-radius:14px; padding:20px; display:flex; flex-direction:column; }
|
||||
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
|
||||
.cicon { width:32px; height:32px; border-radius:50%; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.18); display:flex; align-items:center; justify-content:center; color:#22d3ee; font-size:13px; }
|
||||
.big { font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1; }
|
||||
.meta { font-size:11px; color:#64748b; margin-top:5px; letter-spacing:.04em; }
|
||||
.meta b { font-weight:700; } .g{color:#34d399}.a{color:#fbbf24}
|
||||
.segbar { display:flex; gap:4px; height:30px; margin-top:14px; }
|
||||
.segbar div { border-radius:999px; }
|
||||
.foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; }
|
||||
.foot span { font-size:12px; color:#64748b; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
|
||||
.arrow { width:28px; height:28px; border-radius:50%; border:1px solid rgba(34,211,238,.4); display:flex; align-items:center; justify-content:center; color:#22d3ee; font-size:14px; }
|
||||
.legend { display:flex; gap:24px; margin-top:12px; font-size:11px; color:#64748b; }
|
||||
.legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
|
||||
.legend b { color:#e2e8f2; font-weight:600; }
|
||||
.bars { display:flex; align-items:flex-end; gap:5px; height:76px; margin-top:10px; }
|
||||
.bars div { flex:1; background:linear-gradient(180deg,#22d3ee,#6366f1); border-radius:3px; opacity:.85; }
|
||||
.speed { font-size:11px; color:#64748b; display:flex; gap:6px; align-items:center; letter-spacing:.05em; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="19" height="19" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="6"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic">⌗</div><div class="ic">▦</div><div class="ic on">▤</div><div class="ic">◉</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar"><div class="search">⌕ Search projects, builds, logs</div><button class="btn-upgrade">Upgrade</button></div>
|
||||
<div class="crumb">Servers / <b>api-gateway</b></div>
|
||||
<div class="svc">
|
||||
<div class="avatar">⏸</div>
|
||||
<div><h1>api-gateway <span class="badge"><i></i>ACTIVE</span></h1><div class="sub">https://api.containr.dev ↗ · Project Information ›</div></div>
|
||||
<div class="acts"><button class="btn-stop">◉ STOP</button><button class="btn-restart">↻ RESTART</button></div>
|
||||
</div>
|
||||
<div class="tabs"><div class="tab on">Metrics</div><div class="tab">Requests</div><div class="tab">APIs</div><div class="tab">Config</div></div>
|
||||
<div class="grid">
|
||||
<div class="card"><div class="hd"><div class="cicon">▣</div>CPU Usage</div><div class="big">12%</div><div class="meta"><b class="g">GOOD</b> · DAILY USAGE</div>
|
||||
<svg viewBox="0 0 200 60" style="margin-top:14px;width:100%"><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14" fill="none" stroke="#22d3ee" stroke-width="2"/><path d="M0 45 L18 42 L36 47 L54 40 L72 44 L90 36 L108 40 L126 30 L144 35 L162 22 L180 26 L200 14 V60 H0 Z" fill="url(#gg)"/><defs><linearGradient id="gg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#22d3ee" stop-opacity=".22"/><stop offset="1" stop-color="#22d3ee" stop-opacity="0"/></linearGradient></defs></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">▤</div>RAM Usage</div><div class="big">65%</div><div class="meta"><b class="a">AVERAGE</b> · DAILY USAGE</div>
|
||||
<svg viewBox="0 0 160 88" style="margin:10px auto 0;display:block"><defs><linearGradient id="ram" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#22d3ee"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs><path d="M14 80 A 66 66 0 0 1 146 80" fill="none" stroke="rgba(148,163,184,.12)" stroke-width="13"/><path d="M14 80 A 66 66 0 0 1 118 34" fill="none" stroke="url(#ram)" stroke-width="13" stroke-linecap="round"/><text x="80" y="66" text-anchor="middle" fill="#64748b" font-size="9">USED</text><text x="80" y="80" text-anchor="middle" fill="#e2e8f2" font-size="12" font-weight="800">5.4 GB / 8GB</text></svg>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">🗑</div>Cache</div><div class="big">352 MB</div><div class="meta"><b style="color:#22d3ee">220MB AVG</b> · CACHED IMAGES AND FILES</div>
|
||||
<div class="segbar"><div style="width:48%;background:#22d3ee"></div><div style="width:20%;background:#6366f1"></div><div style="width:32%;background:rgba(148,163,184,.12)"></div></div>
|
||||
<div class="legend"><span><i style="background:#22d3ee"></i>Cache <b>212 MB</b> 12%</span><span><i style="background:#6366f1"></i>Non-Cache <b>85 MB</b> 4%</span><span><i style="background:#475569"></i>Total <b>1.75 GB</b></span></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card" style="grid-column:span 2"><div class="hd"><div class="cicon">⚇</div>Active Users</div><div class="big">475 K</div><div class="meta">USERS ACTIVE RIGHT NOW</div>
|
||||
<div class="bars"><div style="height:80%"></div><div style="height:55%"></div><div style="height:90%"></div><div style="height:62%"></div><div style="height:75%"></div><div style="height:40%"></div><div style="height:68%"></div><div style="height:85%"></div><div style="height:58%"></div><div style="height:72%"></div><div style="height:48%"></div><div style="height:66%"></div><div style="height:78%"></div><div style="height:52%"></div></div>
|
||||
<div class="foot"><span>Details</span><div class="arrow">›</div></div></div>
|
||||
<div class="card"><div class="hd"><div class="cicon">✦</div>Performance</div><div class="big">89%</div><div class="meta"><b class="g">GOOD</b> · LAST SCAN TODAY</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;margin-top:14px"><div class="speed"><span style="color:#6c8ef0">↓</span> 10.4 Mbps down</div><div class="speed"><span style="color:#22d3ee">↑</span> 5.2 Mbps up</div></div>
|
||||
<div class="foot"><span>Check Speed</span><div class="arrow">›</div></div></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>06 — Midnight v2 (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c10; color:#eceef4; display:flex; min-height:100vh; }
|
||||
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(232,49,106,.07), transparent 60%); pointer-events:none; }
|
||||
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:0 4px 18px rgba(232,49,106,.35); }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
|
||||
.rail .ic.on { background:rgba(232,49,106,.13); color:#f4557f; }
|
||||
.rail .lbl { font-size:8.5px; color:#43465300; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; display:flex; align-items:center; gap:10px; }
|
||||
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:13px; width:300px; display:flex; justify-content:space-between; }
|
||||
.search kbd { font-size:10px; background:#1e1f27; border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:1px 6px; color:#565a68; }
|
||||
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
||||
.pill { font-size:12px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; }
|
||||
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f4497f,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
|
||||
.pagehead p { font-size:13px; color:#6b6e7d; margin-top:3px; }
|
||||
.btn-primary { background:#e8316a; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(232,49,106,.3); }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
|
||||
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px 18px; position:relative; overflow:hidden; }
|
||||
.stat::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ac,#e8316a); opacity:.85; }
|
||||
.stat .k { font-size:10.5px; color:#6b6e7d; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
|
||||
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:5px; }
|
||||
.stat .d { font-size:11px; color:#565a68; margin-top:3px; }
|
||||
.stat .d b { color:#3dd68c; font-weight:600; }
|
||||
.secttl { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:#565a68; margin:0 0 12px; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
|
||||
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(232,49,106,.35); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
|
||||
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
|
||||
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; }
|
||||
.badge { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:3px 9px; border-radius:20px; }
|
||||
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
|
||||
.svcs { display:flex; gap:6px; margin-bottom:14px; }
|
||||
.svcs span { width:26px; height:26px; border-radius:8px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:10px; color:#8a8d9c; font-weight:600; }
|
||||
.svcs span.more { color:#565a68; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; }
|
||||
.proj .ft .arrow { color:#f4557f; font-size:14px; }
|
||||
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
|
||||
th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; }
|
||||
td:first-child { color:#eceef4; font-weight:600; }
|
||||
.st { font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; letter-spacing:.06em; }
|
||||
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">Containr</div>
|
||||
<div class="search">Search… <kbd>⌘K</kbd></div>
|
||||
<div class="topright"><span class="pill">production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat" style="--ac:#3dd68c"><div class="k">Host CPU</div><div class="v">14%</div><div class="d"><b>healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat" style="--ac:#9c7ef0"><div class="k">Memory</div><div class="v">72%</div><div class="d">9.8 GB / 13 GB used</div></div>
|
||||
<div class="stat" style="--ac:#ff8a5c"><div class="k">Disk</div><div class="v">73%</div><div class="d">338 GB of 465 GB</div></div>
|
||||
<div class="stat" style="--ac:#e8316a"><div class="k">Deploys · 7d</div><div class="v">18</div><div class="d"><b>17 ok</b> · 1 failed</div></div>
|
||||
</div>
|
||||
<p class="secttl">Projects</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#e8316a">C</div><div><h3>core-services</h3><div class="env">production · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>w</span><span class="more">+1</span></div>
|
||||
<div class="ft"><span>5 services · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">G</div><div><h3>growth-site</h3><div class="env">production · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>site</span><span>api</span><span>rds</span></div>
|
||||
<div class="ft"><span>3 services · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">M</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span>api</span><span>wrk</span></div>
|
||||
<div class="ft"><span>2 services · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">Recent Deployments</p>
|
||||
<table>
|
||||
<tr><th>Service</th><th>Project</th><th>Status</th><th>Duration</th><th>When</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m 32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>07 — Terminal v2 (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'JetBrains Mono',monospace; background:#070807; color:#c9d1c9; display:flex; min-height:100vh; font-size:13px; }
|
||||
body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 4px); pointer-events:none; }
|
||||
.rail { width:58px; border-right:1px solid #1c1f1c; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:14px; }
|
||||
.rail .mark { width:34px; height:34px; border:1px solid #4ade80; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
|
||||
.rail .ic { color:#3d443d; font-size:14px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
|
||||
.rail .ic.on { color:#4ade80; background:#4ade8014; border:1px solid #4ade8030; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:10px 24px; border-bottom:1px solid #1c1f1c; font-size:12px; }
|
||||
.brand { color:#4ade80; font-weight:800; }
|
||||
.brand::before { content:'▮ '; }
|
||||
.search { border:1px solid #242824; padding:5px 12px; color:#4a5049; width:320px; font-size:12px; }
|
||||
.search::before { content:'$ '; color:#4ade80; }
|
||||
.topright { margin-left:auto; display:flex; gap:14px; color:#4a5049; font-size:11px; align-items:center; }
|
||||
.topright .env { color:#fbbf24; }
|
||||
.content { padding:22px 26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; border-bottom:1px dashed #242824; padding-bottom:14px; }
|
||||
.pagehead h1 { font-size:18px; font-weight:800; color:#e8ede8; }
|
||||
.pagehead h1::before { content:'## '; color:#4ade80; }
|
||||
.pagehead p { font-size:11px; color:#4a5049; margin-top:4px; }
|
||||
.btn-primary { background:#4ade80; color:#070807; border:none; padding:8px 16px; font-family:inherit; font-size:12px; font-weight:800; }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
|
||||
.stat { border:1px solid #1c1f1c; padding:14px 16px; background:#0b0d0b; position:relative; }
|
||||
.stat .k { font-size:10px; color:#4a5049; letter-spacing:.1em; }
|
||||
.stat .k::before { content:'● '; color:#4ade80; font-size:8px; }
|
||||
.stat .v { font-size:24px; font-weight:800; color:#e8ede8; margin-top:6px; }
|
||||
.stat .d { font-size:10.5px; color:#4a5049; margin-top:4px; }
|
||||
.stat .d b { color:#4ade80; font-weight:400; }
|
||||
.secttl { font-size:11px; color:#4a5049; margin:0 0 10px; letter-spacing:.12em; }
|
||||
.secttl::before { content:'── '; color:#2a2f2a; } .secttl::after { content:' ──────────'; color:#2a2f2a; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
|
||||
.proj { border:1px solid #1c1f1c; background:#0b0d0b; padding:16px; }
|
||||
.proj:hover { border-color:#4ade80; }
|
||||
.proj .top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
|
||||
.proj .ic { width:32px; height:32px; border:1px solid #2a2f2a; color:#4ade80; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
|
||||
.proj h3 { font-size:13px; font-weight:700; color:#e8ede8; }
|
||||
.proj .env { font-size:10px; color:#4a5049; margin-top:2px; }
|
||||
.badge { margin-left:auto; font-size:9px; font-weight:700; padding:2px 8px; letter-spacing:.08em; }
|
||||
.b-run { border:1px solid #4ade8044; color:#4ade80; } .b-warn { border:1px solid #fbbf2444; color:#fbbf24; }
|
||||
.svcs { font-size:11px; color:#5a6159; margin-bottom:12px; line-height:1.7; }
|
||||
.svcs b { color:#c9d1c9; font-weight:400; }
|
||||
.proj .ft { display:flex; justify-content:space-between; font-size:10.5px; color:#4a5049; border-top:1px dashed #1c1f1c; padding-top:10px; }
|
||||
.proj .ft .arrow { color:#4ade80; }
|
||||
table { width:100%; border-collapse:collapse; border:1px solid #1c1f1c; font-size:12px; background:#0b0d0b; }
|
||||
th { text-align:left; font-size:9.5px; letter-spacing:.14em; color:#4a5049; font-weight:700; padding:9px 16px; border-bottom:1px solid #1c1f1c; }
|
||||
td { padding:9px 16px; border-bottom:1px solid #141714; color:#8a918a; }
|
||||
td:first-child { color:#e8ede8; }
|
||||
.st { font-size:10px; font-weight:700; }
|
||||
.st-ok { color:#4ade80; } .st-run { color:#6c8ef0; } .st-fail { color:#f87171; }
|
||||
.st-ok::before{content:'[OK] '}.st-run::before{content:'[..] '}.st-fail::before{content:'[!!] '}
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">containr</div>
|
||||
<div class="search">search --projects --builds --logs_</div>
|
||||
<div class="topright"><span class="env">env:production</span><span>tdvorak@containr</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>projects</h1><p># 3 projects · 9 services · 1 host · uptime 7h 41m</p></div>
|
||||
<button class="btn-primary">+ new-project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k">HOST.CPU</div><div class="v">14%</div><div class="d"><b>ok</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k">HOST.MEM</div><div class="v">72%</div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k">HOST.DISK</div><div class="v">73%</div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k">DEPLOYS.7D</div><div class="v">18</div><div class="d"><b>17 ok</b> · 1 failed</div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs">├─ <b>api</b> · <b>web</b> · <b>db</b> · <b>worker</b><br>└─ 5 services total</div>
|
||||
<div class="ft"><span>deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs">├─ <b>site</b> · <b>api</b> · <b>redis</b><br>└─ 3 services total</div>
|
||||
<div class="ft"><span>deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs">├─ <b>api</b> · <b>worker</b><br>└─ 2 services · 1 failed</div>
|
||||
<div class="ft"><span>last deploy failed</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS</p>
|
||||
<table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>08 — Midnight × Terminal (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(232,49,106,.06), transparent 60%); pointer-events:none; }
|
||||
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#f4497f,#cf1d5b); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
|
||||
.rail .ic.on { background:rgba(232,49,106,.13); color:#f4557f; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
|
||||
.brand em { font-style:normal; color:#f4557f; }
|
||||
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
|
||||
.search::before { content:'$ '; color:#f4557f; }
|
||||
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
||||
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
|
||||
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f4497f,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
|
||||
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.btn-primary { background:#e8316a; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(232,49,106,.3); }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
|
||||
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
|
||||
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
|
||||
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .d b { font-weight:600; }
|
||||
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#f4557f}
|
||||
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
|
||||
.secttl::before { content:'// '; color:#f4557f; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
|
||||
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(232,49,106,.4); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
|
||||
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; }
|
||||
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
|
||||
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
|
||||
.svcs { display:flex; gap:6px; margin-bottom:14px; }
|
||||
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft .arrow { color:#f4557f; }
|
||||
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
|
||||
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
|
||||
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
|
||||
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
|
||||
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="search">search projects, builds, logs…</div>
|
||||
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k">HOST.CPU</div><div class="v">14%</div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k">HOST.MEM</div><div class="v">72%</div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k">HOST.DISK</div><div class="v">73%</div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k">DEPLOYS.7D</div><div class="v">18</div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#e8316a">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>+1</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span>api</span><span>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS</p>
|
||||
<table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>09 — Ledger (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#121214; color:#e9e7e2; display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
.rail { width:60px; border-right:1px solid rgba(233,231,226,.12); display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:18px; }
|
||||
.rail .mark { width:34px; height:34px; border-radius:50%; background:#ff4d2e; display:flex; align-items:center; justify-content:center; font-weight:800; color:#121214; font-family:'JetBrains Mono',monospace; font-size:14px; }
|
||||
.rail .ic { color:#5c5c60; font-size:15px; } .rail .ic.on { color:#ff4d2e; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:baseline; gap:18px; padding:14px 30px; border-bottom:1px solid rgba(233,231,226,.12); }
|
||||
.brand { font-family:'Instrument Serif',serif; font-size:24px; letter-spacing:-.5px; }
|
||||
.brand i { color:#ff4d2e; font-style:normal; }
|
||||
.search { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5c5c60; border-bottom:1px solid rgba(233,231,226,.2); padding-bottom:3px; width:260px; }
|
||||
.topright { display:flex; gap:16px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8a8a8e; }
|
||||
.content { padding:30px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px; }
|
||||
.pagehead h1 { font-family:'Instrument Serif',serif; font-size:56px; font-weight:400; letter-spacing:-1.5px; line-height:1; }
|
||||
.pagehead h1 em { color:#ff4d2e; }
|
||||
.btn-primary { background:#ff4d2e; color:#121214; border:none; border-radius:999px; padding:10px 22px; font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; }
|
||||
.rule { border:none; border-top:1px solid rgba(233,231,226,.14); margin:14px 0 24px; }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(233,231,226,.14); border-bottom:1px solid rgba(233,231,226,.14); margin-bottom:30px; }
|
||||
.stat { padding:18px 20px; border-right:1px solid rgba(233,231,226,.14); }
|
||||
.stat:last-child { border-right:none; }
|
||||
.stat .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:#5c5c60; letter-spacing:.16em; }
|
||||
.stat .v { font-family:'Instrument Serif',serif; font-size:44px; font-weight:400; letter-spacing:-1px; margin-top:6px; line-height:1; }
|
||||
.stat .v span { font-size:20px; color:#5c5c60; }
|
||||
.stat .d { font-size:11px; color:#8a8a8e; margin-top:6px; }
|
||||
.stat .d b { color:#ff4d2e; font-weight:500; }
|
||||
.secttl { display:flex; align-items:baseline; gap:12px; margin:0 0 14px; }
|
||||
.secttl .no { font-family:'JetBrains Mono',monospace; font-size:11px; color:#ff4d2e; }
|
||||
.secttl h2 { font-family:'Instrument Serif',serif; font-size:24px; font-weight:400; letter-spacing:-.4px; }
|
||||
.secttl .cnt { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5c5c60; }
|
||||
.projlist { margin-bottom:32px; }
|
||||
.proj { display:grid; grid-template-columns:70px 1fr auto auto; align-items:center; gap:20px; padding:18px 4px; border-bottom:1px solid rgba(233,231,226,.12); transition:.15s; }
|
||||
.proj:hover { background:rgba(255,77,46,.04); }
|
||||
.proj .idx { font-family:'JetBrains Mono',monospace; font-size:12px; color:#5c5c60; }
|
||||
.proj h3 { font-family:'Instrument Serif',serif; font-size:26px; font-weight:400; letter-spacing:-.5px; }
|
||||
.proj .env { font-size:11.5px; color:#8a8a8e; margin-top:3px; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .svcs { font-size:11px; color:#8a8a8e; font-family:'JetBrains Mono',monospace; text-align:right; line-height:1.7; }
|
||||
.proj .svcs b { color:#e9e7e2; font-weight:500; }
|
||||
.badge { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.12em; padding:5px 12px; border-radius:999px; border:1px solid; }
|
||||
.b-run { border-color:rgba(52,211,153,.4); color:#34d399; }
|
||||
.b-warn { border-color:rgba(251,191,36,.4); color:#fbbf24; }
|
||||
table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
||||
th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em; color:#5c5c60; font-weight:500; padding:8px 4px; border-bottom:1px solid rgba(233,231,226,.18); }
|
||||
td { padding:13px 4px; border-bottom:1px solid rgba(233,231,226,.08); color:#a8a6a0; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
|
||||
td:first-child { color:#e9e7e2; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; }
|
||||
.st { font-size:10px; letter-spacing:.1em; }
|
||||
.st-ok { color:#34d399; } .st-run { color:#8ab4f8; } .st-fail { color:#ff4d2e; }
|
||||
.st::before { content:'■ '; font-size:7px; vertical-align:2px; }
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic on">⌗</div><div class="ic">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">Containr<i>.</i></div>
|
||||
<div class="search">search projects, builds, logs</div>
|
||||
<div class="topright"><span>production</span><span>tdvorak</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead"><h1>Projects<em>.</em></h1><button class="btn-primary">+ new project</button></div>
|
||||
<p class="mono" style="font-size:11px;color:#5c5c60">03 projects — 09 services — 01 host — uptime 7h 41m</p>
|
||||
<hr class="rule">
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k">HOST / CPU</div><div class="v">14<span>%</span></div><div class="d">healthy — 16 cores — load 2.41</div></div>
|
||||
<div class="stat"><div class="k">HOST / MEMORY</div><div class="v">72<span>%</span></div><div class="d">9.8 GB of 13 GB used</div></div>
|
||||
<div class="stat"><div class="k">HOST / DISK</div><div class="v">73<span>%</span></div><div class="d">338 GB of 465 GB</div></div>
|
||||
<div class="stat"><div class="k">DEPLOYS / 7D</div><div class="v">18</div><div class="d"><b>17 ok</b> — 1 failed</div></div>
|
||||
</div>
|
||||
<div class="secttl"><span class="no">01</span><h2>Projects</h2><span class="cnt">3 entries</span></div>
|
||||
<div class="projlist">
|
||||
<div class="proj"><span class="idx">01</span><div><h3>core-services</h3><div class="env">production · containr.dev · deployed 4m ago</div></div><div class="svcs"><b>api web db worker cache</b><br>5 services</div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="proj"><span class="idx">02</span><div><h3>growth-site</h3><div class="env">production · growth.app · deployed 2h ago</div></div><div class="svcs"><b>site api redis</b><br>3 services</div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="proj"><span class="idx">03</span><div><h3>ml-pipeline</h3><div class="env">staging · internal · last deploy failed</div></div><div class="svcs"><b>api worker</b><br>2 services</div><span class="badge b-warn">DEGRADED</span></div>
|
||||
</div>
|
||||
<div class="secttl"><span class="no">02</span><h2>Recent deployments</h2><span class="cnt">last 24h</span></div>
|
||||
<table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>10 — Softcell (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Nunito',system-ui,sans-serif; background:#1e2028; color:#e8e6f2; display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
/* soft extruded surface */
|
||||
.cell { background:#262932; border-radius:22px; box-shadow:6px 6px 14px rgba(0,0,0,.45), -3px -3px 10px rgba(255,255,255,.045); }
|
||||
.cell-in { background:#22252e; border-radius:14px; box-shadow:inset 3px 3px 8px rgba(0,0,0,.4), inset -2px -2px 6px rgba(255,255,255,.04); }
|
||||
.rail { width:70px; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:12px; }
|
||||
.rail .mark { width:42px; height:42px; border-radius:16px; background:linear-gradient(145deg,#ff7ab8,#e8569a); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2028; font-size:15px; box-shadow:4px 4px 10px rgba(0,0,0,.4); }
|
||||
.rail .ic { width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#5f6474; font-size:16px; box-shadow:4px 4px 10px rgba(0,0,0,.35), -2px -2px 8px rgba(255,255,255,.04); background:#242730; }
|
||||
.rail .ic.on { color:#ff7ab8; box-shadow:inset 3px 3px 8px rgba(0,0,0,.4); }
|
||||
main { flex:1; min-width:0; padding-right:26px; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:20px 6px 14px; }
|
||||
.brand { font-weight:900; font-size:22px; letter-spacing:-.5px; }
|
||||
.brand em { font-style:normal; color:#ff7ab8; }
|
||||
.search { margin-left:auto; padding:10px 18px; width:300px; font-size:12.5px; color:#8a8ea0; font-family:'JetBrains Mono',monospace; }
|
||||
.topright { display:flex; align-items:center; gap:10px; }
|
||||
.pill { padding:9px 18px; border-radius:999px; font-size:11.5px; font-weight:700; color:#9fa3b5; }
|
||||
.avatar-t { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#7ab8ff,#b07aff); display:flex; align-items:center; justify-content:center; font-weight:900; color:#1e2028; font-size:13px; box-shadow:3px 3px 8px rgba(0,0,0,.4); }
|
||||
.content { padding:6px 6px 30px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
|
||||
.pagehead h1 { font-size:30px; font-weight:900; letter-spacing:-.8px; }
|
||||
.pagehead p { font-size:12px; color:#7b7f92; font-family:'JetBrains Mono',monospace; margin-top:3px; }
|
||||
.btn-primary { background:linear-gradient(145deg,#ff8ac0,#f15fa0); color:#2a1220; border:none; border-radius:18px; padding:12px 24px; font-size:13.5px; font-weight:900; box-shadow:4px 4px 12px rgba(0,0,0,.45); }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
|
||||
.stat { padding:18px 20px; }
|
||||
.stat .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:#7b7f92; letter-spacing:.12em; font-weight:600; }
|
||||
.stat .v { font-size:32px; font-weight:900; letter-spacing:-1px; margin-top:6px; }
|
||||
.stat .v span { font-size:16px; color:#7b7f92; font-weight:700; }
|
||||
.meter { height:10px; margin-top:12px; padding:2px; display:flex; gap:3px; }
|
||||
.meter i { flex:1; border-radius:4px; background:rgba(255,255,255,.06); }
|
||||
.stat .d { font-size:11px; color:#7b7f92; margin-top:9px; font-family:'JetBrains Mono',monospace; }
|
||||
.secttl { font-size:12px; font-weight:800; letter-spacing:.16em; color:#7b7f92; margin:0 0 14px 6px; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
|
||||
.proj { padding:20px; transition:.15s; }
|
||||
.proj:hover { transform:translateY(-2px); }
|
||||
.proj .top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
|
||||
.proj .ic { width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:#1e2028; box-shadow:3px 3px 8px rgba(0,0,0,.35); }
|
||||
.proj h3 { font-size:16px; font-weight:800; }
|
||||
.proj .env { font-size:10.5px; color:#7b7f92; margin-top:2px; font-family:'JetBrains Mono',monospace; }
|
||||
.badge { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; padding:6px 12px; border-radius:999px; box-shadow:inset 2px 2px 6px rgba(0,0,0,.35); background:#22252e; }
|
||||
.b-run { color:#5ee6a0; } .b-warn { color:#ffc46b; }
|
||||
.svcs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
|
||||
.svcs span { font-size:10.5px; font-weight:700; color:#9fa3b5; padding:6px 12px; border-radius:999px; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#7b7f92; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft .arrow { color:#ff7ab8; font-weight:900; }
|
||||
.tbl { padding:6px; }
|
||||
table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
||||
th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#7b7f92; font-weight:600; padding:12px 16px; }
|
||||
td { padding:12px 16px; color:#b9bcc9; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
|
||||
td:first-child { color:#e8e6f2; font-weight:800; font-family:'Nunito',sans-serif; font-size:13px; }
|
||||
tbody tr { border-radius:12px; } tbody tr:hover td { background:rgba(255,255,255,.02); }
|
||||
tbody tr:not(:last-child) td { border-bottom:1px solid rgba(255,255,255,.04); }
|
||||
.st { font-size:10px; font-weight:600; padding:4px 10px; border-radius:999px; box-shadow:inset 2px 2px 5px rgba(0,0,0,.35); background:#1e2028; }
|
||||
.st-ok { color:#5ee6a0; } .st-run { color:#7ab8ff; } .st-fail { color:#ff8a8a; }
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="search cell-in">search…</div>
|
||||
<div class="topright"><span class="pill cell">production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat cell"><div class="k">HOST CPU</div><div class="v">14<span>%</span></div><div class="meter cell-in"><i style="background:#5ee6a0"></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="d">healthy · 16 cores · load 2.41</div></div>
|
||||
<div class="stat cell"><div class="k">MEMORY</div><div class="v">72<span>%</span></div><div class="meter cell-in"><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i style="background:#ff7ab8"></i><i></i><i></i></div><div class="d">9.8 GB / 13 GB used</div></div>
|
||||
<div class="stat cell"><div class="k">DISK</div><div class="v">73<span>%</span></div><div class="meter cell-in"><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i style="background:#ffc46b"></i><i></i><i></i></div><div class="d">338 GB of 465 GB</div></div>
|
||||
<div class="stat cell"><div class="k">DEPLOYS · 7D</div><div class="v">18</div><div class="d" style="margin-top:16px"><b style="color:#5ee6a0">17 ok</b> · <b style="color:#ff8a8a">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#ff8ac0,#f15fa0)">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">● running</span></div>
|
||||
<div class="svcs"><span class="cell-in">api</span><span class="cell-in">web</span><span class="cell-in">db</span><span class="cell-in">worker</span><span class="cell-in">+1</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#9db4ff,#7a8ef0)">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">● running</span></div>
|
||||
<div class="svcs"><span class="cell-in">site</span><span class="cell-in">api</span><span class="cell-in">redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj cell"><div class="top"><div class="ic" style="background:linear-gradient(145deg,#ffc46b,#f0a050)">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">● degraded</span></div>
|
||||
<div class="svcs"><span class="cell-in">api</span><span class="cell-in">worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS</p>
|
||||
<div class="tbl cell"><table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>11 — Flight Deck (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0a0f16; color:#dbe4ee; display:flex; min-height:100vh;
|
||||
background-image:linear-gradient(rgba(140,180,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(140,180,255,.03) 1px, transparent 1px);
|
||||
background-size:44px 44px; }
|
||||
.mono { font-family:'IBM Plex Mono',monospace; }
|
||||
.rail { width:58px; border-right:1px solid rgba(140,180,255,.1); background:#0a0f16; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:10px; }
|
||||
.rail .mark { width:36px; height:36px; border:1.5px solid #ffb224; color:#ffb224; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'IBM Plex Mono',monospace; font-size:14px; margin-bottom:10px; }
|
||||
.rail .ic { width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:#3d4d63; font-size:15px; border:1px solid transparent; }
|
||||
.rail .ic.on { color:#ffb224; border-color:rgba(255,178,36,.35); background:rgba(255,178,36,.06); }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:20px; padding:10px 24px; border-bottom:1px solid rgba(140,180,255,.1); font-family:'IBM Plex Mono',monospace; font-size:11px; }
|
||||
.brand { font-weight:600; font-size:12px; letter-spacing:.22em; color:#dbe4ee; }
|
||||
.brand em { font-style:normal; color:#ffb224; }
|
||||
.tlm { color:#3d4d63; display:flex; gap:18px; }
|
||||
.tlm b { color:#8fb4dd; font-weight:500; }
|
||||
.search { margin-left:auto; color:#3d4d63; }
|
||||
.topright { display:flex; gap:14px; align-items:center; }
|
||||
.envp { color:#ffb224; border:1px solid rgba(255,178,36,.35); padding:3px 10px; font-size:10px; letter-spacing:.14em; }
|
||||
.usr { color:#8fb4dd; }
|
||||
.content { padding:24px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
|
||||
.pagehead h1 { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
|
||||
.pagehead h1::before { content:'▸ '; color:#ffb224; }
|
||||
.pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#3d4d63; margin-top:5px; letter-spacing:.06em; }
|
||||
.btn-primary { background:transparent; color:#ffb224; border:1px solid rgba(255,178,36,.5); padding:8px 18px; font-size:10.5px; font-weight:600; letter-spacing:.16em; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; }
|
||||
.btn-primary:hover { background:rgba(255,178,36,.1); }
|
||||
/* HUD panel: corner brackets */
|
||||
.panel { position:relative; background:rgba(13,20,30,.75); border:1px solid rgba(140,180,255,.1); }
|
||||
.panel::before, .panel::after { content:''; position:absolute; width:10px; height:10px; }
|
||||
.panel::before { top:-1px; left:-1px; border-top:1.5px solid #ffb224; border-left:1.5px solid #ffb224; }
|
||||
.panel::after { bottom:-1px; right:-1px; border-bottom:1.5px solid #ffb224; border-right:1.5px solid #ffb224; }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
|
||||
.stat { padding:14px 16px 12px; }
|
||||
.stat .k { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#3d4d63; display:flex; justify-content:space-between; }
|
||||
.stat .k i { font-style:normal; color:#ffb224; }
|
||||
.stat .v { font-family:'IBM Plex Mono',monospace; font-size:34px; font-weight:500; letter-spacing:-1px; margin:8px 0 2px; font-variant-numeric:tabular-nums; }
|
||||
.stat .v span { font-size:15px; color:#3d4d63; }
|
||||
.ticks { display:flex; gap:3px; margin:8px 0; }
|
||||
.ticks i { width:8px; height:4px; background:rgba(140,180,255,.12); }
|
||||
.stat .d { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#5c7ba3; letter-spacing:.05em; }
|
||||
.secttl { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.24em; color:#5c7ba3; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
|
||||
.secttl::before { content:''; width:8px; height:8px; border:1px solid #ffb224; }
|
||||
.secttl .r { margin-left:auto; color:#3d4d63; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
|
||||
.proj { padding:16px 18px; }
|
||||
.proj .top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
|
||||
.proj .id { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#ffb224; letter-spacing:.14em; }
|
||||
.proj h3 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
|
||||
.proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#3d4d63; margin-top:2px; letter-spacing:.06em; }
|
||||
.badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; padding:3px 8px; border:1px solid; }
|
||||
.b-run { border-color:rgba(63,217,160,.4); color:#3fd9a0; } .b-warn { border-color:rgba(255,178,36,.5); color:#ffb224; }
|
||||
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
|
||||
.svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8fb4dd; border:1px solid rgba(140,180,255,.18); padding:3px 8px; }
|
||||
.proj .ft { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#3d4d63; border-top:1px solid rgba(140,180,255,.08); padding-top:10px; letter-spacing:.05em; }
|
||||
.proj .ft .arrow { color:#ffb224; }
|
||||
table { width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11px; }
|
||||
th { text-align:left; font-size:9px; letter-spacing:.22em; color:#3d4d63; font-weight:500; padding:10px 18px; border-bottom:1px solid rgba(140,180,255,.12); }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(140,180,255,.06); color:#8fb4dd; letter-spacing:.03em; }
|
||||
td:first-child { color:#dbe4ee; font-weight:600; }
|
||||
.st { font-size:9.5px; letter-spacing:.12em; }
|
||||
.st-ok { color:#3fd9a0; } .st-run { color:#8ab4f8; } .st-fail { color:#ff5f56; }
|
||||
.st::before { content:'['; color:#3d4d63; } .st::after { content:']'; color:#3d4d63; }
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">CONTAIN<em>R</em></div>
|
||||
<div class="tlm"><span>LINK <b>NOMINAL</b></span><span>UPTIME <b>7H 41M</b></span><span>NODE <b>cnr-node-01</b></span></div>
|
||||
<div class="search">search_</div>
|
||||
<div class="topright"><span class="envp">PRODUCTION</span><span class="usr">tdvorak</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 PROJECTS / 9 SERVICES / 1 HOST</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat panel"><div class="k"><span>HOST.CPU</span><i>◉</i></div><div class="v">14<span>%</span></div><div class="ticks"><i style="background:#3fd9a0"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="d">NOMINAL · 16 CORES · LOAD 2.41</div></div>
|
||||
<div class="stat panel"><div class="k"><span>HOST.MEM</span><i>◉</i></div><div class="v">72<span>%</span></div><div class="ticks"><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i></i><i></i><i></i></div><div class="d">9.8G / 13G USED</div></div>
|
||||
<div class="stat panel"><div class="k"><span>HOST.DISK</span><i>◉</i></div><div class="v">73<span>%</span></div><div class="ticks"><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i style="background:#ffb224"></i><i></i><i></i><i></i></div><div class="d">338G OF 465G</div></div>
|
||||
<div class="stat panel"><div class="k"><span>DEPLOYS.7D</span><i>◉</i></div><div class="v">18</div><div class="ticks"><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#3fd9a0"></i><i style="background:#ff5f56"></i><i></i><i></i></div><div class="d">17 OK · 1 FAILED</div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS <span class="r">3 RECORDS</span></p>
|
||||
<div class="projgrid">
|
||||
<div class="proj panel"><div class="top"><span class="id">P.01</span><div><h3>core-services</h3><div class="env">PROD · CONTAINR.DEV</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
|
||||
<div class="ft"><span>5 SVC · DEPLOYED 4M AGO</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj panel"><div class="top"><span class="id">P.02</span><div><h3>growth-site</h3><div class="env">PROD · GROWTH.APP</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
|
||||
<div class="ft"><span>3 SVC · DEPLOYED 2H AGO</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj panel"><div class="top"><span class="id">P.03</span><div><h3>ml-pipeline</h3><div class="env">STAGING · INTERNAL</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span>api</span><span>worker</span></div>
|
||||
<div class="ft"><span>2 SVC · 1 FAILED BUILD</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS <span class="r">LAST 24H</span></p>
|
||||
<div class="panel"><table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>12 — Vector (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0a0c10; color:#e4e9f1; display:flex; min-height:100vh;
|
||||
background-image:linear-gradient(rgba(110,160,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(110,160,255,.028) 1px, transparent 1px);
|
||||
background-size:48px 48px; }
|
||||
.mono { font-family:'IBM Plex Mono',monospace; }
|
||||
.rail { width:60px; border-right:1px solid rgba(255,255,255,.05); background:#0c0e13; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:9px; }
|
||||
.rail .mark { width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#4da1ff,#1f6fe8); display:flex; align-items:center; justify-content:center; font-weight:800; color:#0a0c10; font-size:14px; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
|
||||
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#49556b; font-size:15px; }
|
||||
.rail .ic.on { background:rgba(77,161,255,.12); color:#6db1ff; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:18px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:14.5px; letter-spacing:-.2px; }
|
||||
.brand em { font-style:normal; color:#4da1ff; }
|
||||
.tlm { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#49556b; display:flex; gap:16px; margin-left:8px; }
|
||||
.tlm b { color:#8fb8e8; font-weight:500; }
|
||||
.search { margin-left:auto; background:#12141b; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#5c6577; font-size:11.5px; width:270px; font-family:'IBM Plex Mono',monospace; }
|
||||
.search::before { content:'⌕ '; color:#4da1ff; }
|
||||
.topright { display:flex; align-items:center; gap:10px; }
|
||||
.envp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#6db1ff; border:1px solid rgba(77,161,255,.3); border-radius:999px; padding:4px 12px; letter-spacing:.1em; }
|
||||
.avatar-t { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#4da1ff,#7c5cf0); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
|
||||
.pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#49556b; margin-top:5px; letter-spacing:.04em; }
|
||||
.btn-primary { background:#4da1ff; color:#06101f; border:none; border-radius:9px; padding:9px 18px; font-size:12.5px; font-weight:700; }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
|
||||
.stat { position:relative; background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:12px; padding:14px 17px; }
|
||||
.stat::before { content:''; position:absolute; top:-1px; left:-1px; width:9px; height:9px; border-top:1.5px solid #4da1ff; border-left:1.5px solid #4da1ff; border-radius:12px 0 0 0; }
|
||||
.stat .k { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#49556b; display:flex; justify-content:space-between; }
|
||||
.stat .k i { font-style:normal; color:#4da1ff; }
|
||||
.stat .v { font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; letter-spacing:-1px; margin-top:7px; font-variant-numeric:tabular-nums; }
|
||||
.stat .v span { font-size:14px; color:#49556b; }
|
||||
.stat .d { font-size:11px; color:#5c6577; margin-top:6px; font-family:'IBM Plex Mono',monospace; }
|
||||
.stat .d b { font-weight:500; }
|
||||
.ok{color:#3dd68c}.warn{color:#f0a040}.blue{color:#6db1ff}
|
||||
.secttl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; color:#49556b; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
|
||||
.secttl::before { content:''; width:7px; height:7px; background:#4da1ff; border-radius:2px; }
|
||||
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#3a4356; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
|
||||
.proj { background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:14px; padding:17px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(77,161,255,.4); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
|
||||
.proj .ic { width:35px; height:35px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; color:#fff; font-family:'IBM Plex Mono',monospace; }
|
||||
.proj h3 { font-size:14px; font-weight:700; }
|
||||
.proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#49556b; margin-top:2px; letter-spacing:.05em; }
|
||||
.badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.12em; padding:3px 9px; border-radius:4px; }
|
||||
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
|
||||
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px; }
|
||||
.svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#8fb8e8; border:1px solid rgba(110,160,255,.16); border-radius:6px; padding:3px 8px; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#49556b; border-top:1px solid rgba(255,255,255,.05); padding-top:11px; letter-spacing:.04em; }
|
||||
.proj .ft .arrow { color:#6db1ff; }
|
||||
.tbl { position:relative; background:#10131a; border:1px solid rgba(255,255,255,.055); border-radius:14px; overflow:hidden; }
|
||||
table { width:100%; border-collapse:collapse; font-size:12px; }
|
||||
th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#49556b; font-weight:500; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#a9b4c6; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
|
||||
td:first-child { color:#e4e9f1; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }
|
||||
.st { font-size:9.5px; font-weight:500; letter-spacing:.1em; padding:3px 9px; border-radius:4px; }
|
||||
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(77,161,255,.12); color:#6db1ff; } .st-fail { background:rgba(255,95,86,.1); color:#ff5f56; }
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span></div>
|
||||
<div class="search">search projects, builds, logs</div>
|
||||
<div class="topright"><span class="envp">production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span><i>◦</i></div><div class="v">14<span>%</span></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span><i>◦</i></div><div class="v">72<span>%</span></div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span><i>◦</i></div><div class="v">73<span>%</span></div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span><i>◦</i></div><div class="v">18</div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS <span class="r">3</span></p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#4da1ff">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#7c5cf0">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#f0a040">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span>api</span><span>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
|
||||
<div class="tbl"><table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>13 — Meridian (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0d0e0c; color:#e8ece4; display:flex; min-height:100vh;
|
||||
background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
|
||||
background-size:52px 52px; }
|
||||
.mono { font-family:'IBM Plex Mono',monospace; }
|
||||
.rail { width:60px; border-right:1px solid rgba(255,255,255,.05); background:#0f100e; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:9px; }
|
||||
.rail .mark { width:36px; height:36px; border-radius:50%; border:1.5px solid #b8e34d; color:#b8e34d; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
|
||||
.rail .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#525a4c; font-size:15px; }
|
||||
.rail .ic.on { background:rgba(184,227,77,.1); color:#c8ee6a; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:18px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:14.5px; letter-spacing:-.2px; }
|
||||
.brand em { font-style:normal; color:#b8e34d; }
|
||||
.tlm { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#525a4c; display:flex; gap:16px; margin-left:8px; }
|
||||
.tlm b { color:#a9b39a; font-weight:500; }
|
||||
.search { margin-left:auto; background:#141512; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 14px; color:#6a7260; font-size:11.5px; width:270px; font-family:'IBM Plex Mono',monospace; }
|
||||
.search::before { content:'⌕ '; color:#b8e34d; }
|
||||
.topright { display:flex; align-items:center; gap:10px; }
|
||||
.envp { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#c8ee6a; border:1px solid rgba(184,227,77,.3); border-radius:999px; padding:4px 12px; letter-spacing:.1em; }
|
||||
.avatar-t { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#b8e34d,#4dc88a); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#0d0e0c; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
|
||||
.pagehead p { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#525a4c; margin-top:5px; letter-spacing:.04em; }
|
||||
.btn-primary { background:#b8e34d; color:#13180a; border:none; border-radius:9px; padding:9px 18px; font-size:12.5px; font-weight:800; }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px; }
|
||||
.stat { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:14px 17px; border-left:2px solid rgba(184,227,77,.5); }
|
||||
.stat .k { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; color:#525a4c; display:flex; justify-content:space-between; }
|
||||
.stat .v { font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; letter-spacing:-1px; margin-top:7px; font-variant-numeric:tabular-nums; }
|
||||
.stat .v span { font-size:14px; color:#525a4c; }
|
||||
.meter { height:6px; background:rgba(255,255,255,.05); border-radius:3px; margin-top:10px; overflow:hidden; }
|
||||
.meter i { display:block; height:100%; border-radius:3px; }
|
||||
.stat .d { font-size:11px; color:#6a7260; margin-top:8px; font-family:'IBM Plex Mono',monospace; }
|
||||
.stat .d b { font-weight:500; }
|
||||
.ok{color:#5ee6a0}.warn{color:#f0c040}.lime{color:#c8ee6a}
|
||||
.secttl { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.2em; color:#525a4c; margin:0 0 12px; display:flex; align-items:center; gap:9px; }
|
||||
.secttl::before { content:''; width:14px; height:1.5px; background:#b8e34d; }
|
||||
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#3d433a; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:22px; }
|
||||
.proj { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:17px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(184,227,77,.4); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
|
||||
.proj .ic { width:35px; height:35px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; font-family:'IBM Plex Mono',monospace; }
|
||||
.proj h3 { font-size:14px; font-weight:700; }
|
||||
.proj .env { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#525a4c; margin-top:2px; letter-spacing:.05em; }
|
||||
.badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.12em; padding:3px 9px; border-radius:999px; border:1px solid; }
|
||||
.b-run { border-color:rgba(94,230,160,.3); color:#5ee6a0; } .b-warn { border-color:rgba(240,192,64,.35); color:#f0c040; }
|
||||
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px; }
|
||||
.svcs span { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#a9b39a; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 8px; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#525a4c; border-top:1px solid rgba(255,255,255,.05); padding-top:11px; letter-spacing:.04em; }
|
||||
.proj .ft .arrow { color:#c8ee6a; }
|
||||
.tbl { background:#121310; border:1px solid rgba(255,255,255,.05); border-radius:14px; overflow:hidden; }
|
||||
table { width:100%; border-collapse:collapse; font-size:12px; }
|
||||
th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:#525a4c; font-weight:500; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b0b8a4; font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
|
||||
td:first-child { color:#e8ece4; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }
|
||||
.st { font-size:9.5px; font-weight:500; letter-spacing:.1em; padding:3px 9px; border-radius:999px; }
|
||||
.st-ok { background:rgba(94,230,160,.1); color:#5ee6a0; } .st-run { background:rgba(184,227,77,.12); color:#c8ee6a; } .st-fail { background:rgba(255,110,100,.1); color:#ff7a70; }
|
||||
</style></head><body>
|
||||
<nav class="rail"><div class="mark">C</div><div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div></nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span></div>
|
||||
<div class="search">search projects, builds, logs</div>
|
||||
<div class="topright"><span class="envp">production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span></div><div class="v">14<span>%</span></div><div class="meter"><i style="width:14%;background:#5ee6a0"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span></div><div class="v">72<span>%</span></div><div class="meter"><i style="width:72%;background:#b8e34d"></i></div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span></div><div class="v">73<span>%</span></div><div class="meter"><i style="width:73%;background:#f0c040"></i></div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="d" style="margin-top:14px"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS <span class="r">3</span></p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:rgba(184,227,77,.15);color:#c8ee6a">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">running</span></div>
|
||||
<div class="svcs"><span>api</span><span>web</span><span>db</span><span>worker</span><span>cache</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:rgba(94,230,160,.12);color:#5ee6a0">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">running</span></div>
|
||||
<div class="svcs"><span>site</span><span>api</span><span>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:rgba(240,192,64,.12);color:#f0c040">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">degraded</span></div>
|
||||
<div class="svcs"><span>api</span><span>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
|
||||
<div class="tbl"><table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">deployed</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">building</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">failed</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">deployed</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>14 — Midnight Violet</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(139,124,246,.07), transparent 60%); pointer-events:none; }
|
||||
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#8b7cf6,#6b5ce0); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
|
||||
.rail .ic.on { background:rgba(139,124,246,.14); color:#a89bff; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
|
||||
.brand em { font-style:normal; color:#a89bff; }
|
||||
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
|
||||
.search::before { content:'$ '; color:#a89bff; }
|
||||
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
||||
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
|
||||
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#8b7cf6,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
|
||||
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.btn-primary { background:#8b7cf6; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(139,124,246,.35); }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
|
||||
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
|
||||
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
|
||||
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .d b { font-weight:600; }
|
||||
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#a89bff}
|
||||
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
|
||||
.secttl::before { content:'// '; color:#a89bff; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
|
||||
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(139,124,246,.45); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
|
||||
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; }
|
||||
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
|
||||
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
|
||||
.svcs { display:flex; gap:6px; margin-bottom:14px; }
|
||||
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft .arrow { color:#a89bff; }
|
||||
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
|
||||
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
|
||||
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
|
||||
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
|
||||
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
|
||||
|
||||
.stat .k { display:flex; justify-content:space-between; align-items:center; }
|
||||
.live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
|
||||
.spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
|
||||
.spark i { flex:1; background:linear-gradient(180deg, #8b7cf6, transparent); opacity:.7; border-radius:1px; }
|
||||
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
|
||||
.bar i { display:block; height:100%; background:#8b7cf6; border-radius:3px; }
|
||||
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
|
||||
.dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
|
||||
tr:hover td { background:rgba(255,255,255,.02); }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="search">search projects, builds, logs…</div>
|
||||
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#8b7cf6">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS</p>
|
||||
<table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>15 — Midnight Cyan</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(45,212,191,.07), transparent 60%); pointer-events:none; }
|
||||
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#2dd4bf,#0d9488); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
|
||||
.rail .ic.on { background:rgba(45,212,191,.14); color:#5eead4; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
|
||||
.brand em { font-style:normal; color:#5eead4; }
|
||||
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
|
||||
.search::before { content:'$ '; color:#5eead4; }
|
||||
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
||||
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
|
||||
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#2dd4bf,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
|
||||
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.btn-primary { background:#2dd4bf; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(45,212,191,.35); }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
|
||||
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
|
||||
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
|
||||
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .d b { font-weight:600; }
|
||||
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#5eead4}
|
||||
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
|
||||
.secttl::before { content:'// '; color:#5eead4; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
|
||||
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(45,212,191,.45); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
|
||||
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; }
|
||||
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
|
||||
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
|
||||
.svcs { display:flex; gap:6px; margin-bottom:14px; }
|
||||
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft .arrow { color:#5eead4; }
|
||||
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
|
||||
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
|
||||
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
|
||||
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
|
||||
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
|
||||
|
||||
.stat .k { display:flex; justify-content:space-between; align-items:center; }
|
||||
.live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
|
||||
.spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
|
||||
.spark i { flex:1; background:linear-gradient(180deg, #2dd4bf, transparent); opacity:.7; border-radius:1px; }
|
||||
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
|
||||
.bar i { display:block; height:100%; background:#2dd4bf; border-radius:3px; }
|
||||
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
|
||||
.dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
|
||||
tr:hover td { background:rgba(255,255,255,.02); }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="search">search projects, builds, logs…</div>
|
||||
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#2dd4bf">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS</p>
|
||||
<table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>16 — Midnight Sunset</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:#0b0c11; color:#eceef4; display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
body::before { content:''; position:fixed; inset:0; background:radial-gradient(900px 500px at 70% -10%, rgba(251,146,60,.07), transparent 60%); pointer-events:none; }
|
||||
.rail { width:62px; border-right:1px solid rgba(255,255,255,.05); background:#0e0f14; display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:8px; }
|
||||
.rail .mark { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#fb923c,#ea6f1f); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#565a68; font-size:16px; }
|
||||
.rail .ic.on { background:rgba(251,146,60,.14); color:#fbb06a; }
|
||||
main { flex:1; min-width:0; }
|
||||
.topbar { display:flex; align-items:center; gap:16px; padding:11px 26px; border-bottom:1px solid rgba(255,255,255,.05); }
|
||||
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
|
||||
.brand em { font-style:normal; color:#fbb06a; }
|
||||
.search { background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:7px 14px; color:#6b6e7d; font-size:12px; width:300px; font-family:'JetBrains Mono',monospace; }
|
||||
.search::before { content:'$ '; color:#fbb06a; }
|
||||
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
||||
.pill { font-size:11px; color:#9a9dab; background:#14151b; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px 14px; font-family:'JetBrains Mono',monospace; }
|
||||
.avatar-t { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#fb923c,#5c6ef0); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
|
||||
.content { padding:26px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
|
||||
.pagehead h1 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
|
||||
.pagehead p { font-size:12px; color:#6b6e7d; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.btn-primary { background:#fb923c; color:#fff; border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; box-shadow:0 4px 16px rgba(251,146,60,.35); }
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
|
||||
.stat { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:15px 18px; }
|
||||
.stat .k { font-size:10px; color:#6b6e7d; letter-spacing:.14em; font-weight:700; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .v { font-size:26px; font-weight:800; letter-spacing:-.8px; margin-top:6px; }
|
||||
.stat .d { font-size:11px; color:#565a68; margin-top:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.stat .d b { font-weight:600; }
|
||||
.ok{color:#3dd68c}.warn{color:#f0a040}.pink{color:#fbb06a}
|
||||
.secttl { font-size:11px; font-weight:700; letter-spacing:.16em; color:#565a68; margin:0 0 12px; font-family:'JetBrains Mono',monospace; }
|
||||
.secttl::before { content:'// '; color:#fbb06a; }
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
|
||||
.proj { background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; transition:.15s; }
|
||||
.proj:hover { border-color:rgba(251,146,60,.45); transform:translateY(-1px); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
|
||||
.proj .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; font-family:'JetBrains Mono',monospace; }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; }
|
||||
.proj .env { font-size:10.5px; color:#6b6e7d; margin-top:2px; font-family:'JetBrains Mono',monospace; }
|
||||
.badge { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:4px; font-family:'JetBrains Mono',monospace; }
|
||||
.b-run { background:rgba(61,214,140,.1); color:#3dd68c; } .b-warn { background:rgba(240,160,64,.1); color:#f0a040; }
|
||||
.svcs { display:flex; gap:6px; margin-bottom:14px; }
|
||||
.svcs span { height:26px; padding:0 8px; border-radius:7px; background:#191b23; border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; font-size:10px; color:#8a8d9c; font-weight:600; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#565a68; border-top:1px solid rgba(255,255,255,.05); padding-top:12px; font-family:'JetBrains Mono',monospace; }
|
||||
.proj .ft .arrow { color:#fbb06a; }
|
||||
table { width:100%; border-collapse:collapse; background:#12131a; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; font-size:12.5px; }
|
||||
th { text-align:left; font-size:9.5px; letter-spacing:.16em; color:#565a68; font-weight:700; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; }
|
||||
td { padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.04); color:#b6b9c6; font-family:'JetBrains Mono',monospace; font-size:12px; }
|
||||
td:first-child { color:#eceef4; font-weight:600; font-family:'Inter',sans-serif; }
|
||||
.st { font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.06em; }
|
||||
.st-ok { background:rgba(61,214,140,.1); color:#3dd68c; } .st-run { background:rgba(108,142,240,.12); color:#6c8ef0; } .st-fail { background:rgba(255,112,67,.12); color:#ff7043; }
|
||||
|
||||
.stat .k { display:flex; justify-content:space-between; align-items:center; }
|
||||
.live { width:6px; height:6px; border-radius:50%; background:#3dd68c; box-shadow:0 0 6px rgba(61,214,140,.7); animation:pulse 2s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
|
||||
.spark { display:flex; gap:2.5px; align-items:flex-end; height:26px; margin:10px 0 4px; }
|
||||
.spark i { flex:1; background:linear-gradient(180deg, #fb923c, transparent); opacity:.7; border-radius:1px; }
|
||||
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:12px 0 6px; overflow:hidden; }
|
||||
.bar i { display:block; height:100%; background:#fb923c; border-radius:3px; }
|
||||
.dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; }
|
||||
.dot-ok { background:#3dd68c; } .dot-err { background:#ff7043; }
|
||||
tr:hover td { background:rgba(255,255,255,.02); }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg width="20" height="20" viewBox="0 0 64 64"><g fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⚙</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="search">search projects, builds, logs…</div>
|
||||
<div class="topright"><span class="pill">env:production</span><div class="avatar-t">TD</div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p>3 projects · 9 services · 1 host</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div><div class="v">14%</div><div class="spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:55%"></i><i style="height:42%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:35%"></i><i style="height:52%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:22%"></i></div><div class="d"><b class="ok">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div><div class="v">72%</div><div class="bar"><i style="width:72%"></i></div><div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div><div class="v">73%</div><div class="bar"><i style="width:73%;background:#f0a040"></i></div><div class="d">338G of 465G</div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div><div class="v">18</div><div class="bar"><i style="width:94%"></i></div><div class="d"><b class="ok">17 ok</b> · <b class="warn">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS</p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#fb923c">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#6c5ce7">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic" style="background:#ff8a5c">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS</p>
|
||||
<table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>17 — Vertice (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
:root {
|
||||
--bg:#0c0d0f; --surface:#131518; --surface2:#1a1d22; --line:rgba(255,255,255,.06);
|
||||
--ink:#e9ebee; --dim:#8b919e; --faint:#575d69;
|
||||
--lime:#b4e34a; --lime-soft:#cdf06f; --lime-glow:rgba(180,227,74,.1);
|
||||
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
|
||||
}
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
|
||||
/* ── rail ── */
|
||||
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
|
||||
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:7px; }
|
||||
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
|
||||
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
box-shadow:0 3px 14px rgba(180,227,74,.35); }
|
||||
.mark svg { width:19px; height:19px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
|
||||
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; }
|
||||
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
|
||||
.rail .ic.on { background:var(--lime-glow); color:var(--lime-soft); }
|
||||
.rail .spacer { flex:1; }
|
||||
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
|
||||
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
|
||||
|
||||
main { flex:1; min-width:0; }
|
||||
|
||||
/* ── topbar ── */
|
||||
.topbar { display:flex; align-items:center; gap:18px; padding:0 26px; height:52px;
|
||||
border-bottom:1px solid var(--line); }
|
||||
.brand { font-weight:800; font-size:15px; letter-spacing:-.3px; }
|
||||
.brand em { font-style:normal; color:var(--lime); }
|
||||
.tlm { display:flex; gap:16px; font:11px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.tlm b { color:var(--dim); font-weight:500; }
|
||||
.search { margin-left:auto; width:290px; padding:7px 14px; border-radius:9px;
|
||||
background:var(--surface); border:1px solid var(--line);
|
||||
font:11.5px 'JetBrains Mono',monospace; color:var(--faint); transition:.15s; }
|
||||
.search:hover, .search:focus-within { border-color:rgba(180,227,74,.35); }
|
||||
.search::before { content:'$ '; color:var(--lime); }
|
||||
.envp { font:10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:var(--lime-soft);
|
||||
border:1px solid rgba(180,227,74,.3); border-radius:999px; padding:5px 13px; }
|
||||
|
||||
/* ── content ── */
|
||||
.content { padding:24px 26px 34px; max-width:1240px; }
|
||||
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
|
||||
.pagehead h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; }
|
||||
.pagehead .sub { font:11px 'JetBrains Mono',monospace; color:var(--faint); margin-top:5px; }
|
||||
.pagehead .sub b { color:var(--dim); font-weight:500; }
|
||||
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:9px;
|
||||
padding:9px 18px; font-size:12.5px; font-weight:800; cursor:pointer;
|
||||
box-shadow:0 3px 14px rgba(180,227,74,.28); transition:.15s; }
|
||||
.btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
|
||||
|
||||
/* ── stat row ── */
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:24px; }
|
||||
.stat { background:var(--surface); border:1px solid var(--line); border-radius:13px;
|
||||
padding:15px 17px 13px; transition:.15s; }
|
||||
.stat:hover { border-color:rgba(180,227,74,.22); }
|
||||
.stat .k { display:flex; align-items:center; justify-content:space-between;
|
||||
font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--faint); }
|
||||
.live { width:5.5px; height:5.5px; border-radius:50%; background:var(--lime);
|
||||
box-shadow:0 0 7px rgba(180,227,74,.8); animation:pulse 2.4s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
||||
.stat .v { font:500 30px/1.1 'JetBrains Mono',monospace; letter-spacing:-1.2px;
|
||||
margin-top:9px; font-variant-numeric:tabular-nums; }
|
||||
.stat .v span { font-size:14px; color:var(--faint); }
|
||||
.spark { display:flex; gap:3px; align-items:flex-end; height:24px; margin:11px 0 7px; }
|
||||
.spark i { flex:1; border-radius:1.5px;
|
||||
background:linear-gradient(180deg, var(--lime), rgba(180,227,74,.12)); opacity:.75; }
|
||||
.bar { height:5px; background:rgba(255,255,255,.06); border-radius:3px; margin:13px 0 8px; overflow:hidden; }
|
||||
.bar i { display:block; height:100%; border-radius:3px;
|
||||
background:linear-gradient(90deg,var(--lime),var(--yellow)); }
|
||||
.stat .d { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.02em; }
|
||||
.stat .d b { font-weight:600; }
|
||||
.ok-t{color:var(--ok)} .warn-t{color:var(--yellow)} .err-t{color:var(--err)}
|
||||
|
||||
/* ── sections ── */
|
||||
.secttl { display:flex; align-items:center; gap:9px; margin:0 0 13px;
|
||||
font:600 10.5px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
|
||||
.secttl::before { content:'//'; color:var(--lime); font-weight:700; }
|
||||
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#41474f; }
|
||||
|
||||
/* ── project cards ── */
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:24px; }
|
||||
.proj { background:var(--surface); border:1px solid var(--line); border-radius:15px;
|
||||
padding:17px 18px 15px; transition:.18s; cursor:pointer; position:relative; overflow:hidden; }
|
||||
.proj::before { content:''; position:absolute; inset:0 0 auto; height:1px;
|
||||
background:linear-gradient(90deg,transparent,rgba(180,227,74,0),transparent); transition:.25s; }
|
||||
.proj:hover { border-color:rgba(180,227,74,.35); transform:translateY(-2px); }
|
||||
.proj:hover::before { background:linear-gradient(90deg,transparent,var(--lime),transparent); }
|
||||
.proj .top { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
|
||||
.proj .ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center;
|
||||
justify-content:center; font:700 12.5px 'JetBrains Mono',monospace; flex-shrink:0; }
|
||||
.ic-lime { background:var(--lime-glow); color:var(--lime-soft); }
|
||||
.ic-mint { background:rgba(94,230,160,.12); color:var(--ok); }
|
||||
.ic-amber { background:rgba(242,201,76,.12); color:var(--yellow); }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
|
||||
.proj .env { font:10px 'JetBrains Mono',monospace; color:var(--faint); margin-top:2.5px; }
|
||||
.badge { margin-left:auto; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em;
|
||||
padding:4px 10px; border-radius:5px; }
|
||||
.b-run { background:rgba(94,230,160,.1); color:var(--ok); }
|
||||
.b-warn { background:rgba(242,201,76,.1); color:var(--yellow); }
|
||||
.svcs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
|
||||
.svcs span { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
|
||||
border-radius:7px; background:var(--surface2); border:1px solid rgba(255,255,255,.06);
|
||||
font:600 9.5px 'JetBrains Mono',monospace; color:var(--dim); }
|
||||
.dot { width:4.5px; height:4.5px; border-radius:50%; }
|
||||
.dot-ok { background:var(--ok); } .dot-err { background:var(--err); } .dot-warn { background:var(--yellow); }
|
||||
.proj .ft { display:flex; justify-content:space-between; align-items:center;
|
||||
border-top:1px solid rgba(255,255,255,.05); padding-top:11px;
|
||||
font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.proj .ft .arrow { color:var(--lime); font-weight:700; transition:.15s; }
|
||||
.proj:hover .ft .arrow { transform:translateX(3px); }
|
||||
|
||||
/* ── table ── */
|
||||
.tbl { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th { text-align:left; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.2em;
|
||||
color:var(--faint); padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
|
||||
td { padding:11.5px 18px; border-bottom:1px solid rgba(255,255,255,.035);
|
||||
font:11.5px 'JetBrains Mono',monospace; color:#b0b6bf; }
|
||||
tbody tr:last-child td { border-bottom:none; }
|
||||
tbody tr { transition:.12s; } tbody tr:hover td { background:rgba(180,227,74,.03); }
|
||||
td:first-child { color:var(--ink); font:600 12.5px 'Inter',sans-serif; }
|
||||
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
|
||||
.st-ok { background:rgba(94,230,160,.1); color:var(--ok); }
|
||||
.st-run { background:rgba(122,184,255,.12); color:var(--run); }
|
||||
.st-fail { background:rgba(255,111,92,.1); color:var(--err); }
|
||||
.svc-tag { font:9px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
|
||||
border-radius:4px; padding:2px 6px; margin-right:8px; vertical-align:1px; }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="ic">⚙</div>
|
||||
<div class="usr">TD</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="tlm"><span>uptime <b>7h 41m</b></span><span>node <b>cnr-node-01</b></span><span>ver <b>0.4.2</b></span></div>
|
||||
<div class="search">search projects, builds, logs…</div>
|
||||
<span class="envp">env:production</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div><h1>Projects</h1><p class="sub"><b>3</b> projects · <b>9</b> services · <b>1</b> host · all systems nominal</p></div>
|
||||
<button class="btn-primary">+ New Project</button>
|
||||
</div>
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div>
|
||||
<div class="v">14<span>%</span></div>
|
||||
<div class="spark"><i style="height:28%"></i><i style="height:44%"></i><i style="height:36%"></i><i style="height:58%"></i><i style="height:42%"></i><i style="height:66%"></i><i style="height:50%"></i><i style="height:34%"></i><i style="height:56%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:20%"></i></div>
|
||||
<div class="d"><b class="ok-t">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div>
|
||||
<div class="v">72<span>%</span></div>
|
||||
<div class="bar"><i style="width:72%"></i></div>
|
||||
<div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div>
|
||||
<div class="v">73<span>%</span></div>
|
||||
<div class="bar"><i style="width:73%;background:linear-gradient(90deg,var(--yellow),var(--err))"></i></div>
|
||||
<div class="d">338G of 465G · <b class="warn-t">high</b></div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div>
|
||||
<div class="v">18</div>
|
||||
<div class="bar"><i style="width:94%"></i></div>
|
||||
<div class="d"><b class="ok-t">17 ok</b> · <b class="warn-t">1 failed</b></div></div>
|
||||
</div>
|
||||
<p class="secttl">PROJECTS <span class="r">3 records</span></p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><div class="ic ic-lime">CS</div><div><h3>core-services</h3><div class="env">prod · containr.dev</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span>+1</span></div>
|
||||
<div class="ft"><span>5 svc · deployed 4m ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic ic-mint">GS</div><div><h3>growth-site</h3><div class="env">prod · growth.app</div></div><span class="badge b-run">RUNNING</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div>
|
||||
<div class="ft"><span>3 svc · deployed 2h ago</span><span class="arrow">→</span></div></div>
|
||||
<div class="proj"><div class="top"><div class="ic ic-amber">ML</div><div><h3>ml-pipeline</h3><div class="env">staging · internal</div></div><span class="badge b-warn">DEGRADED</span></div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div>
|
||||
<div class="ft"><span>2 svc · 1 failed build</span><span class="arrow">→</span></div></div>
|
||||
</div>
|
||||
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
|
||||
<div class="tbl"><table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td><span class="svc-tag">svc</span>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td><span class="svc-tag">svc</span>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td><span class="svc-tag">svc</span>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td><span class="svc-tag">svc</span>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>18 — Vertice v2 (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
:root {
|
||||
--bg:#0c0d0f; --surface:#131518; --surface2:#1a1d22; --line:rgba(255,255,255,.07);
|
||||
--ink:#ecedf0; --dim:#8b919e; --faint:#565d68;
|
||||
--lime:#b4e34a; --lime-soft:#cdf06f;
|
||||
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
|
||||
}
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
|
||||
/* ── rail ── */
|
||||
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
|
||||
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:7px; }
|
||||
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
|
||||
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
box-shadow:0 3px 14px rgba(180,227,74,.3); }
|
||||
.mark svg { width:19px; height:19px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
|
||||
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
|
||||
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
|
||||
.rail .ic.on { background:rgba(180,227,74,.1); color:var(--lime-soft); }
|
||||
.rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
|
||||
.rail .spacer { flex:1; }
|
||||
.rail .kbd { font:700 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
|
||||
border-radius:5px; padding:3px 6px; letter-spacing:.05em; }
|
||||
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
|
||||
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
|
||||
|
||||
main { flex:1; min-width:0; }
|
||||
|
||||
/* ── ticker topbar ── */
|
||||
.topbar { display:flex; align-items:center; gap:0; height:46px; border-bottom:1px solid var(--line);
|
||||
font:11px 'JetBrains Mono',monospace; overflow:hidden; }
|
||||
.topbar .brand { padding:0 22px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; border-right:1px solid var(--line); height:100%; display:flex; align-items:center; }
|
||||
.topbar .brand em { font-style:normal; color:var(--lime); }
|
||||
.tick { display:flex; gap:0; flex:1; height:100%; }
|
||||
.tick span { display:flex; align-items:center; gap:7px; padding:0 18px; border-right:1px solid var(--line); color:var(--faint); white-space:nowrap; }
|
||||
.tick span b { color:var(--dim); font-weight:500; }
|
||||
.tick .sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
|
||||
.tick .sig.y { background:var(--yellow); }
|
||||
.topbar .envp { padding:0 22px; height:100%; display:flex; align-items:center; gap:8px; color:var(--lime-soft); border-left:1px solid var(--line); }
|
||||
.topbar .envp::before { content:''; width:5px; height:5px; background:var(--lime); }
|
||||
|
||||
/* ── masthead ── */
|
||||
.mast { display:flex; align-items:flex-end; gap:26px; padding:30px 32px 24px; border-bottom:1px solid var(--line); }
|
||||
.mast h1 { font-size:54px; font-weight:800; letter-spacing:-2.5px; line-height:.95; }
|
||||
.mast h1 .cursor { color:var(--lime); font-weight:400; }
|
||||
.mast .meta { margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
|
||||
.mast .count { font:500 11px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.14em; }
|
||||
.mast .count b { color:var(--ink); font-weight:600; }
|
||||
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
|
||||
padding:10px 20px; font-size:12.5px; font-weight:800; cursor:pointer; transition:.15s;
|
||||
font-family:'JetBrains Mono',monospace; }
|
||||
.btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
|
||||
.btn-primary .k { opacity:.55; font-weight:500; margin-left:8px; }
|
||||
|
||||
/* ── asymmetric body ── */
|
||||
.body { display:grid; grid-template-columns:1fr 340px; }
|
||||
|
||||
/* left: project index */
|
||||
.pindex { padding:8px 0 0; border-right:1px solid var(--line); }
|
||||
.pindex .ph { display:flex; align-items:baseline; gap:12px; padding:14px 32px 10px;
|
||||
font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
|
||||
.pindex .ph .r { margin-left:auto; }
|
||||
.prow { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:18px;
|
||||
padding:20px 32px; border-top:1px solid var(--line); cursor:pointer; transition:.15s; position:relative; }
|
||||
.prow::after { content:'→'; position:absolute; right:32px; opacity:0; color:var(--lime);
|
||||
font-family:'JetBrains Mono',monospace; transition:.15s; }
|
||||
.prow:hover { background:rgba(255,255,255,.02); }
|
||||
.prow:hover::after { opacity:1; transform:translateX(4px); }
|
||||
.prow:hover .stwrap { opacity:0; }
|
||||
.prow .no { font:600 13px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.prow .no i { font-style:normal; color:var(--lime); }
|
||||
.prow h3 { font-size:19px; font-weight:700; letter-spacing:-.4px; }
|
||||
.prow .env { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:4px; }
|
||||
.prow .env b { color:var(--dim); font-weight:500; }
|
||||
.prow .svcs { display:flex; gap:5px; margin-top:10px; }
|
||||
.prow .svcs span { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
|
||||
border-radius:6px; background:var(--surface2); font:600 9.5px 'JetBrains Mono',monospace; color:var(--dim); }
|
||||
.dot { width:4.5px; height:4.5px; border-radius:50%; }
|
||||
.dot-ok { background:var(--ok); } .dot-err { background:var(--err); }
|
||||
.stwrap { display:flex; flex-direction:column; align-items:flex-end; gap:7px; transition:.15s; }
|
||||
.badge { font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em; padding:4px 10px; border-radius:5px; }
|
||||
.b-run { background:rgba(94,230,160,.1); color:var(--ok); }
|
||||
.b-warn { background:rgba(242,201,76,.1); color:var(--yellow); }
|
||||
.stwrap .ago { font:10px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
|
||||
/* left: deploy feed below index */
|
||||
.feed-h { display:flex; align-items:baseline; padding:16px 32px 10px; border-top:1px solid var(--line);
|
||||
font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em; color:var(--faint); }
|
||||
.feed-h .r { margin-left:auto; }
|
||||
.frow { display:grid; grid-template-columns:14px 1fr auto auto auto; align-items:center; gap:16px;
|
||||
padding:12px 32px; border-top:1px solid rgba(255,255,255,.04); font:11px 'JetBrains Mono',monospace; }
|
||||
.frow:hover { background:rgba(255,255,255,.02); }
|
||||
.frow .g { color:var(--faint); }
|
||||
.frow .name { color:var(--ink); font:600 12px 'Inter',sans-serif; }
|
||||
.frow .name span { color:var(--faint); font:400 10.5px 'JetBrains Mono',monospace; margin-left:9px; }
|
||||
.frow .dur { color:var(--faint); }
|
||||
.frow .ago { color:var(--faint); width:64px; text-align:right; }
|
||||
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
|
||||
.st-ok { background:rgba(94,230,160,.1); color:var(--ok); }
|
||||
.st-run { background:rgba(122,184,255,.12); color:var(--run); }
|
||||
.st-fail { background:rgba(255,111,92,.1); color:var(--err); }
|
||||
|
||||
/* right: host panel */
|
||||
.host { padding:0; }
|
||||
.host .hh { padding:14px 22px 12px; font:600 10px 'JetBrains Mono',monospace; letter-spacing:.2em;
|
||||
color:var(--faint); display:flex; align-items:center; gap:8px; }
|
||||
.host .hh::before { content:''; width:5px; height:5px; background:var(--lime); }
|
||||
.host .hh .r { margin-left:auto; letter-spacing:.06em; color:#41474f; }
|
||||
.hstat { padding:13px 22px; border-top:1px solid rgba(255,255,255,.045); }
|
||||
.hstat .top { display:flex; justify-content:space-between; align-items:baseline; }
|
||||
.hstat .k { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.14em; color:var(--faint); }
|
||||
.hstat .v { font:600 19px 'JetBrains Mono',monospace; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
|
||||
.hstat .v span { font-size:11px; color:var(--faint); font-weight:500; }
|
||||
.meter { height:4px; border-radius:2px; background:rgba(255,255,255,.06); margin-top:9px; overflow:hidden; }
|
||||
.meter i { display:block; height:100%; border-radius:2px; background:var(--lime); }
|
||||
.meter i.y { background:var(--yellow); }
|
||||
.meter i.r { background:var(--err); }
|
||||
.hstat .note { font:9.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
|
||||
.sparkline { display:flex; gap:2.5px; align-items:flex-end; height:30px; margin-top:10px; }
|
||||
.sparkline i { flex:1; border-radius:1.5px; background:rgba(180,227,74,.5); }
|
||||
.host .foot { padding:14px 22px 18px; border-top:1px solid rgba(255,255,255,.045);
|
||||
font:10px 'JetBrains Mono',monospace; color:var(--faint); line-height:1.9; }
|
||||
.host .foot b { color:var(--dim); font-weight:500; }
|
||||
.linkrow { display:flex; gap:0; border-top:1px solid var(--line); }
|
||||
.linkrow a { flex:1; text-align:center; padding:12px 0; font:600 9.5px 'JetBrains Mono',monospace;
|
||||
letter-spacing:.14em; color:var(--faint); text-decoration:none; border-right:1px solid var(--line); transition:.15s; }
|
||||
.linkrow a:last-child { border-right:none; }
|
||||
.linkrow a:hover { color:var(--lime-soft); background:rgba(180,227,74,.04); }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="kbd">⌘K</div>
|
||||
<div class="ic">⚙</div>
|
||||
<div class="usr">TD</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="tick">
|
||||
<span><i class="sig"></i>all systems <b>nominal</b></span>
|
||||
<span>uptime <b>7h 41m</b></span>
|
||||
<span>node <b>cnr-node-01</b></span>
|
||||
<span><i class="sig y"></i>1 build <b>failed</b></span>
|
||||
<span>ver <b>0.4.2</b></span>
|
||||
</div>
|
||||
<div class="envp">env:production</div>
|
||||
</div>
|
||||
|
||||
<div class="mast">
|
||||
<h1>Projects<span class="cursor">_</span></h1>
|
||||
<div class="meta">
|
||||
<div class="count"><b>03</b> PROJECTS · <b>09</b> SERVICES · <b>01</b> HOST</div>
|
||||
<button class="btn-primary">+ new project <span class="k">N</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="pindex">
|
||||
<div class="ph"><span>// PROJECT INDEX</span><span class="r">sorted by last deploy</span></div>
|
||||
<div class="prow">
|
||||
<span class="no"><i>/</i>01</span>
|
||||
<div><h3>core-services</h3><div class="env">production · <b>containr.dev</b> · 5 services</div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>web</span><span><b class="dot dot-ok"></b>db</span><span><b class="dot dot-ok"></b>worker</span><span><b class="dot dot-ok"></b>cache</span></div></div>
|
||||
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">4m ago</span></div>
|
||||
</div>
|
||||
<div class="prow">
|
||||
<span class="no"><i>/</i>02</span>
|
||||
<div><h3>growth-site</h3><div class="env">production · <b>growth.app</b> · 3 services</div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>site</span><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-ok"></b>redis</span></div></div>
|
||||
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">2h ago</span></div>
|
||||
</div>
|
||||
<div class="prow">
|
||||
<span class="no"><i>/</i>03</span>
|
||||
<div><h3>ml-pipeline</h3><div class="env">staging · <b>internal</b> · 2 services</div>
|
||||
<div class="svcs"><span><b class="dot dot-ok"></b>api</span><span><b class="dot dot-err"></b>worker</span></div></div>
|
||||
<div class="stwrap"><span class="badge b-warn">DEGRADED</span><span class="ago">1h ago</span></div>
|
||||
</div>
|
||||
<div class="feed-h"><span>// DEPLOY FEED</span><span class="r">last 24h</span></div>
|
||||
<div class="frow"><span class="g">▸</span><span class="name">api-gateway<span>core-services</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">48s</span><span class="ago">4m</span></div>
|
||||
<div class="frow"><span class="g">▸</span><span class="name">web-frontend<span>core-services</span></span><span class="st st-run">BUILDING</span><span class="dur">—</span><span class="ago">6m</span></div>
|
||||
<div class="frow"><span class="g">▸</span><span class="name">worker<span>ml-pipeline</span></span><span class="st st-fail">FAILED</span><span class="dur">1m32s</span><span class="ago">1h</span></div>
|
||||
<div class="frow"><span class="g">▸</span><span class="name">site<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">39s</span><span class="ago">2h</span></div>
|
||||
<div class="frow"><span class="g">▸</span><span class="name">api<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="dur">41s</span><span class="ago">3h</span></div>
|
||||
</div>
|
||||
<aside class="host">
|
||||
<div class="hh">HOST VITALS <span class="r">cnr-node-01</span></div>
|
||||
<div class="hstat"><div class="top"><span class="k">CPU</span><span class="v">14<span>%</span></span></div>
|
||||
<div class="sparkline"><i style="height:26%"></i><i style="height:42%"></i><i style="height:34%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:48%"></i><i style="height:32%"></i><i style="height:54%"></i><i style="height:38%"></i><i style="height:28%"></i><i style="height:18%"></i></div>
|
||||
<div class="note">16 cores · load 2.41 · healthy</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">MEMORY</span><span class="v">72<span>%</span></span></div>
|
||||
<div class="meter"><i style="width:72%"></i></div>
|
||||
<div class="note">9.8G / 13G used</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">DISK</span><span class="v">73<span>%</span></span></div>
|
||||
<div class="meter"><i class="y" style="width:73%"></i></div>
|
||||
<div class="note">338G of 465G · high usage</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">NETWORK</span><span class="v">84<span>MB/s</span></span></div>
|
||||
<div class="meter"><i style="width:34%"></i></div>
|
||||
<div class="note">rx 52 · tx 32</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">DEPLOYS / 7D</span><span class="v">18</span></div>
|
||||
<div class="meter"><i style="width:94%"></i></div>
|
||||
<div class="note">17 ok · 1 failed</div></div>
|
||||
<div class="foot">docker <b>26.1.4</b> · containerd <b>1.7</b><br>traefik <b>v3.1</b> · 9 containers<br>last gc <b>12m ago</b></div>
|
||||
<div class="linkrow"><a href="#">METRICS</a><a href="#">LOGS</a><a href="#">DOCS</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>19 — Vertice v3 (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
:root {
|
||||
--bg:#0c0d0f; --surface:#131518; --surface2:#191c20; --line:rgba(255,255,255,.065);
|
||||
--ink:#ecedf0; --dim:#8b919e; --faint:#4d535e;
|
||||
--lime:#b4e34a; --lime-soft:#cdf06f;
|
||||
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
|
||||
}
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
|
||||
.mono { font-family:'JetBrains Mono',monospace; }
|
||||
|
||||
/* ── rail ── */
|
||||
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
|
||||
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; }
|
||||
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
|
||||
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
box-shadow:0 3px 14px rgba(180,227,74,.28); }
|
||||
.mark svg { width:19px; height:19px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
|
||||
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
|
||||
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
|
||||
.rail .ic.on { background:rgba(180,227,74,.09); color:var(--lime-soft); }
|
||||
.rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
|
||||
.rail .spacer { flex:1; }
|
||||
.rail .kbd { font:600 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line);
|
||||
border-radius:5px; padding:3px 6px; }
|
||||
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
|
||||
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
|
||||
|
||||
main { flex:1; min-width:0; }
|
||||
|
||||
/* ── topbar: one quiet line ── */
|
||||
.topbar { display:flex; align-items:center; height:46px; border-bottom:1px solid var(--line);
|
||||
font:11px 'JetBrains Mono',monospace; }
|
||||
.topbar .brand { padding:0 24px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; }
|
||||
.topbar .brand em { font-style:normal; color:var(--lime); }
|
||||
.tick { display:flex; gap:22px; padding-left:8px; }
|
||||
.tick span { display:flex; align-items:center; gap:7px; color:var(--faint); }
|
||||
.tick b { color:var(--dim); font-weight:500; }
|
||||
.sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
|
||||
.sig.y { background:var(--yellow); }
|
||||
.topbar .envp { margin-left:auto; padding:0 24px; color:var(--lime-soft); }
|
||||
.topbar .envp::before { content:''; display:inline-block; width:5px; height:5px; background:var(--lime); margin-right:8px; }
|
||||
|
||||
/* ── masthead ── */
|
||||
.mast { display:flex; align-items:flex-end; justify-content:space-between;
|
||||
padding:34px 32px 26px; }
|
||||
.mast h1 { font-size:44px; font-weight:800; letter-spacing:-2px; line-height:1; }
|
||||
.mast h1 .cursor { color:var(--lime); font-weight:400; }
|
||||
.mast .meta { display:flex; align-items:center; gap:22px; }
|
||||
.mast .count { font:500 11px 'JetBrains Mono',monospace; color:var(--faint); letter-spacing:.12em; }
|
||||
.mast .count b { color:var(--dim); font-weight:600; }
|
||||
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
|
||||
padding:10px 18px; font:700 12px 'JetBrains Mono',monospace; cursor:pointer; transition:.15s; }
|
||||
.btn-primary:hover { background:var(--lime-soft); transform:translateY(-1px); }
|
||||
|
||||
/* ── body split ── */
|
||||
.body { display:grid; grid-template-columns:1fr 300px; border-top:1px solid var(--line); }
|
||||
|
||||
/* left */
|
||||
.pindex { padding:6px 0 20px; border-right:1px solid var(--line); }
|
||||
.ph { padding:16px 32px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
|
||||
.ph::before { content:'//'; color:var(--lime); margin-right:8px; }
|
||||
.prow { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px;
|
||||
padding:22px 32px; cursor:pointer; transition:.15s; position:relative; }
|
||||
.prow + .prow { border-top:1px solid rgba(255,255,255,.04); }
|
||||
.prow::after { content:'→'; position:absolute; right:32px; opacity:0; color:var(--lime);
|
||||
font-family:'JetBrains Mono',monospace; font-size:13px; transition:.15s; }
|
||||
.prow:hover { background:rgba(255,255,255,.018); }
|
||||
.prow:hover::after { opacity:1; transform:translateX(4px); }
|
||||
.prow:hover .stwrap { opacity:0; }
|
||||
.prow .no { font:500 12px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.prow .no i { font-style:normal; color:var(--lime); }
|
||||
.prow h3 { font-size:17px; font-weight:700; letter-spacing:-.3px; display:inline; }
|
||||
.prow .meta { display:inline; font:11px 'JetBrains Mono',monospace; color:var(--faint); margin-left:12px; }
|
||||
.prow .meta b { color:var(--dim); font-weight:500; }
|
||||
.prow .svcline { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
|
||||
.prow .svcline i { font-style:normal; }
|
||||
.prow .svcline .g { color:var(--ok); } .prow .svcline .r { color:var(--err); }
|
||||
.stwrap { display:flex; align-items:center; gap:12px; transition:.15s; }
|
||||
.stwrap .ago { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); width:52px; text-align:right; }
|
||||
.badge { font:600 9px 'JetBrains Mono',monospace; letter-spacing:.12em; padding:4px 10px; border-radius:5px; }
|
||||
.b-run { background:rgba(94,230,160,.09); color:var(--ok); }
|
||||
.b-warn { background:rgba(242,201,76,.09); color:var(--yellow); }
|
||||
|
||||
.feed-h { padding:20px 32px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
|
||||
.feed-h::before { content:'//'; color:var(--lime); margin-right:8px; }
|
||||
.frow { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px;
|
||||
padding:11px 32px; font:11px 'JetBrains Mono',monospace; transition:.12s; }
|
||||
.frow + .frow { border-top:1px solid rgba(255,255,255,.035); }
|
||||
.frow:hover { background:rgba(255,255,255,.018); }
|
||||
.frow .name { color:var(--ink); font:600 12px 'Inter',sans-serif; }
|
||||
.frow .name span { color:var(--faint); font:400 10.5px 'JetBrains Mono',monospace; margin-left:10px; }
|
||||
.frow .right { display:flex; align-items:center; gap:16px; }
|
||||
.frow .ago { color:var(--faint); width:44px; text-align:right; }
|
||||
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
|
||||
.st-ok { background:rgba(94,230,160,.09); color:var(--ok); }
|
||||
.st-run { background:rgba(122,184,255,.11); color:var(--run); }
|
||||
.st-fail { background:rgba(255,111,92,.09); color:var(--err); }
|
||||
|
||||
/* right: host vitals */
|
||||
.host { padding-bottom:20px; }
|
||||
.host .hh { padding:16px 24px 6px; font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.22em;
|
||||
color:var(--faint); }
|
||||
.host .hh::before { content:'//'; color:var(--lime); margin-right:8px; }
|
||||
.hstat { padding:15px 24px 4px; }
|
||||
.hstat .top { display:flex; justify-content:space-between; align-items:baseline; }
|
||||
.hstat .k { font:500 10px 'JetBrains Mono',monospace; letter-spacing:.1em; color:var(--faint); }
|
||||
.hstat .v { font:600 18px 'JetBrains Mono',monospace; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
|
||||
.hstat .v span { font-size:10.5px; color:var(--faint); font-weight:500; }
|
||||
.meter { height:3px; border-radius:2px; background:rgba(255,255,255,.07); margin-top:10px; overflow:hidden; }
|
||||
.meter i { display:block; height:100%; border-radius:2px; background:var(--lime); }
|
||||
.meter i.y { background:var(--yellow); }
|
||||
.hstat .note { font:9.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:7px; }
|
||||
.sparkline { display:flex; gap:3px; align-items:flex-end; height:26px; margin-top:10px; }
|
||||
.sparkline i { flex:1; border-radius:1.5px; background:rgba(180,227,74,.4); }
|
||||
.host .foot { margin-top:8px; padding:14px 24px 4px; font:10px 'JetBrains Mono',monospace;
|
||||
color:var(--faint); line-height:2; }
|
||||
.host .foot b { color:var(--dim); font-weight:500; }
|
||||
.linkrow { display:flex; margin:14px 24px 0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
|
||||
.linkrow a { flex:1; text-align:center; padding:9px 0; font:600 9px 'JetBrains Mono',monospace;
|
||||
letter-spacing:.14em; color:var(--faint); text-decoration:none; transition:.15s; }
|
||||
.linkrow a + a { border-left:1px solid var(--line); }
|
||||
.linkrow a:hover { color:var(--lime-soft); background:rgba(180,227,74,.05); }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="kbd">⌘K</div>
|
||||
<div class="ic">⚙</div>
|
||||
<div class="usr">TD</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="tick">
|
||||
<span><i class="sig"></i><b>nominal</b></span>
|
||||
<span><i class="sig y"></i>1 build <b>failed</b></span>
|
||||
<span>node <b>cnr-node-01</b></span>
|
||||
</div>
|
||||
<div class="envp">env:production</div>
|
||||
</div>
|
||||
|
||||
<div class="mast">
|
||||
<h1>Projects<span class="cursor">_</span></h1>
|
||||
<div class="meta">
|
||||
<div class="count"><b>03</b> PROJECTS · <b>09</b> SERVICES</div>
|
||||
<button class="btn-primary">+ new project</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="pindex">
|
||||
<div class="ph">PROJECT INDEX</div>
|
||||
<div class="prow">
|
||||
<span class="no"><i>/</i>01</span>
|
||||
<div><h3>core-services</h3><span class="meta">prod · <b>containr.dev</b></span>
|
||||
<div class="svcline"><i class="g">●</i> api <i class="g">●</i> web <i class="g">●</i> db <i class="g">●</i> worker <i class="g">●</i> cache</div></div>
|
||||
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">4m ago</span></div>
|
||||
</div>
|
||||
<div class="prow">
|
||||
<span class="no"><i>/</i>02</span>
|
||||
<div><h3>growth-site</h3><span class="meta">prod · <b>growth.app</b></span>
|
||||
<div class="svcline"><i class="g">●</i> site <i class="g">●</i> api <i class="g">●</i> redis</div></div>
|
||||
<div class="stwrap"><span class="badge b-run">RUNNING</span><span class="ago">2h ago</span></div>
|
||||
</div>
|
||||
<div class="prow">
|
||||
<span class="no"><i>/</i>03</span>
|
||||
<div><h3>ml-pipeline</h3><span class="meta">staging · <b>internal</b></span>
|
||||
<div class="svcline"><i class="g">●</i> api <i class="r">●</i> worker</div></div>
|
||||
<div class="stwrap"><span class="badge b-warn">DEGRADED</span><span class="ago">1h ago</span></div>
|
||||
</div>
|
||||
<div class="feed-h">DEPLOY FEED</div>
|
||||
<div class="frow"><span class="name">api-gateway<span>core-services</span></span><span class="st st-ok">DEPLOYED</span><span class="ago">4m</span></div>
|
||||
<div class="frow"><span class="name">web-frontend<span>core-services</span></span><span class="st st-run">BUILDING</span><span class="ago">6m</span></div>
|
||||
<div class="frow"><span class="name">worker<span>ml-pipeline</span></span><span class="st st-fail">FAILED</span><span class="ago">1h</span></div>
|
||||
<div class="frow"><span class="name">site<span>growth-site</span></span><span class="st st-ok">DEPLOYED</span><span class="ago">2h</span></div>
|
||||
</div>
|
||||
<aside class="host">
|
||||
<div class="hh">HOST VITALS</div>
|
||||
<div class="hstat"><div class="top"><span class="k">CPU</span><span class="v">14<span>%</span></span></div>
|
||||
<div class="sparkline"><i style="height:26%"></i><i style="height:42%"></i><i style="height:34%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:64%"></i><i style="height:48%"></i><i style="height:32%"></i><i style="height:54%"></i><i style="height:38%"></i><i style="height:28%"></i><i style="height:18%"></i></div>
|
||||
<div class="note">16 cores · load 2.41</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">MEMORY</span><span class="v">72<span>%</span></span></div>
|
||||
<div class="meter"><i style="width:72%"></i></div>
|
||||
<div class="note">9.8G / 13G</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">DISK</span><span class="v">73<span>%</span></span></div>
|
||||
<div class="meter"><i class="y" style="width:73%"></i></div>
|
||||
<div class="note">338G of 465G</div></div>
|
||||
<div class="hstat"><div class="top"><span class="k">DEPLOYS / 7D</span><span class="v">18</span></div>
|
||||
<div class="note" style="margin-top:10px"><b style="color:var(--ok)">17 ok</b> · <b style="color:var(--yellow)">1 failed</b></div></div>
|
||||
<div class="foot">docker <b>26.1.4</b> · traefik <b>v3.1</b><br>9 containers · last gc <b>12m</b></div>
|
||||
<div class="linkrow"><a href="#">METRICS</a><a href="#">LOGS</a><a href="#">DOCS</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
</main></body></html>
|
||||
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><title>20 — Vertice (Dashboard)</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
:root {
|
||||
--bg:#0c0d0f; --surface:#131518; --surface2:#191c20; --line:rgba(255,255,255,.065);
|
||||
--ink:#ecedf0; --dim:#8b919e; --faint:#4d535e;
|
||||
--lime:#b4e34a; --lime-soft:#cdf06f;
|
||||
--yellow:#f2c94c; --ok:#5ee6a0; --err:#ff6f5c; --run:#7ab8ff;
|
||||
}
|
||||
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); display:flex; min-height:100vh; }
|
||||
|
||||
/* ── rail ── */
|
||||
.rail { width:62px; flex-shrink:0; border-right:1px solid var(--line); background:#0e0f12;
|
||||
display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:6px; }
|
||||
.mark { width:38px; height:38px; border-radius:12px; margin-bottom:14px;
|
||||
background:linear-gradient(140deg,var(--lime-soft),#7fb524);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
box-shadow:0 3px 14px rgba(180,227,74,.28); }
|
||||
.mark svg { width:19px; height:19px; }
|
||||
.rail .ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
|
||||
justify-content:center; color:var(--faint); font-size:15px; transition:.15s; position:relative; }
|
||||
.rail .ic:hover { color:var(--dim); background:rgba(255,255,255,.03); }
|
||||
.rail .ic.on { background:rgba(180,227,74,.09); color:var(--lime-soft); }
|
||||
.rail .ic.on::before { content:''; position:absolute; left:-11px; width:2.5px; height:16px; border-radius:2px; background:var(--lime); }
|
||||
.rail .spacer { flex:1; }
|
||||
.rail .kbd { font:600 8.5px 'JetBrains Mono',monospace; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:3px 6px; }
|
||||
.rail .usr { width:30px; height:30px; border-radius:50%; font:700 11px/30px 'JetBrains Mono',monospace;
|
||||
text-align:center; color:#131507; background:linear-gradient(135deg,var(--lime-soft),var(--yellow)); }
|
||||
|
||||
main { flex:1; min-width:0; }
|
||||
|
||||
/* ── topbar ── */
|
||||
.topbar { display:flex; align-items:center; height:46px; border-bottom:1px solid var(--line);
|
||||
font:11px 'JetBrains Mono',monospace; }
|
||||
.topbar .brand { padding:0 24px; font:800 14px 'Inter',sans-serif; letter-spacing:-.3px; }
|
||||
.topbar .brand em { font-style:normal; color:var(--lime); }
|
||||
.tick { display:flex; gap:22px; padding-left:8px; }
|
||||
.tick span { display:flex; align-items:center; gap:7px; color:var(--faint); }
|
||||
.tick b { color:var(--dim); font-weight:500; }
|
||||
.sig { width:6px; height:6px; border-radius:50%; background:var(--ok); }
|
||||
.sig.y { background:var(--yellow); }
|
||||
.topbar .envp { margin-left:auto; padding:0 24px; color:var(--lime-soft); }
|
||||
.topbar .envp::before { content:''; display:inline-block; width:5px; height:5px; background:var(--lime); margin-right:8px; }
|
||||
|
||||
/* ── content ── */
|
||||
.content { padding:26px 32px 36px; max-width:1280px; }
|
||||
.pagehead { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:20px; }
|
||||
.pagehead .left h1 { font-size:24px; font-weight:800; letter-spacing:-.8px; }
|
||||
.pagehead .left h1 .cursor { color:var(--lime); font-weight:400; }
|
||||
.pagehead .left .sub { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); margin-top:5px; }
|
||||
.pagehead .left .sub b { color:var(--dim); font-weight:600; }
|
||||
.pagehead .right { display:flex; align-items:center; gap:10px; }
|
||||
.search { width:230px; padding:8px 14px; border-radius:9px; background:var(--surface);
|
||||
border:1px solid var(--line); font:11.5px 'JetBrains Mono',monospace; color:var(--faint); transition:.15s; }
|
||||
.search:hover { border-color:rgba(180,227,74,.3); }
|
||||
.search::before { content:'⌕ '; color:var(--lime); }
|
||||
.btn-primary { background:var(--lime); color:#131507; border:none; border-radius:8px;
|
||||
padding:9px 17px; font:700 12px 'JetBrains Mono',monospace; cursor:pointer; transition:.15s;
|
||||
box-shadow:0 2px 12px rgba(180,227,74,.22); }
|
||||
.btn-primary:hover { background:var(--lime-soft); }
|
||||
|
||||
/* ── stat row ── */
|
||||
.statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:26px; }
|
||||
.stat { background:var(--surface); border:1px solid var(--line); border-radius:13px;
|
||||
padding:14px 17px 12px; transition:.15s; }
|
||||
.stat:hover { border-color:rgba(180,227,74,.2); }
|
||||
.stat .k { display:flex; align-items:center; justify-content:space-between;
|
||||
font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--faint); }
|
||||
.live { width:5.5px; height:5.5px; border-radius:50%; background:var(--lime);
|
||||
box-shadow:0 0 7px rgba(180,227,74,.8); animation:pulse 2.4s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
||||
.stat .v { font:500 28px/1.1 'JetBrains Mono',monospace; letter-spacing:-1.2px;
|
||||
margin-top:8px; font-variant-numeric:tabular-nums; }
|
||||
.stat .v span { font-size:13px; color:var(--faint); }
|
||||
.spark { display:flex; gap:3px; align-items:flex-end; height:22px; margin:10px 0 6px; }
|
||||
.spark i { flex:1; border-radius:1.5px; background:linear-gradient(180deg,var(--lime),rgba(180,227,74,.1)); opacity:.7; }
|
||||
.bar { height:4px; background:rgba(255,255,255,.07); border-radius:2px; margin:12px 0 7px; overflow:hidden; }
|
||||
.bar i { display:block; height:100%; border-radius:2px; background:var(--lime); }
|
||||
.bar i.y { background:linear-gradient(90deg,var(--lime),var(--yellow)); }
|
||||
.bar i.r { background:linear-gradient(90deg,var(--yellow),var(--err)); }
|
||||
.stat .d { font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.stat .d b { font-weight:600; }
|
||||
.ok-t{color:var(--ok)} .warn-t{color:var(--yellow)}
|
||||
|
||||
/* ── section header ── */
|
||||
.secttl { display:flex; align-items:center; margin:0 0 13px;
|
||||
font:600 10px 'JetBrains Mono',monospace; letter-spacing:.22em; color:var(--faint); }
|
||||
.secttl::before { content:'//'; color:var(--lime); margin-right:8px; font-weight:700; }
|
||||
.secttl .r { margin-left:auto; letter-spacing:.08em; color:#41474f; }
|
||||
|
||||
/* ── project cards: railway-style canvas ── */
|
||||
.projgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
|
||||
.proj { background:var(--surface); border:1px solid var(--line); border-radius:15px;
|
||||
padding:15px 16px; transition:.18s; cursor:pointer; }
|
||||
.proj:hover { border-color:rgba(180,227,74,.35); transform:translateY(-2px); }
|
||||
.proj .top { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
|
||||
.proj h3 { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
|
||||
.proj .star { margin-left:auto; color:var(--faint); font-size:14px; transition:.15s; }
|
||||
.proj:hover .star { color:var(--yellow); }
|
||||
.mini { position:relative; height:104px; border-radius:10px; margin-bottom:12px; overflow:hidden;
|
||||
background:#0e1013; border:1px solid rgba(255,255,255,.04);
|
||||
background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px); background-size:14px 14px; }
|
||||
.mini .node { position:absolute; width:32px; height:32px; border-radius:9px;
|
||||
background:var(--surface2); border:1px solid rgba(255,255,255,.09);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
font:700 9px 'JetBrains Mono',monospace; color:var(--dim); }
|
||||
.mini .node .nd { position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%;
|
||||
background:var(--ok); border:2px solid #0e1013; }
|
||||
.mini .node .nd.r { background:var(--err); }
|
||||
.mini .more { position:absolute; width:32px; height:32px; border-radius:9px;
|
||||
border:1px dashed rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
|
||||
font:600 9px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.mini .edge { position:absolute; height:1px; background:rgba(255,255,255,.12); }
|
||||
.proj .ft { display:flex; align-items:center; gap:8px; font:10.5px 'JetBrains Mono',monospace; color:var(--faint); }
|
||||
.proj .ft .env-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); }
|
||||
.proj .ft .env-dot.y { background:var(--yellow); }
|
||||
.proj .ft b { color:var(--dim); font-weight:500; }
|
||||
.proj .ft .ago { margin-left:auto; }
|
||||
|
||||
/* ── deploy table ── */
|
||||
.tbl { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th { text-align:left; font:600 9px 'JetBrains Mono',monospace; letter-spacing:.2em;
|
||||
color:var(--faint); padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
|
||||
td { padding:11.5px 18px; border-bottom:1px solid rgba(255,255,255,.035);
|
||||
font:11.5px 'JetBrains Mono',monospace; color:#b0b6bf; }
|
||||
tbody tr:last-child td { border-bottom:none; }
|
||||
tbody tr { transition:.12s; } tbody tr:hover td { background:rgba(180,227,74,.025); }
|
||||
td:first-child { color:var(--ink); font:600 12.5px 'Inter',sans-serif; }
|
||||
.st { font:600 9.5px 'JetBrains Mono',monospace; letter-spacing:.1em; padding:3px 9px; border-radius:5px; }
|
||||
.st-ok { background:rgba(94,230,160,.09); color:var(--ok); }
|
||||
.st-run { background:rgba(122,184,255,.11); color:var(--run); }
|
||||
.st-fail { background:rgba(255,111,92,.09); color:var(--err); }
|
||||
</style></head><body>
|
||||
<nav class="rail">
|
||||
<div class="mark"><svg viewBox="0 0 64 64"><g fill="none" stroke="#14170a" stroke-width="6" stroke-linecap="round"><rect x="12" y="16" width="40" height="30" rx="5"/><path d="M23 16v30M32 16v30M41 16v30M18 54h28"/></g></svg></div>
|
||||
<div class="ic on">▦</div><div class="ic">▤</div><div class="ic">◉</div><div class="ic">⚇</div><div class="ic">⛁</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="kbd">⌘K</div>
|
||||
<div class="ic">⚙</div>
|
||||
<div class="usr">TD</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="topbar">
|
||||
<div class="brand">contain<em>r</em></div>
|
||||
<div class="tick">
|
||||
<span><i class="sig"></i><b>nominal</b></span>
|
||||
<span><i class="sig y"></i>1 build <b>failed</b></span>
|
||||
<span>node <b>cnr-node-01</b></span>
|
||||
</div>
|
||||
<div class="envp">env:production</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pagehead">
|
||||
<div class="left"><h1>Projects<span class="cursor">_</span></h1>
|
||||
<p class="sub"><b>03</b> projects · <b>09</b> services · <b>01</b> host</p></div>
|
||||
<div class="right">
|
||||
<div class="search">search projects…</div>
|
||||
<button class="btn-primary">+ new</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="statrow">
|
||||
<div class="stat"><div class="k"><span>HOST.CPU</span><span class="live"></span></div>
|
||||
<div class="v">14<span>%</span></div>
|
||||
<div class="spark"><i style="height:28%"></i><i style="height:44%"></i><i style="height:36%"></i><i style="height:58%"></i><i style="height:42%"></i><i style="height:66%"></i><i style="height:50%"></i><i style="height:34%"></i><i style="height:56%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:20%"></i></div>
|
||||
<div class="d"><b class="ok-t">healthy</b> · 16 cores · load 2.41</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.MEM</span><span class="live"></span></div>
|
||||
<div class="v">72<span>%</span></div>
|
||||
<div class="bar"><i class="y" style="width:72%"></i></div>
|
||||
<div class="d">9.8G / 13G used</div></div>
|
||||
<div class="stat"><div class="k"><span>HOST.DISK</span><span class="live"></span></div>
|
||||
<div class="v">73<span>%</span></div>
|
||||
<div class="bar"><i class="r" style="width:73%"></i></div>
|
||||
<div class="d">338G of 465G · <b class="warn-t">high</b></div></div>
|
||||
<div class="stat"><div class="k"><span>DEPLOYS.7D</span></div>
|
||||
<div class="v">18</div>
|
||||
<div class="bar"><i style="width:94%"></i></div>
|
||||
<div class="d"><b class="ok-t">17 ok</b> · <b class="warn-t">1 failed</b></div></div>
|
||||
</div>
|
||||
|
||||
<p class="secttl">PROJECTS <span class="r">3 records</span></p>
|
||||
<div class="projgrid">
|
||||
<div class="proj"><div class="top"><h3>core-services</h3><span class="star">☆</span></div>
|
||||
<div class="mini">
|
||||
<div class="edge" style="left:44px;top:36px;width:44px"></div>
|
||||
<div class="edge" style="left:44px;top:64px;width:80px"></div>
|
||||
<div class="node" style="left:14px;top:22px"><b class="nd"></b>api</div>
|
||||
<div class="node" style="left:88px;top:22px"><b class="nd"></b>web</div>
|
||||
<div class="node" style="left:14px;top:64px"><b class="nd"></b>db</div>
|
||||
<div class="node" style="left:124px;top:64px"><b class="nd"></b>wrk</div>
|
||||
<div class="more" style="left:88px;top:64px">+1</div>
|
||||
</div>
|
||||
<div class="ft"><i class="env-dot"></i><b>production</b> · 5/5 online <span class="ago">4m ago</span></div></div>
|
||||
<div class="proj"><div class="top"><h3>growth-site</h3><span class="star">☆</span></div>
|
||||
<div class="mini">
|
||||
<div class="edge" style="left:44px;top:36px;width:44px"></div>
|
||||
<div class="node" style="left:14px;top:36px"><b class="nd"></b>site</div>
|
||||
<div class="node" style="left:88px;top:36px"><b class="nd"></b>api</div>
|
||||
<div class="node" style="left:162px;top:36px"><b class="nd"></b>rds</div>
|
||||
</div>
|
||||
<div class="ft"><i class="env-dot"></i><b>production</b> · 3/3 online <span class="ago">2h ago</span></div></div>
|
||||
<div class="proj"><div class="top"><h3>ml-pipeline</h3><span class="star">☆</span></div>
|
||||
<div class="mini">
|
||||
<div class="edge" style="left:44px;top:36px;width:44px"></div>
|
||||
<div class="node" style="left:14px;top:36px"><b class="nd"></b>api</div>
|
||||
<div class="node" style="left:88px;top:36px"><b class="nd r"></b>wrk</div>
|
||||
</div>
|
||||
<div class="ft"><i class="env-dot y"></i><b>staging</b> · 1/2 online <span class="ago">1h ago</span></div></div>
|
||||
</div>
|
||||
|
||||
<p class="secttl">RECENT DEPLOYMENTS <span class="r">last 24h</span></p>
|
||||
<div class="tbl"><table>
|
||||
<tr><th>SERVICE</th><th>PROJECT</th><th>STATUS</th><th>DUR</th><th>WHEN</th></tr>
|
||||
<tr><td>api-gateway</td><td>core-services</td><td><span class="st st-ok">DEPLOYED</span></td><td>48s</td><td>4m ago</td></tr>
|
||||
<tr><td>web-frontend</td><td>core-services</td><td><span class="st st-run">BUILDING</span></td><td>—</td><td>6m ago</td></tr>
|
||||
<tr><td>worker</td><td>ml-pipeline</td><td><span class="st st-fail">FAILED</span></td><td>1m32s</td><td>1h ago</td></tr>
|
||||
<tr><td>site</td><td>growth-site</td><td><span class="st st-ok">DEPLOYED</span></td><td>39s</td><td>2h ago</td></tr>
|
||||
</table></div>
|
||||
</div>
|
||||
</main></body></html>
|
||||
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 371 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 109 KiB |