60 lines
5.0 KiB
HTML
60 lines
5.0 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><title>WristCode settings C: What's wrong first</title><style>
|
||
/* Direction C: the attention-feed idea applied to settings. The first page answers "is anything
|
||
wrong?" in one line. Problems are listed above the healthy things, which collapse to a count. */
|
||
:root { --you:#ffb02e; --work:#4fd1c5; --done:#6b6b70; --card:#17171a; --bad:#ff6b5e; --dim:#aeaeb2; }
|
||
body { margin:0; font-family:"SF Pro Rounded", ui-rounded, system-ui, sans-serif; }
|
||
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px 16px; padding:8px 0 16px; justify-items:center; }
|
||
figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
|
||
figcaption { font-size:13px; color:var(--muted-foreground,#999); text-align:center; max-width:260px; line-height:1.35; font-family:system-ui,sans-serif; }
|
||
.bezel { background:#0b0b0c; padding:10px; border-radius:52px; box-shadow:0 0 0 1px #2a2a2c; }
|
||
.screen { width:198px; height:242px; background:#000; border-radius:42px; overflow:hidden; color:#fff; padding:0 9px; box-sizing:border-box; font-size:13px; }
|
||
.top { display:flex; justify-content:space-between; align-items:baseline; padding:12px 8px 6px; font-weight:600; font-size:15px; }
|
||
.card { background:var(--card); border-radius:16px; padding:8px 10px; margin-bottom:5px; }
|
||
.row { display:flex; align-items:center; gap:7px; }
|
||
.dot { width:8px; height:8px; border-radius:50%; flex:none; }
|
||
.name { font-weight:600; font-size:14px; }
|
||
.meta { font-size:11px; color:var(--dim); }
|
||
.mono { font-family:"SF Mono","JetBrainsMono NFM",ui-monospace,monospace; font-size:10.5px; }
|
||
.chip { display:inline-block; font-size:10px; font-weight:700; border-radius:7px; padding:1px 6px; }
|
||
.label { font-size:11px; color:var(--dim); padding:4px 6px 3px; font-weight:600; }
|
||
.big { display:block; text-align:center; border-radius:22px; padding:9px; font-size:14px; font-weight:700; margin:4px 0; }
|
||
.r { margin-left:auto; }
|
||
.hero { padding:4px 8px 8px; }
|
||
.hero .h { font-size:22px; font-weight:800; line-height:1.1; }
|
||
.issue { background:var(--card); border-radius:16px; padding:8px 10px; margin-bottom:5px; border-left:4px solid var(--c); }
|
||
</style></head><body><div class="grid">
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span></span><span>9:41</span></div>
|
||
<div class="hero"><div class="h" style="color:var(--work)">All connected</div><div class="meta">5 environments · pushes OK</div></div>
|
||
<div class="issue" style="--c:var(--you)"><div class="name" style="font-size:13px">Laptop is on its VPN route</div><div class="meta">laptop.gib did not answer</div></div>
|
||
<div class="issue" style="--c:var(--done)"><div class="name" style="font-size:13px">4 more, all direct</div></div>
|
||
</div></div><figcaption><b>Overview.</b> One headline, then only what deserves a look. When nothing does, it just says so.</figcaption></figure>
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span style="color:#ff6b5e">Needs attention</span><span>9:41</span></div>
|
||
<div class="issue" style="--c:var(--bad)"><div class="name" style="font-size:13px">Mac mini offline</div><div class="meta">Both routes failed · 4 min</div></div>
|
||
<div class="issue" style="--c:var(--you)"><div class="name" style="font-size:13px">Tokens expire in 5 days</div><div class="meta">Run renew-hosts.sh</div></div>
|
||
<div class="issue" style="--c:var(--done)"><div class="name" style="font-size:13px">3 healthy</div></div>
|
||
</div></div><figcaption><b>Same screen, bad day.</b> Red for offline, amber for warnings. The fix is in the second line where there is one.</figcaption></figure>
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span style="color:#ff6b5e">‹ Mac mini</span><span>9:41</span></div>
|
||
<div class="card mono" style="line-height:1.6">
|
||
<div><span style="color:var(--bad)">✕</span> mac.gib:3773 <span class="meta">refused</span></div>
|
||
<div><span style="color:var(--bad)">✕</span> t3mac.gbrown.org <span class="meta">502</span></div>
|
||
</div>
|
||
<div class="meta" style="padding:2px 6px 6px">Next try in 40 s · last online 9:37</div>
|
||
<span class="big" style="background:var(--card)">Try now</span>
|
||
</div></div><figcaption><b>Environment.</b> Each route with its actual error, and when the gateway tries again.</figcaption></figure>
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span>‹ Notifications</span><span>9:41</span></div>
|
||
<div class="card row"><span class="name" style="font-size:13px">This watch</span><span class="r meta" style="color:var(--work)">registered</span></div>
|
||
<div class="card row"><span class="name" style="font-size:13px">Last push</span><span class="r meta">2 min ago ✓</span></div>
|
||
<span class="big" style="background:var(--you);color:#000">Send test</span>
|
||
<div class="meta" style="text-align:center">Gateway on junior.gib · Unpair</div>
|
||
</div></div><figcaption><b>Notifications.</b> Gateway and watch details fold into this one page, since the push path is what they are for.</figcaption></figure>
|
||
|
||
</div></body></html>
|