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

363 lines
20 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Actress Detail 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-section: 15px;
--spacing-card-gap: 9px;
--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); }
.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; }
/* Portrait frames — golden ratio (1.618), DO NOT TOUCH */
.pframe {
--PHI: 1.618;
height: 308px;
width: 190px; /* 308 / 1.618 */
border-radius: 12px;
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;
flex: 0 0 auto;
}
.pframe.horiz {
width: 498px; /* 308 * 1.618 */
}
.pframe .slot {
position: absolute; top: 6px; left: 6px;
font-family: ui-monospace, monospace;
font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
color: white; padding: 2px 6px; border-radius: 4px;
background: rgba(0,0,0,0.6);
}
.pframe .face { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.4); font-size: 48px; }
.biopanel {
height: 308px;
width: 190px;
border-radius: 12px;
background: oklch(0.17 0.04 285 / 0.4);
border: 1px solid var(--color-glass-border);
padding: 12px;
flex: 0 0 auto;
display: flex; flex-direction: column; gap: 12px;
}
.biopanel h4 { font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-cyan); margin-bottom: 6px; }
.biopanel .row { display: flex; justify-content: space-between; font-size: 13px; }
.biopanel .row span:first-child { color: var(--color-fg-muted); }
.biopanel .row span:last-child { font-family: ui-monospace, monospace; color: var(--color-fg); }
.chip-cat {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px; font-size: 12px; font-family: ui-monospace, monospace;
border: 1px solid var(--color-glass-border); color: var(--color-fg-muted);
background: transparent;
}
.chip-cat.active { color: var(--color-violet); border-color: oklch(0.72 0.22 305 / 0.6); background: oklch(0.72 0.22 305 / 0.15); }
.chip-cat.active.cyan { color: var(--color-cyan); border-color: oklch(0.82 0.16 200 / 0.6); background: oklch(0.82 0.16 200 / 0.15); }
.alt-chip {
display: inline-flex; align-items: center;
padding: 0 8px; height: 22px;
border-radius: 999px; font-size: 11px; font-family: ui-monospace, monospace;
border: 1px solid var(--color-glass-border); color: var(--color-fg-dim);
background: transparent;
}
.alt-chip.auto { color: var(--color-cyan); border-color: oklch(0.82 0.16 200 / 0.3); background: oklch(0.82 0.16 200 / 0.05); }
.cstar {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 12px 4px 4px;
border-radius: 999px;
border: 1px solid var(--color-glass-border);
background: var(--color-glass);
font-size: 13px;
}
.cstar .av { width: 28px; height: 28px; border-radius: 999px; background: oklch(0.30 0.05 290); flex: 0 0 auto; }
.cstar .num { font-family: ui-monospace, monospace; font-size: 10px; color: var(--color-cyan); }
.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);
}
</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 Detail Page · Spacing Pass</h1>
<p class="why max-w-[820px]">
<code class="text-[var(--color-cyan)]">/actress/[slug]</code> — back link + Edit, hero card (name + alt-name chips + 4 portraits + landscape + bio + categories + notes), CoStars row, FilterBar, LetterBar, MasonryGrid. Only the hero card's internal padding/gaps adjust. Portraits are golden-ratio (1.618) — <strong>not touched</strong>.
</p>
</header>
<!-- ====================================================================
Audit
==================================================================== -->
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
<div class="label">Spacing changes only — 4 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 · hero card padding</div>
<div><code class="text-[var(--color-fg-muted)]">p-5</code> 20 px → <code class="text-[var(--color-cyan)]">p-card</code> 15 px</div>
<div>2 · hero card internal section gap</div>
<div><code class="text-[var(--color-fg-muted)]">gap-5</code> 20 px → <code class="text-[var(--color-cyan)]">gap-section</code> 15 px</div>
<div>3 · "Categories" label margin</div>
<div><code class="text-[var(--color-fg-muted)]">mb-1.5</code> 6 px → <code class="text-[var(--color-cyan)]">mb-label</code> 7 px</div>
<div>4 · category chip cluster gap</div>
<div><code class="text-[var(--color-fg-muted)]">gap-1.5</code> 6 px → <code class="text-[var(--color-cyan)]">gap-chip</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>, top back/edit row <code class="text-[var(--color-cyan)]">mb-4</code>, hero card <code class="text-[var(--color-cyan)]">mb-6</code> (matches LetterBar's <code class="text-[var(--color-cyan)]">my-6</code>), portrait flex <code class="text-[var(--color-cyan)]">gap-3</code> (image rhythm), portrait golden-ratio aspect, alt-name chips <code class="text-[var(--color-cyan)]">gap-1.5 mt-2</code>, notes <code class="text-[var(--color-cyan)]">mt-4</code>, CoStarsRow <code class="text-[var(--color-cyan)]">my-6 / mb-3 / gap-2</code>, FilterBar, MasonryGrid.
</p>
</section>
<!-- ====================================================================
BEFORE
==================================================================== -->
<div class="pg">
<div class="pg-h"><span><span class="tag">BEFORE</span> · current /actress/[slug]</span><span>p-5 · gap-5 · mb-1.5 · gap-1.5</span></div>
<div class="pg-body">
<!-- Top row -->
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
<span style="font-size: 13px; color: var(--color-fg-dim);">← All Actresses</span>
<span style="display:inline-flex; align-items:center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 8px;" class="glass">✎ Edit</span>
</div>
<!-- Hero card -->
<div class="glass rounded-2xl" style="padding: 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 0 0 2px var(--color-violet), 0 0 24px -4px oklch(0.72 0.22 305 / 0.4);">
<!-- title row -->
<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;">
<div style="min-width: 0;">
<h1 class="text-3xl font-semibold tracking-tight" style="color: var(--color-violet);">Aika</h1>
<div style="display:flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;">
<span class="alt-chip">Yamakawa Aika</span>
<span class="alt-chip auto">Aika Yamakawa</span>
<span class="alt-chip">あいか</span>
</div>
</div>
<div style="text-align: right; flex-shrink: 0;">
<div class="text-2xl font-mono font-semibold tabular-nums">42</div>
<div style="text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-muted); font-size: 10px;">Covers</div>
</div>
</div>
<!-- portraits row (gap-3 — image rhythm, untouched) -->
<div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; justify-content: center;">
<div class="pframe"><span class="slot">P1</span><div class="face">👤</div></div>
<div class="pframe"><span class="slot">P2</span><div class="face">👤</div></div>
<div class="pframe"><span class="slot">P3</span><div class="face">👤</div></div>
<div class="pframe"><span class="slot">P4</span><div class="face">👤</div></div>
<div class="pframe horiz"><span class="slot">L</span><div class="face">👤</div></div>
<div class="biopanel">
<div>
<h4>Personal</h4>
<div class="row"><span>Age</span><span>26</span></div>
<div class="row"><span>Born</span><span>1999-03-21</span></div>
</div>
<div>
<h4>Body</h4>
<div class="row"><span>Height</span><span>165 cm</span></div>
<div class="row"><span>Weight</span><span>48 kg</span></div>
<div class="row"><span>Cup Size</span><span>D</span></div>
</div>
</div>
</div>
<!-- categories + notes -->
<div style="min-width: 0; display: flex; flex-direction: column;">
<div>
<div style="text-transform: uppercase; letter-spacing: 0.1em; font-family: ui-monospace, monospace; font-size: 10px; color: var(--color-fg-muted); margin-bottom: 6px;">Categories</div>
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
<span class="chip-cat active">★ Favorite</span>
<span class="chip-cat active cyan">⬢ VIP</span>
<span class="chip-cat">Newcomer</span>
<span class="chip-cat">Veteran</span>
<span class="chip-cat">Comeback</span>
</div>
</div>
<p style="font-size: 14px; color: var(--color-fg-dim); margin-top: 16px; line-height: 1.6;">
Debuted 2019. Known for emotional performances and consistent collaborations with Madonna. Speaks fluent English in two interviews on file.
</p>
</div>
</div>
<!-- CoStars row -->
<section style="margin: 24px 0;">
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
<span style="color: var(--color-fg-muted);">👥</span>
<h2 style="font-family: ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted);">Frequent co-stars</h2>
<span style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--color-fg-muted);">(6)</span>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
<span class="cstar"><span class="av"></span><span>Ichika Matsumoto</span><span class="num">8</span></span>
<span class="cstar"><span class="av"></span><span>Yua Mikami</span><span class="num">6</span></span>
<span class="cstar"><span class="av"></span><span>Suzu Honjo</span><span class="num">4</span></span>
<span class="cstar"><span class="av"></span><span>Mei Washio</span><span class="num">3</span></span>
</div>
</section>
<!-- Filter / letter / grid (untouched, sketched briefly) -->
<div style="display: flex; gap: 8px; margin-bottom: 12px;"><span class="alt-chip">All</span><span class="alt-chip">+ Filter</span></div>
<div style="margin: 24px 0;">
<div style="display: flex; gap: 1px; flex-wrap: wrap;">
<span style="width:24px;height:24px;border-radius:4px;background:var(--color-cyan);color:black;font-family:monospace;font-size:11px;display:grid;place-items:center;">A</span>
<span style="width:24px;height:24px;border-radius:4px;color:var(--color-fg-muted);font-family:monospace;font-size:11px;display:grid;place-items:center;">B</span>
<span style="width:24px;height:24px;border-radius:4px;color:var(--color-fg-muted);font-family:monospace;font-size:11px;display:grid;place-items:center;">C</span>
<span style="width:24px;height:24px;border-radius:4px;color:var(--color-fg-muted);font-family:monospace;font-size:11px;display:grid;place-items:center;">D</span>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
<div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></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>p-card · gap-section · mb-label · gap-chip</span></div>
<div class="pg-body">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
<span style="font-size: 13px; color: var(--color-fg-dim);">← All Actresses</span>
<span style="display:inline-flex; align-items:center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 8px;" class="glass">✎ Edit</span>
</div>
<!-- Hero card with new tokens -->
<div class="glass rounded-2xl" style="padding: var(--spacing-card); margin-bottom: 24px; display: flex; flex-direction: column; gap: var(--spacing-section); box-shadow: 0 0 0 2px var(--color-violet), 0 0 24px -4px oklch(0.72 0.22 305 / 0.4);">
<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;">
<div style="min-width: 0;">
<h1 class="text-3xl font-semibold tracking-tight" style="color: var(--color-violet);">Aika</h1>
<div style="display:flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;">
<span class="alt-chip">Yamakawa Aika</span>
<span class="alt-chip auto">Aika Yamakawa</span>
<span class="alt-chip">あいか</span>
</div>
</div>
<div style="text-align: right; flex-shrink: 0;">
<div class="text-2xl font-mono font-semibold tabular-nums">42</div>
<div style="text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-muted); font-size: 10px;">Covers</div>
</div>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; justify-content: center;">
<div class="pframe"><span class="slot">P1</span><div class="face">👤</div></div>
<div class="pframe"><span class="slot">P2</span><div class="face">👤</div></div>
<div class="pframe"><span class="slot">P3</span><div class="face">👤</div></div>
<div class="pframe"><span class="slot">P4</span><div class="face">👤</div></div>
<div class="pframe horiz"><span class="slot">L</span><div class="face">👤</div></div>
<div class="biopanel">
<div>
<h4>Personal</h4>
<div class="row"><span>Age</span><span>26</span></div>
<div class="row"><span>Born</span><span>1999-03-21</span></div>
</div>
<div>
<h4>Body</h4>
<div class="row"><span>Height</span><span>165 cm</span></div>
<div class="row"><span>Weight</span><span>48 kg</span></div>
<div class="row"><span>Cup Size</span><span>D</span></div>
</div>
</div>
</div>
<div style="min-width: 0; display: flex; flex-direction: column;">
<div>
<div style="text-transform: uppercase; letter-spacing: 0.1em; font-family: ui-monospace, monospace; font-size: 10px; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Categories</div>
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-chip);">
<span class="chip-cat active">★ Favorite</span>
<span class="chip-cat active cyan">⬢ VIP</span>
<span class="chip-cat">Newcomer</span>
<span class="chip-cat">Veteran</span>
<span class="chip-cat">Comeback</span>
</div>
</div>
<p style="font-size: 14px; color: var(--color-fg-dim); margin-top: 16px; line-height: 1.6;">
Debuted 2019. Known for emotional performances and consistent collaborations with Madonna. Speaks fluent English in two interviews on file.
</p>
</div>
</div>
<section style="margin: 24px 0;">
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
<span style="color: var(--color-fg-muted);">👥</span>
<h2 style="font-family: ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted);">Frequent co-stars</h2>
<span style="font-family: ui-monospace, monospace; font-size: 10px; color: var(--color-fg-muted);">(6)</span>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
<span class="cstar"><span class="av"></span><span>Ichika Matsumoto</span><span class="num">8</span></span>
<span class="cstar"><span class="av"></span><span>Yua Mikami</span><span class="num">6</span></span>
<span class="cstar"><span class="av"></span><span>Suzu Honjo</span><span class="num">4</span></span>
<span class="cstar"><span class="av"></span><span>Mei Washio</span><span class="num">3</span></span>
</div>
</section>
<div style="display: flex; gap: 8px; margin-bottom: 12px;"><span class="alt-chip">All</span><span class="alt-chip">+ Filter</span></div>
<div style="margin: 24px 0;">
<div style="display: flex; gap: 1px; flex-wrap: wrap;">
<span style="width:24px;height:24px;border-radius:4px;background:var(--color-cyan);color:black;font-family:monospace;font-size:11px;display:grid;place-items:center;">A</span>
<span style="width:24px;height:24px;border-radius:4px;color:var(--color-fg-muted);font-family:monospace;font-size:11px;display:grid;place-items:center;">B</span>
<span style="width:24px;height:24px;border-radius:4px;color:var(--color-fg-muted);font-family:monospace;font-size:11px;display:grid;place-items:center;">C</span>
<span style="width:24px;height:24px;border-radius:4px;color:var(--color-fg-muted);font-family:monospace;font-size:11px;display:grid;place-items:center;">D</span>
</div>
</div>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
<div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></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.
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink