Mocks: three directions for the settings and status screens

mocks/settings/b-status-tiles.html

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