Containr/docs/design/explorations/20-vertice4.html

<!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>