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>
173 lines
6.0 KiB
HTML
173 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Concept 🅑 — Device-first</title>
|
|
<link rel="stylesheet" href="shared.css">
|
|
<style>
|
|
.scope-tabs {
|
|
display: flex; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.scope-tabs button {
|
|
background: transparent; border: 0;
|
|
padding: var(--space-2) var(--space-3);
|
|
font-weight: 600; font-size: var(--text-sm);
|
|
color: var(--color-text-muted);
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.scope-tabs button.active {
|
|
color: var(--color-text); border-bottom-color: var(--color-primary);
|
|
}
|
|
|
|
.frame-row {
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.frame-row__header {
|
|
display: flex; justify-content: space-between; align-items: baseline;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.frame-row__name { font-weight: 700; font-size: var(--text-md); }
|
|
.frame-row__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
|
|
.frame-row__meta .lock-meta { color: #6b5210; font-weight: 600; }
|
|
|
|
.frame-row__strip {
|
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--space-2);
|
|
}
|
|
.strip-photo { position: relative; }
|
|
.strip-photo .locked-flag {
|
|
position: absolute; top: 4px; right: 4px;
|
|
background: var(--color-lock); color: white; border-radius: var(--radius-full);
|
|
width: 20px; height: 20px; font-size: 11px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.strip-photo--add {
|
|
border: 2px dashed var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
aspect-ratio: 1/1;
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--color-text-muted);
|
|
font-size: 24px;
|
|
}
|
|
.frame-row__count {
|
|
margin-top: var(--space-2);
|
|
font-size: var(--text-xs); color: var(--color-text-muted);
|
|
}
|
|
</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="scope-tabs">
|
|
<button>By Photo</button>
|
|
<button class="active">By Frame</button>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<b>🅑</b> Group photos by frame, not the other way around. Each row is a
|
|
frame — name, status, locked photo, scroll of approved photos, and a
|
|
big <b>+</b> button to add more. Answers "what's on Grandma's frame?"
|
|
in one glance.
|
|
</div>
|
|
|
|
<div class="frame-row">
|
|
<div class="frame-row__header">
|
|
<div>
|
|
<div class="frame-row__name">Living Room</div>
|
|
<div class="frame-row__meta">8 photos · <span class="lock-meta">🔒 Birthday cake</span></div>
|
|
</div>
|
|
<button class="chip chip--device">Settings</button>
|
|
</div>
|
|
<div class="frame-row__strip">
|
|
<div class="strip-photo"><div class="photo photo--p1"></div><div class="locked-flag">🔒</div></div>
|
|
<div class="strip-photo"><div class="photo photo--p2"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p3"></div></div>
|
|
<div class="strip-photo strip-photo--add">+</div>
|
|
</div>
|
|
<div class="frame-row__count">+ 5 more</div>
|
|
</div>
|
|
|
|
<div class="frame-row">
|
|
<div class="frame-row__header">
|
|
<div>
|
|
<div class="frame-row__name">Kitchen</div>
|
|
<div class="frame-row__meta">12 photos · rotating</div>
|
|
</div>
|
|
<button class="chip chip--device">Settings</button>
|
|
</div>
|
|
<div class="frame-row__strip">
|
|
<div class="strip-photo"><div class="photo photo--p4"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p5"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p6"></div></div>
|
|
<div class="strip-photo strip-photo--add">+</div>
|
|
</div>
|
|
<div class="frame-row__count">+ 9 more</div>
|
|
</div>
|
|
|
|
<div class="frame-row">
|
|
<div class="frame-row__header">
|
|
<div>
|
|
<div class="frame-row__name">Bedroom</div>
|
|
<div class="frame-row__meta">3 photos · rotating</div>
|
|
</div>
|
|
<button class="chip chip--device">Settings</button>
|
|
</div>
|
|
<div class="frame-row__strip">
|
|
<div class="strip-photo"><div class="photo photo--p7"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p8"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p2"></div></div>
|
|
<div class="strip-photo strip-photo--add">+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame-row">
|
|
<div class="frame-row__header">
|
|
<div>
|
|
<div class="frame-row__name">Mom's Place</div>
|
|
<div class="frame-row__meta">6 photos · <span class="lock-meta">🔒 Family dinner</span></div>
|
|
</div>
|
|
<button class="chip chip--device">Settings</button>
|
|
</div>
|
|
<div class="frame-row__strip">
|
|
<div class="strip-photo"><div class="photo photo--p4"></div><div class="locked-flag">🔒</div></div>
|
|
<div class="strip-photo"><div class="photo photo--p1"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p9"></div></div>
|
|
<div class="strip-photo strip-photo--add">+</div>
|
|
</div>
|
|
<div class="frame-row__count">+ 3 more</div>
|
|
</div>
|
|
|
|
<div class="frame-row">
|
|
<div class="frame-row__header">
|
|
<div>
|
|
<div class="frame-row__name">Cabin</div>
|
|
<div class="frame-row__meta">2 photos · offline 2h</div>
|
|
</div>
|
|
<button class="chip chip--device">Settings</button>
|
|
</div>
|
|
<div class="frame-row__strip">
|
|
<div class="strip-photo"><div class="photo photo--p5"></div></div>
|
|
<div class="strip-photo"><div class="photo photo--p10"></div></div>
|
|
<div class="strip-photo strip-photo--add">+</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>
|