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>
99 lines
9.2 KiB
HTML
99 lines
9.2 KiB
HTML
<!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>
|