Main functions

2025-10-26 14:44:10 +09:00
parent 6ff35e26f4
commit 291fc63a4c
901 changed files with 79783 additions and 201383 deletions
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -10,6 +10,102 @@ document.addEventListener('DOMContentLoaded', function() {
        });
    }
    
+    // Theme Management
+    const themeToggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    const slider = document.querySelector('.theme-toggle-slider');
+    const sunIcon = document.querySelector('.theme-sun-icon');
+    const moonIcon = document.querySelector('.theme-moon-icon');
+    
+    // Get current theme from server or localStorage
+    const serverTheme = html.classList.contains('dark') ? 'dark' : 'light';
+    const localTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    // Priority: localStorage > server > system preference
+    const currentTheme = localTheme || serverTheme || (prefersDark ? 'dark' : 'light');
+    
+    console.log('Theme initialization:', { serverTheme, localTheme, prefersDark, currentTheme });
+    
+    // Apply theme and update toggle with smooth animation
+    function applyTheme(isDark, animate = false) {
+        console.log('Applying theme:', isDark ? 'dark' : 'light', 'animate:', animate);
+        
+        if (isDark) {
+            html.classList.add('dark');
+            if (themeToggle) themeToggle.checked = true;
+            if (slider) {
+                // Расчет: ширина контейнера (56px) - ширина ползунка (20px) - отступы (8px) = 28px движения
+                slider.style.transform = 'translateX(28px)';
+            }
+            if (sunIcon && moonIcon && animate) {
+                // Animated transition to dark
+                sunIcon.style.transform = 'rotate(180deg) scale(0)';
+                sunIcon.style.opacity = '0';
+                moonIcon.style.transform = 'rotate(0deg) scale(1)';
+                moonIcon.style.opacity = '1';
+            } else if (sunIcon && moonIcon) {
+                // Instant set for initial load
+                sunIcon.style.transform = 'rotate(180deg) scale(0)';
+                sunIcon.style.opacity = '0';
+                moonIcon.style.transform = 'rotate(0deg) scale(1)';
+                moonIcon.style.opacity = '1';
+            }
+        } else {
+            html.classList.remove('dark');
+            if (themeToggle) themeToggle.checked = false;
+            if (slider) {
+                slider.style.transform = 'translateX(0)';
+            }
+            if (sunIcon && moonIcon && animate) {
+                // Animated transition to light
+                moonIcon.style.transform = 'rotate(-180deg) scale(0)';
+                moonIcon.style.opacity = '0';
+                sunIcon.style.transform = 'rotate(0deg) scale(1)';
+                sunIcon.style.opacity = '1';
+            } else if (sunIcon && moonIcon) {
+                // Instant set for initial load
+                moonIcon.style.transform = 'rotate(-180deg) scale(0)';
+                moonIcon.style.opacity = '0';
+                sunIcon.style.transform = 'rotate(0deg) scale(1)';
+                sunIcon.style.opacity = '1';
+            }
+        }
+    }
+    
+    // Initial theme application (без анимации при загрузке)
+    applyTheme(currentTheme === 'dark', false);
+    
+    // Theme toggle handler
+    function toggleTheme() {
+        const isDark = html.classList.contains('dark');
+        const newTheme = isDark ? 'light' : 'dark';
+        
+        console.log('Toggling theme from', isDark ? 'dark' : 'light', 'to', newTheme);
+        
+        applyTheme(!isDark, true); // С анимацией при клике
+        localStorage.setItem('theme', newTheme);
+        
+        // Send to server
+        fetch(`/theme/${newTheme}`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json'
+            }
+        }).then(response => response.json())
+          .then(data => console.log('Theme synced to server:', data))
+          .catch(error => {
+            console.warn('Theme sync failed:', error);
+        });
+    }
+    
+    if (themeToggle) {
+        themeToggle.addEventListener('change', toggleTheme);
+        console.log('Theme toggle listener attached');
+    } else {
+        console.warn('Theme toggle element not found');
+    }
+    
    // Mobile Navigation Toggle
    const mobileMenuButton = document.querySelector('.mobile-menu-button');
    const mobileMenu = document.querySelector('.mobile-menu');