admin
580 lines
35 KiB
HTML
580 lines
35 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Part Suffix Pattern UI — Mockups</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--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.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-strong: color-mix(in oklch, white 10%, 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); border: 1px solid var(--color-glass-border-strong); }
|
|
.label-mono { font: 600 10px/1 ui-monospace, monospace; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-fg-muted); }
|
|
.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; padding: 22px; background: linear-gradient(180deg, oklch(0.20 0.025 260) 0%, oklch(0.16 0.02 260) 100%); }
|
|
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 2px 8px; border-radius: 999px;
|
|
font: 600 10px/1.2 ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase;
|
|
border: 1px solid;
|
|
}
|
|
.pill.cyan { background: oklch(0.82 0.16 200 / 0.12); border-color: oklch(0.82 0.16 200 / 0.40); color: var(--color-cyan); }
|
|
.pill.violet { background: oklch(0.72 0.22 305 / 0.14); border-color: oklch(0.72 0.22 305 / 0.40); color: var(--color-violet); }
|
|
.pill.mint { background: oklch(0.80 0.16 155 / 0.12); border-color: oklch(0.80 0.16 155 / 0.40); color: var(--color-mint); }
|
|
.pill.amber { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.40); color: rgb(252 211 77); }
|
|
.pill.muted { background: var(--color-glass); border-color: var(--color-glass-border); color: var(--color-fg-muted); }
|
|
|
|
.input {
|
|
background: var(--color-glass);
|
|
border: 1px solid var(--color-glass-border);
|
|
color: var(--color-fg);
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
font: 500 13px/1.4 ui-monospace, monospace;
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
.input:focus { border-color: var(--color-cyan); }
|
|
|
|
.icon-btn {
|
|
width: 26px; height: 26px;
|
|
display: grid; place-items: center;
|
|
border-radius: 6px;
|
|
background: var(--color-glass);
|
|
border: 1px solid var(--color-glass-border);
|
|
color: var(--color-fg-muted);
|
|
cursor: pointer;
|
|
}
|
|
.icon-btn:hover { color: var(--color-fg); background: var(--color-glass-strong); }
|
|
|
|
.ok { color: var(--color-mint); }
|
|
.miss { color: var(--color-fg-muted); }
|
|
.bad { color: var(--color-coral); }
|
|
.warn { color: rgb(252 211 77); }
|
|
|
|
.part-tab {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 12px; border-radius: 8px;
|
|
font: 600 12px/1 ui-monospace, monospace;
|
|
border: 1px solid var(--color-glass-border);
|
|
background: var(--color-glass);
|
|
color: var(--color-fg-dim);
|
|
cursor: pointer; user-select: none;
|
|
}
|
|
.part-tab.active {
|
|
background: var(--color-cyan);
|
|
color: black;
|
|
border-color: var(--color-cyan);
|
|
}
|
|
.part-tab.variant {
|
|
background: color-mix(in oklch, var(--color-violet) 14%, transparent);
|
|
border-color: color-mix(in oklch, var(--color-violet) 35%, transparent);
|
|
color: var(--color-violet);
|
|
}
|
|
.part-tab.variant.active {
|
|
background: var(--color-violet);
|
|
color: white;
|
|
border-color: var(--color-violet);
|
|
}
|
|
|
|
/* Multi-file record summary bar — visualizes part/variant ratio */
|
|
.ratio-bar {
|
|
display: flex; height: 4px; border-radius: 2px; overflow: hidden;
|
|
background: var(--color-glass);
|
|
}
|
|
.ratio-bar > .seg-part { background: var(--color-cyan); }
|
|
.ratio-bar > .seg-variant { background: var(--color-violet); }
|
|
.ratio-bar > .seg-skip { background: var(--color-coral); }
|
|
|
|
/* Disclosure carat */
|
|
details > summary { list-style: none; cursor: pointer; }
|
|
details > summary::-webkit-details-marker { display: none; }
|
|
details > summary .carat { display: inline-block; transition: transform 0.15s; }
|
|
details[open] > summary .carat { transform: rotate(90deg); }
|
|
|
|
.row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 4px 0; font: 500 12px/1.3 ui-monospace, monospace; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<main class="max-w-[1400px] mx-auto p-6 space-y-12">
|
|
<header class="space-y-1">
|
|
<h1 class="text-2xl font-semibold tracking-tight">Part Suffix Patterns — Settings & Player UI</h1>
|
|
<p class="text-sm text-[var(--color-fg-dim)]">Updated: live preview scales to thousands of files via summary-first grouping; player C4 moves filename out of the strip.</p>
|
|
</header>
|
|
|
|
<!-- =========================================================
|
|
Section A: SETTINGS UI — three syntax styles (kept for reference)
|
|
========================================================= -->
|
|
<section class="space-y-3">
|
|
<div class="header">A · Settings UI · Three syntax styles</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
|
|
<div class="frame space-y-3">
|
|
<div class="flex items-baseline justify-between">
|
|
<h3 class="text-sm font-medium">A1 · Token-based <span class="text-[var(--color-cyan)] text-[10px] ml-1">RECOMMENDED</span></h3>
|
|
</div>
|
|
<p class="why">Use <code class="text-[var(--color-cyan)]">{N}</code> for digits, <code class="text-[var(--color-cyan)]">{L}</code> for a single letter. Anything else is a literal. Matches at the end of the filename, after the code.</p>
|
|
<ol class="space-y-2">
|
|
<li class="flex items-center gap-2"><input class="input" value="-cd{N}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value=".part{N}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="_{N}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="_{L}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
</ol>
|
|
<div class="flex items-center gap-2">
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass">+ Add pattern</button>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass text-[var(--color-fg-muted)]">Reset to defaults</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame space-y-3">
|
|
<h3 class="text-sm font-medium">A2 · Glob-based</h3>
|
|
<p class="why">Familiar shell-glob style. <code class="text-[var(--color-cyan)]">*</code> = anything, <code class="text-[var(--color-cyan)]">[0-9]</code> = digit, <code class="text-[var(--color-cyan)]">[A-Z]</code> = letter.</p>
|
|
<ol class="space-y-2">
|
|
<li class="flex items-center gap-2"><input class="input" value="*-cd[0-9]*"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="*.part[0-9]*"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="*_[0-9]"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="*_[A-Z]"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
</ol>
|
|
<div class="flex items-center gap-2">
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass">+ Add pattern</button>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass text-[var(--color-fg-muted)]">Reset to defaults</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame space-y-3">
|
|
<h3 class="text-sm font-medium">A3 · Raw regex</h3>
|
|
<p class="why">Anchored to end of filename stem. The first capture group is the part identifier (used for sort order).</p>
|
|
<ol class="space-y-2">
|
|
<li class="flex items-center gap-2"><input class="input" value="-cd(\d+)$"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="\.part(\d+)$"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="_(\d+)$"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="_([A-Z])$"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
</ol>
|
|
<div class="flex items-center gap-2">
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass">+ Add pattern</button>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass text-[var(--color-fg-muted)]">Reset to defaults</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =========================================================
|
|
Section B: LIVE PREVIEW — at scale, two layouts
|
|
========================================================= -->
|
|
<section class="space-y-3">
|
|
<div class="header">B · Live Preview · Scales to thousands of files</div>
|
|
|
|
<!-- B1. Summary-first with collapsible drill-down -->
|
|
<div class="frame space-y-3">
|
|
<div class="flex items-baseline justify-between">
|
|
<h3 class="text-sm font-medium">B1 · Summary-first · default view</h3>
|
|
<span class="text-[10px] font-mono text-[var(--color-fg-muted)]">2,047 files · 28 multi-file records</span>
|
|
</div>
|
|
<p class="why">Most rows in your library don’t affect this decision — single-file records classify trivially. Default view shows only multi-file records as collapsed groups, so you scan ~30 rows instead of 2,000. Click to drill in.</p>
|
|
|
|
<div class="flex items-center gap-2 pt-1">
|
|
<input class="input flex-1" placeholder="Search code or filename…">
|
|
<label class="flex items-center gap-1.5 text-xs text-[var(--color-fg-muted)]"><input type="checkbox" checked> only multi-file</label>
|
|
<label class="flex items-center gap-1.5 text-xs text-[var(--color-fg-muted)]"><input type="checkbox"> mixed/ambiguous only</label>
|
|
</div>
|
|
|
|
<div class="bg-black/40 rounded-lg p-3 max-h-[460px] overflow-auto space-y-1">
|
|
|
|
<!-- Group: YUJ-001 — all variants (problem case) -->
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[13px] text-[var(--color-cyan)]">YUJ-001</span>
|
|
<div class="ratio-bar w-20"><div class="seg-variant" style="flex: 4 1 0%"></div></div>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">4 files</span>
|
|
<span class="ml-auto flex gap-1.5">
|
|
<span class="pill violet">4 var</span>
|
|
</span>
|
|
</summary>
|
|
<div class="pl-7 pb-2 pt-1 space-y-0.5">
|
|
<div class="row"><span class="miss">—</span><span>YUJ-001 - Ichika Matsumoto [1080p].mp4</span><span class="pill violet">Variant</span></div>
|
|
<div class="row"><span class="miss">—</span><span>YUJ-001 - Ichika Matsumoto [1080p].fixed.mp4</span><span class="pill violet">Variant</span></div>
|
|
<div class="row"><span class="miss">—</span><span>YUJ-001 - Ichika Matsumoto [1080p].nobf.mp4</span><span class="pill violet">Variant</span></div>
|
|
<div class="row"><span class="miss">—</span><span>YUJ-001 - Ichika Matsumoto [1080p].restored.mp4</span><span class="pill violet">Variant</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Group: IBW-349 — proper parts (expanded for visual) -->
|
|
<details open>
|
|
<summary class="flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[13px] text-[var(--color-cyan)]">IBW-349</span>
|
|
<div class="ratio-bar w-20"><div class="seg-part" style="flex: 2 1 0%"></div></div>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">2 files</span>
|
|
<span class="ml-auto flex gap-1.5">
|
|
<span class="pill cyan">2 part</span>
|
|
</span>
|
|
</summary>
|
|
<div class="pl-7 pb-2 pt-1 space-y-0.5">
|
|
<div class="row"><span class="ok">✓</span><span>IBW-349-cd1.mp4</span><span class="pill cyan">Part 1</span></div>
|
|
<div class="row"><span class="ok">✓</span><span>IBW-349-cd2.mp4</span><span class="pill cyan">Part 2</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Group: IBW-341 -->
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[13px] text-[var(--color-cyan)]">IBW-341</span>
|
|
<div class="ratio-bar w-20"><div class="seg-part" style="flex: 2 1 0%"></div></div>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">2 files</span>
|
|
<span class="ml-auto flex gap-1.5">
|
|
<span class="pill cyan">2 part</span>
|
|
</span>
|
|
</summary>
|
|
</details>
|
|
|
|
<!-- Group: IBW-342 -->
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[13px] text-[var(--color-cyan)]">IBW-342</span>
|
|
<div class="ratio-bar w-20"><div class="seg-part" style="flex: 2 1 0%"></div></div>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">2 files</span>
|
|
<span class="ml-auto flex gap-1.5">
|
|
<span class="pill cyan">2 part</span>
|
|
</span>
|
|
</summary>
|
|
</details>
|
|
|
|
<!-- Group: IBW-348 (lettered) -->
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[13px] text-[var(--color-cyan)]">IBW-348</span>
|
|
<div class="ratio-bar w-20"><div class="seg-part" style="flex: 2 1 0%"></div></div>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">2 files</span>
|
|
<span class="ml-auto flex gap-1.5">
|
|
<span class="pill cyan">2 part</span>
|
|
</span>
|
|
</summary>
|
|
</details>
|
|
|
|
<!-- Group: AMBIGUOUS / mixed (highlighted) -->
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-2 rounded hover:bg-[var(--color-glass)] border border-amber-400/30 bg-amber-400/5">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[13px] text-[var(--color-cyan)]">SDDE-617</span>
|
|
<div class="ratio-bar w-20"><div class="seg-part" style="flex: 2 1 0%"></div><div class="seg-variant" style="flex: 1 1 0%"></div></div>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)]">3 files</span>
|
|
<span class="ml-auto flex gap-1.5">
|
|
<span class="pill cyan">2 part</span>
|
|
<span class="pill violet">1 var</span>
|
|
<span class="pill amber">⚠ mixed</span>
|
|
</span>
|
|
</summary>
|
|
<div class="pl-7 pb-2 pt-1 space-y-0.5">
|
|
<div class="row"><span class="ok">✓</span><span>SDDE-617-cd1.mp4</span><span class="pill cyan">Part 1</span></div>
|
|
<div class="row"><span class="ok">✓</span><span>SDDE-617-cd2.mp4</span><span class="pill cyan">Part 2</span></div>
|
|
<div class="row"><span class="miss">—</span><span>SDDE-617.restored.mp4</span><span class="pill violet">Variant</span></div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Collapsed remaining groups -->
|
|
<div class="text-[11px] text-[var(--color-fg-muted)] italic px-2 py-2">… 22 more multi-file records</div>
|
|
</div>
|
|
|
|
<!-- Stats footer -->
|
|
<div class="grid grid-cols-4 gap-3 pt-2 border-t border-[var(--color-glass-border)] text-[12px] font-mono">
|
|
<div class="space-y-0.5">
|
|
<div class="label-mono">Total scanned</div>
|
|
<div>2,047 files</div>
|
|
</div>
|
|
<div class="space-y-0.5">
|
|
<div class="label-mono">Multi-file records</div>
|
|
<div><span class="text-[var(--color-cyan)]">24 part groups</span> · <span class="text-[var(--color-violet)]">18 variant groups</span></div>
|
|
</div>
|
|
<div class="space-y-0.5">
|
|
<div class="label-mono">Standalone</div>
|
|
<div>1,949 files</div>
|
|
</div>
|
|
<div class="space-y-0.5">
|
|
<div class="label-mono"><span class="warn">⚠ Mixed</span></div>
|
|
<div><span class="warn">3 records</span> · review</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- B2. Stats-only (compact alternative) -->
|
|
<div class="frame space-y-3">
|
|
<div class="flex items-baseline justify-between">
|
|
<h3 class="text-sm font-medium">B2 · Stats-only · alternative for small panels</h3>
|
|
</div>
|
|
<p class="why">If the settings panel is cramped, skip the file list entirely and show per-pattern hit counts. Click any pattern to see the matching files in a side drawer.</p>
|
|
<div class="bg-black/40 rounded-lg p-4 space-y-3">
|
|
<div class="flex items-center gap-3 py-2 border-b border-[var(--color-glass-border)]">
|
|
<code class="text-[13px] text-[var(--color-cyan)] font-mono w-[120px]">-cd{N}</code>
|
|
<div class="ratio-bar flex-1 h-1.5"><div class="seg-part" style="flex: 14 1 0%"></div><div class="seg-skip" style="flex: 0 1 0%"></div></div>
|
|
<span class="font-mono text-xs"><span class="ok">14 matches</span> · 7 records</span>
|
|
<button class="text-[10px] text-[var(--color-cyan)] hover:underline">view files →</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-2 border-b border-[var(--color-glass-border)]">
|
|
<code class="text-[13px] text-[var(--color-cyan)] font-mono w-[120px]">.part{N}</code>
|
|
<div class="ratio-bar flex-1 h-1.5"><div class="seg-part" style="flex: 6 1 0%"></div></div>
|
|
<span class="font-mono text-xs"><span class="ok">6 matches</span> · 3 records</span>
|
|
<button class="text-[10px] text-[var(--color-cyan)] hover:underline">view files →</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-2 border-b border-[var(--color-glass-border)]">
|
|
<code class="text-[13px] text-[var(--color-cyan)] font-mono w-[120px]">_{N}</code>
|
|
<div class="ratio-bar flex-1 h-1.5"><div class="seg-part" style="flex: 22 1 0%"></div></div>
|
|
<span class="font-mono text-xs"><span class="ok">22 matches</span> · 11 records</span>
|
|
<button class="text-[10px] text-[var(--color-cyan)] hover:underline">view files →</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-2">
|
|
<code class="text-[13px] text-[var(--color-cyan)] font-mono w-[120px]">_{L}</code>
|
|
<div class="ratio-bar flex-1 h-1.5"><div class="seg-part" style="flex: 6 1 0%"></div></div>
|
|
<span class="font-mono text-xs"><span class="ok">6 matches</span> · 3 records</span>
|
|
<button class="text-[10px] text-[var(--color-cyan)] hover:underline">view files →</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-2 border-t border-[var(--color-glass-border)] pt-3 text-[var(--color-violet)]">
|
|
<code class="text-[13px] font-mono w-[120px]">unmatched</code>
|
|
<div class="ratio-bar flex-1 h-1.5"><div class="seg-variant" style="flex: 87 1 0%"></div></div>
|
|
<span class="font-mono text-xs">87 files · 18 records (variants)</span>
|
|
<button class="text-[10px] text-[var(--color-violet)] hover:underline">view files →</button>
|
|
</div>
|
|
</div>
|
|
<p class="why">Stats-only fits in narrow panels. The grouped view (B1) is better for diagnosing why a record didn’t classify the way you expected.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =========================================================
|
|
Section C: PLAYER UI — C4 with filename in header
|
|
========================================================= -->
|
|
<section class="space-y-3">
|
|
<div class="header">C · Player UI · C4 with filename moved to header</div>
|
|
|
|
<!-- C4 redesigned — filename in player header -->
|
|
<div class="frame space-y-3">
|
|
<div class="flex items-baseline justify-between">
|
|
<h3 class="text-sm font-medium">C4 · Parts strip + variants dropdown · filename in player header</h3>
|
|
<span class="text-[10px] font-mono text-[var(--color-fg-muted)]">SDDE-617 · 2 parts · 1 variant</span>
|
|
</div>
|
|
|
|
<!-- Mock player header -->
|
|
<div class="rounded-lg border border-[var(--color-glass-border-strong)] overflow-hidden">
|
|
<!-- Header row -->
|
|
<div class="flex items-center justify-between px-5 py-3 border-b border-[var(--color-glass-border)] bg-[var(--color-bg-1)]">
|
|
<div class="min-w-0">
|
|
<div class="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)]">Playing</div>
|
|
<div class="flex items-baseline gap-2 min-w-0">
|
|
<span class="font-mono text-[var(--color-cyan)] font-semibold shrink-0">SDDE-617</span>
|
|
<span class="text-sm text-[var(--color-fg-dim)] truncate">Some Actress, Other Actress</span>
|
|
</div>
|
|
<!-- Filename moved here -->
|
|
<div class="font-mono text-[11px] text-[var(--color-fg-muted)] truncate mt-0.5" title="SDDE-617-cd1.mp4">
|
|
<span class="text-[var(--color-cyan)]">▶</span> SDDE-617-cd1.mp4
|
|
<span class="ml-1 opacity-60">· 4.27 GB · 1080p H.264</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="pill cyan">▷ DIRECT</span>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass">Reveal in Folder</button>
|
|
<button class="p-1 rounded glass">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video area placeholder -->
|
|
<div class="bg-black aspect-video grid place-items-center text-[var(--color-fg-muted)] text-xs font-mono">
|
|
[ video element ]
|
|
</div>
|
|
|
|
<!-- Controls strip — parts + variants dropdown -->
|
|
<div class="px-5 py-2 border-t border-[var(--color-glass-border)] flex items-center gap-2 bg-[var(--color-bg-1)]">
|
|
<span class="label-mono">Parts</span>
|
|
<button class="part-tab active">1</button>
|
|
<button class="part-tab">2</button>
|
|
|
|
<!-- Right side: variants dropdown -->
|
|
<div class="ml-auto relative">
|
|
<button class="part-tab variant">⋯ 1 variant ▾</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="why"><strong>What changed</strong>: filename moved from the parts strip into the player header (third line under code/actresses), prefixed with <span class="text-[var(--color-cyan)]">▶</span> to mark the active file. Adds tech badges (size, resolution, codec) inline. The strip below becomes purely navigation. Truncates with ellipsis on narrow viewports; full filename available via title-tooltip on hover.</p>
|
|
</div>
|
|
|
|
<!-- Variant: with both parts and variants present, dropdown open -->
|
|
<div class="frame space-y-3">
|
|
<div class="flex items-baseline justify-between">
|
|
<h3 class="text-sm font-medium">C4-open · variants dropdown expanded</h3>
|
|
<span class="text-[10px] font-mono text-[var(--color-fg-muted)]">user clicked the variants dropdown</span>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-[var(--color-glass-border-strong)] overflow-hidden">
|
|
<div class="flex items-center justify-between px-5 py-3 border-b border-[var(--color-glass-border)] bg-[var(--color-bg-1)]">
|
|
<div class="min-w-0">
|
|
<div class="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)]">Playing</div>
|
|
<div class="flex items-baseline gap-2 min-w-0">
|
|
<span class="font-mono text-[var(--color-cyan)] font-semibold shrink-0">YUJ-001</span>
|
|
<span class="text-sm text-[var(--color-fg-dim)] truncate">Ichika Matsumoto</span>
|
|
</div>
|
|
<div class="font-mono text-[11px] text-[var(--color-fg-muted)] truncate mt-0.5">
|
|
<span class="text-[var(--color-violet)]">▶</span> YUJ-001 - Ichika Matsumoto [1080p].fixed.mp4
|
|
<span class="ml-1 opacity-60">· 4.90 GB · 1080p H.264 · with B-frames</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="pill cyan">⚙ TRANSCODE</span>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass">Reveal in Folder</button>
|
|
<button class="p-1 rounded glass">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-black aspect-video grid place-items-center text-[var(--color-fg-muted)] text-xs font-mono">
|
|
[ video element ]
|
|
</div>
|
|
|
|
<div class="px-5 py-2 border-t border-[var(--color-glass-border)] flex items-center gap-2 bg-[var(--color-bg-1)]">
|
|
<span class="label-mono">Variants</span>
|
|
<span class="text-[11px] font-mono text-[var(--color-fg-muted)] italic">no parts on this record</span>
|
|
|
|
<div class="ml-auto relative">
|
|
<button class="part-tab variant active">.fixed ▾</button>
|
|
<div class="absolute right-0 top-full mt-1 glass-strong rounded-lg p-1 w-[260px] shadow-2xl" style="z-index:5;">
|
|
<div class="px-2 pt-1 pb-2 text-[10px] label-mono border-b border-[var(--color-glass-border)]">Switch encode</div>
|
|
<button class="w-full text-left px-2 py-1.5 rounded text-[12px] font-mono hover:bg-[var(--color-glass)] flex items-center justify-between">
|
|
<span>original .mp4</span>
|
|
<span class="text-[10px] text-[var(--color-fg-muted)]">5.25 GB</span>
|
|
</button>
|
|
<button class="w-full text-left px-2 py-1.5 rounded text-[12px] font-mono bg-[var(--color-violet)]/15 text-[var(--color-violet)] flex items-center justify-between">
|
|
<span>.fixed ●</span>
|
|
<span class="text-[10px] opacity-80">5.25 GB</span>
|
|
</button>
|
|
<button class="w-full text-left px-2 py-1.5 rounded text-[12px] font-mono hover:bg-[var(--color-glass)] flex items-center justify-between">
|
|
<span>.nobf</span>
|
|
<span class="text-[10px] text-[var(--color-fg-muted)]">6.96 GB</span>
|
|
</button>
|
|
<button class="w-full text-left px-2 py-1.5 rounded text-[12px] font-mono hover:bg-[var(--color-glass)] flex items-center justify-between">
|
|
<span>.restored</span>
|
|
<span class="text-[10px] text-[var(--color-fg-muted)]">4.02 GB</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="why">Dropdown open: each variant labeled by its suffix, file size shown so you can pick the right one. The bullet (●) marks the currently-selected variant. When a record has no real parts (like YUJ-001), the parts strip shows an italic placeholder rather than empty space.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =========================================================
|
|
Section D: full settings panel composition (refreshed)
|
|
========================================================= -->
|
|
<section class="space-y-3">
|
|
<div class="header">D · Full settings panel · token editor + scaled preview</div>
|
|
<div class="frame">
|
|
<div class="grid grid-cols-[1fr_1.4fr] gap-6">
|
|
<div class="space-y-3">
|
|
<div class="space-y-1">
|
|
<h3 class="text-sm font-medium">Part Suffix Patterns</h3>
|
|
<p class="why">Files matching get grouped as sequential <span class="pill cyan inline-flex">Parts</span>. Files with no match are <span class="pill violet inline-flex">Variants</span> — alternate encodes of the same content. Use <code class="text-[var(--color-cyan)]">{N}</code> for a number, <code class="text-[var(--color-cyan)]">{L}</code> for a single letter. Match is anchored to the end of the filename, after the code.</p>
|
|
</div>
|
|
<ol class="space-y-2">
|
|
<li class="flex items-center gap-2"><input class="input" value="-cd{N}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value=".part{N}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="_{N}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
<li class="flex items-center gap-2"><input class="input" value="_{L}"><button class="icon-btn">↑</button><button class="icon-btn">↓</button><button class="icon-btn">✕</button></li>
|
|
</ol>
|
|
<div class="flex items-center gap-2">
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass">+ Add pattern</button>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg glass text-[var(--color-fg-muted)]">Reset</button>
|
|
<button class="text-xs px-3 py-1.5 rounded-lg bg-[var(--color-cyan)] text-black font-medium ml-auto">Save & Rescan</button>
|
|
</div>
|
|
<div class="text-[11px] font-mono text-[var(--color-fg-muted)] pt-3 border-t border-[var(--color-glass-border)]">
|
|
Advanced: <button class="text-[var(--color-cyan)] hover:underline">Switch to raw regex</button>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="flex items-baseline justify-between">
|
|
<h3 class="text-sm font-medium">Live preview</h3>
|
|
<span class="text-[10px] font-mono text-[var(--color-fg-muted)]">2,047 files · 28 multi-file records</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<input class="input flex-1" placeholder="Search code or filename…">
|
|
<label class="flex items-center gap-1.5 text-[11px] text-[var(--color-fg-muted)] whitespace-nowrap"><input type="checkbox" checked> only multi-file</label>
|
|
</div>
|
|
<div class="bg-black/40 rounded-lg p-2 space-y-1 max-h-[260px] overflow-auto">
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[12px] text-[var(--color-cyan)]">YUJ-001</span>
|
|
<span class="ml-auto pill violet">4 var</span>
|
|
</summary>
|
|
</details>
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[12px] text-[var(--color-cyan)]">IBW-349</span>
|
|
<span class="ml-auto pill cyan">2 part</span>
|
|
</summary>
|
|
</details>
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[12px] text-[var(--color-cyan)]">IBW-341</span>
|
|
<span class="ml-auto pill cyan">2 part</span>
|
|
</summary>
|
|
</details>
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[12px] text-[var(--color-cyan)]">IBW-342</span>
|
|
<span class="ml-auto pill cyan">2 part</span>
|
|
</summary>
|
|
</details>
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-glass)]">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[12px] text-[var(--color-cyan)]">IBW-348</span>
|
|
<span class="ml-auto pill cyan">2 part</span>
|
|
</summary>
|
|
</details>
|
|
<details>
|
|
<summary class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--color-glass)] border border-amber-400/30 bg-amber-400/5">
|
|
<span class="carat text-[var(--color-fg-muted)]">▶</span>
|
|
<span class="font-mono text-[12px] text-[var(--color-cyan)]">SDDE-617</span>
|
|
<span class="ml-auto flex gap-1"><span class="pill cyan">2 part</span><span class="pill violet">1 var</span></span>
|
|
</summary>
|
|
</details>
|
|
<div class="text-[11px] text-[var(--color-fg-muted)] italic px-2 py-1.5">… 22 more</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2 text-[11px] font-mono pt-1">
|
|
<div><span class="text-[var(--color-cyan)]">24</span> part groups</div>
|
|
<div><span class="text-[var(--color-violet)]">18</span> variant groups</div>
|
|
<div><span class="warn">⚠ 3</span> mixed (review)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="why">This is the production shape. Token editor on the left, summary preview on the right. Mixed records flagged amber so they bubble to the user's attention. “Save & Rescan” commits the patterns and triggers a video index refresh.</p>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|