admin
401 lines
24 KiB
HTML
401 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Settings Modal — Spacing Pass (Layout Untouched)</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root {
|
||
--color-bg-0: oklch(0.13 0.025 280);
|
||
--color-bg-1: oklch(0.17 0.04 285);
|
||
--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);
|
||
--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);
|
||
|
||
--spacing-card: 15px;
|
||
--spacing-section: 15px;
|
||
--spacing-card-gap: 9px;
|
||
--spacing-chip: 7px;
|
||
--spacing-label: 7px;
|
||
}
|
||
body {
|
||
background: var(--color-bg-0);
|
||
color: var(--color-fg);
|
||
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||
}
|
||
.glass { background: var(--color-glass); border: 1px solid var(--color-glass-border); }
|
||
.why { font-size: 12px; color: var(--color-fg-muted); }
|
||
.label-mono { font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-muted); }
|
||
|
||
.pg {
|
||
background: oklch(0.10 0.025 280);
|
||
border: 1px solid var(--color-glass-border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.pg-h {
|
||
padding: 12px 16px;
|
||
background: oklch(0.20 0.04 285);
|
||
border-bottom: 1px solid var(--color-glass-border);
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 12px;
|
||
color: var(--color-fg-dim);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.pg-h .tag { color: var(--color-cyan); font-weight: 600; }
|
||
.pg-body { padding: 18px; }
|
||
|
||
/* Modal frame — same as Trash + Settings + Queue panels */
|
||
.modal-frame {
|
||
background: color-mix(in oklch, var(--color-bg-0) 96%, transparent);
|
||
border: 1px solid var(--color-glass-border-strong);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
||
display: flex; flex-direction: column;
|
||
height: 600px; /* mockup-only height for legibility */
|
||
}
|
||
.modal-header {
|
||
padding: 16px 24px;
|
||
border-bottom: 1px solid var(--color-glass-border);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.nav-btn {
|
||
width: 100%;
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: var(--color-fg-dim);
|
||
background: transparent;
|
||
margin-bottom: 2px;
|
||
text-align: left;
|
||
}
|
||
.nav-btn.active {
|
||
background: oklch(0.82 0.16 200 / 0.15);
|
||
color: var(--color-cyan);
|
||
}
|
||
|
||
.stat-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
|
||
.stat-row dt { color: var(--color-fg-dim); font-size: 13px; }
|
||
.stat-row dd { color: var(--color-fg); font-family: ui-monospace, monospace; font-size: 12px; }
|
||
|
||
.pill-sm {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 0 10px; height: 28px;
|
||
border-radius: 6px; font-size: 12px;
|
||
border: 1px solid var(--color-glass-border); color: var(--color-fg-dim);
|
||
background: var(--color-glass);
|
||
}
|
||
.pill-sm.active { background: var(--color-cyan); color: black; border-color: transparent; font-weight: 600; }
|
||
</style>
|
||
</head>
|
||
<body class="space-y-6 max-w-[1600px] mx-auto p-6">
|
||
|
||
<header class="space-y-1">
|
||
<h1 class="text-2xl font-semibold tracking-tight">Settings Modal · Spacing Pass</h1>
|
||
<p class="why max-w-[820px]">
|
||
Modal frame is already on the new shared shell (1400×900, same as Trash + Watch Queue).
|
||
Only the internal Card primitive + section content blocks adjust their padding/margins.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ====================================================================
|
||
Audit
|
||
==================================================================== -->
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<div class="label-mono" style="margin-bottom: 8px;">Spacing changes — Card primitive + nested layouts</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2 text-[12px] font-mono text-[var(--color-fg-dim)]">
|
||
<div>1 · <strong class="text-[var(--color-fg)]">Card</strong> (line 298) padding</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">p-5</code> 20 px → <code class="text-[var(--color-cyan)]">p-card</code> 15 px</div>
|
||
<div>2 · Card title margin</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">mb-3</code> 12 px → <code class="text-[var(--color-cyan)]">mb-label</code> 7 px</div>
|
||
<div>3 · sidebar content scroll-area</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">p-6</code> 24 px → <code class="text-[var(--color-cyan)]">p-card</code> 15 px</div>
|
||
<div>4 · 3-column grid gap</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">gap-4</code> 16 px → <code class="text-[var(--color-cyan)]">gap-card-gap</code> 9 px</div>
|
||
<div>5 · 3-col column inner stacking</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">space-y-4</code> 16 px → <code class="text-[var(--color-cyan)]">gap-card-gap</code> 9 px</div>
|
||
<div>6 · Library section inner stat groups</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">space-y-4</code> 16 px → <code class="text-[var(--color-cyan)]">gap-section</code> 15 px</div>
|
||
<div>7 · StatGroup label margin</div>
|
||
<div><code class="text-[var(--color-fg-muted)]">mb-1.5</code> 6 px → <code class="text-[var(--color-cyan)]">mb-label</code> 7 px</div>
|
||
</div>
|
||
<p class="why mt-3">
|
||
<strong>Untouched:</strong> modal frame (already 1400×900 shared shell), header padding, sidebar nav width 220 px, nav button <code class="text-[var(--color-cyan)]">px-3 py-2</code> + <code class="text-[var(--color-cyan)]">mb-0.5</code>, StatGroup dl <code class="text-[var(--color-cyan)]">space-y-1.5</code> + <code class="text-[var(--color-cyan)]">pt-1.5</code>.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- ====================================================================
|
||
BEFORE — Sidebar layout
|
||
==================================================================== -->
|
||
<div class="pg">
|
||
<div class="pg-h"><span><span class="tag">BEFORE</span> · Sidebar layout</span><span>Card p-5 · mb-3 · content p-6</span></div>
|
||
<div class="pg-body">
|
||
<div class="modal-frame" style="max-width: 1100px; margin: 0 auto;">
|
||
<div class="modal-header">
|
||
<div style="display:flex; align-items:center; gap: 8px;">
|
||
<span style="color: var(--color-cyan); font-size: 18px;">⚙</span>
|
||
<h2 class="text-xl font-semibold tracking-tight">Settings</h2>
|
||
</div>
|
||
<span style="width: 30px; height: 30px; border-radius: 6px; display:grid; place-items:center; color: var(--color-fg-dim);">✕</span>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0;">
|
||
<nav style="padding: 12px; border-right: 1px solid var(--color-glass-border); background: oklch(0.13 0.025 280 / 0.5); overflow-y: auto;">
|
||
<button class="nav-btn"><span>⊟</span><span>General</span></button>
|
||
<button class="nav-btn active"><span>🎨</span><span>Theme</span></button>
|
||
<button class="nav-btn"><span>▦</span><span>Display</span></button>
|
||
<button class="nav-btn"><span>🗑</span><span>Trash</span></button>
|
||
<button class="nav-btn"><span>▶</span><span>Video Library</span></button>
|
||
<button class="nav-btn"><span>⚒</span><span>Maintenance</span></button>
|
||
</nav>
|
||
<!-- Content area: p-6 (24px) -->
|
||
<div style="overflow-y: auto; padding: 24px;">
|
||
<!-- Card: p-5, header mb-3 -->
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Theme</h3>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||
<div>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Accent · primary</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-cyan);"></span>
|
||
<span class="pill-sm" style="font-family: ui-monospace, monospace;">#8edcff</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Accent · secondary</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-violet);"></span>
|
||
<span class="pill-sm" style="font-family: ui-monospace, monospace;">#bd8eff</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================================================================
|
||
AFTER — Sidebar layout
|
||
==================================================================== -->
|
||
<div class="pg">
|
||
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">AFTER</span> · Sidebar layout</span><span>Card p-card · mb-label · content p-card</span></div>
|
||
<div class="pg-body">
|
||
<div class="modal-frame" style="max-width: 1100px; margin: 0 auto;">
|
||
<div class="modal-header">
|
||
<div style="display:flex; align-items:center; gap: 8px;">
|
||
<span style="color: var(--color-cyan); font-size: 18px;">⚙</span>
|
||
<h2 class="text-xl font-semibold tracking-tight">Settings</h2>
|
||
</div>
|
||
<span style="width: 30px; height: 30px; border-radius: 6px; display:grid; place-items:center; color: var(--color-fg-dim);">✕</span>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0;">
|
||
<nav style="padding: 12px; border-right: 1px solid var(--color-glass-border); background: oklch(0.13 0.025 280 / 0.5); overflow-y: auto;">
|
||
<button class="nav-btn"><span>⊟</span><span>General</span></button>
|
||
<button class="nav-btn active"><span>🎨</span><span>Theme</span></button>
|
||
<button class="nav-btn"><span>▦</span><span>Display</span></button>
|
||
<button class="nav-btn"><span>🗑</span><span>Trash</span></button>
|
||
<button class="nav-btn"><span>▶</span><span>Video Library</span></button>
|
||
<button class="nav-btn"><span>⚒</span><span>Maintenance</span></button>
|
||
</nav>
|
||
<!-- Content area: p-card (15px) -->
|
||
<div style="overflow-y: auto; padding: var(--spacing-card);">
|
||
<!-- Card: p-card, header mb-label -->
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Theme</h3>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||
<div>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Accent · primary</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-cyan);"></span>
|
||
<span class="pill-sm" style="font-family: ui-monospace, monospace;">#8edcff</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Accent · secondary</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-violet);"></span>
|
||
<span class="pill-sm" style="font-family: ui-monospace, monospace;">#bd8eff</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================================================================
|
||
BEFORE — Three-column layout
|
||
==================================================================== -->
|
||
<div class="pg">
|
||
<div class="pg-h"><span><span class="tag">BEFORE</span> · Three-column layout</span><span>p-6 · gap-4 · column space-y-4</span></div>
|
||
<div class="pg-body">
|
||
<div class="modal-frame" style="height: 580px;">
|
||
<div class="modal-header">
|
||
<div style="display:flex; align-items:center; gap: 8px;">
|
||
<span style="color: var(--color-cyan); font-size: 18px;">⚙</span>
|
||
<h2 class="text-xl font-semibold tracking-tight">Settings</h2>
|
||
</div>
|
||
<span style="width: 30px; height: 30px; border-radius: 6px; display:grid; place-items:center; color: var(--color-fg-dim);">✕</span>
|
||
</div>
|
||
<div style="overflow-y: auto; padding: 24px;">
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start;">
|
||
<!-- Column 1 -->
|
||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Defaults</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Default sort</div>
|
||
<div style="display:flex; gap: 6px;"><span class="pill-sm active">Newest</span><span class="pill-sm">Title</span></div>
|
||
</section>
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Theme</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Accent</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-cyan);"></span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- Column 2 -->
|
||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Trash</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Retention days</div>
|
||
<div style="display:flex; gap: 6px;"><span class="pill-sm">7</span><span class="pill-sm active">30</span><span class="pill-sm">∞</span></div>
|
||
</section>
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Library</h3>
|
||
<!-- LibrarySection inner: space-y-4 (16px) between StatGroups -->
|
||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||
<div>
|
||
<!-- StatGroup label: mb-1.5 (6px) -->
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-cyan); margin-bottom: 6px;">Covers</div>
|
||
<dl style="border-top: 1px solid var(--color-glass-border); padding-top: 6px; display: flex; flex-direction: column; gap: 6px;">
|
||
<div class="stat-row"><dt>Top-level</dt><dd>1,247</dd></div>
|
||
<div class="stat-row"><dt>Attached</dt><dd>328</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div>
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-cyan); margin-bottom: 6px;">Entities</div>
|
||
<dl style="border-top: 1px solid var(--color-glass-border); padding-top: 6px; display: flex; flex-direction: column; gap: 6px;">
|
||
<div class="stat-row"><dt>Actresses</dt><dd>324</dd></div>
|
||
<div class="stat-row"><dt>Studios</dt><dd>52</dd></div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- Column 3 -->
|
||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Video Library</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Library path</div>
|
||
<div class="glass rounded-lg" style="padding: 8px 10px; font-size: 12px; font-family: monospace; color: var(--color-fg-dim);">D:\JAV</div>
|
||
</section>
|
||
<section class="glass rounded-2xl" style="padding: 20px;">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: 12px;">Maintenance</h3>
|
||
<div style="display: flex; gap: 6px;"><span class="pill-sm">↻ Re-scan</span><span class="pill-sm">⌗ Backfill phash</span></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================================================================
|
||
AFTER — Three-column layout
|
||
==================================================================== -->
|
||
<div class="pg">
|
||
<div class="pg-h"><span><span class="tag" style="color: var(--color-mint);">AFTER</span> · Three-column layout</span><span>p-card · gap-card-gap · column gap-card-gap</span></div>
|
||
<div class="pg-body">
|
||
<div class="modal-frame" style="height: 580px;">
|
||
<div class="modal-header">
|
||
<div style="display:flex; align-items:center; gap: 8px;">
|
||
<span style="color: var(--color-cyan); font-size: 18px;">⚙</span>
|
||
<h2 class="text-xl font-semibold tracking-tight">Settings</h2>
|
||
</div>
|
||
<span style="width: 30px; height: 30px; border-radius: 6px; display:grid; place-items:center; color: var(--color-fg-dim);">✕</span>
|
||
</div>
|
||
<div style="overflow-y: auto; padding: var(--spacing-card);">
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-card-gap); align-items: start;">
|
||
<!-- Column 1 -->
|
||
<div style="display: flex; flex-direction: column; gap: var(--spacing-card-gap);">
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Defaults</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Default sort</div>
|
||
<div style="display:flex; gap: 6px;"><span class="pill-sm active">Newest</span><span class="pill-sm">Title</span></div>
|
||
</section>
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Theme</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Accent</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<span style="width: 28px; height: 28px; border-radius: 6px; background: var(--color-cyan);"></span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- Column 2 -->
|
||
<div style="display: flex; flex-direction: column; gap: var(--spacing-card-gap);">
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Trash</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Retention days</div>
|
||
<div style="display:flex; gap: 6px;"><span class="pill-sm">7</span><span class="pill-sm active">30</span><span class="pill-sm">∞</span></div>
|
||
</section>
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Library</h3>
|
||
<div style="display: flex; flex-direction: column; gap: var(--spacing-section);">
|
||
<div>
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-cyan); margin-bottom: var(--spacing-label);">Covers</div>
|
||
<dl style="border-top: 1px solid var(--color-glass-border); padding-top: 6px; display: flex; flex-direction: column; gap: 6px;">
|
||
<div class="stat-row"><dt>Top-level</dt><dd>1,247</dd></div>
|
||
<div class="stat-row"><dt>Attached</dt><dd>328</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div>
|
||
<div style="font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-cyan); margin-bottom: var(--spacing-label);">Entities</div>
|
||
<dl style="border-top: 1px solid var(--color-glass-border); padding-top: 6px; display: flex; flex-direction: column; gap: 6px;">
|
||
<div class="stat-row"><dt>Actresses</dt><dd>324</dd></div>
|
||
<div class="stat-row"><dt>Studios</dt><dd>52</dd></div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- Column 3 -->
|
||
<div style="display: flex; flex-direction: column; gap: var(--spacing-card-gap);">
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Video Library</h3>
|
||
<div class="label-mono" style="margin-bottom: 6px;">Library path</div>
|
||
<div class="glass rounded-lg" style="padding: 8px 10px; font-size: 12px; font-family: monospace; color: var(--color-fg-dim);">D:\JAV</div>
|
||
</section>
|
||
<section class="glass rounded-2xl" style="padding: var(--spacing-card);">
|
||
<h3 style="font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-fg-muted); margin-bottom: var(--spacing-label);">Maintenance</h3>
|
||
<div style="display: flex; gap: 6px;"><span class="pill-sm">↻ Re-scan</span><span class="pill-sm">⌗ Backfill phash</span></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="text-[11px] text-[var(--color-fg-muted)]">
|
||
Tell me <strong>go</strong> to apply, or point at anything you want different.
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|