Spaces:

namana23
/

anycoder-1743d2a9

Running

App Files Files Community

namana23 commited on Feb 23

Commit

9b7efc5

verified ·

1 Parent(s): 35155bf

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +857 -657

index.html CHANGED Viewed

@@ -1,685 +1,885 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ReelsAI.pro - SaaS Architecture & Generator</title>
-    <!-- FontAwesome for Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-dark: #0f1115;
-            --bg-panel: #161b22;
-            --accent-primary: #7c4dff;
-            --accent-secondary: #ff4081;
-            --text-main: #ffffff;
-            --text-muted: #94a3b8;
-            --border: #2d3748;
-            --glass: rgba(22, 27, 34, 0.7);
-        }
-        * {
-            box-sizing: box-box;
-            margin: 0;
-            padding: 0;
-            font-family: 'Inter', sans-serif;
-        }
-        body {
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            height: 100vh;
-            display: flex;
-            overflow: hidden;
-        }
-        /* Sidebar Navigation */
-        .sidebar {
-            width: 260px;
-            background: var(--bg-panel);
-            border-right: 1px solid var(--border);
-            display: flex;
-            flex-direction: column;
-            padding: 20px;
-            transition: all 0.3s ease;
-        }
-        .brand {
-            font-size: 24px;
-            font-weight: 700;
-            color: var(--text-main);
-            margin-bottom: 40px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .brand i {
-            color: var(--accent-primary);
-        }
-        .nav-item {
-            padding: 12px 16px;
-            margin-bottom: 8px;
-            border-radius: 8px;
-            cursor: pointer;
-            color: var(--text-muted);
-            transition: 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-weight: 500;
-        }
-        .nav-item:hover, .nav-item.active {
-            background: rgba(124, 77, 255, 0.1);
-            color: var(--text-main);
-            border-left: 3px solid var(--accent-primary);
-        }
-        .nav-item i {
-            width: 20px;
-            text-align: center;
-        }
-        /* Main Content Area */
-        .main-content {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            position: relative;
-        }
-        /* Top Bar */
-        .top-bar {
-            height: 60px;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 30px;
-            background: var(--bg-panel);
-        }
-        .header-title {
-            font-size: 18px;
-            font-weight: 600;
-        }
-        .user-profile {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .avatar {
-            width: 32px;
-            height: 32px;
-            background: var(--accent-secondary);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-        }
-        /* Dashboard Grid */
-        .dashboard-container {
-            padding: 30px;
-            overflow-y: auto;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            height: 100%;
-        }
-        /* Generator Panel */
-        .generator-panel {
-            background: var(--bg-panel);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 25px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        }
-        .input-group {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .input-group label {
-            font-size: 14px;
-            color: var(--text-muted);
-            font-weight: 600;
-        }
-        .topic-input {
-            background: var(--bg-dark);
-            border: 1px solid var(--border);
-            padding: 15px;
-            color: var(--text-main);
-            border-radius: 8px;
-            font-size: 16px;
-            outline: none;
-            transition: 0.2s;
-        }
-        .topic-input:focus {
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
-        }
-        .generate-btn {
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            color: white;
-            border: none;
-            padding: 15px;
-            border-radius: 8px;
-            font-weight: 600;
-            cursor: pointer;
-            font-size: 16px;
-            transition: transform 0.2s;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 10px;
-        }
-        .generate-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
-        }
-        /* Architecture Documentation Panel */
-        .arch-panel {
-            background: var(--bg-panel);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 25px;
-            overflow-y: auto;
-            max-height: 80vh;
-        }
-        .arch-content h2 {
-            margin-bottom: 15px;
-            color: var(--accent-primary);
-            font-size: 20px;
-        }
-        .arch-content h3 {
-            margin-top: 20px;
-            margin-bottom: 10px;
-            color: var(--text-main);
-            font-size: 16px;
-            border-left: 3px solid var(--accent-secondary);
-            padding-left: 10px;
-        }
-        .arch-content p, .arch-content li {
-            color: var(--text-muted);
-            font-size: 14px;
-            line-height: 1.6;
-            margin-bottom: 10px;
-        }
-        .arch-content ul {
-            margin-left: 20px;
-        }
-        .tech-badge {
-            display: inline-block;
-            background: rgba(124, 77, 255, 0.2);
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            color: #fff;
-            margin-right: 5px;
-            margin-bottom: 5px;
-        }
-        /* Video Preview Simulation */
-        .preview-area {
-            width: 100%;
-            height: 400px;
-            background: #000;
-            border-radius: 8px;
-            position: relative;
-            overflow: hidden;
-            margin-top: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 1px solid var(--border);
-        }
-        .video-placeholder {
-            width: 200px;
-            height: 350px; /* 9:16 aspect ratio roughly */
-            background: #1a1a1a;
-            border-radius: 4px;
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: #555;
-            font-size: 12px;
-            text-align: center;
-        }
-        .overlay-text {
-            background: rgba(0,0,0,0.6);
-            padding: 5px 10px;
-            border-radius: 4px;
-            color: #fff;
-            margin-top: 10px;
-            font-weight: bold;
-            animation: pulse 2s infinite;
-        }
-        /* Progress Bar */
-        .progress-container {
-            width: 100%;
-            background: #2d3748;
-            height: 6px;
-            border-radius: 3px;
-            margin-top: 10px;
-            overflow: hidden;
-            display: none;
-        }
-        .progress-bar {
-            height: 100%;
-            width: 0%;
-            background: var(--accent-secondary);
-            transition: width 0.5s ease;
-        }
-        .steps-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-top: 20px;
-        }
-        .step-card {
-            background: var(--bg-dark);
-            padding: 10px;
-            border-radius: 6px;
-            font-size: 12px;
-            color: var(--text-muted);
-            border: 1px solid var(--border);
-            opacity: 0.5;
-        }
-        .step-card.completed {
-            opacity: 1;
-            border-color: var(--accent-primary);
-            color: var(--text-main);
-        }
-        /* Modal for Architecture View */
-        .modal-overlay {
-            position: fixed;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.8);
-            z-index: 1000;
-            display: none;
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-content {
-            background: var(--bg-panel);
-            width: 800px;
-            max-width: 90%;
-            max-height: 90%;
-            overflow-y: auto;
-            padding: 40px;
-            border-radius: 12px;
-            border: 1px solid var(--border);
-            position: relative;
-        }
-        .close-modal {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            cursor: pointer;
-            font-size: 20px;
-            color: var(--text-muted);
-        }
-        /* Animations */
-        @keyframes pulse {
-            0% { opacity: 0.8; }
-            50% { opacity: 1; }
-            100% { opacity: 0.8; }
-        }
-        /* Responsive */
-        @media (max-width: 900px) {
-            .dashboard-container {
-                grid-template-columns: 1fr;
-            }
-            .sidebar {
-                width: 70px;
-            }
-            .nav-item span {
-                display: none;
-            }
-            .brand span {
-                display: none;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Sidebar -->
-    <div class="sidebar">
-        <div class="brand">
-            <i class="fas fa-bolt"></i>
-            <span>ReelsAI</span>
-        </div>
-        <div class="nav-item active" onclick="switchView('dashboard')">
-            <i class="fas fa-video"></i>
-            <span>Generator</span>
-        </div>
-        <div class="nav-item" onclick="openArchitecture()">
-            <i class="fas fa-code"></i>
-            <span>Architecture</span>
-        </div>
-        <div class="nav-item">
-            <i class="fas fa-chart-line"></i>
-            <span>Analytics</span>
-        </div>
-        <div class="nav-item">
-            <i class="fas fa-cog"></i>
-            <span>Settings</span>
-        </div>
-        <div style="margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border);">
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--text-muted); font-size: 12px; text-decoration: none; display: flex; align-items: center; gap: 5px;">
-                <i class="fas fa-external-link-alt"></i> Built with AnyCoder
-            </a>
         </div>
-    </div>
-    <!-- Main Content -->
-    <div class="main-content">
-        <!-- Top Bar -->
-        <div class="top-bar">
-            <div class="header-title">Dashboard</div>
-            <div class="user-profile">
-                <div class="avatar">JD</div>
-                <span style="font-size: 14px;">John Doe</span>
-            </div>
         </div>
-        <!-- Dashboard View -->
-        <div class="dashboard-container" id="dashboard-view">
-            <!-- Generator Panel -->
-            <div class="generator-panel">
-                <h2 style="color: var(--text-main);">Create Viral Reel</h2>
-                <div class="input-group">
-                    <label>Video Topic</label>
-                    <input type="text" class="topic-input" id="topicInput" placeholder="e.g., 3 secrets to success">
-                </div>
-                <div class="input-group">
-                    <label>Style</label>
-                    <select class="topic-input" style="cursor: pointer;">
-                        <option>Motivational / Dark</option>
-                        <option>Business / Clean</option>
-                        <option>Funny / Bright</option>
-                    </select>
-                </div>
-                <button class="generate-btn" onclick="startGeneration()">
-                    <i class="fas fa-magic"></i> Generate Video
-                </button>
-                <!-- Progress UI -->
-                <div id="progressUI" style="display: none;">
-                    <div class="progress-container" style="display: block;">
-                        <div class="progress-bar" id="progressBar"></div>
-                    </div>
-                    <div style="margin-top: 15px; font-size: 13px; color: var(--text-muted);">
-                        Status: <span id="statusText" style="color: var(--accent-primary)">Initializing...</span>
-                    </div>
-                    <div class="steps-grid">
-                        <div class="step-card" id="step1">1. Script Generation</div>
-                        <div class="step-card" id="step2">2. Voice Synthesis</div>
-                        <div class="step-card" id="step3">3. Caption Sync</div>
-                        <div class="step-card" id="step4">4. FFmpeg Render</div>
-                    </div>
-                    <!-- Video Preview Simulation -->
-                    <div class="preview-area">
-                        <div class="video-placeholder">
-                            <i class="fas fa-play" style="font-size: 30px; margin-bottom: 10px; opacity: 0.5;"></i>
-                            <div>Preview</div>
-                            <div class="overlay-text" id="captionPreview">Captions Loading...</div>
-                        </div>
-                    </div>
-                    <button class="generate-btn" style="background: transparent; border: 1px solid var(--border); margin-top: 10px; font-size: 14px;" onclick="downloadMock()">
-                        <i class="fas fa-download"></i> Download MP4
-                    </button>
-                </div>
             </div>
-            <!-- Quick Info Panel -->
-            <div class="arch-panel">
-                <h2>System Status</h2>
-                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
-                    <div style="text-align: center;">
-                        <div style="font-size: 24px; color: var(--accent-primary);">Active</div>
-                        <div style="font-size: 12px; color: var(--text-muted);">API Gateway</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="font-size: 24px; color: var(--accent-secondary);">GPU Ready</div>
-                        <div style="font-size: 12px; color: var(--text-muted);">Render Engine</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="font-size: 24px; color: #fff;">98%</div>
-                        <div style="font-size: 12px; color: var(--text-muted);">Queue Health</div>
-                    </div>
-                </div>
-                <h3>Current Stack</h3>
-                <div>
-                    <span class="tech-badge">React</span>
-                    <span class="tech-badge">Python</span>
-                    <span class="tech-badge">FFmpeg</span>
-                    <span class="tech-badge">ElevenLabs</span>
-                    <span class="tech-badge">Supabase</span>
-                </div>
-                <h3>Recent Jobs</h3>
-                <ul style="list-style: none;">
-                    <li style="padding: 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;">
-                        <span>Topic: "Crypto Trading"</span>
-                        <span style="color: var(--accent-primary)">Completed</span>
-                    </li>
-                    <li style="padding: 10px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;">
-                        <span>Topic: "Fitness Tips"</span>
-                        <span style="color: var(--accent-primary)">Completed</span>
-                    </li>
-                </ul>
             </div>
-        </div>
-    </div>
-    <!-- Architecture Modal -->
-    <div class="modal-overlay" id="archModal">
-        <div class="modal-content">
-            <div class="close-modal" onclick="closeArchitecture()">
-                <i class="fas fa-times"></i>
             </div>
-            <h1 style="color: var(--text-main); margin-bottom: 20px;">SaaS Architecture Blueprint</h1>
-            <div class="arch-content">
-                <p><strong>Target Product:</strong> ReelsAI.pro (Vertical Video Automation)</p>
-                <h3>1. Complete Product Architecture</h3>
-                <ul>
-                    <li><strong>Frontend:</strong> Next.js (React) for SEO and performance. Tailwind CSS for styling.</li>
-                    <li><strong>Backend:</strong> Python (FastAPI) for AI orchestration. Node.js for user management.</li>
-                    <li><strong>Storage:</strong> AWS S3 for video assets and final MP4s.</li>
-                    <li><strong>Database:</strong> PostgreSQL (Supabase) for user data and project metadata.</li>
-                    <li><strong>Queue System:</strong> Redis + Celery to handle video rendering tasks asynchronously.</li>
-                </ul>
-                <h3>2. Recommended Tech Stack (MVP)</h3>
-                <ul>
-                    <li><strong>Frontend:</strong> React + Vite (Fastest setup).</li>
-                    <li><strong>Backend:</strong> FastAPI (Python) - excellent for calling AI libraries.</li>
-                    <li><strong>AI APIs:</strong> OpenAI (GPT-4) for Script, ElevenLabs for Voice, Stability AI for Images.</li>
-                    <li><strong>Rendering:</strong> Remotion (Serverless FFmpeg wrapper) or custom FFmpeg worker.</li>
-                </ul>
-                <h3>3. Backend Workflow</h3>
-                <ul>
-                    <li><strong>Script Generation:</strong> POST /generate-script -> GPT-4 Prompt: "Create a 30s hook, body, CTA script."</li>
-                    <li><strong>Voice Generation:</strong> POST /generate-voice -> ElevenLabs API (Text to Speech). Returns audio URL.</li>
-                    <li><strong>Caption Timing:</strong> Use ElevenLabs timestamps or Python `librosa` to detect phonemes. Map text to timecodes.</li>
-                    <li><strong>Video Composition:</strong> Python script builds JSON for Remotion/FFmpeg. Layers: Background Image -> Audio -> Text Overlay.</li>
-                </ul>
-                <h3>4. FFmpeg / Remotion Rendering</h3>
-                <ul>
-                    <li><strong>Remotion:</strong> Sends a JSON payload describing the video layers. Remotion spins up a container, runs FFmpeg, and returns the MP4 URL.</li>
-                    <li><strong>Raw FFmpeg:</strong> `ffmpeg -i bg.jpg -i audio.mp3 -vf "drawtext=..." -c:v libx264 output.mp4`. Complex but free.</li>
-                </ul>
-                <h3>5. Database Schema</h3>
-                <ul>
-                    <li><strong>Users:</strong> id, email, stripe_sub_status, credits.</li>
-                    <li><strong>Projects:</strong> id, user_id, topic, script_text, voice_url, status (processing/done).</li>
-                    <li><strong>Videos:</strong> id, project_id, s3_url, duration, resolution.</li>
-                </ul>
-                <h3>6. Scaling to 10,000 Users</h3>
-                <ul>
-                    <li><strong>Concurrency:</strong> Use a distributed queue (Kafka or Redis) to manage rendering jobs.</li>
-                    <li><strong>GPU Workers:</strong> Spin up GPU instances (AWS g4dn) only when jobs are in the queue. Scale down when idle.</li>
-                    <li><strong>CDN:</strong> Serve generated videos via CloudFront to reduce latency.</li>
-                </ul>
-                <h3>7. Monetization Strategy</h3>
-                <ul>
-                    <li><strong>Freemium:</strong> 3 free videos/month (watermarked).</li>
-                    <li><strong>Pro ($29/mo):</strong> 50 videos, no watermark, HD export, custom branding.</li>
-                    <li><strong>Agency ($99/mo):</strong> Unlimited, API access, team seats.</li>
-                </ul>
-                <h3>8. MVP Plan (2-4 Weeks)</h3>
-                <ul>
-                    <li><strong>Week 1:</strong> Setup Next.js + Supabase Auth. Build basic form.</li>
-                    <li><strong>Week 2:</strong> Integrate OpenAI & ElevenLabs APIs. Create "Script to Audio" pipeline.</li>
-                    <li><strong>Week 3:</strong> Build FFmpeg composition logic (static image + audio + text overlay).</li>
-                    <li><strong>Week 4:</strong> Deploy to Vercel + AWS. Launch landing page.</li>
-                </ul>
             </div>
-        </div>
-    </div>
-    <script>
-        // --- Logic for Simulation ---
-        function switchView(viewName) {
-            // Simple view toggler logic if we had multiple pages
-            console.log("Switching to " + viewName);
-        }
-        function openArchitecture() {
-            document.getElementById('archModal').style.display = 'flex';
-        }
-        function closeArchitecture() {
-            document.getElementById('archModal').style.display = 'none';
-        }
-        function startGeneration() {
-            const topic = document.getElementById('topicInput').value;
-            if(!topic) {
-                alert("Please enter a topic!");
-                return;
-            }
-            // UI Reset
-            document.getElementById('progressUI').style.display = 'block';
-            document.getElementById('progressBar').style.width = '0%';
-            document.getElementById('statusText').innerText = "Connecting to AI...";
-            // Reset Steps
-            for(let i=1; i<=4; i++) {
-                document.getElementById('step'+i).classList.remove('completed');
-            }
-            runSimulation();
-        }
-        function runSimulation() {
-            let progress = 0;
-            const bar = document.getElementById('progressBar');
-            const status = document.getElementById('statusText');
-            const captionPreview = document.getElementById('captionPreview');
-            // Step 1: Script
-            setTimeout(() => {
-                progress = 25;
-                bar.style.width = '25%';
-                status.innerText = "Generating Script (GPT-4)...";
-                document.getElementById('step1').classList.add('completed');
-                captionPreview.innerText = "Did you know...";
-            }, 1000);
-            // Step 2: Voice
-            setTimeout(() => {
-                progress = 50;
-                bar.style.width = '50%';
-                status.innerText = "Synthesizing Voice (ElevenLabs)...";
-                document.getElementById('step2').classList.add('completed');
-                captionPreview.innerText = "The secret to wealth is...";
-            }, 2500);
-            // Step 3: Captions
-            setTimeout(() => {
-                progress = 75;
-                bar.style.width = '75%';
-                status.innerText = "Syncing Captions & Timing...";
-                document.getElementById('step3').classList.add('completed');
-                captionPreview.innerText = "Start today!";
-            }, 4000);
-            // Step 4: Render
-            setTimeout(() => {
-                progress = 100;
-                bar.style.width = '100%';
-                status.innerText = "Rendering Final MP4 (FFmpeg)...";
-                document.getElementById('step4').classList.add('completed');
-                captionPreview.innerText = "Video Ready";
-                captionPreview.style.background = "var(--accent-primary)";
-            }, 5500);
-        }
-        function downloadMock() {
-            alert("This would trigger a download of the generated MP4 from S3!");
-        }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ReelsAI.pro - Viral Script Generator</title>
+  <!-- FontAwesome for Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-dark: #0f1115;
+      --bg-panel: #161b22;
+      --bg-card: #1e252b;
+      --accent-primary: #7c4dff;
+      --accent-secondary: #ff4081;
+      --accent-glow: #7c4dff;
+      --text-main: #ffffff;
+      --text-muted: #94a3b8;
+      --border: #2d3748;
+      --glass: rgba(22, 27, 34, 0.7);
+      --success: #00b894;
+    }
+    * {
+      box-sizing: box-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Inter', sans-serif;
+    }
+    body {
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      height: 100vh;
+      display: flex;
+      overflow: hidden;
+    }
+    /* Sidebar Navigation */
+    .sidebar {
+      width: 260px;
+      background: var(--bg-panel);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      padding: 20px;
+      transition: all 0.3s ease;
+      z-index: 10;
+    }
+    .brand {
+      font-size: 24px;
+      font-weight: 800;
+      color: var(--text-main);
+      margin-bottom: 40px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      letter-spacing: -0.5px;
+    }
+    .brand i {
+      color: var(--accent-primary);
+      font-size: 28px;
+    }
+    .nav-item {
+      padding: 12px 16px;
+      margin-bottom: 8px;
+      border-radius: 8px;
+      cursor: pointer;
+      color: var(--text-muted);
+      transition: 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-weight: 500;
+      border-left: 3px solid transparent;
+    }
+    .nav-item:hover,
+    .nav-item.active {
+      background: rgba(124, 77, 255, 0.05);
+      color: var(--text-main);
+      border-left: 3px solid var(--accent-primary);
+    }
+    .nav-item i {
+      width: 20px;
+      text-align: center;
+    }
+    /* Main Content Area */
+    .main-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+    /* Top Bar */
+    .top-bar {
+      height: 60px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 30px;
+      background: var(--bg-panel);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    }
+    .header-title {
+      font-size: 18px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .badge {
+      background: var(--accent-primary);
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      font-weight: 700;
+    }
+    .user-profile {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+    }
+    .avatar {
+      width: 36px;
+      height: 36px;
+      background: var(--accent-secondary);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 14px;
+      box-shadow: 0 0 10px rgba(255, 64, 129, 0.4);
+    }
+    /* Dashboard Grid */
+    .dashboard-container {
+      padding: 30px;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      height: 100%;
+    }
+    /* Generator Panel */
+    .generator-panel {
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+      gap: 25px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+      position: relative;
+      overflow: hidden;
+    }
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .input-group label {
+      font-size: 14px;
+      color: var(--text-muted);
+      font-weight: 600;
+      display: flex;
+      justify-content: space-between;
+    }
+    .topic-input {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      padding: 16px;
+      color: var(--text-main);
+      border-radius: 12px;
+      font-size: 16px;
+      outline: none;
+      transition: 0.2s;
+      font-weight: 500;
+    }
+    .topic-input:focus {
+      border-color: var(--accent-primary);
+      box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.1);
+    }
+    .generate-btn {
+      background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+      color: white;
+      border: none;
+      padding: 18px;
+      border-radius: 12px;
+      font-weight: 700;
+      cursor: pointer;
+      font-size: 16px;
+      transition: transform 0.2s, box-shadow 0.2s;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .generate-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 20px -5px rgba(124, 77, 255, 0.4);
+    }
+    /* Script Output Area */
+    .script-output {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      display: none; /* Hidden initially */
+      animation: fadeIn 0.5s ease;
+    }
+    .script-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 10px;
+    }
+    .script-section {
+      margin-bottom: 15px;
+      border-left: 2px solid var(--accent-primary);
+      padding-left: 10px;
+    }
+    .script-section h4 {
+      color: var(--accent-primary);
+      font-size: 12px;
+      text-transform: uppercase;
+      margin-bottom: 5px;
+      font-weight: 700;
+    }
+    .script-text {
+      font-size: 15px;
+      line-height: 1.5;
+      color: var(--text-main);
+    }
+    .script-text strong {
+      color: var(--accent-secondary);
+      font-weight: 700;
+    }
+    /* Architecture Documentation Panel */
+    .arch-panel {
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 30px;
+      overflow-y: auto;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .arch-content h2 {
+      margin-bottom: 15px;
+      color: var(--accent-primary);
+      font-size: 20px;
+    }
+    .arch-content h3 {
+      margin-top: 20px;
+      margin-bottom: 10px;
+      color: var(--text-main);
+      font-size: 16px;
+      border-left: 3px solid var(--accent-secondary);
+      padding-left: 10px;
+    }
+    .arch-content p,
+    .arch-content li {
+      color: var(--text-muted);
+      font-size: 14px;
+      line-height: 1.6;
+      margin-bottom: 10px;
+    }
+    .tech-badge {
+      display: inline-block;
+      background: rgba(124, 77, 255, 0.2);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #fff;
+      margin-right: 5px;
+      margin-bottom: 5px;
+    }
+    /* Video Preview Simulation */
+    .preview-area {
+      width: 100%;
+      height: 400px;
+      background: #000;
+      border-radius: 12px;
+      position: relative;
+      overflow: hidden;
+      margin-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--border);
+      background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=1000&auto=format&fit=crop');
+      background-size: cover;
+    }
+    .video-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      text-align: center;
+      padding: 20px;
+    }
+    .overlay-text {
+      background: rgba(0, 0, 0, 0.6);
+      padding: 10px 20px;
+      border-radius: 8px;
+      color: #fff;
+      margin-top: 10px;
+      font-weight: 700;
+      font-size: 18px;
+      border: 1px solid rgba(255,255,255,0.2);
+      animation: pulse 2s infinite;
+      max-width: 80%;
+    }
+    /* Progress Bar */
+    .progress-container {
+      width: 100%;
+      background: #2d3748;
+      height: 8px;
+      border-radius: 4px;
+      margin-top: 10px;
+      overflow: hidden;
+      display: none;
+      position: relative;
+    }
+    .progress-bar {
+      height: 100%;
+      width: 0%;
+      background: var(--accent-secondary);
+      transition: width 0.5s ease;
+      box-shadow: 0 0 10px var(--accent-secondary);
+    }
+    .steps-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      margin-top: 20px;
+    }
+    .step-card {
+      background: var(--bg-dark);
+      padding: 15px;
+      border-radius: 8px;
+      font-size: 13px;
+      color: var(--text-muted);
+      border: 1px solid var(--border);
+      opacity: 0.5;
+      transition: 0.3s;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .step-card.completed {
+      opacity: 1;
+      border-color: var(--accent-primary);
+      color: var(--text-main);
+      background: rgba(124, 77, 255, 0.05);
+    }
+    .step-card i {
+      color: var(--accent-primary);
+    }
+    /* Modal for Architecture View */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.9);
+      z-index: 1000;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .modal-content {
+      background: var(--bg-panel);
+      width: 800px;
+      max-width: 90%;
+      max-height: 90%;
+      overflow-y: auto;
+      padding: 40px;
+      border-radius: 16px;
+      border: 1px solid var(--border);
+      position: relative;
+      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+    }
+    .close-modal {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      cursor: pointer;
+      font-size: 20px;
+      color: var(--text-muted);
+      background: var(--bg-dark);
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: 0.2s;
+    }
+    .close-modal:hover {
+      color: var(--text-main);
+      background: var(--border);
+    }
+    /* Animations */
+    @keyframes pulse {
+      0% { opacity: 0.8; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.02); }
+      100% { opacity: 0.8; transform: scale(1); }
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* Responsive */
+    @media (max-width: 900px) {
+      .dashboard-container {
+        grid-template-columns: 1fr;
+      }
+      .sidebar {
+        width: 70px;
+      }
+      .nav-item span {
+        display: none;
+      }
+      .brand span {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Sidebar -->
+  <div class="sidebar">
+    <div class="brand">
+      <i class="fas fa-bolt"></i>
+      <span>ReelsAI</span>
+    </div>
+    <div class="nav-item active" onclick="switchView('dashboard')">
+      <i class="fas fa-video"></i>
+      <span>Generator</span>
+    </div>
+    <div class="nav-item" onclick="openArchitecture()">
+      <i class="fas fa-code"></i>
+      <span>Architecture</span>
+    </div>
+    <div class="nav-item">
+      <i class="fas fa-chart-line"></i>
+      <span>Analytics</span>
+    </div>
+    <div class="nav-item">
+      <i class="fas fa-cog"></i>
+      <span>Settings</span>
+    </div>
+    <div style="margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border);">
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+        style="color: var(--text-muted); font-size: 12px; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: 0.2s;">
+        <i class="fas fa-external-link-alt"></i> Built with AnyCoder
+      </a>
+    </div>
+  </div>
+  <!-- Main Content -->
+  <div class="main-content">
+    <!-- Top Bar -->
+    <div class="top-bar">
+      <div class="header-title">
+        Dashboard <span class="badge">V2.0</span>
+      </div>
+      <div class="user-profile">
+        <div class="avatar">JD</div>
+        <span style="font-size: 14px;">John Doe</span>
+      </div>
+    </div>
+    <!-- Dashboard View -->
+    <div class="dashboard-container" id="dashboard-view">
+      <!-- Generator Panel -->
+      <div class="generator-panel">
+        <h2 style="color: var(--text-main); font-weight: 700;">Create Viral Script</h2>
+        <div class="input-group">
+          <label>Video Topic</label>
+          <input type="text" class="topic-input" id="topicInput" placeholder="e.g., Crypto Trading, Fitness Tips">
         </div>
+        <div class="input-group">
+          <label>Target Audience</label>
+          <select class="topic-input" style="cursor: pointer;">
+            <option>Gen Z / TikTok</option>
+            <option>Millennials / Instagram</option>
+            <option>Professionals / LinkedIn</option>
+          </select>
         </div>
+        <button class="generate-btn" onclick="startGeneration()">
+          <i class="fas fa-magic"></i> Generate Viral Script
+        </button>
+        <!-- Progress UI -->
+        <div id="progressUI" style="display: none;">
+          <div class="progress-container" style="display: block;">
+            <div class="progress-bar" id="progressBar"></div>
+          </div>
+          <div style="margin-top: 15px; font-size: 13px; color: var(--text-muted);">
+            Status: <span id="statusText" style="color: var(--accent-primary)">Initializing...</span>
+          </div>
+          <div class="steps-grid">
+            <div class="step-card" id="step1">
+              <i class="fas fa-fire"></i>
+              <span>1. Emotional Hook</span>
             </div>
+            <div class="step-card" id="step2">
+              <i class="fas fa-gem"></i>
+              <span>2. Value Content</span>
             </div>
+            <div class="step-card" id="step3">
+              <i class="fas fa-bullhorn"></i>
+              <span>3. Call to Action</span>
+            </div>
+            <div class="step-card" id="step4">
+              <i class="fas fa-check-circle"></i>
+              <span>4. Final Polish</span>
+            </div>
+          </div>
+          <!-- Script Output Area (Replaced Video Placeholder during generation) -->
+          <div class="script-output" id="scriptOutput">
+            <div class="script-header">
+              <span style="font-weight: 700; color: var(--text-main)">Generated Script</span>
+              <span style="font-size: 12px; color: var(--text-muted)">Word count: <span id="wordCount">0</span></span>
             </div>
+            <div class="script-section">
+              <h4><i class="fas fa-bolt"></i> The Hook (0-5s)</h4>
+              <div class="script-text" id="hookText"></div>
             </div>
+            <div class="script-section">
+              <h4><i class="fas fa-star"></i> The Value (5-20s)</h4>
+              <div class="script-text" id="bodyText"></div>
+            </div>
+            <div class="script-section">
+              <h4><i class="fas fa-arrow-right"></i> The CTA (20-30s)</h4>
+              <div class="script-text" id="ctaText"></div>
+            </div>
+            <button class="generate-btn" style="background: transparent; border: 1px solid var(--border); margin-top: 10px; font-size: 14px; width: 100%;" onclick="downloadMock()">
+              <i class="fas fa-copy"></i> Copy to Clipboard
+            </button>
+          </div>
+          <!-- Video Preview Simulation (Visible when idle) -->
+          <div class="preview-area" id="previewArea">
+            <div class="video-placeholder">
+              <i class="fas fa-play" style="font-size: 30px; margin-bottom: 10px; opacity: 0.5;"></i>
+              <div>Preview Mode</div>
+              <div class="overlay-text" id="captionPreview">Ready to Generate...</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Quick Info Panel -->
+      <div class="arch-panel">
+        <h2>System Status</h2>
+        <div style="display: flex; gap: 20px; margin-bottom: 20px;">
+          <div style="text-align: center;">
+            <div style="font-size: 24px; color: var(--accent-primary);">Active</div>
+            <div style="font-size: 12px; color: var(--text-muted);">GPT-4 Engine</div>
+          </div>
+          <div style="text-align: center;">
+            <div style="font-size: 24px; color: var(--accent-secondary);">Ready</div>
+            <div style="font-size: 12px; color: var(--text-muted);">Trend Analyzer</div>
+          </div>
+          <div style="text-align: center;">
+            <div style="font-size: 24px; color: #fff;">98%</div>
+            <div style="font-size: 12px; color: var(--text-muted);">Virality Score</div>
+          </div>
+        </div>
+        <h3>Recent Scripts</h3>
+        <ul style="list-style: none;">
+          <li style="padding: 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
+            <span>Topic: "Crypto Trading"</span>
+            <span style="color: var(--success); font-size: 12px;"><i class="fas fa-check"></i> Generated</span>
+          </li>
+          <li style="padding: 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
+            <span>Topic: "Fitness Tips"</span>
+            <span style="color: var(--success); font-size: 12px;"><i class="fas fa-check"></i> Generated</span>
+          </li>
+          <li style="padding: 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
+            <span>Topic: "Web Dev"</span>
+            <span style="color: var(--success); font-size: 12px;"><i class="fas fa-check"></i> Generated</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <!-- Architecture Modal -->
+  <div class="modal-overlay" id="archModal">
+    <div class="modal-content">
+      <div class="close-modal" onclick="closeArchitecture()">
+        <i class="fas fa-times"></i>
+      </div>
+      <h1 style="color: var(--text-main); margin-bottom: 20px;">SaaS Architecture Blueprint</h1>
+      <div class="arch-content">
+        <p><strong>Target Product:</strong> ReelsAI.pro (Vertical Video Automation)</p>
+        <h3>1. Complete Product Architecture</h3>
+        <ul>
+          <li><strong>Frontend:</strong> Next.js (React) for SEO and performance. Tailwind CSS for styling.</li>
+          <li><strong>Backend:</strong> Python (FastAPI) for AI orchestration. Node.js for user management.</li>
+          <li><strong>Storage:</strong> AWS S3 for video assets and final MP4s.</li>
+          <li><strong>Database:</strong> PostgreSQL (Supabase) for user data and project metadata.</li>
+          <li><strong>Queue System:</strong> Redis + Celery to handle video rendering tasks asynchronously.</li>
+        </ul>
+        <h3>2. Recommended Tech Stack (MVP)</h3>
+        <ul>
+          <li><strong>Frontend:</strong> React + Vite (Fastest setup).</li>
+          <li><strong>Backend:</strong> FastAPI (Python) - excellent for calling AI libraries.</li>
+          <li><strong>AI APIs:</strong> OpenAI (GPT-4) for Script, ElevenLabs for Voice, Stability AI for Images.</li>
+          <li><strong>Rendering:</strong> Remotion (Serverless FFmpeg wrapper) or custom FFmpeg worker.</li>
+        </ul>
+        <h3>3. Backend Workflow</h3>
+        <ul>
+          <li><strong>Script Generation:</strong> POST /generate-script -> GPT-4 Prompt: "Create a 30s hook, body, CTA script."</li>
+          <li><strong>Voice Generation:</strong> POST /generate-voice -> ElevenLabs API (Text to Speech). Returns audio URL.</li>
+          <li><strong>Caption Timing:</strong> Use ElevenLabs timestamps or Python `librosa` to detect phonemes. Map text to timecodes.</li>
+          <li><strong>Video Composition:</strong> Python script builds JSON for Remotion/FFmpeg. Layers: Background Image -> Audio -> Text Overlay.</li>
+        </ul>
+        <h3>4. FFmpeg / Remotion Rendering</h3>
+        <ul>
+          <li><strong>Remotion:</strong> Sends a JSON payload describing the video layers. Remotion spins up a container, runs FFmpeg, and returns the MP4 URL.</li>
+          <li><strong>Raw FFmpeg:</strong> `ffmpeg -i bg.jpg -i audio.mp3 -vf "drawtext=..." -c:v libx264 output.mp4`. Complex but free.</li>
+        </ul>
+        <h3>5. Database Schema</h3>
+        <ul>
+          <li><strong>Users:</strong> id, email, stripe_sub_status, credits.</li>
+          <li><strong>Projects:</strong> id, user_id, topic, script_text, voice_url, status (processing/done).</li>
+          <li><strong>Videos:</strong> id, project_id, s3_url, duration, resolution.</li>
+        </ul>
+        <h3>6. Scaling to 10,000 Users</h3>
+        <ul>
+          <li><strong>Concurrency:</strong> Use a distributed queue (Kafka or Redis) to manage rendering jobs.</li>
+          <li><strong>GPU Workers:</strong> Spin up GPU instances (AWS g4dn) only when jobs are in the queue. Scale down when idle.</li>
+          <li><strong>CDN:</strong> Serve generated videos via CloudFront to reduce latency.</li>
+        </ul>
+        <h3>7. Monetization Strategy</h3>
+        <ul>
+          <li><strong>Freemium:</strong> 3 free videos/month (watermarked).</li>
+          <li><strong>Pro ($29/mo):</strong> 50 videos, no watermark, HD export, custom branding.</li>
+          <li><strong>Agency ($99/mo):</strong> Unlimited, API access, team seats.</li>
+        </ul>
+        <h3>8. MVP Plan (2-4 Weeks)</h3>
+        <ul>
+          <li><strong>Week 1:</strong> Setup Next.js + Supabase Auth. Build basic form.</li>
+          <li><strong>Week 2:</strong> Integrate OpenAI & ElevenLabs APIs. Create "Script to Audio" pipeline.</li>
+          <li><strong>Week 3:</strong> Build FFmpeg composition logic (static image + audio + text overlay).</li>
+          <li><strong>Week 4:</strong> Deploy to Vercel + AWS. Launch landing page.</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <script>
+    // --- Logic for Simulation ---
+    function switchView(viewName) {
+        // Simple view toggler logic if we had multiple pages
+        console.log("Switching to " + viewName);
+    }
+    function openArchitecture() {
+        const modal = document.getElementById('archModal');
+        modal.style.display = 'flex';
+        modal.style.opacity = '1';
+    }
+    function closeArchitecture() {
+        const modal = document.getElementById('archModal');
+        modal.style.opacity = '0';
+        setTimeout(() => {
+            modal.style.display = 'none';
+        }, 300);
+    }
+    function startGeneration() {
+        const topic = document.getElementById('topicInput').value;
+        if(!topic) {
+            alert("Please enter a topic!");
+            return;
+        }
+        // UI Reset
+        document.getElementById('progressUI').style.display = 'block';
+        document.getElementById('scriptOutput').style.display = 'none'; // Hide script initially
+        document.getElementById('previewArea').style.display = 'flex'; // Show preview
+        document.getElementById('progressBar').style.width = '0%';
+        document.getElementById('statusText').innerText = "Analyzing Trends...";
+        // Reset Steps
+        for(let i=1; i<=4; i++) {
+            document.getElementById('step'+i).classList.remove('completed');
+        }
+        runSimulation(topic);
+    }
+    function runSimulation(topic) {
+        let progress = 0;
+        const bar = document.getElementById('progressBar');
+        const status = document.getElementById('statusText');
+        const captionPreview = document.getElementById('captionPreview');
+        // Step 1: Hook Generation
+        setTimeout(() => {
+            progress = 25;
+            bar.style.width = '25%';
+            status.innerText = "Generating Emotional Hook...";
+            document.getElementById('step1').classList.add('completed');
+            captionPreview.innerText = "Creating Hook...";
+        }, 800);
+        // Step 2: Value Content
+        setTimeout(() => {
+            progress = 50;
+            bar.style.width = '50%';
+            status.innerText = "Drafting Value Content...";
+            document.getElementById('step2').classList.add('completed');
+            captionPreview.innerText = "Writing Body...";
+        }, 2000);
+        // Step 3: CTA
+        setTimeout(() => {
+            progress = 75;
+            bar.style.width = '75%';
+            status.innerText = "Optimizing Call to Action...";
+            document.getElementById('step3').classList.add('completed');
+            captionPreview.innerText = "Finalizing CTA...";
+        }, 3500);
+        // Step 4: Final Polish & Display
+        setTimeout(() => {
+            progress = 100;
+            bar.style.width = '100%';
+            status.innerText = "Script Ready";
+            document.getElementById('step4').classList.add('completed');
+            // Hide preview, show script
+            document.getElementById('previewArea').style.display = 'none';
+            document.getElementById('scriptOutput').style.display = 'block';
+            generateMockScript(topic);
+        }, 5000);
+    }
+    function generateMockScript(topic) {
+        // Mock data generator based on topic
+        const hooks = [
+            `Stop scrolling if you want to master ${topic}!`,
+            `I bet you didn't know this about ${topic}.`,
+            `The biggest mistake you're making in ${topic}.`,
+            `3 secrets to ${topic} that changed my life.`
+        ];
+        const bodies = [
+            `Most people ignore the basics. Focus on consistency over intensity.`,
+            `It's not about the tools, it's about the mindset.`,
+            `You need to understand the core principle before scaling.`
+        ];
+        const ctas = [
+            `Follow for more ${topic} tips!`,
+            `Comment below if you agree!`,
+            `Link in bio for the full guide.`
+        ];
+        // Randomly select parts
+        const hook = hooks[Math.floor(Math.random() * hooks.length)];
+        const body = bodies[Math.floor(Math.random() * bodies.length)];
+        const cta = ctas[Math.floor(Math.random() * ctas.length)];
+        // Update UI
+        document.getElementById('hookText').innerHTML = `<strong>${hook}</strong>`;
+        document.getElementById('bodyText').innerHTML = body;
+        document.getElementById('ctaText').innerHTML = `<strong>${cta}</strong>`;
+        // Calculate word count
+        const totalText = hook + body + cta;
+        const words = totalText.split(' ').length;
+        document.getElementById('wordCount').innerText = words;
+    }
+    function downloadMock() {
+        alert("Script copied to clipboard!");
+    }
+  </script>
 </body>
 </html>