admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
pinkudex/mockups/library-spacing-mockup.html
T
admin 7e2c2ff89c Initial commit
2026-05-26 22:46:00 +02:00

268 lines
16 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Library Page — Spacing Pass (Layout Untouched)</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--color-bg-0: oklch(0.13 0.025 280);
--color-bg-1: oklch(0.17 0.04 285);
--color-bg-2: oklch(0.22 0.05 290);
--color-fg: oklch(0.97 0.01 280);
--color-fg-dim: oklch(0.72 0.025 280);
--color-fg-muted: oklch(0.55 0.02 280);
--color-glass: color-mix(in oklch, white 6%, transparent);
--color-glass-strong: color-mix(in oklch, white 10%, transparent);
--color-glass-border: color-mix(in oklch, white 14%, transparent);
--color-cyan: oklch(0.82 0.16 200);
--color-violet: oklch(0.72 0.22 305);
--color-mint: oklch(0.80 0.16 155);
--spacing-card: 15px;
--spacing-card-gap: 9px;
--spacing-section: 15px;
--spacing-chip: 7px;
--spacing-label: 7px;
}
body {
background: var(--color-bg-0);
color: var(--color-fg);
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.glass { background: var(--color-glass); border: 1px solid var(--color-glass-border); }
.glass-strong { background: var(--color-glass-strong); border: 1px solid var(--color-glass-border-strong); }
.label { font-family: ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 8px; }
.label.after { color: var(--color-cyan); }
.why { font-size: 12px; color: var(--color-fg-muted); }
.pg {
background: oklch(0.10 0.025 280);
border: 1px solid var(--color-glass-border);
border-radius: 12px;
overflow: hidden;
}
.pg-h {
padding: 12px 16px;
background: oklch(0.20 0.04 285);
border-bottom: 1px solid var(--color-glass-border);
font-family: ui-monospace, monospace;
font-size: 12px;
color: var(--color-fg-dim);
display: flex; justify-content: space-between; align-items: center;
}
.pg-h .tag { color: var(--color-cyan); font-weight: 600; }
.pg-body { padding: 18px; }
/* Faithful page widget styles */
.pill-sm {
display: inline-flex; align-items: center; gap: 6px;
padding: 0 12px; height: 28px;
border-radius: 999px; font-size: 12px;
border: 1px solid var(--color-glass-border); color: var(--color-fg-dim);
background: var(--color-glass);
}
.pill-sm.active { color: var(--color-cyan); border-color: oklch(0.82 0.16 200 / 0.4); background: oklch(0.82 0.16 200 / 0.15); }
.letter-bar { display: flex; gap: 1px; flex-wrap: wrap; }
.letter-bar .l {
width: 26px; height: 26px; display: grid; place-items: center;
font-family: ui-monospace, monospace; font-size: 11px;
color: var(--color-fg-muted); border-radius: 4px;
}
.letter-bar .l.active { color: var(--color-cyan); background: oklch(0.82 0.16 200 / 0.15); }
.thumb {
aspect-ratio: 800/538; border-radius: 6px;
background: linear-gradient(135deg, oklch(0.30 0.05 290), oklch(0.20 0.04 280));
border: 1px solid var(--color-glass-border);
position: relative;
}
.thumb .id { position: absolute; bottom: 4px; left: 6px; font-family: ui-monospace, monospace; font-size: 9px; color: var(--color-cyan); font-weight: 600; }
</style>
</head>
<body class="space-y-6 max-w-[1600px] mx-auto p-6">
<header class="space-y-1">
<h1 class="text-2xl font-semibold tracking-tight">Library Page · Spacing Pass</h1>
<p class="why max-w-[820px]">
Same layout as <code class="text-[var(--color-cyan)]">app/page.tsx</code>: title + stats + UploadCard / FilterBar / LetterBar / Grid.
Only the vertical rhythm and the empty-state padding change. No components moved, no columns added, no styles touched.
</p>
</header>
<!-- ====================================================================
Audit table
==================================================================== -->
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
<div class="label">Spacing changes only — 4 lines total</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2 text-[12px] font-mono text-[var(--color-fg-dim)]">
<div>1 · hero section bottom margin</div>
<div><code class="text-[var(--color-fg-muted)]">mb-8</code> 32 px → <code class="text-[var(--color-cyan)]">mb-6</code> 24 px</div>
<div>2 · empty-state Panel padding</div>
<div><code class="text-[var(--color-fg-muted)]">p-16</code> 64 px → <code class="text-[var(--color-cyan)]">p-card</code> 15 px</div>
<div>3 · empty-state icon → heading margin</div>
<div><code class="text-[var(--color-fg-muted)]">mb-3</code> 12 px → <code class="text-[var(--color-cyan)]">mb-label</code> 7 px</div>
<div>4 · LetterBar wrapper</div>
<div><code class="text-[var(--color-fg-muted)]">my-6</code> 24 px → unchanged (already on rhythm with the hero gap)</div>
</div>
<p class="why mt-3">FilterBar internal spacing, MasonryGrid, hero stats inline gap, UploadCard, page outer <code class="text-[var(--color-cyan)]">px-6 py-8</code> — all stay as they are.</p>
</section>
<!-- ====================================================================
BEFORE
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag">BEFORE</span> · current Library page · <code>mb-8 / p-16 / mb-3</code></span><span>app/page.tsx</span></div>
<div class="pg-body">
<div style="margin-bottom: 32px;">
<div style="display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;">
<div>
<h1 class="text-3xl font-semibold tracking-tight">Your <span style="background: linear-gradient(90deg, var(--color-cyan), var(--color-violet)); -webkit-background-clip: text; color: transparent;">Cover Library</span></h1>
<p class="text-[var(--color-fg-dim)] mt-2 max-w-prose text-sm">Drop cover images to import. Codes are parsed from filenames; metadata can be filled manually or seeded from a sibling .nfo file.</p>
<div class="flex flex-wrap gap-6 mt-6 text-sm">
<div><div class="text-2xl font-mono font-semibold">1,247</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Covers</div></div>
<div><div class="text-2xl font-mono font-semibold">324</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Actresses</div></div>
<div><div class="text-2xl font-mono font-semibold">52</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Studios</div></div>
<div><div class="text-2xl font-mono font-semibold">186</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Tags</div></div>
<div><div class="text-2xl font-mono font-semibold">14</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Collections</div></div>
</div>
</div>
<div class="glass rounded-2xl flex items-center justify-center text-center" style="padding: 32px; height: 160px;">
<div>
<div style="font-size: 32px; opacity: 0.4;">⤓</div>
<div class="text-sm mt-2">Drag covers to import</div>
</div>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;">
<span class="pill-sm active">ALL</span>
<span class="pill-sm">+ Multi-filter</span>
<span class="pill-sm">+ Merged</span>
<span class="pill-sm">⚐ Mark</span>
<span style="margin-left: auto; display: flex; gap: 8px;">
<span class="pill-sm" style="width: 200px; justify-content: flex-start;">⌕ Search…</span>
<span class="pill-sm">Sort: Newest</span>
<span class="pill-sm">Landscape</span>
</span>
</div>
<div style="margin: 24px 0;">
<div class="letter-bar">
<div class="l">#</div>
<div class="l">A</div><div class="l">B</div><div class="l">C</div><div class="l">D</div><div class="l">E</div><div class="l">F</div><div class="l">G</div>
<div class="l">H</div><div class="l active">I</div><div class="l">J</div><div class="l">K</div><div class="l">L</div><div class="l">M</div><div class="l">N</div>
<div class="l">O</div><div class="l">P</div><div class="l">Q</div><div class="l">R</div><div class="l">S</div><div class="l">T</div><div class="l">U</div>
<div class="l">V</div><div class="l">W</div><div class="l">X</div><div class="l">Y</div><div class="l">Z</div>
</div>
</div>
<!-- Empty state (BEFORE: p-16, mb-3) -->
<div class="glass rounded-2xl text-center" style="padding: 64px;">
<div style="width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; background: oklch(0.82 0.16 200 / 0.2); display: grid; place-items: center; color: var(--color-cyan); margin-bottom: 12px;">⊙</div>
<h2 class="text-xl font-medium">Nothing Matches</h2>
<p class="text-[var(--color-fg-dim)] mt-1">All filtered out — switch back to All.</p>
</div>
</div>
</div>
<!-- ====================================================================
AFTER
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">AFTER</span> · spacing-only · <code>mb-6 / p-card / mb-label</code></span><span>app/page.tsx</span></div>
<div class="pg-body">
<div style="margin-bottom: 24px;">
<div style="display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start;">
<div>
<h1 class="text-3xl font-semibold tracking-tight">Your <span style="background: linear-gradient(90deg, var(--color-cyan), var(--color-violet)); -webkit-background-clip: text; color: transparent;">Cover Library</span></h1>
<p class="text-[var(--color-fg-dim)] mt-2 max-w-prose text-sm">Drop cover images to import. Codes are parsed from filenames; metadata can be filled manually or seeded from a sibling .nfo file.</p>
<div class="flex flex-wrap gap-6 mt-6 text-sm">
<div><div class="text-2xl font-mono font-semibold">1,247</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Covers</div></div>
<div><div class="text-2xl font-mono font-semibold">324</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Actresses</div></div>
<div><div class="text-2xl font-mono font-semibold">52</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Studios</div></div>
<div><div class="text-2xl font-mono font-semibold">186</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Tags</div></div>
<div><div class="text-2xl font-mono font-semibold">14</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Collections</div></div>
</div>
</div>
<div class="glass rounded-2xl flex items-center justify-center text-center" style="padding: 32px; height: 160px;">
<div>
<div style="font-size: 32px; opacity: 0.4;">⤓</div>
<div class="text-sm mt-2">Drag covers to import</div>
</div>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;">
<span class="pill-sm active">ALL</span>
<span class="pill-sm">+ Multi-filter</span>
<span class="pill-sm">+ Merged</span>
<span class="pill-sm">⚐ Mark</span>
<span style="margin-left: auto; display: flex; gap: 8px;">
<span class="pill-sm" style="width: 200px; justify-content: flex-start;">⌕ Search…</span>
<span class="pill-sm">Sort: Newest</span>
<span class="pill-sm">Landscape</span>
</span>
</div>
<div style="margin: 24px 0;">
<div class="letter-bar">
<div class="l">#</div>
<div class="l">A</div><div class="l">B</div><div class="l">C</div><div class="l">D</div><div class="l">E</div><div class="l">F</div><div class="l">G</div>
<div class="l">H</div><div class="l active">I</div><div class="l">J</div><div class="l">K</div><div class="l">L</div><div class="l">M</div><div class="l">N</div>
<div class="l">O</div><div class="l">P</div><div class="l">Q</div><div class="l">R</div><div class="l">S</div><div class="l">T</div><div class="l">U</div>
<div class="l">V</div><div class="l">W</div><div class="l">X</div><div class="l">Y</div><div class="l">Z</div>
</div>
</div>
<!-- Empty state (AFTER: p-card, mb-label) -->
<div class="glass rounded-2xl text-center" style="padding: var(--spacing-card);">
<div style="width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; background: oklch(0.82 0.16 200 / 0.2); display: grid; place-items: center; color: var(--color-cyan); margin-bottom: var(--spacing-label);">⊙</div>
<h2 class="text-xl font-medium">Nothing Matches</h2>
<p class="text-[var(--color-fg-dim)] mt-1">All filtered out — switch back to All.</p>
</div>
</div>
</div>
<!-- ====================================================================
Populated AFTER (sanity check that nothing broke when grid is full)
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">AFTER · with grid populated</span> · same vertical rhythm</span><span>sanity check</span></div>
<div class="pg-body">
<div style="margin-bottom: 24px;">
<h1 class="text-3xl font-semibold tracking-tight">Your <span style="background: linear-gradient(90deg, var(--color-cyan), var(--color-violet)); -webkit-background-clip: text; color: transparent;">Cover Library</span></h1>
<div class="flex flex-wrap gap-6 mt-4 text-sm">
<div><div class="text-xl font-mono font-semibold">1,247</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Covers</div></div>
<div><div class="text-xl font-mono font-semibold">324</div><div class="text-xs uppercase tracking-wider text-[var(--color-fg-muted)]">Actresses</div></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
<span class="pill-sm active">ALL</span><span class="pill-sm">+ Multi-filter</span>
</div>
<div style="margin: 24px 0;">
<div class="letter-bar">
<div class="l">A</div><div class="l">B</div><div class="l active">I</div><div class="l">M</div><div class="l">Y</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
<div class="thumb"><span class="id">YUJ-001</span></div>
<div class="thumb"><span class="id">IBW-349</span></div>
<div class="thumb"><span class="id">SDDE-617</span></div>
<div class="thumb"><span class="id">AOZ-200Z</span></div>
<div class="thumb"><span class="id">MIDD-014</span></div>
<div class="thumb"><span class="id">JUL-882</span></div>
<div class="thumb"><span class="id">ABF-119</span></div>
<div class="thumb"><span class="id">JUFE-441</span></div>
</div>
</div>
</div>
<footer class="text-[11px] text-[var(--color-fg-muted)]">
Tell me <strong>go</strong> to apply, or point at anything you want different. Then I'll move on to <strong>Actress</strong>.
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink