Fenris/prototype/dashboard-clarity/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fenris dashboard clarity prototype</title>
<style>
:root{color-scheme:dark;--bg:#111318;--panel:#191c23;--line:#586071;--text:#e7eaf0;--dim:#a1a8b7;--cyan:#71d6e6;--green:#74d99f;--yellow:#f0cb72;--red:#ff7e86}
*{box-sizing:border-box}body{margin:0;background:#090b0f;color:var(--text);font:15px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}.note{max-width:1120px;margin:18px auto 8px;color:#adb5c5}.terminal{width:min(1120px,calc(100vw - 32px));min-height:650px;margin:0 auto 100px;background:var(--bg);border:1px solid #343a46;box-shadow:0 20px 60px #000;border-radius:8px;overflow:hidden}.header{height:42px;padding:10px 16px;text-align:center;font-weight:800;background:#272c37}.auth{padding:8px 14px}.grid{display:grid;grid-template-columns:3fr 2fr;gap:8px;padding:8px}.box{border:1px solid var(--line);padding:10px 13px;background:var(--panel);min-height:170px}.headline{grid-column:1/-1;min-height:145px}.title{color:var(--dim);margin:-20px 0 8px 3px;background:var(--panel);width:max-content;padding:0 6px}.big{font-size:20px;font-weight:800}.cyan{color:var(--cyan)}.green{color:var(--green)}.yellow{color:var(--yellow)}.red{color:var(--red)}.dim{color:var(--dim)}.service{margin:0 8px 8px;border:1px solid var(--line);padding:8px 12px;background:var(--panel)}.row{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.quit{font-weight:900}.paused{display:none}.terminal[data-state=paused] .paused{display:block}.terminal[data-state=paused] .active-only{display:none}.switcher{position:fixed;z-index:9;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#f4f6fa;color:#15171b;padding:8px 10px;border-radius:999px;box-shadow:0 5px 24px #000}.switcher button{border:0;border-radius:999px;padding:8px 13px;font:700 13px ui-monospace,monospace;cursor:pointer}.switcher .active{background:#212631;color:white}.switcher select{font:700 13px ui-monospace,monospace;padding:7px;border-radius:6px}.variant{display:none}.variant.active{display:block}
/* A: quiet information hierarchy */
#a .auth{background:#17232a;color:#b8dce4;border-bottom:1px solid #31505b}#a .paused{margin:0 8px;padding:11px 14px;background:#392d15;border:2px solid var(--yellow);color:#ffe4a1;font-weight:800}#a .persist{color:var(--green)}#a .quit{background:#e9edf5;color:#111;padding:4px 10px;border-radius:3px}
/* B: explicit labelled rails */
#b .header{text-align:left;border-bottom:3px solid var(--cyan)}#b .auth{margin:8px;border-left:6px solid var(--cyan);background:#19242b}#b .paused{margin:8px;border-left:8px solid var(--yellow);background:#352b18;padding:10px 14px}.rail{display:grid;grid-template-columns:145px 1fr;gap:7px}.rail b{color:var(--dim)}#b .service{border-width:2px}.actionbar{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}#b .quit{color:#fff;border:2px solid #fff;padding:3px 9px}
/* C: strongest state separation */
#c .header{background:#e8ecf3;color:#111;font-size:16px}#c .auth{text-align:center;background:#22283a;color:#ceddff}#c .paused{margin:0;background:var(--yellow);color:#17130a;padding:12px 18px;font-size:17px;font-weight:900;text-align:center}#c .service{padding:0;border:0;background:transparent;display:grid;grid-template-columns:1fr auto}.statusblock{border:1px solid var(--line);padding:9px 13px;background:var(--panel)}#c .persist{font-weight:900;color:var(--green)}#c .actions{background:#272d39;padding:10px 13px;display:flex;align-items:center}#c .quit{background:var(--red);color:#190608;padding:6px 12px;border-radius:4px}
</style>
</head>
<body>
<p class="note"><b>PROTOTYPE:</b> same Panes dashboard, three treatments. Switch variant/state below. Nothing here ships.</p>
<main id="a" class="terminal variant" data-state="active">
 <div class="header">Fenris — NVMe endurance monitor</div>
 <div class="auth">ⓘ Privileged actions will prompt for authentication.</div>
 <div class="paused">⏸ MONITORING PAUSED · Deliberate disable · paused time excluded from observed usage habit</div>
 <div class="grid"><section class="box headline"><div class="title">headline</div><div class="big">Usage-adjusted theoretical lifespan: <span class="cyan">8 yr 103 d remaining</span></div><p>if current habits continue · sustained regime: 46 days</p><b>Projection confidence: <span class="green">Supported</span></b><p class="dim">46 complete days · 98% coverage · stable write rate</p></section><section class="box"><div class="title">usage history</div><b>Usage history · 46 days · 8.1–14.7 GB/day</b><p class="cyan">▂▃▃▄▅▄▃▃▄▅▆▅▄▃▃▂▃▄▅▄</p><p>active 42% · idle 31% · powered off 27%</p></section><section class="box"><div class="title">drive</div><b>Drive health · Samsung SSD 990 PRO</b><p>temperature 41°C · spare 100%<br>media errors 0 · unsafe shutdowns 2</p><b>Settings</b><p>vendor wear: 3% used · 18.4 TB written</p></section></div>
 <div class="service"><div>boot: enabled · timer: active · last collect: ok · freshness: fresh</div><div class="row"><span class="persist active-only">monitoring: active in background · persists across reboots</span><span class="paused">monitoring: paused by Deliberate disable</span><span>Bongbetic · p pause · r resume · c collect · d disclosures · <span class="quit">q QUIT TUI</span></span></div></div>
</main>
<main id="b" class="terminal variant" data-state="active">
 <div class="header">FENRIS <span class="dim">— NVMe endurance monitor</span></div>
 <div class="auth"><b>AUTHENTICATION</b> · Privileged actions will prompt when used (polkit).</div>
 <div class="paused"><b>MONITORING PAUSED</b><br>Deliberate disable closed monitoring period; paused time is excluded from observed usage habit.</div>
 <div class="grid"><section class="box headline"><div class="title">headline</div><div class="big">Usage-adjusted theoretical lifespan: <span class="cyan">8 yr 103 d remaining</span></div><p>if current habits continue · sustained regime: 46 days</p><div class="rail"><b>CONFIDENCE</b><span class="green">SUPPORTED</span><b>EVIDENCE</b><span>46 complete days · 98% coverage · stable write rate</span></div></section><section class="box"><div class="title">usage history</div><b>46 days · 8.1–14.7 GB/day</b><p class="cyan">▂▃▃▄▅▄▃▃▄▅▆▅▄▃▃▂▃▄▅▄</p><p>active 42%<br>idle 31%<br>powered off 27%</p></section><section class="box"><div class="title">drive</div><b>Samsung SSD 990 PRO</b><p>41°C · spare 100% · errors 0<br>18.4 TB written · wear 3%</p></section></div>
 <div class="service"><div class="rail"><b>SERVICE</b><span>boot enabled · timer active · last collect ok · fresh</span><b>CONTINUITY</b><span class="persist active-only">monitoring active in background · persists across reboots</span><span class="paused">monitoring paused by Deliberate disable</span><b>BY</b><span>Bongbetic</span></div><div class="actionbar">p pause · r resume · c collect now · d disclosures <span style="float:right" class="quit">q · QUIT TUI</span></div></div>
</main>
<main id="c" class="terminal variant" data-state="active">
 <div class="header">Fenris — NVMe endurance monitor</div>
 <div class="auth">Privileged actions → authentication prompt</div>
 <div class="paused">⏸ MONITORING PAUSED — DELIBERATE DISABLE</div>
 <div class="grid"><section class="box headline"><div class="title">headline</div><div class="big">Usage-adjusted theoretical lifespan<br><span class="cyan">8 yr 103 d remaining</span></div><p>if current habits continue</p><p><span class="green">● SUPPORTED</span> · 46 complete days · 98% coverage · stable write rate</p></section><section class="box"><div class="title">usage history</div><b>46 days · 8.1–14.7 GB/day</b><p class="cyan">▂▃▃▄▅▄▃▃▄▅▆▅▄▃▃▂▃▄▅▄</p><p>active 42% · idle 31%<br>powered off 27%</p></section><section class="box"><div class="title">drive</div><b>Samsung SSD 990 PRO</b><p>41°C · spare 100% · errors 0<br>18.4 TB written · wear 3%</p></section></div>
 <div class="service"><div class="statusblock"><b class="active-only">● COLLECTION ACTIVE</b><b class="paused">■ COLLECTION PAUSED</b><br><span class="persist active-only">Runs in background · survives reboots</span><span class="paused">Deliberate disable · paused time excluded</span><br><span class="dim">boot enabled · timer active · last collect ok · fresh · Bongbetic</span></div><div class="actions">p pause · r resume · c collect · d disclosures &nbsp; <span class="quit">q QUIT TUI</span></div></div>
</main>
<nav class="switcher" aria-label="Prototype controls"><button id="prev">←</button><span id="label"></span><button id="next">→</button><select id="state"><option value="active">active</option><option value="paused">paused</option></select></nav>
<script>
const variants=[['a','A · Quiet integration'],['b','B · Labelled rails'],['c','C · Strong state blocks']];
const params=new URLSearchParams(location.search);let i=Math.max(0,variants.findIndex(v=>v[0]===(params.get('variant')||'a')));
function show(){document.querySelectorAll('.variant').forEach(x=>x.classList.remove('active'));const el=document.getElementById(variants[i][0]);el.classList.add('active');el.dataset.state=document.getElementById('state').value;document.getElementById('label').textContent=variants[i][1];params.set('variant',variants[i][0]);history.replaceState(null,'','?'+params)}
function cycle(n){i=(i+n+variants.length)%variants.length;show()}document.getElementById('prev').onclick=()=>cycle(-1);document.getElementById('next').onclick=()=>cycle(1);document.getElementById('state').onchange=show;addEventListener('keydown',e=>{if(e.key==='ArrowLeft')cycle(-1);if(e.key==='ArrowRight')cycle(1)});show();
</script>
</body></html>