admin
310 lines
17 KiB
HTML
310 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Detail Page Metadata Strip — Mockups</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root {
|
||
--color-bg-0: oklch(0.16 0.02 280);
|
||
--color-bg-1: oklch(0.20 0.03 280);
|
||
--color-fg: oklch(0.96 0.01 280);
|
||
--color-fg-dim: oklch(0.78 0.02 280);
|
||
--color-fg-muted: oklch(0.55 0.02 280);
|
||
--color-glass: oklch(0.27 0.04 280 / 0.45);
|
||
--color-glass-strong: oklch(0.30 0.05 280 / 0.65);
|
||
--color-glass-border: oklch(0.40 0.05 280 / 0.30);
|
||
--color-glass-border-strong: oklch(0.50 0.06 280 / 0.45);
|
||
--color-cyan: oklch(0.82 0.16 200);
|
||
--color-violet: oklch(0.72 0.18 305);
|
||
--color-coral: oklch(0.74 0.18 25);
|
||
--color-mint: oklch(0.82 0.14 165);
|
||
--color-amber: oklch(0.84 0.14 80);
|
||
}
|
||
body {
|
||
background: var(--color-bg-0);
|
||
color: var(--color-fg);
|
||
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||
}
|
||
.frame {
|
||
background: oklch(0.18 0.025 280);
|
||
border: 1px solid var(--color-glass-border);
|
||
border-radius: 1rem;
|
||
padding: 1rem 1.25rem;
|
||
}
|
||
.header {
|
||
font-family: ui-monospace, "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--color-cyan);
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
.why {
|
||
font-size: 11px;
|
||
color: var(--color-fg-muted);
|
||
margin-top: 0.25rem;
|
||
font-style: italic;
|
||
}
|
||
.label-mono {
|
||
font-family: ui-monospace, "JetBrains Mono", monospace;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--color-fg-muted);
|
||
}
|
||
.val-mono {
|
||
font-family: ui-monospace, "JetBrains Mono", monospace;
|
||
color: var(--color-fg);
|
||
font-weight: 600;
|
||
}
|
||
.glass {
|
||
background: var(--color-glass);
|
||
border: 1px solid var(--color-glass-border);
|
||
}
|
||
.glass-strong {
|
||
background: var(--color-glass-strong);
|
||
border: 1px solid var(--color-glass-border-strong);
|
||
}
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
padding: 0.15rem 0.55rem;
|
||
border-radius: 999px;
|
||
font-size: 10px;
|
||
font-family: ui-monospace, monospace;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.divider-v {
|
||
width: 1px;
|
||
align-self: stretch;
|
||
background: var(--color-glass-border);
|
||
}
|
||
.row-current {
|
||
/* The current production look the user dislikes — for reference at top. */
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 13px;
|
||
color: var(--color-fg-muted);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="p-6 space-y-6">
|
||
<header class="space-y-1 mb-2">
|
||
<h1 class="text-2xl font-semibold tracking-tight">Detail Metadata Strip — 8 Variants</h1>
|
||
<p class="text-sm text-[var(--color-fg-muted)]">Replaces the two-row "RESOLUTION / SIZE / IMPORTED" + "VIDEO (N PARTS) ..." block at <code class="text-[var(--color-cyan)]">localhost:3001/id/YUJ-001</code>. All variants render the same data: cover (800×538, 170 KB, imported 4/29/2026) and video (1920×1080, H.264, 5.7 Mbps, 4.90 GB, 1:56:55, 2 parts).</p>
|
||
</header>
|
||
|
||
<!-- =========================================================
|
||
Reference: current production
|
||
========================================================= -->
|
||
<section class="frame max-w-[820px]">
|
||
<div class="header text-[var(--color-fg-muted)]">Current — for comparison</div>
|
||
<div class="space-y-1">
|
||
<div class="row-current flex flex-wrap items-baseline gap-x-4">
|
||
<span class="inline-flex items-baseline gap-1.5"><span class="text-[10px] uppercase tracking-wider opacity-70">RESOLUTION</span><span class="text-[var(--color-fg)] font-bold">800×538</span></span>
|
||
<span class="opacity-40">·</span>
|
||
<span class="inline-flex items-baseline gap-1.5"><span class="text-[10px] uppercase tracking-wider opacity-70">SIZE</span><span class="text-[var(--color-fg)] font-bold">170 KB</span></span>
|
||
<span class="opacity-40">·</span>
|
||
<span class="inline-flex items-baseline gap-1.5"><span class="text-[10px] uppercase tracking-wider opacity-70">IMPORTED</span><span class="text-[var(--color-fg)] font-bold">4/29/2026</span></span>
|
||
</div>
|
||
<div class="row-current">
|
||
<span class="inline-flex items-baseline gap-1.5"><span class="text-[10px] uppercase tracking-wider opacity-70">VIDEO (2 PARTS)</span><span class="text-[var(--color-fg)] font-bold">1920×1080 · H.264 · 5.7 Mbps · 4.90 GB · 1:56:55</span></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
|
||
<!-- 1. Icon-prefixed two rows ----------------------------- -->
|
||
<section class="frame">
|
||
<div class="header">1 · Iconified rows</div>
|
||
<p class="why">Replace the all-caps "RESOLUTION / SIZE / IMPORTED" labels with a single leading icon. Same two-row shape, but the row tells you what it is at a glance.</p>
|
||
<div class="space-y-1.5 mt-3 font-mono text-[13px]">
|
||
<div class="flex items-center gap-3 text-[var(--color-fg-dim)]">
|
||
<svg class="w-3.5 h-3.5 shrink-0 text-[var(--color-fg-muted)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
|
||
<span class="text-[var(--color-fg)] font-semibold">800×538</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>170 KB</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>imported 4/29/2026</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-[var(--color-fg-dim)]">
|
||
<svg class="w-3.5 h-3.5 shrink-0 text-[var(--color-cyan)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
|
||
<span class="text-[var(--color-fg)] font-semibold">1920×1080</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>H.264</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>5.7 Mbps</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>4.90 GB</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>1:56:55</span>
|
||
<span class="ml-2 pill" style="background: oklch(0.30 0.04 280); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.3);">2 parts</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. Single line, vertical divider ---------------------- -->
|
||
<section class="frame">
|
||
<div class="header">2 · Single line, divided</div>
|
||
<p class="why">Both rows fold into one. Cover stats sit muted on the left; video gets the cyan accent color it earns by being the actual content. Vertical rule between them makes it scan as two columns of one line.</p>
|
||
<div class="mt-3 flex items-center gap-3 font-mono text-[13px]">
|
||
<span class="text-[var(--color-fg-muted)]">800×538 · 170 KB</span>
|
||
<span class="divider-v" style="height: 1.2rem;"></span>
|
||
<span class="text-[var(--color-fg)] font-semibold">1920×1080</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>H.264</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>5.7 Mbps</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>4.90 GB</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>1:56:55</span>
|
||
<span class="pill" style="background: oklch(0.30 0.04 280); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.3);">2 parts</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Stat tiles (4-up) --------------------------------- -->
|
||
<section class="frame col-span-1 lg:col-span-2">
|
||
<div class="header">3 · Stat tiles, video-led</div>
|
||
<p class="why">Four numeric tiles for the things that matter most — resolution, bitrate, size, length. Cover info reduced to one quiet line under the title. Each tile shows the value big and the label tiny, like a dashboard.</p>
|
||
<div class="mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||
<div class="rounded-lg p-3 glass">
|
||
<div class="label-mono mb-1">Resolution</div>
|
||
<div class="val-mono text-lg">1920×1080</div>
|
||
</div>
|
||
<div class="rounded-lg p-3 glass">
|
||
<div class="label-mono mb-1">Bitrate</div>
|
||
<div class="val-mono text-lg">5.7 <span class="text-[var(--color-fg-muted)] text-xs">Mbps</span></div>
|
||
</div>
|
||
<div class="rounded-lg p-3 glass">
|
||
<div class="label-mono mb-1">File Size</div>
|
||
<div class="val-mono text-lg">4.90 <span class="text-[var(--color-fg-muted)] text-xs">GB</span></div>
|
||
</div>
|
||
<div class="rounded-lg p-3 glass">
|
||
<div class="label-mono mb-1">Length</div>
|
||
<div class="val-mono text-lg">1:56:55</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 flex items-center gap-2 text-[11px] font-mono text-[var(--color-fg-muted)]">
|
||
<span>cover 800×538 · 170 KB</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>2 parts · H.264</span>
|
||
<span class="opacity-40">·</span>
|
||
<span>imported 4/29/2026</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. Inline chips ------------------------------------- -->
|
||
<section class="frame">
|
||
<div class="header">4 · Inline chips</div>
|
||
<p class="why">Each fact is a borderless chip — label and value packed inside one rounded badge. Easier to skip past than the current bare strip; harder to cram many facts in.</p>
|
||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||
<span class="pill glass" style="color: var(--color-fg-dim);">cover <span class="text-[var(--color-fg)] ml-1">800×538</span></span>
|
||
<span class="pill glass" style="color: var(--color-fg-dim);">cover size <span class="text-[var(--color-fg)] ml-1">170 KB</span></span>
|
||
<span class="pill glass" style="color: var(--color-fg-dim);">imported <span class="text-[var(--color-fg)] ml-1">4/29/2026</span></span>
|
||
</div>
|
||
<div class="mt-2 flex flex-wrap gap-1.5">
|
||
<span class="pill" style="background: oklch(0.50 0.10 200 / 0.10); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.30);">1920×1080</span>
|
||
<span class="pill" style="background: oklch(0.50 0.10 200 / 0.10); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.30);">H.264</span>
|
||
<span class="pill" style="background: oklch(0.50 0.10 200 / 0.10); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.30);">5.7 Mbps</span>
|
||
<span class="pill" style="background: oklch(0.50 0.10 200 / 0.10); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.30);">4.90 GB</span>
|
||
<span class="pill" style="background: oklch(0.50 0.10 200 / 0.10); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.30);">1:56:55</span>
|
||
<span class="pill" style="background: oklch(0.55 0.18 305 / 0.12); color: var(--color-violet); border: 1px solid oklch(0.55 0.18 305 / 0.30);">2 parts</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Definition list, two-column ---------------------- -->
|
||
<section class="frame">
|
||
<div class="header">5 · Definition list, two-column</div>
|
||
<p class="why">Cover left, video right, side by side. Each row is "label : value" in a tight two-column grid. Most "official" looking — leans heavy on the form-y aesthetic.</p>
|
||
<div class="mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-[12px] font-mono">
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Resolution</span><span class="val-mono">800×538</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Codec</span><span class="val-mono">H.264</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Cover Size</span><span class="val-mono">170 KB</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Video Resolution</span><span class="val-mono">1920×1080</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Imported</span><span class="val-mono">4/29/2026</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Bitrate</span><span class="val-mono">5.7 Mbps</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Parts</span><span class="val-mono">2</span></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">File Size</span><span class="val-mono">4.90 GB</span></div>
|
||
<div></div>
|
||
<div class="flex justify-between gap-3"><span class="label-mono">Length</span><span class="val-mono">1:56:55</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Hero stat: four-up ------------------------------- -->
|
||
<section class="frame col-span-1 lg:col-span-2">
|
||
<div class="header">6 · Hero stat — four-up</div>
|
||
<p class="why">Just the four numbers you actually scan for: Resolution, Bitrate, File Size, Length. Big mono values, tiny caps labels. No caption, no chrome.</p>
|
||
<div class="mt-3 flex items-end gap-10 flex-wrap">
|
||
<div>
|
||
<div class="label-mono mb-1">Resolution</div>
|
||
<div class="font-mono text-2xl font-semibold tracking-tight text-[var(--color-fg-dim)]">1920×1080</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono mb-1">Bitrate</div>
|
||
<div class="font-mono text-2xl font-semibold tracking-tight text-[var(--color-fg-dim)]">5.7 Mbps</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono mb-1">File Size</div>
|
||
<div class="font-mono text-3xl font-semibold tracking-tight">4.90 GB</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono mb-1">Length</div>
|
||
<div class="font-mono text-3xl font-semibold tracking-tight" style="color: var(--color-cyan);">1:56:55</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. Asymmetric — video center stage ------------------ -->
|
||
<section class="frame">
|
||
<div class="header">7 · Asymmetric — video front, cover whisper</div>
|
||
<p class="why">Cover info is rarely the reason you opened the detail page; bury it in a tiny gray caption. Give video the full strip with separators. Recognizes that this is fundamentally a video library.</p>
|
||
<div class="mt-3 space-y-1">
|
||
<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1 font-mono">
|
||
<span class="text-[var(--color-fg)] font-semibold text-[15px]">1920×1080</span>
|
||
<span class="opacity-30">·</span>
|
||
<span class="text-[var(--color-fg-dim)] text-[14px]">H.264</span>
|
||
<span class="opacity-30">·</span>
|
||
<span class="text-[var(--color-fg-dim)] text-[14px]">5.7 Mbps</span>
|
||
<span class="opacity-30">·</span>
|
||
<span class="text-[var(--color-fg-dim)] text-[14px]">4.90 GB</span>
|
||
<span class="opacity-30">·</span>
|
||
<span class="text-[var(--color-fg-dim)] text-[14px]">1:56:55</span>
|
||
<span class="ml-1 pill" style="background: oklch(0.50 0.10 200 / 0.10); color: var(--color-cyan); border: 1px solid oklch(0.50 0.10 200 / 0.30);">2 parts</span>
|
||
</div>
|
||
<div class="text-[10px] font-mono text-[var(--color-fg-muted)]">
|
||
cover · 800×538 · 170 KB · imported 4/29/2026
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. Two-column: cover summary, video summary --------- -->
|
||
<section class="frame">
|
||
<div class="header">8 · Side-by-side summaries</div>
|
||
<p class="why">Each side gets its own headed mini-block. Visual parity between cover and video, but they're clearly separated. Same density as current, but the dotted strip becomes structured.</p>
|
||
<div class="mt-3 grid grid-cols-2 gap-3">
|
||
<div class="rounded-lg p-3 glass">
|
||
<div class="label-mono mb-1.5">Cover</div>
|
||
<div class="font-mono text-[13px]"><span class="font-semibold">800×538</span> <span class="opacity-50 mx-1">·</span> 170 KB</div>
|
||
<div class="font-mono text-[11px] text-[var(--color-fg-muted)] mt-1">imported 4/29/2026</div>
|
||
</div>
|
||
<div class="rounded-lg p-3 glass" style="border-color: oklch(0.50 0.10 200 / 0.30);">
|
||
<div class="label-mono mb-1.5" style="color: var(--color-cyan);">Video <span class="opacity-60">· 2 parts</span></div>
|
||
<div class="font-mono text-[13px]"><span class="font-semibold">1920×1080</span> <span class="opacity-50 mx-1">·</span> H.264 <span class="opacity-50 mx-1">·</span> 5.7 Mbps</div>
|
||
<div class="font-mono text-[11px] text-[var(--color-fg-muted)] mt-1">4.90 GB · 1:56:55</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<footer class="text-[11px] text-[var(--color-fg-muted)] mt-6">
|
||
Pick one (or a frankenstein) and I'll wire it into <code class="text-[var(--color-cyan)]">components/image/ImageDetailView.tsx</code>.
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|