增加暗色模式切换

2026-01-28 11:20:00 +08:00
parent a5dc5841fb
commit 2e85bbe7c7
10 changed files with 6491 additions and 209 deletions
--- a/static/login.html
+++ b/static/login.html
@@ -4,7 +4,38 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNS服务器控制台 - 登录</title>
+    <!-- Font Awesome -->
+    <link href="css/font-awesome.min.css" rel="stylesheet">
    <style>
+        /* CSS变量定义 */
+        :root {
+            --bg-primary: #f5f7fa;
+            --bg-secondary: #ffffff;
+            --text-primary: #333333;
+            --text-secondary: #555555;
+            --text-muted: #7f8c8d;
+            --border-color: #e1e5e9;
+            --primary-color: #3498db;
+            --primary-hover: #2980b9;
+            --error-bg: #fee;
+            --error-text: #c00;
+            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .dark {
+            --bg-primary: #1a1a1a;
+            --bg-secondary: #2d2d2d;
+            --text-primary: #e2e8f0;
+            --text-secondary: #a0aec0;
+            --text-muted: #718096;
+            --border-color: #4a5568;
+            --primary-color: #4299e1;
+            --primary-hover: #3182ce;
+            --error-bg: #742a2a;
+            --error-text: #fed7d7;
+            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
        * {
            margin: 0;
            padding: 0;
@@ -13,21 +44,47 @@

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: #f5f7fa;
+            background-color: var(--bg-primary);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
-            color: #333;
+            color: var(--text-primary);
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        /* 主题切换按钮 */
+        #theme-toggle {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--text-primary);
+            box-shadow: var(--shadow);
+            transition: all 0.3s ease;
+        }
+
+        #theme-toggle:hover {
+            background: var(--primary-color);
+            color: white;
        }

        .login-container {
-            background-color: white;
+            background-color: var(--bg-secondary);
            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: var(--shadow);
            padding: 40px;
            width: 100%;
            max-width: 400px;
+            transition: all 0.3s ease;
        }

        .login-header {
@@ -37,12 +94,12 @@

        .login-header h1 {
            font-size: 24px;
-            color: #2c3e50;
+            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .login-header p {
-            color: #7f8c8d;
+            color: var(--text-muted);
            font-size: 14px;
        }

@@ -54,28 +111,30 @@
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
-            color: #555;
+            color: var(--text-secondary);
        }

        .form-group input {
            width: 100%;
            padding: 12px;
-            border: 1px solid #e1e5e9;
+            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
-            border-color: #3498db;
-            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        }

        .btn {
            width: 100%;
            padding: 12px;
-            background-color: #3498db;
+            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
@@ -86,7 +145,7 @@
        }

        .btn:hover {
-            background-color: #2980b9;
+            background-color: var(--primary-hover);
        }

        .btn:active {
@@ -94,8 +153,8 @@
        }

        .error-message {
-            background-color: #fee;
-            color: #c00;
+            background-color: var(--error-bg);
+            color: var(--error-text);
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 20px;
@@ -111,6 +170,11 @@
    </style>
 </head>
 <body>
+    <!-- 主题切换按钮 -->
+    <button id="theme-toggle" class="theme-toggle-btn">
+        <i class="fa fa-moon-o"></i>
+    </button>
+    
    <div class="login-container">
        <div class="login-header">
            <h1>DNS服务器控制台</h1>
@@ -135,59 +199,106 @@
    </div>

    <script>
-        document.getElementById('loginForm').addEventListener('submit', function(e) {
-            e.preventDefault();
+        // 主题切换功能
+        function initThemeToggle() {
+            const themeToggleBtn = document.getElementById('theme-toggle');
+            if (!themeToggleBtn) return;
            
-            const username = document.getElementById('username').value;
-            const password = document.getElementById('password').value;
-            const loginBtn = document.getElementById('loginBtn');
-            const errorMessage = document.getElementById('errorMessage');
+            // 初始化主题
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme === 'dark') {
+                document.documentElement.classList.add('dark');
+                updateThemeIcon(true);
+            }
            
-            // 显示加载状态
-            loginBtn.textContent = '登录中...';
-            loginBtn.classList.add('loading');
-            errorMessage.style.display = 'none';
+            // 添加主题切换事件监听器
+            themeToggleBtn.addEventListener('click', toggleTheme);
+        }
+
+        // 切换主题
+        function toggleTheme() {
+            const isDark = document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            updateThemeIcon(isDark);
+        }
+
+        // 更新主题图标
+        function updateThemeIcon(isDark) {
+            const themeToggleBtn = document.getElementById('theme-toggle');
+            if (!themeToggleBtn) return;
            
-            // 发送登录请求
-            fetch('/api/login', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    username: username,
-                    password: password
+            const icon = themeToggleBtn.querySelector('i');
+            if (isDark) {
+                icon.classList.remove('fa-moon-o');
+                icon.classList.add('fa-sun-o');
+            } else {
+                icon.classList.remove('fa-sun-o');
+                icon.classList.add('fa-moon-o');
+            }
+        }
+
+        // 初始化登录表单
+        function initLoginForm() {
+            document.getElementById('loginForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                
+                const username = document.getElementById('username').value;
+                const password = document.getElementById('password').value;
+                const loginBtn = document.getElementById('loginBtn');
+                const errorMessage = document.getElementById('errorMessage');
+                
+                // 显示加载状态
+                loginBtn.textContent = '登录中...';
+                loginBtn.classList.add('loading');
+                errorMessage.style.display = 'none';
+                
+                // 发送登录请求
+                fetch('/api/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        username: username,
+                        password: password
+                    })
                })
-            })
-            .then(response => {
-                if (!response.ok) {
-                    if (response.status === 401) {
-                        throw new Error('未知用户名或密码');
-                    } else {
-                        throw new Error('登录失败');
+                .then(response => {
+                    if (!response.ok) {
+                        if (response.status === 401) {
+                            throw new Error('未知用户名或密码');
+                        } else {
+                            throw new Error('登录失败');
+                        }
                    }
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.status === 'success') {
-                    // 登录成功，重定向到主页
-                    window.location.href = '/';
-                } else {
-                    if (data.error === '用户名或密码错误') {
-                        throw new Error('未知用户名或密码');
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.status === 'success') {
+                        // 登录成功，重定向到主页
+                        window.location.href = '/';
                    } else {
-                        throw new Error(data.error || '登录失败');
+                        if (data.error === '用户名或密码错误') {
+                            throw new Error('未知用户名或密码');
+                        } else {
+                            throw new Error(data.error || '登录失败');
+                        }
                    }
-                }
-            })
-            .catch(error => {
-                // 显示错误信息
-                errorMessage.textContent = error.message;
-                errorMessage.style.display = 'block';
-                loginBtn.textContent = '登录';
-                loginBtn.classList.remove('loading');
+                })
+                .catch(error => {
+                    // 显示错误信息
+                    errorMessage.textContent = error.message;
+                    errorMessage.style.display = 'block';
+                    loginBtn.textContent = '登录';
+                    loginBtn.classList.remove('loading');
+                });
            });
+        }
+
+        // 页面加载完成后初始化
+        window.addEventListener('DOMContentLoaded', function() {
+            initThemeToggle();
+            initLoginForm();
        });
    </script>
 </body>