admin
527 lines
30 KiB
HTML
527 lines
30 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Detail Page Hero Variants — Pinkudex</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root {
|
||
--color-cyan: oklch(0.82 0.16 200);
|
||
--color-cyan-deep: oklch(0.65 0.18 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.85 0.16 90);
|
||
--color-bg: oklch(0.13 0.02 260);
|
||
--color-bg-1: oklch(0.18 0.025 260);
|
||
--color-bg-2: oklch(0.22 0.03 260);
|
||
--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-border: color-mix(in oklch, white 14%, transparent);
|
||
--color-glass-border-strong: color-mix(in oklch, white 22%, transparent);
|
||
}
|
||
body {
|
||
background: var(--color-bg);
|
||
color: var(--color-fg);
|
||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||
}
|
||
.glass {
|
||
background: var(--color-glass);
|
||
backdrop-filter: blur(20px) saturate(140%);
|
||
border: 1px solid var(--color-glass-border);
|
||
}
|
||
.glass-strong {
|
||
background: color-mix(in oklch, white 10%, transparent);
|
||
backdrop-filter: blur(24px) saturate(150%);
|
||
border: 1px solid var(--color-glass-border-strong);
|
||
}
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 9px;
|
||
border-radius: 999px;
|
||
font: 600 10px/1.2 ui-monospace, monospace;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
border: 1px solid;
|
||
}
|
||
.pill.cyan { background: oklch(0.82 0.16 200 / 0.10); border-color: oklch(0.82 0.16 200 / 0.40); color: var(--color-cyan); }
|
||
.pill.amber { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.40); color: rgb(252 211 77); }
|
||
.pill.mint { background: oklch(0.80 0.16 155 / 0.10); border-color: oklch(0.80 0.16 155 / 0.40); color: var(--color-mint); }
|
||
.pill.violet{ background: oklch(0.72 0.22 305 / 0.12); border-color: oklch(0.72 0.22 305 / 0.40); color: var(--color-violet); }
|
||
.pill.muted { background: var(--color-glass); border-color: var(--color-glass-border); color: var(--color-fg-muted); }
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
border: 1px solid var(--color-glass-border);
|
||
background: var(--color-glass);
|
||
}
|
||
.chip.violet { background: color-mix(in oklch, var(--color-violet) 14%, transparent); color: var(--color-violet); border-color: color-mix(in oklch, var(--color-violet) 35%, transparent); }
|
||
.chip.cyan { background: color-mix(in oklch, var(--color-cyan) 14%, transparent); color: var(--color-cyan); border-color: color-mix(in oklch, var(--color-cyan) 35%, transparent); }
|
||
.label-mono { font: 600 10px/1 ui-monospace, monospace; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-fg-muted); }
|
||
.stars { display: inline-flex; gap: 1px; color: var(--color-cyan); }
|
||
.star { width: 12px; height: 12px; }
|
||
.play-btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: var(--color-cyan); color: black; font-weight: 600;
|
||
padding: 9px 20px; border-radius: 8px; font-size: 14px;
|
||
border: 0; cursor: pointer;
|
||
}
|
||
.ghost-btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 9px 16px; border-radius: 8px; font-size: 14px;
|
||
background: var(--color-glass); border: 1px solid var(--color-glass-border);
|
||
color: var(--color-fg); cursor: pointer;
|
||
}
|
||
|
||
/* Cover frame — locked to the actual cover-image aspect (800/538 ≈ 1.49)
|
||
and capped at the source dimensions so every variant displays the
|
||
cover at its true scale or smaller. width:100% lets it fill
|
||
narrower slots, but max-width prevents it from being scaled UP.
|
||
*/
|
||
.cover-frame {
|
||
aspect-ratio: 800 / 538;
|
||
max-width: 800px;
|
||
max-height: 538px;
|
||
width: 100%;
|
||
}
|
||
.cover-ph {
|
||
background:
|
||
radial-gradient(60% 80% at 30% 30%, oklch(0.45 0.04 280) 0%, oklch(0.20 0.03 260) 80%),
|
||
linear-gradient(135deg, oklch(0.30 0.02 260) 0%, oklch(0.18 0.025 260) 100%);
|
||
display: grid;
|
||
place-items: center;
|
||
color: oklch(0.65 0.01 260 / 0.55);
|
||
font-weight: 700;
|
||
user-select: none;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.cover-ph::after {
|
||
content: "";
|
||
position: absolute; inset: 0;
|
||
background:
|
||
radial-gradient(circle at 70% 80%, color-mix(in oklch, var(--color-violet) 35%, transparent) 0%, transparent 50%),
|
||
radial-gradient(circle at 25% 70%, color-mix(in oklch, var(--color-cyan) 25%, transparent) 0%, transparent 50%);
|
||
mix-blend-mode: screen;
|
||
pointer-events: none;
|
||
}
|
||
.cover-ph > span { z-index: 1; font: 700 clamp(20px, 3vw, 36px) ui-monospace, monospace; letter-spacing: 0.05em; }
|
||
|
||
/* Backdrop variants */
|
||
.bd-radial {
|
||
background:
|
||
radial-gradient(60% 60% at 30% 30%, color-mix(in oklch, var(--color-violet) 30%, transparent) 0%, transparent 60%),
|
||
radial-gradient(60% 60% at 80% 70%, color-mix(in oklch, var(--color-cyan) 30%, transparent) 0%, transparent 60%),
|
||
linear-gradient(180deg, oklch(0.22 0.04 280) 0%, oklch(0.14 0.02 260) 100%);
|
||
}
|
||
.bd-violet {
|
||
background:
|
||
radial-gradient(70% 70% at 50% 30%, color-mix(in oklch, var(--color-violet) 50%, transparent) 0%, transparent 60%),
|
||
linear-gradient(180deg, oklch(0.20 0.06 305) 0%, oklch(0.10 0.02 260) 100%);
|
||
}
|
||
.bd-cyan {
|
||
background:
|
||
radial-gradient(70% 70% at 70% 30%, color-mix(in oklch, var(--color-cyan) 50%, transparent) 0%, transparent 60%),
|
||
linear-gradient(180deg, oklch(0.18 0.05 200) 0%, oklch(0.10 0.02 260) 100%);
|
||
}
|
||
.bd-noir {
|
||
background:
|
||
radial-gradient(80% 80% at 50% 0%, oklch(0.22 0.02 260) 0%, transparent 70%),
|
||
linear-gradient(180deg, oklch(0.10 0.01 260) 0%, oklch(0.05 0.005 260) 100%);
|
||
}
|
||
.bd-warm {
|
||
background:
|
||
radial-gradient(60% 60% at 30% 30%, color-mix(in oklch, var(--color-coral) 35%, transparent) 0%, transparent 60%),
|
||
radial-gradient(60% 60% at 80% 70%, color-mix(in oklch, var(--color-amber) 25%, transparent) 0%, transparent 60%),
|
||
linear-gradient(180deg, oklch(0.20 0.05 35) 0%, oklch(0.10 0.02 35) 100%);
|
||
}
|
||
.bd-cinema {
|
||
background:
|
||
radial-gradient(80% 50% at 50% 50%, oklch(0.25 0.04 280) 0%, transparent 70%),
|
||
linear-gradient(180deg, oklch(0.06 0.005 260) 0%, oklch(0.02 0.005 260) 100%);
|
||
}
|
||
.bd-poster {
|
||
background:
|
||
radial-gradient(circle at 50% 30%, oklch(0.55 0.10 305) 0%, oklch(0.30 0.06 280) 35%, oklch(0.10 0.02 260) 75%);
|
||
filter: saturate(1.2);
|
||
}
|
||
|
||
.header { color: var(--color-cyan); font: 600 11px/1 ui-monospace, monospace; letter-spacing: 0.10em; text-transform: uppercase; }
|
||
.why { color: var(--color-fg-muted); font-size: 12px; line-height: 1.5; }
|
||
.frame { border: 1px solid var(--color-glass-border); border-radius: 18px; overflow: hidden; }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
<main class="max-w-[1700px] mx-auto p-6 space-y-12">
|
||
<header class="space-y-1">
|
||
<h1 class="text-2xl font-semibold tracking-tight">Detail Page · 10 Hero Variants <span class="text-[var(--color-fg-muted)] text-sm font-normal">· cover capped at 800×538</span></h1>
|
||
<p class="text-sm text-[var(--color-fg-dim)]">Same record (YUJ-001 · Ichika Matsumoto · 2 parts · VIP). Every cover frame is locked to the source 800×538 aspect and won't scale up beyond it. #07 is the original.</p>
|
||
</header>
|
||
|
||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||
<symbol id="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z"/></symbol>
|
||
<symbol id="play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol>
|
||
</svg>
|
||
|
||
<!-- =========================================================
|
||
01. POSTER BACKDROP — cover blown up + blurred behind info
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">01 · Poster Backdrop</div>
|
||
<div class="frame relative" style="min-height: 380px;">
|
||
<div class="bd-poster absolute inset-0"></div>
|
||
<div class="absolute inset-0" style="background: linear-gradient(180deg, transparent 0%, oklch(0.06 0.005 260 / 0.85) 70%, oklch(0.06 0.005 260) 100%);"></div>
|
||
<div class="relative p-8 grid grid-cols-[1fr_320px] gap-6 items-end" style="min-height: 380px;">
|
||
<div class="space-y-3">
|
||
<div class="font-mono text-[10px] tracking-[0.25em] text-[var(--color-cyan)]">YUJ-001 · ICHIKA MATSUMOTO</div>
|
||
<h2 class="text-5xl font-bold leading-[1.05] tracking-tight">Untitled</h2>
|
||
<div class="flex items-center gap-3 text-[var(--color-fg-dim)]">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-xs font-mono opacity-80">5/5 · 1h 56m · 1080p H.264 · 2 parts · 4.90 GB</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5 pt-2">
|
||
<span class="pill cyan">◆ VIP</span>
|
||
<span class="pill mint">◉ Watched</span>
|
||
<span class="pill violet">◉ Owned</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 pt-3">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit</button>
|
||
<span class="chip violet ml-auto">Ichika Matsumoto</span>
|
||
<span class="chip cyan">📁 Sugar & Spice</span>
|
||
</div>
|
||
</div>
|
||
<div class="cover-ph cover-frame shadow-2xl"><span>800×538</span></div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Backdrop is a stylized gradient (faux-poster glow), not the cover itself, so the source image stays at its real 800×538 thumbnail size on the right. Title is the headline. The clearest cinematic feel without ever scaling the cover beyond its source dimensions.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
02. LETTERBOX 21:9 — narrow widescreen hero
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">02 · Letterbox 21:9</div>
|
||
<div class="frame relative bd-radial" style="aspect-ratio: 21/9;">
|
||
<div class="absolute inset-x-0 top-0 h-12 bg-black/60"></div>
|
||
<div class="absolute inset-x-0 bottom-0 h-12 bg-black/60"></div>
|
||
<div class="absolute inset-0 flex items-center justify-between px-12 py-16">
|
||
<div class="space-y-2 max-w-[55%]">
|
||
<div class="font-mono text-[10px] tracking-[0.25em] text-[var(--color-cyan)]">YUJ-001</div>
|
||
<h2 class="text-4xl font-bold leading-tight">Untitled</h2>
|
||
<div class="text-xs font-mono text-[var(--color-fg-dim)]">5★ · 1h 56m · 1080p H.264 · 2 parts · Ichika Matsumoto · Sugar & Spice</div>
|
||
<div class="flex flex-wrap gap-1.5 pt-1">
|
||
<span class="pill cyan">◆ VIP</span>
|
||
<span class="pill mint">◉ Watched</span>
|
||
<span class="pill violet">◉ Owned</span>
|
||
</div>
|
||
<div class="flex items-center gap-2 pt-2">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit</button>
|
||
</div>
|
||
</div>
|
||
<div class="cover-ph cover-frame shadow-2xl" style="width: 320px;"><span>800×538</span></div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Cinema-style 21:9 banner with black bars; the cover sits as a 320px thumbnail in the right rail (well under the 800px max). The hero feels wide without forcing the cover to stretch.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
03. GLASS CARD ON BACKDROP — frosted panel floating
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">03 · Glass Card on Backdrop</div>
|
||
<div class="frame relative bd-violet" style="min-height: 360px;">
|
||
<div class="absolute inset-0 grid place-items-center p-8">
|
||
<div class="glass-strong rounded-2xl p-6 w-full max-w-3xl shadow-2xl grid grid-cols-[260px_1fr] gap-5 items-center">
|
||
<div class="cover-ph cover-frame"><span>800×538</span></div>
|
||
<div class="space-y-2">
|
||
<div class="font-mono text-xs tracking-[0.2em] text-[var(--color-cyan)]">YUJ-001</div>
|
||
<h2 class="text-2xl font-bold leading-tight">Untitled</h2>
|
||
<div class="flex items-center gap-2">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-[11px] font-mono text-[var(--color-fg-dim)]">5/5</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="pill cyan">VIP</span>
|
||
<span class="pill mint">Watched</span>
|
||
<span class="pill violet">Owned</span>
|
||
</div>
|
||
<div class="text-[12px] font-mono text-[var(--color-fg-dim)]">1080p · H.264 · 5.7 Mbps · 2 parts · 4.90 GB · 1:56:55</div>
|
||
<div class="flex items-center gap-2 pt-1">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<span class="chip violet">Ichika Matsumoto</span>
|
||
<span class="chip cyan">📁 Sugar & Spice</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Frosted card floats over a colored backdrop. Cover is 260px wide inside the card, well within max. Reads like a focused dialog. Easy to extend the card vertically as more metadata sections land.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
04. SIDE-BY-SIDE — fixed cover column, info column flows
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">04 · Side-by-Side (cover-locked)</div>
|
||
<div class="frame relative grid items-center gap-0" style="min-height: 380px; grid-template-columns: 800px 1fr;">
|
||
<div class="cover-ph cover-frame rounded-none"><span>800×538</span></div>
|
||
<div class="bd-cyan p-8 flex flex-col justify-center space-y-3 h-full">
|
||
<div class="font-mono text-[10px] tracking-[0.25em] text-[var(--color-cyan)]">YUJ-001 · ICHIKA MATSUMOTO</div>
|
||
<h2 class="text-4xl font-bold leading-tight">Untitled</h2>
|
||
<div class="flex items-center gap-2 text-[var(--color-fg-dim)]">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-xs font-mono">5/5 · 1h 56m · 1080p · 2 parts</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="pill cyan">◆ VIP</span>
|
||
<span class="pill mint">◉ Watched</span>
|
||
<span class="pill violet">◉ Owned</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Cover column locked to its native 800px width, info column flexes to fill the rest. Cover is shown 1:1 with no scaling. On wide screens the info column gets the extra space; on narrower screens both columns shrink proportionally without distorting the image.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
05. APPLE TV+ BENTO — backdrop + tile grid
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">05 · Apple TV+ Bento</div>
|
||
<div class="frame relative bd-radial p-6" style="min-height: 380px;">
|
||
<div class="grid gap-3 h-full" style="grid-template-columns: minmax(0, 800px) 1fr 1fr; grid-template-rows: auto auto;">
|
||
<div class="row-span-2 cover-ph cover-frame shadow-2xl"><span>800×538</span></div>
|
||
<div class="glass-strong rounded-xl p-4 col-span-2 space-y-2">
|
||
<div class="font-mono text-[10px] tracking-[0.25em] text-[var(--color-cyan)]">YUJ-001 · ICHIKA MATSUMOTO</div>
|
||
<h2 class="text-2xl font-bold leading-tight">Untitled</h2>
|
||
<div class="flex items-center gap-2">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-xs font-mono text-[var(--color-fg-muted)]">5/5</span>
|
||
</div>
|
||
</div>
|
||
<div class="glass-strong rounded-xl p-4 space-y-2">
|
||
<div class="label-mono">Status</div>
|
||
<div class="flex flex-wrap gap-1">
|
||
<span class="pill cyan">VIP</span>
|
||
<span class="pill mint">Watched</span>
|
||
<span class="pill violet">Owned</span>
|
||
</div>
|
||
</div>
|
||
<div class="glass-strong rounded-xl p-4 space-y-2">
|
||
<div class="label-mono">Video · 2 parts</div>
|
||
<div class="text-[12px] font-mono">1080p · H.264 · 5.7 Mbps</div>
|
||
<div class="text-[11px] text-[var(--color-fg-muted)]">4.90 GB · 1:56:55</div>
|
||
<button class="play-btn mt-1"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Apple TV+ bento. Cover tile capped at 800px (`minmax(0, 800px)`), info tiles fill the rest of the row. On narrower screens the cover shrinks proportionally; never grows. Clean foundation for adding HDR / Audio / Subs tiles later.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
06. STACKED — title hero on top, cover at native size below
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">06 · Stacked (cover follows headline)</div>
|
||
<div class="frame relative bd-violet">
|
||
<div class="p-8 space-y-4">
|
||
<div class="font-mono text-[10px] tracking-[0.3em] text-[var(--color-cyan)]">YUJ-001 · ICHIKA MATSUMOTO · SUGAR & SPICE</div>
|
||
<h2 class="text-5xl font-bold leading-none tracking-tight">Untitled</h2>
|
||
<div class="flex items-center gap-3 text-[var(--color-fg-dim)]">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-xs font-mono">1h 56m · 1080p H.264 · 2 parts · 4.90 GB</span>
|
||
<span class="pill cyan">VIP</span>
|
||
<span class="pill mint">Watched</span>
|
||
<span class="pill violet">Owned</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit metadata</button>
|
||
<button class="ghost-btn">Reveal in folder</button>
|
||
</div>
|
||
</div>
|
||
<div class="px-8 pb-8 flex justify-center">
|
||
<div class="cover-ph cover-frame shadow-2xl"><span>800×538</span></div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Headline + actions on top, cover anchored below at its real 800×538 size, centered. No banner stretching. Reads top-to-bottom like an article. Plays cleanly when the page is wider than 800px — the cover sits in its own breathing room.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
07. ORIGINAL — kept as reference
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">07 · Original (kept)</div>
|
||
<div class="frame">
|
||
<div class="bd-radial relative p-8" style="min-height: 320px;">
|
||
<div class="absolute right-8 top-8 cover-ph cover-frame" style="width: 320px;"><span>800×538</span></div>
|
||
<div class="max-w-[60%] space-y-3">
|
||
<div class="font-mono text-[10px] tracking-[0.2em] text-[var(--color-cyan)]">YUJ-001 · ICHIKA MATSUMOTO</div>
|
||
<h2 class="text-4xl font-bold leading-tight">Untitled</h2>
|
||
<div class="flex items-center gap-2 text-[var(--color-fg-dim)]">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-xs font-mono">5/5 · 1h 56m · 1080p H.264 · 2 parts</span>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span class="pill cyan">◆ VIP</span>
|
||
<span class="pill mint">◉ Watched</span>
|
||
<span class="pill violet">◉ Owned</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 pt-2">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit metadata</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-[var(--color-bg-2)] p-5 grid grid-cols-3 gap-6 text-sm">
|
||
<div>
|
||
<div class="label-mono mb-2">Cover</div>
|
||
<div class="font-mono">800×538 · 170 KB</div>
|
||
<div class="font-mono text-[var(--color-fg-muted)] text-xs">Imported 4/29/2026</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono mb-2">People</div>
|
||
<span class="chip violet">Ichika Matsumoto</span>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono mb-2">Collection</div>
|
||
<span class="chip cyan">📁 Sugar & Spice</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why">The original. Cover top-right at 320px native ratio, info column left, secondary metadata strip below. Kept here for direct comparison.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
08. NOIR CINEMA — pure dark, neon accent, cover landscape
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">08 · Noir Cinema</div>
|
||
<div class="frame relative bd-noir" style="min-height: 380px;">
|
||
<div class="absolute inset-0 grid items-center gap-8 p-10" style="grid-template-columns: 1fr minmax(0, 460px);">
|
||
<div class="space-y-4">
|
||
<div class="font-mono text-[10px] tracking-[0.3em]" style="color: var(--color-cyan-deep);">— YUJ-001 —</div>
|
||
<h2 class="font-mono text-7xl font-bold leading-none tracking-wide" style="color: var(--color-cyan);">YUJ<span class="text-[var(--color-fg)]">001</span></h2>
|
||
<div class="text-[var(--color-fg-dim)] italic">Untitled · Ichika Matsumoto</div>
|
||
<div class="flex items-center gap-3 text-[var(--color-fg-muted)] text-[11px] font-mono uppercase tracking-wider">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span>·</span>
|
||
<span>1080p</span>
|
||
<span>·</span>
|
||
<span>1:56:55</span>
|
||
<span>·</span>
|
||
<span>2 parts</span>
|
||
</div>
|
||
<div class="flex items-center gap-2 pt-1">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit</button>
|
||
<span class="chip cyan ml-3">VIP</span>
|
||
</div>
|
||
</div>
|
||
<div class="cover-ph cover-frame shadow-2xl border border-[var(--color-glass-border)]"><span>800×538</span></div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Pure black, single cyan accent, oversized type as art. Cover restored to its native landscape ratio (was portrait 2:3 in the previous draft, which would've stretched the image). Most restrained variant; loses warmth, wins elegance.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
09. LOBBY CARD — landscape poster with credits
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">09 · Lobby Card (landscape poster with credits)</div>
|
||
<div class="frame relative bd-warm" style="min-height: 480px;">
|
||
<div class="grid items-center gap-8 p-8" style="grid-template-columns: minmax(0, 800px) 1fr;">
|
||
<div class="cover-ph cover-frame shadow-2xl"><span>800×538</span></div>
|
||
<div class="space-y-4">
|
||
<div class="space-y-1">
|
||
<div class="font-mono text-[10px] tracking-[0.3em] text-[var(--color-cyan)]">A PINKUDEX RECORD</div>
|
||
<div class="font-mono text-3xl font-bold tracking-wide">YUJ-001</div>
|
||
<div class="text-2xl italic font-light text-[var(--color-fg-dim)]">"Untitled"</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="text-[11px] font-mono uppercase tracking-wider text-[var(--color-fg-muted)]">5 stars</span>
|
||
</div>
|
||
<div class="space-y-1 text-[12px] font-mono text-[var(--color-fg-dim)]">
|
||
<div><span class="label-mono mr-2">Starring</span> Ichika Matsumoto</div>
|
||
<div><span class="label-mono mr-2">Collection</span> Sugar & Spice</div>
|
||
<div><span class="label-mono mr-2">Format</span> 1920×1080 · H.264 · 5.7 Mbps</div>
|
||
<div><span class="label-mono mr-2">Runtime</span> 1h 56m 55s · 2 parts · 4.90 GB</div>
|
||
<div><span class="label-mono mr-2">Imported</span> 4/29/2026</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1.5 pt-1">
|
||
<span class="pill cyan">◆ VIP</span>
|
||
<span class="pill mint">◉ Watched</span>
|
||
<span class="pill violet">◉ Owned</span>
|
||
</div>
|
||
<div class="flex items-center gap-2 pt-2 border-t border-[var(--color-glass-border)]">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Play</button>
|
||
<button class="ghost-btn">Edit</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Renamed from "Movie Poster" — JAV covers are landscape, so this is more like a movie-theater lobby card than a portrait poster. Cover anchored left at native size, info reads as poster credits ("Starring", "Format", "Runtime"). Most info-rich variant while keeping the cinematic frame.</p>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
10. CONTINUE WATCHING — Netflix row card with progress
|
||
========================================================= -->
|
||
<section class="space-y-3">
|
||
<div class="header">10 · Continue Watching</div>
|
||
<div class="frame relative" style="min-height: 200px;">
|
||
<div class="bd-cinema absolute inset-0"></div>
|
||
<div class="relative p-6 grid gap-6 items-center" style="grid-template-columns: 380px 1fr; min-height: 200px;">
|
||
<div class="cover-ph cover-frame shadow-2xl"><span>800×538</span></div>
|
||
<div class="space-y-2">
|
||
<div class="font-mono text-[10px] tracking-[0.25em] text-[var(--color-cyan)]">YUJ-001 · 2 PARTS · 1080p H.264</div>
|
||
<h2 class="text-2xl font-bold leading-tight">Untitled <span class="text-[var(--color-fg-muted)] text-base font-normal italic">— Ichika Matsumoto</span></h2>
|
||
<div class="flex items-center gap-2">
|
||
<span class="stars"><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg><svg class="star"><use href="#star"/></svg></span>
|
||
<span class="pill cyan">VIP</span>
|
||
<span class="pill mint">Watched</span>
|
||
<span class="pill violet">Owned</span>
|
||
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">· 4.90 GB · 1h 56m</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="chip violet">Ichika Matsumoto</span>
|
||
<span class="chip cyan">📁 Sugar & Spice</span>
|
||
</div>
|
||
<div class="space-y-1 pt-1">
|
||
<div class="flex items-center justify-between text-[10px] font-mono text-[var(--color-fg-muted)]">
|
||
<span>YOU LEFT OFF · 47:32</span>
|
||
<span>1:56:55</span>
|
||
</div>
|
||
<div class="h-1 rounded-full bg-[var(--color-glass)] overflow-hidden">
|
||
<div class="h-full bg-[var(--color-cyan)]" style="width: 41%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2 pt-1">
|
||
<button class="play-btn"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><use href="#play"/></svg> Resume</button>
|
||
<button class="ghost-btn">Restart</button>
|
||
<button class="ghost-btn ml-auto">Edit</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why">Netflix-row card. 380px cover thumbnail at native ratio (was 16:9 in the previous draft, which would've cropped the cover). Progress bar prominent, "Resume" as primary action. Most action-oriented; loses headline scale.</p>
|
||
</section>
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|