admin
824 lines
32 KiB
HTML
824 lines
32 KiB
HTML
<!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 <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>
|