gib/wristcode
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mocks: three directions for the settings and status screens

Browse Source
This commit is contained in:
gib committed 2026-11-01 13:36:24 -05:00
1 parent 277683d5ee
commit e6fd2b8f51
3 files changed
+189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

mocks/settings/a-settings-list.html
+63
View File
@@ -0,0 +1,63 @@
<!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>
mocks/settings/b-status-tiles.html
+67
View File
@@ -0,0 +1,67 @@
<!doctype html><html><head><meta charset="utf-8"><title>WristCode settings B: Status tiles</title><style>
/* Direction B: a status board first, settings second. A grid of environment tiles whose icon
is the route kind (house = LAN, shield = VPN, cloud = public), then a one-screen health card. */
: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; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.tile { background:var(--card); border-radius:16px; padding:8px; height:64px; box-sizing:border-box; position:relative; }
.tile .ic { font-size:15px; line-height:1; }
.tile .n { font-weight:700; font-size:12px; margin-top:4px; }
.tile .s { font-size:10px; color:var(--dim); }
.ladder { border-left:2px solid #333; margin-left:6px; padding-left:10px; }
.step { position:relative; margin-bottom:9px; }
.step:before { content:""; position:absolute; left:-15px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--c); }
</style></head><body><div class="grid">
<figure><div class="bezel"><div class="screen">
<div class="top"><span>5 of 5 online</span><span>9:41</span></div>
<div class="tiles">
<div class="tile" style="border-left:3px solid var(--work)"><div class="ic">🏠</div><div class="n">Desktop</div><div class="s">direct</div></div>
<div class="tile" style="border-left:3px solid var(--work)"><div class="ic">🏠</div><div class="n">Mac mini</div><div class="s">direct</div></div>
<div class="tile" style="border-left:3px solid var(--you)"><div class="ic">🛡</div><div class="n">Laptop</div><div class="s">VPN fallback</div></div>
<div class="tile" style="border-left:3px solid var(--work)"><div class="ic">🏠</div><div class="n">server-gib</div><div class="s">direct</div></div>
</div>
</div></div><figcaption><b>Status.</b> A tile per environment. The icon is the route kind, so a laptop on the VPN or a host on its public URL stands out without reading.</figcaption></figure>
<figure><div class="bezel"><div class="screen">
<div class="top"><span style="color:var(--you)">‹ Laptop</span><span>9:41</span></div>
<div class="ladder">
<div class="step" style="--c:var(--bad)"><div class="mono">laptop.gib:3773</div><div class="meta">no answer in 5 s</div></div>
<div class="step" style="--c:var(--work)"><div class="mono" style="color:var(--work)">laptopvpn.gib:3773</div><div class="meta">connected 9:12</div></div>
<div class="step" style="--c:#333"><div class="mono" style="color:var(--done)">t3laptop.gbrown.org</div></div>
<div class="step" style="--c:#333"><div class="mono" style="color:var(--done)">t3laptopvpn.gbrown.org</div></div>
</div>
<span class="big" style="background:var(--card);margin-top:0">Reconnect</span>
</div></div><figcaption><b>Environment.</b> The routes as a vertical ladder the gateway walks down. Reconnect retries from the top, for when you get home.</figcaption></figure>
<figure><div class="bezel"><div class="screen">
<div class="top"><span>Health</span><span>9:41</span></div>
<div class="card"><div class="row"><span style="color:var(--work);font-size:16px">✓</span><span class="name">Gateway</span><span class="r meta">junior</span></div></div>
<div class="card"><div class="row"><span style="color:var(--work);font-size:16px">✓</span><span class="name">Pushes</span><span class="r meta">2 min ago</span></div></div>
<div class="card"><div class="row"><span style="color:var(--work);font-size:16px">✓</span><span class="name">Tokens</span><span class="r meta">29 days</span></div></div>
<div class="card"><div class="row"><span style="color:var(--work);font-size:16px">✓</span><span class="name">This watch</span><span class="r meta">registered</span></div></div>
</div></div><figcaption><b>Health.</b> One screen of checks, swiped to from Status. Each row opens its detail.</figcaption></figure>
<figure><div class="bezel"><div class="screen">
<div class="top"><span>‹ Pushes</span><span>9:41</span></div>
<div style="text-align:center;padding:10px 0 6px"><div style="font-size:30px;color:var(--work)">✓</div><div class="name">Delivered</div><div class="meta">Apple accepted it at 9:41:03</div></div>
<span class="big" style="background:var(--you);color:#000">Send another</span>
</div></div><figcaption><b>Test result.</b> The gateway shows what Apple answered. A failure names its cause, such as an expired device token or the wrong push environment.</figcaption></figure>
</div></body></html>
mocks/settings/c-whats-wrong.html
+59
View File
@@ -0,0 +1,59 @@
<!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>