mixandClaude Opus 5.5
6099716bf4
docs/assets/panel-ui (the 1.x experiment, superseded by the redesign) and
docs/assets/panel-redesign/{a,b,c} (the three stage-1 directions; C was
taken) are history - the plan says so - and nothing builds, checks or
links them but the page that compared the directions. That page,
docs/assets/panel-redesign/index.html, which the documents link as the
way into the mockups, is now that: the screen map and what the design
holds, with a line saying where the removed folders are (git history).
build.py and check.py: 32 screens, 0 violations.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
5.0 KiB
HTML
68 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Panel mockups</title>
|
||
<link rel="stylesheet" href="shared/brand.css">
|
||
<link rel="stylesheet" href="index.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<p class="kicker">SelfPost · panel mockups</p>
|
||
<h1>Every screen of the panel</h1>
|
||
<p class="lead">The accepted design (<a href="../../plans/panel-redesign.md">the plan</a>): Bulma as the base, the
|
||
important things in view, details one or two clicks away, with a postal signature — the postmark verdict, numbered
|
||
mono section heads, the stamp's perforated paper edge under a brick bar that carries the wordmark — and Tabler icons.
|
||
The screens and a components page live in <a href="panel/overview.html">panel/</a>; a page of the running panel that
|
||
disagrees with its mockup is wrong. Serve this folder from the repository root: the pages load the panel's own fonts
|
||
and mark by relative path. The three directions of the redesign's first stage and the earlier 1.x mockups were
|
||
removed on 2026-10-16; they are in the git history.</p>
|
||
|
||
<h2>Screen map</h2>
|
||
<div class="scroll">
|
||
<table>
|
||
<tbody>
|
||
<tr><th>Signed out</th><td><a href="panel/login.html">Sign in</a> · <a href="panel/login-no-admin.html">sign in before an administrator exists</a> · <a href="panel/setup.html">Create administrator</a></td></tr>
|
||
<tr><th>Overview</th><td><a href="panel/overview.html">Overview</a> — postmark verdict, six health cards, both domain lists</td></tr>
|
||
<tr><th>Outbound</th><td><a href="panel/out-domains.html">Domains</a> · <a href="panel/out-domain.html">domain</a> ·
|
||
<a href="panel/out-domain-settings.html">domain settings</a> · <a href="panel/out-app.html">application form</a> ·
|
||
<a href="panel/out-app-created.html">password shown once</a> · <a href="panel/out-domain-delete.html">delete domain</a><br>
|
||
<a href="panel/out-log.html">Log</a> · <a href="panel/out-message.html">message</a> ·
|
||
<a href="panel/out-queue.html">Queue</a> · <a href="panel/dmarc.html">DMARC reports</a> ·
|
||
<a href="panel/dmarc-domain.html">by domain</a> · <a href="panel/dmarc-report.html">one report</a></td></tr>
|
||
<tr><th>Inbound</th><td><a href="panel/in-domains.html">Domains</a> · <a href="panel/in-domain.html">domain</a> ·
|
||
<a href="panel/in-domain-delete.html">delete domain</a> · <a href="panel/in-log.html">Log</a> ·
|
||
<a href="panel/in-queue.html">Queue</a> (empty state)<br>
|
||
<a href="panel/in-quarantine.html">Quarantine</a> · <a href="panel/in-quarantine-message.html">held message</a> ·
|
||
<a href="panel/in-filter-lists.html">Filter lists</a> — roadmap items, drawn as their target look</td></tr>
|
||
<tr><th>Server</th><td><a href="panel/health.html">Health</a> · <a href="panel/preflight.html">Preflight</a> (roadmap) · <a href="panel/system-log.html">System log</a> ·
|
||
<a href="panel/backup.html">Backup</a> · <a href="panel/users.html">Users</a> · <a href="panel/user.html">user form</a> ·
|
||
<a href="panel/user-delete.html">delete user</a> · <a href="panel/settings.html">Settings</a></td></tr>
|
||
<tr><th>User menu</th><td><a href="panel/account.html">Account</a> · <a href="panel/help.html">Help</a></td></tr>
|
||
<tr><th>Contract</th><td><a href="panel/components.html">Components</a> — every building block in every state ·
|
||
<a href="../../plans/panel-redesign.md">the plan</a> · <code>panel/check.py</code> lints the mockups and writes <code>panel/outlines.json</code></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h2>What changed against the 1.x panel</h2>
|
||
<ul>
|
||
<li><strong>Overview shows verdicts, Health shows tables.</strong> Process lists, socket paths and interface counters moved to
|
||
<em>Server › Health</em>, one click from each card.</li>
|
||
<li><strong>Every page is one of three layouts</strong>: a list (form on top, table below), a detail page (sticky side menu +
|
||
numbered boxes), or a form page (boxes in equal columns). No page picks its own width.</li>
|
||
<li><strong>Own password is Account</strong>, instance defaults are Settings. Export sits with the domain, import with Backup,
|
||
and each links to the other.</li>
|
||
<li><strong>Queues are tables</strong>, not a <code>postqueue -p</code> dump — this needs <code>postqueue -j</code> parsing.
|
||
The inbound queue is the same queue filtered by recipient domain.</li>
|
||
<li><strong>Confirm pages say what will be lost</strong> as a list, beside a hint for the usual alternative (export before delete).</li>
|
||
<li>Own components on top of Bulma: postmark, perforated edge, numbered box head, health card, DNS record block, facts grid,
|
||
timeline, log pane. The mockup's <code>theme.css</code> is about 200 lines.</li>
|
||
<li><code>panel/build.py</code> wraps the fragments in <code>panel/src/</code> with the shared navbar; the built pages are committed,
|
||
so nothing has to be run to view them.</li>
|
||
</ul>
|
||
</main>
|
||
</body>
|
||
</html>
|