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>
110 lines
4.5 KiB
CSS
110 lines
4.5 KiB
CSS
/* Design tokens cloned from frontend/src/styles/global.scss so mockups
|
|
feel native without the full Vue app shell. */
|
|
:root {
|
|
--text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px;
|
|
--text-lg: 20px; --text-xl: 24px; --text-2xl: 28px;
|
|
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
--space-5: 20px; --space-6: 24px; --space-8: 32px;
|
|
--radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
|
|
--color-bg: #fdf6ee; --color-surface: #fff9f2; --color-surface-2: #f5ead8;
|
|
--color-border: #e8d9c4; --color-text: #3a2e22; --color-text-muted: #8a7060;
|
|
--color-primary: #c97c3a; --color-primary-fg: #ffffff;
|
|
--color-secondary: #e8d9c4; --color-destructive: #c0392b;
|
|
--color-lock: #c49a20;
|
|
--shadow-card: 0 2px 4px rgba(58, 46, 34, 0.06);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text);
|
|
font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
font-size: var(--text-base);
|
|
}
|
|
button { font-family: inherit; cursor: pointer; }
|
|
|
|
/* Mac-friendly viewport — show the mobile width centered on a wide screen */
|
|
.frame {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
min-height: 100dvh;
|
|
background: var(--color-bg);
|
|
border-left: 1px solid var(--color-border);
|
|
border-right: 1px solid var(--color-border);
|
|
position: relative;
|
|
}
|
|
|
|
/* Topbar */
|
|
.topbar {
|
|
position: sticky; top: 0; z-index: 5;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: var(--space-4) var(--space-4) var(--space-2);
|
|
}
|
|
.topbar h1 { font-size: var(--text-xl); margin: 0; font-weight: 700; }
|
|
.topbar__tabs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
|
|
.topbar__tab {
|
|
background: transparent; border: 0;
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm); font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.topbar__tab--active { color: var(--color-text); background: var(--color-surface-2); }
|
|
|
|
/* Generic chip / button */
|
|
.chip {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 5px 10px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-surface-2);
|
|
border: 1px solid var(--color-border);
|
|
font-size: var(--text-xs); font-weight: 600;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.chip--on { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
|
|
.chip--lock { background: #fff4d1; border-color: var(--color-lock); color: #6b5210; }
|
|
.chip--lock-on { background: var(--color-lock); color: white; border-color: var(--color-lock); }
|
|
.chip--device { padding: 3px 8px; font-size: var(--text-xs); }
|
|
|
|
/* Photo placeholder — colored gradient so each one is visually distinct */
|
|
.photo {
|
|
display: block; width: 100%; aspect-ratio: 1/1;
|
|
border-radius: var(--radius-sm);
|
|
background: linear-gradient(135deg, #d4a37e, #8c5a3a);
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.photo--p1 { background: linear-gradient(135deg, #c97c3a, #6b3e1e); }
|
|
.photo--p2 { background: linear-gradient(135deg, #3a8a6e, #1f4d3d); }
|
|
.photo--p3 { background: linear-gradient(135deg, #8c6fc1, #4c3a82); }
|
|
.photo--p4 { background: linear-gradient(135deg, #e0a85c, #a5602c); }
|
|
.photo--p5 { background: linear-gradient(135deg, #5e9bb0, #2f5f72); }
|
|
.photo--p6 { background: linear-gradient(135deg, #d4a37e, #8c5a3a); }
|
|
.photo--p7 { background: linear-gradient(135deg, #6f8c5e, #3e5630); }
|
|
.photo--p8 { background: linear-gradient(135deg, #c1715a, #6e3a2d); }
|
|
.photo--p9 { background: linear-gradient(135deg, #a08fb1, #62506f); }
|
|
.photo--p10{ background: linear-gradient(135deg, #d3a87b, #84583a); }
|
|
|
|
/* Portrait-aspect variant for the photo simulating a portrait crop */
|
|
.photo--portrait { aspect-ratio: 3/4; }
|
|
|
|
/* Footer nav (decorative, just to look like the real PWA) */
|
|
.bottomnav {
|
|
position: sticky; bottom: 0;
|
|
background: var(--color-surface);
|
|
border-top: 1px solid var(--color-border);
|
|
padding: var(--space-3); display: flex; gap: var(--space-4);
|
|
justify-content: space-around; font-size: var(--text-xs);
|
|
color: var(--color-text-muted);
|
|
}
|
|
.bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
|
|
.bottomnav__item--active { color: var(--color-primary); }
|
|
|
|
/* Mockup note panel */
|
|
.note {
|
|
background: #fff5dc;
|
|
border: 1px dashed var(--color-lock);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-3); margin: var(--space-3) var(--space-4);
|
|
font-size: var(--text-sm); color: #6b5210;
|
|
}
|
|
.note b { color: #3a2e22; }
|