v0.2.2

2026-04-17 12:54:43 +03:00
parent 8721353b8d
commit bb371e1b71
9 changed files with 1024 additions and 154 deletions
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,8 +1,8 @@
 mod config;
 mod nexrender;
-mod synology;
 mod processor;
-mod web;      
+mod synology;
+mod web;

 use anyhow::Result;
 use clap::Parser;
@@ -29,11 +29,17 @@ async fn main() -> Result<()> {
    let config = Config::from_env()?;

    if cli.web {
-        info!("Starting AE Anons web server v{}", env!("CARGO_PKG_VERSION"));
+        info!(
+            "Starting AE Anons web server v{}",
+            env!("CARGO_PKG_VERSION")
+        );
        web::run_web_server(config).await?;
    } else {
        // По умолчанию или с флагом --once выполняем однократную обработку
-        info!("Starting AE Anons processor v{} (one-time mode)", env!("CARGO_PKG_VERSION"));
+        info!(
+            "Starting AE Anons processor v{} (one-time mode)",
+            env!("CARGO_PKG_VERSION")
+        );
        let submitted = processor::process_spreadsheet(&config).await?;
        info!("Submitted {} jobs. Exiting.", submitted.len());
    }
--- a/src/nexrender.rs
+++ b/src/nexrender.rs
@@ -302,7 +302,6 @@ impl JobData {
        variants
    }

-    // ЕДИНСТВЕННАЯ реализация метода
    pub fn to_nexrender_job(&self, config: &crate::config::Config) -> NexrenderJob {
        let template = if self.team_b.is_empty() {
            Template::single(
--- a/src/processor.rs
+++ b/src/processor.rs
@@ -11,8 +11,6 @@ use std::collections::HashMap;
 use std::io::Cursor;
 use std::path::Path;

-// Добавить после импортов в processor.rs
-
 #[derive(Debug, Clone)]
 pub struct SheetData {
    pub name: String,
@@ -174,7 +172,6 @@ fn parse_sheet_dynamic_optimized(
        })
        .collect();

-    // Парсим строки данных
    let rows_data: Vec<HashMap<String, String>> = data_matrix
        .iter()
        .skip(1)
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -1,214 +1,489 @@
 <!DOCTYPE html>
-<html>
+<html lang="ru">
+
 <head>
    <meta charset="utf-8">
-    <title>AE Anons Control Panel</title>
-    <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 20px; background: #f5f5f5; }
-        .container { max-width: 1400px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        h1 { color: #333; margin-top: 0; }
-        table { border-collapse: collapse; width: 100%; margin-top: 20px; }
-        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
-        th { background-color: #4CAF50; color: white; }
-        tr:nth-child(even) { background-color: #f9f9f9; }
-        tr:hover { background-color: #f1f1f1; }
-        .state-finished { color: #4CAF50; font-weight: bold; }
-        .state-error { color: #f44336; font-weight: bold; }
-        .state-started { color: #2196F3; font-weight: bold; }
-        .state-queued { color: #ff9800; font-weight: bold; }
-        button { 
-            margin: 5px; 
-            padding: 10px 15px; 
-            border: none; 
-            border-radius: 4px; 
-            cursor: pointer; 
-            font-size: 14px;
-            transition: background 0.3s;
-        }
-        .btn-primary { background: #4CAF50; color: white; }
-        .btn-primary:hover { background: #45a049; }
-        .btn-secondary { background: #2196F3; color: white; }
-        .btn-secondary:hover { background: #0b7dda; }
-        .btn-danger { background: #f44336; color: white; }
-        .btn-danger:hover { background: #da190b; }
-        .status { margin-bottom: 20px; padding: 10px; background: #e7f3fe; border-left: 4px solid #2196F3; }
-        .status span { margin-left: 20px; color: #666; }
-        .filter-bar { margin: 10px 0; }
-        .filter-bar input { padding: 8px; width: 300px; border: 1px solid #ddd; border-radius: 4px; }
-        .stats { margin: 10px 0; font-size: 14px; color: #666; }
-    </style>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AE Anons - Nexrender Job Manager</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="/static/style.css">
 </head>
+
 <body>
    <div class="container">
-        <h1>🎬 AE Anons - Nexrender Job Manager</h1>
-        
-        <div class="status">
-            <button class="btn-primary" onclick="generateJobs()">🔄 Generate New Jobs</button>
-            <button class="btn-danger" onclick="cleanupJobs()">🧹 Cleanup Finished Jobs</button>
-            <button class="btn-secondary" onclick="refreshJobs()">↻ Refresh</button>
-            <span id="statusMessage"></span>
+        <!-- Header -->
+        <div class="header">
+            <div class="header-left">
+                <div class="logo-container">
+                    <img src="/assets/logo.png" alt="AE Anons Logo" class="logo" id="logo"
+                        onerror="this.style.display='none'; document.getElementById('logoPlaceholder').style.display='flex';">
+                    <div class="logo-placeholder" id="logoPlaceholder" style="display: none;">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                </div>
+                <h1>AE Anons - Nexrender Job Manager</h1>
+            </div>
+            <div class="header-controls">
+                <button class="theme-toggle" onclick="toggleTheme()">
+                    <i class="fas fa-circle-half-stroke" id="themeIcon"></i>
+                    <span id="themeText">Auto</span>
+                </button>
+            </div>
        </div>

+        <!-- Action Bar -->
+        <div class="action-bar">
+            <button class="btn btn-primary" onclick="generateJobs()">
+                <i class="fas fa-play"></i> Generate New Jobs
+            </button>
+            <button class="btn btn-warning" onclick="stopAllJobs()">
+                <i class="fas fa-stop"></i> Stop All Jobs
+            </button>
+            <button class="btn btn-danger" onclick="cleanupJobs()">
+                <i class="fas fa-trash-alt"></i> Cleanup Finished
+            </button>
+            <button class="btn btn-outline" onclick="refreshJobs()">
+                <i class="fas fa-sync-alt"></i> Refresh
+            </button>
+            <div class="status-message" id="statusMessage">
+                <i class="fas fa-circle" style="color: var(--accent-success); font-size: 8px;"></i>
+                <span>Ready</span>
+            </div>
+        </div>
+
+        <!-- Stats Grid -->
+        <div class="stats-grid" id="statsGrid"></div>
+
+        <!-- Filter Bar -->
        <div class="filter-bar">
-            <input type="text" id="filterInput" placeholder="🔍 Filter by output file name..." onkeyup="filterTable()">
+            <div class="search-wrapper">
+                <i class="fas fa-search"></i>
+                <input type="text" class="search-input" id="filterInput" placeholder="Filter by filename or UID..."
+                    onkeyup="filterTable()">
+            </div>
+            <div class="auto-refresh-badge">
+                <i class="fas fa-clock"></i>
+                <span>Auto-refresh: 60s</span>
+                <span id="refreshCountdown">60</span>s
+            </div>
        </div>

-        <div class="stats" id="stats"></div>
-
-        <table id="jobsTable">
-            <thead>
-                <tr>
-                    <th>Output File</th>
-                    <th>State</th>
-                    <th>Created</th>
-                    <th>Updated</th>
-                    <th>UID</th>
-                </tr>
-            </thead>
-            <tbody id="jobsTableBody">
-                <tr><td colspan="5" style="text-align: center;">Loading...</td></tr>
-            </tbody>
-        </table>
+        <!-- Table -->
+        <div class="table-container">
+            <table id="jobsTable">
+                <thead>
+                    <tr>
+                        <th data-column="filename" onclick="sortTable('filename')">
+                            Output File <i class="fas fa-sort"></i>
+                        </th>
+                        <th data-column="state" onclick="sortTable('state')" class="sorted-asc">
+                            State <i class="fas fa-sort-up"></i>
+                        </th>
+                        <th data-column="created" onclick="sortTable('created')">
+                            Created <i class="fas fa-sort"></i>
+                        </th>
+                        <th data-column="updated" onclick="sortTable('updated')">
+                            Updated <i class="fas fa-sort"></i>
+                        </th>
+                        <th data-column="uid" onclick="sortTable('uid')">
+                            UID <i class="fas fa-sort"></i>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody id="jobsTableBody">
+                    <tr>
+                        <td colspan="5">
+                            <div class="empty-state">
+                                <i class="fas fa-spinner fa-spin"></i>
+                                <p>Loading jobs...</p>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
    </div>

    <script>
+        // State
        let allJobs = [];
+        let filteredJobs = [];
+        let isLoading = false;
+        let autoRefreshTimer = null;
+        let countdownTimer = null;
+        let countdownValue = 60;
+        let currentTheme = 'auto';

+        // Sorting state
+        let currentSort = { column: 'state', direction: 'asc' };
+        const stateOrder = { 'finished': 1, 'started': 2, 'processing': 3, 'queued': 4, 'pending': 5, 'error': 6 };
+
+        // Theme handling
+        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+        function getOSPreference() {
+            return darkModeMediaQuery.matches ? 'dark' : 'light';
+        }
+
+        function applyTheme(theme) {
+            const effectiveTheme = theme === 'auto' ? getOSPreference() : theme;
+            document.documentElement.setAttribute('data-theme', effectiveTheme);
+            updateThemeButton(theme);
+        }
+
+        function updateThemeButton(theme) {
+            const icon = document.getElementById('themeIcon');
+            const text = document.getElementById('themeText');
+
+            if (theme === 'auto') {
+                icon.className = 'fas fa-circle-half-stroke';
+                text.textContent = 'Auto';
+            } else if (theme === 'dark') {
+                icon.className = 'fas fa-moon';
+                text.textContent = 'Dark';
+            } else {
+                icon.className = 'fas fa-sun';
+                text.textContent = 'Light';
+            }
+        }
+
+        function toggleTheme() {
+            if (currentTheme === 'auto') {
+                currentTheme = 'light';
+            } else if (currentTheme === 'light') {
+                currentTheme = 'dark';
+            } else {
+                currentTheme = 'auto';
+            }
+            localStorage.setItem('theme', currentTheme);
+            applyTheme(currentTheme);
+        }
+
+        function initTheme() {
+            const savedTheme = localStorage.getItem('theme') || 'auto';
+            currentTheme = savedTheme;
+            applyTheme(currentTheme);
+
+            darkModeMediaQuery.addEventListener('change', (e) => {
+                if (currentTheme === 'auto') {
+                    applyTheme('auto');
+                }
+            });
+        }
+
+        // Sorting
+        function sortTable(column) {
+            if (currentSort.column === column) {
+                currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+            } else {
+                currentSort.column = column;
+                currentSort.direction = 'asc';
+            }
+
+            updateSortIcons();
+            sortAndRender();
+        }
+
+        function updateSortIcons() {
+            document.querySelectorAll('th').forEach(th => {
+                const column = th.dataset.column;
+                th.classList.remove('sorted-asc', 'sorted-desc');
+
+                const icon = th.querySelector('i');
+                if (column === currentSort.column) {
+                    th.classList.add(currentSort.direction === 'asc' ? 'sorted-asc' : 'sorted-desc');
+                    icon.className = currentSort.direction === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
+                } else {
+                    icon.className = 'fas fa-sort';
+                }
+            });
+        }
+
+        function sortJobs(jobs) {
+            const { column, direction } = currentSort;
+            const multiplier = direction === 'asc' ? 1 : -1;
+
+            return [...jobs].sort((a, b) => {
+                let aVal, bVal;
+
+                switch (column) {
+                    case 'filename':
+                        aVal = a.outfile_name || '';
+                        bVal = b.outfile_name || '';
+                        return multiplier * aVal.localeCompare(bVal);
+
+                    case 'state':
+                        aVal = stateOrder[a.state] || 999;
+                        bVal = stateOrder[b.state] || 999;
+                        return multiplier * (aVal - bVal);
+
+                    case 'created':
+                        aVal = a.created_at ? new Date(a.created_at).getTime() : 0;
+                        bVal = b.created_at ? new Date(b.created_at).getTime() : 0;
+                        return multiplier * (bVal - aVal);
+
+                    case 'updated':
+                        aVal = a.updated_at ? new Date(a.updated_at).getTime() : 0;
+                        bVal = b.updated_at ? new Date(b.updated_at).getTime() : 0;
+                        return multiplier * (bVal - aVal);
+
+                    case 'uid':
+                        aVal = a.uid || '';
+                        bVal = b.uid || '';
+                        return multiplier * aVal.localeCompare(bVal);
+
+                    default:
+                        return 0;
+                }
+            });
+        }
+
+        function sortAndRender() {
+            const jobsToRender = filteredJobs.length > 0 || document.getElementById('filterInput').value ?
+                filteredJobs : allJobs;
+            const sorted = sortJobs(jobsToRender);
+            renderJobs(sorted);
+        }
+
+        // Data fetching
        async function refreshJobs() {
+            if (isLoading) return;
+            isLoading = true;
+
            try {
-                setStatus('Loading jobs...');
+                setStatus('loading', 'Loading jobs...');
                const response = await fetch('/api/jobs');
                allJobs = await response.json();
-                renderJobs(allJobs);
+                filteredJobs = [];
+                document.getElementById('filterInput').value = '';
+                sortAndRender();
                updateStats();
-                setStatus(`Loaded ${allJobs.length} jobs`);
+                setStatus('success', `Loaded ${allJobs.length} jobs`);
            } catch (err) {
                console.error(err);
-                setStatus('Error loading jobs: ' + err);
+                setStatus('error', 'Failed to load jobs');
+            } finally {
+                isLoading = false;
            }
        }

        function renderJobs(jobs) {
            const tbody = document.getElementById('jobsTableBody');
-            tbody.innerHTML = '';
-            
+
            if (jobs.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="5" style="text-align: center;">No jobs found</td></tr>';
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="5">
+                            <div class="empty-state">
+                                <i class="fas fa-inbox"></i>
+                                <p>No jobs found</p>
+                            </div>
+                        </td>
+                    </tr>
+                `;
                return;
            }
-            
-            jobs.sort((a, b) => {
-                // Сортируем по дате создания (новые сверху)
-                const dateA = a.created_at ? new Date(a.created_at) : new Date(0);
-                const dateB = b.created_at ? new Date(b.created_at) : new Date(0);
-                return dateB - dateA;
-            });
-            
-            jobs.forEach(job => {
-                const row = tbody.insertRow();
-                
-                // Output file (выделяем жирным)
-                const fileCell = row.insertCell();
-                fileCell.textContent = job.outfile_name;
-                fileCell.style.fontWeight = 'bold';
-                
-                // State с цветовой кодировкой
-                const stateCell = row.insertCell();
-                stateCell.textContent = job.state;
-                stateCell.className = `state-${job.state}`;
-                
-                // Форматируем даты
-                row.insertCell().textContent = formatDate(job.created_at);
-                row.insertCell().textContent = formatDate(job.updated_at);
-                
-                // UID (обрезаем для компактности)
-                const uidCell = row.insertCell();
-                uidCell.textContent = job.uid.substring(0, 8) + '...';
-                uidCell.title = job.uid; // полный UID при наведении
-            });
+
+            tbody.innerHTML = jobs.map(job => {
+                const stateClass = getStateClass(job.state);
+                const created = formatDateTime(job.created_at);
+                const updated = formatDateTime(job.updated_at);
+
+                return `
+                    <tr>
+                        <td>
+                            <div class="job-filename" title="${escapeHtml(job.outfile_name)}">${escapeHtml(job.outfile_name)}</div>
+                        </td>
+                        <td><span class="badge ${stateClass}">${escapeHtml(job.state)}</span></td>
+                        <td class="datetime">${created}</td>
+                        <td class="datetime">${updated}</td>
+                        <td class="uid" title="${escapeHtml(job.uid)}">${job.uid.substring(0, 10)}...</td>
+                    </tr>
+                `;
+            }).join('');
        }

-        function formatDate(dateStr) {
+        function escapeHtml(text) {
+            if (!text) return '';
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function getStateClass(state) {
+            const classes = {
+                'finished': 'badge-finished',
+                'started': 'badge-started',
+                'processing': 'badge-processing',
+                'queued': 'badge-queued',
+                'error': 'badge-error',
+                'pending': 'badge-pending'
+            };
+            return classes[state] || 'badge-pending';
+        }
+
+        function formatDateTime(dateStr) {
            if (!dateStr) return '-';
            try {
                const date = new Date(dateStr);
-                return date.toLocaleString('ru-RU', { 
-                    day: '2-digit', 
-                    month: '2-digit', 
-                    hour: '2-digit', 
-                    minute: '2-digit' 
-                });
+                const time = date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
+                const dayMonth = date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
+                return `${time}, ${dayMonth}`;
            } catch {
                return dateStr;
            }
        }

+        function updateStats() {
+            const stats = {
+                total: allJobs.length,
+                finished: 0,
+                started: 0,
+                queued: 0,
+                error: 0,
+                other: 0
+            };
+
+            allJobs.forEach(job => {
+                switch (job.state) {
+                    case 'finished': stats.finished++; break;
+                    case 'started':
+                    case 'processing': stats.started++; break;
+                    case 'queued': stats.queued++; break;
+                    case 'error': stats.error++; break;
+                    default: stats.other++; break;
+                }
+            });
+
+            const grid = document.getElementById('statsGrid');
+            grid.innerHTML = `
+                <div class="stat-card">
+                    <h3><i class="fas fa-tasks"></i> Total Jobs</h3>
+                    <div class="value">${stats.total}</div>
+                </div>
+                <div class="stat-card">
+                    <h3><i class="fas fa-check-circle"></i> Completed</h3>
+                    <div class="value">${stats.finished}</div>
+                </div>
+                <div class="stat-card">
+                    <h3><i class="fas fa-play-circle"></i> Active</h3>
+                    <div class="value">${stats.started + stats.queued}</div>
+                </div>
+                <div class="stat-card">
+                    <h3><i class="fas fa-exclamation-circle"></i> Errors</h3>
+                    <div class="value">${stats.error}</div>
+                </div>
+            `;
+        }
+
        function filterTable() {
            const filter = document.getElementById('filterInput').value.toLowerCase();
-            const filtered = allJobs.filter(job => 
+            filteredJobs = allJobs.filter(job =>
                job.outfile_name.toLowerCase().includes(filter) ||
                job.uid.toLowerCase().includes(filter)
            );
-            renderJobs(filtered);
-            updateStats(filtered.length);
-        }
-
-        function updateStats(filteredCount = null) {
-            const total = allJobs.length;
-            const shown = filteredCount !== null ? filteredCount : total;
-            const states = allJobs.reduce((acc, job) => {
-                acc[job.state] = (acc[job.state] || 0) + 1;
-                return acc;
-            }, {});
-            
-            const statsDiv = document.getElementById('stats');
-            const stateText = Object.entries(states)
-                .map(([state, count]) => `${state}: ${count}`)
-                .join(' | ');
-            
-            statsDiv.innerHTML = `Total: ${total} jobs${filteredCount !== null ? ` | Showing: ${shown}` : ''} | ${stateText}`;
+            sortAndRender();
        }

+        // Actions
        async function generateJobs() {
-            setStatus('⏳ Generating jobs...');
+            setStatus('loading', 'Generating jobs...');
            try {
                const response = await fetch('/api/generate', { method: 'POST' });
                if (response.ok) {
-                    setStatus('✅ Job generation started. Will refresh in 10 seconds...');
-                    setTimeout(() => refreshJobs(), 10000);
+                    setStatus('success', 'Job generation started');
+                    setTimeout(() => refreshJobs(), 5000);
                } else {
                    const text = await response.text();
-                    setStatus('❌ Error: ' + text);
+                    setStatus('error', `Error: ${text}`);
                }
            } catch (err) {
-                setStatus('❌ Error: ' + err);
+                setStatus('error', `Error: ${err}`);
+            }
+        }
+
+        async function stopAllJobs() {
+            if (!confirm('Are you sure you want to stop all active jobs?')) return;
+
+            setStatus('loading', 'Stopping all jobs...');
+            try {
+                const response = await fetch('/api/jobs/stop-all', { method: 'POST' });
+                if (response.ok) {
+                    setStatus('success', 'All jobs stopped');
+                    refreshJobs();
+                } else {
+                    const text = await response.text();
+                    setStatus('error', `Error: ${text}`);
+                }
+            } catch (err) {
+                setStatus('error', `Error: ${err}`);
            }
        }

        async function cleanupJobs() {
-            setStatus('🧹 Cleaning up finished jobs...');
+            setStatus('loading', 'Cleaning up finished jobs...');
            try {
                const response = await fetch('/api/cleanup', { method: 'POST' });
                if (response.ok) {
-                    setStatus('✅ Cleanup completed. Refreshing...');
+                    setStatus('success', 'Cleanup completed');
                    await refreshJobs();
                } else {
                    const text = await response.text();
-                    setStatus('❌ Error: ' + text);
+                    setStatus('error', `Error: ${text}`);
                }
            } catch (err) {
-                setStatus('❌ Error: ' + err);
+                setStatus('error', `Error: ${err}`);
            }
        }

-        function setStatus(msg) {
-            document.getElementById('statusMessage').textContent = msg;
+        function setStatus(type, message) {
+            const el = document.getElementById('statusMessage');
+            const icons = {
+                loading: '<span class="spinner"></span>',
+                success: '<i class="fas fa-check-circle" style="color: var(--accent-success);"></i>',
+                error: '<i class="fas fa-times-circle" style="color: var(--accent-danger);"></i>'
+            };
+            el.innerHTML = `${icons[type] || ''} <span>${message}</span>`;
        }

-        // Initial load
+        // Auto-refresh
+        function startAutoRefresh() {
+            stopAutoRefresh();
+
+            autoRefreshTimer = setInterval(() => {
+                refreshJobs();
+                resetCountdown();
+            }, 60000);
+
+            countdownTimer = setInterval(() => {
+                countdownValue--;
+                document.getElementById('refreshCountdown').textContent = countdownValue;
+                if (countdownValue <= 0) {
+                    countdownValue = 60;
+                }
+            }, 1000);
+        }
+
+        function stopAutoRefresh() {
+            if (autoRefreshTimer) clearInterval(autoRefreshTimer);
+            if (countdownTimer) clearInterval(countdownTimer);
+        }
+
+        function resetCountdown() {
+            countdownValue = 60;
+            document.getElementById('refreshCountdown').textContent = countdownValue;
+        }
+
+        // Initialize
+        initTheme();
        refreshJobs();
-        // Auto-refresh every 10 seconds
-        setInterval(refreshJobs, 10000);
+        startAutoRefresh();
+        updateSortIcons();
+
+        window.addEventListener('beforeunload', () => {
+            stopAutoRefresh();
+        });
    </script>
 </body>
+
 </html>
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -0,0 +1,555 @@
+/* ========================================
+   AE Anons - Nexrender Job Manager Styles
+   ======================================== */
+
+/* CSS Variables - Light Theme (default) */
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #fafafa;
+    --bg-tertiary: #f3f0f7;
+    --text-primary: #1a1a1a;
+    --text-secondary: #6b4f7c;
+    --border-color: #e0d4e8;
+    --accent-primary: #7c3aed;
+    --accent-secondary: #c2410c;
+    --accent-success: #10b981;
+    --accent-warning: #ea580c;
+    --accent-danger: #ef4444;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --header-bg: #7c3aed;
+    --header-text: #ffffff;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+    --bg-primary: #1a1025;
+    --bg-secondary: #251a30;
+    --bg-tertiary: #352545;
+    --text-primary: #f0e6ff;
+    --text-secondary: #c4a6d9;
+    --border-color: #4a3560;
+    --accent-primary: #a78bfa;
+    --accent-secondary: #f59e0b;
+    --accent-success: #34d399;
+    --accent-warning: #fbbf24;
+    --accent-danger: #f87171;
+    --header-bg: #a78bfa;
+    --header-text: #1a1025;
+}
+
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 24px;
+}
+
+/* Header */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.logo-container {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: var(--accent-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-shadow: var(--shadow-md);
+}
+
+.logo {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.logo-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.header h1 {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--accent-primary);
+    letter-spacing: -0.5px;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.theme-toggle {
+    background: var(--bg-secondary);
+    border: 2px solid var(--accent-primary);
+    border-radius: 24px;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    color: var(--text-primary);
+    font-size: 14px;
+    box-shadow: var(--shadow-sm);
+}
+
+.theme-toggle:hover {
+    box-shadow: var(--shadow-md);
+}
+
+/* Action Bar */
+.action-bar {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    border: 1px solid var(--border-color);
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.1);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.btn:hover::before {
+    opacity: 1;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn i {
+    font-size: 14px;
+}
+
+/* Generate - Purple */
+.btn-primary {
+    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
+}
+
+[data-theme="dark"] .btn-primary {
+    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
+    color: #1a1025;
+    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
+}
+
+.btn-primary:hover {
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
+}
+
+/* Stop - Orange */
+.btn-warning {
+    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
+}
+
+[data-theme="dark"] .btn-warning {
+    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
+    color: #1a1025;
+    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
+}
+
+.btn-warning:hover {
+    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
+}
+
+/* Cleanup - Plum */
+.btn-danger {
+    background: linear-gradient(135deg, #9d174d 0%, #be185d 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 2px 8px rgba(157, 23, 77, 0.3);
+}
+
+[data-theme="dark"] .btn-danger {
+    background: linear-gradient(135deg, #be185d 0%, #db2777 100%);
+    color: #f0e6ff;
+    box-shadow: 0 2px 8px rgba(190, 24, 93, 0.4);
+}
+
+.btn-danger:hover {
+    box-shadow: 0 4px 12px rgba(157, 23, 77, 0.4);
+}
+
+/* Refresh - Outline */
+.btn-outline {
+    background: transparent;
+    border: 2px solid #7c3aed;
+    color: #7c3aed;
+    box-shadow: none;
+}
+
+[data-theme="dark"] .btn-outline {
+    border-color: #a78bfa;
+    color: #a78bfa;
+}
+
+.btn-outline:hover {
+    background: #7c3aed;
+    color: white;
+    border-color: #7c3aed;
+}
+
+[data-theme="dark"] .btn-outline:hover {
+    background: #a78bfa;
+    color: #1a1025;
+    border-color: #a78bfa;
+}
+
+/* Status Message */
+.status-message {
+    margin-left: auto;
+    padding: 8px 16px;
+    background: var(--bg-tertiary);
+    border-radius: 20px;
+    font-size: 14px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Stats Cards */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.stat-card {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-color);
+}
+
+.stat-card h3 {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.stat-card .value {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--accent-primary);
+}
+
+/* Filter Bar */
+.filter-bar {
+    margin-bottom: 20px;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.search-wrapper {
+    flex: 1;
+    position: relative;
+}
+
+.search-wrapper i {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-secondary);
+}
+
+.search-input {
+    width: 100%;
+    padding: 12px 16px 12px 44px;
+    background: var(--bg-secondary);
+    border: 2px solid var(--border-color);
+    border-radius: 24px;
+    color: var(--text-primary);
+    font-size: 14px;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+}
+
+.auto-refresh-badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--bg-tertiary);
+    border-radius: 20px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
+/* Table */
+.table-container {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+    overflow-x: auto;
+    border: 1px solid var(--border-color);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+    min-width: 800px;
+}
+
+th {
+    text-align: left;
+    padding: 16px;
+    background: var(--header-bg);
+    color: var(--header-text);
+    font-weight: 600;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+
+th:hover {
+    opacity: 0.9;
+}
+
+th i {
+    margin-left: 8px;
+    font-size: 12px;
+    opacity: 0.7;
+}
+
+th.sorted-asc i,
+th.sorted-desc i {
+    opacity: 1;
+}
+
+td {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary);
+    vertical-align: middle;
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:hover {
+    background: var(--bg-tertiary);
+}
+
+/* Job Filename */
+.job-filename {
+    font-family: 'Monaco', 'Menlo', 'Cascadia Code', 'Consolas', monospace;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.5;
+    word-break: break-word;
+    white-space: normal;
+    max-width: 100%;
+    color: var(--text-primary);
+}
+
+/* Badges */
+.badge {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.badge-finished {
+    background: rgba(16, 185, 129, 0.15);
+    color: var(--accent-success);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.badge-started,
+.badge-processing {
+    background: rgba(124, 58, 237, 0.15);
+    color: var(--accent-primary);
+    border: 1px solid rgba(124, 58, 237, 0.3);
+}
+
+.badge-queued {
+    background: rgba(234, 88, 12, 0.15);
+    color: var(--accent-warning);
+    border: 1px solid rgba(234, 88, 12, 0.3);
+}
+
+.badge-error {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--accent-danger);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.badge-pending {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--accent-secondary);
+    border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+/* Date & Time */
+.datetime {
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 12px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.uid {
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 11px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-secondary);
+}
+
+.empty-state i {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+    color: var(--accent-primary);
+}
+
+/* Loading Spinner */
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--accent-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    display: inline-block;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 16px;
+    }
+
+    .header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .header-left {
+        flex-wrap: wrap;
+    }
+
+    .header h1 {
+        font-size: 20px;
+    }
+
+    .action-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .status-message {
+        margin-left: 0;
+    }
+}
--- a/src/web.rs
+++ b/src/web.rs
@@ -12,6 +12,7 @@ use std::net::SocketAddr;
 use std::sync::Arc;
 use tokio::sync::Mutex;
 use tower_http::trace::TraceLayer;
+use tower_http::services::ServeDir;

 #[derive(Clone)]
 pub struct AppState {
@@ -99,6 +100,9 @@ pub async fn run_web_server(config: Config) -> anyhow::Result<()> {
        .route("/api/generate", post(generate_jobs))
        .route("/api/cleanup", post(cleanup_jobs))
        .route("/api/status", get(get_status))
+        .route("/api/jobs/stop-all", post(stop_all_jobs))
+        .nest_service("/static", ServeDir::new("src/static"))
+        .nest_service("/assets", ServeDir::new("assets"))
        .layer(TraceLayer::new_for_http())
        .with_state(state);

@@ -176,6 +180,34 @@ async fn get_status(State(state): State<AppState>) -> Result<Json<serde_json::Va
    Ok(Json(status))
 }

+async fn stop_all_jobs(State(state): State<AppState>) -> Result<impl IntoResponse, AppError> {
+    use reqwest::Client;
+
+    let client = Client::new();
+    let api_url = &state.config.nexrender_api_url;
+
+    // Получаем все задания
+    let jobs = fetch_all_jobs(api_url)
+        .await
+        .map_err(|e| AppError(StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let mut stopped = 0;
+    for job in jobs {
+        let state = job.get("state").and_then(|s| s.as_str()).unwrap_or("");
+        if state == "queued" || state == "started" || state == "processing" {
+            if let Some(uid) = job.get("uid").and_then(|u| u.as_str()) {
+                // Отправляем DELETE запрос для остановки задания
+                let _ = client.delete(&format!("{}/{}", api_url, uid)).send().await;
+                stopped += 1;
+                log::info!("Stopped job: {}", uid);
+            }
+        }
+    }
+
+    log::info!("Stopped {} active jobs", stopped);
+    Ok((StatusCode::OK, format!("Stopped {} jobs", stopped)))
+}
+
 // Error handling
 struct AppError(StatusCode, String);