From 44c85f6e44e64baf20139ba85c5f9467e02a9f04 Mon Sep 17 00:00:00 2001
From: treamz <treamz@gmail.com>
Date: Sat, 21 Mar 2026 23:28:11 +0300
Subject: [PATCH] Add video converter: convert, compress, extract audio, GIF

- New tool: /video with 4 modes (convert formats, compress, extract audio, GIF)
- Backend: ffmpeg-based processing with progress tracking
- Supports MP4, WebM, MOV, AVI, MKV input, up to 200MB
- Frontend: drag-drop upload, mode tabs, progress bar, download
- Added to sidebar, dashboard (Images category), WA_CATEGORIES
- Total tools: 14
---
 public/index.html |   12 +-
 public/shared.js  |    3 +-
 public/video.html | 1082 +++++++++++++++++++++++++++++++++++++++++++++
 routes/video.js   |  235 ++++++++++
 server.js         |    1 +
 5 files changed, 1328 insertions(+), 5 deletions(-)
 create mode 100644 public/video.html
 create mode 100644 routes/video.js

diff --git a/public/index.html b/public/index.html
index 202c9c8..0030e20 100644
--- a/public/index.html
+++ b/public/index.html
@@ -65,10 +65,10 @@
             <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
         </div>
         <span class="cat-title">Изображения</span>
-        <span class="cat-count">4</span>
-        <span class="cat-desc">сжатие, редактирование и генерация</span>
+        <span class="cat-count">5</span>
+        <span class="cat-desc">сжатие, видео, редактирование и генерация</span>
     </div>
-    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 fade-d1">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 fade-d1">
         <a href="/compress" class="tool-tile">
             <div class="tile-icon"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg></div>
             <div><div class="tile-title">Сжатие</div><div class="tile-desc">JPEG, PNG, WebP до 20МБ</div></div>
@@ -85,6 +85,10 @@
             <div class="tile-icon"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></div>
             <div><div class="tile-title">Фоторедактор</div><div class="tile-desc">Обработка фото в браузере</div></div>
         </a>
+        <a href="/video" class="tool-tile">
+            <div class="tile-icon"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/></svg></div>
+            <div><div class="tile-title">Видео</div><div class="tile-desc">Конвертация, сжатие, GIF</div></div>
+        </a>
     </div>
 
     <!-- Category: Code -->
@@ -166,7 +170,7 @@
         </p>
         <div class="about-stats">
             <div class="about-stat">
-                <div class="num">13</div>
+                <div class="num">14</div>
                 <div class="label">инструментов</div>
             </div>
             <div class="about-stat">
diff --git a/public/shared.js b/public/shared.js
index 9e4e3ec..bf7760c 100644
--- a/public/shared.js
+++ b/public/shared.js
@@ -23,7 +23,7 @@ if (typeof tailwind !== 'undefined') {
 
 /* Categories */
 const WA_CATEGORIES = [
-    { id: 'images', title: 'Изображения', description: 'Сжатие, редактирование и генерация', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/>', tools: ['compress', 'placeholder', 'svgeditor', 'editor'] },
+    { id: 'images', title: 'Изображения', description: 'Сжатие, редактирование и генерация', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0021 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/>', tools: ['compress', 'placeholder', 'svgeditor', 'editor', 'video'] },
     { id: 'code', title: 'Код', description: 'Форматирование, очистка и конвертация', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/>', tools: ['formatter', 'sanitizer', 'converter'] },
     { id: 'web', title: 'Веб', description: 'HTTP-клиент, парсер и анализ', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/>', tools: ['parser', 'httpclient', 'redirects'] },
     { id: 'utils', title: 'Утилиты', description: 'Пароли, Markdown и другие', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17l-5.645 3.232a.75.75 0 01-1.09-.791l1.078-6.285L1.347 7.06a.75.75 0 01.416-1.28l6.31-.917L10.89.598a.75.75 0 011.341 0l2.816 5.266 6.31.917a.75.75 0 01.416 1.28l-4.416 4.266 1.078 6.285a.75.75 0 01-1.09.791L12 15.17z"/>', tools: ['password', 'md'] },
@@ -37,6 +37,7 @@ const WA_TOOLS = [
     { id: 'placeholder', path: '/placeholder', title: 'Placeholder', category: 'images', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2.25 2.25 0 01-2.25 2.25H7.25A2.25 2.25 0 015 17v-2.5"/>' },
     { id: 'svgeditor', path: '/svgeditor', title: 'SVG', category: 'images', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/>' },
     { id: 'editor', path: '/editor', title: 'Фото', category: 'images', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>' },
+    { id: 'video', path: '/video', title: 'Видео', category: 'images', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/>' },
     // Код
     { id: 'formatter', path: '/formatter', title: 'Formatter', category: 'code', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/>' },
     { id: 'sanitizer', path: '/sanitizer', title: 'Sanitizer', category: 'code', icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>' },
diff --git a/public/video.html b/public/video.html
new file mode 100644
index 0000000..f21a6a5
--- /dev/null
+++ b/public/video.html
@@ -0,0 +1,1082 @@
+<!DOCTYPE html>
+<html lang="ru" class="dark">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WA Dev Tools — Видео конвертер</title>
+    <script src="/vendor/tailwind.js"></script>
+    <script>window.WA_TOOL_ID = 'video';</script>
+    <script src="/shared.js"></script>
+    <link href="/vendor/fonts.css" rel="stylesheet">
+    <link href="/shared.css" rel="stylesheet">
+    <style>
+        /* Drop zone */
+        .drop-zone {
+            border: 2px dashed var(--surface-600);
+            border-radius: 16px;
+            padding: 48px 24px;
+            text-align: center;
+            cursor: pointer;
+            transition: border-color .2s, background .2s;
+            background: var(--surface-700);
+        }
+        .drop-zone:hover,
+        .drop-zone.drag-over {
+            border-color: var(--accent);
+            background: var(--accent-bg);
+        }
+        .drop-zone.drag-over .drop-icon {
+            color: var(--accent);
+        }
+        .drop-icon {
+            color: var(--text-muted);
+            transition: color .2s;
+            margin-bottom: 16px;
+            display: flex;
+            justify-content: center;
+        }
+        .drop-label {
+            font-size: 15px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 6px;
+        }
+        .drop-hint {
+            font-size: 12px;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        /* Video info card */
+        .info-card {
+            background: var(--surface-700);
+            border: 1px solid var(--surface-600);
+            border-radius: 12px;
+            padding: 20px;
+        }
+        .info-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px 24px;
+        }
+        .info-row {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+        .info-key {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .info-val {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .info-filename {
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin-bottom: 14px;
+            word-break: break-all;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .info-filename-icon {
+            flex-shrink: 0;
+            color: var(--accent);
+        }
+
+        /* Mode tabs */
+        .mode-tabs {
+            display: flex;
+            gap: 4px;
+            background: var(--surface-700);
+            border: 1px solid var(--surface-600);
+            border-radius: 10px;
+            padding: 4px;
+        }
+        .mode-tab {
+            flex: 1;
+            padding: 9px 12px;
+            border-radius: 7px;
+            border: none;
+            background: transparent;
+            color: var(--text-muted);
+            font-family: 'Manrope', sans-serif;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all .2s;
+            white-space: nowrap;
+        }
+        .mode-tab:hover {
+            color: var(--text-secondary);
+            background: var(--surface-600);
+        }
+        .mode-tab.active {
+            background: var(--accent);
+            color: #fff;
+        }
+        .mode-tab:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        /* Mode panels */
+        .mode-panel { display: none; }
+        .mode-panel.active { display: block; }
+
+        /* Option group */
+        .option-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .option-label {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        /* Button group (format selector) */
+        .btn-group {
+            display: flex;
+            gap: 4px;
+            flex-wrap: wrap;
+        }
+        .btn-option {
+            padding: 8px 18px;
+            border-radius: 8px;
+            border: 1px solid var(--surface-600);
+            background: var(--surface-700);
+            color: var(--text-secondary);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all .2s;
+        }
+        .btn-option:hover {
+            border-color: var(--accent);
+            color: var(--text-primary);
+        }
+        .btn-option.selected {
+            background: var(--accent);
+            border-color: var(--accent);
+            color: #fff;
+        }
+        .btn-option:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        /* Quality row (with estimated size) */
+        .quality-option {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 16px;
+            border-radius: 10px;
+            border: 1px solid var(--surface-600);
+            background: var(--surface-700);
+            cursor: pointer;
+            transition: all .2s;
+        }
+        .quality-option:hover {
+            border-color: var(--accent);
+        }
+        .quality-option.selected {
+            border-color: var(--accent);
+            background: var(--accent-bg);
+        }
+        .quality-option input[type="radio"] {
+            display: none;
+        }
+        .quality-label {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .quality-desc {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+            margin-top: 2px;
+        }
+        .quality-estimate {
+            font-size: 12px;
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--accent-bright);
+            font-weight: 600;
+        }
+
+        /* Time range inputs (GIF mode) */
+        .time-inputs {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+        .time-field {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+        .time-input-label {
+            font-size: 11px;
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+        .gif-note {
+            font-size: 12px;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+            background: var(--surface-700);
+            border: 1px solid var(--surface-600);
+            border-radius: 8px;
+            padding: 10px 14px;
+            margin-top: 4px;
+        }
+
+        /* Progress */
+        .progress-wrap {
+            background: var(--surface-700);
+            border: 1px solid var(--surface-600);
+            border-radius: 12px;
+            padding: 24px;
+        }
+        .progress-bar-track {
+            background: var(--surface-600);
+            border-radius: 99px;
+            height: 8px;
+            overflow: hidden;
+            margin: 14px 0 10px;
+        }
+        .progress-bar-fill {
+            height: 100%;
+            background: var(--accent);
+            border-radius: 99px;
+            transition: width .3s ease;
+            width: 0%;
+        }
+        .progress-status {
+            font-size: 13px;
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--text-secondary);
+        }
+        .progress-percent {
+            font-size: 13px;
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--accent);
+            font-weight: 700;
+        }
+
+        /* Result card */
+        .result-card {
+            background: var(--surface-700);
+            border: 1px solid var(--surface-600);
+            border-radius: 12px;
+            padding: 24px;
+        }
+        .result-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        .result-stat {
+            text-align: center;
+        }
+        .result-stat-val {
+            font-size: 20px;
+            font-weight: 800;
+            color: var(--text-primary);
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .result-stat-val.accent {
+            color: var(--accent);
+        }
+        .result-stat-val.green {
+            color: #22c55e;
+        }
+        .result-stat-label {
+            font-size: 11px;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+            margin-top: 4px;
+        }
+
+        /* Error */
+        .error-box {
+            background: rgba(255, 82, 82, 0.08);
+            border: 1px solid rgba(255, 82, 82, 0.25);
+            border-radius: 10px;
+            padding: 14px 16px;
+            font-size: 13px;
+            color: #ff5252;
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        /* Separator */
+        .step-separator {
+            height: 1px;
+            background: var(--surface-600);
+            margin: 4px 0;
+        }
+
+        /* Upload progress overlay in drop zone */
+        .uploading-overlay {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+        }
+        .spinner {
+            width: 32px;
+            height: 32px;
+            border: 3px solid var(--surface-600);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin .7s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        /* Section labels */
+        .section-title {
+            font-size: 13px;
+            font-weight: 700;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
+            font-family: 'JetBrains Mono', monospace;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .section-num {
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            background: var(--accent-bg);
+            color: var(--accent);
+            font-size: 11px;
+            font-weight: 800;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        @media (max-width: 480px) {
+            .mode-tabs { flex-wrap: wrap; }
+            .mode-tab { flex: 1 1 calc(50% - 4px); }
+            .result-stats { grid-template-columns: 1fr 1fr; }
+            .result-stats .result-stat:last-child { grid-column: 1 / -1; }
+        }
+    </style>
+</head>
+<body class="font-sans antialiased">
+
+<div class="main-content">
+<div class="tool-container max-w-3xl mx-auto">
+
+    <!-- Page header -->
+    <div class="page-header">
+        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white text-gray-900">
+            Видео <span class="text-accent">конвертер</span>
+        </h1>
+        <p class="description mt-2 text-sm dark:text-gray-500 text-gray-400 font-mono">конвертация, сжатие, извлечение аудио, GIF</p>
+    </div>
+
+    <!-- Error display -->
+    <div id="errorBox" class="error-box" style="display:none; margin-bottom:20px;"></div>
+
+    <!-- Step 1: Upload -->
+    <div id="stepUpload" style="margin-bottom:24px;">
+        <div class="section-title">
+            <span class="section-num">1</span>
+            Загрузка файла
+        </div>
+
+        <!-- Drop zone (default state) -->
+        <div id="dropZone" class="drop-zone" tabindex="0" role="button" aria-label="Загрузить видео">
+            <div id="dropZoneContent">
+                <div class="drop-icon">
+                    <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+                    </svg>
+                </div>
+                <div class="drop-label">Перетащите видео или нажмите для выбора</div>
+                <div class="drop-hint" style="margin-top:6px;">MP4, WebM, MOV, AVI, MKV, MPEG, 3GP, OGG, FLV, WMV — до 200 МБ</div>
+            </div>
+            <input type="file" id="fileInput" accept=".mp4,.webm,.mov,.avi,.mkv,.mpeg,.mpg,.3gp,.ogg,.flv,.wmv" style="display:none;" />
+        </div>
+    </div>
+
+    <!-- Step 2+: shown after upload -->
+    <div id="stepConfig" style="display:none;">
+
+        <!-- Video info card -->
+        <div style="margin-bottom:24px;">
+            <div class="section-title">
+                <span class="section-num">1</span>
+                Информация о файле
+            </div>
+            <div class="info-card">
+                <div class="info-filename">
+                    <svg class="info-filename-icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"/>
+                    </svg>
+                    <span id="infoFilename"></span>
+                </div>
+                <div class="info-grid">
+                    <div class="info-row">
+                        <span class="info-key">Размер</span>
+                        <span class="info-val" id="infoSize">—</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-key">Длительность</span>
+                        <span class="info-val" id="infoDuration">—</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-key">Разрешение</span>
+                        <span class="info-val" id="infoResolution">—</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-key">Видео кодек</span>
+                        <span class="info-val" id="infoCodec">—</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-key">Аудио кодек</span>
+                        <span class="info-val" id="infoAudioCodec">—</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-key">Битрейт</span>
+                        <span class="info-val" id="infoBitrate">—</span>
+                    </div>
+                </div>
+                <div style="margin-top:14px; padding-top:14px; border-top:1px solid var(--surface-600);">
+                    <button id="btnChangeFile" class="wa-btn" style="background:var(--surface-600);color:var(--text-secondary);font-size:12px;padding:7px 14px;">
+                        Выбрать другой файл
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mode selection -->
+        <div style="margin-bottom:24px;">
+            <div class="section-title">
+                <span class="section-num">2</span>
+                Режим обработки
+            </div>
+            <div class="mode-tabs" role="tablist">
+                <button class="mode-tab active" data-mode="convert" role="tab" aria-selected="true">Конвертация</button>
+                <button class="mode-tab" data-mode="compress" role="tab" aria-selected="false">Сжатие</button>
+                <button class="mode-tab" data-mode="audio" role="tab" aria-selected="false">Аудио</button>
+                <button class="mode-tab" data-mode="gif" role="tab" aria-selected="false">GIF</button>
+            </div>
+        </div>
+
+        <!-- Mode panel: Конвертация -->
+        <div id="panel-convert" class="mode-panel active" style="margin-bottom:24px;">
+            <div class="wa-card">
+                <div class="option-group">
+                    <span class="option-label">Выходной формат</span>
+                    <div class="btn-group" id="convertFormats">
+                        <button class="btn-option selected" data-value="mp4">MP4</button>
+                        <button class="btn-option" data-value="webm">WebM</button>
+                        <button class="btn-option" data-value="avi">AVI</button>
+                        <button class="btn-option" data-value="mkv">MKV</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mode panel: Сжатие -->
+        <div id="panel-compress" class="mode-panel" style="margin-bottom:24px;">
+            <div class="wa-card">
+                <div class="option-group">
+                    <span class="option-label">Качество</span>
+                    <label class="quality-option selected" data-value="high">
+                        <input type="radio" name="quality" value="high" checked />
+                        <div>
+                            <div class="quality-label">Высокое</div>
+                            <div class="quality-desc">минимальные потери, ~70% от оригинала</div>
+                        </div>
+                        <div class="quality-estimate" id="est-high">—</div>
+                    </label>
+                    <label class="quality-option" data-value="medium">
+                        <input type="radio" name="quality" value="medium" />
+                        <div>
+                            <div class="quality-label">Среднее</div>
+                            <div class="quality-desc">баланс качества и размера, ~40%</div>
+                        </div>
+                        <div class="quality-estimate" id="est-medium">—</div>
+                    </label>
+                    <label class="quality-option" data-value="low">
+                        <input type="radio" name="quality" value="low" />
+                        <div>
+                            <div class="quality-label">Низкое</div>
+                            <div class="quality-desc">максимальное сжатие, ~20%</div>
+                        </div>
+                        <div class="quality-estimate" id="est-low">—</div>
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mode panel: Аудио -->
+        <div id="panel-audio" class="mode-panel" style="margin-bottom:24px;">
+            <div class="wa-card">
+                <div class="option-group">
+                    <span class="option-label">Формат аудио</span>
+                    <div class="btn-group" id="audioFormats">
+                        <button class="btn-option selected" data-value="mp3">MP3</button>
+                        <button class="btn-option" data-value="aac">AAC</button>
+                    </div>
+                    <div class="gif-note" style="margin-top:8px;">
+                        Аудиодорожка будет извлечена из видео без перекодирования, где возможно.
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mode panel: GIF -->
+        <div id="panel-gif" class="mode-panel" style="margin-bottom:24px;">
+            <div class="wa-card">
+                <div class="option-group">
+                    <span class="option-label">Временной диапазон</span>
+                    <div class="time-inputs">
+                        <div class="time-field">
+                            <span class="time-input-label">Начало (сек)</span>
+                            <input type="number" id="gifStart" class="wa-input" min="0" step="0.1" value="0" placeholder="0" />
+                        </div>
+                        <div class="time-field">
+                            <span class="time-input-label">Конец (сек)</span>
+                            <input type="number" id="gifEnd" class="wa-input" min="0" step="0.1" placeholder="авто" />
+                        </div>
+                    </div>
+                    <div class="gif-note">
+                        Максимальная длительность GIF — 15 секунд. Разрешение уменьшается до 480px по ширине для оптимального размера.
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Step 3: Convert button + progress -->
+        <div style="margin-bottom:24px;">
+            <div class="section-title">
+                <span class="section-num">3</span>
+                Обработка
+            </div>
+
+            <!-- Convert button -->
+            <div id="convertAction">
+                <button id="btnConvert" class="wa-btn" style="width:100%;padding:14px 24px;font-size:15px;">
+                    Конвертировать
+                </button>
+            </div>
+
+            <!-- Progress -->
+            <div id="progressWrap" class="progress-wrap" style="display:none;">
+                <div style="display:flex;justify-content:space-between;align-items:center;">
+                    <span class="progress-status" id="progressStatus">Подготовка...</span>
+                    <span class="progress-percent" id="progressPercent">0%</span>
+                </div>
+                <div class="progress-bar-track">
+                    <div class="progress-bar-fill" id="progressFill"></div>
+                </div>
+                <div style="font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;">
+                    Не закрывайте вкладку во время обработки
+                </div>
+            </div>
+        </div>
+
+        <!-- Step 4: Result -->
+        <div id="stepResult" style="display:none;">
+            <div class="section-title">
+                <span class="section-num">4</span>
+                Результат
+            </div>
+            <div class="result-card">
+                <div class="result-stats">
+                    <div class="result-stat">
+                        <div class="result-stat-val" id="resultSize">—</div>
+                        <div class="result-stat-label">размер файла</div>
+                    </div>
+                    <div class="result-stat">
+                        <div class="result-stat-val green" id="resultSavings">—</div>
+                        <div class="result-stat-label">экономия</div>
+                    </div>
+                    <div class="result-stat">
+                        <div class="result-stat-val accent" id="resultDuration">—</div>
+                        <div class="result-stat-label">длительность</div>
+                    </div>
+                </div>
+                <div style="display:flex;gap:10px;flex-wrap:wrap;">
+                    <a id="downloadLink" href="#" class="wa-btn" style="flex:1;text-align:center;text-decoration:none;padding:12px 24px;">
+                        Скачать файл
+                    </a>
+                    <button id="btnReset" class="wa-btn" style="background:var(--surface-600);color:var(--text-secondary);flex:0 0 auto;padding:12px 18px;">
+                        Конвертировать ещё
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div><!-- /stepConfig -->
+
+</div>
+</div>
+
+<script>
+(function () {
+    'use strict';
+
+    // ─── State ───────────────────────────────────────────────────────────────
+    let state = {
+        jobId: null,
+        originalSize: 0,
+        duration: 0,
+        mode: 'convert',
+        format: 'mp4',
+        quality: 'high',
+        audioFormat: 'mp3',
+        pollTimer: null,
+    };
+
+    // ─── DOM refs ─────────────────────────────────────────────────────────────
+    const dropZone       = document.getElementById('dropZone');
+    const dropContent    = document.getElementById('dropZoneContent');
+    const fileInput      = document.getElementById('fileInput');
+    const stepUpload     = document.getElementById('stepUpload');
+    const stepConfig     = document.getElementById('stepConfig');
+    const stepResult     = document.getElementById('stepResult');
+    const errorBox       = document.getElementById('errorBox');
+    const btnConvert     = document.getElementById('btnConvert');
+    const convertAction  = document.getElementById('convertAction');
+    const progressWrap   = document.getElementById('progressWrap');
+    const progressFill   = document.getElementById('progressFill');
+    const progressStatus = document.getElementById('progressStatus');
+    const progressPercent= document.getElementById('progressPercent');
+    const downloadLink   = document.getElementById('downloadLink');
+    const btnReset       = document.getElementById('btnReset');
+    const btnChangeFile  = document.getElementById('btnChangeFile');
+
+    // ─── Helpers ──────────────────────────────────────────────────────────────
+    function formatSize(bytes) {
+        if (!bytes || bytes === 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        const val = bytes / Math.pow(1024, i);
+        return val.toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
+    }
+
+    function formatDuration(seconds) {
+        if (!seconds && seconds !== 0) return '—';
+        const s = Math.floor(seconds);
+        const m = Math.floor(s / 60);
+        const h = Math.floor(m / 60);
+        const ss = String(s % 60).padStart(2, '0');
+        const mm = String(m % 60).padStart(2, '0');
+        if (h > 0) return h + ':' + mm + ':' + ss;
+        return mm + ':' + ss;
+    }
+
+    function formatBitrate(bps) {
+        if (!bps) return '—';
+        if (bps >= 1_000_000) return (bps / 1_000_000).toFixed(1) + ' Mbps';
+        return Math.round(bps / 1000) + ' kbps';
+    }
+
+    function showError(msg) {
+        errorBox.textContent = msg;
+        errorBox.style.display = 'block';
+        errorBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+
+    function clearError() {
+        errorBox.style.display = 'none';
+        errorBox.textContent = '';
+    }
+
+    function setControlsDisabled(disabled) {
+        btnConvert.disabled = disabled;
+        document.querySelectorAll('.mode-tab').forEach(el => el.disabled = disabled);
+        document.querySelectorAll('.btn-option').forEach(el => el.disabled = disabled);
+        document.querySelectorAll('.quality-option').forEach(el => {
+            el.style.pointerEvents = disabled ? 'none' : '';
+            el.style.opacity = disabled ? '0.5' : '';
+        });
+        document.getElementById('gifStart').disabled = disabled;
+        document.getElementById('gifEnd').disabled = disabled;
+    }
+
+    // ─── Estimate sizes for compress mode ─────────────────────────────────────
+    function updateEstimates() {
+        if (!state.originalSize) return;
+        const ratios = { high: 0.70, medium: 0.40, low: 0.20 };
+        for (const [q, ratio] of Object.entries(ratios)) {
+            const el = document.getElementById('est-' + q);
+            if (el) el.textContent = '~' + formatSize(state.originalSize * ratio);
+        }
+    }
+
+    // ─── Drop zone ────────────────────────────────────────────────────────────
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') fileInput.click(); });
+
+    dropZone.addEventListener('dragover', e => {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        const file = e.dataTransfer.files[0];
+        if (file) handleFile(file);
+    });
+
+    fileInput.addEventListener('change', () => {
+        if (fileInput.files[0]) handleFile(fileInput.files[0]);
+    });
+
+    btnChangeFile.addEventListener('click', () => {
+        resetToUpload();
+        fileInput.click();
+    });
+
+    // ─── Upload ───────────────────────────────────────────────────────────────
+    async function handleFile(file) {
+        clearError();
+
+        const ACCEPTED = ['video/mp4','video/webm','video/quicktime','video/x-msvideo','video/x-matroska',
+            'video/mpeg','video/3gpp','video/ogg','video/x-flv','video/x-ms-wmv'];
+        const MAX_SIZE = 200 * 1024 * 1024;
+
+        if (file.size > MAX_SIZE) {
+            showError('Файл слишком большой. Максимальный размер — 200 МБ.');
+            return;
+        }
+
+        // Show uploading state
+        dropContent.innerHTML = `
+            <div class="uploading-overlay">
+                <div class="spinner"></div>
+                <div class="drop-label">Загрузка файла...</div>
+                <div class="drop-hint">${file.name}</div>
+            </div>`;
+
+        const formData = new FormData();
+        formData.append('video', file);
+
+        try {
+            const res = await fetch('/video/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({ error: 'Ошибка загрузки' }));
+                throw new Error(err.error || 'Ошибка загрузки файла');
+            }
+
+            const data = await res.json();
+            onUploadSuccess(data);
+        } catch (err) {
+            // Restore drop zone
+            dropContent.innerHTML = `
+                <div class="drop-icon">
+                    <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+                    </svg>
+                </div>
+                <div class="drop-label">Перетащите видео или нажмите для выбора</div>
+                <div class="drop-hint" style="margin-top:6px;">MP4, WebM, MOV, AVI, MKV, MPEG, 3GP, OGG, FLV, WMV — до 200 МБ</div>`;
+            showError(err.message || 'Не удалось загрузить файл');
+        }
+    }
+
+    function onUploadSuccess(data) {
+        state.jobId = data.jobId;
+        state.originalSize = data.size || 0;
+
+        const info = data.info || {};
+        state.duration = info.duration || 0;
+
+        // Fill info card
+        document.getElementById('infoFilename').textContent = data.originalName || '—';
+        document.getElementById('infoSize').textContent     = formatSize(data.size);
+        document.getElementById('infoDuration').textContent = formatDuration(info.duration);
+        document.getElementById('infoResolution').textContent =
+            (info.width && info.height) ? info.width + '×' + info.height : '—';
+        document.getElementById('infoCodec').textContent      = info.codec || '—';
+        document.getElementById('infoAudioCodec').textContent = info.audioCodec || '—';
+        document.getElementById('infoBitrate').textContent    = formatBitrate(info.bitrate);
+
+        // Update estimates
+        updateEstimates();
+
+        // Set GIF end default to min(duration, 15)
+        const gifEndEl = document.getElementById('gifEnd');
+        if (state.duration > 0) {
+            gifEndEl.value = Math.min(state.duration, 15).toFixed(1);
+            gifEndEl.max = state.duration;
+            document.getElementById('gifStart').max = state.duration;
+        }
+
+        // Switch views
+        stepConfig.style.display = 'block';
+        stepUpload.style.display = 'none';
+    }
+
+    // ─── Mode tabs ────────────────────────────────────────────────────────────
+    document.querySelectorAll('.mode-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            const mode = tab.dataset.mode;
+            state.mode = mode;
+
+            document.querySelectorAll('.mode-tab').forEach(t => {
+                t.classList.remove('active');
+                t.setAttribute('aria-selected', 'false');
+            });
+            tab.classList.add('active');
+            tab.setAttribute('aria-selected', 'true');
+
+            document.querySelectorAll('.mode-panel').forEach(p => p.classList.remove('active'));
+            const panel = document.getElementById('panel-' + mode);
+            if (panel) panel.classList.add('active');
+        });
+    });
+
+    // ─── Format button groups ─────────────────────────────────────────────────
+    function initBtnGroup(containerId, onSelect) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        container.addEventListener('click', e => {
+            const btn = e.target.closest('.btn-option');
+            if (!btn || btn.disabled) return;
+            container.querySelectorAll('.btn-option').forEach(b => b.classList.remove('selected'));
+            btn.classList.add('selected');
+            onSelect(btn.dataset.value);
+        });
+    }
+
+    initBtnGroup('convertFormats', val => { state.format = val; });
+    initBtnGroup('audioFormats',   val => { state.audioFormat = val; });
+
+    // ─── Quality options ───────────────────────────────────────────────────────
+    document.querySelectorAll('.quality-option').forEach(label => {
+        label.addEventListener('click', () => {
+            document.querySelectorAll('.quality-option').forEach(l => l.classList.remove('selected'));
+            label.classList.add('selected');
+            state.quality = label.dataset.value;
+        });
+    });
+
+    // ─── Convert ──────────────────────────────────────────────────────────────
+    btnConvert.addEventListener('click', startConversion);
+
+    async function startConversion() {
+        clearError();
+        setControlsDisabled(true);
+
+        convertAction.style.display = 'none';
+        progressWrap.style.display = 'block';
+        stepResult.style.display = 'none';
+
+        setProgressUI(0, 'Запуск обработки...');
+
+        const body = {
+            jobId:     state.jobId,
+            mode:      state.mode,
+            format:    state.mode === 'convert' ? state.format
+                     : state.mode === 'audio'   ? state.audioFormat
+                     : state.mode === 'gif'     ? 'gif'
+                     :                            'mp4',
+            quality:   state.quality,
+            startTime: state.mode === 'gif' ? parseFloat(document.getElementById('gifStart').value || 0) : undefined,
+            endTime:   state.mode === 'gif' ? parseFloat(document.getElementById('gifEnd').value   || 0) : undefined,
+        };
+
+        try {
+            const res = await fetch('/video/convert', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({ error: 'Ошибка запуска конвертации' }));
+                throw new Error(err.error || 'Ошибка запуска');
+            }
+
+            const data = await res.json();
+
+            // Server may return immediately (sync) or poll (async)
+            if (data.status === 'done' || data.downloadUrl) {
+                setProgressUI(100, 'Готово!');
+                onConversionDone(data);
+            } else {
+                startPolling();
+            }
+        } catch (err) {
+            showConversionError(err.message || 'Ошибка конвертации');
+        }
+    }
+
+    function startPolling() {
+        clearPollTimer();
+        state.pollTimer = setInterval(async () => {
+            try {
+                const res = await fetch('/video/progress/' + state.jobId);
+                if (!res.ok) return;
+                const data = await res.json();
+
+                const pct = Math.min(100, Math.max(0, data.progress || 0));
+                const statusMap = {
+                    pending:    'В очереди...',
+                    processing: 'Обработка...',
+                    done:       'Готово!',
+                    error:      'Ошибка',
+                };
+                setProgressUI(pct, (statusMap[data.status] || 'Обработка...') + (pct > 0 && pct < 100 ? ' ' + pct + '%' : ''));
+
+                if (data.status === 'done') {
+                    clearPollTimer();
+                    onConversionDone(data);
+                } else if (data.status === 'error') {
+                    clearPollTimer();
+                    showConversionError(data.error || 'Ошибка обработки');
+                }
+            } catch {
+                // Network hiccup — keep polling
+            }
+        }, 1000);
+    }
+
+    function clearPollTimer() {
+        if (state.pollTimer) {
+            clearInterval(state.pollTimer);
+            state.pollTimer = null;
+        }
+    }
+
+    function setProgressUI(percent, statusText) {
+        progressFill.style.width = percent + '%';
+        progressPercent.textContent = percent + '%';
+        progressStatus.textContent = statusText;
+    }
+
+    function onConversionDone(data) {
+        setProgressUI(100, 'Готово!');
+
+        // Fill result card
+        const outputSize = data.outputSize || 0;
+        const savings    = data.savings    || 0;
+
+        document.getElementById('resultSize').textContent    = formatSize(outputSize);
+        document.getElementById('resultSavings').textContent = savings > 0 ? '−' + savings + '%' : '—';
+        document.getElementById('resultDuration').textContent = formatDuration(state.duration);
+
+        if (data.downloadUrl) {
+            downloadLink.href = data.downloadUrl;
+            downloadLink.setAttribute('download', '');
+        }
+
+        stepResult.style.display = 'block';
+        stepResult.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        setControlsDisabled(false);
+    }
+
+    function showConversionError(msg) {
+        clearPollTimer();
+        setControlsDisabled(false);
+        progressWrap.style.display = 'none';
+        convertAction.style.display = 'block';
+        showError(msg);
+    }
+
+    // ─── Reset ────────────────────────────────────────────────────────────────
+    btnReset.addEventListener('click', resetAll);
+
+    function resetToUpload() {
+        clearPollTimer();
+        state.jobId = null;
+        state.originalSize = 0;
+        state.duration = 0;
+
+        stepConfig.style.display = 'none';
+        stepResult.style.display = 'none';
+        stepUpload.style.display = 'block';
+        convertAction.style.display = 'block';
+        progressWrap.style.display = 'none';
+
+        setProgressUI(0, 'Подготовка...');
+        clearError();
+        fileInput.value = '';
+
+        // Reset drop zone content
+        dropContent.innerHTML = `
+            <div class="drop-icon">
+                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
+                </svg>
+            </div>
+            <div class="drop-label">Перетащите видео или нажмите для выбора</div>
+            <div class="drop-hint" style="margin-top:6px;">MP4, WebM, MOV, AVI, MKV, MPEG, 3GP, OGG, FLV, WMV — до 200 МБ</div>`;
+    }
+
+    function resetAll() {
+        resetToUpload();
+
+        // Reset mode tabs
+        document.querySelectorAll('.mode-tab').forEach(t => {
+            t.classList.remove('active');
+            t.setAttribute('aria-selected', 'false');
+        });
+        document.querySelector('[data-mode="convert"]').classList.add('active');
+        document.querySelector('[data-mode="convert"]').setAttribute('aria-selected', 'true');
+        document.querySelectorAll('.mode-panel').forEach(p => p.classList.remove('active'));
+        document.getElementById('panel-convert').classList.add('active');
+        state.mode = 'convert';
+
+        // Reset format selections
+        document.querySelectorAll('#convertFormats .btn-option').forEach((b, i) => {
+            b.classList.toggle('selected', i === 0);
+        });
+        document.querySelectorAll('#audioFormats .btn-option').forEach((b, i) => {
+            b.classList.toggle('selected', i === 0);
+        });
+        state.format = 'mp4';
+        state.audioFormat = 'mp3';
+
+        // Reset quality
+        document.querySelectorAll('.quality-option').forEach((l, i) => {
+            l.classList.toggle('selected', i === 0);
+        });
+        document.querySelector('input[name="quality"][value="high"]').checked = true;
+        state.quality = 'high';
+
+        // Reset GIF fields
+        document.getElementById('gifStart').value = '0';
+        document.getElementById('gifEnd').value = '';
+
+        setControlsDisabled(false);
+    }
+})();
+</script>
+</body>
+</html>
diff --git a/routes/video.js b/routes/video.js
new file mode 100644
index 0000000..a14567c
--- /dev/null
+++ b/routes/video.js
@@ -0,0 +1,235 @@
+const express = require('express');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+const { spawn } = require('child_process');
+const rateLimit = require('express-rate-limit');
+const log = require('../lib/logger');
+
+const router = express.Router();
+
+const UPLOADS_DIR = path.join(__dirname, '..', 'uploads');
+const DOWNLOADS_DIR = path.join(__dirname, '..', 'downloads');
+const MAX_FILE_SIZE = 200 * 1024 * 1024; // 200MB
+
+const upload = multer({
+  dest: UPLOADS_DIR,
+  limits: { fileSize: MAX_FILE_SIZE },
+  fileFilter: (req, file, cb) => {
+    const valid = ['video/mp4', 'video/webm', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska', 'video/mpeg', 'video/3gpp', 'video/ogg'];
+    if (valid.includes(file.mimetype) || file.originalname.match(/\.(mp4|webm|mov|avi|mkv|mpeg|mpg|3gp|ogg|flv|wmv)$/i)) {
+      cb(null, true);
+    } else {
+      cb(new Error('Неподдерживаемый формат видео'));
+    }
+  },
+});
+
+const limiter = rateLimit({ windowMs: 60000, max: 10, message: { error: 'Слишком много запросов' } });
+
+// Active jobs tracking
+const jobs = new Map();
+
+function runFFmpeg(args, jobId) {
+  return new Promise((resolve, reject) => {
+    const proc = spawn('ffmpeg', args, { timeout: 600000 }); // 10 min timeout
+    let stderr = '';
+
+    proc.stderr.on('data', (d) => {
+      stderr += d.toString();
+      // Parse progress
+      const timeMatch = stderr.match(/time=(\d{2}):(\d{2}):(\d{2})/);
+      if (timeMatch && jobs.has(jobId)) {
+        const secs = parseInt(timeMatch[1]) * 3600 + parseInt(timeMatch[2]) * 60 + parseInt(timeMatch[3]);
+        const job = jobs.get(jobId);
+        if (job.duration > 0) {
+          job.progress = Math.min(99, Math.round((secs / job.duration) * 100));
+        }
+      }
+    });
+
+    proc.on('close', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`ffmpeg exited with code ${code}: ${stderr.slice(-500)}`));
+    });
+
+    proc.on('error', reject);
+  });
+}
+
+// Get video duration
+function getVideoDuration(filePath) {
+  return new Promise((resolve) => {
+    const proc = spawn('ffprobe', ['-v', 'quiet', '-print_format', 'json', '-show_format', '-show_streams', filePath]);
+    let out = '';
+    proc.stdout.on('data', (d) => { out += d.toString(); });
+    proc.on('close', () => {
+      try {
+        const info = JSON.parse(out);
+        const duration = parseFloat(info.format?.duration || '0');
+        const streams = info.streams || [];
+        const video = streams.find(s => s.codec_type === 'video');
+        const audio = streams.find(s => s.codec_type === 'audio');
+        resolve({
+          duration,
+          width: video ? parseInt(video.width) : 0,
+          height: video ? parseInt(video.height) : 0,
+          codec: video ? video.codec_name : '',
+          audioCodec: audio ? audio.codec_name : '',
+          bitrate: info.format?.bit_rate ? Math.round(parseInt(info.format.bit_rate) / 1024) : 0,
+        });
+      } catch {
+        resolve({ duration: 0, width: 0, height: 0, codec: '', audioCodec: '', bitrate: 0 });
+      }
+    });
+  });
+}
+
+// Page
+router.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, '..', 'public', 'video.html'));
+});
+
+// Upload and get info
+router.post('/upload', limiter, upload.single('video'), async (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'Файл не загружен' });
+
+  try {
+    const info = await getVideoDuration(req.file.path);
+    const jobId = `job_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+
+    jobs.set(jobId, {
+      inputPath: req.file.path,
+      originalName: req.file.originalname,
+      size: req.file.size,
+      duration: info.duration,
+      progress: 0,
+      status: 'ready',
+      outputPath: null,
+      info,
+    });
+
+    // Cleanup job after 30 min
+    setTimeout(() => {
+      const job = jobs.get(jobId);
+      if (job) {
+        try { fs.existsSync(job.inputPath) && fs.unlinkSync(job.inputPath); } catch {}
+        try { job.outputPath && fs.existsSync(job.outputPath) && fs.unlinkSync(job.outputPath); } catch {}
+        jobs.delete(jobId);
+      }
+    }, 30 * 60 * 1000);
+
+    log.info(`Video upload: ${req.file.originalname} (${(req.file.size / 1024 / 1024).toFixed(1)}MB, ${info.duration.toFixed(1)}s)`);
+
+    res.json({ jobId, info, originalName: req.file.originalname, size: req.file.size });
+  } catch (err) {
+    try { fs.unlinkSync(req.file.path); } catch {}
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Convert
+router.post('/convert', express.json(), async (req, res) => {
+  const { jobId, mode, format, quality, startTime, endTime } = req.body;
+  const job = jobs.get(jobId);
+  if (!job) return res.status(404).json({ error: 'Задача не найдена' });
+  if (job.status === 'processing') return res.status(409).json({ error: 'Уже обрабатывается' });
+
+  job.status = 'processing';
+  job.progress = 0;
+
+  const ext = { mp4: '.mp4', webm: '.webm', avi: '.avi', mkv: '.mkv', mp3: '.mp3', aac: '.aac', gif: '.gif' };
+  const outExt = ext[format] || '.mp4';
+  const outFile = path.join(DOWNLOADS_DIR, `${jobId}${outExt}`);
+  job.outputPath = outFile;
+
+  try {
+    let args = ['-y', '-i', job.inputPath];
+
+    // Time range (for GIF or trim)
+    if (startTime !== undefined && startTime > 0) args.push('-ss', String(startTime));
+    if (endTime !== undefined && endTime > 0) args.push('-to', String(endTime));
+
+    switch (mode) {
+      case 'convert': {
+        // Format conversion
+        if (format === 'mp4') args.push('-c:v', 'libx264', '-c:a', 'aac', '-movflags', '+faststart');
+        else if (format === 'webm') args.push('-c:v', 'libvpx-vp9', '-c:a', 'libopus', '-b:v', '1M');
+        else if (format === 'avi') args.push('-c:v', 'mpeg4', '-c:a', 'mp3');
+        else if (format === 'mkv') args.push('-c:v', 'libx264', '-c:a', 'aac');
+        break;
+      }
+      case 'compress': {
+        // Quality: 18 (high) to 35 (low)
+        const crf = quality === 'high' ? 20 : quality === 'low' ? 32 : 26;
+        args.push('-c:v', 'libx264', '-crf', String(crf), '-preset', 'medium', '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart');
+        break;
+      }
+      case 'audio': {
+        // Extract audio
+        args.push('-vn');
+        if (format === 'mp3') args.push('-c:a', 'libmp3lame', '-q:a', '2');
+        else args.push('-c:a', 'aac', '-b:a', '192k');
+        break;
+      }
+      case 'gif': {
+        // GIF from video
+        const w = Math.min(job.info.width || 480, 480);
+        args.push('-vf', `scale=${w}:-1:flags=lanczos,fps=12`, '-loop', '0');
+        break;
+      }
+      default:
+        job.status = 'error';
+        return res.status(400).json({ error: 'Неизвестный режим' });
+    }
+
+    args.push(outFile);
+
+    await runFFmpeg(args, jobId);
+    job.status = 'done';
+    job.progress = 100;
+
+    const outStat = fs.statSync(outFile);
+    const savings = job.size > 0 ? Math.round((1 - outStat.size / job.size) * 100) : 0;
+
+    log.info(`Video ${mode}: ${job.originalName} → ${format} (${(outStat.size / 1024 / 1024).toFixed(1)}MB, ${savings}% saved)`);
+
+    res.json({
+      status: 'done',
+      downloadUrl: `/video/download/${jobId}${outExt}`,
+      outputSize: outStat.size,
+      savings,
+    });
+  } catch (err) {
+    job.status = 'error';
+    log.error('Video convert error', { error: err.message });
+    res.status(500).json({ error: 'Ошибка конвертации: ' + err.message.slice(0, 200) });
+  }
+});
+
+// Progress
+router.get('/progress/:jobId', (req, res) => {
+  const job = jobs.get(req.params.jobId);
+  if (!job) return res.status(404).json({ error: 'Not found' });
+  res.json({ status: job.status, progress: job.progress });
+});
+
+// Download result
+router.get('/download/:filename', (req, res) => {
+  const filename = path.basename(req.params.filename);
+  const filePath = path.join(DOWNLOADS_DIR, filename);
+  if (!fs.existsSync(filePath)) return res.status(404).json({ error: 'Файл не найден' });
+  res.download(filePath);
+});
+
+// Multer error handler
+router.use((err, req, res, next) => {
+  if (err instanceof multer.MulterError) {
+    if (err.code === 'LIMIT_FILE_SIZE') return res.status(413).json({ error: 'Файл слишком большой. Максимум 200MB.' });
+    return res.status(400).json({ error: err.message });
+  }
+  if (err) return res.status(400).json({ error: err.message });
+  next();
+});
+
+module.exports = router;
diff --git a/server.js b/server.js
index f5a7bc8..18e1db3 100755
--- a/server.js
+++ b/server.js
@@ -61,6 +61,7 @@ app.use('/placeholder-img', require('./routes/placeholder'));
 app.use(require('./routes/httpclient'));
 app.use(require('./routes/redirects'));
 app.use(require('./routes/svgeditor'));
+app.use('/video', require('./routes/video'));
 app.use(require('./routes/logs'));
 app.use(require('./routes/pages'));