admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
admin
2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/settings-panel-mockups.html
+823
View File
@@ -0,0 +1,823 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pinkudex · Settings Panel — Layout Comparison</title>
<style>
:root {
--bg-0: #0a0710;
--bg-1: #14101e;
--bg-2: #1a1428;
--fg: #e8e6f0;
--fg-dim: #a8a4b8;
--fg-muted: #6e6a80;
--cyan: #22d3ee;
--violet: #a78bfa;
--mint: #34d399;
--coral: #fb7185;
--amber: #fbbf24;
--glass: rgba(255,255,255,0.04);
--glass-strong: rgba(255,255,255,0.08);
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.18);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg-0);
color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
line-height: 1.45;
}
/* --- Page chrome --- */
.page {
max-width: 1600px;
margin: 0 auto;
padding: 24px;
}
.page-header {
margin-bottom: 24px;
padding: 16px 20px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.05));
border: 1px solid var(--border);
}
.page-header h1 {
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 600;
letter-spacing: -0.01em;
}
.page-header p {
margin: 0;
color: var(--fg-dim);
font-size: 14px;
}
.nav {
display: flex;
gap: 6px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.nav button {
background: var(--glass);
border: 1px solid var(--border);
color: var(--fg-dim);
padding: 8px 14px;
font-size: 13px;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
}
.nav button:hover {
color: var(--fg);
background: var(--glass-strong);
}
.nav button.active {
background: var(--cyan);
color: #000;
border-color: transparent;
font-weight: 600;
}
/* --- Mockup frame --- */
.mockup {
display: none;
}
.mockup.active {
display: block;
}
.mockup-meta {
margin-bottom: 16px;
padding: 14px 18px;
background: var(--glass);
border: 1px solid var(--border);
border-radius: 12px;
}
.mockup-meta h2 {
margin: 0 0 6px 0;
font-size: 16px;
font-weight: 600;
color: var(--cyan);
}
.mockup-meta .pros, .mockup-meta .cons {
font-size: 12px;
color: var(--fg-dim);
margin-top: 4px;
}
.mockup-meta .pros::before { content: "✓ "; color: var(--mint); font-weight: bold; }
.mockup-meta .cons::before { content: "✗ "; color: var(--coral); font-weight: bold; }
/* --- The actual settings drawer mockup --- */
.drawer {
position: relative;
background: rgba(10,7,16,0.96);
border: 1px solid var(--border-strong);
border-radius: 18px;
overflow: hidden;
backdrop-filter: blur(20px);
}
.drawer-narrow { max-width: 560px; margin-left: auto; } /* old panel */
.drawer-wide { max-width: 1024px; margin-left: auto; } /* current */
.drawer-xwide { max-width: 1280px; margin-left: auto; } /* 3-col */
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: rgba(10,7,16,0.88);
}
.drawer-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 600;
}
.drawer-title .icon {
width: 18px; height: 18px;
color: var(--cyan);
}
.drawer-close {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 8px;
color: var(--fg-dim);
cursor: pointer;
}
.drawer-body {
padding: 24px;
}
/* --- Section card --- */
.section {
background: var(--glass);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px;
}
.section + .section { margin-top: 14px; }
.section h3 {
margin: 0 0 12px 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-muted);
font-family: ui-monospace, SFMono-Regular, monospace;
font-weight: 500;
}
.section.collapsible h3 {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
}
.section.collapsible.open h3 { margin-bottom: 12px; }
.section.collapsible .body { display: none; }
.section.collapsible.open .body { display: block; }
.section.collapsible .chevron::after {
content: "▾";
transition: transform 0.15s;
display: inline-block;
}
.section.collapsible:not(.open) .chevron::after {
transform: rotate(-90deg);
}
/* --- Setting rows (toggles, sliders, buttons) --- */
.row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 8px 0;
}
.row + .row {
border-top: 1px solid var(--border);
}
.row .label { font-size: 13px; font-weight: 500; }
.row .desc { font-size: 11px; color: var(--fg-muted); margin-top: 2px; line-height: 1.4; }
.row .control { flex-shrink: 0; }
.toggle {
width: 36px; height: 20px;
border-radius: 999px;
background: var(--glass-strong);
border: 1px solid var(--border-strong);
position: relative;
}
.toggle::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 999px;
background: var(--fg-dim);
}
.toggle.on {
background: rgba(34,211,238,0.3);
border-color: var(--cyan);
}
.toggle.on::after {
left: 18px;
background: var(--cyan);
}
.slider-row .slider {
width: 100%;
height: 4px;
background: var(--glass-strong);
border-radius: 2px;
margin-top: 8px;
position: relative;
}
.slider-row .slider::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border-radius: 999px;
background: var(--cyan);
top: -5px;
left: 30%;
}
.slider-row .value {
font-size: 11px;
font-family: ui-monospace, monospace;
color: var(--cyan);
}
.btn {
background: var(--glass);
border: 1px solid var(--border);
color: var(--fg-dim);
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
}
.btn-primary {
background: rgba(34,211,238,0.15);
color: var(--cyan);
border-color: rgba(34,211,238,0.4);
}
.btn-warn {
background: rgba(251,113,133,0.1);
color: var(--coral);
border-color: rgba(251,113,133,0.3);
}
.btn-amber {
color: var(--amber);
border-color: rgba(251,191,36,0.4);
}
.row.btn-row { padding: 10px 0; }
.row.btn-row .label { font-size: 13px; }
/* --- Stat rows (Library, Storage) --- */
dl.stat-list {
margin: 0;
display: grid;
gap: 8px;
}
dl.stat-list .item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 13px;
}
dl.stat-list dt { color: var(--fg-dim); }
dl.stat-list dd { margin: 0; font-family: ui-monospace, monospace; font-size: 12px; text-align: right; word-break: break-all; }
/* --- Tabs (mockup 2) --- */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
padding: 0 24px;
background: rgba(10,7,16,0.6);
}
.tabs button {
background: none;
border: none;
color: var(--fg-dim);
padding: 12px 16px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tabs button.active {
color: var(--cyan);
border-bottom-color: var(--cyan);
font-weight: 600;
}
/* --- Sidebar nav (mockup 5) --- */
.sidenav-layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0;
}
.sidenav {
border-right: 1px solid var(--border);
padding: 18px 12px;
background: rgba(10,7,16,0.5);
}
.sidenav .item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
color: var(--fg-dim);
font-size: 13px;
cursor: pointer;
margin-bottom: 2px;
}
.sidenav .item.active {
background: rgba(34,211,238,0.12);
color: var(--cyan);
}
.sidenav .item:hover:not(.active) {
background: var(--glass);
}
.sidenav .badge {
margin-left: auto;
font-size: 10px;
padding: 1px 6px;
border-radius: 6px;
background: var(--glass-strong);
color: var(--fg-muted);
font-family: ui-monospace, monospace;
}
.sidenav-content {
padding: 24px;
}
/* --- 2-col grid (mockup 1, 4) --- */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
/* --- Section sub-icons --- */
.icon-pill {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--fg-muted);
}
/* Mini chip used to suggest a count or status */
.pill {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
font-size: 10px;
font-family: ui-monospace, monospace;
background: var(--glass-strong);
color: var(--fg-muted);
}
.pill.cyan {
background: rgba(34,211,238,0.15);
color: var(--cyan);
}
</style>
</head>
<body>
<div class="page">
<header class="page-header">
<h1>Settings panel — six layout options</h1>
<p>Click each option above to see how the same content reorganises. Each mockup uses identical copy and controls so you can compare information density and scan-ability.</p>
</header>
<nav class="nav">
<button data-show="m1" class="active">1. Two-column groups (refined)</button>
<button data-show="m2">2. Top tabs</button>
<button data-show="m3">3. Accordion</button>
<button data-show="m4">4. Three-column wide</button>
<button data-show="m5">5. Sidebar nav</button>
<button data-show="m6">6. Pinned + advanced</button>
</nav>
<!-- ============================================================ -->
<!-- MOCKUP 1: Two-column groups (refined version of current) -->
<!-- ============================================================ -->
<section class="mockup active" id="m1">
<div class="mockup-meta">
<h2>Option 1 — Two-column groups, retighter labels</h2>
<div class="pros">Closest to today; minimal change. Better at-a-glance scan once labels are sharper.</div>
<div class="cons">Right column still longer than left. Maintenance still scrolls within its section.</div>
</div>
<div class="drawer drawer-wide">
<header class="drawer-header">
<div class="drawer-title"><span class="icon">⚙</span> Settings</div>
<div class="drawer-close">×</div>
</header>
<div class="drawer-body">
<div class="grid-2">
<!-- LEFT col -->
<div>
<section class="section">
<h3>Appearance</h3>
<div class="row">
<div><div class="label">Default sort</div><div class="desc">New library views start in this order.</div></div>
<div class="control"><button class="btn">Newest First ▾</button></div>
</div>
<div class="row">
<div><div class="label">Accent — Primary</div><div class="desc">Cyan highlights & active state.</div></div>
<div class="control"><button class="btn">#22D3EE</button></div>
</div>
<div class="row">
<div><div class="label">Accent — Secondary</div><div class="desc">Tag pills & secondary chrome.</div></div>
<div class="control"><button class="btn">#A78BFA</button></div>
</div>
</section>
<section class="section">
<h3>Display</h3>
<div class="row slider-row">
<div><div class="label">Grid columns (Landscape)</div><div class="desc">Cover columns in L-mode.</div></div>
<div class="control"><span class="value">3 per row</span></div>
</div>
<div class="row slider-row">
<div><div class="label">Grid columns (Portrait)</div><div class="desc">Cover columns in P-mode.</div></div>
<div class="control"><span class="value">6 per row</span></div>
</div>
<div class="row">
<div><div class="label">Fade transitions</div><div class="desc">Soft cross-fade on navigation.</div></div>
<div class="control"><div class="toggle on"></div></div>
</div>
<div class="row slider-row">
<div><div class="label">Fade duration</div><div class="desc"></div></div>
<div class="control"><span class="value">400ms</span></div>
</div>
</section>
<section class="section">
<h3>Library</h3>
<dl class="stat-list">
<div class="item"><dt>Images</dt><dd>422</dd></div>
<div class="item"><dt>Tags</dt><dd>38</dd></div>
<div class="item"><dt>Collections</dt><dd>12</dd></div>
</dl>
</section>
<section class="section">
<h3>Storage</h3>
<dl class="stat-list">
<div class="item"><dt>Library folder</dt><dd>D:/.../library</dd></div>
<div class="item"><dt>Database</dt><dd>D:/.../data/library.db</dd></div>
</dl>
</section>
</div>
<!-- RIGHT col -->
<div>
<section class="section">
<h3>Trash & deletion</h3>
<div class="row">
<div><div class="label">Use recycle bin</div><div class="desc">Soft-delete to bin instead of permanent.</div></div>
<div class="control"><div class="toggle on"></div></div>
</div>
<div class="row slider-row">
<div><div class="label">Trash retention</div><div class="desc">Auto-purge after N days. 0 = never.</div></div>
<div class="control"><span class="value">30 days</span></div>
</div>
<div class="row">
<div><div class="label">Delete files from disk</div><div class="desc">When emptying trash, unlink originals + thumbs.</div></div>
<div class="control"><div class="toggle on"></div></div>
</div>
</section>
<section class="section">
<h3>Maintenance</h3>
<div class="row btn-row"><div><div class="label">Re-organize library</div><div class="desc">Move covers into letter buckets.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Regenerate thumbnails</div><div class="desc">Rebuild WebP previews. Migrates legacy filenames.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Find undersized covers</div><div class="desc">Flag covers under 750×500.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Purge orphan files</div><div class="desc">Remove on-disk files not referenced by DB.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Clear cache</div><div class="desc">Drop all server-side cached pages.</div></div><div class="control"><button class="btn">Clear</button></div></div>
</section>
<section class="section">
<h3>Backup</h3>
<div class="row btn-row">
<div><div class="label">Export & import</div><div class="desc">JSON dump of all metadata. Image files copy separately.</div></div>
<div class="control" style="display:flex; gap:6px;">
<button class="btn btn-primary">Export</button>
<button class="btn btn-amber">Import…</button>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- MOCKUP 2: Top tabs -->
<!-- ============================================================ -->
<section class="mockup" id="m2">
<div class="mockup-meta">
<h2>Option 2 — Top tabs (General · Display · Trash · Maintenance · Backup · About)</h2>
<div class="pros">Tightest visual: only one section visible at a time. No scroll for any single tab.</div>
<div class="cons">More clicks; can hide settings you forgot exist. Best when settings rarely-used overall.</div>
</div>
<div class="drawer drawer-narrow">
<header class="drawer-header">
<div class="drawer-title"><span class="icon">⚙</span> Settings</div>
<div class="drawer-close">×</div>
</header>
<div class="tabs">
<button>General</button>
<button class="active">Display</button>
<button>Trash</button>
<button>Maintenance</button>
<button>Backup</button>
<button>About</button>
</div>
<div class="drawer-body">
<section class="section">
<h3>Display</h3>
<div class="row slider-row"><div><div class="label">Grid columns (Landscape)</div><div class="desc">Cover columns in L-mode.</div></div><div class="control"><span class="value">3 per row</span></div></div>
<div class="row slider-row"><div><div class="label">Grid columns (Portrait)</div><div class="desc">Cover columns in P-mode.</div></div><div class="control"><span class="value">6 per row</span></div></div>
<div class="row"><div><div class="label">Fade transitions</div><div class="desc">Soft cross-fade on navigation.</div></div><div class="control"><div class="toggle on"></div></div></div>
<div class="row slider-row"><div><div class="label">Fade duration</div><div class="desc">How long the fade lasts.</div></div><div class="control"><span class="value">400ms</span></div></div>
</section>
<p style="font-size:12px; color: var(--fg-muted); margin-top: 16px; padding: 0 4px;">
(Showing one tab at a time — switch tabs above for the others.)
</p>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- MOCKUP 3: Accordion -->
<!-- ============================================================ -->
<section class="mockup" id="m3">
<div class="mockup-meta">
<h2>Option 3 — Accordion / collapsible sections</h2>
<div class="pros">Skim all section names at once; expand only what you need. Section count stays visible.</div>
<div class="cons">Extra click per section. Scroll re-flows when sections open/close.</div>
</div>
<div class="drawer drawer-narrow">
<header class="drawer-header">
<div class="drawer-title"><span class="icon">⚙</span> Settings</div>
<div class="drawer-close">×</div>
</header>
<div class="drawer-body">
<section class="section collapsible open">
<h3>Defaults <span class="chevron"></span></h3>
<div class="body">
<div class="row"><div><div class="label">Default sort</div></div><div class="control"><button class="btn">Newest First ▾</button></div></div>
</div>
</section>
<section class="section collapsible">
<h3>Theme <span class="chevron"></span></h3>
</section>
<section class="section collapsible open">
<h3>Display <span class="chevron"></span></h3>
<div class="body">
<div class="row slider-row"><div><div class="label">Grid columns (Landscape)</div></div><div class="control"><span class="value">3 per row</span></div></div>
<div class="row slider-row"><div><div class="label">Grid columns (Portrait)</div></div><div class="control"><span class="value">6 per row</span></div></div>
<div class="row"><div><div class="label">Fade transitions</div></div><div class="control"><div class="toggle on"></div></div></div>
</div>
</section>
<section class="section collapsible">
<h3>Trash & deletion <span class="chevron"></span></h3>
</section>
<section class="section collapsible">
<h3>Maintenance <span class="pill cyan">5</span> <span class="chevron"></span></h3>
</section>
<section class="section collapsible">
<h3>Backup <span class="chevron"></span></h3>
</section>
<section class="section collapsible">
<h3>Library & storage <span class="chevron"></span></h3>
</section>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- MOCKUP 4: Three-column wide -->
<!-- ============================================================ -->
<section class="mockup" id="m4">
<div class="mockup-meta">
<h2>Option 4 — Three columns at full width</h2>
<div class="pros">Almost everything visible without scrolling. Great on a wide monitor.</div>
<div class="cons">Drawer takes up more screen real estate. Awkward on smaller laptops.</div>
</div>
<div class="drawer drawer-xwide">
<header class="drawer-header">
<div class="drawer-title"><span class="icon">⚙</span> Settings</div>
<div class="drawer-close">×</div>
</header>
<div class="drawer-body">
<div class="grid-3">
<!-- COL 1 -->
<div>
<section class="section">
<h3>Defaults & Theme</h3>
<div class="row"><div><div class="label">Default sort</div></div><div class="control"><button class="btn">Newest First ▾</button></div></div>
<div class="row"><div><div class="label">Accent primary</div></div><div class="control"><button class="btn">#22D3EE</button></div></div>
<div class="row"><div><div class="label">Accent secondary</div></div><div class="control"><button class="btn">#A78BFA</button></div></div>
</section>
<section class="section">
<h3>Display</h3>
<div class="row slider-row"><div><div class="label">Grid cols — Landscape</div></div><div class="control"><span class="value">3</span></div></div>
<div class="row slider-row"><div><div class="label">Grid cols — Portrait</div></div><div class="control"><span class="value">6</span></div></div>
<div class="row"><div><div class="label">Fade transitions</div></div><div class="control"><div class="toggle on"></div></div></div>
<div class="row slider-row"><div><div class="label">Fade duration</div></div><div class="control"><span class="value">400ms</span></div></div>
</section>
</div>
<!-- COL 2 -->
<div>
<section class="section">
<h3>Trash & deletion</h3>
<div class="row"><div><div class="label">Use recycle bin</div></div><div class="control"><div class="toggle on"></div></div></div>
<div class="row slider-row"><div><div class="label">Retention</div></div><div class="control"><span class="value">30d</span></div></div>
<div class="row"><div><div class="label">Delete from disk</div></div><div class="control"><div class="toggle on"></div></div></div>
</section>
<section class="section">
<h3>Library</h3>
<dl class="stat-list">
<div class="item"><dt>Images</dt><dd>422</dd></div>
<div class="item"><dt>Tags</dt><dd>38</dd></div>
<div class="item"><dt>Collections</dt><dd>12</dd></div>
</dl>
</section>
<section class="section">
<h3>Storage</h3>
<dl class="stat-list">
<div class="item"><dt>Library</dt><dd>D:/.../library</dd></div>
<div class="item"><dt>Database</dt><dd>D:/.../library.db</dd></div>
</dl>
</section>
</div>
<!-- COL 3 -->
<div>
<section class="section">
<h3>Maintenance</h3>
<div class="row btn-row"><div><div class="label">Re-organize</div><div class="desc">Letter buckets.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Regen thumbnails</div><div class="desc">Rebuild WebP.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Find undersized</div><div class="desc">Flag &lt;750×500.</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Purge orphans</div></div><div class="control"><button class="btn">Scan</button></div></div>
<div class="row btn-row"><div><div class="label">Clear cache</div></div><div class="control"><button class="btn">Clear</button></div></div>
</section>
<section class="section">
<h3>Backup</h3>
<div class="row btn-row">
<div><div class="label">JSON metadata dump</div><div class="desc">Image files copy separately.</div></div>
</div>
<div style="display:flex; gap:6px; margin-top: 6px;">
<button class="btn btn-primary">Export</button>
<button class="btn btn-amber">Import…</button>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- MOCKUP 5: Sidebar nav -->
<!-- ============================================================ -->
<section class="mockup" id="m5">
<div class="mockup-meta">
<h2>Option 5 — Vertical sidebar nav inside the panel (macOS / VSCode style)</h2>
<div class="pros">Beautiful focused single-section view. Sidebar count badges hint at activity.</div>
<div class="cons">More clicks. Padding-heavy at narrow drawer width — needs the wide drawer.</div>
</div>
<div class="drawer drawer-wide">
<header class="drawer-header">
<div class="drawer-title"><span class="icon">⚙</span> Settings</div>
<div class="drawer-close">×</div>
</header>
<div class="sidenav-layout">
<nav class="sidenav">
<div class="item">⊕ General</div>
<div class="item active">▭ Display</div>
<div class="item">⌫ Trash <span class="badge">3</span></div>
<div class="item">🔧 Maintenance <span class="badge">5</span></div>
<div class="item">⤓ Backup</div>
<div class="item">📚 Library stats</div>
<div class="item">📁 Storage</div>
</nav>
<div class="sidenav-content">
<h2 style="margin: 0 0 4px 0; font-size: 18px;">Display</h2>
<p style="margin: 0 0 18px 0; font-size: 13px; color: var(--fg-muted);">Grid density, transitions, and the front-only portrait toggle.</p>
<section class="section">
<h3>Grid columns</h3>
<div class="row slider-row"><div><div class="label">Landscape (full cover)</div><div class="desc">L-mode card count.</div></div><div class="control"><span class="value">3 per row</span></div></div>
<div class="row slider-row"><div><div class="label">Portrait (front-only)</div><div class="desc">P-mode card count.</div></div><div class="control"><span class="value">6 per row</span></div></div>
</section>
<section class="section">
<h3>Animations</h3>
<div class="row"><div><div class="label">Fade transitions</div><div class="desc">Soft cross-fade on navigation.</div></div><div class="control"><div class="toggle on"></div></div></div>
<div class="row slider-row"><div><div class="label">Fade duration</div></div><div class="control"><span class="value">400ms</span></div></div>
</section>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- MOCKUP 6: Pinned + Advanced -->
<!-- ============================================================ -->
<section class="mockup" id="m6">
<div class="mockup-meta">
<h2>Option 6 — Pinned common settings, advanced collapsed by default</h2>
<div class="pros">Surfaces 90% of what you use; hides the destructive/rarely-used 10%. Lowest cognitive load.</div>
<div class="cons">"Advanced" implies expert-only — folks who'd benefit from re-organize won't go looking.</div>
</div>
<div class="drawer drawer-narrow">
<header class="drawer-header">
<div class="drawer-title"><span class="icon">⚙</span> Settings</div>
<div class="drawer-close">×</div>
</header>
<div class="drawer-body">
<section class="section">
<h3>Common</h3>
<div class="row"><div><div class="label">Default sort</div></div><div class="control"><button class="btn">Newest First ▾</button></div></div>
<div class="row slider-row"><div><div class="label">Grid cols — Landscape</div></div><div class="control"><span class="value">3</span></div></div>
<div class="row slider-row"><div><div class="label">Grid cols — Portrait</div></div><div class="control"><span class="value">6</span></div></div>
<div class="row"><div><div class="label">Use recycle bin</div></div><div class="control"><div class="toggle on"></div></div></div>
<div class="row"><div><div class="label">Fade transitions</div></div><div class="control"><div class="toggle on"></div></div></div>
<div class="row"><div><div class="label">Accent — Primary</div></div><div class="control"><button class="btn">#22D3EE</button></div></div>
</section>
<section class="section collapsible">
<h3>Advanced — Theme, accents, fade duration <span class="chevron"></span></h3>
</section>
<section class="section collapsible">
<h3>Maintenance — Reorganize, regen, scans <span class="pill cyan">5</span> <span class="chevron"></span></h3>
</section>
<section class="section collapsible">
<h3>Backup — Export & import <span class="chevron"></span></h3>
</section>
<section class="section collapsible">
<h3>Library & storage info <span class="chevron"></span></h3>
</section>
</div>
</div>
</section>
</div>
<script>
document.querySelectorAll(".nav button").forEach((btn) => {
btn.addEventListener("click", () => {
const target = btn.dataset.show;
document.querySelectorAll(".nav button").forEach((b) => b.classList.toggle("active", b === btn));
document.querySelectorAll(".mockup").forEach((m) => m.classList.toggle("active", m.id === target));
});
});
// Tabs in mockup 2
document.querySelectorAll(".tabs button").forEach((b) => {
b.addEventListener("click", () => {
b.parentElement.querySelectorAll("button").forEach((x) => x.classList.toggle("active", x === b));
});
});
// Accordion toggle
document.querySelectorAll(".section.collapsible h3").forEach((h) => {
h.addEventListener("click", () => {
h.parentElement.classList.toggle("open");
});
});
</script>
</body>
</html>