412 lines
23 KiB
HTML
412 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Forge — Layout B high-fidelity mockup</title>
|
||
<style>
|
||
:root {
|
||
--bg-0: #08090C; --bg-1: #0C0E12; --bg-2: #111318; --bg-3: #181B22; --bg-4: #22262F;
|
||
--text-1: #F6F4EF; --text-2: #B4B0A6; --text-3: #86837B; --text-4: #63615B;
|
||
--accent: #F0A63C; --accent-hover: #F7B857; --accent-text: #F6C583;
|
||
--accent-soft: rgba(240,166,60,0.12);
|
||
--success: #5FBF97; --warning: #E6A93C; --danger: #E86A6A; --live: #FF3B30;
|
||
--live-soft: rgba(255,59,48,0.12); --success-soft: rgba(95,191,151,0.12);
|
||
--warning-soft: rgba(230,169,60,0.12);
|
||
--hairline: rgba(255,255,255,0.07); --hairline-2: rgba(255,255,255,0.12);
|
||
--hover-fill: rgba(255,255,255,0.028);
|
||
--mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
|
||
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body { height: 100%; }
|
||
body { background: #040506; color: var(--text-1); font-family: var(--sans);
|
||
font-size: 13px; letter-spacing: -0.006em; overflow: hidden; }
|
||
|
||
.window { display: flex; flex-direction: column; height: 100vh; background: var(--bg-0); }
|
||
|
||
/* titlebar + toolbar */
|
||
.titlebar { height: 38px; background: var(--bg-1); border-bottom: 1px solid var(--hairline);
|
||
display: flex; align-items: center; padding: 0 14px; gap: 8px; flex: none; }
|
||
.traffic { display: flex; gap: 7px; }
|
||
.traffic span { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-4); }
|
||
.titlebar .title { flex: 1; text-align: center; color: var(--text-3); font-size: 12px; }
|
||
.toolbar { height: 46px; background: var(--bg-1); border-bottom: 1px solid var(--hairline);
|
||
display: flex; align-items: center; padding: 0 14px; gap: 8px; flex: none; }
|
||
.tbtn { height: 28px; padding: 0 12px; border-radius: 4px; background: var(--bg-3);
|
||
border: 1px solid var(--hairline-2); color: var(--text-2); font-size: 12px;
|
||
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
|
||
transition: background 140ms ease-out; }
|
||
.tbtn:hover { background: var(--bg-4); color: var(--text-1); }
|
||
.tbtn.primary { background: var(--accent); color: #1A1206; border: none; font-weight: 600; }
|
||
.tbtn.primary:hover { background: var(--accent-hover); }
|
||
.tbtn kbd { font-family: var(--mono); font-size: 10px; color: inherit; opacity: 0.55; }
|
||
.tspacer { flex: 1; }
|
||
.search { height: 28px; width: 210px; background: var(--bg-2); border: 1px solid var(--hairline-2);
|
||
border-radius: 5px; color: var(--text-3); font-size: 12px; padding: 0 10px;
|
||
display: flex; align-items: center; }
|
||
|
||
/* main 3-col */
|
||
.main { flex: 1; display: grid; grid-template-columns: 236px 1fr 312px; min-height: 0; }
|
||
|
||
.eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
|
||
font-weight: 600; color: var(--text-4); padding: 14px 14px 6px; }
|
||
.mono { font-family: var(--mono); }
|
||
|
||
.badge { font-size: 9.5px; text-transform: uppercase; font-weight: 600;
|
||
letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
|
||
.badge.rec { background: var(--live-soft); color: var(--live); }
|
||
.badge.ok { background: var(--success-soft); color: var(--success); }
|
||
.badge.warn { background: var(--warning-soft); color: var(--warning); }
|
||
.badge.neutral { background: var(--bg-4); color: var(--text-3); }
|
||
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
|
||
.dot.rec { background: var(--live); box-shadow: 0 0 6px var(--live); animation: pulse 1.2s infinite; }
|
||
.dot.ok { background: var(--success); }
|
||
.dot.off { background: var(--text-4); }
|
||
@keyframes pulse { 50% { opacity: 0.35; } }
|
||
|
||
/* sidebar */
|
||
.sidebar { border-right: 1px solid var(--hairline); background: var(--bg-1);
|
||
overflow-y: auto; }
|
||
.tree-item { padding: 6px 14px; color: var(--text-2); font-size: 12.5px; display: flex;
|
||
gap: 8px; align-items: center; cursor: pointer; border-left: 2px solid transparent; }
|
||
.tree-item:hover { background: var(--hover-fill); }
|
||
.tree-item.sel { background: var(--accent-soft); color: var(--accent-text);
|
||
border-left-color: var(--accent); }
|
||
.tree-item .cnt { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
|
||
color: var(--text-4); }
|
||
.job { padding: 8px 14px; }
|
||
.job .jrow { display: flex; align-items: center; gap: 8px; font-size: 12px;
|
||
color: var(--text-2); margin-bottom: 5px; }
|
||
.job .jrow .pct { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
|
||
color: var(--text-3); }
|
||
.bar { height: 3px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
|
||
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
|
||
.bar.done i { background: var(--success); }
|
||
|
||
/* clip table */
|
||
.content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||
.tablehead, .librow { display: grid;
|
||
grid-template-columns: 58px 1.15fr 1.15fr 0.9fr 0.75fr 0.65fr 74px;
|
||
gap: 12px; align-items: center; padding: 0 14px; }
|
||
.tablehead { height: 34px; color: var(--text-4); font-size: 10.5px; text-transform: uppercase;
|
||
letter-spacing: 0.12em; font-weight: 600;
|
||
border-bottom: 1px solid var(--hairline-2); flex: none; }
|
||
.tablehead .sort { color: var(--text-2); }
|
||
.tablehead .sort::after { content: " ↓"; color: var(--accent); }
|
||
.tablebody { flex: 1; overflow-y: auto; }
|
||
.librow { height: 44px; border-bottom: 1px solid var(--hairline); font-size: 12px;
|
||
cursor: pointer; }
|
||
.librow:hover { background: var(--hover-fill); }
|
||
.librow.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
|
||
.lthumb { width: 56px; height: 32px; border-radius: 3px;
|
||
background: linear-gradient(135deg, #2a2f3a, #3a4150); position: relative; }
|
||
.librow.recrow .lthumb::after { content: ""; position: absolute; top: 3px; right: 3px;
|
||
width: 6px; height: 6px; border-radius: 50%; background: var(--live);
|
||
animation: pulse 1.2s infinite; }
|
||
.cellsub { font-size: 10px; color: var(--text-4); margin-top: 1px; }
|
||
.c2 { color: var(--text-3); }
|
||
|
||
/* inspector */
|
||
.inspector { border-left: 1px solid var(--hairline); background: var(--bg-1);
|
||
overflow-y: auto; display: flex; flex-direction: column; }
|
||
.insp-still { height: 130px; margin: 0 14px 10px; border-radius: 6px;
|
||
background: linear-gradient(135deg, #1a1d24, #232833 55%, #1a1d24);
|
||
border: 1px solid var(--hairline); position: relative; flex: none; }
|
||
.insp-still .tcbug { position: absolute; bottom: 8px; right: 10px; font-family: var(--mono);
|
||
font-size: 10.5px; color: var(--text-2); background: rgba(0,0,0,0.55);
|
||
padding: 2px 6px; border-radius: 3px; }
|
||
.kv { display: flex; justify-content: space-between; padding: 3px 14px; font-size: 11.5px; }
|
||
.kv .k { color: var(--text-4); }
|
||
.kv .v { font-family: var(--mono); color: var(--text-2); }
|
||
.kv .v.good { color: var(--success); }
|
||
.sect { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
|
||
.actions { padding: 8px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
|
||
|
||
/* grade drawer */
|
||
.drawer { flex: none; border-top: 1px solid var(--hairline-2); background: var(--bg-1);
|
||
height: 0; overflow: hidden; transition: height 220ms ease-out; }
|
||
.drawer.open { height: 280px; }
|
||
.drawer-inner { display: grid; grid-template-columns: 380px 1fr; height: 280px; }
|
||
.dpreview { margin: 12px; border-radius: 6px; border: 1px solid var(--hairline);
|
||
background: linear-gradient(135deg, #1a1d24, #232833 55%, #1a1d24);
|
||
position: relative; }
|
||
.dpreview .cam { position: absolute; top: 8px; left: 10px; font-family: var(--mono);
|
||
font-size: 10.5px; color: var(--accent-text); background: rgba(0,0,0,0.55);
|
||
padding: 2px 7px; border-radius: 3px; }
|
||
.dpreview .recbug { position: absolute; bottom: 8px; left: 10px; display: flex;
|
||
align-items: center; gap: 6px; font-size: 10.5px; color: var(--live);
|
||
background: rgba(0,0,0,0.55); padding: 2px 7px; border-radius: 3px; }
|
||
.dright { display: flex; flex-direction: column; min-width: 0; }
|
||
.slottabs { display: flex; gap: 6px; padding: 12px 14px 0; }
|
||
.slottab { padding: 5px 12px; border-radius: 4px; border: 1px solid var(--hairline-2);
|
||
background: var(--bg-2); color: var(--text-3); font-size: 11.5px; cursor: pointer;
|
||
display: flex; align-items: center; gap: 6px; }
|
||
.slottab.active { border-color: var(--accent); background: var(--accent-soft);
|
||
color: var(--accent-text); }
|
||
.nodestrip { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; }
|
||
.node { min-width: 122px; border: 1px solid var(--hairline-2); border-radius: 5px;
|
||
background: var(--bg-2); padding: 8px 10px; cursor: pointer; flex: none; }
|
||
.node.sel { border-color: var(--accent); }
|
||
.node.bypass { opacity: 0.45; }
|
||
.node .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
|
||
color: var(--text-4); font-weight: 600; margin-bottom: 4px; display: flex;
|
||
justify-content: space-between; }
|
||
.node .v { font-family: var(--mono); font-size: 10.5px; color: var(--text-2); line-height: 1.5; }
|
||
.pushline { margin-top: auto; padding: 8px 14px 12px; display: flex; align-items: center;
|
||
gap: 10px; font-size: 11.5px; color: var(--text-3); }
|
||
.pushline .mono { color: var(--text-2); }
|
||
|
||
/* statusbar */
|
||
.statusbar { height: 26px; background: var(--bg-1); border-top: 1px solid var(--hairline);
|
||
display: flex; align-items: center; gap: 16px; padding: 0 14px;
|
||
font-size: 11px; color: var(--text-4); flex: none; }
|
||
.statusbar .mono { color: var(--text-3); }
|
||
|
||
/* offload sheet */
|
||
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none;
|
||
align-items: flex-start; justify-content: center; padding-top: 90px; z-index: 50; }
|
||
.scrim.open { display: flex; }
|
||
.sheet { width: 560px; background: var(--bg-2); border: 1px solid var(--hairline-2);
|
||
border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); overflow: hidden; }
|
||
.sheet h3 { font-size: 14px; font-weight: 600; padding: 16px 18px 4px; }
|
||
.sheet .sub { color: var(--text-3); font-size: 12px; padding: 0 18px 12px; }
|
||
.frow { display: flex; align-items: center; gap: 10px; padding: 7px 18px; font-size: 12.5px; }
|
||
.frow .lab { width: 110px; color: var(--text-4); font-size: 11.5px; flex: none; }
|
||
.field { flex: 1; height: 30px; background: var(--bg-1); border: 1px solid var(--hairline-2);
|
||
border-radius: 5px; display: flex; align-items: center; padding: 0 10px;
|
||
font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
|
||
.chip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hairline-2);
|
||
font-size: 11px; color: var(--text-3); cursor: pointer; }
|
||
.chip.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
|
||
.sheet .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px;
|
||
border-top: 1px solid var(--hairline); margin-top: 10px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="window">
|
||
<div class="titlebar">
|
||
<div class="traffic"><span></span><span></span><span></span></div>
|
||
<div class="title">Forge — Project Nightfall</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<button class="tbtn" onclick="document.getElementById('sheet').classList.add('open')">Offload… <kbd>⌘O</kbd></button>
|
||
<button class="tbtn">Verify</button>
|
||
<button class="tbtn">Proxies…</button>
|
||
<button class="tbtn">Reports…</button>
|
||
<div class="tspacer"></div>
|
||
<div class="search">Filter clips… <span style="margin-left:auto" class="mono">⌘F</span></div>
|
||
<button class="tbtn primary" onclick="document.getElementById('drawer').classList.toggle('open')">Grade <kbd>⌘G</kbd></button>
|
||
</div>
|
||
|
||
<div class="main">
|
||
<!-- sidebar -->
|
||
<div class="sidebar">
|
||
<div class="eyebrow">Project</div>
|
||
<div class="tree-item">Day 01 <span class="cnt">41</span></div>
|
||
<div class="tree-item">Day 02 <span class="cnt">38</span></div>
|
||
<div class="tree-item sel">Day 03 <span class="cnt">23</span></div>
|
||
<div class="eyebrow">Cameras</div>
|
||
<div class="tree-item"><span class="dot rec"></span> A — ALEXA 35 <span class="cnt mono">CAP</span></div>
|
||
<div class="tree-item"><span class="dot ok"></span> B — V-RAPTOR <span class="cnt mono">RCP2</span></div>
|
||
<div class="tree-item"><span class="dot off"></span> C — VENICE 2 <span class="cnt mono">SDI</span></div>
|
||
<div class="eyebrow">Jobs</div>
|
||
<div class="job">
|
||
<div class="jrow"><span class="dot ok"></span> Offload A001 → RAID+Shuttle <span class="pct">done</span></div>
|
||
<div class="bar done"><i style="width:100%"></i></div>
|
||
</div>
|
||
<div class="job">
|
||
<div class="jrow"><span class="dot ok"></span> Verify Shuttle A001 <span class="pct">41%</span></div>
|
||
<div class="bar"><i style="width:41%"></i></div>
|
||
</div>
|
||
<div class="job">
|
||
<div class="jrow"><span class="dot ok"></span> Proxies Day 02 <span class="pct">72%</span></div>
|
||
<div class="bar"><i style="width:72%"></i></div>
|
||
</div>
|
||
<div class="eyebrow">Looks</div>
|
||
<div class="tree-item">K1S1_Film <span class="cnt">A B</span></div>
|
||
<div class="tree-item">NightExt_Cool <span class="cnt">—</span></div>
|
||
</div>
|
||
|
||
<!-- clip table -->
|
||
<div class="content">
|
||
<div class="tablehead">
|
||
<span></span><span class="sort">Clip</span><span>TC In / Out</span>
|
||
<span>Camera · Look</span><span>EI / WB</span><span>Grade</span><span>Status</span>
|
||
</div>
|
||
<div class="tablebody">
|
||
<div class="librow recrow">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">R001C007</span><div class="cellsub">ALEXA 35 · rolling</div></div>
|
||
<span class="mono c2">14:22:31 / —</span>
|
||
<span>A · K1S1_Film</span>
|
||
<span class="mono c2">800 · 5600K</span>
|
||
<span><span class="badge ok">CDL+LUT</span></span>
|
||
<span><span class="badge rec">REC</span></span>
|
||
</div>
|
||
<div class="librow sel">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">R001C006</span><div class="cellsub">1:42 · verified ×2</div></div>
|
||
<span class="mono c2">14:18:02 / 14:19:44</span>
|
||
<span>A · K1S1_Film</span>
|
||
<span class="mono c2">800 · 5600K</span>
|
||
<span><span class="badge ok">CDL+LUT</span></span>
|
||
<span><span class="badge ok">✓×2</span></span>
|
||
</div>
|
||
<div class="librow">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">B001_C012</span><div class="cellsub">1:43 · verified ×2</div></div>
|
||
<span class="mono c2">14:17:58 / 14:19:41</span>
|
||
<span>B · CDL only</span>
|
||
<span class="mono c2">800 · 5600K</span>
|
||
<span><span class="badge ok">CDL</span></span>
|
||
<span><span class="badge ok">✓×2</span></span>
|
||
</div>
|
||
<div class="librow">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">R001C005</span><div class="cellsub">2:52 · proxy queued</div></div>
|
||
<span class="mono c2">13:58:11 / 14:01:03</span>
|
||
<span>A · K1S1_Film</span>
|
||
<span class="mono c2">800 · 5600K</span>
|
||
<span><span class="badge ok">CDL+LUT</span></span>
|
||
<span><span class="badge warn">PROXY</span></span>
|
||
</div>
|
||
<div class="librow">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">R001C004</span><div class="cellsub">2:25 · verified ×2</div></div>
|
||
<span class="mono c2">13:41:47 / 13:44:12</span>
|
||
<span>A · K1S1_Film</span>
|
||
<span class="mono c2">800 · 5600K</span>
|
||
<span><span class="badge ok">CDL+LUT</span></span>
|
||
<span><span class="badge ok">✓×2</span></span>
|
||
</div>
|
||
<div class="librow">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">R001C003</span><div class="cellsub">3:31 · verified ×2</div></div>
|
||
<span class="mono c2">13:22:09 / 13:25:40</span>
|
||
<span>A · K1S1_Film</span>
|
||
<span class="mono c2">1280 · 3200K</span>
|
||
<span><span class="badge ok">CDL+LUT</span></span>
|
||
<span><span class="badge ok">✓×2</span></span>
|
||
</div>
|
||
<div class="librow">
|
||
<div class="lthumb"></div>
|
||
<div><span class="mono">B001_C011</span><div class="cellsub">0:58 · card only</div></div>
|
||
<span class="mono c2">12:51:20 / 12:52:18</span>
|
||
<span>B · CDL only</span>
|
||
<span class="mono c2">800 · 5600K</span>
|
||
<span><span class="badge ok">CDL</span></span>
|
||
<span><span class="badge neutral">CARD</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- inspector -->
|
||
<div class="inspector">
|
||
<div class="eyebrow">Inspector — R001C006</div>
|
||
<div class="sect">
|
||
<div class="insp-still"><span class="tcbug">14:18:02:00</span></div>
|
||
<div class="kv"><span class="k">Duration</span><span class="v">00:01:42:03</span></div>
|
||
<div class="kv"><span class="k">EI / WB / Tint</span><span class="v">800 / 5600K / 0</span></div>
|
||
<div class="kv"><span class="k">FPS</span><span class="v">24.000</span></div>
|
||
<div class="kv"><span class="k">Codec</span><span class="v">ARRIRAW 4.6K</span></div>
|
||
<div class="kv"><span class="k">Offload</span><span class="v good">RAID ✓ · Shuttle ✓</span></div>
|
||
<div class="kv"><span class="k">xxHash64</span><span class="v">a3f2…9c41</span></div>
|
||
</div>
|
||
<div class="eyebrow">Grade Snapshot</div>
|
||
<div class="sect">
|
||
<div class="kv"><span class="k">Slope</span><span class="v">1.12 0.98 1.04</span></div>
|
||
<div class="kv"><span class="k">Offset</span><span class="v">+.02 .00 −.01</span></div>
|
||
<div class="kv"><span class="k">Power</span><span class="v">0.96 1.00 1.02</span></div>
|
||
<div class="kv"><span class="k">Sat</span><span class="v">1.10</span></div>
|
||
<div class="kv"><span class="k">LUT</span><span class="v">K1S1_Film.cube</span></div>
|
||
<div class="kv"><span class="k">Captured</span><span class="v">14:18:02 rec-start</span></div>
|
||
</div>
|
||
<div class="eyebrow">Actions</div>
|
||
<div class="actions">
|
||
<button class="tbtn">Recall Grade</button>
|
||
<button class="tbtn">Export CDL</button>
|
||
<button class="tbtn">Still</button>
|
||
<button class="tbtn">Proxy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- grade drawer -->
|
||
<div class="drawer open" id="drawer">
|
||
<div class="drawer-inner">
|
||
<div class="dpreview">
|
||
<span class="cam">A · LogC4 → Rec709 · 33³</span>
|
||
<span class="recbug"><span class="dot rec"></span>REC R001C007 · 14:23:07:11</span>
|
||
</div>
|
||
<div class="dright">
|
||
<div class="slottabs">
|
||
<div class="slottab active"><span class="dot rec"></span> A — ALEXA 35</div>
|
||
<div class="slottab"><span class="dot ok"></span> B — V-RAPTOR</div>
|
||
<div class="slottab" style="opacity:.5"><span class="dot off"></span> C — VENICE 2</div>
|
||
<div class="slottab" style="margin-left:auto; border-style:dashed;">GANG A+B</div>
|
||
</div>
|
||
<div class="nodestrip">
|
||
<div class="node"><div class="k">Input</div><div class="v">LogC4 / AWG4</div></div>
|
||
<div class="node sel"><div class="k">CDL <span style="color:var(--success)">native</span></div>
|
||
<div class="v">S 1.12 0.98 1.04<br>O +.02 .00 −.01<br>P 0.96 1.00 1.02 · Sat 1.10</div></div>
|
||
<div class="node"><div class="k">Curves</div><div class="v">master +2pt</div></div>
|
||
<div class="node bypass"><div class="k">Sat</div><div class="v">0.92 · bypassed</div></div>
|
||
<div class="node"><div class="k">LUT</div><div class="v">K1S1_Film.cube</div></div>
|
||
<div class="node"><div class="k">Output</div><div class="v">Rec709 2.4</div></div>
|
||
</div>
|
||
<div class="pushline">
|
||
<span class="dot ok"></span>
|
||
<span>Pushed to <span class="mono">A</span> (CDL native) + <span class="mono">B</span> (CDL) ·
|
||
<span class="mono">142 ms ago</span> · debounce 150 ms</span>
|
||
<span style="margin-left:auto" class="mono">Wave2 · ball→CDL · focus A</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="statusbar">
|
||
<span>Day 03 · <span class="mono">23 clips · 412 GB</span></span>
|
||
<span>RAID <span class="mono">6.1 TB free</span></span>
|
||
<span>Shuttle <span class="mono">1.8 TB free</span></span>
|
||
<span style="margin-left:auto">CAP <span class="mono">5055 ✓</span> · RCP2 <span class="mono">9998 ✓</span> · Tangent <span class="mono">Hub ✓</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- offload sheet -->
|
||
<div class="scrim" id="sheet" onclick="if(event.target===this)this.classList.remove('open')">
|
||
<div class="sheet">
|
||
<h3>Offload Card</h3>
|
||
<div class="sub">Verified copy → ASC MHL v2.0 manifest at each destination.</div>
|
||
<div class="frow"><span class="lab">Source</span><div class="field">/Volumes/A001_0711 · 214 GB · 38 clips</div></div>
|
||
<div class="frow"><span class="lab">Destination 1</span><div class="field">/Volumes/RAID/NIGHTFALL/A001</div></div>
|
||
<div class="frow"><span class="lab">Destination 2</span><div class="field">/Volumes/SHUTTLE_01/A001</div></div>
|
||
<div class="frow"><span class="lab">Checksum</span>
|
||
<span class="chip on">xxHash64</span><span class="chip">XXH3</span>
|
||
<span class="chip">MD5</span><span class="chip">C4ID</span></div>
|
||
<div class="frow"><span class="lab">Options</span>
|
||
<span class="chip on">Verify after copy</span><span class="chip on">HTML report</span>
|
||
<span class="chip">Source re-read</span><span class="chip on">Match grades</span></div>
|
||
<div class="foot">
|
||
<button class="tbtn" onclick="document.getElementById('sheet').classList.remove('open')">Cancel</button>
|
||
<button class="tbtn primary">Start Offload</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('keydown', e => {
|
||
if ((e.metaKey || e.ctrlKey) && e.key === 'g') {
|
||
e.preventDefault();
|
||
document.getElementById('drawer').classList.toggle('open');
|
||
}
|
||
if ((e.metaKey || e.ctrlKey) && e.key === 'o') {
|
||
e.preventDefault();
|
||
document.getElementById('sheet').classList.add('open');
|
||
}
|
||
if (e.key === 'Escape') document.getElementById('sheet').classList.remove('open');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|