| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Marquee — Setup Console & Broadcast</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Bebas+Neue&family=Nunito:wght@600;700;800;900&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="marquee.css"> |
| </head> |
| <body> |
|
|
| |
| |
| |
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"> |
| <defs> |
| <symbol id="i-clap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/><path d="m3 8 1.6-3.4 3.8 1L6.7 9M9.4 5.6l3.8 1L11.5 10M15 7l3.8 1-1.5 3.4M21 8l-.8-2.2-3.4-.9"/></symbol> |
| <symbol id="i-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></symbol> |
| <symbol id="i-pause" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></symbol> |
| <symbol id="i-star" viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z"/></symbol> |
| <symbol id="i-spot" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 3v3M5 6l2 2M19 6l-2 2"/><path d="M9 9h6l3 11H6z" fill="currentColor" opacity=".15"/><path d="M9 9h6l3 11H6z"/></symbol> |
| <symbol id="i-crown" viewBox="0 0 24 24" fill="currentColor"><path d="M3 7l4 4 5-7 5 7 4-4-2 12H5z"/></symbol> |
| <symbol id="i-bird" viewBox="0 0 24 24" fill="currentColor"><path d="M14 4a3 3 0 0 0-3 3c0 .5-.4 1-1 1.5-1.8 1.3-3 3.4-3 5.8C7 17.9 9.6 20 13 20c.6 0 1-.6.8-1.2C13.3 17 13 16 14 15c2.2-.4 4-2.3 4-4.8V7a3 3 0 0 0-3-3zm.6 3.2a.9.9 0 1 1 0-.1z"/></symbol> |
| <symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></symbol> |
| <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v10m0 0 4-4m-4 4-4-4M5 20h14"/></symbol> |
| <symbol id="i-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4"/></symbol> |
| <symbol id="i-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></symbol> |
| <symbol id="i-whistle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 11a5 5 0 0 0 5 5h4l5 3v-8a3 3 0 0 0-3-3H8a5 5 0 0 0-5 3Z"/><path d="M14 4v3"/></symbol> |
| <symbol id="i-glam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 14c2-1 4-1 5 0M16 14c2-1 4-1 5 0M3 11h18M7 11l1 5M17 11l-1 5"/><circle cx="6.5" cy="8.5" r="2"/><circle cx="17.5" cy="8.5" r="2"/></symbol> |
| <symbol id="i-paw" viewBox="0 0 24 24" fill="currentColor"><circle cx="6" cy="9" r="2"/><circle cx="11" cy="6" r="2"/><circle cx="16" cy="7" r="2"/><circle cx="19" cy="11" r="2"/><path d="M12 12c-3 0-6 2.5-6 5 0 2 2 3 6 3s6-1 6-3c0-2.5-3-5-6-5Z"/></symbol> |
| <symbol id="i-glove" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M7 10V6a2 2 0 0 1 4 0v3M11 9V5a2 2 0 0 1 4 0v5l2 1a3 3 0 0 1 1.4 3.4l-.8 3A2 2 0 0 1 15.7 21H10a3 3 0 0 1-2.8-2L5.5 14A2.5 2.5 0 0 1 7 10Z"/></symbol> |
| <symbol id="i-cam" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3z"/></symbol> |
| <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m4 12 5 5L20 6"/></symbol> |
| <symbol id="i-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></symbol> |
| <symbol id="i-portrait" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4.4"/><path d="M3.5 22c0-4.7 3.8-8 8.5-8s8.5 3.3 8.5 8z"/></symbol> |
| </defs> |
| </svg> |
|
|
| <div class="shell"> |
|
|
| |
| <header class="masthead"> |
| <div class="brand"> |
| <div class="sign"> |
| <div class="bulbs t"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> |
| <h1 class="disp">MARQUEE</h1> |
| <div class="bulbs b"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div> |
| </div> |
| <div class="tag">Everyone's a headliner.<small>Turn any clip into a live broadcast.</small></div> |
| </div> |
| <div class="broadcast-meta"> |
| <span class="clock" id="clock">--:--:--</span> |
| <span class="status" id="status"><span class="led"></span><span id="statusTxt">Standby</span></span> |
| </div> |
| </header> |
|
|
| |
| |
| |
| <section class="view active" id="setupView"> |
|
|
| |
| <nav class="rundown" id="rundown" aria-label="Show rundown"> |
| <div class="cue on" data-step="1"><div class="node">01</div><div class="ttl">Roll Tape</div><div class="sub">Drop a clip</div></div> |
| <div class="cue" data-step="2"><div class="node">02</div><div class="ttl">Casting</div><div class="sub">Find the faces</div></div> |
| <div class="cue" data-step="3"><div class="node">03</div><div class="ttl">Star Select</div><div class="sub">Name the stars</div></div> |
| <div class="cue" data-step="4"><div class="node">04</div><div class="ttl">Showtime</div><div class="sub">Go live</div></div> |
| </nav> |
|
|
| <div class="console"> |
|
|
| |
| <div class="desk"> |
|
|
| |
| <div class="card" id="rollCard"> |
| <div class="card-h"><svg class="i ic"><use href="#i-clap"/></svg><h2>Roll Tape</h2><span class="meta">SRC 01</span></div> |
| <div class="drop" id="drop" tabindex="0" role="button" aria-label="Drop a video clip to roll tape"> |
| <div class="ask"> |
| <span class="clap"><svg class="i"><use href="#i-clap"/></svg></span> |
| <div class="t">Drop a clip on the desk</div> |
| <div class="s">MP4 · MOV · up to 60s · portrait, landscape or square</div> |
| </div> |
| <div class="loaded"> |
| <div class="strip"><span class="play"><svg class="i"><use href="#i-play"/></svg></span></div> |
| <div> |
| <div class="fn" id="fileName">rooftop_freekick.mp4</div> |
| <div class="fd"><span id="fileDur">00:42</span> · 1080×1920 · ready to cast</div> |
| </div> |
| </div> |
| </div> |
| <input type="file" id="fileInput" accept="video/*" hidden> |
| <button class="btn cyan mt" id="castBtn" disabled><svg class="i"><use href="#i-spot"/></svg> Find the stars</button> |
| <div class="sweep"></div> |
| </div> |
|
|
| |
| <div class="card" id="vibeCard"> |
| <div class="card-h"><svg class="i ic"><use href="#i-mic"/></svg><h2>Pick the show</h2><span class="meta">TONE</span></div> |
| <div class="vibes" id="vibes" role="group" aria-label="Narration vibe"> |
| <button class="vibe" data-vibe="football" style="--vc:var(--star-lime)" aria-pressed="false"> |
| <span class="ic"><svg class="i"><use href="#i-whistle"/></svg></span> |
| <span><span class="vt">Football</span><span class="vd">Roaring play-by-play</span></span> |
| </button> |
| <button class="vibe" data-vibe="diva" style="--vc:var(--star-hot)" aria-pressed="false"> |
| <span class="ic"><svg class="i"><use href="#i-glam"/></svg></span> |
| <span><span class="vt">Diva Hour</span><span class="vd">Red-carpet shade</span></span> |
| </button> |
| <button class="vibe" data-vibe="wildlife" style="--vc:var(--star-cyan)" aria-pressed="false"> |
| <span class="ic"><svg class="i"><use href="#i-paw"/></svg></span> |
| <span><span class="vt">Wildlife</span><span class="vd">Hushed nature doc</span></span> |
| </button> |
| <button class="vibe" data-vibe="boxing" style="--vc:var(--star-tang)" aria-pressed="false"> |
| <span class="ic"><svg class="i"><use href="#i-glove"/></svg></span> |
| <span><span class="vt">Boxing</span><span class="vd">Ringside hype</span></span> |
| </button> |
| </div> |
|
|
| |
| <div class="coco" id="coco"> |
| <div class="av"> |
| <svg class="i bird"><use href="#i-bird"/></svg> |
| <span class="acc" id="cocoAcc"><svg><use href="#i-star"/></svg></span> |
| </div> |
| <div class="say"> |
| <span class="who">Coco · your host</span> |
| <span id="cocoLine">Pick a show and I'll set the mood. I dress for the occasion.</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button class="btn show" id="liveBtn" disabled><svg class="i"><use href="#i-star"/></svg> Showtime — go live</button> |
|
|
| </div> |
|
|
| |
| <div class="stage-panel" id="stagePanel"> |
| <div class="stage-h"> |
| <svg class="i ic"><use href="#i-spot"/></svg> |
| <h2>Star Select</h2> |
| <span class="count" id="starCount">NO CAST YET</span> |
| </div> |
|
|
| |
| <div class="empty" id="stageEmpty"> |
| <div class="spot"><svg class="i"><use href="#i-spot"/></svg></div> |
| <div class="t">The stage is dark</div> |
| <div class="s">Roll a clip and hit <b>Find the stars</b> — everyone we spot gets a card under the spotlight.</div> |
| </div> |
|
|
| |
| <div class="roster" id="roster" hidden></div> |
| </div> |
|
|
| </div> |
|
|
| <p class="note"> |
| <svg class="i lock"><use href="#i-lock"/></svg> |
| Your clip stays on <b>your machine</b>. Faces are detected locally and never uploaded — Marquee only writes the captions you see. |
| </p> |
| </section> |
|
|
| |
| |
| |
| <section class="view" id="broadcastView"> |
| <div class="booth-top"> |
| <button class="back" id="backBtn"><svg class="i"><use href="#i-back"/></svg> Back to console</button> |
| <div class="orient" role="group" aria-label="Clip orientation"> |
| <button data-orient="landscape" aria-pressed="true">16:9</button> |
| <button data-orient="square" aria-pressed="false">1:1</button> |
| <button data-orient="portrait" aria-pressed="false">9:16</button> |
| </div> |
| </div> |
|
|
| <div class="booth" id="booth"> |
| |
| <div> |
| <div class="screen-wrap"> |
| <div class="screen" id="screen"> |
| <video id="vid" class="screen-vid" playsinline preload="metadata"></video> |
| <div class="ph"><svg class="i"><use href="#i-cam"/></svg>YOUR CLIP PLAYS HERE</div> |
| <div class="bug"><span class="dot"></span> ON AIR</div> |
| <div class="tc" id="tc">00:00</div> |
| |
| <div class="chyron" id="chyron"> |
| <div class="bar"></div> |
| <div class="row"><span class="who" id="chyWho">COCO</span><span class="line" id="chyLine">Standing by…</span></div> |
| </div> |
| </div> |
| </div> |
| <div class="transport"> |
| <button class="pp" id="pp" aria-label="Play / pause"><svg class="i"><use href="#i-play"/></svg></button> |
| <div class="scrub" id="scrub"><div class="fill" id="fill"></div><div class="knob" id="knob"></div></div> |
| <span class="clock" id="tcDur" style="font-size:16px">00:42</span> |
| </div> |
| </div> |
|
|
| |
| <div class="pbp"> |
| <div class="pbp-h"><svg class="i ic"><use href="#i-list"/></svg><h3>Play-by-play</h3><span class="ct" id="pbpCt">— lines</span></div> |
| <div class="lines" id="lines"></div> |
| <div class="export"> |
| <button class="btn-srt" id="srtBtn"><svg class="i ic"><use href="#i-download"/></svg> Download captions (.srt)</button> |
| <div class="hint">Drops straight into <b>CapCut</b>, Premiere & DaVinci — timed to your clip.</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| </div> |
|
|
| <div class="toast" id="toast"><svg class="i ic"><use href="#i-check"/></svg><span id="toastTxt">Done</span></div> |
|
|
| <script src="marquee.js"></script> |
| </body> |
| </html> |
|
|
