Update main.py

main.py

@@ -315,39 +315,34 @@ def proxy(path):
             style_tag = soup.new_tag('style')
             style_tag.string = '''
                 :root {
-                    /* Light theme (default) */
+                    /* Light mode variables */
                     --primary-gradient: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
                     --hover-gradient: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
                     --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
                     --card-shadow: 0 8px 20px rgba(0,0,0,0.08);
                     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                     --text-color: #2c3e50;
+                    --bg-color: var(--bg-gradient);
                     --card-bg: rgba(255, 255, 255, 0.98);
                     --card-border: rgba(255, 255, 255, 0.8);
                     --table-border: rgba(236, 240, 241, 0.8);
-                    --table-row-even: rgba(245, 247, 250, 0.5);
-                    --modal-bg: rgba(0, 0, 0, 0.9);
-                    --modal-text: #f1f1f1;
-                    --zoom-btn-bg: rgba(255, 255, 255, 0.2);
-                    --zoom-btn-border: rgba(255, 255, 255, 0.4);
-                    --zoom-btn-color: white;
+                    --table-even-row: rgba(245, 247, 250, 0.5);
+                    --hr-color: rgba(44, 62, 80, 0.2);
                 }
                 
+                /* Dark mode variables */
                 [data-theme="dark"] {
                     --primary-gradient: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
                     --hover-gradient: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
                     --bg-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
                     --card-shadow: 0 8px 20px rgba(0,0,0,0.2);
                     --text-color: #e2e8f0;
+                    --bg-color: var(--bg-gradient);
                     --card-bg: rgba(30, 41, 59, 0.98);
                     --card-border: rgba(30, 41, 59, 0.8);
                     --table-border: rgba(51, 65, 85, 0.8);
-                    --table-row-even: rgba(30, 41, 59, 0.5);
-                    --modal-bg: rgba(0, 0, 0, 0.95);
-                    --modal-text: #f1f1f1;
-                    --zoom-btn-bg: rgba(30, 41, 59, 0.4);
-                    --zoom-btn-border: rgba(51, 65, 85, 0.6);
-                    --zoom-btn-color: #e2e8f0;
+                    --table-even-row: rgba(30, 41, 59, 0.5);
+                    --hr-color: rgba(226, 232, 240, 0.2);
                 }
                 body { 
                     font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
@@ -355,9 +350,10 @@ def proxy(path):
                     padding: 30px;
                     max-width: 1400px;
                     margin: 0 auto;
-                    background: var(--bg-gradient);
-                    color: #2c3e50;
+                    background: var(--bg-color);
+                    color: var(--text-color);
                     min-height: 100vh;
+                    transition: background 0.3s ease, color 0.3s ease;
                 }
                 .breadcrumb {
                     display: flex;
@@ -365,12 +361,12 @@ def proxy(path):
                     gap: 15px;
                     align-items: center;
                     padding: 20px;
-                    background: rgba(255, 255, 255, 0.98);
+                    background: var(--card-bg);
                     border-radius: 16px;
                     box-shadow: var(--card-shadow);
                     margin-bottom: 30px;
                     backdrop-filter: blur(10px);
-                    border: 1px solid rgba(255, 255, 255, 0.8);
+                    border: 1px solid var(--card-border);
                 }
                 .breadcrumb a {
                     text-decoration: none;
@@ -402,12 +398,12 @@ def proxy(path):
                     margin: 30px 0;
                 }
                 li {
-                    background: rgba(255, 255, 255, 0.98);
+                    background: var(--card-bg);
                     border-radius: 16px;
                     overflow: hidden;
                     transition: var(--transition);
                     box-shadow: var(--card-shadow);
-                    border: 1px solid rgba(255, 255, 255, 0.8);
+                    border: 1px solid var(--card-border);
                 }
                 li:hover {
                     transform: translateY(-5px);
@@ -417,10 +413,10 @@ def proxy(path):
                     display: block;
                     padding: 20px;
                     text-decoration: none;
-                    color: #2c3e50;
+                    color: var(--text-color);
                     font-weight: 500;
                     transition: var(--transition);
-                    background: rgba(255, 255, 255, 0.98);
+                    background: var(--card-bg);
                 }
                 li a:hover {
                     background: var(--primary-gradient);
@@ -430,21 +426,21 @@ def proxy(path):
                     width: 100%;
                     border-collapse: separate;
                     border-spacing: 0;
-                    background: rgba(255, 255, 255, 0.98);
+                    background: var(--card-bg);
                     border-radius: 16px;
                     overflow: hidden;
                     box-shadow: var(--card-shadow);
                     margin: 30px 0;
                     backdrop-filter: blur(10px);
-                    border: 1px solid rgba(255, 255, 255, 0.8);
+                    border: 1px solid var(--card-border);
                 }
                 td {
                     padding: 20px;
-                    border: 1px solid rgba(236, 240, 241, 0.8);
+                    border: 1px solid var(--table-border);
                     transition: var(--transition);
                 }
                 tr:nth-child(even) {
-                    background: rgba(245, 247, 250, 0.5);
+                    background: var(--table-even-row);
                 }
                 tr:hover {
                     background: var(--bg-gradient);
@@ -484,7 +480,7 @@ def proxy(path):
                 hr {
                     border: none;
                     height: 1px;
-                    background: linear-gradient(to right, transparent, rgba(44, 62, 80, 0.2), transparent);
+                    background: linear-gradient(to right, transparent, var(--hr-color), transparent);
                     margin: 30px 0;
                 }
                 .modal {
@@ -502,6 +498,10 @@ def proxy(path):
                     transition: opacity 0.3s ease;
                 }
                 
+                [data-theme="dark"] .modal {
+                    background: rgba(0, 0, 0, 0.95);
+                }
+                
                 .modal.show {
                     opacity: 1;
                 }
@@ -605,6 +605,67 @@ def proxy(path):
                     soup.append(html_tag)
             soup.head.append(style_tag)
             
+            # Add dark mode toggle button
+            dark_mode_toggle = soup.new_tag('div')
+            dark_mode_toggle['id'] = 'dark-mode-toggle'
+            dark_mode_toggle['class'] = 'theme-toggle'
+            dark_mode_toggle['style'] = 'position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; align-items: center; gap: 10px; background: var(--card-bg); padding: 10px 15px; border-radius: 30px; box-shadow: var(--card-shadow); cursor: pointer; transition: var(--transition);'
+            
+            toggle_icon = soup.new_tag('span')
+            toggle_icon['class'] = 'toggle-icon'
+            toggle_icon['style'] = 'font-size: 18px;'
+            toggle_icon.string = '🌙'
+            
+            toggle_text = soup.new_tag('span')
+            toggle_text['class'] = 'toggle-text'
+            toggle_text.string = 'Тёмный режим'
+            
+            dark_mode_toggle.append(toggle_icon)
+            dark_mode_toggle.append(toggle_text)
+            
+            if soup.body:
+                soup.body.insert(0, dark_mode_toggle)
+            
+            # Add dark mode toggle script
+            dark_mode_script = soup.new_tag('script')
+            dark_mode_script.string = '''
+                document.addEventListener('DOMContentLoaded', function() {
+                    const toggle = document.getElementById('dark-mode-toggle');
+                    const toggleIcon = toggle.querySelector('.toggle-icon');
+                    const toggleText = toggle.querySelector('.toggle-text');
+                    const htmlElement = document.documentElement;
+                    
+                    // Check for saved theme preference or use user's system preference
+                    const savedTheme = localStorage.getItem('theme');
+                    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    
+                    // Apply theme based on saved preference or system preference
+                    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                        htmlElement.setAttribute('data-theme', 'dark');
+                        toggleIcon.textContent = '☀️';
+                        toggleText.textContent = 'Светлый режим';
+                    }
+                    
+                    // Toggle theme when button is clicked
+                    toggle.addEventListener('click', function() {
+                        if (htmlElement.getAttribute('data-theme') === 'dark') {
+                            htmlElement.removeAttribute('data-theme');
+                            toggleIcon.textContent = '🌙';
+                            toggleText.textContent = 'Тёмный режим';
+                            localStorage.setItem('theme', 'light');
+                        } else {
+                            htmlElement.setAttribute('data-theme', 'dark');
+                            toggleIcon.textContent = '☀️';
+                            toggleText.textContent = 'Светлый режим';
+                            localStorage.setItem('theme', 'dark');
+                        }
+                    });
+                });
+            '''
+            
+            if soup.body:
+                soup.body.append(dark_mode_script)
+            
             # Convert navigation links to breadcrumb
             nav_links = soup.find_all('a', href=True)
             breadcrumb_div = soup.new_tag('div')