Joshua KingandClaude Opus 5
d9ed1898b9
Tokens (light + dark, neumorphism, 54/54 WCAG AA contrast pairs), the self-hosted JetBrains Mono fonts, and interactive mockups of every screen across three iterations. Iteration 3 is final: phone, tablet and desktop tiers, device preview, and "empty spool weight" terminology. The build scripts regenerate the screens byte-identically from source. Implementation is tracked in Maestro feature UI Refresh - V3.0 (224b72a1-8d84-4970-97ea-5dafa4d8ea3b). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
177 lines
13 KiB
HTML
177 lines
13 KiB
HTML
<style>
|
||
.dash { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr); gap: var(--space-6); align-items: start; }
|
||
.fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
|
||
.fleet a { text-decoration: none; color: inherit; padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-md); }
|
||
.fleet a:hover { border-color: var(--text-accent); }
|
||
.fleet .name { font-weight: var(--fw-bold); font-size: 13px; }
|
||
.mat { display: grid; grid-template-columns: 56px minmax(0, 1fr) 84px; gap: var(--space-3); align-items: center; font-size: 13px; }
|
||
.mat .track { height: 12px; }
|
||
.low li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-hairline); }
|
||
.low li:last-child { border-bottom: 0; }
|
||
.low ul { list-style: none; margin: 0; padding: 0; }
|
||
.low .nm { font-weight: var(--fw-bold); font-size: 13px; line-height: var(--lh-snug); }
|
||
.low .sub { font-size: var(--fs-caption); color: var(--text-secondary); line-height: var(--lh-snug); }
|
||
.low .g { text-align: right; font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
|
||
.low .g strong { color: var(--status-warning); font-size: 15px; }
|
||
.job { font-weight: var(--fw-bold); }
|
||
.job-sub { display: block; font-size: var(--fs-caption); color: var(--text-secondary); font-weight: var(--fw-regular); }
|
||
.dur-ub { color: var(--status-warning); font-weight: var(--fw-bold); }
|
||
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3) var(--space-5); font-size: var(--fs-label); color: var(--text-secondary); margin-top: var(--space-4); padding: var(--space-4); }
|
||
.legend div { display: flex; gap: var(--space-2); align-items: baseline; }
|
||
@media (max-width: 1280px) { .dash { grid-template-columns: minmax(0, 1fr); } }
|
||
@media (max-width: 640px) { .fleet { grid-template-columns: 1fr; } }
|
||
</style>
|
||
|
||
<header class="page-head">
|
||
<div>
|
||
<h1>Dashboard</h1>
|
||
<p class="muted">Friday 18 September · refreshes every 10 s · last update 09:41:07</p>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="btn" href="02-filament.html">Open inventory</a>
|
||
<a class="btn btn-primary" href="03-spool-form.html">+ Add spool</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section aria-labelledby="stock-h">
|
||
<h2 class="section" id="stock-h">Stock</h2>
|
||
<div class="stats">
|
||
<div class="stat nm-raised"><span class="stat-label">Spools</span><span class="stat-value">105</span><span class="stat-foot">18 brands · 6 materials</span></div>
|
||
<div class="stat nm-raised"><span class="stat-label">Filament left <abbr title="Net filament, not including the empty spools">net</abbr></span><span class="stat-value">95.72 kg</span><span class="stat-foot">filament only, empty spools excluded</span></div>
|
||
<div class="stat nm-raised"><span class="stat-label">Stock value</span><span class="stat-value">$1,721.18</span><span class="stat-foot">remaining net g × each spool’s $/kg</span></div>
|
||
<div class="stat nm-raised warn"><span class="stat-label">Running low</span><span class="stat-value">⚠ 5</span><span class="stat-foot">under 200 g net each</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="dash">
|
||
<div class="stack" style="gap: var(--space-6)">
|
||
<section class="card nm-raised" aria-labelledby="prints-h">
|
||
<div class="row" style="margin-bottom: var(--space-3)">
|
||
<h2 class="section" id="prints-h" style="margin:0">Recent prints</h2>
|
||
<span class="spacer"></span>
|
||
<a href="#" class="small">All prints →</a>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="tbl">
|
||
<thead><tr>
|
||
<th>Job</th><th>Status</th><th class="r">Duration</th>
|
||
<th class="r">Filament</th><th>Weight source <span class="th-note"><span class="chip chip-warn chip-dashed" title="Stored in print.weight_source; GET /api/prints does not return it yet">API gap</span></span></th><th class="r">Cost</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="job">Gridfinity_bins_3x2</span><span class="job-sub">P1S - Prints Charming · 08:37</span></td>
|
||
<td><span class="chip chip-accent">● Running</span></td>
|
||
<td class="r">1h 04m <span class="job-sub">so far</span></td>
|
||
<td class="r muted">—</td>
|
||
<td><span class="small muted">weighed when it ends</span></td>
|
||
<td class="r muted">pending</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="job">Benchy_x4</span><span class="job-sub">H2C - Constipation Orion · 02:15</span></td>
|
||
<td><span class="chip chip-ok">✓ Finished</span></td>
|
||
<td class="r"><span class="dur-ub" title="The connection dropped once during this print. That time is inside the duration and nothing watched it, so this is an upper bound, not a measurement.">≤ 3h 12m</span>
|
||
<span class="job-sub"><span class="chip chip-warn chip-dashed">upper bound · 1 gap</span></span></td>
|
||
<td class="r">46 g</td>
|
||
<td><span class="chip chip-info">Sliced</span> <span class="job-sub">from this run's 3MF</span></td>
|
||
<td class="r">$0.53</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="job">Sign_CubeCraft</span><span class="job-sub">H2C - Constipation Orion · yesterday 21:48 · 2 colors</span></td>
|
||
<td><span class="chip chip-ok">✓ Finished</span></td>
|
||
<td class="r">2h 05m</td>
|
||
<td class="r">64 g <span class="job-sub">41 g + 23 g</span></td>
|
||
<td><span class="chip chip-info">Sliced</span></td>
|
||
<td class="r">$0.92</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="job">Cable_clips</span><span class="job-sub">A1 - Jordyns Layer Slayer · yesterday 19:30</span></td>
|
||
<td><span class="chip chip-warn chip-dashed">? Unknown</span></td>
|
||
<td class="r"><span class="muted" title="Nobody saw this print end. The only measurable figure is the outage, which is not how long anything printed.">no duration</span><span class="job-sub">end not seen</span></td>
|
||
<td class="r">12 g</td>
|
||
<td><span class="chip chip-neutral">Typed</span> <span class="job-sub">someone weighed it</span></td>
|
||
<td class="r">$0.14</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="job">Lid_v3</span><span class="job-sub">P1S - Prints Charming · yesterday 16:02</span></td>
|
||
<td><span class="chip chip-err">✕ Failed</span></td>
|
||
<td class="r">47m</td>
|
||
<td class="r">118 g <span class="job-sub">full job weight</span></td>
|
||
<td><span class="chip chip-neutral">Typed</span></td>
|
||
<td class="r">$1.38</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="job">Planter_small</span><span class="job-sub">A1 - Jordyns Layer Slayer · 16 Sep 10:20</span></td>
|
||
<td><span class="chip chip-ok">✓ Finished</span></td>
|
||
<td class="r">5h 40m</td>
|
||
<td class="r">212 g</td>
|
||
<td><span class="chip chip-info chip-dashed">Recalled</span> <span class="job-sub">remembered for this job</span></td>
|
||
<td class="r">$2.49</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="job">Test_cube</span><span class="job-sub">P1S - Prints Charming · 7 Aug 14:11</span></td>
|
||
<td><span class="chip chip-ok">✓ Finished</span></td>
|
||
<td class="r">31m <span class="job-sub" title="This print predates gap counting (connection_gaps is null), so nobody asked whether the connection dropped.">gaps not counted</span></td>
|
||
<td class="r">9 g</td>
|
||
<td><span class="chip chip-warn chip-dashed">Unknown</span> <span class="job-sub">predates provenance</span></td>
|
||
<td class="r">$0.10</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="legend nm-inset" aria-label="How to read this table">
|
||
<div><span class="dur-ub">≤</span><span><b>Upper bound.</b> The connection dropped during the print, so the time includes a gap nobody watched.</span></div>
|
||
<div><span class="chip chip-neutral">Typed</span><span>A measurement. It survives an identity correction.</span></div>
|
||
<div><span class="chip chip-info">Sliced</span><span>Read from the job's 3MF over FTPS.</span></div>
|
||
<div><span class="chip chip-info chip-dashed">Recalled</span><span>A copy of a weight remembered for the same gcode path.</span></div>
|
||
<div><span class="chip chip-warn chip-dashed">Unknown</span><span>Written before the source was recorded. Neither path will move it.</span></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<aside class="stack" style="gap: var(--space-6)" aria-label="Stock detail">
|
||
<section class="card nm-raised low" aria-labelledby="low-h">
|
||
<h2 class="section" id="low-h">⚠ Running low <span class="muted">· under 200 g</span></h2>
|
||
<ul>
|
||
<li><span class="swatch"><i style="background:#1f3fbf"></i></span>
|
||
<span><span class="nm">Klein Blue</span><br><span class="sub">Sunlu PLA + 2.0 Basic · 250 g mini</span></span>
|
||
<span class="g"><strong>64 g</strong><br><span class="sub">gross 124 g</span></span></li>
|
||
<li><span class="swatch"><i style="background:#b87333"></i></span>
|
||
<span><span class="nm">Copper</span><br><span class="sub">Sunlu PLA + Silk</span></span>
|
||
<span class="g"><strong>97 g</strong><br><span class="sub">gross 237 g</span></span></li>
|
||
<li><span class="swatch"><i style="background:#141414"></i></span>
|
||
<span><span class="nm">Black</span><br><span class="sub">Elegoo Rapid PETG Basic</span></span>
|
||
<span class="g"><strong>142 g</strong><br><span class="sub">gross 296 g</span></span></li>
|
||
<li><span class="swatch"><i style="background:#ece8df"></i></span>
|
||
<span><span class="nm">Rock White</span><br><span class="sub">Overture PLA Marble</span></span>
|
||
<span class="g"><strong>171 g</strong><br><span class="sub">gross 326 g</span></span></li>
|
||
<li><span class="swatch"><i style="background:#161616"></i><i style="background:#c0232f"></i></span>
|
||
<span><span class="nm">Black Red</span><br><span class="sub">TECSONAR PLA Matte</span></span>
|
||
<span class="g"><strong>188 g</strong><br><span class="sub">gross <span class="chip chip-warn chip-dashed" title="No tare is known for this spool, so gross weight cannot be worked out. It is never shown as 0.">tare unknown</span></span></span></li>
|
||
</ul>
|
||
<p class="tiny muted" style="margin: var(--space-3) 0 0">Net grams are filament only. Gross = empty-spool tare + net, what a scale reads.</p>
|
||
</section>
|
||
|
||
<section class="card nm-raised" aria-labelledby="mat-h">
|
||
<h2 class="section" id="mat-h">Net filament by material</h2>
|
||
<div class="stack">
|
||
<div class="mat"><b>PLA</b><div class="track"><span style="width:100%"></span></div><span class="r num">48.12 kg</span></div>
|
||
<div class="mat"><b>PETG</b><div class="track"><span style="width:68.8%"></span></div><span class="r num">33.10 kg</span></div>
|
||
<div class="mat"><b>ASA</b><div class="track"><span style="width:19.7%"></span></div><span class="r num">9.50 kg</span></div>
|
||
<div class="mat"><b>TPU</b><div class="track"><span style="width:6.2%"></span></div><span class="r num">3.00 kg</span></div>
|
||
<div class="mat"><b>PA6</b><div class="track"><span style="width:2.1%"></span></div><span class="r num">1.00 kg</span></div>
|
||
<div class="mat"><b>ABS</b><div class="track"><span style="width:2.1%"></span></div><span class="r num">1.00 kg</span></div>
|
||
</div>
|
||
<p class="tiny muted" style="margin: var(--space-3) 0 0">55 PLA · 34 PETG · 10 ASA · 3 TPU · 2 PA6 · 1 ABS spools</p>
|
||
</section>
|
||
|
||
<section class="card nm-raised" aria-labelledby="fleet-h">
|
||
<h2 class="section" id="fleet-h">Printers</h2>
|
||
<div class="fleet" style="grid-template-columns: 1fr">
|
||
<a class="nm-raised-sm" href="04-printers.html"><span class="name">P1S - Prints Charming</span><span><span class="chip chip-accent">● Printing</span> <span class="small muted">Gridfinity_bins_3x2</span></span></a>
|
||
<a class="nm-raised-sm" href="04-printers.html"><span class="name">H2C - Constipation Orion</span><span><span class="chip chip-neutral">Idle</span> <span class="small muted">last: Benchy_x4</span></span></a>
|
||
<a class="nm-raised-sm" href="04-printers.html" style="border-color: var(--status-warning)"><span class="name">A1 - Jordyns Layer Slayer</span><span><span class="chip chip-warn">⚡ Connection lost</span> <span class="small muted">last contact 6m ago</span></span></a>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
</div>
|