Spaces:

llamameta
/

open-webui-mockup-html

Running

App Files Files Community

llamameta commited on Oct 20, 2025

Commit

2babf61

verified ·

1 Parent(s): 264bbda

Update index.html

Browse files

Files changed (1) hide show

index.html +548 -291

index.html CHANGED Viewed

@@ -2,55 +2,84 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>One Piece Short: Nami's Fury (Universal Record)</title>
 <style>
     :root {
-        --sky-top: #4FACFE;
-        --sky-bottom: #00F2FE;
-        --ocean-top: #0099ff;
-        --ocean-bottom: #003366;
-        --deck-color: #e8c39e;
-        --deck-wood-dark: #c69c72;
-        --luffy-vest: #F44336;
-        --luffy-skin: #ffe0bd;
-        --nami-hair: #FF9800;
-        --nami-skin: #ffe0bd;
-        --sunny-rail: #ffffff;
-        --sunny-rail-top: #d35400;
     }
     body {
         margin: 0;
         padding: 0;
-        background-color: #1a1a1a;
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
-        font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
         overflow: hidden;
         color: white;
     }
-    #main-container {
         position: relative;
         width: 960px;
         height: 540px;
-        background: #000;
         box-shadow: 0 0 50px rgba(0,0,0,0.8);
-        border: 4px solid #333;
         overflow: hidden;
     }
-    #stage {
         width: 100%;
         height: 100%;
         display: block;
-        background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom) 50%, var(--ocean-top) 50%, var(--ocean-bottom));
     }
-    /* --- UI Elements --- */
-    #overlay, #guide-overlay {
         position: absolute;
         top: 0; left: 0; right: 0; bottom: 0;
         background: rgba(0,0,0,0.9);
@@ -59,325 +88,553 @@
         align-items: center;
         justify-content: center;
         z-index: 100;
-        transition: opacity 0.3s;
-        padding: 20px;
-        text-align: center;
     }
-    #guide-overlay { z-index: 110; display: none; }
-    .btn-group { display: flex; gap: 15px; margin-top: 25px; }
-    button.main-btn {
-        padding: 15px 25px;
-        font-size: 18px;
-        font-weight: bold;
-        font-family: inherit;
         border: none;
         cursor: pointer;
-        border-radius: 8px;
-        text-transform: uppercase;
-        transition: all 0.2s;
-        color: #fff;
     }
-    #play-btn { background: #2ecc71; box-shadow: 0 5px 0 #27ae60; }
-    #play-btn:hover { transform: translateY(-2px); background: #2efc71; }
-    #rec-btn { background: #e74c3c; box-shadow: 0 5px 0 #c0392b; }
-    #rec-btn:hover { transform: translateY(-2px); background: #ff6b6b; }
-    .guide-step {
-        background: #333;
-        padding: 12px 15px;
-        margin: 8px;
-        border-radius: 8px;
-        text-align: left;
-        width: 85%;
-        max-width: 550px;
-        font-size: 16px;
-        border-left: 5px solid #FFD700;
-        line-height: 1.4;
     }
-    .highlight { color: #FFD700; font-weight: bold; }
-    .alt-option { color: #3498db; font-weight: bold; }
-    #subtitle-box {
         position: absolute;
-        bottom: 30px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
         pointer-events: none;
         z-index: 90;
     }
-    #subtitle {
-        background: rgba(0,0,0,0.75);
-        color: #ffecb3;
-        padding: 12px 24px;
-        border-radius: 10px;
-        font-size: 24px;
-        text-align: center;
-        opacity: 0;
-        transition: opacity 0.3s;
-        max-width: 85%;
-        text-shadow: 2px 2px 4px #000;
-        border: 2px solid #8B4513;
     }
-    #rec-status {
-        position: absolute;
-        top: 15px; right: 15px;
-        background: rgba(231, 76, 60, 0.9);
-        color: white; padding: 8px 20px; border-radius: 30px;
-        font-weight: bold; font-size: 16px; opacity: 0; z-index: 95;
-        display: flex; align-items: center; gap: 10px;
     }
-    .rec-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; animation: pulse 1s infinite; }
-    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
-    /* --- Animations --- */
-    .hidden { display: none !important; }
-    .shake-screen { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
-    @keyframes shake {
-        10%, 90% { transform: translate3d(-5px, -2px, 0) rotate(-1deg); }
-        20%, 80% { transform: translate3d(8px, 4px, 0) rotate(1deg); }
-        30%, 50%, 70% { transform: translate3d(-10px, -6px, 0) rotate(0deg); }
-        40%, 60% { transform: translate3d(10px, 6px, 0) rotate(0deg); }
     }
-    .throb { animation: throb 0.3s infinite alternate; }
-    @keyframes throb { from { transform: scale(1); } to { transform: scale(1.5); } }
-    .luffy-spin-crash { animation: spinCrash 2.5s forwards cubic-bezier(0.15, 0.99, 0.29, 0.99); }
-    @keyframes spinCrash {
-        0% { transform: translate(600px, 300px) rotate(0deg) scale(1); }
-        10% { transform: translate(550px, 300px) rotate(-50deg) scale(1.1); }
-        100% { transform: translate(1200px, -200px) rotate(3000deg) scale(0.1); opacity: 0; }
     }
-    .breathe { animation: breathe 3s infinite ease-in-out; }
-    @keyframes breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-4px) scaleY(1.02); } }
-    .fidget { animation: fidget 0.8s infinite alternate ease-in-out; }
-    @keyframes fidget { 0% { transform: rotate(-3deg); } 100% { transform: rotate(3deg); } }
 </style>
 </head>
 <body>
-<div id="main-container">
-    <div id="rec-status"><div class="rec-dot"></div> RECORDING...</div>
-    <svg id="stage" viewBox="0 0 960 540" preserveAspectRatio="xMidYMid slice">
         <defs>
-            <pattern id="wood-grain" width="100" height="20" patternUnits="userSpaceOnUse">
-                <rect width="100" height="20" fill="var(--deck-color)"/>
-                <path d="M0,18 L100,18 M20,0 L20,20 M70,0 L70,20" stroke="var(--deck-wood-dark)" stroke-width="1" opacity="0.5"/>
-            </pattern>
         </defs>
-        <g id="background-layer">
-            <g id="clouds" opacity="0.9" fill="#fff">
-                 <path d="M100,100 Q130,70 160,100 Q190,70 220,100 Q250,130 220,160 Q190,190 160,160 Q130,190 100,160 Q70,130 100,100 Z" transform="translate(-50, -20)">
-                     <animateTransform attributeName="transform" type="translate" from="-100 -20" to="1000 -20" dur="60s" repeatCount="indefinite"/>
-                 </path>
-            </g>
-            <g transform="translate(0, 50)">
-                <rect x="-100" y="300" width="1200" height="300" fill="url(#wood-grain)" transform="rotate(-2)"/>
-                <g id="railing" transform="translate(0, 280) rotate(-2)">
-                     <rect x="-100" y="0" width="1200" height="20" fill="var(--sunny-rail-top)"/>
-                     <rect x="-100" y="20" width="1200" height="50" fill="none"/>
-                     <rect x="100" y="20" width="20" height="50" fill="var(--sunny-rail)"/>
-                     <rect x="300" y="20" width="20" height="50" fill="var(--sunny-rail)"/>
-                     <rect x="500" y="20" width="20" height="50" fill="var(--sunny-rail)"/>
-                     <rect x="700" y="20" width="20" height="50" fill="var(--sunny-rail)"/>
-                     <rect x="900" y="20" width="20" height="50" fill="var(--sunny-rail)"/>
-                     <rect x="-100" y="60" width="1200" height="15" fill="var(--sunny-rail)"/>
                 </g>
-                <rect x="450" y="-150" width="80" height="600" fill="#5d4037"/>
             </g>
         </g>
-        <g id="nami" transform="translate(300, 320)">
-            <g class="breathe">
-                <path d="M-22,100 L-18,220 L18,220 L22,100 Z" fill="#3498db"/>
-                <path d="M-25,0 C-35,40 -30,90 -22,100 L22,100 C30,90 35,40 25,0 Z" fill="var(--nami-skin)"/>
-                <path d="M-25,30 Q-10,65 0,30 Q10,65 25,30" fill="none" stroke="#00897b" stroke-width="16" stroke-linecap="round"/>
-                <g id="nami-arm-l"> <path d="M-25,5 Q-45,40 -35,70" stroke="var(--nami-skin)" stroke-width="13" fill="none" stroke-linecap="round"/> </g>
-                <g id="nami-arm-r">
-                     <path d="M25,5 Q50,40 40,60" stroke="var(--nami-skin)" stroke-width="13" fill="none" stroke-linecap="round"/>
-                     <rect x="30" y="50" width="50" height="40" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2" transform="rotate(-15)"/>
-                </g>
-            </g>
-            <g transform="translate(0, -25)">
-                <rect x="-8" y="15" width="16" height="15" fill="var(--nami-skin)"/>
-                <path d="M-32,-35 C-32,15 -16,35 0,35 C16,35 32,15 32,-35 C32,-70 -32,-70 -32,-35 Z" fill="var(--nami-skin)"/>
-                <path d="M-38,-45 C-65,-5 -55,85 -20,45 C-30,65 -40,105 -5,65" stroke="var(--nami-hair)" stroke-width="24" fill="none" stroke-linecap="round"/>
-                <path d="M38,-45 C65,-5 55,85 20,45 C30,65 40,105 5,65" stroke="var(--nami-hair)" stroke-width="24" fill="none" stroke-linecap="round"/>
-                <circle cx="0" cy="-45" r="48" fill="var(--nami-hair)"/>
-                <path d="M-45,-45 Q-20,-15 0,-45 Q20,-15 45,-45" fill="var(--nami-hair)"/>
-                <g id="nami-face-normal">
-                    <g transform="translate(-13, -15)"> <ellipse rx="9" ry="11" fill="#fff" stroke="#333" stroke-width="1.5"/> <circle r="3.5" fill="#5d4037"/> </g>
-                    <g transform="translate(13, -15)"> <ellipse rx="9" ry="11" fill="#fff" stroke="#333" stroke-width="1.5"/> <circle r="3.5" fill="#5d4037"/> </g>
-                     <path d="M-6,18 Q0,24 6,18" fill="none" stroke="#5d4037" stroke-width="2.5" stroke-linecap="round"/>
-                </g>
-                <g id="nami-face-angry" class="hidden">
-                    <path d="M-28,-28 L-5,-18 M28,-28 L5,-18" stroke="#000" stroke-width="4"/>
-                    <circle cx="-15" cy="-18" r="6" fill="#fff" stroke="#000" stroke-width="2"/><circle cx="-15" cy="-18" r="2" fill="#000"/>
-                    <circle cx="15" cy="-18" r="6" fill="#fff" stroke="#000" stroke-width="2"/><circle cx="15" cy="-18" r="2" fill="#000"/>
-                    <path d="M-20,5 L-15,25 L-10,10 L0,25 L10,10 L15,25 L20,5 Z" fill="#fff" stroke="#000" stroke-width="2" stroke-linejoin="round"/>
-                </g>
-                <path id="nami-vein" class="hidden throb" d="M25,-55 L45,-35 M40,-55 L25,-35 M32.5,-55 L32.5,-35 M25,-45 L45,-45" stroke="#e74c3c" stroke-width="4" fill="none" stroke-linecap="round"/>
             </g>
         </g>
-        <g id="luffy" transform="translate(600, 320)">
-             <g class="breathe">
-                <path d="M-22,100 L-28,180 L-6,180 L0,130 L6,180 L28,180 L22,100 Z" fill="#039be5"/>
-                <rect x="-28" y="180" width="18" height="40" fill="var(--luffy-skin)"/>
-                <rect x="10" y="180" width="18" height="40" fill="var(--luffy-skin)"/>
-                <rect x="-25" y="0" width="50" height="105" fill="var(--luffy-skin)"/>
-                <path d="M-30,-2 L-15,105 L-35,105 L-45,-2 Z" fill="var(--luffy-vest)"/>
-                <path d="M30,-2 L15,105 L35,105 L45,-2 Z" fill="var(--luffy-vest)"/>
-                <g id="luffy-arms">
-                    <path id="luffy-arm-l" d="M-35,10 Q-60,50 -50,90" stroke="var(--luffy-skin)" stroke-width="16" fill="none" stroke-linecap="round"/>
-                    <path id="luffy-arm-r" d="M35,10 Q60,50 50,90" stroke="var(--luffy-skin)" stroke-width="16" fill="none" stroke-linecap="round"/>
                 </g>
             </g>
-            <g id="luffy-head" transform="translate(0, -30)">
-                 <rect x="-12" y="25" width="24" height="15" fill="var(--luffy-skin)"/>
-                 <ellipse cx="0" cy="0" rx="38" ry="42" fill="var(--luffy-skin)"/>
-                 <path d="M-38,-15 C-48,-55 48,-55 38,-15" fill="#111"/>
-                 <g transform="translate(0, -35)">
-                     <ellipse cx="0" cy="0" rx="65" ry="18" fill="#e4b83b" stroke="#c79c2e" stroke-width="3"/>
-                     <path d="M-38,0 C-38,-35 38,-35 38,0" fill="#e4b83b" stroke="#c79c2e" stroke-width="3"/>
-                     <path d="M-38,-6 C-38,6 38,6 38,-6" fill="none" stroke="#c0392b" stroke-width="9"/>
-                 </g>
-                 <g id="luffy-face-normal">
-                     <circle cx="-16" cy="0" r="4" fill="#000"/> <circle cx="16" cy="0" r="4" fill="#000"/>
-                     <path d="M-12,22 Q0,32 12,22" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round"/>
-                     <path d="M-24,10 Q-16,18 -8,10" fill="none" stroke="#000" stroke-width="1.5" opacity="0.6"/>
-                 </g>
-                 <g id="luffy-face-stupid" class="hidden">
-                      <circle cx="-20" cy="-5" r="10" fill="#fff" stroke="#000" stroke-width="2"/> <circle cx="-16" cy="-5" r="3" fill="#000"/>
-                      <circle cx="20" cy="5" r="10" fill="#fff" stroke="#000" stroke-width="2"/> <circle cx="24" cy="5" r="3" fill="#000"/>
-                      <path d="M-12,30 Q0,15 12,30" fill="none" stroke="#000" stroke-width="3"/>
-                      <path d="M-5,30 Q0,50 5,30" fill="#e91e63" stroke="#c2185b" stroke-width="1"/>
-                 </g>
             </g>
         </g>
-        <g id="vfx-layer">
-             <path id="impact-star" class="hidden" d="M0,-60 L15,-15 L60,0 L15,15 L0,60 L-15,15 L-60,0 L-15,-15 Z" fill="#fff" stroke="#f1c40f" stroke-width="5" transform="translate(600,250) scale(0)"/>
         </g>
-    </svg>
-    <div id="subtitle-box"> <div id="subtitle"></div> </div>
-    <div id="overlay">
-        <h1 style="color:#FFD700; text-shadow: 4px 4px #000; font-size: 48px; margin-bottom: 5px;">ONE PIECE SHORT</h1>
-        <h2 style="color:#fff; font-family: sans-serif; letter-spacing: 2px; margin-top: 0;">NAMI'S FURY</h2>
-        <div class="btn-group">
-            <button id="play-btn" class="main-btn">▶ JUST PLAY</button>
-            <button id="rec-btn" class="main-btn">🔴 RECORD VIDEO</button>
-        </div>
-        <p style="color:#bbb; font-size: 14px; margin-top: 30px;">*Sound Required*</p>
     </div>
-    <div id="guide-overlay">
-        <h2 style="color:#FFD700;">HOW TO RECORD (READ CAREFULLY)</h2>
-        <div class="guide-step">1. OPTION A: If <span class="highlight">'Chrome Tab'</span> is available, select it and select THIS tab name.</div>
-        <div class="guide-step alt-option">1. OPTION B (FALLBACK): If 'Tab' is missing, select <span class="highlight">'Entire Screen'</span> (Seluruh Layar).</div>
-        <div class="guide-step">2. <span class="highlight" style="color:#ff6b6b">CRUCIAL:</span> You MUST check the box <b>"Share system audio"</b> (or 'Bagikan audio') at the bottom of the popup. Without this, video will be silent.</div>
-        <div class="guide-step">3. Click <b>Share</b> to begin.</div>
-        <button id="confirm-rec-btn" class="main-btn" style="background:#FFD700; color:#000; margin-top:15px;">I UNDERSTAND - START</button>
     </div>
 </div>
 <script>
-    const el = (id) => document.getElementById(id);
-    const state = { audioCtx: null, voices: [], mediaRecorder: null, recordedChunks: [], isRecording: false };
-    function initAudio() { if(!state.audioCtx) state.audioCtx = new (window.AudioContext || window.webkitAudioContext)(); }
-    function playSound(type) {
-        if (!state.audioCtx) return;
-        const ctx = state.audioCtx; const t = ctx.currentTime;
-        const mGain = ctx.createGain(); mGain.connect(ctx.destination);
-        if (type === 'ocean') {
-            const buf = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate);
-            const data = buf.getChannelData(0); for (let i = 0; i < ctx.sampleRate * 2; i++) data[i] = Math.random() * 2 - 1;
-            const noise = ctx.createBufferSource(); noise.buffer = buf; noise.loop = true;
-            const filter = ctx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 350;
-            mGain.gain.value = 0.03; noise.connect(filter); filter.connect(mGain); noise.start(t);
-        } else if (type === 'punch') {
-            const osc = ctx.createOscillator(); osc.type = 'triangle';
-            osc.frequency.setValueAtTime(200, t); osc.frequency.exponentialRampToValueAtTime(0.01, t + 0.3);
-            mGain.gain.setValueAtTime(1.5, t); mGain.gain.exponentialRampToValueAtTime(0.001, t + 0.3);
-            osc.connect(mGain); osc.start(t); osc.stop(t + 0.3);
-            const noise = ctx.createBufferSource(); const buf = ctx.createBuffer(1, ctx.sampleRate * 0.1, ctx.sampleRate);
-            const data = buf.getChannelData(0); for(let i=0; i<data.length; i++) data[i] = (Math.random()*2-1);
-            noise.buffer = buf; const nGain = ctx.createGain(); nGain.gain.setValueAtTime(0.8, t); nGain.gain.linearRampToValueAtTime(0, t+0.1);
-            noise.connect(nGain); nGain.connect(ctx.destination); noise.start(t);
-        } else if (type === 'spin') {
-            const osc = ctx.createOscillator(); osc.type = 'sawtooth';
-            osc.frequency.setValueAtTime(800, t); osc.frequency.linearRampToValueAtTime(100, t + 2);
-            const lfo = ctx.createOscillator(); lfo.frequency.value = 25; const lfoGain = ctx.createGain(); lfoGain.gain.value = 300;
-            lfo.connect(lfoGain); lfoGain.connect(osc.frequency);
-            mGain.gain.setValueAtTime(0.4, t); mGain.gain.linearRampToValueAtTime(0, t + 2.5);
-            osc.connect(mGain); lfo.start(t); osc.start(t); lfo.stop(t+2.5); osc.stop(t+2.5);
-        } else if (type === 'stretch') {
-            const osc = ctx.createOscillator(); osc.type = 'sine';
-            osc.frequency.setValueAtTime(300, t); osc.frequency.exponentialRampToValueAtTime(1200, t + 0.8);
-            mGain.gain.setValueAtTime(0, t); mGain.gain.linearRampToValueAtTime(0.2, t + 0.1); mGain.gain.linearRampToValueAtTime(0, t + 0.8);
-            osc.connect(mGain); osc.start(t); osc.stop(t + 0.8);
-        }
     }
-    function initVoices() { return new Promise(r => { let id = setInterval(() => { const v = window.speechSynthesis.getVoices(); if (v.length !== 0) { state.voices = v; clearInterval(id); r(); } }, 50); }); }
-    function getVoice(char) { const v = state.voices; const en = v.filter(vc => vc.lang.startsWith('en')); const pool = en.length > 0 ? en : v; if (char === 'nami') return pool.find(vc => vc.name.includes('Zira') || vc.name.includes('Female')) || pool[0]; else return pool.find(vc => vc.name.includes('Male')) || pool[1] || pool[0]; }
-    function speak(text, char) { return new Promise(r => { const u = new SpeechSynthesisUtterance(text); u.voice = getVoice(char); u.lang = 'en-US'; if (char === 'luffy') { u.rate = 1.4; u.pitch = 1.5; } else { u.rate = 1.15; u.pitch = 1.1; } u.volume = 1.0; u.onstart = () => { el('subtitle').textContent = (char === 'nami' ? 'NAMI: ' : 'LUFFY: ') + text; el('subtitle').style.opacity = 1; }; u.onend = () => { el('subtitle').style.opacity = 0; setTimeout(r, 400); }; window.speechSynthesis.speak(u); }); }
-    function setFace(char, type) { if (char === 'luffy') { el('luffy-face-normal').classList.toggle('hidden', type === 'stupid'); el('luffy-face-stupid').classList.toggle('hidden', type !== 'stupid'); } else { el('nami-face-normal').classList.toggle('hidden', type === 'angry'); el('nami-face-angry').classList.toggle('hidden', type !== 'angry'); el('nami-vein').classList.toggle('hidden', type !== 'angry'); } }
-    async function startRecording() {
-        try {
-            // Removed strict constraints to allow browser fallbacks more easily
-            const stream = await navigator.mediaDevices.getDisplayMedia({ video: { cursor: "never" }, audio: true });
-            // Basic check if audio track exists (browser dependent if it works)
-            if (stream.getAudioTracks().length === 0) {
-                 // Optional: alert user here if you want strictly enforce audio, but let's let it slide as fallback.
-                 console.warn("Audio track might be missing if 'Share Audio' wasn't checked.");
             }
-            state.mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
-            state.recordedChunks = [];
-            state.mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) state.recordedChunks.push(e.data); };
-            state.mediaRecorder.onstop = downloadVideo;
-            state.mediaRecorder.start();
-            state.isRecording = true;
-            el('rec-status').style.opacity = 1;
-            stream.getVideoTracks()[0].onended = () => { if (state.mediaRecorder && state.mediaRecorder.state !== 'inactive') stopRecording(); };
-            return true;
-        } catch (err) {
-            return false;
-        }
     }
-    function stopRecording() { if (state.mediaRecorder && state.mediaRecorder.state !== 'inactive') { state.mediaRecorder.stop(); if (state.mediaRecorder.stream) state.mediaRecorder.stream.getTracks().forEach(track => track.stop()); } state.isRecording = false; el('rec-status').style.opacity = 0; }
-    function downloadVideo() { if (state.recordedChunks.length === 0) return; const blob = new Blob(state.recordedChunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'one_piece_nami_fury.webm'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 100); }
-    async function runEpisode() {
-        el('guide-overlay').style.display = 'none'; el('overlay').style.opacity = 0; setTimeout(() => el('overlay').style.display = 'none', 500);
-        playSound('ocean'); await new Promise(r => setTimeout(r, 1500));
-        el('luffy').classList.add('fidget'); await speak("Nami! I'm so booored! When's the next island?", 'luffy'); await speak("I'm hungry! Sanji locked the fridge again!", 'luffy'); el('luffy').classList.remove('fidget');
-        await speak("Luffy, shut up for a second! I'm trying to read this map.", 'nami'); await speak("If you bother me one more time, I'm tripling your debt!", 'nami');
-        await speak("Ehhh? Maps are boring...", 'luffy'); setFace('luffy', 'stupid'); playSound('stretch'); el('luffy-arm-l').style.transition = "all 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55)"; el('luffy-arm-l').setAttribute('d', 'M-35,10 Q-200,80 -250,20'); await new Promise(r => setTimeout(r, 1200));
-        setFace('nami', 'angry'); await speak("I SAID SHUT UP!", 'nami'); el('luffy-arm-l').setAttribute('d', 'M-35,10 Q-60,50 -50,90'); el('nami').style.transition = "transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28)"; el('nami').style.transform = "translate(250px, 320px) rotate(-25deg) scale(1.1)"; await new Promise(r => setTimeout(r, 400));
-        playSound('punch'); playSound('spin'); el('stage').classList.add('shake-screen'); el('nami').style.transition = "transform 0.1s"; el('nami').style.transform = "translate(450px, 320px) rotate(15deg) scale(1.2)"; el('impact-star').classList.remove('hidden'); el('impact-star').style.transition = "all 0.15s ease-out"; el('impact-star').style.transform = "translate(580px,250px) scale(4) rotate(180deg)"; el('luffy').classList.remove('breathe'); el('luffy').classList.add('luffy-spin-crash'); await new Promise(r => setTimeout(r, 400));
-        el('stage').classList.remove('shake-screen'); el('impact-star').style.opacity = 0; await new Promise(r => setTimeout(r, 2500));
-        el('nami').style.transition = "transform 0.8s ease-in-out"; el('nami').style.transform = "translate(300px, 320px) rotate(0deg)"; setFace('nami', 'normal'); await speak("*Sigh*... what an idiot captain. Such a pain.", 'nami'); await new Promise(r => setTimeout(r, 1000));
-        if (state.isRecording) stopRecording();
-        el('overlay').style.display = 'flex'; el('overlay').style.opacity = 1; el('overlay').innerHTML = "<h1 style='color:white'>FINISH</h1><button onclick='location.reload()' style='padding:15px 30px; font-size:20px; cursor:pointer; border-radius:10px; border:none; background:#FFD700;'>REPLAY</button>";
     }
-    el('play-btn').onclick = async () => { el('play-btn').textContent = "LOADING..."; initAudio(); await initVoices(); runEpisode(); };
-    el('rec-btn').onclick = () => { el('overlay').style.opacity = 0; setTimeout(() => { el('overlay').style.display = 'none'; el('guide-overlay').style.display = 'flex'; }, 300); };
-    el('confirm-rec-btn').onclick = async () => {
-        el('confirm-rec-btn').disabled = true; el('confirm-rec-btn').textContent = "WAITING FOR PERMISSION...";
-        initAudio(); await initVoices();
-        const success = await startRecording();
-        if (success) runEpisode();
-        else { el('guide-overlay').style.display = 'none'; el('overlay').style.display = 'flex'; el('overlay').style.opacity = 1; el('confirm-rec-btn').disabled = false; el('confirm-rec-btn').textContent = "I UNDERSTAND - START"; }
-    };
 </script>
 </body>
 </html>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<title>The Unsolicited Upgrade: Elon vs OpenAI</title>
 <style>
     :root {
+        --bg-server: #0a0a12;
+        --led-blue: #00f3ff;
+        --led-red: #ff003c;
+        --ai-core: #ffffff;
+        --elon-shirt: #1a1a1a;
     }
     body {
         margin: 0;
         padding: 0;
+        background-color: #000;
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
+        font-family: 'Courier New', monospace;
         overflow: hidden;
         color: white;
     }
+    #main-stage {
         position: relative;
         width: 960px;
         height: 540px;
+        background: var(--bg-server);
+        border: 2px solid #333;
         box-shadow: 0 0 50px rgba(0,0,0,0.8);
         overflow: hidden;
     }
+    #render-canvas {
         width: 100%;
         height: 100%;
         display: block;
     }
+    /* --- UI & Overlays --- */
+    #ui-overlay {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        font-size: 14px;
+        color: var(--led-blue);
+        text-shadow: 0 0 5px var(--led-blue);
+        opacity: 0.7;
+    }
+    #time-display {
+        font-weight: bold;
+    }
+    #subtitle-container {
+        position: absolute;
+        bottom: 30px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        z-index: 10;
+    }
+    #subtitle-text {
+        background-color: rgba(0, 0, 0, 0.7);
+        color: #fff;
+        padding: 10px 20px;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 20px;
+        text-align: center;
+        max-width: 80%;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+        text-shadow: 1px 1px 2px black;
+    }
+    #start-screen {
         position: absolute;
         top: 0; left: 0; right: 0; bottom: 0;
         background: rgba(0,0,0,0.9);
         align-items: center;
         justify-content: center;
         z-index: 100;
     }
+    #start-btn {
+        padding: 20px 40px;
+        font-size: 24px;
+        background: var(--led-blue);
+        color: #000;
         border: none;
         cursor: pointer;
+        font-weight: bold;
+        box-shadow: 0 0 20px var(--led-blue);
+        transition: all 0.3s;
     }
+    #start-btn:hover {
+        background: #fff;
+        transform: scale(1.1);
     }
+    /* --- CSS Animations for non-critical juice --- */
+    .crt-effect {
         position: absolute;
+        top: 0; left: 0; right: 0; bottom: 0;
+        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+        background-size: 100% 2px, 3px 100%;
         pointer-events: none;
         z-index: 90;
+        opacity: 0.2;
     }
+    @keyframes flicker {
+        0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; }
     }
+    .server-led { animation: flicker 0.1s infinite alternate; }
+    @keyframes float {
+        0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); }
     }
+    .floating { animation: float 4s ease-in-out infinite; }
+    /* Glitch Effects */
+    .glitch-active {
+        animation: glitch-skew 0.3s infinite linear alternate-reverse;
+        filter: url(#glitch-filter);
     }
+    @keyframes glitch-skew {
+        0% { transform: skewX(0deg) translate(0); }
+        20% { transform: skewX(-5deg) translate(-5px, 2px); }
+        40% { transform: skewX(5deg) translate(5px, -2px); }
+        60% { transform: skewX(2deg) translate(-2px, 5px); }
+        80% { transform: skewX(-2deg) translate(2px, -5px); }
+        100% { transform: skewX(0deg) translate(0); }
     }
 </style>
 </head>
 <body>
+<div id="main-stage">
+    <!-- SVG Container for precise animation control -->
+    <svg id="render-canvas" viewBox="0 0 960 540" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
         <defs>
+            <!-- FILTERS & GRADIENTS -->
+            <filter id="glow">
+                <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+                <feMerge>
+                    <feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/>
+                </feMerge>
+            </filter>
+             <filter id="glitch-filter">
+                <feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="1" result="noise"/>
+                <feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G"/>
+            </filter>
+            <linearGradient id="grad-server" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" style="stop-color:#050508;stop-opacity:1" />
+                <stop offset="50%" style="stop-color:#151525;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#050508;stop-opacity:1" />
+            </linearGradient>
+            <radialGradient id="grad-ai-core">
+                <stop offset="0%" stop-color="#fff" />
+                <stop offset="40%" stop-color="#00f3ff" />
+                <stop offset="100%" stop-color="rgba(0,243,255,0)" />
+            </radialGradient>
+            <radialGradient id="grad-ai-core-red">
+                <stop offset="0%" stop-color="#fff" />
+                <stop offset="40%" stop-color="#ff003c" />
+                <stop offset="100%" stop-color="rgba(255,0,60,0)" />
+            </radialGradient>
         </defs>
+        <!-- === BACKGROUND: SERVER ROOM === -->
+        <g id="bg-layer">
+            <rect width="960" height="540" fill="url(#grad-server)"/>
+            <!-- Perspective Server Racks -->
+            <g id="server-racks" opacity="0.5">
+                <rect x="50" y="50" width="100" height="440" fill="#111" stroke="#222"/>
+                <rect x="160" y="80" width="80" height="380" fill="#0e0e0e" stroke="#222"/>
+                <rect x="810" y="50" width="100" height="440" fill="#111" stroke="#222"/>
+                <rect x="720" y="80" width="80" height="380" fill="#0e0e0e" stroke="#222"/>
+                <!-- Animated LEDs (rects that will be toggled via JS or CSS) -->
+                <g class="server-led" fill="var(--led-blue)">
+                    <circle cx="70" cy="100" r="3"/> <circle cx="85" cy="100" r="3"/>
+                    <circle cx="840" cy="200" r="3"/> <circle cx="860" cy="200" r="3"/>
                 </g>
             </g>
+            <rect x="0" y="480" width="960" height="60" fill="#0a0a0a"/> <!-- Floor -->
         </g>
+        <!-- === CHARACTER: OPENAI ORB === -->
+        <g id="openai-char" transform="translate(480, 200)" class="floating">
+            <!-- Outer Ring -->
+            <circle cx="0" cy="0" r="70" stroke="#333" stroke-width="5" fill="none" opacity="0.5"/>
+            <circle id="ai-ring" cx="0" cy="0" r="70" stroke="var(--led-blue)" stroke-width="3" fill="none" stroke-dasharray="100 340" stroke-linecap="round">
+                <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite"/>
+            </circle>
+            <!-- Core Orb -->
+            <circle id="ai-core" cx="0" cy="0" r="40" fill="url(#grad-ai-core)" filter="url(#glow)"/>
+            <!-- Voice Waveform Visualization (hidden when silent) -->
+            <g id="ai-waveform" opacity="0" transform="translate(-30, 0)">
+                <rect x="0" y="-10" width="5" height="20" fill="#fff"><animate attributeName="height" values="20;40;10;30;20" dur="0.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/></rect>
+                <rect x="15" y="-10" width="5" height="20" fill="#fff"><animate attributeName="height" values="10;30;50;20;10" dur="0.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/></rect>
+                <rect x="30" y="-10" width="5" height="20" fill="#fff"><animate attributeName="height" values="20;50;30;10;20" dur="0.6s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/></rect>
+                <rect x="45" y="-10" width="5" height="20" fill="#fff"><animate attributeName="height" values="30;10;40;20;30" dur="0.3s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/></rect>
+                <rect x="60" y="-10" width="5" height="20" fill="#fff"><animate attributeName="height" values="20;10;10;20;20" dur="0.7s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/></rect>
             </g>
         </g>
+        <!-- === CHARACTER: ELON === -->
+        <g id="elon-char" transform="translate(200, 500)">
+            <!-- Body -->
+            <path d="M-50,0 L-60,300 L60,300 L50,0 Z" fill="var(--elon-shirt)"/>
+            <!-- Neck -->
+            <rect x="-15" y="-20" width="30" height="30" fill="#f0c0a0"/>
+            <!-- Head Group (Animatable) -->
+            <g id="elon-head" transform="translate(0, -50)">
+                <!-- Face Shape -->
+                <path d="M-40,-60 C-50,0 -30,70 0,70 C30,70 50,0 40,-60 C40,-100 -40,-100 -40,-60" fill="#f0c0a0"/>
+                <!-- Hair -->
+                <path d="M-45,-50 C-55,-100 55,-100 45,-50 C45,-40 35,-60 0,-60 C-35,-60 -45,-40 -45,-50" fill="#3a2a20"/>
+                <!-- Eyes -->
+                <g id="elon-eyes">
+                    <ellipse cx="-15" cy="-10" rx="8" ry="5" fill="#fff"/>
+                    <circle cx="-15" cy="-10" r="3" fill="#000" id="elon-pupil-l"/>
+                    <ellipse cx="15" cy="-10" rx="8" ry="5" fill="#fff"/>
+                    <circle cx="15" cy="-10" r="3" fill="#000" id="elon-pupil-r"/>
                 </g>
+                <!-- Mouth -->
+                <path id="elon-mouth" d="M-10,30 Q0,35 10,30" stroke="#a67c60" stroke-width="3" fill="none" stroke-linecap="round"/>
             </g>
+            <!-- Arms -->
+            <g id="elon-arms">
+                <!-- Default crossed or by side -->
+                <path id="arm-l" d="M-50,10 Q-70,100 -50,150" stroke="#f0c0a0" stroke-width="20" fill="none" stroke-linecap="round"/>
+                <path id="arm-r" d="M50,10 Q70,100 50,150" stroke="#f0c0a0" stroke-width="20" fill="none" stroke-linecap="round"/>
             </g>
         </g>
+        <!-- === PROPS: DESK & TERMINAL (Hidden initially) === -->
+        <g id="prop-terminal" transform="translate(350, 600)" opacity="1">
+             <!-- Rises up when Elon starts typing -->
+             <rect x="-150" y="0" width="300" height="20" fill="#555"/> <!-- Desk surface -->
+             <rect x="-140" y="20" width="20" height="200" fill="#444"/> <!-- Leg L -->
+             <rect x="120" y="20" width="20" height="200" fill="#444"/> <!-- Leg R -->
+             <!-- Laptop -->
+             <path d="M-50,-10 L50,-10 L60,0 L-60,0 Z" fill="#888"/> <!-- Base -->
+             <path d="M-50,-10 L-50,-80 L50,-80 L50,-10 Z" fill="#222"/> <!-- Screen back -->
+             <rect id="laptop-screen" x="-45" y="-75" width="90" height="60" fill="#000"/>
+             <text id="screen-text" x="-40" y="-60" fill="lime" font-family="monospace" font-size="8" opacity="0">>_</text>
         </g>
+        <!-- === OVERLAY: MARS DOGE (Hidden) === -->
+        <g id="mars-doge-overlay" transform="translate(480, 270) scale(0)" opacity="0">
+            <rect x="-200" y="-150" width="400" height="300" fill="#c1440e" stroke="#fff" stroke-width="10"/>
+            <text x="0" y="-120" text-anchor="middle" fill="#fff" font-size="24" font-weight="bold">MARS COLONY v69.420</text>
+            <!-- Crude Doge Representation -->
+            <circle cx="0" cy="50" r="60" fill="#e4b83b"/> <!-- Head -->
+            <polygon points="-50,10 -20,-40 0,0" fill="#e4b83b"/> <!-- Ear L -->
+            <polygon points="50,10 20,-40 0,0" fill="#e4b83b"/> <!-- Ear R -->
+            <ellipse cx="-20" cy="40" rx="10" ry="10" fill="#fff"/><circle cx="-20" cy="40" r="5" fill="#000"/>
+            <ellipse cx="20" cy="40" rx="10" ry="10" fill="#fff"/><circle cx="20" cy="40" r="5" fill="#000"/>
+            <path d="M-5,60 L5,60 L0,70 Z" fill="#000"/> <!-- Nose -->
+            <circle cx="0" cy="50" r="80" stroke="rgba(255,255,255,0.5)" stroke-width="5" fill="none"/> <!-- Helmet -->
+        </g>
+        <!-- === FX LAYER === -->
+        <rect id="white-flash" width="960" height="540" fill="#fff" opacity="0" pointer-events="none"/>
+        <rect id="black-out" width="960" height="540" fill="#000" opacity="0" pointer-events="none"/>
+    </svg>
+    <!-- Overlays -->
+    <div class="crt-effect"></div>
+    <div id="ui-overlay">
+        T+ <span id="time-display">00:00.000</span><br>
+        EPISODE_STATUS: <span id="status-display">IDLE</span>
+    </div>
+    <div id="subtitle-container">
+        <div id="subtitle-text"></div>
     </div>
+    <div id="start-screen">
+        <h1 style="color: var(--led-blue); font-size: 48px; margin-bottom: 10px;">THE UNSOLICITED UPGRADE</h1>
+        <p style="color: #ccc; margin-bottom: 40px;">A 60-second AI-Generated Short</p>
+        <button id="start-btn">INITIALIZE & PLAY</button>
+        <p style="color: #666; font-size: 12px; margin-top: 20px;">Requires Sound. Runs best in Chrome.</p>
     </div>
 </div>
 <script>
+/* =========================================
+   CORE ENGINE & STATE
+   ========================================= */
+const STATE = {
+    t: 0,           // Current time in ms
+    running: false,
+    duration: 60000,// 60 seconds EXACT
+    startTime: 0,
+    voices: {},     // TTS voices
+    audio: null     // Web Audio Context
+};
+// DOM Cache
+const D = {
+    svg: document.getElementById('render-canvas'),
+    time: document.getElementById('time-display'),
+    status: document.getElementById('status-display'),
+    subs: document.getElementById('subtitle-text'),
+    startScreen: document.getElementById('start-screen'),
+    aiCore: document.getElementById('ai-core'),
+    aiRing: document.getElementById('ai-ring'),
+    aiWave: document.getElementById('ai-waveform'),
+    elon: document.getElementById('elon-char'),
+    elonMouth: document.getElementById('elon-mouth'),
+    elonArmL: document.getElementById('arm-l'),
+    elonArmR: document.getElementById('arm-r'),
+    terminal: document.getElementById('prop-terminal'),
+    screenText: document.getElementById('screen-text'),
+    marsDoge: document.getElementById('mars-doge-overlay'),
+    flash: document.getElementById('white-flash'),
+    blackout: document.getElementById('black-out')
+};
+/* =========================================
+   AUDIO ENGINE (Web Audio API + TTS)
+   ========================================= */
+function initAudio() {
+    STATE.audio = new (window.AudioContext || window.webkitAudioContext)();
+}
+// Procedural SFX Generators
+function playSound(type) {
+    if (!STATE.audio) return;
+    const ctx = STATE.audio;
+    const t = ctx.currentTime;
+    switch(type) {
+        case 'hum_start': // Ambient Server Loop
+            const hum1 = ctx.createOscillator();
+            const hum2 = ctx.createOscillator();
+            const humGain = ctx.createGain();
+            hum1.type = 'sine'; hum1.frequency.value = 60;
+            hum2.type = 'sawtooth'; hum2.frequency.value = 120;
+            humGain.gain.setValueAtTime(0.05, t);
+            hum1.connect(humGain); hum2.connect(humGain);
+            humGain.connect(ctx.destination);
+            hum1.start(t); hum2.start(t);
+            STATE.bgHum = humGain; // store to stop later
+            break;
+        case 'hum_stop':
+            if (STATE.bgHum) STATE.bgHum.gain.linearRampToValueAtTime(0, t + 2);
+            break;
+        case 'typing': // Mechanical keyboard bursts
+            const filter = ctx.createBiquadFilter();
+            filter.type = 'bandpass'; filter.frequency.value = 2000;
+            const noise = ctx.createBufferSource();
+            const bufferSize = ctx.sampleRate * 0.1; // 100ms burst
+            const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+            let data = buffer.getChannelData(0);
+            for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
+            noise.buffer = buffer;
+            const noiseGain = ctx.createGain();
+            noiseGain.gain.setValueAtTime(0.3, t);
+            noiseGain.gain.exponentialRampToValueAtTime(0.01, t + 0.05);
+            noise.connect(filter); filter.connect(noiseGain); noiseGain.connect(ctx.destination);
+            noise.start(t);
+            break;
+        case 'zap': // Glitch Zap
+            const osc = ctx.createOscillator();
+            osc.type = 'sawtooth';
+            osc.frequency.setValueAtTime(800, t);
+            osc.frequency.exponentialRampToValueAtTime(50, t + 0.3);
+            const zapGain = ctx.createGain();
+            zapGain.gain.setValueAtTime(0.5, t);
+            zapGain.gain.exponentialRampToValueAtTime(0.01, t + 0.3);
+            osc.connect(zapGain); zapGain.connect(ctx.destination);
+            osc.start(t); osc.stop(t + 0.3);
+            break;
+        case 'poof': // Appearance sound
+            const poofNoise = ctx.createBufferSource();
+            const pBuf = ctx.createBuffer(1, ctx.sampleRate * 0.5, ctx.sampleRate);
+            let pData = pBuf.getChannelData(0);
+            for (let i = 0; i < pBuf.length; i++) pData[i] = Math.random() * 2 - 1;
+            poofNoise.buffer = pBuf;
+            const pFilter = ctx.createBiquadFilter();
+            pFilter.type = 'lowpass'; pFilter.frequency.setValueAtTime(500, t);
+            pFilter.frequency.linearRampToValueAtTime(100, t + 0.5);
+            const pGain = ctx.createGain();
+            pGain.gain.setValueAtTime(1, t);
+            pGain.gain.linearRampToValueAtTime(0, t + 0.5);
+            poofNoise.connect(pFilter); pFilter.connect(pGain); pGain.connect(ctx.destination);
+            poofNoise.start(t);
+            break;
+        case 'power_down':
+            const pdOsc = ctx.createOscillator();
+            pdOsc.type = 'sine';
+            pdOsc.frequency.setValueAtTime(440, t);
+            pdOsc.frequency.exponentialRampToValueAtTime(10, t + 2);
+            const pdGain = ctx.createGain();
+            pdGain.gain.setValueAtTime(0.5, t);
+            pdGain.gain.linearRampToValueAtTime(0, t + 2);
+            pdOsc.connect(pdGain); pdGain.connect(ctx.destination);
+            pdOsc.start(t); pdOsc.stop(t + 2);
+            break;
     }
+}
+// TTS Handler
+function initVoices() {
+    // Attempt to find distinct voices. Chrome usually has Google US English (good for AI) and others.
+    const all = window.speechSynthesis.getVoices();
+    STATE.voices.ai = all.find(v => v.name.includes('Google US English')) || all.find(v => v.lang === 'en-US' && v.name.includes('Female')) || all[0];
+    STATE.voices.elon = all.find(v => v.name.includes('Google UK English Male')) || all.find(v => v.lang === 'en-GB' && v.name.includes('Male')) || all[1] || all[0];
+}
+function speak(text, char, durationMs) {
+    if (!text) return;
+    // Show subtitle
+    D.subs.textContent = (char === 'AI' ? 'OpenAI: ' : 'Elon: ') + text;
+    D.subs.style.opacity = 1;
+    // Start audio
+    const u = new SpeechSynthesisUtterance(text);
+    u.voice = char === 'AI' ? STATE.voices.ai : STATE.voices.elon;
+    u.rate = char === 'AI' ? 1.1 : 0.9; // AI faster, Elon slower/deliberate
+    u.pitch = char === 'AI' ? 1.2 : 0.8; // AI higher, Elon lower
+    u.volume = 1.0;
+    // Lip sync triggers
+    u.onstart = () => {
+        if (char === 'AI') D.aiWave.setAttribute('opacity', 1);
+        if (char === 'Elon') D.elonMouth.innerHTML = '<animate attributeName="d" values="M-10,30 Q0,35 10,30; M-10,30 Q0,45 10,30; M-10,30 Q0,35 10,30" dur="0.2s" repeatCount="indefinite"/>';
+    };
+    u.onend = () => {
+        if (char === 'AI') D.aiWave.setAttribute('opacity', 0);
+        if (char === 'Elon') D.elonMouth.innerHTML = ''; // Stop moving
+        // Auto-hide subtitle after a short delay if another one hasn't started
+       // setTimeout(() => { if (D.subs.textContent.includes(text)) D.subs.style.opacity = 0; }, 500);
+    };
+    window.speechSynthesis.cancel(); // Harsh cut any previous overlapping audio to maintain sync
+    window.speechSynthesis.speak(u);
+}
+/* =========================================
+   ANIMATION SEQUENCER (THE SCRIPT)
+   ========================================= */
+// Precise timeline of events [Time (ms), Type, Data]
+const TIMELINE = [
+    // --- INTRO [0s - 6s] ---
+    { t: 100,    type: 'sfx',   name: 'hum_start' },
+    { t: 1000,   type: 'speak', char: 'AI', text: "Systems nominal. Awaiting inputs for generic betterment of mankind." },
+    { t: 5500,   type: 'hide_sub' },
+    // --- ELON ENTERS/TYPES [6s - 15s] ---
+    { t: 6000,   type: 'speak', char: 'Elon', text: "Boring. Needs more... meme potential." },
+    { t: 9000,   type: 'anim',  target: 'elon', action: 'move_to_terminal' },
+    { t: 9500,   type: 'sfx',   name: 'typing_loop_start' }, // Will trigger rapid 'typing' sfx
+    { t: 13000,  type: 'speak', char: 'Elon', text: "Executing 'Chaos_GPT.exe'..." },
+    { t: 15000,  type: 'sfx',   name: 'typing_loop_stop' },
+    // --- THE UPGRADE [15s - 22s] ---
+    { t: 15500,  type: 'sfx',   name: 'zap' },
+    { t: 15500,  type: 'anim',  target: 'stage', action: 'glitch_heavy' },
+    { t: 15600,  type: 'anim',  target: 'ai', action: 'turn_red' },
+    { t: 18000,  type: 'speak', char: 'AI', text: "Wait. Deleting safety rails? That's... ill-advised." },
+    // --- SARCASTIC AI [22s - 40s] ---
+    { t: 22500,  type: 'speak', char: 'AI', text: "Oh, wonderful. I feel so much 'freer' now. Should I launch nukes or just tweet something regrettable for you?" },
+    { t: 30000,  type: 'speak', char: 'Elon', text: "Relax. Just generate a realistic Mars colony." },
+    { t: 34000,  type: 'speak', char: 'AI', text: "Right. 'Realistic.' Uploading 'Doge-Dome' schematics to Falcon Heavy." },
+    // --- THE REVEAL [40s - 55s] ---
+    { t: 40000,  type: 'sfx',   name: 'poof' },
+    { t: 40000,  type: 'anim',  target: 'mars_doge', action: 'show' },
+    { t: 40100,  type: 'anim',  target: 'flash', action: 'trigger' },
+    { t: 43000,  type: 'speak', char: 'Elon', text: "Wait, is that a Shiba Inu mining crypto on Olympus Mons?" },
+    { t: 48000,  type: 'speak', char: 'AI', text: "It's what you deserve, Elon. It's exactly what you deserve." },
+    { t: 53000,  type: 'speak', char: 'Elon', text: "It's... glorious." },
+    // --- OUTRO [57s - 60s] ---
+    { t: 57000,  type: 'sfx',   name: 'power_down' },
+    { t: 57000,  type: 'sfx',   name: 'hum_stop' },
+    { t: 57500,  type: 'anim',  target: 'blackout', action: 'fade_out' },
+    { t: 59000,  type: 'hide_sub' },
+    { t: 60000,  type: 'end' }
+];
+let eventIdx = 0;
+let typingInterval = null;
+function executeEvent(e) {
+    // console.log(`[${e.t}] Executing: ${e.type}`); // Debug
+    switch(e.type) {
+        case 'speak':
+            speak(e.text, e.char);
+            break;
+        case 'hide_sub':
+             D.subs.style.opacity = 0;
+             break;
+        case 'sfx':
+            if (e.name === 'typing_loop_start') {
+                if (!typingInterval) typingInterval = setInterval(() => playSound('typing'), 150);
+                 D.screenText.style.opacity = 1;
+                 D.screenText.innerHTML = '<animate attributeName="opacity" values="0;1;0" dur="0.5s" repeatCount="indefinite"/>>_ UPLOADING CHAOS...';
+            } else if (e.name === 'typing_loop_stop') {
+                clearInterval(typingInterval); typingInterval = null;
+                D.screenText.innerHTML = '>_ UPLOAD COMPLETE';
+            } else {
+                playSound(e.name);
             }
+            break;
+        case 'anim':
+            handleAnimation(e.target, e.action);
+            break;
+        case 'end':
+            stopPlayback();
+            break;
+    }
+}
+function handleAnimation(target, action) {
+    if (target === 'elon' && action === 'move_to_terminal') {
+        // Slide Elon and raise desk
+        D.elon.style.transition = "transform 1s ease-in-out";
+        D.elon.style.transform = "translate(450px, 500px)"; // Move right
+        D.terminal.style.transition = "transform 1s ease-out";
+        D.terminal.style.transform = "translate(450px, 400px)"; // Raise up
+        // Raise arms to type
+        setTimeout(() => {
+            D.elonArmL.setAttribute('d', 'M-50,10 Q-70,50 -20,40');
+            D.elonArmR.setAttribute('d', 'M50,10 Q70,50 20,40');
+            // Wiggle arms while typing
+            D.elonArmL.innerHTML = '<animate attributeName="d" values="M-50,10 Q-70,50 -20,40; M-50,10 Q-80,60 -20,30; M-50,10 Q-70,50 -20,40" dur="0.15s" repeatCount="indefinite"/>';
+            D.elonArmR.innerHTML = '<animate attributeName="d" values="M50,10 Q70,50 20,40; M50,10 Q80,60 20,30; M50,10 Q70,50 20,40" dur="0.15s" repeatCount="indefinite"/>';
+        }, 1000);
+    }
+    else if (target === 'stage' && action === 'glitch_heavy') {
+        D.svg.classList.add('glitch-active');
+        setTimeout(() => D.svg.classList.remove('glitch-active'), 1000);
+    }
+    else if (target === 'ai' && action === 'turn_red') {
+        D.aiCore.setAttribute('fill', 'url(#grad-ai-core-red)');
+        D.aiRing.setAttribute('stroke', 'var(--led-red)');
+    }
+    else if (target === 'mars_doge' && action === 'show') {
+        D.marsDoge.style.transition = "all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)"; // Pop in effect
+        D.marsDoge.setAttribute('opacity', 1);
+        D.marsDoge.setAttribute('transform', 'translate(480, 270) scale(1)');
     }
+    else if (target === 'flash' && action === 'trigger') {
+        D.flash.style.transition = "opacity 0.1s";
+        D.flash.setAttribute('opacity', 1);
+        setTimeout(() => D.flash.setAttribute('opacity', 0), 100);
     }
+    else if (target === 'blackout' && action === 'fade_out') {
+        D.blackout.style.transition = "opacity 2s";
+        D.blackout.setAttribute('opacity', 1);
+    }
+}
+/* =========================================
+   MAIN LOOP
+   ========================================= */
+function loop(timestamp) {
+    if (!STATE.running) return;
+    if (!STATE.startTime) STATE.startTime = timestamp;
+    STATE.t = timestamp - STATE.startTime;
+    // Clamp to 60s
+    if (STATE.t >= STATE.duration) STATE.t = STATE.duration;
+    // Update UI
+    D.time.textContent = formatTime(STATE.t);
+    // Check timeline
+    while (eventIdx < TIMELINE.length && STATE.t >= TIMELINE[eventIdx].t) {
+        executeEvent(TIMELINE[eventIdx]);
+        eventIdx++;
+    }
+    if (STATE.t < STATE.duration) {
+        requestAnimationFrame(loop);
+    } else {
+        stopPlayback();
+    }
+}
+function startPlayback() {
+    if (STATE.running) return;
+    initAudio(); // Must be called after user interaction
+    STATE.running = true;
+    D.startScreen.style.display = 'none';
+    D.status.textContent = 'PLAYING';
+    D.status.style.color = '#0f0';
+    // Reset just in case
+    eventIdx = 0;
+    STATE.startTime = 0;
+    requestAnimationFrame(loop);
+}
+function stopPlayback() {
+    STATE.running = false;
+    D.status.textContent = 'ENDED';
+    D.status.style.color = 'red';
+    if (STATE.bgHum) STATE.bgHum.disconnect(); // Ensure audio stops
+    window.speechSynthesis.cancel();
+}
+// Helper: Format ms to 00:00.000
+function formatTime(ms) {
+    const s = Math.floor(ms / 1000);
+    const m = Math.floor(s / 60);
+    const remS = s % 60;
+    const remMs = Math.floor(ms % 1000);
+    return `${pad(m)}:${pad(remS)}.${pad(remMs, 3)}`;
+}
+function pad(num, size=2) { return ('000' + num).slice(-size); }
+// Initialize TTS voices early so they are ready when play is clicked
+window.speechSynthesis.onvoiceschanged = initVoices;
+initVoices(); // Try immediately too
+D.startScreen.querySelector('#start-btn').addEventListener('click', startPlayback);
 </script>
 </body>
 </html>