mix
f47cf39802
test / test (push) Waiting to run
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>
92 lines
3.7 KiB
HTML
92 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Deliveries — 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-deliveries" data-page="deliveries" data-nav="deliveries" data-title="Deliveries">
|
|
<main class="stack">
|
|
<h1>Deliveries</h1>
|
|
<form class="toolbar fill" action="#" onsubmit="return false">
|
|
<div class="field"><label>Domain</label>
|
|
<select><option>All domains</option><option>example.com</option><option>alerts.example.com</option></select>
|
|
</div>
|
|
<div class="field"><label>Application</label>
|
|
<select><option>All applications</option><option>newsletter</option><option>billing</option></select>
|
|
</div>
|
|
<button type="button">Filter</button>
|
|
</form>
|
|
<div class="fill">
|
|
<div class="card">
|
|
<table class="desk-only">
|
|
<thead><tr><th>Time</th><th>From</th><th>To</th><th>Subject</th><th>Status</th><th></th></tr></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="time muted">2026-08-15 20:14:02</td>
|
|
<td>billing@example.com</td>
|
|
<td>ada@example.net</td>
|
|
<td class="subject"><span>Invoice #4412</span></td>
|
|
<td class="status"><span class="st st-warn">deferred</span></td>
|
|
<td class="actions"><a href="delivery.html">Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="time muted">2026-08-15 20:11:40</td>
|
|
<td>news@example.com</td>
|
|
<td>list-bounces@example.net</td>
|
|
<td class="subject"><span>August digest</span></td>
|
|
<td class="status"><span class="st st-ok">delivered</span></td>
|
|
<td class="actions"><a href="delivery.html">Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="time muted">2026-08-15 19:02:11</td>
|
|
<td>alerts@alerts.example.com</td>
|
|
<td>noreply@blocked.example</td>
|
|
<td class="subject"><span>Disk 92% on web-3</span></td>
|
|
<td class="status"><span class="st st-error">bounced</span></td>
|
|
<td class="actions"><a href="delivery.html">Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="time muted">2026-08-15 18:44:09</td>
|
|
<td>news@example.com</td>
|
|
<td>sam@example.org</td>
|
|
<td class="subject"><span>August digest</span></td>
|
|
<td class="status"><span class="st st-ok">delivered</span></td>
|
|
<td class="actions"><a href="delivery.html">Details</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<ul class="phone-list phone-only">
|
|
<li>
|
|
<a href="delivery.html">
|
|
<span class="st st-warn">deferred</span><span class="when">20:14</span>
|
|
<span class="meta">billing@example.com → ada@example.net</span>
|
|
<span class="subj">Invoice #4412</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="delivery.html">
|
|
<span class="st st-ok">delivered</span><span class="when">20:11</span>
|
|
<span class="meta">news@example.com → list-bounces@example.net</span>
|
|
<span class="subj">August digest</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="delivery.html">
|
|
<span class="st st-error">bounced</span><span class="when">19:02</span>
|
|
<span class="meta">alerts@alerts.example.com → noreply@blocked.example</span>
|
|
<span class="subj">Disk 92% on web-3</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="muted">Page 1 of 4 · <a href="deliveries.html">Older →</a></p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script src="shell.js"></script>
|
|
</body>
|
|
</html>
|