feat: add screen recording capability

static/main.js

@@ -690,3 +690,123 @@ killBtn.addEventListener('click', () => {
     document.getElementById('terminatedOverlay').style.display = 'flex';
 });
 controlsContainer.appendChild(killBtn);
+
+// ─────────────────────────────────────────────────────────────
+// RECORDING LOGIC
+// ─────────────────────────────────────────────────────────────
+const recordBtn = document.getElementById('recordBtn');
+const statusPill = document.getElementById('recordingStatusPill');
+const statusText = document.getElementById('recordingStatusText');
+let mediaRecorder = null;
+let recordedChunks = [];
+let isRecording = false;
+let countdownInterval = null;
+
+function pad(n) { return n < 10 ? '0' + n : n; }
+function getFormattedDateTime() {
+    const d = new Date();
+    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}_${pad(d.getHours())}-${pad(d.getMinutes())}-${pad(d.getSeconds())}`;
+}
+
+recordBtn.addEventListener('click', () => {
+    if (isRecording || countdownInterval) return; // Prevent multiple clicks
+    
+    recordBtn.disabled = true;
+    recordBtn.style.opacity = '0.5';
+    
+    // Start 5 second countdown
+    let preCount = 5;
+    statusPill.style.display = 'flex';
+    statusText.textContent = `Starting in ${preCount}...`;
+    statusPill.querySelector('.status-dot').style.animation = 'none'; // Solid dot during countdown
+    statusPill.querySelector('.status-dot').style.background = '#ffa500'; // Orange
+    
+    countdownInterval = setInterval(() => {
+        preCount--;
+        if (preCount > 0) {
+            statusText.textContent = `Starting in ${preCount}...`;
+        } else {
+            clearInterval(countdownInterval);
+            countdownInterval = null;
+            startRecording();
+        }
+    }, 1000);
+});
+
+function startRecording() {
+    recordedChunks = [];
+    const stream = canvas.captureStream(30);
+    
+    // Check mime type
+    let options = { mimeType: 'video/webm; codecs=vp9' };
+    if (MediaRecorder.isTypeSupported('video/mp4; codecs="avc1.424028, mp4a.40.2"')) {
+        options = { mimeType: 'video/mp4; codecs="avc1.424028, mp4a.40.2"' };
+    } else if (MediaRecorder.isTypeSupported('video/mp4')) {
+        options = { mimeType: 'video/mp4' };
+    } else if (MediaRecorder.isTypeSupported('video/webm; codecs=vp8')) {
+        options = { mimeType: 'video/webm; codecs=vp8' };
+    } else if (MediaRecorder.isTypeSupported('video/webm')) {
+        options = { mimeType: 'video/webm' };
+    } else {
+        options = {}; // fallback
+    }
+
+    try {
+        mediaRecorder = new MediaRecorder(stream, options);
+    } catch (e) {
+        console.error("Exception while creating MediaRecorder:", e);
+        mediaRecorder = new MediaRecorder(stream);
+    }
+    
+    mediaRecorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0) {
+            recordedChunks.push(event.data);
+        }
+    };
+    
+    mediaRecorder.onstop = () => {
+        statusText.textContent = 'Saving...';
+        const blob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style = 'display: none';
+        a.href = url;
+        // Check if the mimeType contains 'mp4' (if browser supported it). Otherwise, fallback to webm.
+        // It's safer to always request mp4 as the extension per requirements, but if we recorded webm, we might create a corrupted mp4.
+        // The instructions: "save in mp4 format... file naming convention gesteffect_date_time.mp4"
+        a.download = `gesteffect_${getFormattedDateTime()}.mp4`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+        
+        statusPill.style.display = 'none';
+        recordBtn.disabled = false;
+        recordBtn.style.opacity = '1';
+        recordBtn.classList.remove('recording');
+        recordBtn.querySelector('.record-text').textContent = 'Record';
+        isRecording = false;
+    };
+    
+    mediaRecorder.start();
+    isRecording = true;
+    recordBtn.classList.add('recording');
+    recordBtn.querySelector('.record-text').textContent = 'Recording';
+    
+    // 60 second recording countdown
+    let recCount = 60;
+    statusPill.querySelector('.status-dot').style.animation = 'blink 1s infinite alternate';
+    statusPill.querySelector('.status-dot').style.background = '#ff0000'; // Red
+    statusText.textContent = `🔴 Recording ${recCount}s`;
+    
+    const recInterval = setInterval(() => {
+        recCount--;
+        if (recCount > 0) {
+            statusText.textContent = `🔴 Recording ${recCount}s`;
+        } else {
+            clearInterval(recInterval);
+            if (mediaRecorder.state !== 'inactive') {
+                mediaRecorder.stop();
+            }
+        }
+    }, 1000);
+}

static/style.css

@@ -358,3 +358,109 @@ html, body {
         font-size: 11px;
     }
 }
+
+/* ── RECORDING UI ───────────────────────────────────────────────── */
+.status-pill {
+    position: absolute;
+    top: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 0, 0, 0.15);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(255, 0, 0, 0.4);
+    border-radius: 30px;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    z-index: 100;
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
+}
+
+.status-dot {
+    width: 10px;
+    height: 10px;
+    background: #ff0000;
+    border-radius: 50%;
+    box-shadow: 0 0 10px #ff0000;
+    animation: blink 1s infinite alternate;
+}
+
+@keyframes blink {
+    from { opacity: 1; }
+    to { opacity: 0.3; }
+}
+
+#recordingStatusText {
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
+}
+
+.record-btn {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 30px;
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    z-index: 100;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #fff;
+    font-family: inherit;
+    font-weight: 600;
+}
+
+.record-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+.record-btn.recording {
+    background: rgba(255, 0, 0, 0.15);
+    border-color: #ff0000;
+    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
+}
+
+.record-btn.recording .record-icon {
+    border-radius: 4px;
+    background: #ff0000;
+}
+
+.record-icon {
+    width: 16px;
+    height: 16px;
+    background: #ff0000;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 10px #ff0000;
+}
+
+@media (max-width: 480px) {
+    .status-pill {
+        top: 12px;
+        padding: 6px 12px;
+    }
+    #recordingStatusText {
+        font-size: 12px;
+    }
+    .record-btn {
+        bottom: 12px;
+        padding: 8px 16px;
+        font-size: 12px;
+    }
+    .record-icon {
+        width: 14px;
+        height: 14px;
+    }
+}

templates/index.html

@@ -57,6 +57,18 @@
             <button class="theme-btn" data-theme="Synthwave"><span class="theme-icon">🕹️</span><span class="theme-name">Synthwave</span></button>
             <button class="theme-btn" data-theme="NeonDemon"><span class="theme-icon">😈</span><span class="theme-name">NeonDemon</span></button>
         </div>
+
+        <!-- Recording Status Pill (Top Middle) -->
+        <div id="recordingStatusPill" class="status-pill" style="display: none;">
+            <span class="status-dot"></span>
+            <span id="recordingStatusText">Starting...</span>
+        </div>
+
+        <!-- Record Button (Bottom Middle) -->
+        <button id="recordBtn" class="record-btn">
+            <span class="record-icon"></span>
+            <span class="record-text">Record</span>
+        </button>
     </div>
 
     <!-- Main Engine -->