admin
508 lines
24 KiB
HTML
508 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Pinkudex Video Page Redesign Options</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0d0b18;
|
||
--panel: #171827;
|
||
--panel-2: #1d2030;
|
||
--line: #38384c;
|
||
--muted: #8a869b;
|
||
--text: #eceaf5;
|
||
--cyan: #00d9f6;
|
||
--green: #43d488;
|
||
--violet: #a774f5;
|
||
--red: #ff5d64;
|
||
--amber: #ffbd5a;
|
||
--radius: 14px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
background: radial-gradient(circle at 20% 0%, #21172f 0, transparent 34%), var(--bg);
|
||
color: var(--text);
|
||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
.topbar {
|
||
height: 58px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28px;
|
||
padding: 0 24px;
|
||
background: rgba(9, 9, 18, 0.82);
|
||
border-bottom: 1px solid #29263a;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 4;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.brand { color: var(--cyan); font-weight: 700; font-size: 18px; }
|
||
.nav { display: flex; gap: 26px; color: #aaa6b8; font-size: 14px; }
|
||
.search { margin-left: auto; width: 300px; height: 36px; border: 1px solid #343348; border-radius: 10px; color: #777386; display: flex; align-items: center; padding: 0 14px; }
|
||
main { padding: 28px 24px 60px; }
|
||
h1 { margin: 0 0 8px; color: var(--cyan); font-size: 14px; letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||
h2 { margin: 0 0 12px; font-size: 18px; }
|
||
h3 { margin: 0 0 10px; font-size: 13px; color: #aaa6b8; text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||
.intro {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
align-items: end;
|
||
margin-bottom: 22px;
|
||
}
|
||
.intro p { margin: 0; max-width: 760px; color: #aaa6b8; line-height: 1.45; }
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 22px;
|
||
}
|
||
.option {
|
||
border: 1px solid var(--line);
|
||
background: rgba(23, 24, 39, .78);
|
||
border-radius: 18px;
|
||
padding: 16px;
|
||
box-shadow: 0 16px 40px rgba(0,0,0,.22);
|
||
}
|
||
.option-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
align-items: start;
|
||
margin-bottom: 14px;
|
||
}
|
||
.option-head p { margin: 4px 0 0; color: #9894a8; font-size: 13px; line-height: 1.35; }
|
||
.pick { color: var(--cyan); border: 1px solid rgba(0,217,246,.35); padding: 4px 9px; border-radius: 999px; font: 11px ui-monospace, monospace; white-space: nowrap; }
|
||
.mock {
|
||
border: 1px solid #333246;
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
background: #11111e;
|
||
min-height: 420px;
|
||
}
|
||
.bar {
|
||
height: 38px;
|
||
border-bottom: 1px solid #2f2e40;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 14px;
|
||
color: #9d98aa;
|
||
font-size: 12px;
|
||
gap: 8px;
|
||
}
|
||
.btn, .pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 26px;
|
||
padding: 0 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid #3b3a50;
|
||
color: #c9c5d4;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.pill { border-radius: 999px; height: 24px; font-size: 11px; }
|
||
.cyan { color: var(--cyan); border-color: rgba(0,217,246,.45); background: rgba(0,217,246,.09); }
|
||
.green { color: var(--green); border-color: rgba(67,212,136,.38); background: rgba(67,212,136,.08); }
|
||
.violet { color: var(--violet); border-color: rgba(167,116,245,.38); background: rgba(167,116,245,.10); }
|
||
.red { color: var(--red); border-color: rgba(255,93,100,.40); background: rgba(255,93,100,.08); }
|
||
.amber { color: var(--amber); border-color: rgba(255,189,90,.35); background: rgba(255,189,90,.08); }
|
||
.cover {
|
||
background: #d6d6d8;
|
||
color: #aaa;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 52px;
|
||
letter-spacing: .05em;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cover:after {
|
||
content: "▶";
|
||
position: absolute;
|
||
font-size: 28px;
|
||
color: white;
|
||
width: 64px;
|
||
height: 46px;
|
||
border-radius: 8px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: rgba(20,20,26,.78);
|
||
box-shadow: 0 8px 20px rgba(0,0,0,.35);
|
||
}
|
||
.panel { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(30,31,45,.95), rgba(23,36,44,.88)); padding: 14px; }
|
||
.meta-line { display: flex; flex-wrap: wrap; gap: 8px; color: #dcd8e8; font: 12px ui-monospace, monospace; }
|
||
.label { color: #777386; text-transform: uppercase; font: 10px ui-monospace, monospace; letter-spacing: .1em; }
|
||
.stars { color: var(--cyan); letter-spacing: 2px; }
|
||
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #333246; padding: 0 12px; }
|
||
.tab { padding: 10px 10px; color: #8e899b; font-size: 12px; border-bottom: 2px solid transparent; }
|
||
.tab.active { color: var(--cyan); border-color: var(--cyan); }
|
||
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.field { min-height: 46px; border: 1px solid #333246; border-radius: 9px; padding: 8px; background: rgba(255,255,255,.025); }
|
||
.field strong { display: block; margin-top: 4px; font-size: 13px; }
|
||
.rail { width: 86px; border-right: 1px solid #302f42; background: #121320; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
|
||
.thumb { height: 54px; border-radius: 8px; background: #d4d4d6; color: #aaa; display: grid; place-items: center; font-size: 12px; position: relative; }
|
||
.thumb.active { outline: 2px solid var(--cyan); }
|
||
.split-a { display: grid; grid-template-columns: 52% 48%; min-height: 382px; }
|
||
.split-a .cover { min-height: 342px; }
|
||
.split-a .right { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
|
||
.summary { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
||
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
|
||
.split-b { display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: 382px; }
|
||
.split-b .stage { padding: 12px; }
|
||
.split-b .cover { height: 260px; border-radius: 10px; }
|
||
.side { border-left: 1px solid #302f42; padding: 14px; background: rgba(255,255,255,.025); }
|
||
.hero { min-height: 382px; display: grid; grid-template-rows: 250px auto; }
|
||
.hero .cover { font-size: 44px; }
|
||
.hero .dock { padding: 14px; display: grid; gap: 10px; }
|
||
.stack { display: grid; grid-template-columns: 92px 1fr; min-height: 382px; }
|
||
.stack .content { padding: 12px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
|
||
.stack .cover { min-height: 236px; border-radius: 10px; }
|
||
.dense { min-height: 382px; display: grid; grid-template-columns: 46% 54%; }
|
||
.dense .cover { min-height: 382px; }
|
||
.dense .sheet { padding: 14px; display: grid; gap: 10px; align-content: start; }
|
||
.netflix {
|
||
min-height: 520px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(90deg, rgba(8,8,15,.96) 0%, rgba(8,8,15,.82) 32%, rgba(8,8,15,.28) 62%, rgba(8,8,15,.84) 100%),
|
||
linear-gradient(0deg, #11111e 0%, rgba(17,17,30,0) 42%),
|
||
#d6d6d8;
|
||
}
|
||
.netflix .poster-text {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
color: rgba(20,20,25,.20);
|
||
font-size: 82px;
|
||
letter-spacing: .05em;
|
||
transform: translateX(12%);
|
||
}
|
||
.netflix .hero-copy {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: min(560px, 52%);
|
||
padding: 54px 0 0 42px;
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
.netflix .hero-title {
|
||
font-size: 46px;
|
||
line-height: .95;
|
||
letter-spacing: .04em;
|
||
color: var(--cyan);
|
||
font-weight: 800;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
}
|
||
.netflix .hero-subtitle {
|
||
font-size: 22px;
|
||
color: #d8d4e4;
|
||
font-style: italic;
|
||
}
|
||
.netflix .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
|
||
.netflix .play {
|
||
height: 38px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: var(--text);
|
||
color: #0b0b12;
|
||
font-weight: 800;
|
||
padding: 0 18px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.netflix .ghost {
|
||
height: 38px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255,255,255,.25);
|
||
background: rgba(255,255,255,.13);
|
||
color: var(--text);
|
||
padding: 0 14px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 650;
|
||
}
|
||
.netflix .hero-facts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
max-width: 720px;
|
||
color: #d8d4e4;
|
||
font: 13px ui-monospace, monospace;
|
||
}
|
||
.netflix .bottom-shelf {
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: 24px;
|
||
right: 24px;
|
||
bottom: 20px;
|
||
display: grid;
|
||
grid-template-columns: 1.2fr .8fr .8fr;
|
||
gap: 12px;
|
||
}
|
||
.netflix-card {
|
||
border: 1px solid rgba(255,255,255,.14);
|
||
background: rgba(18,19,32,.72);
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
backdrop-filter: blur(10px);
|
||
min-height: 72px;
|
||
}
|
||
.note-list {
|
||
margin: 26px 0 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
.note {
|
||
border: 1px solid #343348;
|
||
border-radius: 12px;
|
||
background: rgba(255,255,255,.035);
|
||
padding: 12px;
|
||
color: #aaa6b8;
|
||
font-size: 13px;
|
||
line-height: 1.42;
|
||
}
|
||
.note strong { color: var(--text); display: block; margin-bottom: 4px; }
|
||
@media (max-width: 1100px) {
|
||
.note-list { grid-template-columns: 1fr; }
|
||
.search { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="topbar">
|
||
<div class="brand">◎ Pinkudex</div>
|
||
<div class="nav"><span>Library</span><span>Actress</span><span>Database</span><span>Categories</span><span>Tags</span><span>Collection</span></div>
|
||
<div class="search">⌕ Search Code, Title, Notes...</div>
|
||
</div>
|
||
|
||
<main>
|
||
<div class="intro">
|
||
<div>
|
||
<h2>Video Detail Page Redesign Mockups</h2>
|
||
<p>Five visual directions using the same content: cover, play, metadata, tags, collections, actresses, attached images, and edit/reveal/delete actions.</p>
|
||
</div>
|
||
<span class="pick">compare options</span>
|
||
</div>
|
||
|
||
<section class="grid">
|
||
<article class="option">
|
||
<div class="option-head">
|
||
<div><h2>Option A: Media First</h2><p>Keep the current two-column shape, but make metadata denser and consolidate the status pills into one header block.</p></div>
|
||
<span class="pick">closest to current</span>
|
||
</div>
|
||
<div class="mock">
|
||
<div class="bar">← Back to library <span style="margin-left:auto" class="btn">⤴ Reveal</span><span class="btn red">Delete</span></div>
|
||
<div class="split-a">
|
||
<div style="padding:14px">
|
||
<div class="cover">798 × 537</div>
|
||
<div class="panel" style="margin-top:10px">
|
||
<div class="label">Back covers / extras</div>
|
||
<div style="margin-top:10px; border:1px dashed #49475c; border-radius:10px; height:54px; display:grid; place-items:center; color:#817b90; font-size:12px;">Drop extras here or add</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div>
|
||
<h1>YUJ-001</h1>
|
||
<div style="font-size:18px; color:#aaa6b8; font-style:italic">Untitled</div>
|
||
</div>
|
||
<div class="meta-line"><span class="stars">★★★★★</span><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span></div>
|
||
<div class="panel summary">
|
||
<div class="meta-line"><span class="label">Cover</span> 800x538 · 170 KB · Imported 4/29/2026</div>
|
||
<div class="meta-line"><span class="label">Video</span> 1920x1080 · H.264 · 5.7 Mbps · 4.90 GB · 1:56:55</div>
|
||
</div>
|
||
<div class="mini-grid">
|
||
<div class="field"><span class="label">Actresses</span><strong><span class="pill violet">Ichika Matsumoto</span></strong></div>
|
||
<div class="field"><span class="label">Collections</span><strong><span class="pill cyan">Sugar & Spice</span></strong></div>
|
||
<div class="field"><span class="label">Tags</span><strong style="color:#777386">Add tag...</strong></div>
|
||
<div class="field"><span class="label">Notes</span><strong style="color:#777386">Empty</strong></div>
|
||
</div>
|
||
<div class="action-row"><span class="btn">✎ Edit metadata</span><span class="btn">⇩ Import .nfo</span><span class="btn">＋ Add extra</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="option">
|
||
<div class="option-head">
|
||
<div><h2>Option B: Inspector Sidebar</h2><p>The image/player gets most of the width; a right inspector groups status, file facts, and relationship editing.</p></div>
|
||
<span class="pick">best for viewing</span>
|
||
</div>
|
||
<div class="mock">
|
||
<div class="bar">← Library <span style="margin-left:auto" class="btn">Prev</span><span class="btn">Shuffle</span><span class="btn">Next</span></div>
|
||
<div class="split-b">
|
||
<div class="stage">
|
||
<div class="cover">798 × 537</div>
|
||
<div style="display:flex; gap:8px; margin-top:10px">
|
||
<span class="btn cyan">▶ Play 2 parts</span><span class="btn">＋ Add extra</span><span class="btn">⤴ Reveal file</span>
|
||
</div>
|
||
<div class="panel" style="margin-top:10px">
|
||
<div class="label">Extras</div>
|
||
<div style="display:flex; gap:8px; margin-top:8px"><div class="thumb">Back</div><div class="thumb">Still</div><div class="thumb">＋</div></div>
|
||
</div>
|
||
</div>
|
||
<aside class="side">
|
||
<h1>YUJ-001</h1>
|
||
<div style="color:#aaa6b8; font-style:italic; margin-bottom:12px">Untitled</div>
|
||
<div class="meta-line" style="margin-bottom:12px"><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span></div>
|
||
<div class="mini-grid" style="grid-template-columns:1fr">
|
||
<div class="field"><span class="label">Video file</span><strong>1920x1080 · H.264</strong><div class="meta-line">5.7 Mbps · 4.90 GB · 1:56:55</div></div>
|
||
<div class="field"><span class="label">Cover file</span><strong>800x538 · 170 KB</strong></div>
|
||
<div class="field"><span class="label">People</span><strong><span class="pill violet">Ichika Matsumoto</span></strong></div>
|
||
<div class="field"><span class="label">Tags & Collections</span><strong><span class="pill cyan">Sugar & Spice</span></strong></div>
|
||
</div>
|
||
<div class="action-row"><span class="btn">✎ Edit</span><span class="btn red">Delete</span></div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="option">
|
||
<div class="option-head">
|
||
<div><h2>Option C: Tabbed Details</h2><p>Reduce vertical clutter by putting metadata, people, tags, and extras under tabs below a single strong media header.</p></div>
|
||
<span class="pick">least busy</span>
|
||
</div>
|
||
<div class="mock hero">
|
||
<div class="cover">798 × 537</div>
|
||
<div class="dock">
|
||
<div style="display:flex; align-items:center; gap:12px">
|
||
<div><h1>YUJ-001</h1><div style="color:#aaa6b8; font-style:italic">Untitled</div></div>
|
||
<div style="margin-left:auto" class="meta-line"><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span></div>
|
||
</div>
|
||
<div class="tabs"><span class="tab active">Summary</span><span class="tab">People</span><span class="tab">Tags</span><span class="tab">Extras</span><span class="tab">Files</span></div>
|
||
<div class="mini-grid">
|
||
<div class="field"><span class="label">Video</span><strong>1920x1080 · H.264 · 5.7 Mbps</strong></div>
|
||
<div class="field"><span class="label">Length / Size</span><strong>1:56:55 · 4.90 GB</strong></div>
|
||
<div class="field"><span class="label">Cover</span><strong>800x538 · 170 KB</strong></div>
|
||
<div class="field"><span class="label">Collection</span><strong><span class="pill cyan">Sugar & Spice</span></strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="option">
|
||
<div class="option-head">
|
||
<div><h2>Option D: Parts Rail</h2><p>Designed around multi-part videos: parts, cover/back/stills, and file info live in a left rail while the main content stays focused.</p></div>
|
||
<span class="pick">best for multipart</span>
|
||
</div>
|
||
<div class="mock stack">
|
||
<div class="rail">
|
||
<div class="label">Parts</div>
|
||
<div class="thumb active">1<br>1080p</div>
|
||
<div class="thumb">2<br>1080p</div>
|
||
<div class="label" style="margin-top:8px">Images</div>
|
||
<div class="thumb">Cover</div>
|
||
<div class="thumb">＋</div>
|
||
</div>
|
||
<div class="content">
|
||
<div style="display:flex; align-items:start; gap:12px">
|
||
<div><h1>YUJ-001</h1><div style="font-size:16px; color:#aaa6b8; font-style:italic">Untitled</div></div>
|
||
<div style="margin-left:auto; display:flex; gap:7px"><span class="btn">✎ Edit</span><span class="btn red">Delete</span></div>
|
||
</div>
|
||
<div class="cover">798 × 537</div>
|
||
<div class="panel">
|
||
<div class="meta-line"><span class="label">Selected part</span> 1920x1080 · H.264 · 5.7 Mbps · 4.90 GB · 1:56:55</div>
|
||
<div class="meta-line" style="margin-top:8px"><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span><span class="pill amber">2 parts</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="option">
|
||
<div class="option-head">
|
||
<div><h2>Option E: Compact Workbench</h2><p>A denser editing layout: everything important is visible without scrolling, useful when tagging or cleaning many covers.</p></div>
|
||
<span class="pick">best for editing</span>
|
||
</div>
|
||
<div class="mock dense">
|
||
<div class="cover">798 × 537</div>
|
||
<div class="sheet">
|
||
<div style="display:flex; justify-content:space-between; gap:10px">
|
||
<div><h1>YUJ-001</h1><div style="color:#aaa6b8; font-style:italic">Untitled</div></div>
|
||
<span class="btn red">Delete</span>
|
||
</div>
|
||
<div class="meta-line"><span class="stars">★★★★★</span><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span></div>
|
||
<div class="field">
|
||
<span class="label">Cover file</span>
|
||
<strong>800x538 · 170 KB</strong>
|
||
</div>
|
||
<div class="mini-grid">
|
||
<div class="field"><span class="label">Video</span><strong>1920x1080 · H.264</strong></div>
|
||
<div class="field"><span class="label">Bitrate</span><strong>5.7 Mbps</strong></div>
|
||
<div class="field"><span class="label">File size</span><strong>4.90 GB</strong></div>
|
||
<div class="field"><span class="label">Length</span><strong>1:56:55</strong></div>
|
||
</div>
|
||
<div class="field"><span class="label">Actresses</span><strong><span class="pill violet">Ichika Matsumoto</span> <span class="pill">＋ Add</span></strong></div>
|
||
<div class="field"><span class="label">Tags</span><strong><span class="pill">＋ Add tag</span></strong></div>
|
||
<div class="field"><span class="label">Collections</span><strong><span class="pill cyan">Sugar & Spice</span> <span class="pill">＋ Add</span></strong></div>
|
||
<div class="action-row"><span class="btn cyan">▶ Play</span><span class="btn">✎ Edit metadata</span><span class="btn">⇩ Import .nfo</span></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="option">
|
||
<div class="option-head">
|
||
<div><h2>Option F: Netflix Hero</h2><p>A more cinematic page: oversized media backdrop, direct play as the first action, and metadata folded into readable hero facts.</p></div>
|
||
<span class="pick">most immersive</span>
|
||
</div>
|
||
<div class="mock netflix">
|
||
<div class="poster-text">798 × 537</div>
|
||
<div class="hero-copy">
|
||
<div>
|
||
<div class="label">Now in library</div>
|
||
<div class="hero-title">YUJ-001</div>
|
||
<div class="hero-subtitle">Untitled</div>
|
||
</div>
|
||
<div class="hero-facts">
|
||
<span>1920x1080</span><span>·</span><span>H.264</span><span>·</span><span>5.7 Mbps</span><span>·</span><span>4.90 GB</span><span>·</span><span>1:56:55</span>
|
||
</div>
|
||
<div class="meta-line"><span class="stars">★★★★★</span><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span><span class="pill amber">2 parts</span></div>
|
||
<div class="hero-actions">
|
||
<span class="play">▶ Play</span>
|
||
<span class="ghost">＋ Add tag</span>
|
||
<span class="ghost">✎ Edit</span>
|
||
<span class="ghost">⤴ Reveal</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-shelf">
|
||
<div class="netflix-card">
|
||
<div class="label">Actresses</div>
|
||
<div style="margin-top:8px"><span class="pill violet">Ichika Matsumoto</span></div>
|
||
</div>
|
||
<div class="netflix-card">
|
||
<div class="label">Collection</div>
|
||
<div style="margin-top:8px"><span class="pill cyan">Sugar & Spice</span></div>
|
||
</div>
|
||
<div class="netflix-card">
|
||
<div class="label">Cover file</div>
|
||
<div class="meta-line" style="margin-top:8px">800x538 · 170 KB</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="note-list">
|
||
<div class="note"><strong>1. Put video facts in their own file block.</strong>Cover resolution and video resolution currently sit close together. Separate “Cover file” from “Video file” so 800x538 and 1920x1080 do not visually compete.</div>
|
||
<div class="note"><strong>2. Consolidate VIP/Favorite/Watched/Owned.</strong>They read like separate widgets today. Make them a single status row with equal sizing and clearer active/inactive contrast.</div>
|
||
<div class="note"><strong>3. Move destructive actions away from metadata.</strong>Delete is visually close to identity info. Put it in an action cluster or overflow menu to reduce accidental attention.</div>
|
||
<div class="note"><strong>4. Make Play the primary page action.</strong>The play button on the cover is good, but add a clear “Play 2 parts” action near metadata for keyboard/mouse scanning.</div>
|
||
<div class="note"><strong>5. Use tabs if the page starts feeling administrative.</strong>Summary, People, Tags, Extras, Files lets the page breathe while keeping all editing reachable.</div>
|
||
<div class="note"><strong>6. Show per-part metadata where parts are selected.</strong>For multi-part videos, show 1080p/H.264 on each part chip instead of one ambiguous summary.</div>
|
||
<div class="note"><strong>7. Combine tags and collections into one relationship editor.</strong>Both are library organization tools, so one “Organize” panel could reduce card stacking.</div>
|
||
<div class="note"><strong>8. Make the extras area a media strip.</strong>Back covers/extras currently consume a full panel even when empty. A compact strip keeps the main page lighter.</div>
|
||
<div class="note"><strong>9. Keep editing controls closer to fields.</strong>Edit metadata, import NFO, add tag, and add collection can sit near their target sections instead of the bottom-left corner.</div>
|
||
<div class="note"><strong>10. Add a file health badge later.</strong>Once metadata exists, a small “Direct Play”, “Large file”, or “Unknown metadata” badge can help diagnose playback without clutter.</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|