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>
132 lines
4.5 KiB
HTML
132 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Concept 🅒 — Multi-select bulk</title>
|
||
<link rel="stylesheet" href="shared.css">
|
||
<style>
|
||
.selection-bar {
|
||
position: sticky; top: 0; z-index: 6;
|
||
background: var(--color-primary); color: var(--color-primary-fg);
|
||
padding: var(--space-3) var(--space-4);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.selection-bar__count { font-weight: 700; }
|
||
.selection-bar__actions { display: flex; gap: var(--space-2); }
|
||
.selection-bar__btn {
|
||
background: rgba(255,255,255,0.15); color: white; border: 0;
|
||
padding: 6px 12px; border-radius: var(--radius-full);
|
||
font-size: var(--text-sm); font-weight: 600;
|
||
}
|
||
.selection-bar__btn--primary { background: white; color: var(--color-primary); }
|
||
|
||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: var(--space-4); }
|
||
.item { position: relative; }
|
||
.item__photo { position: relative; }
|
||
.item__check {
|
||
position: absolute; top: var(--space-2); left: var(--space-2);
|
||
width: 26px; height: 26px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.85);
|
||
border: 2px solid white;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 700; color: var(--color-primary);
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
|
||
}
|
||
.item--selected .item__photo { outline: 3px solid var(--color-primary); outline-offset: -3px; border-radius: var(--radius-sm); }
|
||
.item--selected .item__check { background: var(--color-primary); color: white; border-color: white; }
|
||
.item__status {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-muted);
|
||
padding: var(--space-1) var(--space-1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="frame">
|
||
<div class="selection-bar">
|
||
<span class="selection-bar__count">3 selected</span>
|
||
<div class="selection-bar__actions">
|
||
<button class="selection-bar__btn selection-bar__btn--primary">Send to ▸</button>
|
||
<button class="selection-bar__btn">🔒</button>
|
||
<button class="selection-bar__btn">🗑</button>
|
||
<button class="selection-bar__btn">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<b>🅒</b> Long-press any photo to enter selection mode (this mockup is
|
||
pre-entered). Top bar morphs to action bar. Tick multiple photos, hit
|
||
"Send to ▸" — opens the DevicePicker once for the batch. J1 ("send to
|
||
all my frames") becomes two gestures instead of N × 5.
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="item item--selected">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p1"></div>
|
||
<div class="item__check">✓</div>
|
||
</div>
|
||
<div class="item__status">3/5 frames</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p2"></div>
|
||
<div class="item__check"></div>
|
||
</div>
|
||
<div class="item__status">2/5 frames</div>
|
||
</div>
|
||
<div class="item item--selected">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p3"></div>
|
||
<div class="item__check">✓</div>
|
||
</div>
|
||
<div class="item__status">5/5 frames</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p4"></div>
|
||
<div class="item__check"></div>
|
||
</div>
|
||
<div class="item__status">2/5 frames</div>
|
||
</div>
|
||
<div class="item item--selected">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p5"></div>
|
||
<div class="item__check">✓</div>
|
||
</div>
|
||
<div class="item__status">2/5 frames</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p6"></div>
|
||
<div class="item__check"></div>
|
||
</div>
|
||
<div class="item__status">3/5 frames</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p7"></div>
|
||
<div class="item__check"></div>
|
||
</div>
|
||
<div class="item__status">1/5 frames</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item__photo">
|
||
<div class="photo photo--p8"></div>
|
||
<div class="item__check"></div>
|
||
</div>
|
||
<div class="item__status">4/5 frames</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>
|