64 lines
5.8 KiB
HTML
64 lines
5.8 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><title>WristCode settings A: Sectioned list</title><style>
|
||
/* Direction A: a plain watchOS settings list in mock B's colors. Sections: Environments, Gateway,
|
||
This watch. Each environment row says which kind of route it is on. */
|
||
: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; white-space:nowrap; }
|
||
.ladder-a .mono { font-size:9.5px; }
|
||
.ladder-a .meta { font-size:9.5px; }
|
||
</style></head><body><div class="grid">
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span style="color:var(--work)">‹ Settings</span><span>9:41</span></div>
|
||
<div class="label">Environments</div>
|
||
<div class="card row"><span class="dot" style="background:var(--work)"></span><span class="name">Desktop</span><span class="chip r" style="background:#1f3b38;color:var(--work)">Direct</span></div>
|
||
<div class="card row"><span class="dot" style="background:var(--work)"></span><span class="name">Mac mini</span><span class="chip r" style="background:#1f3b38;color:var(--work)">Direct</span></div>
|
||
<div class="card row"><span class="dot" style="background:var(--you)"></span><span class="name">Laptop</span><span class="chip r" style="background:#3d2f12;color:var(--you)">VPN</span></div>
|
||
<div class="card row"><span class="dot" style="background:var(--work)"></span><span class="name">server-gib</span><span class="chip r" style="background:#1f3b38;color:var(--work)">Direct</span></div>
|
||
</div></div><figcaption><b>Settings.</b> Every environment and the route it is on. Amber means online but on a fallback route. Gateway and This watch sections follow below.</figcaption></figure>
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span style="color:var(--work)">‹ Laptop</span><span>9:41</span></div>
|
||
<div class="card"><div class="row"><span class="dot" style="background:var(--you)"></span><span class="name">Online via VPN</span></div><div class="meta" style="margin-top:2px">Fallback 2 of 4 · since 9:12</div></div>
|
||
<div class="label">Routes, in order</div>
|
||
<div class="card ladder-a" style="padding:6px 9px">
|
||
<div class="row mono"><span style="color:var(--bad)">✕</span>laptop.gib:3773<span class="r meta">5 s</span></div>
|
||
<div class="row mono" style="margin-top:3px"><span style="color:var(--work)">●</span>laptopvpn.gib:3773<span class="r meta">now</span></div>
|
||
<div class="row mono" style="margin-top:3px;color:var(--done)"><span>○</span>t3laptop…<span class="r">–</span></div>
|
||
<div class="row mono" style="margin-top:3px;color:var(--done)"><span>○</span>t3laptopvpn…<span class="r">–</span></div>
|
||
</div>
|
||
</div></div><figcaption><b>Environment.</b> The route ladder: what failed, what is in use, what was not needed. Token expiry, T3 version and Reconnect sit below.</figcaption></figure>
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span style="color:var(--work)">‹ Gateway</span><span>9:41</span></div>
|
||
<div class="card"><div class="name">wristcode.gbrown.org</div><div class="meta">junior.gib · up 3 h</div></div>
|
||
<div class="card row"><span class="name" style="font-size:13px">Push service</span><span class="r meta" style="color:var(--work)">Ready</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>
|
||
<div class="card row"><span class="name" style="font-size:13px">Tokens expire</span><span class="r meta">in 29 days</span></div>
|
||
</div></div><figcaption><b>Gateway.</b> Whether pushes can go out and when the last one did, plus the next token renewal.</figcaption></figure>
|
||
|
||
<figure><div class="bezel"><div class="screen">
|
||
<div class="top"><span style="color:var(--work)">‹ This watch</span><span>9:41</span></div>
|
||
<div class="card"><div class="name">Apple Watch</div><div class="meta">Paired today · notifications on</div></div>
|
||
<span class="big" style="background:var(--you);color:#000">Send test notification</span>
|
||
<span class="big" style="background:var(--card)">Notification settings</span>
|
||
<span class="big" style="background:var(--card);color:var(--bad)">Unpair</span>
|
||
</div></div><figcaption><b>This watch.</b> The test button answers "why didn't it buzz?" in one tap.</figcaption></figure>
|
||
|
||
</div></body></html>
|