Update app.py

app.py

@@ -196,105 +196,451 @@ DOWNLOAD_UI_HTML = """
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Download Anime Series</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
-        body{font-family:'Roboto',sans-serif;background-color:#141414;color:#fff;margin:0;padding:2rem;display:flex;justify-content:center;align-items:center;min-height:100vh}
-        .container{background:#1c1c1c;padding:2rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);width:100%;max-width:600px}
-        h1{color:#E50914;text-align:center;margin-bottom:2rem;font-weight:700}
-        .series-list{list-style:none;padding:0;max-height:40vh;overflow-y:auto;border:1px solid #333;border-radius:8px}
-        .series-item{display:flex;align-items:center;padding:1rem;border-bottom:1px solid #333;cursor:pointer;transition:background-color 0.2s ease}
-        .series-item:last-child{border-bottom:none}
-        .series-item:hover{background-color:#2a2a2a}
-        .series-item input[type="checkbox"]{margin-right:1rem;width:20px;height:20px;accent-color:#E50914}
-        .series-item label{flex-grow:1;font-size:1.1rem}
-        .button-container{text-align:center;margin-top:2rem}
-        .btn{background-color:#E50914;color:white;border:none;padding:1rem 2rem;font-size:1.2rem;border-radius:8px;cursor:pointer;transition:background-color 0.2s ease;font-weight:700}
-        .btn:hover{background-color:#f6121d}
-        .btn:disabled{background-color:#555;cursor:not-allowed}
-        #loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:1000}
-        .loader{border:8px solid #f3f3f3;border-top:8px solid #E50914;border-radius:50%;width:80px;height:80px;animation:spin 1s linear infinite}
-        #loading-text{color:#fff;margin-top:20px;font-size:1.2rem}
-        @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        :root {
+            --primary-color: #FF9500;
+            --primary-dark: #E68600;
+            --primary-light: #FFB84D;
+            --bg-dark: #0F0F0F;
+            --bg-secondary: #1A1A1A;
+            --bg-tertiary: #252525;
+            --text-primary: #FFFFFF;
+            --text-secondary: #B3B3B3;
+            --text-muted: #808080;
+            --border-color: #333333;
+            --border-light: #404040;
+            --success-color: #10B981;
+            --error-color: #FF9500;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+            --glass-border: rgba(255, 255, 255, 0.1);
+        }
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 100%);
+            color: var(--text-primary);
+            margin: 0;
+            padding: 2rem;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .container {
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            padding: 2.5rem;
+            border-radius: 24px;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
+            width: 100%;
+            max-width: 650px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+        }
+        
+        h1 {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-align: center;
+            margin-bottom: 2rem;
+            font-weight: 700;
+            font-size: 2rem;
+            letter-spacing: -0.02em;
+        }
+        
+        .series-list {
+            list-style: none;
+            padding: 0;
+            max-height: 45vh;
+            overflow-y: auto;
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            background: var(--bg-secondary);
+            position: relative;
+        }
+        
+        .series-list::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .series-list::-webkit-scrollbar-track {
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+        }
+        
+        .series-list::-webkit-scrollbar-thumb {
+            background: var(--primary-color);
+            border-radius: 8px;
+            border: 2px solid var(--bg-tertiary);
+        }
+        
+        .series-list::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-light);
+        }
+        
+        .series-item {
+            display: flex;
+            align-items: center;
+            padding: 1.25rem;
+            border-bottom: 1px solid var(--border-color);
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+        }
+        
+        .series-item:last-child {
+            border-bottom: none;
+        }
+        
+        
+        .series-item.selected {
+            background: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(255, 149, 0, 0.08));
+            border-left: 3px solid var(--primary-color);
+        }
+        
+        /* Custom Checkbox */
+        .custom-checkbox {
+            position: relative;
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            margin-right: 1rem;
+            cursor: pointer;
+        }
+        
+        .custom-checkbox input[type="checkbox"] {
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            cursor: pointer;
+        }
+        
+        .checkbox-visual {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            border: 2px solid var(--border-light);
+            border-radius: 8px;
+            background: var(--bg-tertiary);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .checkbox-visual::after {
+            content: '';
+            width: 8px;
+            height: 8px;
+            border: 2px solid var(--text-primary);
+            border-top: none;
+            border-right: none;
+            transform: rotate(-45deg) scale(0);
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .custom-checkbox input[type="checkbox"]:checked + .checkbox-visual {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
+        }
+        
+        .custom-checkbox input[type="checkbox"]:checked + .checkbox-visual::after {
+            transform: rotate(-45deg) scale(1);
+            border-color: var(--text-primary);
+        }
+        
+        .custom-checkbox:hover .checkbox-visual {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
+        }
+        
+        .series-item label {
+            flex-grow: 1;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: var(--text-primary);
+            cursor: pointer;
+            transition: color 0.2s ease;
+            line-height: 1.4;
+        }
+        
+        .series-item:hover label {
+            color: var(--primary-light);
+        }
+        
+        .button-container {
+            text-align: center;
+            margin-top: 2rem;
+        }
+        
+        .btn {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            color: var(--text-primary);
+            border: none;
+            padding: 1rem 2.5rem;
+            font-size: 1.1rem;
+            font-weight: 600;
+            border-radius: 16px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 8px 25px rgba(255, 149, 0, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s ease;
+        }
+        
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 35px rgba(255, 149, 0, 0.4);
+        }
+        
+        .btn:hover::before {
+            left: 100%;
+        }
+        
+        .btn:active {
+            transform: translateY(0);
+        }
+        
+        .btn:disabled {
+            background: linear-gradient(135deg, var(--text-muted), #666);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        
+        .btn:disabled::before {
+            display: none;
+        }
+        
+        #loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.9);
+            backdrop-filter: blur(10px);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        
+        .loader {
+            width: 80px;
+            height: 80px;
+            border: 4px solid var(--border-color);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            box-shadow: 0 0 20px rgba(255, 149, 0, 0.3);
+        }
+        
+        #loading-text {
+            color: var(--text-primary);
+            margin-top: 24px;
+            font-size: 1.2rem;
+            font-weight: 500;
+            text-align: center;
+            opacity: 0.9;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .error-message {
+            color: var(--error-color);
+            text-align: center;
+            font-weight: 500;
+        }
+        
+        .empty-state {
+            text-align: center;
+            color: var(--text-secondary);
+            font-style: italic;
+        }
+        
+        @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+            
+            .container {
+                padding: 1.5rem;
+                border-radius: 16px;
+            }
+            
+            h1 {
+                font-size: 1.75rem;
+            }
+            
+            .series-list {
+                max-height: 35vh;
+            }
+            
+            .series-item {
+                padding: 1rem;
+            }
+            
+            .btn {
+                padding: 0.875rem 2rem;
+                font-size: 1rem;
+            }
+        }
     </style>
 </head>
 <body>
-    <div id="loading-overlay"><div class="loader"></div><p id="loading-text">Generating your files...</p></div>
+    <div id="loading-overlay">
+        <div class="loader"></div>
+        <p id="loading-text">Generating your files...</p>
+    </div>
+    
     <div class="container">
         <h1>Select Anime to Download</h1>
         <form id="downloadForm">
             <ul id="seriesList" class="series-list"></ul>
-            <div class="button-container"><button type="submit" class="btn" id="generateBtn" disabled>Generate Zip</button></div>
+            <div class="button-container">
+                <button type="submit" class="btn" id="generateBtn" disabled>Generate Zip</button>
+            </div>
         </form>
     </div>
-
+    
     <script>
         document.addEventListener('DOMContentLoaded', async () => {
             const seriesList = document.getElementById('seriesList');
             const generateBtn = document.getElementById('generateBtn');
             const loadingOverlay = document.getElementById('loading-overlay');
             const apiBaseUrl = ''; // API is at the same origin
-
-            // Get the token from the URL parameters instead of localStorage.
+            
+            // Get the token from the URL parameters
             const urlParams = new URLSearchParams(window.location.search);
             const token = urlParams.get('token');
-
+            
             if (!token) {
-                seriesList.innerHTML = '<li class="series-item" style="justify-content: center; color: #E50914;">Authentication token not found in URL.</li>';
+                seriesList.innerHTML = '<li class="series-item" style="justify-content: center;"><span class="error-message">Authentication token not found in URL.</span></li>';
                 generateBtn.disabled = true;
                 return;
             }
-
+            
             try {
-                // Use the token from the URL for the Bearer authentication header.
+                // Use the token from the URL for the Bearer authentication header
                 const response = await fetch(`${apiBaseUrl}/users/me`, {
                     headers: { 'Authorization': `Bearer ${token}` }
                 });
-
+                
                 if (!response.ok) {
                     throw new Error('Failed to fetch user data. Your session may have expired.');
                 }
-
+                
                 const userData = await response.json();
                 const history = userData.watch_history_detailed;
                 const uniqueSeries = [...new Set(Object.values(history).map(show => show.title))].sort();
-
+                
                 if (uniqueSeries.length === 0) {
-                    seriesList.innerHTML = '<li class="series-item" style="justify-content: center;">No watched series found.</li>';
+                    seriesList.innerHTML = '<li class="series-item" style="justify-content: center;"><span class="empty-state">No watched series found.</span></li>';
                     return;
                 }
-
+                
                 uniqueSeries.forEach(title => {
                     const listItem = document.createElement('li');
                     listItem.className = 'series-item';
-                    listItem.innerHTML = `<input type="checkbox" id="${title}" name="series" value="${title}"><label for="${title}">${title}</label>`;
+                    listItem.innerHTML = `
+                        <div class="custom-checkbox">
+                            <input type="checkbox" id="${title}" name="series" value="${title}">
+                            <div class="checkbox-visual"></div>
+                        </div>
+                        <label for="${title}">${title}</label>
+                    `;
+                    
+                    // Add click handler for the entire item
+                    listItem.addEventListener('click', (e) => {
+                        if (e.target.tagName !== 'INPUT') {
+                            const checkbox = listItem.querySelector('input[type="checkbox"]');
+                            checkbox.checked = !checkbox.checked;
+                            checkbox.dispatchEvent(new Event('change'));
+                        }
+                    });
+                    
+                    // Add change handler for checkbox
+                    const checkbox = listItem.querySelector('input[type="checkbox"]');
+                    checkbox.addEventListener('change', () => {
+                        if (checkbox.checked) {
+                            listItem.classList.add('selected');
+                        } else {
+                            listItem.classList.remove('selected');
+                        }
+                    });
+                    
                     seriesList.appendChild(listItem);
                 });
-
+                
                 generateBtn.disabled = false;
-
+                
             } catch (error) {
-                seriesList.innerHTML = `<li class="series-item" style="justify-content: center; color: #E50914;">${error.message}</li>`;
+                seriesList.innerHTML = `<li class="series-item" style="justify-content: center;"><span class="error-message">${error.message}</span></li>`;
             }
-
+            
             document.getElementById('downloadForm').addEventListener('submit', (e) => {
                 e.preventDefault();
                 loadingOverlay.style.display = 'flex';
-
+                
                 const selectedSeries = Array.from(document.querySelectorAll('input[name="series"]:checked')).map(cb => cb.value);
-
+                
                 if (selectedSeries.length === 0) {
                     alert('Please select at least one series.');
                     loadingOverlay.style.display = 'none';
                     return;
                 }
-
+                
                 const queryString = new URLSearchParams({ series_titles: selectedSeries.join(',') }).toString();
                 
-                // Construct the download URL, passing the token as a query parameter as required by the /generate-zip endpoint.
+                // Construct the download URL, passing the token as a query parameter
                 const downloadUrl = `${apiBaseUrl}/generate-zip?${queryString}&token=${token}`;
                 
                 window.open(downloadUrl, '_blank');
                 
-                setTimeout(() => { loadingOverlay.style.display = 'none'; }, 3000);
+                setTimeout(() => { 
+                    loadingOverlay.style.display = 'none'; 
+                }, 3000);
             });
         });
     </script>