admin
329 lines
11 KiB
HTML
329 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Pinkudex · Cover label — 10 actress display options</title>
|
||
<style>
|
||
:root {
|
||
--bg-0: #0a0710;
|
||
--bg-1: #14101e;
|
||
--fg: #e8e6f0;
|
||
--fg-dim: #a8a4b8;
|
||
--fg-muted: #6e6a80;
|
||
--cyan: #22d3ee;
|
||
--violet: #a78bfa;
|
||
--mint: #34d399;
|
||
--coral: #fb7185;
|
||
--amber: #fbbf24;
|
||
--glass: rgba(255,255,255,0.04);
|
||
--glass-strong: rgba(255,255,255,0.08);
|
||
--border: rgba(255,255,255,0.08);
|
||
--border-strong: rgba(255,255,255,0.18);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg-0);
|
||
color: var(--fg);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.page { max-width: 1600px; margin: 0 auto; padding: 24px; }
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
padding: 16px 20px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(167,139,250,0.05));
|
||
border: 1px solid var(--border);
|
||
}
|
||
.page-header h1 { margin: 0 0 8px 0; font-size: 24px; font-weight: 600; }
|
||
.page-header p { margin: 0; color: var(--fg-dim); font-size: 14px; }
|
||
|
||
.grid-mocks {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
/* Mockup wrapper */
|
||
.mock {
|
||
background: var(--glass);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.mock h2 {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: var(--cyan);
|
||
font-weight: 600;
|
||
}
|
||
.mock .meta {
|
||
font-size: 11px;
|
||
color: var(--fg-dim);
|
||
line-height: 1.5;
|
||
}
|
||
.mock .body {
|
||
display: flex;
|
||
justify-content: center;
|
||
background: rgba(255,255,255,0.02);
|
||
border-radius: 10px;
|
||
padding: 12px;
|
||
}
|
||
|
||
/* The simulated JAV cover */
|
||
.cover {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 420px;
|
||
aspect-ratio: 800 / 538;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.85) 100%),
|
||
linear-gradient(135deg, #2a1f3a, #1a1428);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
|
||
}
|
||
.cover-fake-image {
|
||
position: absolute; inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(255,255,255,0.18);
|
||
font-size: 64px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.04em;
|
||
pointer-events: none;
|
||
}
|
||
/* Optional overlay/label area above the gradient */
|
||
.cover .label {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
/* Reusable bits */
|
||
.javid {
|
||
color: var(--cyan);
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
letter-spacing: -0.01em;
|
||
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
|
||
}
|
||
.actress-text {
|
||
color: rgba(255,255,255,0.85);
|
||
font-size: 12px;
|
||
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
|
||
}
|
||
.actress-text-dim { color: rgba(255,255,255,0.6); font-size: 11px; }
|
||
.actress-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 1px 7px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.1);
|
||
color: rgba(255,255,255,0.85);
|
||
font-size: 10px;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.actress-pill.violet {
|
||
background: rgba(167,139,250,0.18);
|
||
color: var(--violet);
|
||
border: 1px solid rgba(167,139,250,0.3);
|
||
}
|
||
.avatar {
|
||
width: 18px; height: 18px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, #f9a8d4, #a78bfa);
|
||
flex-shrink: 0;
|
||
border: 1.5px solid rgba(255,255,255,0.4);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header class="page-header">
|
||
<h1>Cover label — actress display options</h1>
|
||
<p>Each card shows the same fake cover with a different way to render JAV ID + actress name(s). Compare visually.</p>
|
||
</header>
|
||
|
||
<div class="grid-mocks">
|
||
|
||
<!-- 1. Stacked simple -->
|
||
<div class="mock">
|
||
<h2>1. Stacked simple</h2>
|
||
<div class="meta">JAVID large on top, actress on the line below in a smaller, dimmer style. Closest to the existing layout — least disruptive.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<div class="javid">YST-206</div>
|
||
<div class="actress-text actress-text-dim">Reika Aiba</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. Inline with separator -->
|
||
<div class="mock">
|
||
<h2>2. Inline with separator</h2>
|
||
<div class="meta">Single row, JAVID · actress. Fits small cards well, looks cluttered with many actresses. Falls back to first actress + count when 2+.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<span class="javid">YST-206</span>
|
||
<span style="color:rgba(255,255,255,0.4); margin: 0 6px;">·</span>
|
||
<span class="actress-text">Reika Aiba</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. Right-aligned actress -->
|
||
<div class="mock">
|
||
<h2>3. Right-aligned actress</h2>
|
||
<div class="meta">JAVID left, actress hugs the right edge. Visual symmetry; good when both texts are short.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label" style="display:flex; justify-content:space-between; align-items:baseline; gap:12px;">
|
||
<span class="javid">YST-206</span>
|
||
<span class="actress-text" style="text-align:right;">Reika Aiba</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. Top-corner JAVID, bottom actress -->
|
||
<div class="mock">
|
||
<h2>4. Diagonal split (top JAVID, bottom actress)</h2>
|
||
<div class="meta">JAVID becomes a corner badge in the top-left; actress takes the full bottom row. Pulls them apart visually.</div>
|
||
<div class="body">
|
||
<div class="cover" style="align-items: stretch;">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div style="position:absolute; top:10px; left:10px; z-index:2; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,0.6); backdrop-filter: blur(4px);">
|
||
<span class="javid" style="font-size: 13px;">YST-206</span>
|
||
</div>
|
||
<div class="label" style="align-self:flex-end;">
|
||
<div class="actress-text" style="font-weight: 500;">Reika Aiba</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. Actress as pill -->
|
||
<div class="mock">
|
||
<h2>5. Actress as pill</h2>
|
||
<div class="meta">JAVID stays plain; actress wears a glassy chip. Stands out when there's busy artwork behind. Multi-actress gets multiple chips.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<div class="javid" style="margin-bottom: 6px;">YST-206</div>
|
||
<span class="actress-pill">Reika Aiba</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. Avatar + name -->
|
||
<div class="mock">
|
||
<h2>6. Mini avatar + name</h2>
|
||
<div class="meta">Tiny circular actress portrait next to the name. Most visually rich; uses the actress portrait you've already uploaded. Multi-actress = stacked avatars.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<div class="javid" style="margin-bottom: 6px;">YST-206</div>
|
||
<div style="display:flex; align-items:center; gap:6px;">
|
||
<span class="avatar"></span>
|
||
<span class="actress-text">Reika Aiba</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. Hover-reveal actress -->
|
||
<div class="mock">
|
||
<h2>7. Hover-reveal actress</h2>
|
||
<div class="meta">JAVID always visible. Actress fades in on hover, stacked below. Cleanest when not interacting; preview on demand. Sample shows hover state.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<div class="javid">YST-206</div>
|
||
<div class="actress-text actress-text-dim" style="opacity:0.95; margin-top: 2px;">Reika Aiba</div>
|
||
<div style="font-size: 9px; color: var(--cyan); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-family: ui-monospace, monospace;">↑ shown on hover</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. Multi-actress chips -->
|
||
<div class="mock">
|
||
<h2>8. Multi-actress chips (2+ actresses)</h2>
|
||
<div class="meta">Each actress gets a violet pill, wrapping if needed. Up to ~3 visible; "+N" overflow chip for more. Especially useful for collab releases.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<div class="javid" style="margin-bottom: 6px;">CJOD-333</div>
|
||
<div style="display:flex; flex-wrap:wrap; gap:4px;">
|
||
<span class="actress-pill violet">Ichika Matsumoto</span>
|
||
<span class="actress-pill violet">Mitsuki Nagisa</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9. Subtle backdrop bar -->
|
||
<div class="mock">
|
||
<h2>9. Subtle backdrop label</h2>
|
||
<div class="meta">Both texts sit inside a low-opacity dark bar across the bottom — high legibility on bright/busy covers. JAVID + actress on two lines.</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label" style="background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.08);">
|
||
<div class="javid">YST-206</div>
|
||
<div class="actress-text actress-text-dim">Reika Aiba</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10. Icon-prefixed actress -->
|
||
<div class="mock">
|
||
<h2>10. Icon-prefixed actress</h2>
|
||
<div class="meta">Tiny user icon (👤 or lucide Users) before the name acts as a visual marker, distinguishing actress from other potential meta lines (studio etc).</div>
|
||
<div class="body">
|
||
<div class="cover">
|
||
<div class="cover-fake-image">502 × 335</div>
|
||
<div class="label">
|
||
<div class="javid">YST-206</div>
|
||
<div style="display:flex; align-items:center; gap:5px; margin-top: 2px;">
|
||
<svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="12" cy="7" r="4"/>
|
||
</svg>
|
||
<span class="actress-text actress-text-dim">Reika Aiba</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|