| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Marquee | Live AI Broadcast Studio</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&family=Playfair+Display:ital,wght@1,700&family=Special+Elite&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> |
| <symbol id="i-chef" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z"/><line x1="6" y1="17" x2="18" y2="17"/></symbol> |
| <symbol id="i-film" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 4v16M17 4v16M2 12h20M2 8h5M2 16h5M17 8h5M17 16h5"/></symbol> |
| <symbol id="i-arrow-r" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></symbol> |
| <symbol id="i-loader" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></symbol> |
| </defs> |
| </svg> |
|
|
| |
| |
| |
| <div class="landing" id="landingView"> |
| <div class="landing-inner"> |
| <div class="landing-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> |
| <p class="landing-tag">Drop a clip. Pick your show. Everyone becomes a headliner.</p> |
| </div> |
|
|
| <div class="landing-pick"> |
| <p class="landing-prompt">Choose your broadcast style</p> |
| <div class="landing-vibes" id="landingVibes"> |
|
|
| <button class="lv-card" data-vibe="football"> |
| <div class="lv-icon"><svg class="i"><use href="#i-whistle"/></svg></div> |
| <div class="lv-body"> |
| <span class="lv-name">Football</span> |
| <span class="lv-desc">World Cup energy. Roaring play-by-play commentary for the beautiful game.</span> |
| </div> |
| <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg> |
| </button> |
|
|
| <button class="lv-card" data-vibe="diva"> |
| <div class="lv-icon"><svg class="i"><use href="#i-glam"/></svg></div> |
| <div class="lv-body"> |
| <span class="lv-name">Diva Hour</span> |
| <span class="lv-desc">Red carpet glamour. Fashion feedback, high drama, and unsolicited feedback.</span> |
| </div> |
| <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg> |
| </button> |
|
|
| <button class="lv-card" data-vibe="wildlife"> |
| <div class="lv-icon"><svg class="i"><use href="#i-paw"/></svg></div> |
| <div class="lv-body"> |
| <span class="lv-name">Wildlife</span> |
| <span class="lv-desc">Hushed. Awestruck. Narrating your friends like rare creatures in the wild.</span> |
| </div> |
| <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg> |
| </button> |
|
|
| <button class="lv-card" data-vibe="boxing"> |
| <div class="lv-icon"><svg class="i"><use href="#i-glove"/></svg></div> |
| <div class="lv-body"> |
| <span class="lv-name">Boxing</span> |
| <span class="lv-desc">Ringside. Every move is championship-defining. Nobody is safe from the hype.</span> |
| </div> |
| <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg> |
| </button> |
|
|
| <button class="lv-card" data-vibe="masterchef"> |
| <div class="lv-icon"><svg class="i"><use href="#i-chef"/></svg></div> |
| <div class="lv-body"> |
| <span class="lv-name">MasterChef</span> |
| <span class="lv-desc">High stakes. Brutal precision. A cooking-show judge who takes everything personally.</span> |
| </div> |
| <svg class="lv-arrow i"><use href="#i-arrow-r"/></svg> |
| </button> |
|
|
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| |
| |
| <div class="shell" id="appShell" hidden> |
|
|
| |
| <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" id="mastheadTag">Everyone's a headliner.<small>Turn any clip into a live broadcast.</small></div> |
| </div> |
| <div class="broadcast-meta"> |
| <button class="change-vibe-btn" id="changeVibeBtn" title="Change style">Change broadcast</button> |
| <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" id="step1Ttl">Roll Tape</div><div class="sub" id="step1Sub">Drop a clip</div></div> |
| <div class="cue" data-step="2"><div class="node">02</div><div class="ttl" id="step2Ttl">Casting</div><div class="sub" id="step2Sub">Find the faces</div></div> |
| <div class="cue" data-step="3"><div class="node">03</div><div class="ttl" id="step3Ttl">Star Select</div><div class="sub" id="step3Sub">Name the stars</div></div> |
| <div class="cue" data-step="4"><div class="node">04</div><div class="ttl" id="step4Ttl">Showtime</div><div class="sub" id="step4Sub">Go live</div></div> |
| </nav> |
|
|
| |
| <div class="vibe-banner" id="vibeBanner"> |
| <div class="vibe-banner-icon" id="vibeBannerIcon"></div> |
| <div class="vibe-banner-text" style="flex: 1;"> |
| <span class="vibe-banner-name skew-header" id="vibeBannerName">Football</span> |
| <span class="vibe-banner-desc" id="vibeBannerDesc">Turn any clip into a live sports broadcast.</span> |
| </div> |
| <div class="banner-wave" id="bannerWave" aria-hidden="true"> |
| <span></span><span></span><span></span><span></span><span></span> |
| </div> |
| </div> |
|
|
| <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 id="rollCardTitle">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"> |
| <div class="ask"> |
| <span class="clap"><svg class="i"><use href="#i-clap"/></svg></span> |
| <div class="t" id="dropTitle">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">clip.mp4</div> |
| <div class="fd"><span id="fileDur">00:42</span> | 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> |
| <span id="castBtnLabel">Find the stars</span> |
| </button> |
| <div class="sweep"></div> |
| </div> |
|
|
| |
| <div class="card voice-card" id="voiceCard"> |
| <div class="card-h"><svg class="i ic"><use href="#i-mic"/></svg><h2>Voice Model</h2><span class="meta">TTS Engine</span></div> |
| <div class="voice-opts" id="voiceOpts" role="group" aria-label="TTS voice model"> |
| <button class="voice-opt active" data-model="chatterbox" aria-pressed="true"> |
| <span class="vt">Chatterbox</span> |
| <span class="vd">Fast | expressive | 0.5B</span> |
| </button> |
| <button class="voice-opt" data-model="orpheus" aria-pressed="false"> |
| <span class="vt">Orpheus</span> |
| <span class="vd">Richer | slower | 3B</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <button class="btn show" id="liveBtn" disabled> |
| <svg class="i"><use href="#i-star"/></svg> |
| <span id="liveBtnLabel">Showtime | go live</span> |
| </button> |
|
|
| </div> |
|
|
| |
| <div class="stage-panel" id="stagePanel"> |
| <div class="stage-h"> |
| <svg class="i ic"><use href="#i-spot"/></svg> |
| <h2 id="stageTitle">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" id="stageEmptyTitle">The stage is dark</div> |
| <div class="s" id="stageEmptySub">Roll a clip and hit <b id="stageEmptyCta">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> |
| <span id="noteText">Your clip stays on <b>your machine</b>. Faces are detected locally and never uploaded | Marquee only writes the captions you see.</span> |
| </p> |
| </section> |
|
|
| |
| <section class="view" id="broadcastView"> |
| <div class="booth-top"> |
| <button class="back" id="backBtn"><svg class="i"><use href="#i-back"/></svg> <span id="backBtnLabel">Back to console</span></button> |
| </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 id="pbpTitle">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> |
| <button class="btn-export" id="exportBtn"><svg class="i ic"><use href="#i-download"/></svg> Export broadcast (.mp4)</button> |
| <div class="export-progress" id="exportProgress" hidden> |
| <div class="export-bar"><div class="export-fill" id="exportFill"></div></div> |
| <span class="export-label" id="exportLabel">Mixing audio…</span> |
| </div> |
| <div class="hint" id="exportHint" hidden>Video + Coco's voice + captions | ready to post.</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 type="module" src="marquee.js"></script> |
| </body> |
| </html> |
