Update index.html

index.html

@@ -5,955 +5,233 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>VOD Archiver Pro</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
         :root {
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1a1a2e;
-            --bg-tertiary: #252542;
-            --accent: #6366f1;
-            --accent-hover: #4f46e5;
-            --success: #10b981;
-            --error: #ef4444;
-            --warning: #f59e0b;
-            --text-primary: #ffffff;
-            --text-secondary: #a0a0c0;
-            --border: #2d2d4a;
-            --shadow: rgba(0, 0, 0, 0.3);
+            --bg-primary: #121212; --bg-secondary: #1E1E1E; --bg-tertiary: #2A2A2A;
+            --accent: #6C63FF; --accent-hover: #574BFF; --success: #1DB954; --error: #F44336;
+            --text-primary: #FFFFFF; --text-secondary: #B3B3B3; --border: #3A3A3A;
         }
-
+        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 1rem;
-            background-image: 
-                radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background: var(--bg-primary); color: var(--text-primary);
+            display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1rem;
         }
-
         .container {
-            width: 100%;
-            max-width: 900px;
-            background: var(--bg-secondary);
-            border-radius: 20px;
-            box-shadow: 0 20px 60px var(--shadow);
-            overflow: hidden;
-            border: 1px solid var(--border);
+            width: 100%; max-width: 800px; background: var(--bg-secondary);
+            border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden;
         }
-
         .header {
-            background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
-            padding: 2.5rem;
-            text-align: center;
+            padding: 2rem; text-align: center; background: var(--bg-tertiary);
             border-bottom: 1px solid var(--border);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
-            animation: rotate 30s linear infinite;
-        }
-
-        @keyframes rotate {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .header h1 {
-            font-size: 2.5rem;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 0.5rem;
-            position: relative;
-            z-index: 1;
-        }
-
-        .header p {
-            color: var(--text-secondary);
-            font-size: 1rem;
-            position: relative;
-            z-index: 1;
-        }
-
-        .content {
-            padding: 2.5rem;
-        }
-
-        .form-section {
-            margin-bottom: 2rem;
-        }
-
-        .input-group {
-            margin-bottom: 1.5rem;
-        }
-
-        .input-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 600;
-            color: var(--text-primary);
-            font-size: 0.9rem;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .input-wrapper {
-            position: relative;
-        }
-
-        .input-wrapper input,
-        .input-wrapper select {
-            width: 100%;
-            padding: 1rem 1.25rem;
-            background: var(--bg-tertiary);
-            border: 2px solid var(--border);
-            border-radius: 12px;
-            color: var(--text-primary);
-            font-size: 1rem;
-            transition: all 0.3s ease;
-        }
-
-        .input-wrapper input:focus,
-        .input-wrapper select:focus {
-            outline: none;
-            border-color: var(--accent);
-            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
-            transform: translateY(-2px);
         }
-
-        .input-wrapper .icon {
-            position: absolute;
-            right: 1.25rem;
-            top: 50%;
-            transform: translateY(-50%);
-            color: var(--text-secondary);
-            pointer-events: none;
-        }
-
-        .quality-selector {
-            display: none;
-            margin-bottom: 1.5rem;
-            animation: slideDown 0.3s ease-out;
-        }
-
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .button-group {
-            display: grid;
-            grid-template-columns: 2fr 1fr 1fr;
-            gap: 1rem;
-            margin-bottom: 2rem;
-        }
-
+        .header h1 { font-size: 2rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }
+        .header p { color: var(--text-secondary); }
+        .content { padding: 2rem; }
+        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
+        .input-group { display: flex; flex-direction: column; }
+        .input-group.full-width { grid-column: 1 / -1; }
+        label { margin-bottom: 0.5rem; font-weight: 500; color: var(--text-secondary); }
+        input, select {
+            padding: 0.75rem; background: var(--bg-primary); border: 1px solid var(--border);
+            border-radius: 8px; color: var(--text-primary); font-size: 1rem; transition: all 0.2s;
+        }
+        input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
+        .button-group { display: flex; gap: 1rem; margin-top: 1.5rem; }
         button {
-            padding: 1rem 1.5rem;
-            font-size: 1rem;
-            font-weight: 600;
-            border: none;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        button::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-
-        button:active::before {
-            width: 300px;
-            height: 300px;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
-        }
-
-        .btn-primary:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
-        }
-
-        .btn-secondary {
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            border: 2px solid var(--border);
-        }
-
-        .btn-secondary:hover:not(:disabled) {
-            background: var(--border);
-            transform: translateY(-2px);
-        }
-
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none !important;
-        }
-
-        .status-section {
-            display: none;
-            background: var(--bg-tertiary);
-            border-radius: 16px;
-            padding: 2rem;
-            margin-bottom: 2rem;
-            border: 1px solid var(--border);
-            animation: fadeIn 0.5s ease-out;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .status-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 1.5rem;
-        }
-
-        .status-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .status-indicator {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: var(--warning);
-            animation: pulse 2s infinite;
-        }
-
-        .status-indicator.success {
-            background: var(--success);
-            animation: none;
-        }
-
-        .status-indicator.error {
-            background: var(--error);
-            animation: none;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(0.8); }
-        }
-
-        .progress-container {
-            margin-bottom: 1.5rem;
-        }
-
-        .progress-info {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 0.5rem;
-            font-size: 0.9rem;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 8px;
-            background: var(--bg-primary);
-            border-radius: 4px;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--accent) 0%, var(--success) 100%);
-            width: 0%;
-            transition: width 0.5s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .progress-fill::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            background: linear-gradient(
-                90deg,
-                transparent,
-                rgba(255, 255, 255, 0.2),
-                transparent
-            );
-            animation: shimmer 2s infinite;
-        }
-
-        @keyframes shimmer {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
-        }
-
+            flex-grow: 1; padding: 0.8rem; font-size: 1rem; font-weight: 600; border: none;
+            border-radius: 8px; cursor: pointer; transition: all 0.2s;
+        }
+        .btn-primary { background: var(--accent); color: white; }
+        .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
+        .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
+        .btn-secondary:hover:not(:disabled) { background: #333; }
+        button:disabled { opacity: 0.5; cursor: not-allowed; }
+        .status-section { display: none; margin-top: 2rem; }
+        .progress-container { margin-bottom: 1rem; display: none; }
+        .progress-info { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; }
+        .progress-bar { width: 100%; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
+        .progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s ease; }
         .log-container {
-            background: var(--bg-primary);
-            border-radius: 12px;
-            padding: 1rem;
-            height: 250px;
-            overflow-y: auto;
-            font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
-            font-size: 0.875rem;
-            line-height: 1.6;
-            border: 1px solid var(--border);
-            position: relative;
-        }
-
-        .log-controls {
-            position: absolute;
-            top: 0.5rem;
-            right: 0.5rem;
-            display: flex;
-            gap: 0.5rem;
-            z-index: 10;
-        }
-
-        .log-control-btn {
-            padding: 0.25rem 0.5rem;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-secondary);
-            font-size: 0.75rem;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .log-control-btn:hover {
-            background: var(--border);
-            color: var(--text-primary);
-        }
-
-        .log-control-btn.active {
-            background: var(--accent);
-            color: white;
-            border-color: var(--accent);
-        }
-
-        .log-entry {
-            margin-bottom: 0.5rem;
-            padding: 0.25rem 0;
-            animation: slideIn 0.3s ease-out;
-            word-wrap: break-word;
-        }
-
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateX(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        .log-entry.error { color: var(--error); }
-        .log-entry.success { color: var(--success); }
-        .log-entry.info { color: var(--accent); }
-        .log-entry.warning { color: var(--warning); }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 1rem;
-            margin-top: 1.5rem;
-        }
-
-        .stat-card {
-            background: var(--bg-primary);
-            padding: 1.25rem;
-            border-radius: 12px;
-            text-align: center;
-            border: 1px solid var(--border);
-            transition: all 0.3s ease;
-        }
-
-        .stat-card:hover {
-            transform: translateY(-2px);
-            border-color: var(--accent);
-        }
-
-        .stat-value {
-            font-size: 1.75rem;
-            font-weight: 700;
-            color: var(--accent);
-            margin-bottom: 0.25rem;
-        }
-
-        .stat-label {
-            font-size: 0.875rem;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .video-preview {
-            display: none;
-            margin-top: 2rem;
-            background: var(--bg-tertiary);
-            border-radius: 16px;
-            padding: 1.5rem;
-            border: 1px solid var(--border);
-        }
-
-        .video-preview h3 {
-            margin-bottom: 1rem;
-            color: var(--text-primary);
-        }
-
-        .video-player {
-            width: 100%;
-            border-radius: 12px;
-            background: var(--bg-primary);
-        }
-
-        .download-section {
-            display: flex;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-
-        /* Custom scrollbar */
-        .log-container::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .log-container::-webkit-scrollbar-track {
-            background: var(--bg-secondary);
-            border-radius: 4px;
-        }
-
-        .log-container::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 4px;
-        }
-
-        .log-container::-webkit-scrollbar-thumb:hover {
-            background: var(--accent);
-        }
-
-        /* Loading animation */
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid var(--border);
-            border-radius: 50%;
-            border-top-color: var(--accent);
-            animation: spin 1s ease-in-out infinite;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .container {
-                margin: 1rem;
-            }
-            
-            .header h1 {
-                font-size: 2rem;
-            }
-            
-            .button-group {
-                grid-template-columns: 1fr;
-            }
-            
-            .stats-grid {
-                grid-template-columns: 1fr 1fr;
-            }
-        }
+            background: var(--bg-primary); border-radius: 8px; padding: 1rem; height: 200px;
+            overflow-y: auto; font-family: monospace; font-size: 0.9rem; position: relative; margin-top: 1rem;
+        }
+        .log-controls { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.5rem; }
+        .log-btn { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer; }
+        .log-btn.active { background: var(--accent); color: white; }
+        .log-entry.error { color: var(--error); } .log-entry.success { color: var(--success); }
+        .video-controls { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
+        .video-controls h3 { margin-bottom: 1rem; }
+        video { width: 100%; border-radius: 8px; background: black; }
+        .video-button-group { display: flex; gap: 1rem; margin-top: 1rem; }
     </style>
 </head>
 <body>
-
 <div class="container">
-    <div class="header">
-        <h1>VOD Archiver Pro</h1>
-        <p>Download and archive Twitch VODs with quality selection</p>
-    </div>
-
+    <div class="header"><h1>VOD Archiver Pro</h1><p>Download, Preview, and Archive Twitch VODs</p></div>
     <div class="content">
-        <div class="form-section">
-            <form id="vodForm">
-                <div class="input-group">
-                    <label for="vod_url">Twitch VOD URL</label>
-                    <div class="input-wrapper">
-                        <input type="text" id="vod_url" name="vod_url" 
-                               placeholder="https://www.twitch.tv/videos/123456789" required>
-                        <span class="icon">🎬</span>
-                    </div>
+        <form id="mainForm">
+            <div class="form-grid">
+                <div class="input-group full-width">
+                    <label for="vodUrl">Twitch VOD URL</label>
+                    <input type="text" id="vodUrl" placeholder="https://www.twitch.tv/videos/..." required>
                 </div>
-
-                <div class="quality-selector" id="qualitySelector">
-                    <label for="format_select">Select Quality</label>
-                    <div class="input-wrapper">
-                        <select id="format_select" name="format_select">
-                            <option value="best">Best Quality (Source)</option>
-                        </select>
-                        <span class="icon">🎯</span>
-                    </div>
-                </div>
-
                 <div class="input-group">
-                    <label for="mega_user">Mega.nz Email</label>
-                    <div class="input-wrapper">
-                        <input type="email" id="mega_user" name="mega_user" 
-                               placeholder="your@email.com" required>
-                        <span class="icon">📧</span>
-                    </div>
+                    <label for="megaUser">Mega.nz Email</label>
+                    <input type="email" id="megaUser" required>
                 </div>
-
                 <div class="input-group">
-                    <label for="mega_pass">Mega.nz Password</label>
-                    <div class="input-wrapper">
-                        <input type="password" id="mega_pass" name="mega_pass" 
-                               placeholder="••••••••" required>
-                        <span class="icon">🔒</span>
-                    </div>
+                    <label for="megaPass">Mega.nz Password</label>
+                    <input type="password" id="megaPass" required>
                 </div>
-
-                <div class="button-group">
-                    <button type="submit" class="btn-primary" id="submitBtn">
-                        <span id="btnText">Start Archiving</span>
-                    </button>
-                    <button type="button" class="btn-secondary" id="qualityBtn">
-                        Get Qualities
-                    </button>
-                    <button type="button" class="btn-secondary" id="validateBtn">
-                        Validate Login
-                    </button>
-                </div>
-            </form>
-        </div>
-
-        <div class="status-section" id="statusSection">
-            <div class="status-header">
-                <div class="status-title">
-                    <span id="statusText">Initializing</span>
-                    <div class="status-indicator" id="statusIndicator"></div>
+                <div class="input-group full-width">
+                    <label for="formatSelect">Quality</label>
+                    <select id="formatSelect" disabled><option>Click "Get Qualities" first</option></select>
                 </div>
-                <div class="loading" id="loadingSpinner" style="display: none;"></div>
             </div>
-
-            <div class="progress-container" id="downloadProgress" style="display: none;">
-                <div class="progress-info">
-                    <span>Download Progress</span>
-                    <span id="downloadInfo">0%</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-fill" id="downloadProgressFill"></div>
-                </div>
+            <div class="button-group">
+                <button type="button" class="btn-secondary" id="qualityBtn">Get Qualities</button>
+                <button type="submit" class="btn-primary" id="startBtn" disabled>Start Archiving</button>
             </div>
+        </form>
 
-            <div class="progress-container" id="uploadProgress" style="display: none;">
-                <div class="progress-info">
-                    <span>Upload Progress</span>
-                    <span id="uploadInfo">0%</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-fill" id="uploadProgressFill"></div>
-                </div>
+        <div class="status-section" id="statusSection">
+            <div class="progress-container" id="downloadProgress">
+                <div class="progress-info"><span>Download</span><span id="downloadInfo"></span></div>
+                <div class="progress-bar"><div class="progress-fill" id="downloadFill"></div></div>
+            </div>
+            <div class="progress-container" id="uploadProgress">
+                <div class="progress-info"><span>Upload</span><span id="uploadInfo"></span></div>
+                <div class="progress-bar"><div class="progress-fill" id="uploadFill"></div></div>
             </div>
-
             <div class="log-container" id="logContainer">
                 <div class="log-controls">
-                    <button class="log-control-btn" id="clearLogsBtn">Clear</button>
-                    <button class="log-control-btn active" id="autoScrollBtn">Auto Scroll</button>
-                </div>
-            </div>
-
-            <div class="stats-grid" id="statsGrid">
-                <div class="stat-card">
-                    <div class="stat-value" id="downloadSpeed">--</div>
-                    <div class="stat-label">Download Speed</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value" id="fileSize">--</div>
-                    <div class="stat-label">File Size</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value" id="timeElapsed">00:00</div>
-                    <div class="stat-label">Time Elapsed</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value" id="eta">--</div>
-                    <div class="stat-label">ETA</div>
+                    <button type="button" class="log-btn" id="clearLogBtn">Clear</button>
+                    <button type="button" class="log-btn active" id="scrollLockBtn">Auto Scroll</button>
                 </div>
             </div>
         </div>
 
-        <div class="video-preview" id="videoPreview">
-            <h3>Preview & Download</h3>
-            <video class="video-player" id="videoPlayer" controls></video>
-            <div class="download-section">
-                <button class="btn-primary" id="downloadBtn">Download VOD</button>
-                <button class="btn-secondary" id="copyLinkBtn">Copy Link</button>
+        <div class="video-controls" id="videoControls">
+            <h3>Preview & Control</h3>
+            <video id="videoPlayer" controls></video>
+            <div class="video-button-group">
+                <button type="button" class="btn-secondary" id="downloadBtn">Download File</button>
+                <button type="button" class="btn-secondary" id="copyLinkBtn">Copy Link</button>
+                <button type="button" class="btn-primary" id="cleanupBtn" style="background: var(--error);">Clean Up Server File</button>
             </div>
         </div>
     </div>
 </div>
 
 <script>
-    // UI Elements
-    const elements = {
-        form: document.getElementById('vodForm'),
-        vodUrl: document.getElementById('vod_url'),
-        megaUser: document.getElementById('mega_user'),
-        megaPass: document.getElementById('mega_pass'),
-        formatSelect: document.getElementById('format_select'),
-        qualitySelector: document.getElementById('qualitySelector'),
-        submitBtn: document.getElementById('submitBtn'),
-        qualityBtn: document.getElementById('qualityBtn'),
-        validateBtn: document.getElementById('validateBtn'),
-        btnText: document.getElementById('btnText'),
-        statusSection: document.getElementById('statusSection'),
-        statusText: document.getElementById('statusText'),
-        statusIndicator: document.getElementById('statusIndicator'),
-        loadingSpinner: document.getElementById('loadingSpinner'),
-        logContainer: document.getElementById('logContainer'),
-        clearLogsBtn: document.getElementById('clearLogsBtn'),
-        autoScrollBtn: document.getElementById('autoScrollBtn'),
-        downloadProgress: document.getElementById('downloadProgress'),
-        downloadProgressFill: document.getElementById('downloadProgressFill'),
-        downloadInfo: document.getElementById('downloadInfo'),
-        uploadProgress: document.getElementById('uploadProgress'),
-        uploadProgressFill: document.getElementById('uploadProgressFill'),
-        uploadInfo: document.getElementById('uploadInfo'),
-        downloadSpeed: document.getElementById('downloadSpeed'),
-        fileSize: document.getElementById('fileSize'),
-        timeElapsed: document.getElementById('timeElapsed'),
-        eta: document.getElementById('eta'),
-        videoPreview: document.getElementById('videoPreview'),
-        videoPlayer: document.getElementById('videoPlayer'),
-        downloadBtn: document.getElementById('downloadBtn'),
-        copyLinkBtn: document.getElementById('copyLinkBtn')
+    const el = {
+        form: document.getElementById('mainForm'), vodUrl: document.getElementById('vodUrl'),
+        megaUser: document.getElementById('megaUser'), megaPass: document.getElementById('megaPass'),
+        formatSelect: document.getElementById('formatSelect'), qualityBtn: document.getElementById('qualityBtn'),
+        startBtn: document.getElementById('startBtn'), statusSection: document.getElementById('statusSection'),
+        downloadProgress: document.getElementById('downloadProgress'), downloadInfo: document.getElementById('downloadInfo'),
+        downloadFill: document.getElementById('downloadFill'), uploadProgress: document.getElementById('uploadProgress'),
+        uploadInfo: document.getElementById('uploadInfo'), uploadFill: document.getElementById('uploadFill'),
+        logContainer: document.getElementById('logContainer'), clearLogBtn: document.getElementById('clearLogBtn'),
+        scrollLockBtn: document.getElementById('scrollLockBtn'), videoControls: document.getElementById('videoControls'),
+        videoPlayer: document.getElementById('videoPlayer'), downloadBtn: document.getElementById('downloadBtn'),
+        copyLinkBtn: document.getElementById('copyLinkBtn'), cleanupBtn: document.getElementById('cleanupBtn'),
     };
 
-    // State
-    let eventSource = null;
-    let startTime = null;
-    let autoScroll = true;
-    let progressInterval = null;
-    let currentFileInfo = null;
-
-    // Auto scroll toggle
-    elements.autoScrollBtn.addEventListener('click', () => {
-        autoScroll = !autoScroll;
-        elements.autoScrollBtn.classList.toggle('active', autoScroll);
-    });
+    let autoScroll = true; let currentFileId = null;
 
-    // Clear logs
-    elements.clearLogsBtn.addEventListener('click', () => {
-        elements.logContainer.innerHTML = '';
-        // Re-add controls
-        elements.logContainer.appendChild(document.querySelector('.log-controls'));
-    });
-
-    // Add log entry
-    function addLog(message, type = '') {
-        const entry = document.createElement('div');
-        entry.className = `log-entry ${type}`;
-        entry.textContent = message;
-        elements.logContainer.appendChild(entry);
-        
-        if (autoScroll) {
-            elements.logContainer.scrollTop = elements.logContainer.scrollHeight;
-        }
-    }
+    el.qualityBtn.addEventListener('click', fetchQualities);
+    el.form.addEventListener('submit', startProcess);
+    el.scrollLockBtn.addEventListener('click', () => { autoScroll = !autoScroll; el.scrollLockBtn.classList.toggle('active', autoScroll); });
+    el.clearLogBtn.addEventListener('click', () => { const controls = el.logContainer.querySelector('.log-controls'); el.logContainer.innerHTML = ''; el.logContainer.appendChild(controls); });
 
-    // Update progress
-    function updateProgress(phase, percent, info = {}) {
-        if (phase === 'download') {
-            elements.downloadProgress.style.display = 'block';
-            elements.downloadProgressFill.style.width = `${percent}%`;
-            
-            let infoText = `${percent.toFixed(1)}%`;
-            if (info.speed) infoText += ` @ ${info.speed}`;
-            if (info.eta) infoText += ` (ETA: ${info.eta})`;
-            elements.downloadInfo.textContent = infoText;
-            
-            if (info.speed) elements.downloadSpeed.textContent = info.speed;
-            if (info.size) elements.fileSize.textContent = info.size;
-            if (info.eta) elements.eta.textContent = info.eta;
-        } else if (phase === 'upload') {
-            elements.uploadProgress.style.display = 'block';
-            elements.uploadProgressFill.style.width = `${percent}%`;
-            elements.uploadInfo.textContent = `${percent}%`;
-        }
+    async function fetchQualities() {
+        if (!el.vodUrl.value) { alert('Please enter a VOD URL.'); return; }
+        setLoading(el.qualityBtn, true);
+        try {
+            const response = await fetch('/get_formats', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: el.vodUrl.value }) });
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            el.formatSelect.innerHTML = '';
+            data.formats.forEach(f => { const option = document.createElement('option'); option.value = f.id; option.textContent = f.label; el.formatSelect.appendChild(option); });
+            el.formatSelect.disabled = false; el.startBtn.disabled = false;
+            addLog('Quality options loaded.', 'success');
+        } catch (error) { addLog(`Error fetching qualities: ${error.message}`, 'error'); } finally { setLoading(el.qualityBtn, false); }
     }
 
-    // Update elapsed time
-    function updateElapsedTime() {
-        if (startTime) {
-            const elapsed = Math.floor((Date.now() - startTime) / 1000);
-            const minutes = Math.floor(elapsed / 60);
-            const seconds = elapsed % 60;
-            elements.timeElapsed.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-        }
+    function startProcess(e) {
+        e.preventDefault(); resetUI(); setProcessing(true);
+        const payload = { url: el.vodUrl.value, mega_user: el.megaUser.value, mega_pass: el.megaPass.value, format_id: el.formatSelect.value };
+        fetch('/process', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+            .then(response => {
+                const reader = response.body.getReader(); const decoder = new TextDecoder();
+                function read() {
+                    reader.read().then(({ done, value }) => {
+                        if (done) { handleStreamEnd(); return; }
+                        decoder.decode(value, { stream: true }).split('\n\n').forEach(line => {
+                            if (line.startsWith('data:')) handleSSEMessage(line.substring(5));
+                        });
+                        read();
+                    });
+                }
+                read();
+            }).catch(err => { addLog(`Failed to start process: ${err}`, 'error'); setProcessing(false); });
     }
 
-    // Get quality options
-    elements.qualityBtn.addEventListener('click', async () => {
-        const vodUrl = elements.vodUrl.value.trim();
-        if (!vodUrl) {
-            alert('Please enter a VOD URL first');
-            return;
-        }
-
-        elements.qualityBtn.disabled = true;
-        elements.qualityBtn.textContent = 'Loading...';
-
+    function handleSSEMessage(jsonString) {
         try {
-            const response = await fetch(`/get_formats/${encodeURIComponent(vodUrl)}`);
-            const data = await response.json();
-
-            if (data.error) {
-                throw new Error(data.error);
+            const data = JSON.parse(jsonString);
+            switch (data.type) {
+                case 'phase':
+                    addLog(data.text);
+                    if (data.phase === 'download') el.downloadProgress.style.display = 'block';
+                    if (data.phase === 'upload') el.uploadProgress.style.display = 'block';
+                    break;
+                case 'progress': updateProgressUI(data.phase, data); break;
+                case 'file_ready': currentFileId = data.file_id; setupVideoControls(data.file_id); addLog('File is ready for preview and download.', 'success'); break;
+                case 'complete': addLog(data.text, 'success'); break;
+                case 'error': addLog(`ERROR: ${data.message}`, 'error'); setProcessing(false); break;
+                case 'done': setProcessing(false); break;
             }
+        } catch (e) { /* Ignore non-json messages */ }
+    }
 
-            // Populate format selector
-            elements.formatSelect.innerHTML = '';
-            data.formats.forEach(format => {
-                const option = document.createElement('option');
-                option.value = format.format_id;
-                option.textContent = format.label;
-                elements.formatSelect.appendChild(option);
-            });
-
-            elements.qualitySelector.style.display = 'block';
-            addLog('✅ Quality options loaded', 'success');
-        } catch (error) {
-            addLog(`❌ Failed to load qualities: ${error.message}`, 'error');
-        } finally {
-            elements.qualityBtn.disabled = false;
-            elements.qualityBtn.textContent = 'Get Qualities';
-        }
-    });
-
-    // Validate credentials
-    elements.validateBtn.addEventListener('click', async () => {
-        const megaUser = elements.megaUser.value.trim();
-        const megaPass = elements.megaPass.value.trim();
-
-        if (!megaUser || !megaPass) {
-            alert('Please enter Mega credentials first');
-            return;
-        }
-
-        elements.validateBtn.disabled = true;
-        elements.validateBtn.textContent = 'Validating...';
-
-        try {
-            const response = await fetch(`/validate?mega_user=${encodeURIComponent(megaUser)}&mega_pass=${encodeURIComponent(megaPass)}`);
-            const data = await response.json();
-
-            if (data.valid) {
-                addLog('✅ ' + data.message, 'success');
-            } else {
-                addLog('❌ ' + data.message, 'error');
-            }
-        } catch (error) {
-            addLog('❌ Failed to validate credentials', 'error');
-        } finally {
-            elements.validateBtn.disabled = false;
-            elements.validateBtn.textContent = 'Validate Login';
-        }
-    });
-
-    // Main form submission
-    elements.form.addEventListener('submit', (e) => {
-        e.preventDefault();
-
-        const vodUrl = elements.vodUrl.value.trim();
-        const megaUser = elements.megaUser.value.trim();
-        const megaPass = elements.megaPass.value.trim();
-        const formatId = elements.formatSelect.value || 'best';
-
-        if (!vodUrl || !megaUser || !megaPass) {
-            alert('Please fill in all required fields');
-            return;
-        }
-
-        // Reset UI
-        startTime = Date.now();
-        elements.statusSection.style.display = 'block';
-        elements.statusText.textContent = 'Initializing';
-        elements.statusIndicator.className = 'status-indicator';
-        elements.loadingSpinner.style.display = 'block';
-        elements.submitBtn.disabled = true;
-        elements.qualityBtn.disabled = true;
-        elements.validateBtn.disabled = true;
-        elements.btnText.textContent = 'Processing...';
-        elements.downloadProgress.style.display = 'none';
-        elements.uploadProgress.style.display = 'none';
-        elements.downloadProgressFill.style.width = '0%';
-        elements.uploadProgressFill.style.width = '0%';
-        elements.videoPreview.style.display = 'none';
-        
-        // Clear stats
-        elements.downloadSpeed.textContent = '--';
-        elements.fileSize.textContent = '--';
-        elements.eta.textContent = '--';
-
-        // Start elapsed time update
-        if (progressInterval) clearInterval(progressInterval);
-        progressInterval = setInterval(updateElapsedTime, 1000);
-
-        // Close existing connection
-        if (eventSource) {
-            eventSource.close();
-        }
-
-        // Start new connection
-        const params = new URLSearchParams({
-            vod_url: vodUrl,
-            mega_user: megaUser,
-            mega_pass: megaPass,
-            format_id: formatId
-        });
-
-        eventSource = new EventSource(`/process?${params.toString()}`);
-
-        eventSource.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-
-                switch (data.type) {
-                    case 'info':
-                        addLog(data.message, 'info');
-                        break;
-
-                    case 'phase':
-                        if (data.phase === 'download') {
-                            elements.statusText.textContent = 'Downloading VOD';
-                        } else if (data.phase === 'upload') {
-                            elements.statusText.textContent = 'Uploading to Mega';
-                        }
-                        break;
-
-                    case 'progress':
-                        // Fetch detailed progress
-                        fetch('/progress')
-                            .then(res => res.json())
-                            .then(progressData => {
-                                if (data.phase === 'download') {
-                                    updateProgress('download', data.percent, progressData.download);
-                                } else if (data.phase === 'upload') {
-                                    updateProgress('upload', data.percent, progressData.upload);
-                                }
-                            });
-                        break;
-
-                    case 'file_info':
-                        currentFileInfo = data.data;
-                        // Could enable preview here if needed
-                        break;
-
-                    case 'error':
-                        addLog(data.message, 'error');
-                        elements.statusIndicator.classList.add('error');
-                        elements.statusText.textContent = 'Error';
-                        break;
+    function handleStreamEnd() { addLog("Process stream finished."); setProcessing(false); }
 
-                    case 'complete':
-                        elements.statusText.textContent = 'Complete!';
-                        elements.statusIndicator.classList.add('success');
-                        elements.loadingSpinner.style.display = 'none';
-                        addLog('✨ Process completed successfully!', 'success');
-                        break;
+    function updateProgressUI(phase, data) {
+        const fill = phase === 'download' ? el.downloadFill : el.uploadFill;
+        const info = phase === 'download' ? el.downloadInfo : el.uploadInfo;
+        fill.style.width = `${data.percent}%`;
+        let infoText = `${data.percent.toFixed(1)}%`;
+        if (data.speed) infoText += ` (${data.speed} - ETA: ${data.eta || 'N/A'})`;
+        info.textContent = infoText;
+    }
 
-                    case 'done':
-                        eventSource.close();
-                        elements.submitBtn.disabled = false;
-                        elements.qualityBtn.disabled = false;
-                        elements.validateBtn.disabled = false;
-                        elements.btnText.textContent = 'Start Archiving';
-                        if (progressInterval) {
-                            clearInterval(progressInterval);
-                        }
-                        break;
-                }
-            } catch (error) {
-                console.error('Error parsing message:', error);
+    function setupVideoControls(fileId) {
+        el.videoControls.style.display = 'block';
+        el.videoPlayer.src = `/video/${fileId}`;
+        el.downloadBtn.onclick = () => window.location.href = `/download/${fileId}`;
+        el.copyLinkBtn.onclick = () => { navigator.clipboard.writeText(`${window.location.origin}/video/${fileId}`); alert('Link copied!'); };
+        el.cleanupBtn.onclick = async () => {
+            if (confirm('Are you sure you want to delete the file from the server?')) {
+                setLoading(el.cleanupBtn, true);
+                await fetch(`/cleanup/${fileId}`, { method: 'POST' });
+                addLog(`File ${fileId} cleaned up.`, 'success');
+                el.videoControls.style.display = 'none'; currentFileId = null;
+                setLoading(el.cleanupBtn, false);
             }
         };
+    }
 
-        eventSource.onerror = () => {
-            addLog('❌ Connection lost', 'error');
-            eventSource.close();
-            elements.submitBtn.disabled = false;
-            elements.qualityBtn.disabled = false;
-            elements.validateBtn.disabled = false;
-            elements.btnText.textContent = 'Start Archiving';
-            elements.statusIndicator.classList.add('error');
-            elements.loadingSpinner.style.display = 'none';
-            if (progressInterval) {
-                clearInterval(progressInterval);
-            }
-        };
-    });
+    function resetUI() {
+        el.statusSection.style.display = 'block'; el.videoControls.style.display = 'none';
+        const controls = el.logContainer.querySelector('.log-controls'); el.logContainer.innerHTML = ''; el.logContainer.appendChild(controls);
+        currentFileId = null;
+        ['download', 'upload'].forEach(p => { document.getElementById(`${p}Progress`).style.display = 'none'; document.getElementById(`${p}Fill`).style.width = '0%'; });
+    }
 
-    // Initialize
-    elements.vodUrl.focus();
+    function setProcessing(is) { el.startBtn.disabled = is; el.qualityBtn.disabled = is; }
+    function setLoading(btn, is) { btn.disabled = is; }
 </script>
-
 </body>
 </html>