Add project files

.gitignore

@@ -0,0 +1,4 @@
+.pid
+nohup.out
+venv
+downloads

README.md

@@ -0,0 +1,34 @@
+# VDROP — yt-dlp + Flask Downloader
+
+A clean web app to download videos and audio from YouTube and 1000+ other sites.
+
+## Requirements
+
+- Python 3.8+
+- `ffmpeg` installed on your system ([ffmpeg.org](https://ffmpeg.org/download.html))
+
+## Setup
+
+```bash
+# 1. Install Python dependencies
+pip install -r requirements.txt
+
+# 2. Run the app
+python app.py
+```
+
+Then open **http://localhost:5000** in your browser.
+
+## Features
+
+- **Video download**: MP4 output, choose resolution (best / 1080p / 720p / 480p / 360p)
+- **Audio download**: Extracts audio as MP3, AAC, M4A, Opus, or FLAC
+- **Video info preview**: Click "Inspect" to see thumbnail, title, uploader and real available resolutions before downloading
+- **Live progress bar**: Shows download %, speed, and ETA in real time
+- **One-click save**: Download button appears when the file is ready
+
+## Notes
+
+- Downloaded files are saved in the `downloads/` folder
+- Works with YouTube, Vimeo, Twitter/X, TikTok, and 1000+ sites supported by yt-dlp
+- FFmpeg is required for audio extraction and video merging

app.py

@@ -0,0 +1,171 @@
+import os
+import re
+import json
+import threading
+import uuid
+from flask import Flask, request, jsonify, send_file, render_template
+import yt_dlp
+
+app = Flask(__name__)
+
+DOWNLOAD_DIR = os.path.join(os.path.dirname(__file__), "downloads")
+os.makedirs(DOWNLOAD_DIR, exist_ok=True)
+
+# Track job progress
+jobs = {}
+
+def sanitize_filename(name):
+    return re.sub(r'[\\/*?:"<>|]', "_", name)
+
+def run_download(job_id, url, fmt, quality):
+    jobs[job_id]["status"] = "downloading"
+    jobs[job_id]["progress"] = 0
+
+    def progress_hook(d):
+        if d["status"] == "downloading":
+            total = d.get("total_bytes") or d.get("total_bytes_estimate", 0)
+            downloaded = d.get("downloaded_bytes", 0)
+            if total:
+                pct = int(downloaded / total * 100)
+                jobs[job_id]["progress"] = pct
+                jobs[job_id]["speed"] = d.get("_speed_str", "")
+                jobs[job_id]["eta"] = d.get("_eta_str", "")
+        elif d["status"] == "finished":
+            jobs[job_id]["progress"] = 99
+
+    try:
+        import shutil
+
+        common = {
+            "progress_hooks": [progress_hook],
+            "quiet": True,
+            "extractor_args": {"youtube": {
+                "js_runtimes": [f"node:/usr/bin/node"]
+            }},
+        }
+
+        if fmt == "audio":
+            ydl_opts = {
+                **common,
+                "format": "bestaudio/best",
+                "outtmpl": os.path.join(DOWNLOAD_DIR, f"{job_id}_%(title)s.%(ext)s"),
+                "postprocessors": [{
+                    "key": "FFmpegExtractAudio",
+                    "preferredcodec": quality or "mp3",
+                    "preferredquality": "192",
+                }],
+            }
+        else:
+            res = quality or "best"
+            if res == "best":
+                fmt_str = "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best"
+            else:
+                h = res.replace("p", "")
+                fmt_str = f"bestvideo[height<={h}][ext=mp4]+bestaudio[ext=m4a]/best[height<={h}][ext=mp4]/best"
+
+            ydl_opts = {
+                **common,
+                "format": fmt_str,
+                "outtmpl": os.path.join(DOWNLOAD_DIR, f"{job_id}_%(title)s.%(ext)s"),
+                "merge_output_format": "mp4",
+            }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(url, download=True)
+            title = info.get("title", "video")
+
+        # Find the downloaded file
+        files = [f for f in os.listdir(DOWNLOAD_DIR) if f.startswith(job_id)]
+        if files:
+            jobs[job_id]["status"] = "done"
+            jobs[job_id]["progress"] = 100
+            jobs[job_id]["filename"] = files[0]
+            jobs[job_id]["title"] = title
+        else:
+            jobs[job_id]["status"] = "error"
+            jobs[job_id]["error"] = "File not found after download."
+
+    except Exception as e:
+        jobs[job_id]["status"] = "error"
+        jobs[job_id]["error"] = str(e)
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/info", methods=["POST"])
+def get_info():
+    data = request.get_json()
+    url = data.get("url", "").strip()
+    if not url:
+        return jsonify({"error": "No URL provided"}), 400
+    try:
+        import shutil
+        node_bin = shutil.which("node") or shutil.which("nodejs") or "/usr/bin/node"
+        ydl_opts = {
+            "quiet": True,
+            "skip_download": True,
+            "extractor_args": {"youtube": {
+                "js_runtimes": [f"node:{node_bin}"]
+            }},
+        }
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(url, download=False)
+        formats = info.get("formats", [])
+        heights = sorted(set(
+            f.get("height") for f in formats
+            if f.get("height") and f.get("vcodec") != "none"
+        ), reverse=True)
+        return jsonify({
+            "title": info.get("title"),
+            "thumbnail": info.get("thumbnail"),
+            "duration": info.get("duration"),
+            "uploader": info.get("uploader"),
+            "resolutions": [f"{h}p" for h in heights[:6]],
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 400
+
+
+@app.route("/download", methods=["POST"])
+def start_download():
+    data = request.get_json()
+    url = data.get("url", "").strip()
+    fmt = data.get("format", "video")
+    quality = data.get("quality", "best")
+
+    if not url:
+        return jsonify({"error": "No URL provided"}), 400
+
+    job_id = str(uuid.uuid4())[:8]
+    jobs[job_id] = {"status": "queued", "progress": 0}
+
+    t = threading.Thread(target=run_download, args=(job_id, url, fmt, quality), daemon=True)
+    t.start()
+
+    return jsonify({"job_id": job_id})
+
+
+@app.route("/status/<job_id>")
+def job_status(job_id):
+    job = jobs.get(job_id)
+    if not job:
+        return jsonify({"error": "Job not found"}), 404
+    return jsonify(job)
+
+
+@app.route("/file/<job_id>")
+def download_file(job_id):
+    job = jobs.get(job_id)
+    if not job or job.get("status") != "done":
+        return jsonify({"error": "File not ready"}), 404
+    filepath = os.path.join(DOWNLOAD_DIR, job["filename"])
+    if not os.path.exists(filepath):
+        return jsonify({"error": "File missing"}), 404
+    return send_file(filepath, as_attachment=True, download_name=job["filename"].split("_", 1)[-1])
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+flask>=3.0.0
+yt-dlp>=2024.1.1

start.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+FILE=".pid"
+
+if [ -f $FILE ]; then
+	./stop.sh
+fi
+fuser -k 5000/tcp
+source venv/bin/activate
+nohup python app.py &
+echo $! > $FILE

stop.sh

@@ -0,0 +1,10 @@
+FILE=".pid"
+
+stop() {
+	kill $(cat $FILE)
+	rm $FILE
+}
+
+if [ -f $FILE ]; then
+	stop
+fi

templates/index.html

@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>VDROP — Video Downloader</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --bg: #0a0a0a;
+    --surface: #111111;
+    --border: #222222;
+    --accent: #e8ff47;
+    --accent2: #ff6b35;
+    --text: #f0f0f0;
+    --muted: #666666;
+    --radius: 4px;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Syne', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 60px 20px 80px;
+    background-image:
+      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,255,71,0.07) 0%, transparent 70%),
+      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px),
+      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px);
+  }
+
+  header {
+    text-align: center;
+    margin-bottom: 56px;
+    animation: fadeDown 0.6s ease both;
+  }
+
+  .logo {
+    font-size: clamp(3rem, 8vw, 5.5rem);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    line-height: 1;
+    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .tagline {
+    font-family: 'Space Mono', monospace;
+    color: var(--muted);
+    font-size: 0.75rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    margin-top: 8px;
+  }
+
+  .card {
+    width: 100%;
+    max-width: 640px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 36px;
+    animation: fadeUp 0.5s ease 0.1s both;
+  }
+
+  .section-label {
+    font-family: 'Space Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: 10px;
+  }
+
+  .url-row {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 28px;
+  }
+
+  input[type="text"] {
+    flex: 1;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.82rem;
+    padding: 12px 14px;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  input[type="text"]:focus {
+    border-color: var(--accent);
+  }
+
+  input[type="text"]::placeholder { color: var(--muted); }
+
+  .btn {
+    font-family: 'Syne', sans-serif;
+    font-weight: 700;
+    font-size: 0.85rem;
+    letter-spacing: 0.05em;
+    padding: 12px 20px;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+  }
+
+  .btn-ghost {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+  }
+
+  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
+
+  .btn-accent {
+    background: var(--accent);
+    color: #000;
+  }
+
+  .btn-accent:hover { background: #d4eb3a; transform: translateY(-1px); }
+  .btn-accent:active { transform: translateY(0); }
+
+  .btn-accent:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  /* Video info preview */
+  #info-box {
+    display: none;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 24px;
+    gap: 14px;
+    animation: fadeUp 0.3s ease both;
+  }
+
+  #info-box.visible { display: flex; }
+
+  .thumb-wrap {
+    flex-shrink: 0;
+    width: 100px;
+    height: 60px;
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--border);
+  }
+
+  .thumb-wrap img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .info-meta { flex: 1; min-width: 0; }
+
+  .info-title {
+    font-weight: 700;
+    font-size: 0.9rem;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 6px;
+  }
+
+  .info-sub {
+    font-family: 'Space Mono', monospace;
+    font-size: 0.7rem;
+    color: var(--muted);
+  }
+
+  /* Format toggle */
+  .format-toggle {
+    display: flex;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    margin-bottom: 20px;
+  }
+
+  .fmt-btn {
+    flex: 1;
+    padding: 11px;
+    text-align: center;
+    cursor: pointer;
+    font-family: 'Syne', sans-serif;
+    font-weight: 600;
+    font-size: 0.82rem;
+    border: none;
+    background: transparent;
+    color: var(--muted);
+    transition: all 0.15s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+  }
+
+  .fmt-btn.active {
+    background: var(--accent);
+    color: #000;
+  }
+
+  .fmt-btn:not(.active):hover { color: var(--text); }
+
+  /* Quality selector */
+  #quality-row { margin-bottom: 28px; }
+
+  .quality-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+  }
+
+  .chip {
+    font-family: 'Space Mono', monospace;
+    font-size: 0.72rem;
+    padding: 6px 14px;
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    cursor: pointer;
+    color: var(--muted);
+    transition: all 0.15s;
+    background: transparent;
+  }
+
+  .chip.selected {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: rgba(232, 255, 71, 0.07);
+  }
+
+  .chip:hover:not(.selected) { border-color: #444; color: var(--text); }
+
+  /* Progress */
+  #progress-box {
+    display: none;
+    margin-bottom: 24px;
+  }
+
+  #progress-box.visible { display: block; }
+
+  .progress-bar-bg {
+    height: 6px;
+    background: var(--border);
+    border-radius: 3px;
+    overflow: hidden;
+    margin: 10px 0 8px;
+  }
+
+  .progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), var(--accent2));
+    border-radius: 3px;
+    width: 0%;
+    transition: width 0.4s ease;
+  }
+
+  .progress-meta {
+    font-family: 'Space Mono', monospace;
+    font-size: 0.68rem;
+    color: var(--muted);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  /* Status messages */
+  #status-msg {
+    font-family: 'Space Mono', monospace;
+    font-size: 0.72rem;
+    padding: 10px 14px;
+    border-radius: var(--radius);
+    margin-bottom: 20px;
+    display: none;
+  }
+
+  #status-msg.error {
+    background: rgba(255, 80, 80, 0.1);
+    border: 1px solid rgba(255, 80, 80, 0.3);
+    color: #ff8080;
+    display: block;
+  }
+
+  #status-msg.success {
+    background: rgba(232, 255, 71, 0.08);
+    border: 1px solid rgba(232, 255, 71, 0.3);
+    color: var(--accent);
+    display: block;
+  }
+
+  .action-row {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+
+  #download-btn-wrap { display: none; }
+
+  /* Spinner */
+  .spin {
+    display: inline-block;
+    width: 12px; height: 12px;
+    border: 2px solid rgba(0,0,0,0.3);
+    border-top-color: #000;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    vertical-align: middle;
+  }
+
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  @keyframes fadeDown {
+    from { opacity: 0; transform: translateY(-20px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(16px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  footer {
+    margin-top: 48px;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.65rem;
+    color: #333;
+    letter-spacing: 0.1em;
+    text-align: center;
+    animation: fadeUp 0.5s ease 0.3s both;
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="logo">VDROP</div>
+  <div class="tagline">yt-dlp powered · audio &amp; video</div>
+</header>
+
+<div class="card">
+
+  <!-- URL Input -->
+  <div class="section-label">Paste URL</div>
+  <div class="url-row">
+    <input type="text" id="url-input" placeholder="https://youtube.com/watch?v=..." />
+    <button class="btn btn-ghost" onclick="fetchInfo()">Inspect</button>
+  </div>
+
+  <!-- Video Info Preview -->
+  <div id="info-box">
+    <div class="thumb-wrap"><img id="thumb" src="" alt="thumb" /></div>
+    <div class="info-meta">
+      <div class="info-title" id="vid-title">—</div>
+      <div class="info-sub" id="vid-meta">—</div>
+    </div>
+  </div>
+
+  <!-- Status Message -->
+  <div id="status-msg"></div>
+
+  <!-- Format Toggle -->
+  <div class="section-label">Format</div>
+  <div class="format-toggle" id="fmt-toggle">
+    <button class="fmt-btn active" data-fmt="video" onclick="setFormat('video')">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="15" height="14" rx="2"/><polygon points="17 8 22 12 17 16 17 8"/></svg>
+      Video
+    </button>
+    <button class="fmt-btn" data-fmt="audio" onclick="setFormat('audio')">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+      Audio Only
+    </button>
+  </div>
+
+  <!-- Quality -->
+  <div id="quality-row">
+    <div class="section-label" id="quality-label">Resolution</div>
+    <div class="quality-chips" id="quality-chips">
+      <button class="chip selected" data-q="best">best</button>
+      <button class="chip" data-q="1080p">1080p</button>
+      <button class="chip" data-q="720p">720p</button>
+      <button class="chip" data-q="480p">480p</button>
+      <button class="chip" data-q="360p">360p</button>
+    </div>
+  </div>
+
+  <!-- Progress -->
+  <div id="progress-box">
+    <div class="section-label" id="progress-label">Downloading...</div>
+    <div class="progress-bar-bg">
+      <div class="progress-bar-fill" id="progress-fill"></div>
+    </div>
+    <div class="progress-meta">
+      <span id="prog-speed"></span>
+      <span id="prog-pct">0%</span>
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="action-row">
+    <div id="download-btn-wrap">
+      <a id="dl-link" class="btn btn-accent" href="#">⬇ Save File</a>
+    </div>
+    <button class="btn btn-accent" id="start-btn" onclick="startDownload()">Download</button>
+  </div>
+
+</div>
+
+<footer>yt-dlp + flask · for personal use only · respect copyright</footer>
+
+<script>
+  let selectedFormat = 'video';
+  let selectedQuality = 'best';
+  let pollTimer = null;
+  let videoQualities = [];
+
+  const audioQualities = ['mp3', 'aac', 'm4a', 'opus', 'flac'];
+  const videoDefaultChips = ['best', '1080p', '720p', '480p', '360p'];
+
+  function setFormat(fmt) {
+    selectedFormat = fmt;
+    document.querySelectorAll('.fmt-btn').forEach(b => b.classList.toggle('active', b.dataset.fmt === fmt));
+    renderQualityChips();
+  }
+
+  function renderQualityChips(customList) {
+    const label = document.getElementById('quality-label');
+    const wrap = document.getElementById('quality-chips');
+    const list = customList || (selectedFormat === 'audio' ? audioQualities : videoDefaultChips);
+    label.textContent = selectedFormat === 'audio' ? 'Audio Format' : 'Resolution';
+    const defaultQ = selectedFormat === 'audio' ? 'mp3' : 'best';
+    selectedQuality = defaultQ;
+    wrap.innerHTML = list.map(q =>
+      `<button class="chip${q === defaultQ ? ' selected' : ''}" data-q="${q}" onclick="selectQuality(this,'${q}')">${q}</button>`
+    ).join('');
+  }
+
+  function selectQuality(el, q) {
+    document.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));
+    el.classList.add('selected');
+    selectedQuality = q;
+  }
+
+  function fmtDuration(s) {
+    if (!s) return '';
+    const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), sec = s%60;
+    return h ? `${h}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}` : `${m}:${String(sec).padStart(2,'0')}`;
+  }
+
+  function showStatus(msg, type) {
+    const el = document.getElementById('status-msg');
+    el.textContent = msg;
+    el.className = type;
+  }
+
+  function clearStatus() {
+    const el = document.getElementById('status-msg');
+    el.className = '';
+    el.textContent = '';
+  }
+
+  async function fetchInfo() {
+    const url = document.getElementById('url-input').value.trim();
+    if (!url) return;
+    clearStatus();
+    document.getElementById('info-box').classList.remove('visible');
+    try {
+      const res = await fetch('/info', {
+        method: 'POST',
+        headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ url })
+      });
+      const data = await res.json();
+      if (data.error) { showStatus('⚠ ' + data.error, 'error'); return; }
+
+      document.getElementById('thumb').src = data.thumbnail || '';
+      document.getElementById('vid-title').textContent = data.title || 'Unknown';
+      document.getElementById('vid-meta').textContent =
+        [data.uploader, fmtDuration(data.duration)].filter(Boolean).join(' · ');
+      document.getElementById('info-box').classList.add('visible');
+
+      // Update video resolution chips from real data
+      if (data.resolutions && data.resolutions.length) {
+        videoQualities = ['best', ...data.resolutions];
+        if (selectedFormat === 'video') renderQualityChips(videoQualities);
+      }
+    } catch(e) {
+      showStatus('⚠ Could not reach server.', 'error');
+    }
+  }
+
+  async function startDownload() {
+    const url = document.getElementById('url-input').value.trim();
+    if (!url) { showStatus('⚠ Please enter a URL.', 'error'); return; }
+    clearStatus();
+
+    const btn = document.getElementById('start-btn');
+    btn.disabled = true;
+    btn.innerHTML = '<span class="spin"></span> Starting...';
+
+    document.getElementById('download-btn-wrap').style.display = 'none';
+    document.getElementById('progress-box').classList.add('visible');
+    document.getElementById('progress-label').textContent = 'Downloading...';
+    document.getElementById('progress-fill').style.width = '0%';
+    document.getElementById('prog-pct').textContent = '0%';
+    document.getElementById('prog-speed').textContent = '';
+
+    try {
+      const res = await fetch('/download', {
+        method: 'POST',
+        headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({ url, format: selectedFormat, quality: selectedQuality })
+      });
+      const data = await res.json();
+      if (data.error) { showStatus('⚠ ' + data.error, 'error'); resetBtn(); return; }
+      pollStatus(data.job_id);
+    } catch(e) {
+      showStatus('⚠ Server error.', 'error');
+      resetBtn();
+    }
+  }
+
+  function pollStatus(jobId) {
+    if (pollTimer) clearInterval(pollTimer);
+    pollTimer = setInterval(async () => {
+      try {
+        const res = await fetch('/status/' + jobId);
+        const data = await res.json();
+
+        if (data.progress !== undefined) {
+          document.getElementById('progress-fill').style.width = data.progress + '%';
+          document.getElementById('prog-pct').textContent = data.progress + '%';
+          if (data.speed) document.getElementById('prog-speed').textContent = data.speed + (data.eta ? ' · ETA ' + data.eta : '');
+        }
+
+        if (data.status === 'done') {
+          clearInterval(pollTimer);
+          document.getElementById('progress-label').textContent = 'Complete!';
+          document.getElementById('prog-speed').textContent = '';
+          showStatus('✓ Download ready: ' + (data.title || 'file'), 'success');
+          const dlWrap = document.getElementById('download-btn-wrap');
+          document.getElementById('dl-link').href = '/file/' + jobId;
+          document.getElementById('dl-link').download = true;
+          dlWrap.style.display = 'flex';
+          resetBtn();
+        } else if (data.status === 'error') {
+          clearInterval(pollTimer);
+          showStatus('⚠ ' + (data.error || 'Unknown error'), 'error');
+          document.getElementById('progress-box').classList.remove('visible');
+          resetBtn();
+        }
+      } catch(e) {
+        // ignore transient poll errors
+      }
+    }, 800);
+  }
+
+  function resetBtn() {
+    const btn = document.getElementById('start-btn');
+    btn.disabled = false;
+    btn.innerHTML = 'Download';
+  }
+
+  // Allow Enter key in URL input
+  document.getElementById('url-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter') fetchInfo();
+  });
+</script>
+</body>
+</html>