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

299 lines
16 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Categories 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-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);
--color-coral: oklch(0.72 0.20 25);
--color-amber: oklch(0.84 0.14 80);
--spacing-card: 15px;
--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); }
.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; }
.pill-sm {
display: inline-flex; align-items: center; gap: 6px;
padding: 0 10px; height: 28px;
border-radius: 6px; font-size: 12px; font-family: ui-monospace, monospace;
border: 1px solid var(--color-glass-border); color: var(--color-fg-dim);
background: var(--color-glass);
}
.pill-sm.active { background: var(--color-cyan); color: black; font-weight: 600; border-color: transparent; }
.seg { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-glass-border); }
.seg > .pill-sm { border-radius: 0; border: 0; height: 30px; }
/* Category cards — golden-ratio aspect untouched */
.cat-portrait {
aspect-ratio: 1 / 1.618;
border-radius: 16px;
background: linear-gradient(135deg, oklch(0.30 0.05 290), oklch(0.18 0.04 285) 80%);
border: 1px solid var(--color-glass-border);
position: relative;
overflow: hidden;
}
.cat-landscape {
aspect-ratio: 1.618 / 1;
border-radius: 16px;
background: linear-gradient(135deg, oklch(0.30 0.05 290), oklch(0.18 0.04 285) 80%);
border: 1px solid var(--color-glass-border);
position: relative;
overflow: hidden;
}
.cat-card .name-overlay {
position: absolute; inset-inline: 0; bottom: 0;
padding: 12px;
padding-top: 40px;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, transparent);
}
.cat-card .name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-card .dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.cat-card .name { font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card .desc { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 4px; line-height: 1.3; }
.cat-card .meta { font-size: 10px; font-family: ui-monospace, monospace; color: rgba(255,255,255,0.6); margin-top: 4px; }
</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">Categories Page · Spacing Pass</h1>
<p class="why max-w-[820px]">
Same layout as <code class="text-[var(--color-cyan)]">app/category/page.tsx</code>: title row + sort/create/view-toggle, then a grid of <code class="text-[var(--color-cyan)]">CategoryGridCard</code>s. Two views: portrait (golden-ratio 1:1.618 cards, 7-up at desktop) and landscape (1.618:1 cards, 3-up at desktop). The card aspect ratios are golden — <strong>not touched</strong>.
</p>
</header>
<!-- ====================================================================
Audit
==================================================================== -->
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
<div class="label">Spacing changes only — 2 lines</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 · empty-state Panel padding</div>
<div><code class="text-[var(--color-fg-muted)]">p-12</code> 48 px → <code class="text-[var(--color-cyan)]">p-card</code> 15 px</div>
<div>2 · empty-state icon → text margin</div>
<div><code class="text-[var(--color-fg-muted)]">mb-2</code> 8 px → <code class="text-[var(--color-cyan)]">mb-label</code> 7 px</div>
</div>
<p class="why mt-3">
<strong>Untouched:</strong> page outer <code class="text-[var(--color-cyan)]">px-6 py-6</code>, title row <code class="text-[var(--color-cyan)]">mb-6</code>, sort/view toggle pills, create form, grid <code class="text-[var(--color-cyan)]">gap-4</code>, card responsive column counts, card golden-ratio aspect (1/1.618 and 1.618/1), card internal <code class="text-[var(--color-cyan)]">p-3 pt-10</code> name-overlay.
</p>
</section>
<!-- ====================================================================
PORTRAIT VIEW — Before vs After (only empty state visibly differs)
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag">PORTRAIT VIEW</span> · 7 cards per row · 1:1.618 aspect (golden, untouched)</span><span>view=portrait</span></div>
<div class="pg-body">
<!-- Title + controls row -->
<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px;">
<div>
<h1 class="text-3xl font-semibold tracking-tight">Categories</h1>
<p class="text-[var(--color-fg-dim)] mt-1 max-w-prose text-sm">Umbrellas that group related tags. A category like <span class="font-mono text-[var(--color-fg)]">BDSM</span> can collect <span class="font-mono text-[var(--color-fg)]">bondage</span>, <span class="font-mono text-[var(--color-fg)]">shibari</span>, <span class="font-mono text-[var(--color-fg)]">cuffs</span>, etc. Each tag belongs to at most one category.</p>
<p class="text-sm text-[var(--color-fg-muted)] mt-1">7 categories</p>
</div>
<div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
<div class="seg">
<span class="pill-sm active">⇊ A-Z</span>
<span class="pill-sm">⏚ Count</span>
</div>
<div class="glass rounded-lg" style="padding: 8px 12px; font-size: 13px; color: var(--color-fg-muted); width: 220px;">New category</div>
<span class="pill-sm" style="background: var(--color-cyan); color: black; height: 32px; border-color: transparent; font-weight: 600;">+ Create</span>
<div class="seg">
<span class="pill-sm active">▭ P</span>
<span class="pill-sm">▭ L</span>
</div>
</div>
</div>
<!-- Portrait grid · 7-up · golden aspect -->
<div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px;">
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-coral);"></span><span class="name">BDSM</span></div>
<div class="meta">12 tags · 89 covers</div>
</div>
</div>
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-violet);"></span><span class="name">Cosplay</span></div>
<div class="meta">8 tags · 45 covers</div>
</div>
</div>
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-mint);"></span><span class="name">Outdoor</span></div>
<div class="meta">5 tags · 33 covers</div>
</div>
</div>
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-cyan);"></span><span class="name">Group</span></div>
<div class="meta">9 tags · 71 covers</div>
</div>
</div>
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-amber);"></span><span class="name">Solo</span></div>
<div class="meta">3 tags · 18 covers</div>
</div>
</div>
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: oklch(0.75 0.15 350);"></span><span class="name">School</span></div>
<div class="meta">6 tags · 27 covers</div>
</div>
</div>
<div class="cat-card cat-portrait">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: oklch(0.7 0.12 100);"></span><span class="name">Office</span></div>
<div class="meta">4 tags · 16 covers</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================================
LANDSCAPE VIEW
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag">LANDSCAPE VIEW</span> · 3 cards per row · 1.618:1 aspect (golden, untouched)</span><span>view=landscape</span></div>
<div class="pg-body">
<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px;">
<div>
<h1 class="text-3xl font-semibold tracking-tight">Categories</h1>
<p class="text-[var(--color-fg-dim)] mt-1 max-w-prose text-sm">Umbrellas that group related tags. A category like <span class="font-mono text-[var(--color-fg)]">BDSM</span> can collect <span class="font-mono text-[var(--color-fg)]">bondage</span>, <span class="font-mono text-[var(--color-fg)]">shibari</span>, <span class="font-mono text-[var(--color-fg)]">cuffs</span>, etc.</p>
<p class="text-sm text-[var(--color-fg-muted)] mt-1">7 categories</p>
</div>
<div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
<div class="seg">
<span class="pill-sm active">⇊ A-Z</span>
<span class="pill-sm">⏚ Count</span>
</div>
<div class="glass rounded-lg" style="padding: 8px 12px; font-size: 13px; color: var(--color-fg-muted); width: 220px;">New category</div>
<span class="pill-sm" style="background: var(--color-cyan); color: black; height: 32px; border-color: transparent; font-weight: 600;">+ Create</span>
<div class="seg">
<span class="pill-sm">▭ P</span>
<span class="pill-sm active">▭ L</span>
</div>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
<div class="cat-card cat-landscape">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-coral);"></span><span class="name">BDSM</span></div>
<div class="desc">Bondage, shibari, cuffs and related restraint kinks. Sub-tags inherit the umbrella's color.</div>
<div class="meta">12 tags · 89 covers</div>
</div>
</div>
<div class="cat-card cat-landscape">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-violet);"></span><span class="name">Cosplay</span></div>
<div class="desc">Anime, school uniforms, costume play. Includes themed wardrobes.</div>
<div class="meta">8 tags · 45 covers</div>
</div>
</div>
<div class="cat-card cat-landscape">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-mint);"></span><span class="name">Outdoor</span></div>
<div class="desc">Beach, park, public, nature settings.</div>
<div class="meta">5 tags · 33 covers</div>
</div>
</div>
<div class="cat-card cat-landscape">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-cyan);"></span><span class="name">Group</span></div>
<div class="desc">3+ participant scenes, orgy, threesome categories.</div>
<div class="meta">9 tags · 71 covers</div>
</div>
</div>
<div class="cat-card cat-landscape">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: var(--color-amber);"></span><span class="name">Solo</span></div>
<div class="desc">Single-performer content; masturbation focus.</div>
<div class="meta">3 tags · 18 covers</div>
</div>
</div>
<div class="cat-card cat-landscape">
<div class="name-overlay">
<div class="name-row"><span class="dot" style="background: oklch(0.75 0.15 350);"></span><span class="name">School</span></div>
<div class="desc">Classroom, uniforms, schoolgirl and teacher dynamics.</div>
<div class="meta">6 tags · 27 covers</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================================
Empty state — only place that visibly changes
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag">EMPTY STATE</span> · BEFORE vs AFTER · only place spacing changes</span><span>cats.length === 0</span></div>
<div class="pg-body">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;">
<div>
<div class="label">BEFORE — <code>p-12 · mb-2</code></div>
<div class="glass rounded-2xl text-center" style="padding: 48px;">
<div style="font-size: 32px; opacity: 0.4; margin-bottom: 8px;">▦</div>
<p class="text-[var(--color-fg-dim)] text-sm">No categories yet. Create one above to start grouping tags.</p>
</div>
</div>
<div>
<div class="label after">AFTER — <code>p-card · mb-label</code></div>
<div class="glass rounded-2xl text-center" style="padding: var(--spacing-card);">
<div style="font-size: 32px; opacity: 0.4; margin-bottom: var(--spacing-label);">▦</div>
<p class="text-[var(--color-fg-dim)] text-sm">No categories yet. Create one above to start grouping tags.</p>
</div>
</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>Tags</strong>.
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink