admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
admin
2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/cover-label-mockups.html
+328
View File
@@ -0,0 +1,328 @@
<!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>