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>
130 lines
5.3 KiB
HTML
130 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Library — current state</title>
|
||
<link rel="stylesheet" href="shared.css">
|
||
<style>
|
||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: var(--space-4); }
|
||
.item { display: flex; flex-direction: column; gap: var(--space-2); }
|
||
.approvals, .locks { display: flex; flex-wrap: wrap; gap: 4px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="frame">
|
||
<header class="topbar">
|
||
<h1>Library</h1>
|
||
<div class="topbar__tabs">
|
||
<button class="topbar__tab topbar__tab--active">My Photos</button>
|
||
<button class="topbar__tab">Shared</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="note">
|
||
<b>Pain point:</b> each photo card stacks two rows of 5 chips
|
||
(approve · lock). At 10 photos × 5 frames that's 100 buttons on screen.
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<!-- one item × 10 -->
|
||
<div class="item">
|
||
<div class="photo photo--p1"></div>
|
||
<div class="approvals">
|
||
<button class="chip chip--device chip--on">Living Room</button>
|
||
<button class="chip chip--device chip--on">Kitchen</button>
|
||
<button class="chip chip--device">Bedroom</button>
|
||
<button class="chip chip--device chip--on">Mom's Place</button>
|
||
<button class="chip chip--device">Cabin</button>
|
||
</div>
|
||
<div class="locks">
|
||
<button class="chip chip--lock chip--device">🔒 Living Room</button>
|
||
<button class="chip chip--lock chip--device">🔒 Kitchen</button>
|
||
<button class="chip chip--lock chip--device">🔒 Mom's Place</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="photo photo--p2"></div>
|
||
<div class="approvals">
|
||
<button class="chip chip--device chip--on">Living Room</button>
|
||
<button class="chip chip--device">Kitchen</button>
|
||
<button class="chip chip--device chip--on">Bedroom</button>
|
||
<button class="chip chip--device">Mom's Place</button>
|
||
<button class="chip chip--device">Cabin</button>
|
||
</div>
|
||
<div class="locks">
|
||
<button class="chip chip--lock chip--device chip--lock-on">🔒 Living Room</button>
|
||
<button class="chip chip--lock chip--device">🔒 Bedroom</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="photo photo--p3"></div>
|
||
<div class="approvals">
|
||
<button class="chip chip--device chip--on">Living Room</button>
|
||
<button class="chip chip--device chip--on">Kitchen</button>
|
||
<button class="chip chip--device chip--on">Bedroom</button>
|
||
<button class="chip chip--device chip--on">Mom's Place</button>
|
||
<button class="chip chip--device chip--on">Cabin</button>
|
||
</div>
|
||
<div class="locks">
|
||
<button class="chip chip--lock chip--device">🔒 Living Room</button>
|
||
<button class="chip chip--lock chip--device">🔒 Kitchen</button>
|
||
<button class="chip chip--lock chip--device">🔒 Bedroom</button>
|
||
<button class="chip chip--lock chip--device">🔒 Mom's Place</button>
|
||
<button class="chip chip--lock chip--device">🔒 Cabin</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="photo photo--p4"></div>
|
||
<div class="approvals">
|
||
<button class="chip chip--device">Living Room</button>
|
||
<button class="chip chip--device chip--on">Kitchen</button>
|
||
<button class="chip chip--device">Bedroom</button>
|
||
<button class="chip chip--device chip--on">Mom's Place</button>
|
||
<button class="chip chip--device">Cabin</button>
|
||
</div>
|
||
<div class="locks">
|
||
<button class="chip chip--lock chip--device">🔒 Kitchen</button>
|
||
<button class="chip chip--lock chip--device">🔒 Mom's Place</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="photo photo--p5"></div>
|
||
<div class="approvals">
|
||
<button class="chip chip--device chip--on">Living Room</button>
|
||
<button class="chip chip--device">Kitchen</button>
|
||
<button class="chip chip--device">Bedroom</button>
|
||
<button class="chip chip--device">Mom's Place</button>
|
||
<button class="chip chip--device chip--on">Cabin</button>
|
||
</div>
|
||
<div class="locks">
|
||
<button class="chip chip--lock chip--device">🔒 Living Room</button>
|
||
<button class="chip chip--lock chip--device">🔒 Cabin</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="photo photo--p6"></div>
|
||
<div class="approvals">
|
||
<button class="chip chip--device chip--on">Living Room</button>
|
||
<button class="chip chip--device chip--on">Kitchen</button>
|
||
<button class="chip chip--device chip--on">Bedroom</button>
|
||
<button class="chip chip--device">Mom's Place</button>
|
||
<button class="chip chip--device">Cabin</button>
|
||
</div>
|
||
<div class="locks">
|
||
<button class="chip chip--lock chip--device">🔒 Living Room</button>
|
||
<button class="chip chip--lock chip--device">🔒 Kitchen</button>
|
||
<button class="chip chip--lock chip--device">🔒 Bedroom</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="bottomnav">
|
||
<div class="bottomnav__item">🏠<span>Home</span></div>
|
||
<div class="bottomnav__item bottomnav__item--active">📷<span>Library</span></div>
|
||
<div class="bottomnav__item">⚙️<span>Settings</span></div>
|
||
</nav>
|
||
</div>
|
||
</body>
|
||
</html>
|