football2801
9854688a49
CI / test (push) Has been cancelled
Renders the five design concepts from _bmad-output/planning-artifacts/library-many-frames-design-ideas.md as standalone HTML so Matt can compare them in a browser without spinning up the SPA. Mockups live at /mockups/library/ and reuse the project's design tokens for visual consistency: index.html landing page with concept links current.html the chip-explosion state we're shipping today concept-a.html photo + status badge → DevicePicker sheet (recommended) concept-b.html device-first tab concept-c.html multi-select bulk action bar concept-d.html device chip filter + photo dots Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
61 lines
2.4 KiB
HTML
61 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Library — design concepts</title>
|
||
<link rel="stylesheet" href="shared.css">
|
||
<style>
|
||
body { padding: var(--space-6); }
|
||
.wrap { max-width: 720px; margin: 0 auto; }
|
||
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
|
||
p { color: var(--color-text-muted); line-height: 1.5; }
|
||
ul.concepts { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
|
||
ul.concepts a {
|
||
display: block; padding: var(--space-4); border-radius: var(--radius-md);
|
||
background: var(--color-surface); border: 1px solid var(--color-border);
|
||
text-decoration: none; color: inherit;
|
||
}
|
||
ul.concepts a:hover { border-color: var(--color-primary); }
|
||
ul.concepts h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
|
||
ul.concepts small { color: var(--color-text-muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<h1>Library page — scaling to many frames</h1>
|
||
<p>Static HTML wireframes for the five concepts in the BMAD design memo. Each
|
||
uses the same design tokens as the real Vue app, fake content set at five
|
||
devices and ten photos so chip-count pain is visible.</p>
|
||
|
||
<ul class="concepts">
|
||
<li><a href="current.html">
|
||
<h2>🚫 Current state (for reference)</h2>
|
||
<small>What's shipping today. Five chip-buttons per photo × twice
|
||
(approve + lock) at N=5 frames.</small>
|
||
</a></li>
|
||
<li><a href="concept-a.html">
|
||
<h2>🅐 Photo card + status badge → DevicePicker sheet (recommended)</h2>
|
||
<small>Strip the card to image + one-line summary. Tap photo opens the
|
||
existing DevicePicker bottom sheet.</small>
|
||
</a></li>
|
||
<li><a href="concept-b.html">
|
||
<h2>🅑 Device-first tab</h2>
|
||
<small><code>My Photos</code> / <code>By Frame</code> toggle. By-Frame
|
||
groups photos by device row.</small>
|
||
</a></li>
|
||
<li><a href="concept-c.html">
|
||
<h2>🅒 Multi-select + bulk action bar</h2>
|
||
<small>Long-press a photo to enter selection mode. Top bar morphs to
|
||
Send-to/Lock/Delete.</small>
|
||
</a></li>
|
||
<li><a href="concept-d.html">
|
||
<h2>🅓 Device chip filter + photo dots</h2>
|
||
<small>Top row of device chips filters the grid. Each photo shows tiny
|
||
dots for the other frames it's on.</small>
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|