docs: rebuild panel UI mockups on the design system

Split the hash-sheet prototype into one HTML file per screen, composed from stack, pair, measure, and fill. system.html is the grammar; shell.js is shared chrome. The running panel is unchanged. Co-Authored-By: Cursor <cursoragent@cursor.com>
2026-08-16 15:29:22 +03:00
parent 9edb39a8ee
commit f47cf39802
29 changed files with 2210 additions and 1372 deletions
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Help — SelfPost mockups</title>
+<link rel="icon" href="../selfpost-icon-16.svg" type="image/svg+xml">
+<link rel="stylesheet" href="mock.css">
+<link rel="stylesheet" href="system.css">
+</head>
+<body class="page-help" data-page="help" data-nav="help" data-title="Help">
+<main class="stack">
+  <div class="page-head">
+    <h1>Help <span class="tag future">candidate</span></h1>
+  </div>
+  <p class="muted">Short operator notes inside the panel — not a second copy of the full guide. Seeded from the Status explanations that do not belong on the cards (what a kernel counter is, why PTR is set at the host, what Reload does not touch). The cards themselves keep their readings, Detail columns, and the Configuration control.</p>
+  <div class="measure stack">
+    <div class="card">
+      <h2>On this panel</h2>
+      <ul>
+        <li><a href="help.html">Machine</a> — kernel counters and the rate window</li>
+        <li><a href="help.html">TLS certificate</a> — port 465, reverse-proxy mount</li>
+        <li><a href="help.html">Hostname / reverse DNS</a> — forward-confirmed PTR at the hosting provider</li>
+        <li><a href="help.html">Mail queue retries</a> — time-based, no attempt budget</li>
+        <li><a href="help.html">Inbound</a> — not mailboxes; listed recipients or any address at the domain</li>
+        <li>Domain page — DNS, records, connection, applications, export (drawer from each card’s «?»)</li>
+      </ul>
+      <p class="muted">The same texts open in the drawer from Status’s «?» — so a card can stay a reading, not a paragraph, without throwing the reading away.</p>
+    </div>
+    <div class="card">
+      <h2>Machine</h2>
+      <p>CPU and memory are the container’s own readings, not the host’s spare capacity. Network is a short window, not a daily total. High CPU with an empty queue usually means something else on the box — not SelfPost “being slow to send”.</p>
+    </div>
+    <div class="card">
+      <h2>TLS certificate</h2>
+      <p>Port 465 presents the certificate the reverse proxy (or the image) mounted. The panel does not issue certificates. A warn here is “expires soon”; an error is “missing or unreadable”, and clients will refuse submission.</p>
+    </div>
+    <div class="card">
+      <h2>Hostname / reverse DNS</h2>
+      <p>Forward-confirmed reverse DNS: the A/AAAA for <code>SELFPOST_HOSTNAME</code> must reverse to that same name. PTR is set at the hosting provider, not in this panel. Receiving networks use this pair as a cheap reputation check.</p>
+    </div>
+  </div>
+</main>
+<script src="shell.js"></script>
+</body>
+</html>