admin
322 lines
18 KiB
HTML
322 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Actress 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 12px; height: 28px;
|
|
border-radius: 999px; 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.cyan-fill { background: var(--color-cyan); color: black; border-color: transparent; font-weight: 600; }
|
|
.pill-sm.amber { background: var(--color-amber); color: black; border-color: transparent; font-weight: 600; }
|
|
|
|
/* portrait card placeholder */
|
|
.pcard {
|
|
aspect-ratio: 2/3;
|
|
background: linear-gradient(135deg, oklch(0.30 0.05 290), oklch(0.20 0.04 280));
|
|
border: 1px solid var(--color-glass-border);
|
|
border-radius: 8px;
|
|
position: relative;
|
|
}
|
|
.pcard .name { position: absolute; bottom: 8px; left: 10px; right: 10px; font-size: 12px; color: var(--color-fg); font-weight: 600; }
|
|
|
|
.ltr-bar { display: flex; gap: 4px; width: 100%; }
|
|
.ltr-bar > button {
|
|
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
padding: 8px 0; border-radius: 8px;
|
|
border: 1px solid var(--color-glass-border);
|
|
background: var(--color-glass);
|
|
font-family: ui-monospace, monospace;
|
|
color: var(--color-fg-muted);
|
|
}
|
|
.ltr-bar > button.active { background: var(--color-cyan); color: black; border-color: transparent; }
|
|
.ltr-bar > button.disabled { opacity: 0.4; }
|
|
.ltr-bar > button .big { font-size: 14px; font-weight: 600; }
|
|
.ltr-bar > button .sm { font-size: 9px; opacity: 0.7; }
|
|
</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">Actress Page · Spacing Pass</h1>
|
|
<p class="why max-w-[820px]">
|
|
Same layout as <code class="text-[var(--color-cyan)]">app/actress/page.tsx</code> + <code class="text-[var(--color-cyan)]">ActressDirectory.tsx</code>: title row + create bar, search field + bulk button, category pills, letter bar, then the cast grid (or section-by-letter when a letter is active). Only padding/margin changes — no components moved.
|
|
</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 · page-level empty state</div>
|
|
<div><code class="text-[var(--color-fg-muted)]">p-12 · mb-2</code> → <code class="text-[var(--color-cyan)]">p-card · mb-label</code></div>
|
|
<div>2 · "no matches" empty state in directory</div>
|
|
<div><code class="text-[var(--color-fg-muted)]">p-12</code> → <code class="text-[var(--color-cyan)]">p-card</code></div>
|
|
<div>3 · letter-bar wrapper top margin</div>
|
|
<div><code class="text-[var(--color-fg-muted)]">mt-[13px]</code> 13 px → <code class="text-[var(--color-cyan)]">mt-4</code> 16 px</div>
|
|
<div>4 · letter-bar wrapper bottom margin</div>
|
|
<div><code class="text-[var(--color-fg-muted)]">mb-5</code> 20 px → <code class="text-[var(--color-cyan)]">mb-4</code> 16 px</div>
|
|
</div>
|
|
<p class="why mt-3">
|
|
The current letter-bar margins (13 / 20) are off-rhythm with everything else on the page (which uses 16). Bringing them to 16/16 matches the row above (search + bulk row mb-4) without altering layout.
|
|
</p>
|
|
<p class="why mt-2">
|
|
<strong>Untouched:</strong> page outer <code class="text-[var(--color-cyan)]">px-6 py-6</code>, title-to-create-bar row <code class="text-[var(--color-cyan)]">mb-6</code>, search row <code class="text-[var(--color-cyan)]">mb-4</code>, category-pill gaps <code class="text-[var(--color-cyan)]">gap-1.5</code>, grid gap <code class="text-[var(--color-cyan)]">gap-4</code>, per-letter section spacing <code class="text-[var(--color-cyan)]">space-y-8</code>.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ====================================================================
|
|
BEFORE
|
|
==================================================================== -->
|
|
<div class="pg">
|
|
<div class="pg-h"><span><span class="tag">BEFORE</span> · current Actress page</span><span>app/actress/page.tsx + ActressDirectory.tsx</span></div>
|
|
<div class="pg-body">
|
|
<!-- Title row (mb-6) -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
|
<div>
|
|
<h1 class="text-3xl font-semibold tracking-tight">Cast</h1>
|
|
<p class="text-[var(--color-fg-dim)] mt-1 text-sm">324 total</p>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
<span class="pill-sm" style="background: var(--color-glass-strong); height: 32px;">+ Create actress</span>
|
|
<span class="pill-sm" style="height: 32px;">⤓ Import…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search + bulk row (mb-4) -->
|
|
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
|
|
<div class="glass rounded-lg" style="flex: 1; padding: 8px 12px; padding-left: 32px; font-size: 13px; color: var(--color-fg-muted); position: relative;">
|
|
<span style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.6;">⌕</span>
|
|
Filter Cast — Name, Reversed, Alt Names…
|
|
</div>
|
|
<div class="pill-sm" style="width: 180px; height: 36px; justify-content: center;">☐ Select All Visible <span style="opacity: 0.6;">324</span></div>
|
|
</div>
|
|
|
|
<!-- Category pills (no mb on this block; mt comes from next block's mt-[13px]) -->
|
|
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
|
|
<span class="pill-sm cyan-fill">ALL <span style="opacity: 0.7;">324</span></span>
|
|
<span class="pill-sm">★ Favorite <span style="opacity: 0.7;">42</span></span>
|
|
<span class="pill-sm">⬢ VIP <span style="opacity: 0.7;">18</span></span>
|
|
<span class="pill-sm">Not Assigned <span style="opacity: 0.7;">203</span></span>
|
|
<span class="pill-sm">Newcomer <span style="opacity: 0.7;">14</span></span>
|
|
<span class="pill-sm">Veteran <span style="opacity: 0.7;">22</span></span>
|
|
</div>
|
|
|
|
<!-- Letter bar wrapper (mt-[13px] mb-5 — out of rhythm) -->
|
|
<div style="margin-top: 13px; margin-bottom: 20px;">
|
|
<div class="ltr-bar">
|
|
<button class="active"><span class="big">ALL</span><span class="sm">324</span></button>
|
|
<button><span class="big">A</span><span class="sm">12</span></button>
|
|
<button><span class="big">B</span><span class="sm">8</span></button>
|
|
<button><span class="big">C</span><span class="sm">5</span></button>
|
|
<button><span class="big">D</span><span class="sm">14</span></button>
|
|
<button><span class="big">E</span><span class="sm">3</span></button>
|
|
<button><span class="big">F</span><span class="sm">7</span></button>
|
|
<button><span class="big">G</span><span class="sm">9</span></button>
|
|
<button><span class="big">H</span><span class="sm">11</span></button>
|
|
<button><span class="big">I</span><span class="sm">16</span></button>
|
|
<button><span class="big">J</span><span class="sm">8</span></button>
|
|
<button><span class="big">K</span><span class="sm">22</span></button>
|
|
<button><span class="big">L</span><span class="sm">7</span></button>
|
|
<button><span class="big">M</span><span class="sm">19</span></button>
|
|
<button class="disabled"><span class="big">N</span><span class="sm">0</span></button>
|
|
<button><span class="big">O</span><span class="sm">6</span></button>
|
|
<button><span class="big">P</span><span class="sm">4</span></button>
|
|
<button><span class="big">R</span><span class="sm">9</span></button>
|
|
<button><span class="big">S</span><span class="sm">28</span></button>
|
|
<button><span class="big">T</span><span class="sm">14</span></button>
|
|
<button class="disabled"><span class="big">U</span><span class="sm">0</span></button>
|
|
<button><span class="big">V</span><span class="sm">2</span></button>
|
|
<button><span class="big">W</span><span class="sm">3</span></button>
|
|
<button><span class="big">Y</span><span class="sm">88</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid (untouched) -->
|
|
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;">
|
|
<div class="pcard"><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="pcard"><span class="name">Yua Mikami</span></div>
|
|
<div class="pcard"><span class="name">Suzu Honjo</span></div>
|
|
<div class="pcard"><span class="name">Mei Washio</span></div>
|
|
<div class="pcard"><span class="name">Kana Momonogi</span></div>
|
|
<div class="pcard"><span class="name">Maria Aine</span></div>
|
|
</div>
|
|
|
|
<!-- Empty-state inside directory (BEFORE p-12) -->
|
|
<div style="margin-top: 20px;">
|
|
<div class="label" style="margin-bottom: 4px;">Or — when no matches in current filter:</div>
|
|
<div class="glass rounded-2xl text-center" style="padding: 48px;">
|
|
<p class="text-[var(--color-fg-dim)] text-sm">No matches.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================================
|
|
AFTER
|
|
==================================================================== -->
|
|
<div class="pg">
|
|
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">AFTER</span> · spacing-only</span><span>letter bar mt-4 mb-4 · empty p-card</span></div>
|
|
<div class="pg-body">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
|
<div>
|
|
<h1 class="text-3xl font-semibold tracking-tight">Cast</h1>
|
|
<p class="text-[var(--color-fg-dim)] mt-1 text-sm">324 total</p>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
<span class="pill-sm" style="background: var(--color-glass-strong); height: 32px;">+ Create actress</span>
|
|
<span class="pill-sm" style="height: 32px;">⤓ Import…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
|
|
<div class="glass rounded-lg" style="flex: 1; padding: 8px 12px; padding-left: 32px; font-size: 13px; color: var(--color-fg-muted); position: relative;">
|
|
<span style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.6;">⌕</span>
|
|
Filter Cast — Name, Reversed, Alt Names…
|
|
</div>
|
|
<div class="pill-sm" style="width: 180px; height: 36px; justify-content: center;">☐ Select All Visible <span style="opacity: 0.6;">324</span></div>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
|
|
<span class="pill-sm cyan-fill">ALL <span style="opacity: 0.7;">324</span></span>
|
|
<span class="pill-sm">★ Favorite <span style="opacity: 0.7;">42</span></span>
|
|
<span class="pill-sm">⬢ VIP <span style="opacity: 0.7;">18</span></span>
|
|
<span class="pill-sm">Not Assigned <span style="opacity: 0.7;">203</span></span>
|
|
<span class="pill-sm">Newcomer <span style="opacity: 0.7;">14</span></span>
|
|
<span class="pill-sm">Veteran <span style="opacity: 0.7;">22</span></span>
|
|
</div>
|
|
|
|
<!-- Letter bar wrapper — mt-4 mb-4 (16/16) -->
|
|
<div style="margin-top: 16px; margin-bottom: 16px;">
|
|
<div class="ltr-bar">
|
|
<button class="active"><span class="big">ALL</span><span class="sm">324</span></button>
|
|
<button><span class="big">A</span><span class="sm">12</span></button>
|
|
<button><span class="big">B</span><span class="sm">8</span></button>
|
|
<button><span class="big">C</span><span class="sm">5</span></button>
|
|
<button><span class="big">D</span><span class="sm">14</span></button>
|
|
<button><span class="big">E</span><span class="sm">3</span></button>
|
|
<button><span class="big">F</span><span class="sm">7</span></button>
|
|
<button><span class="big">G</span><span class="sm">9</span></button>
|
|
<button><span class="big">H</span><span class="sm">11</span></button>
|
|
<button><span class="big">I</span><span class="sm">16</span></button>
|
|
<button><span class="big">J</span><span class="sm">8</span></button>
|
|
<button><span class="big">K</span><span class="sm">22</span></button>
|
|
<button><span class="big">L</span><span class="sm">7</span></button>
|
|
<button><span class="big">M</span><span class="sm">19</span></button>
|
|
<button class="disabled"><span class="big">N</span><span class="sm">0</span></button>
|
|
<button><span class="big">O</span><span class="sm">6</span></button>
|
|
<button><span class="big">P</span><span class="sm">4</span></button>
|
|
<button><span class="big">R</span><span class="sm">9</span></button>
|
|
<button><span class="big">S</span><span class="sm">28</span></button>
|
|
<button><span class="big">T</span><span class="sm">14</span></button>
|
|
<button class="disabled"><span class="big">U</span><span class="sm">0</span></button>
|
|
<button><span class="big">V</span><span class="sm">2</span></button>
|
|
<button><span class="big">W</span><span class="sm">3</span></button>
|
|
<button><span class="big">Y</span><span class="sm">88</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;">
|
|
<div class="pcard"><span class="name">Ichika Matsumoto</span></div>
|
|
<div class="pcard"><span class="name">Yua Mikami</span></div>
|
|
<div class="pcard"><span class="name">Suzu Honjo</span></div>
|
|
<div class="pcard"><span class="name">Mei Washio</span></div>
|
|
<div class="pcard"><span class="name">Kana Momonogi</span></div>
|
|
<div class="pcard"><span class="name">Maria Aine</span></div>
|
|
</div>
|
|
|
|
<!-- Empty-state inside directory (AFTER p-card) -->
|
|
<div style="margin-top: 16px;">
|
|
<div class="label after" style="margin-bottom: 4px;">Or — no matches in current filter:</div>
|
|
<div class="glass rounded-2xl text-center" style="padding: var(--spacing-card);">
|
|
<p class="text-[var(--color-fg-dim)] text-sm">No matches.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====================================================================
|
|
Empty state at page level (no actresses at all)
|
|
==================================================================== -->
|
|
<div class="pg">
|
|
<div class="pg-h"><span><span class="tag">BEFORE / AFTER</span> · page-level empty state when no actresses exist</span><span>app/actress/page.tsx</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 actresses yet. Create one above or add from any cover.</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 actresses yet. Create one above or add from any cover.</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>Database</strong>.
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|