mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-10-28 15:51:26 +00:00
Tomas DvorakandDevin
37a56dc6b6
- 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>
202 lines
13 KiB
HTML
202 lines
13 KiB
HTML
<!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>
|