ovsky · ovsky · Dec 5, 2025 · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025
diff --git a/assets/downloads.html b/assets/downloads.html
@@ -4,15 +4,32 @@
     <meta charset="utf-8" />
     <title>Downloads</title>
     <link rel="icon" type="image/svg+xml"
-        href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M5 20h14v-2H5v2m7-18l-5 6h3v6h4v-6h3l-5-6z'/%3E%3C/svg%3E" />
+        href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c2bce8'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E" />
     <link rel="stylesheet" type="text/css" href="ui.css">
     <style>
         * {
             box-sizing: border-box;
+            margin: 0;
+            padding: 0;
         }
 
         :root {
-            color-scheme: light dark;
+            /* Dark purple theme matching Passwords & Settings */
+            --bg-primary: #1e1e2e;
+            --bg-secondary: #282839;
+            --bg-tertiary: #32324a;
+            --bg-hover: #3d3d5c;
+            --text-primary: #e4e4ef;
+            --text-secondary: #9999b3;
+            --text-tertiary: #71718a;
+            --border-color: #404060;
+            --accent-color: #7c6aef;
+            --accent-hover: #9182f3;
+            --accent-light: rgba(124, 106, 239, 0.15);
+            --danger-color: #ef6a6a;
+            --success-color: #6aef8a;
+            --warning-color: #efcf6a;
+            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
         }
 
         html,
@@ -23,36 +40,43 @@
         }
 
         body {
-            margin: 0;
-            font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-            background: var(--bg, #f6f7f9);
-            color: var(--fg, #111);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, var(--bg-primary) 0%, #252540 100%);
+            color: var(--text-primary);
+            line-height: 1.5;
             min-height: 100vh;
             opacity: 0;
-            /* Fade in on load (CSS only) */
-            animation: ul_fade_in 1s ease forwards;
-            -webkit-animation: ul_fade_in 1s ease forwards;
+            animation: ul_fade_in 0.3s ease forwards;
+            -webkit-animation: ul_fade_in 0.3s ease forwards;
         }
 
         .container {
-            max-width: 960px;
-            margin: 32px auto;
-            padding: 0 16px 48px;
-            overflow: visible !important;
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 24px;
         }
 
         header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            gap: 12px;
-            margin-bottom: 16px;
+            margin-bottom: 24px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--border-color);
         }
 
         h1 {
-            font-size: 20px;
-            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 24px;
             font-weight: 600;
+            margin: 0;
+        }
+
+        h1::before {
+            content: '⬇️';
+            font-size: 32px;
         }
 
         .controls {
@@ -62,62 +86,127 @@
         }
 
         .btn {
-            padding: 8px 12px;
-            border-radius: 8px;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            background: white;
-            color: inherit;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
             cursor: pointer;
+            transition: all 0.2s;
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
         }
 
         .btn:hover {
-            background: #f2f2f2;
+            background: var(--bg-hover);
+            border-color: var(--accent-color);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary {
+            background: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+
+        .btn-primary:hover {
+            background: var(--accent-hover);
+            box-shadow: 0 4px 12px rgba(124, 106, 239, 0.4);
+        }
+
+        .btn-danger {
+            background: var(--danger-color);
+            color: white;
+            border-color: var(--danger-color);
+        }
+
+        .btn-danger:hover {
+            background: #f37878;
+            box-shadow: 0 4px 12px rgba(239, 106, 106, 0.4);
         }
 
         .list {
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: 16px;
         }
 
         .item {
-            padding: 14px 16px;
-            border-radius: 10px;
-            background: rgba(255, 255, 255, 0.85);
-            border: 1px solid rgba(0, 0, 0, 0.07);
-            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
+            padding: 16px 20px;
+            border-radius: 12px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            box-shadow: var(--card-shadow);
+            transition: all 0.2s;
+        }
+
+        .item:hover {
+            border-color: var(--accent-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(124, 106, 239, 0.2);
         }
 
         .item h2 {
-            margin: 0 0 8px 0;
+            margin: 0 0 12px 0;
             font-size: 16px;
             font-weight: 600;
             display: flex;
             align-items: center;
             gap: 8px;
+            color: var(--text-primary);
+            word-break: break-word;
         }
 
         .meta {
-            font-size: 12px;
-            color: #666;
+            font-size: 13px;
+            color: var(--text-secondary);
             display: flex;
             flex-wrap: wrap;
-            gap: 12px;
-            margin-bottom: 8px;
+            gap: 16px;
+            margin-bottom: 12px;
+        }
+
+        .meta span {
+            display: flex;
+            align-items: center;
+            gap: 4px;
         }
 
         .status {
             font-weight: 600;
             text-transform: capitalize;
+            padding: 4px 10px;
+            border-radius: 6px;
+            font-size: 12px;
+        }
+
+        .status.in-progress {
+            background: var(--accent-light);
+            color: var(--accent-color);
+        }
+
+        .status.completed {
+            background: rgba(106, 239, 138, 0.15);
+            color: var(--success-color);
+        }
+
+        .status.failed,
+        .status.cancelled {
+            background: rgba(239, 106, 106, 0.15);
+            color: var(--danger-color);
         }
 
         .progress {
             position: relative;
-            height: 6px;
+            height: 8px;
             border-radius: 999px;
-            background: rgba(0, 0, 0, 0.08);
+            background: var(--bg-tertiary);
             overflow: hidden;
-            margin: 10px 0;
+            margin: 12px 0;
         }
 
         .progress span {
@@ -126,54 +215,67 @@
             left: 0;
             bottom: 0;
             width: 0%;
-            background: linear-gradient(90deg, #6366f1, #38bdf8);
+            background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
+            transition: width 0.3s ease;
         }
 
         .actions {
             display: flex;
-            gap: 10px;
+            gap: 8px;
             flex-wrap: wrap;
+            margin-top: 12px;
         }
 
         .actions .btn {
-            font-size: 12px;
+            font-size: 13px;
+            padding: 6px 14px;
         }
 
         .empty {
             text-align: center;
-            padding: 48px 10px;
-            color: #666;
+            padding: 80px 20px;
+            color: var(--text-secondary);
         }
 
-        @media (prefers-color-scheme: dark) {
-            body {
-                background: #121212;
-                color: #e5e7eb;
-            }
+        .empty::before {
+            content: '⬇️';
+            font-size: 64px;
+            display: block;
+            margin-bottom: 16px;
+            opacity: 0.5;
+        }
 
-            .item {
-                background: rgba(18, 18, 18, 0.7);
-                border-color: rgba(255, 255, 255, 0.05);
-            }
+        .empty h2 {
+            font-size: 20px;
+            margin-bottom: 8px;
+            color: var(--text-primary);
+        }
 
-            .btn {
-                background: rgba(255, 255, 255, 0.08);
-                color: inherit;
-                border-color: rgba(255, 255, 255, 0.1);
-            }
+        .empty p {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
 
-            .btn:hover {
-                background: rgba(255, 255, 255, 0.12);
-            }
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
 
-            .meta {
-                color: #9ca3af;
-            }
+        ::-webkit-scrollbar-track {
+            background: var(--bg-secondary);
+            border-radius: 4px;
+        }
 
-            .empty {
-                color: #9ca3af;
-            }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(124, 106, 239, 0.3);
+            border-radius: 4px;
         }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(124, 106, 239, 0.5);
+        }
+
     @keyframes ul_fade_in { from { opacity: 0; } to { opacity: 1; } }
     @-webkit-keyframes ul_fade_in { from { opacity: 0; } to { opacity: 1; } }
     </style>
@@ -188,7 +290,10 @@ <h1>Downloads</h1>
             </div>
         </header>
         <section id="content">
-            <div id="empty" class="empty">No downloads yet.</div>
+            <div id="empty" class="empty" style="display: none;">
+                <h2>No Downloads Yet</h2>
+                <p>Your downloads will appear here</p>
+            </div>
             <div id="list" class="list"></div>
         </section>
     </div>
@@ -237,7 +342,7 @@ <h1>Downloads</h1>
                 const meta = document.createElement('div');
                 meta.className = 'meta';
                 const status = document.createElement('span');
-                status.className = 'status';
+                status.className = 'status ' + (item.status || 'pending').toLowerCase().replace(/[^a-z-]/g, '');
                 status.textContent = item.status || 'pending';
                 meta.appendChild(status);