admin/pinkudex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fb540260f237391feb782f2da9cf7f564b08986b
pinkudex/mockups/netflix-hero-designs.html
T
admin 7e2c2ff89c Initial commit
2026-05-26 22:46:00 +02:00

409 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pinkudex Netflix Hero Concepts</title>
<style>
:root {
--bg: #090913;
--panel: rgba(18, 19, 31, .74);
--text: #f4f1fb;
--muted: #a6a0b4;
--line: rgba(255,255,255,.15);
--cyan: #00d9f6;
--green: #43d488;
--violet: #a774f5;
--red: #ff5d64;
--amber: #ffbd5a;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: radial-gradient(circle at 15% 0%, #241832 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(8, 8, 15, .86);
border-bottom: 1px solid #272436;
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(14px);
}
.brand { color: var(--cyan); font-weight: 800; font-size: 18px; }
.nav { display: flex; gap: 24px; color: #aaa5b8; font-size: 14px; }
.search { margin-left: auto; width: 320px; height: 36px; border: 1px solid #343348; border-radius: 10px; color: #777386; display: flex; align-items: center; padding: 0 14px; }
main { padding: 28px 24px 70px; }
.intro { margin-bottom: 22px; }
.intro h1 { margin: 0 0 8px; font-size: 24px; }
.intro p { margin: 0; color: var(--muted); max-width: 850px; line-height: 1.45; }
.concepts { display: grid; gap: 28px; }
.concept {
border: 1px solid rgba(255,255,255,.16);
border-radius: 18px;
overflow: hidden;
background: #10101d;
box-shadow: 0 18px 48px rgba(0,0,0,.32);
}
.concept-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border-bottom: 1px solid rgba(255,255,255,.11);
background: rgba(255,255,255,.035);
}
.concept-head h2 { margin: 0 0 4px; font-size: 18px; }
.concept-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.38; }
.tag {
flex: 0 0 auto;
border: 1px solid rgba(0,217,246,.35);
color: var(--cyan);
padding: 4px 10px;
border-radius: 999px;
font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.hero {
min-height: 560px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 72% 42%, rgba(0,217,246,.10), transparent 34%),
linear-gradient(135deg, #11111e, #191625);
}
.art {
position: absolute;
z-index: 0;
width: min(800px, calc(100% - 48px));
aspect-ratio: 800 / 538;
max-height: 538px;
border-radius: 16px;
background: #d7d7da;
border: 1px solid rgba(255,255,255,.20);
box-shadow: 0 28px 80px rgba(0,0,0,.45);
overflow: hidden;
}
.art:before {
content: "798 × 537";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(20, 20, 25, .22);
font-size: clamp(42px, 6vw, 96px);
letter-spacing: .05em;
font-weight: 300;
}
.art:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.hero:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.copy {
position: relative;
z-index: 1;
display: grid;
gap: 14px;
max-width: 620px;
}
.eyebrow {
color: var(--muted);
text-transform: uppercase;
letter-spacing: .14em;
font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.code {
color: var(--cyan);
font: 800 clamp(34px, 5vw, 68px) / .92 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .03em;
}
.title { color: #ded9ea; font-size: 22px; font-style: italic; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; color: #e8e4f2; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.20);
background: rgba(255,255,255,.08);
font-size: 11px;
color: #ddd8e8;
}
.pill.cyan { color: var(--cyan); border-color: rgba(0,217,246,.42); background: rgba(0,217,246,.10); }
.pill.green { color: var(--green); border-color: rgba(67,212,136,.38); background: rgba(67,212,136,.10); }
.pill.violet { color: var(--violet); border-color: rgba(167,116,245,.40); background: rgba(167,116,245,.12); }
.pill.amber { color: var(--amber); border-color: rgba(255,189,90,.38); background: rgba(255,189,90,.11); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.play, .ghost, .danger {
height: 40px;
border-radius: 8px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 750;
font-size: 14px;
}
.play { background: var(--text); color: #0a0a12; }
.ghost { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); color: var(--text); }
.danger { background: rgba(255,93,100,.10); border: 1px solid rgba(255,93,100,.38); color: var(--red); }
.shelf {
position: relative;
z-index: 1;
display: grid;
gap: 12px;
}
.card {
border: 1px solid rgba(255,255,255,.14);
background: rgba(18, 19, 31, .70);
border-radius: 12px;
padding: 12px;
backdrop-filter: blur(12px);
min-height: 76px;
}
.label { color: #8d879c; text-transform: uppercase; letter-spacing: .12em; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; margin-bottom: 8px; }
.value { color: #f0edf8; font-size: 13px; }
.h1 {
background: radial-gradient(circle at 72% 42%, rgba(0,217,246,.10), transparent 34%), linear-gradient(135deg, #11111e, #191625);
}
.h1 .art { right: 42px; top: 42px; }
.h1 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.80), rgba(8,8,15,.05) 45%, rgba(8,8,15,.20)); }
.h1 .copy { padding: 70px 0 0 44px; }
.h1 .shelf { position: absolute; left: 44px; right: 44px; bottom: 28px; grid-template-columns: 1.2fr .8fr .8fr; }
.h2 {
background: radial-gradient(circle at 50% 30%, rgba(167,116,245,.11), transparent 36%), linear-gradient(135deg, #11111e, #171423);
}
.h2 .art { left: 50%; top: 24px; transform: translateX(-50%); }
.h2 .art:after { background: linear-gradient(0deg, rgba(8,8,15,.76), rgba(8,8,15,.04) 52%); }
.h2 .copy { position: absolute; left: 36px; right: 36px; bottom: 118px; max-width: none; }
.h2 .shelf { position: absolute; left: 36px; right: 36px; bottom: 24px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.h3 {
background: radial-gradient(circle at 76% 48%, rgba(67,212,136,.10), transparent 34%), linear-gradient(135deg, #11111e, #181625);
}
.h3 .art { right: 360px; top: 42px; }
.h3 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.76), rgba(8,8,15,.03) 55%); }
.h3 .copy { padding: 54px 0 0 40px; width: 45%; }
.h3 .shelf { position: absolute; top: 28px; right: 28px; width: 300px; }
.h4 {
display: grid;
grid-template-columns: 360px 1fr;
background: #10101d;
}
.h4 .art { left: 390px; top: 42px; }
.h4 .art:after { background: linear-gradient(90deg, rgba(16,16,29,.58), rgba(16,16,29,.04)); }
.h4 .left-panel { position: relative; z-index: 1; background: rgba(13,13,24,.96); border-right: 1px solid rgba(255,255,255,.12); padding: 36px 28px; display: grid; align-content: start; gap: 18px; }
.h4 .copy { padding: 0; }
.h4 .shelf { margin-top: 10px; }
.h5 {
background: radial-gradient(circle at 64% 38%, rgba(0,217,246,.11), transparent 34%), linear-gradient(135deg, #11111e, #191625);
}
.h5 .art { left: 360px; top: 36px; width: min(720px, calc(100% - 580px)); }
.h5 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.64), rgba(8,8,15,.06)); }
.h5 .copy { position: absolute; left: 38px; top: 38px; max-width: 500px; }
.h5 .parts { position: absolute; z-index: 1; right: 28px; top: 28px; bottom: 28px; width: 170px; display: grid; gap: 10px; align-content: start; }
.part { height: 82px; border-radius: 10px; border: 1px solid rgba(255,255,255,.17); background: rgba(16,17,28,.72); padding: 10px; backdrop-filter: blur(8px); }
.part.active { outline: 2px solid var(--cyan); }
.h6 {
background: radial-gradient(circle at 50% 30%, rgba(0,217,246,.09), transparent 35%), linear-gradient(135deg, #11111e, #191625);
}
.h6 .art { left: 50%; top: 26px; transform: translateX(-50%); opacity: .72; }
.h6 .art:after { background: linear-gradient(0deg, rgba(8,8,15,.88), rgba(8,8,15,.25)); }
.h6 .copy { margin: 0 auto; padding-top: 72px; text-align: center; max-width: 760px; }
.h6 .facts, .h6 .actions { justify-content: center; }
.h6 .shelf { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(900px, calc(100% - 64px)); grid-template-columns: repeat(3, 1fr); }
.h7 {
background: radial-gradient(circle at 54% 42%, rgba(167,116,245,.10), transparent 36%), linear-gradient(135deg, #11111e, #191625);
}
.h7 .art { left: 340px; top: 34px; width: min(720px, calc(100% - 760px)); }
.h7 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.48), rgba(8,8,15,.06)); }
.h7 .copy { position: absolute; left: 36px; bottom: 36px; }
.h7 .quick { position: absolute; z-index: 1; right: 28px; bottom: 28px; width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { border: 1px solid rgba(255,255,255,.14); background: rgba(18,19,31,.74); border-radius: 12px; padding: 13px; backdrop-filter: blur(10px); }
.metric strong { display: block; color: #fff; font-size: 18px; margin-top: 3px; }
.h8 {
background: radial-gradient(circle at 68% 38%, rgba(67,212,136,.10), transparent 34%), linear-gradient(135deg, #11111e, #191625);
}
.h8 .art { right: 36px; top: 28px; }
.h8 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.76), rgba(8,8,15,.04)); }
.h8 .copy { padding: 46px 0 0 36px; }
.h8 .editor { position: absolute; z-index: 1; left: 36px; right: 36px; bottom: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h9 {
background: radial-gradient(circle at 70% 42%, rgba(0,217,246,.10), transparent 34%), linear-gradient(135deg, #11111e, #191625);
}
.h9 .art { right: 42px; top: 34px; }
.h9 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.76), rgba(8,8,15,.04)); }
.h9 .copy { padding: 56px 0 0 42px; }
.h9 .timeline { position: absolute; z-index: 1; left: 42px; right: 42px; bottom: 34px; height: 80px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.frame { border-radius: 10px; background: rgba(214,214,218,.80); border: 1px solid rgba(255,255,255,.20); display: grid; place-items: end start; padding: 8px; color: rgba(20,20,25,.65); font: 11px ui-monospace, monospace; }
.h10 {
display: grid;
grid-template-columns: 1fr 420px;
background: radial-gradient(circle at 34% 42%, rgba(167,116,245,.10), transparent 36%), linear-gradient(135deg, #11111e, #191625);
}
.h10 .art { left: 36px; top: 42px; width: min(800px, calc(100% - 504px)); }
.h10 .art:after { background: linear-gradient(90deg, rgba(8,8,15,.22), rgba(8,8,15,.62)); }
.h10 .dock { position: relative; z-index: 1; grid-column: 2; background: rgba(13,13,24,.95); border-left: 1px solid rgba(255,255,255,.13); padding: 36px 28px; display: grid; gap: 14px; align-content: start; }
.h10 .copy { padding: 0; }
@media (max-width: 900px) {
.nav, .search { display: none; }
.hero { min-height: 650px; }
.art { left: 20px !important; right: auto !important; top: 22px !important; width: calc(100% - 40px) !important; transform: none !important; }
.h1 .copy, .h3 .copy, .h5 .copy, .h8 .copy, .h9 .copy { width: auto; max-width: none; padding: 34px 24px 0; left: 0; right: 0; }
.h1 .shelf, .h2 .shelf, .h6 .shelf, .h8 .editor { grid-template-columns: 1fr; left: 20px; right: 20px; width: auto; transform: none; }
.h4, .h10 { display: block; }
.h4 .left-panel, .h10 .dock { min-height: 650px; }
.h5 .parts, .h7 .quick { left: 20px; right: 20px; top: auto; bottom: 22px; width: auto; }
.h7 .quick { grid-template-columns: 1fr 1fr; }
.h9 .timeline { grid-template-columns: repeat(2, 1fr); height: auto; }
}
</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">
<h1>10 Netflix-Style Hero Concepts</h1>
<p>Each sample uses the same page content but explores a different cinematic hierarchy: play-first, metadata-first, multipart-first, editing-first, and gallery-first.</p>
</div>
<section class="concepts">
<article class="concept">
<div class="concept-head"><div><h2>1. Classic Left Gradient</h2><p>Most Netflix-like: strong left title block, media facts, play/edit actions, and a glass metadata shelf.</p></div><span class="tag">default</span></div>
<div class="hero h1">
<div class="art"></div>
<div class="copy">
<div class="eyebrow">Now in library</div><div class="code">YUJ-001</div><div class="title">Untitled</div>
<div class="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="facts"><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="actions"><span class="play">▶ Play</span><span class="ghost">✎ Edit Metadata</span><span class="ghost">⇩ Import</span></div>
</div>
<div class="shelf"><div class="card"><div class="label">Actress</div><div class="value">Ichika Matsumoto</div></div><div class="card"><div class="label">Collection</div><div class="value">Sugar & Spice</div></div><div class="card"><div class="label">Cover</div><div class="value">800x538 · 170 KB</div></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>2. Bottom Dock Hero</h2><p>Lets the artwork breathe, with the UI collected at the bottom like a streaming detail overlay.</p></div><span class="tag">cinematic</span></div>
<div class="hero h2">
<div class="art"></div>
<div class="copy"><div class="eyebrow">Ready to play</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="actions"><span class="play">▶ Play</span><span class="ghost">＋ Add Tag</span><span class="ghost">⤴ Reveal</span><span class="danger">Delete</span></div></div>
<div class="shelf"><div class="card"><div class="label">Video</div><div class="value">1920x1080 · H.264</div></div><div class="card"><div class="label">Bitrate</div><div class="value">5.7 Mbps</div></div><div class="card"><div class="label">Size</div><div class="value">4.90 GB</div></div><div class="card"><div class="label">Length</div><div class="value">1:56:55</div></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>3. Floating Inspector</h2><p>Hero stays immersive while a compact right inspector carries actionable metadata and organization.</p></div><span class="tag">organized</span></div>
<div class="hero h3">
<div class="art"></div>
<div class="copy"><div class="eyebrow">Featured cover</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="facts"><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span></div><div class="actions"><span class="play">▶ Play</span><span class="ghost">Edit</span></div></div>
<div class="shelf"><div class="card"><div class="label">Video file</div><div class="value">1920x1080 · H.264<br>5.7 Mbps · 4.90 GB · 1:56:55</div></div><div class="card"><div class="label">Cover file</div><div class="value">800x538 · 170 KB</div></div><div class="card"><div class="label">Organize</div><div class="value">Ichika Matsumoto<br>Sugar & Spice</div></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>4. Left Control Panel</h2><p>A fixed panel gives a streaming-app feel while staying practical for metadata editing.</p></div><span class="tag">control</span></div>
<div class="hero h4">
<div class="art"></div>
<div class="left-panel">
<div class="copy"><div class="eyebrow">Pinkudex detail</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="facts"><span>1920x1080</span><span>·</span><span>H.264</span><span>·</span><span>1:56:55</span></div><div class="actions"><span class="play">▶ Play</span><span class="ghost">Edit</span></div></div>
<div class="shelf"><div class="card"><div class="label">Cover</div><div class="value">800x538 · 170 KB</div></div><div class="card"><div class="label">Video</div><div class="value">5.7 Mbps · 4.90 GB</div></div><div class="card"><div class="label">Status</div><div class="value">VIP · Watched · Owned</div></div></div>
</div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>5. Multipart Rail Hero</h2><p>Designed for multi-part videos, with per-part chips always visible on the right.</p></div><span class="tag">multipart</span></div>
<div class="hero h5">
<div class="art"></div>
<div class="copy"><div class="eyebrow">2 part video</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="facts"><span>Current part</span><span>·</span><span>1920x1080</span><span>·</span><span>H.264</span><span>·</span><span>5.7 Mbps</span></div><div class="actions"><span class="play">▶ Play Part 1</span><span class="ghost">Edit Metadata</span></div></div>
<div class="parts"><div class="part active"><div class="label">Part 1</div><div class="value">1080p · H.264<br>1:02:11</div></div><div class="part"><div class="label">Part 2</div><div class="value">1080p · H.264<br>54:44</div></div><div class="part"><div class="label">Cover</div><div class="value">800x538 · 170 KB</div></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>6. Center Stage</h2><p>More theatrical and less utilitarian, useful if the detail page should feel like a playback destination.</p></div><span class="tag">theater</span></div>
<div class="hero h6">
<div class="art"></div>
<div class="copy"><div class="eyebrow">Tonight's pick</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="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="actions"><span class="play">▶ Play</span><span class="ghost">Edit</span><span class="ghost">Import</span></div></div>
<div class="shelf"><div class="card"><div class="label">Actress</div><div class="value">Ichika Matsumoto</div></div><div class="card"><div class="label">Collection</div><div class="value">Sugar & Spice</div></div><div class="card"><div class="label">Status</div><div class="value">★★★★★ · VIP · Watched</div></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>7. Metrics Overlay</h2><p>Hero plus a visible metadata dashboard; strongest when video facts are the star of the redesign.</p></div><span class="tag">metadata</span></div>
<div class="hero h7">
<div class="art"></div>
<div class="copy"><div class="eyebrow">File verified</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="actions"><span class="play">▶ Play</span><span class="ghost">Reveal</span></div></div>
<div class="quick"><div class="metric"><div class="label">Resolution</div><strong>1920x1080</strong></div><div class="metric"><div class="label">Codec</div><strong>H.264</strong></div><div class="metric"><div class="label">Bitrate</div><strong>5.7 Mbps</strong></div><div class="metric"><div class="label">Length</div><strong>1:56:55</strong></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>8. Editing Dock</h2><p>Keeps the hero visual but gives edit/import/delete equal-width controls below the core identity.</p></div><span class="tag">editing</span></div>
<div class="hero h8">
<div class="art"></div>
<div class="copy"><div class="eyebrow">Library item</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="facts"><span class="pill cyan">VIP</span><span class="pill green">Watched</span><span class="pill violet">Owned</span></div><div class="actions"><span class="play">▶ Play</span></div></div>
<div class="editor"><div class="card"><div class="label">Cover file</div><div class="value">800x538 · 170 KB</div></div><div class="card"><div class="label">Video file</div><div class="value">1920x1080 · H.264 · 5.7 Mbps · 4.90 GB · 1:56:55</div></div><div class="card"><div class="label">Actions</div><div class="actions"><span class="ghost">Edit Metadata</span><span class="ghost">Import</span><span class="danger">Delete</span></div></div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>9. Preview Timeline</h2><p>Feels like a streaming player detail page with visual chapter/thumb placeholders along the bottom.</p></div><span class="tag">gallery</span></div>
<div class="hero h9">
<div class="art"></div>
<div class="copy"><div class="eyebrow">Preview strip</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="facts"><span>1920x1080</span><span>·</span><span>H.264</span><span>·</span><span>1:56:55</span></div><div class="actions"><span class="play">▶ Play</span><span class="ghost">Edit</span></div></div>
<div class="timeline"><div class="frame">00:00</div><div class="frame">20:00</div><div class="frame">40:00</div><div class="frame">1:00:00</div><div class="frame">1:30:00</div></div>
</div>
</article>
<article class="concept">
<div class="concept-head"><div><h2>10. Right Dock Detail</h2><p>Opposite of the classic Netflix layout: full artwork with a right-side metadata dock for quick scanning.</p></div><span class="tag">right dock</span></div>
<div class="hero h10">
<div class="art"></div>
<div class="dock">
<div class="copy"><div class="eyebrow">Selected cover</div><div class="code">YUJ-001</div><div class="title">Untitled</div><div class="actions"><span class="play">▶ Play</span><span class="ghost">Edit</span></div></div>
<div class="card"><div class="label">Video</div><div class="value">1920x1080 · H.264<br>5.7 Mbps · 4.90 GB · 1:56:55</div></div>
<div class="card"><div class="label">Cover</div><div class="value">800x538 · 170 KB</div></div>
<div class="card"><div class="label">Organize</div><div class="value">Ichika Matsumoto<br>Sugar & Spice</div></div>
<div class="actions"><span class="ghost">Import .nfo / JSON</span><span class="danger">Delete</span></div>
</div>
</div>
</article>
</section>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink