Mocks: three directions for the settings and status screens

mocks/settings/a-settings-list.html

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