2026-05-21 12:43:00 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Primitives smoke test</title>
|
|
|
|
|
<link rel="stylesheet" href="/dist/app.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div style="display:flex; min-height:100vh;">
|
|
|
|
|
<nav class="wd-sidebar">
|
|
|
|
|
<div class="wd-sidebar-header">
|
|
|
|
|
<div style="width:18px;height:18px;background:var(--accent);border-radius:3px"></div>
|
2026-05-21 22:52:12 -04:00
|
|
|
<span class="wd-sidebar-brand">Dragonflight</span>
|
2026-05-21 12:43:00 -04:00
|
|
|
</div>
|
|
|
|
|
<div class="wd-sidebar-nav">
|
|
|
|
|
<a href="#" class="wd-nav-item is-active"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Home</a>
|
|
|
|
|
<a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Library</a>
|
|
|
|
|
<a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Recorders</a>
|
|
|
|
|
<div class="wd-sidebar-section">Admin</div>
|
|
|
|
|
<a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Settings <span class="nav-dev-badge">IN DEV</span></a>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<div style="flex:1;display:flex;flex-direction:column;">
|
|
|
|
|
<header class="wd-topbar">
|
|
|
|
|
<div class="wd-topbar-left">
|
|
|
|
|
<nav class="wd-breadcrumb">
|
|
|
|
|
<span class="wd-breadcrumb-crumb">Library</span>
|
|
|
|
|
<svg class="wd-breadcrumb-sep" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor"/></svg>
|
|
|
|
|
<span class="wd-breadcrumb-crumb">Project Alpha</span>
|
|
|
|
|
<svg class="wd-breadcrumb-sep" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor"/></svg>
|
|
|
|
|
<span class="wd-breadcrumb-crumb">Key Scenes</span>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-topbar-center">
|
|
|
|
|
<div class="wd-topbar-search">
|
|
|
|
|
<svg viewBox="0 0 12 12"><circle cx="5" cy="5" r="3.5" fill="none" stroke="currentColor"/><path d="M8 8l3 3" stroke="currentColor"/></svg>
|
|
|
|
|
<input type="text" placeholder="Search in Key Scenes...">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-topbar-right">
|
|
|
|
|
<button class="wd-btn wd-btn--ghost wd-btn--sm wd-btn--icon" aria-label="Filter">f</button>
|
|
|
|
|
<button class="wd-btn wd-btn--ghost wd-btn--sm wd-btn--icon" aria-label="Sort">s</button>
|
|
|
|
|
<div class="wd-topbar-divider"></div>
|
|
|
|
|
<button class="wd-btn wd-btn--primary wd-btn--sm">+ New asset</button>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main style="flex:1; padding:20px 20px 32px;">
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Asset cards</h2>
|
|
|
|
|
<div class="wd-card-asset-grid" style="margin-bottom:32px;">
|
|
|
|
|
<article class="wd-card-asset">
|
|
|
|
|
<div class="wd-card-asset-thumb" style="background:linear-gradient(135deg,#333,#111)">
|
|
|
|
|
<span class="wd-card-asset-chip wd-card-asset-chip--duration">00:30</span>
|
|
|
|
|
<span class="wd-card-asset-chip wd-card-asset-chip--comments">2</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-card-asset-meta">
|
|
|
|
|
<div class="wd-card-asset-name">DRP_B004_081606_V1_0099.mov</div>
|
|
|
|
|
<div class="wd-card-asset-sub">Alissa Morris · Oct 14th, 2024</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="wd-card-asset-role" style="color:var(--signal-warn)">Coloring</button>
|
|
|
|
|
</article>
|
|
|
|
|
<article class="wd-card-asset">
|
|
|
|
|
<div class="wd-card-asset-thumb" style="background:linear-gradient(135deg,#553,#221)">
|
|
|
|
|
<span class="wd-card-asset-chip wd-card-asset-chip--duration">00:05</span>
|
|
|
|
|
<span class="wd-card-asset-chip wd-card-asset-chip--version">V2</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-card-asset-meta">
|
|
|
|
|
<div class="wd-card-asset-name">DRP_A015_0815OF_V1_0023.mov</div>
|
|
|
|
|
<div class="wd-card-asset-sub">Alissa Morris · Oct 14th, 2024</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="wd-card-asset-role wd-card-asset-role--unset">Select role</button>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Operational cards</h2>
|
|
|
|
|
<div class="wd-card-op-grid" style="margin-bottom:32px;">
|
|
|
|
|
<article class="wd-card-op is-active">
|
|
|
|
|
<header class="wd-card-op-header">
|
|
|
|
|
<span class="wd-card-op-name">Studio A SRT</span>
|
|
|
|
|
<span class="wd-badge wd-badge--bad"><span class="wd-dot wd-dot--bad"></span>Recording</span>
|
|
|
|
|
</header>
|
|
|
|
|
<div class="wd-card-op-content">
|
|
|
|
|
<div class="wd-signal-strip"><div class="wd-signal-strip-fill wd-sweep"></div></div>
|
|
|
|
|
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
|
|
|
<span>Receiving · 12450 fr · 30 fps</span>
|
|
|
|
|
<span style="font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--signal-bad); font-weight:600;">00:23:14</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<footer class="wd-card-op-footer">
|
|
|
|
|
<span class="wd-card-op-meta">Last: Oct 14th, 2024 4:00 PM</span>
|
|
|
|
|
<div class="wd-card-op-actions">
|
|
|
|
|
<button class="wd-btn wd-btn--danger wd-btn--sm">Stop</button>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
|
|
|
|
<article class="wd-card-op">
|
|
|
|
|
<header class="wd-card-op-header">
|
|
|
|
|
<span class="wd-card-op-name">zampp2</span>
|
|
|
|
|
<span class="wd-badge wd-badge--good"><span class="wd-dot wd-dot--good"></span>Online</span>
|
|
|
|
|
</header>
|
|
|
|
|
<div class="wd-card-op-content">
|
|
|
|
|
<div>
|
|
|
|
|
<div style="display:flex; justify-content:space-between; font:400 11px/1 var(--font-mono); color:var(--text-tertiary); margin-bottom:4px;">
|
|
|
|
|
<span>CPU</span><span>42%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-mini-bar"><div class="wd-mini-bar-fill" style="width:42%"></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div style="display:flex; justify-content:space-between; font:400 11px/1 var(--font-mono); color:var(--text-tertiary); margin-bottom:4px;">
|
|
|
|
|
<span>Memory</span><span>71%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-mini-bar"><div class="wd-mini-bar-fill wd-mini-bar-fill--warn" style="width:71%"></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<footer class="wd-card-op-footer">
|
|
|
|
|
<span class="wd-card-op-meta">DeckLink Duo 2 · 4 ports</span>
|
|
|
|
|
<div class="wd-card-op-actions">
|
|
|
|
|
<button class="wd-btn wd-btn--ghost wd-btn--sm">Ping</button>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">List rows</h2>
|
|
|
|
|
<div class="wd-list" style="margin-bottom:32px; border:1px solid var(--border-faint); border-radius:6px; overflow:hidden;">
|
|
|
|
|
<div class="wd-list-header">
|
|
|
|
|
<span style="flex:1">Name</span>
|
|
|
|
|
<span>Image</span>
|
|
|
|
|
<span>Status</span>
|
|
|
|
|
<span>Actions</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-list-row is-selected">
|
|
|
|
|
<span class="wd-list-cell wd-list-cell--name">wild-dragon-mam-api-1</span>
|
|
|
|
|
<span class="wd-list-cell wd-list-cell--meta">wild-dragon-mam-api:latest</span>
|
|
|
|
|
<span><span class="wd-badge wd-badge--good">Up</span></span>
|
|
|
|
|
<span class="wd-list-cell--actions"><button class="wd-btn wd-btn--ghost wd-btn--sm">Logs</button></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-list-row">
|
|
|
|
|
<span class="wd-list-cell wd-list-cell--name">wild-dragon-web-ui-1</span>
|
|
|
|
|
<span class="wd-list-cell wd-list-cell--meta">wild-dragon-web-ui:latest</span>
|
|
|
|
|
<span><span class="wd-badge wd-badge--good">Up</span></span>
|
|
|
|
|
<span class="wd-list-cell--actions"><button class="wd-btn wd-btn--ghost wd-btn--sm">Logs</button></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Buttons</h2>
|
|
|
|
|
<div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px;">
|
|
|
|
|
<button class="wd-btn wd-btn--primary wd-btn--sm">Primary sm</button>
|
|
|
|
|
<button class="wd-btn wd-btn--primary wd-btn--md">Primary md</button>
|
|
|
|
|
<button class="wd-btn wd-btn--secondary wd-btn--md">Secondary md</button>
|
|
|
|
|
<button class="wd-btn wd-btn--ghost wd-btn--md">Ghost md</button>
|
|
|
|
|
<button class="wd-btn wd-btn--danger wd-btn--md">Danger md</button>
|
|
|
|
|
<button class="wd-btn wd-btn--primary wd-btn--md" disabled>Disabled</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Form controls</h2>
|
|
|
|
|
<div style="max-width:460px; display:flex; flex-direction:column; gap:14px; margin-bottom:32px;">
|
|
|
|
|
<div class="wd-form-group">
|
|
|
|
|
<label class="wd-label" for="smoke-input">Recorder name</label>
|
|
|
|
|
<input class="wd-input" id="smoke-input" placeholder="e.g. Studio A SRT">
|
|
|
|
|
<div class="wd-hint">Letters, numbers, dashes. Used in clip filenames.</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-form-row">
|
|
|
|
|
<div class="wd-form-group">
|
|
|
|
|
<label class="wd-label" for="smoke-select">Codec</label>
|
|
|
|
|
<select class="wd-select" id="smoke-select">
|
|
|
|
|
<option>ProRes 422 HQ</option>
|
|
|
|
|
<option>H.264 NVENC</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-form-group">
|
|
|
|
|
<label class="wd-label" for="smoke-fps">Framerate</label>
|
|
|
|
|
<input class="wd-input" id="smoke-fps" value="29.97">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<label class="wd-toggle">
|
|
|
|
|
<input type="checkbox" checked>
|
|
|
|
|
<span class="wd-toggle-track"></span>
|
|
|
|
|
<span class="wd-toggle-label">Generate proxy</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Field group</h2>
|
|
|
|
|
<div style="max-width:460px; margin-bottom:32px;">
|
|
|
|
|
<div class="wd-field-group">
|
|
|
|
|
<div class="wd-field-group-header">
|
|
|
|
|
<span class="wd-field-group-title">Master recording</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-tabs">
|
|
|
|
|
<button class="wd-tab is-active">Video</button>
|
|
|
|
|
<button class="wd-tab">Audio</button>
|
|
|
|
|
<button class="wd-tab">Container</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-tab-panel is-active">
|
|
|
|
|
<div class="wd-form-row">
|
|
|
|
|
<div class="wd-form-group">
|
|
|
|
|
<label class="wd-label">Codec</label>
|
|
|
|
|
<select class="wd-select"><option>ProRes 422 HQ</option></select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wd-form-group">
|
|
|
|
|
<label class="wd-label">Resolution</label>
|
|
|
|
|
<select class="wd-select"><option>1920x1080</option></select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Empty state</h2>
|
|
|
|
|
<div class="wd-empty">
|
|
|
|
|
<svg class="wd-empty-icon" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
|
|
|
<rect x="2" y="6" width="18" height="16" rx="2"/><path d="M20 11l6-3v12l-6-3"/>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="wd-empty-title">No recorders yet</div>
|
|
|
|
|
<div class="wd-empty-body">Create a recorder to ingest live streams via SRT, RTMP, or SDI.</div>
|
|
|
|
|
<div class="wd-empty-actions">
|
|
|
|
|
<button class="wd-btn wd-btn--primary wd-btn--sm">+ New recorder</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
