fix: 优化关于链接样式，使用flex布局实现图标与文字垂直居中

fix: 修复考试时间显示逻辑，优化剩余时间格式，调整样式
chore: examconfig
2025-04-29 19:16:33 +00:00 · 2025-04-23 22:46:33 +00:00 · 2025-04-23 15:08:35 +00:00 · 2025-04-23 17:12:17 +08:00 · 2025-04-22 15:17:43 +00:00 · 2025-04-22 15:09:00 +00:00
29 changed files with 4229 additions and 291 deletions
--- a/README.md
+++ b/README.md
@ -26,14 +26,6 @@
 配置完成后点击保存按钮，设置将会保存到浏览器的Cookie中，并立即生效。
 ### 编辑消息
 点击编辑消息按钮可以打开消息编辑窗口，进行以下操作：
 - **消息内容**：用于临时编辑显示的消息。
 编辑完成后点击保存按钮，消息将会保存到浏览器的Cookie中，并立即生效（3天内有效）。
 ## 软件截图
 ### 主界面
@ -54,7 +46,7 @@
 ## 如何部署？
- 您可以点击查看 [ExamShowboard网页端部署教程文档](https://docs.examaware.tech/web/web-deploy.html)了解详细的部署教程。
+ 您可以点击查看 [部署教程](https://docs.examaware.tech/app/web/web-deploy.html)了解详细的部署教程。
 > [!WARNING]
 >
--- a/about/index.html
+++ b/about/index.html
@ -0,0 +1,212 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于 ExamSchedule</title>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
            background: #2C2B30;
            margin: 0;
            font-family: 'Google Sans', 'Roboto', sans-serif;
            color: #E6E1E5;
            padding: 40px;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeInUp 1s ease-in-out;
        }
        h1 {
            color: #E6E1E5;
            font-size: 48px;
            margin-bottom: 30px;
            font-weight: 500;
        }
        .section {
            background: #49454F;
            padding: 24px;
            border-radius: 16px;
            margin-bottom: 24px;
        }
        h2 {
            color: #E6E1E5;
            font-size: 24px;
            margin-top: 0;
        }
        .feature-list {
            list-style: none;
            padding: 0;
        }
        .feature-list li {
            margin-bottom: 12px;
            display: flex;
            align-items: center; /* 修改为center，保证图标和文字垂直居中 */
        }
        .feature-list .material-icons {
            margin-right: 12px;
            color: #D0BCFF;
            flex-shrink: 0; /* 防止图标被压缩 */
            align-self: center; /* 保证图标始终居中 */
        }
        .back-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            color: #E6E1E5;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 100px;
            background-color: #49454F;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .back-btn:hover {
            background-color: #605D64;
            transform: translateY(-2px);
        }
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        #license-content {
            font-size: 0.9em;
            color: #CAC4D0;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
            padding: 16px;
            background: #1C1B1F;
            border-radius: 8px;
            scrollbar-width: thin;
            scrollbar-color: #49454F #1C1B1F;
        }
        #license-content::-webkit-scrollbar {
            width: 8px;
        }
        #license-content::-webkit-scrollbar-track {
            background: #1C1B1F;
            border-radius: 8px;
        }
        #license-content::-webkit-scrollbar-thumb {
            background-color: #49454F;
            border-radius: 8px;
            border: 2px solid #1C1B1F;
        }
        #license-content::-webkit-scrollbar-thumb:hover {
            background-color: #605D64;
        }
    </style>
 </head>
 <body>
    <a href="../" class="back-btn">
        <span class="material-icons">arrow_back</span>
        返回
    </a>
    <div class="container">
        <h1>关于 ExamSchedule</h1>
        <div class="section">
            <h2>功能特点</h2>
            <ul class="feature-list">
                <li>
                    <span class="material-icons">dashboard</span>
                    <div>
                        <strong>考试看板</strong>
                        <ul>
                            <li>实时显示当前时间、考试科目、时间及状态</li>
                            <li>支持全屏显示</li>
                            <li>支持设置时间偏移和考场信息</li>
                            <li>支持临时编辑消息</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <span class="material-icons">schedule</span>
                    <div>
                        <strong>时间广播</strong>
                        <ul>
                            <li>支持自定义广播配置</li>
                            <li>支持打开本地json配置</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="section">
            <h2>部署说明</h2>
            <p>您可以访问 <a href="https://docs.examaware.tech/app/web/web-deploy.html" style="color: #D0BCFF;">部署教程</a> 了解详细的部署方法。</p>
            <p>注意：广播与看板的配置文件是分开存储于两个文件夹之下的。</p>
        </div>
        <div class="section">
            <h2>开发信息</h2>
            <ul class="feature-list">
                <li>
                    <span class="material-icons">code</span>
                    <div>主分支 (main) 提供稳定版本</div>
                </li>
                <li>
                    <span class="material-icons">bug_report</span>
                    <div>开发分支 (dev) 进行新功能开发</div>
                </li>
            </ul>
        </div>
        <div class="section">
            <h2>许可证</h2>
            <ul class="feature-list">
                <li>
                    <span class="material-icons" style="font-size:24px;">gavel</span>
                    <div>
                        <p>本项目采用 GNU General Public License v3.0</p>
                        <pre id="license-content" style="font-size: 0.9em; color: #CAC4D0; white-space: pre-wrap; max-height: 400px; overflow-y: auto; padding: 16px; background: #1C1B1F; border-radius: 8px;">正在加载许可证内容...</pre>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        // 加载LICENSE文件内容
        fetch('../LICENSE')
            .then(response => response.text())
            .then(content => {
                document.getElementById('license-content').textContent = content;
            })
            .catch(error => {
                document.getElementById('license-content').textContent = '加载许可证内容失败：' + error;
            });
    </script>
 </body>
 </html>
--- a/doc/es.png
+++ b/doc/es.png
--- a/doc/exam.png
+++ b/doc/exam.png
--- a/doc/notification.png
+++ b/doc/notification.png
--- a/doc/time.png
+++ b/doc/time.png
--- a/exam/Scripts/examInfo.js
+++ b/exam/Scripts/examInfo.js
@ -8,7 +8,33 @@ document.addEventListener("DOMContentLoaded", () => {
    const statusElem = document.getElementById("status");
    const examTableBodyElem = document.getElementById("exam-table-body");
    const roomElem = document.getElementById("room");
    const infoToggleBtn = document.getElementById("info-toggle-btn");
    const paperInfoElem = document.getElementById("paper-info");
    const examPapersElem = document.getElementById("exam-papers");
    const answerSheetsElem = document.getElementById("answer-sheets");
    let offsetTime = getCookie("offsetTime") || 0;
    let showPaperInfo = getCookie("showPaperInfo") === "true";
    let autoToggle = getCookie("autoToggle") === "true";
    // 初始化显示状态
    if (showPaperInfo) {
        paperInfoElem.style.display = "block";
    }
    // 更新显示内容
    function updateDisplay(isExamTime) {
        if (autoToggle) {
            paperInfoElem.style.display = isExamTime ? "block" : "none";
        }
    }
    infoToggleBtn.addEventListener("click", () => {
        if (!autoToggle) {
            showPaperInfo = !showPaperInfo;
            paperInfoElem.style.display = showPaperInfo ? "block" : "none";
            setCookie("showPaperInfo", showPaperInfo, 365);
        }
    });
    function fetchData() {
        // 优先使用本地配置
@ -24,7 +50,7 @@ document.addEventListener("DOMContentLoaded", () => {
                return Promise.resolve();
            } catch (error) {
                localStorage.removeItem('localExamConfig');
-                errorSystem.show('本地配置无效，已切换至默认配置');
+                errorSystem.show('本地配置无效，已清除并切换至默认配置');
            }
        }
@ -82,41 +108,105 @@ document.addEventListener("DOMContentLoaded", () => {
                }
            });
            // 清空原有内容
            if (paperInfoElem) paperInfoElem.style.display = showPaperInfo ? "block" : "none";
            if (currentExam) {
-                currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
+                const currentStatus = `当前科目: ${currentExam.name}`;
                currentSubjectElem.textContent = currentStatus;
                paperInfoElem.style.display = showPaperInfo ? "block" : "none";
                // 加载本地存储的页数信息
                if (showPaperInfo) {
                    // 加载本地保存的页数信息
                    const paperCount = document.getElementById('paper-count');
                    const paperPages = document.getElementById('paper-pages');
                    const sheetCount = document.getElementById('sheet-count');
                    const sheetPages = document.getElementById('sheet-pages');
                    if (paperCount && paperPages && sheetCount && sheetPages) {
                        try {
                            const savedInfo = localStorage.getItem('paperInfo');
                            if (savedInfo) {
                                const info = JSON.parse(savedInfo);
                                paperCount.value = info.paperCount || 0;
                                paperPages.value = info.paperPages || 0;
                                sheetCount.value = info.sheetCount || 0;
                                sheetPages.value = info.sheetPages || 0;
                            }
                        } catch (e) {
                            console.error('加载页数信息失败:', e);
                        }
                    }
                }
                if (examTimingElem) {
                    examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
                }
                const remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
                const remainingHours = Math.floor(remainingTime / 3600);
                const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
                const remainingSeconds = Math.floor(remainingTime % 60);
-                const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
+                let remainingTimeText = '';
-
+                    if (remainingHours > 0) {
-                if (remainingHours === 0 && remainingMinutes <= 14) {
+                        remainingTimeText = `${remainingHours}时 ${String(remainingMinutes).padStart(2, '0')}分 ${String(remainingSeconds).padStart(2, '0')}秒`;
                    remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
                    remainingTimeElem.style.color = "red";
                    remainingTimeElem.style.fontWeight = "bold";
                    statusElem.textContent = "状态: 即将结束";
                    statusElem.style.color = "red";
                    } else {
                        remainingTimeText = `${String(remainingMinutes).padStart(2, '0')}分 ${String(remainingSeconds).padStart(2, '0')}秒`;
                    }
                if (remainingHours === 0 && remainingMinutes <= 14) {
                    if (remainingTimeElem) {
                        remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
                        remainingTimeElem.style.color = "#93b4f7";
                        remainingTimeElem.style.fontWeight = "normal";
                    }
                    if (statusElem) {
                        statusElem.textContent = "状态: 即将结束";
                        statusElem.style.color = "red";
                    }
                    // 在剩余15分钟时显示提醒
                    if (remainingMinutes === 14 && remainingSeconds === 59) {
                        const overlay = document.getElementById('reminder-overlay');
                        if (overlay) {
                            overlay.classList.add('show');
                            setTimeout(() => {
                                overlay.classList.remove('show');
                            }, 5000);
                        }
                    }
                } else {
                    if (remainingTimeElem) {
                        remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
                        remainingTimeElem.style.color = "#93b4f7";
                        remainingTimeElem.style.fontWeight = "normal";
                    }
                    if (statusElem) {
                        statusElem.textContent = "状态: 进行中";
                        statusElem.style.color = "#5ba838";
                    }
-            } else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
+                }
-                const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
+            } else {
-                currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
+                updateDisplay(false);
-                examTimingElem.textContent = "";
+                if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
-                remainingTimeElem.textContent = ``;
+                    if (currentSubjectElem) currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
                    if (examTimingElem) examTimingElem.textContent = "";
                    if (remainingTimeElem) remainingTimeElem.textContent = "";
                    if (statusElem) {
                        statusElem.textContent = "状态: 已结束";
                        statusElem.style.color = "red";
                    }
                } else if (nextExam) {
                    const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
                    const remainingHours = Math.floor(timeUntilStart / 3600);
                    const remainingMinutes = Math.floor((timeUntilStart % 3600) / 60);
                    const remainingSeconds = Math.floor(timeUntilStart % 60);
-                const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
+                    let remainingTimeText = '';
                    if (remainingHours > 0) {
                        remainingTimeText = `${remainingHours}时 ${String(remainingMinutes).padStart(2, '0')}分 ${String(remainingSeconds).padStart(2, '0')}秒`;
                    } else {
                        remainingTimeText = `${String(remainingMinutes).padStart(2, '0')}分 ${String(remainingSeconds).padStart(2, '0')}秒`;
                    }
                    if (timeUntilStart <= 15 * 60) {
                        currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
@ -135,11 +225,18 @@ document.addEventListener("DOMContentLoaded", () => {
                    examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
                } else {
                    if (currentSubjectElem) {
                        currentSubjectElem.textContent = "考试均已结束";
-                examTimingElem.textContent = "";
+                        currentSubjectElem.style.color = "#aaaaaa";
-                remainingTimeElem.textContent = "";
+                        currentSubjectElem.style.textAlign = "center";
-                statusElem.textContent = "状态: 空闲";
+                    }
-                statusElem.style.color = "#3946AF";
+                    if (examTimingElem) examTimingElem.textContent = "";
                    if (remainingTimeElem) remainingTimeElem.textContent = "";
                    if (statusElem) {
                        statusElem.textContent = " ";
                        statusElem.style.color = "#000000";
                    }
                }
            }
            examTableBodyElem.innerHTML = "";
@ -208,9 +305,66 @@ document.addEventListener("DOMContentLoaded", () => {
                });
            });
        } catch (e) {
            console.error('更新考试信息失败:', e);
            errorSystem.show('更新考试信息失败: ' + e.message);
        }
    }
    // 添加页数控制处理
    document.querySelectorAll('.count-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const target = document.getElementById(btn.dataset.target);
            const action = btn.dataset.action;
            const currentValue = parseInt(target.value) || 0;
            if (action === 'increase') {
                target.value = currentValue + 1;
            } else if (action === 'decrease' && currentValue > 0) {
                target.value = currentValue - 1;
            }
            // 保存到localStorage
            updatePaperInfo();
        });
    });
    // 监听输入框直接输入
    ['paper-count', 'paper-pages', 'sheet-count', 'sheet-pages'].forEach(id => {
        const input = document.getElementById(id);
        input.addEventListener('change', () => {
            const value = parseInt(input.value) || 0;
            input.value = Math.max(0, value); // 确保不小于0
            updatePaperInfo();
        });
    });
    function updatePaperInfo() {
        const paperInfo = {
            paperCount: parseInt(document.getElementById('paper-count').value) || 0,
            paperPages: parseInt(document.getElementById('paper-pages').value) || 0,
            sheetCount: parseInt(document.getElementById('sheet-count').value) || 0,
            sheetPages: parseInt(document.getElementById('sheet-pages').value) || 0
        };
        localStorage.setItem('paperInfo', JSON.stringify(paperInfo));
    }
    // 初始化加载保存的页数信息
    function loadPaperInfo() {
        try {
            const savedInfo = localStorage.getItem('paperInfo');
            if (savedInfo) {
                const info = JSON.parse(savedInfo);
                document.getElementById('paper-count').value = info.paperCount || 0;
                document.getElementById('paper-pages').value = info.paperPages || 0;
                document.getElementById('sheet-count').value = info.sheetCount || 0;
                document.getElementById('sheet-pages').value = info.sheetPages || 0;
            }
        } catch (e) {
            console.error('加载页数信息失败:', e);
        }
    }
    loadPaperInfo();
    fetchData();
 });
--- a/exam/Scripts/settings.js
+++ b/exam/Scripts/settings.js
@ -11,21 +11,47 @@ document.addEventListener("DOMContentLoaded", () => {
    const themeLink = document.getElementById("theme-link");
    const configFileInput = document.getElementById("config-file");
    const clearConfigBtn = document.getElementById("clear-config-btn");
    const themeSelect = document.getElementById("theme-select");
    const autoToggle = document.getElementById("auto-toggle");
    let offsetTime = getCookie("offsetTime") || 0;
    let room = getCookie("room") || "";
    let zoomLevel = getCookie("zoomLevel") || 1;
    let currentTheme = getCookie("currentTheme") || "ealg";
    let theme = getCookie("theme") || "dark";
    let isAutoToggle = getCookie("autoToggle") || false;
    let themeConfig = [];
    offsetTime = parseInt(offsetTime);
    roomElem.textContent = room;
    autoToggle.checked = isAutoToggle === "true";
-    if (theme === "light") {
+    // 初始化主题
-        themeLink.href = "Styles/light.css";
+    const currentThemePath = `Styles/${currentTheme}/${theme}.css`;
-        themeToggle.checked = true;
+    themeLink.href = currentThemePath;
-    } else {
+    themeToggle.checked = theme === "light";
-        themeLink.href = "Styles/dark.css";
+
-        themeToggle.checked = false;
+    // 加载主题配置
    fetch('Styles/profile.json')
        .then(response => response.json())
        .then(data => {
            themeConfig = data.theme;
            // 填充主题选择下拉框
            themeConfig.forEach(theme => {
                const option = document.createElement('option');
                option.value = theme.path || theme.type;
                option.textContent = theme.name;
                themeSelect.appendChild(option);
            });
            themeSelect.value = currentTheme;
            updateThemeLink();
        })
        .catch(error => errorSystem.show('加载主题配置失败: ' + error.message));
    function updateThemeLink() {
        const themePath = currentTheme;
        const isDark = !themeToggle.checked;
        themeLink.href = `Styles/${themePath}/${isDark ? 'dark' : 'light'}.css`;
    }
    settingsBtn.addEventListener("click", () => {
@ -57,13 +83,17 @@ document.addEventListener("DOMContentLoaded", () => {
            room = roomInput.value;
            zoomLevel = parseFloat(zoomInput.value);
            theme = themeToggle.checked ? "light" : "dark";
            currentTheme = themeSelect.value;
            isAutoToggle = autoToggle.checked;
            setCookie("offsetTime", offsetTime, 365);
            setCookie("room", room, 365);
            setCookie("zoomLevel", zoomLevel, 365);
            setCookie("theme", theme, 365);
            setCookie("currentTheme", currentTheme, 365);
            setCookie("autoToggle", isAutoToggle, 365);
            roomElem.textContent = room;
            document.body.style.zoom = zoomLevel;
-            themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
+            updateThemeLink();
            settingsModal.classList.add("fade-out");
            setTimeout(() => {
                settingsModal.style.display = "none";
@ -76,9 +106,13 @@ document.addEventListener("DOMContentLoaded", () => {
        }
    });
    themeSelect.addEventListener("change", () => {
        currentTheme = themeSelect.value;
        updateThemeLink();
    });
    themeToggle.addEventListener("change", () => {
-        const theme = themeToggle.checked ? "light" : "dark";
+        updateThemeLink();
        themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
    });
    configFileInput.addEventListener("change", (event) => {
--- a/exam/Styles/ealg/dark.css
+++ b/exam/Styles/ealg/dark.css
@ -0,0 +1,670 @@
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    padding: 12px 24px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #404040; /* 修改为统一的灰色背景 */
    color: #E6E1E5; /* 按钮文字颜色 */
    border: none; /* 按钮边框样式 */
    border-radius: 20px; /* 按钮圆角大小 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #4A4A4A; /* 统一的灰色悬停背景 */
    transform: translateY(-1px); /* 悬停时向上移动 1px */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
 }
 body {
    font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    background: #121212;
    color: #E6E1E5;
    overflow: auto;
 }
 body::-webkit-scrollbar {
    display: none;
 }
 #fullscreen-btn, #settings-btn {
    position: absolute;
    top: 20px;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #404040;
    color: #E6E1E5;
    border: none;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
 }
 #fullscreen-btn::before {
    content: "fullscreen";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #settings-btn::before {
    content: "settings";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #fullscreen-btn {
    right: 20px;
 }
 #settings-btn {
    right: 140px;
 }
 #settings-btn:hover, #fullscreen-btn:hover {
    background-color: #4A4A4A;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 }
 .container {
    padding: 24px;
    max-width: 90%;
    margin: auto;
    background-color: #121212;
 }
 h1 {
    font-size: 3.5rem;
    font-weight: 400;
    text-align: left;
    margin-bottom: 16px;
    color: #E6E1E5;
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 #room {
    font-size: 3.5rem;
    font-weight: 400;
    color: #E6E1E5;
    margin-left: 20px;
 }
 #message {
    font-size: 1.8rem;
    color: #aaaaaa;
    margin-bottom: 24px;
 }
 .content {
    display: flex;
    justify-content: space-between;
    gap: 24px;
 }
 .left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
 }
 .left-column {
    width: 50%;
 }
 .right-column {
    width: 50%;
 }
 .clock-section, .info-section, .right-column {
    background-color: #212121;
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 }
 #current-time {
    font-size: 8rem;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    font-weight: 400;
 }
 #current-subject, #exam-timing, #remaining-time, #status {
    font-size: 3rem;
    margin: 16px 0;
    text-align: left;
    color: #FFFFFF;
 }
 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 24px;
    background-color: #212121;
    border-radius: 14px;
    overflow: hidden;
 }
 th, td {
    padding: 3px;
    font-size: 1.8rem;
    text-align: center;
    border-bottom: 1px solid #555555;
 }
 th {
    background-color: transparent;
    color: #FFFFFF;
    font-weight: 500;
 }
 tr:hover {
    background-color: #555555;
 }
 .exam-status-tag {
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 1.2rem;
    font-weight: 500;
 }
 .exam-status-进行中 {
    background-color: #263227;
    color: green;
 }
 .exam-status-即将开始 {
    background-color: #594300;
    color: #FFB960;
 }
 .exam-status-已结束 {
    background-color: #3a2523;
    color: red;
 }
 .exam-status-未开始 {
    background-color: #3c2f1d;
    color: orange;
 }
 #settings-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
 }
 #settings-modal-content {
    background: #404040;
    padding: 32px 48px 32px 32px;
    margin: 32px auto;
    border-radius: 28px;
    width: 600px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
 }
 #settings-modal-content::-webkit-scrollbar {
    width: 8px;
 }
 #settings-modal-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
 }
 #settings-modal-content::-webkit-scrollbar-thumb {
    background: #4A4458;
    border-radius: 8px;
    border: 2px solid #2B2930;
 }
 #settings-modal-content::-webkit-scrollbar-thumb:hover {
    background: #635B70;
 }
 #settings-modal-content h3 {
    margin: 0 0 24px;
    color: #E6E1E5;
    font-size: 24px;
    font-weight: 400;
 }
 #settings-modal-content label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
    font-size: 16px;
    color: #E6E1E5;
 }
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
    font-size: 1.8rem;
    padding: 12px 16px;
    margin: 8px 0 24px;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #4A4458;
    border-radius: 12px;
    background-color: #332D41;
    color: #E6E1E5;
    transition: all 0.2s ease;
 }
 #settings-modal-content input:focus {
    outline: none;
    border-color: #D0BCFF;
    background-color: #4A4458;
 }
 .button-group {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    background-color: #404040;
    padding: 16px 0;
    border-top: 1px solid #555555;
 }
 #save-settings-btn, #close-settings-btn {
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
 }
 #save-settings-btn {
    background-color: #404040;
    color: #E6E1E5;
 }
 #save-settings-btn::before {
    content: "✓";
    font-size: 18px;
 }
 #close-settings-btn {
    background-color: #404040;
    color: #E6E1E5;
 }
 #close-settings-btn::before {
    content: "✕";
    font-size: 18px;
 }
 #save-settings-btn:hover, #close-settings-btn:hover {
    background-color: #4A4A4A;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 }
 .error-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #5C1130;
    color: #FFB3B3;
    padding: 16px 24px;
    border-radius: 16px;
    display: none;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
 }
 .switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
 }
 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4A4458;
    transition: .3s;
    border-radius: 16px;
 }
 .slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: #E6E1E5;
    transition: .3s;
    border-radius: 50%;
 }
 input:checked + .slider {
    background-color: #D0BCFF;
 }
 input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #1C1B1F;
 }
 .config-file-container {
    margin: 24px 0;
    padding: 24px;
    border: 2px solid #555555;
    border-radius: 20px;
    background-color: #4A4A4A;
    transition: all 0.2s ease;
 }
 .config-file-container:hover {
    border-color: #D0BCFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
 }
 .config-file-container input[type="file"] {
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    padding: 12px;
    border: 2px dashed #4A4458;
    border-radius: 16px;
    background-color: #332D41;
    color: #E6E1E5;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .config-file-container input[type="file"]::-webkit-file-upload-button {
    padding: 8px 16px;
    margin-right: 12px;
    background-color: #404040;
    color: #E6E1E5;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .config-file-container input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #4A4A4A;
 }
 .file-hint {
    margin-top: 12px;
    font-size: 14px;
    color: #CAC4D0;
    line-height: 1.5;
 }
 .config-control-btn {
    margin-top: 20px;
    padding: 12px 28px;
    background-color: #404040;
    color: #E6E1E5;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
 }
 .config-control-btn:hover {
    background-color: #4A4A4A;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
 }
 .theme-toggle-container {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
 }
 #theme-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.2rem;
    background-color: #404040;
    color: #FFFFFF;
    border: 2px solid #555555;
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
 }
 #theme-select:hover {
    background-color: #4A4A4A;
    border-color: #666666;
 }
 #theme-select:focus {
    outline: none;
    border-color: #D0BCFF;
    background-color: #4A4A4A;
 }
 #theme-select option {
    background-color: #404040;
    color: #FFFFFF;
    padding: 12px;
 }
 #theme-select option:hover,
 #theme-select option:focus {
    background-color: #4A4A4A;
 }
 .theme-toggle-container label {
    font-size: 16px;
    color: #E6E1E5;
    margin-bottom: 8px;
 }
 .reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(8px);
    z-index: 9999;
 }
 .reminder-overlay.show {
    opacity: 1;
    visibility: visible;
 }
 .reminder-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
 }
 .reminder-title {
    font-size: 5rem;
    color: white;
    margin-bottom: 2rem;
 }
 .reminder-subtitle {
    font-size: 3rem;
    color: #FFD60A;
 }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 .info-section {
    position: relative;
 }
 .info-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #404040;
    color: #E6E1E5;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
 }
 .info-toggle-btn:hover {
    background-color: #4A4A4A;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
 .paper-count-container {
    margin: 20px 0;
 }
 .paper-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 2.5rem;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-control input {
    width: 60px;
    padding: 5px;
    font-size: 2rem;
    text-align: center;
    background-color: #212121;
    color: #E6E1E5;
    border: 2px solid #404040;
    border-radius: 8px;
 }
 .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #404040;
    color: #E6E1E5;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .count-btn:hover {
    background-color: #4A4A4A;
    transform: translateY(-1px);
 }
 .count-btn .material-icons {
    font-size: 20px;
 }
 .count-btn-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .count-btn .material-icons {
    font-size: 16px;
 }
--- a/exam/Styles/ealg/light.css
+++ b/exam/Styles/ealg/light.css
@ -0,0 +1,670 @@
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    padding: 12px 24px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #E8DEF8; /* 按钮背景颜色 */
    color: #1C1B1F; /* 按钮文字颜色 */
    border: none; /* 按钮边框样式 */
    border-radius: 20px; /* 按钮圆角大小 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #D0BCFF; /* 悬停时的背景颜色 */
    transform: translateY(-1px); /* 悬停时向上移动 1px */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
 }
 body {
    font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    background: #FFFBFE;
    color: #1C1B1F;
    overflow: auto;
 }
 body::-webkit-scrollbar {
    display: none;
 }
 #fullscreen-btn, #settings-btn {
    position: absolute;
    top: 20px;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #E8DEF8;
    color: #1C1B1F;
    border: none;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
 }
 #fullscreen-btn {
    right: 20px;
 }
 #settings-btn {
    right: 140px;
 }
 #settings-btn:hover, #fullscreen-btn:hover {
    background-color: #D0BCFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 }
 #settings-btn::before {
    content: "settings";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #fullscreen-btn::before {
    content: "fullscreen";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 .container {
    padding: 24px;
    max-width: 100%;
    margin: auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 h1 {
    font-size: 3.5rem;
    font-weight: 400;
    text-align: left;
    margin-bottom: 16px;
    color: #1C1B1F;
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 #room {
    font-size: 3.5rem;
    font-weight: 400;
    color: #1C1B1F;
    margin-left: 20px;
 }
 #message {
    font-size: 1.8rem;
    color: #6750A4;
    margin-bottom: 24px;
 }
 .content {
    display: flex;
    justify-content: space-between;
    gap: 24px;
 }
 .left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
 }
 .left-column {
    width: 45%;
 }
 .right-column {
    width: 50%;
 }
 .clock-section, .info-section, .right-column {
    background-color: #FFFFFF;
    padding: 24px;
    border-radius: 28px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 #current-time {
    font-size: 8rem;
    text-align: center;
    color: #000000;
    margin: 0;
    font-weight: 400;
 }
 #current-subject, #exam-timing, #remaining-time, #status {
    font-size: 3rem;
    margin: 16px 0;
    text-align: left;
    color: #000000;
 }
 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 24px;
    background-color: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
 }
 th, td {
    padding: 3px;  /* 修改padding值以匹配dark主题 */
    font-size: 1.8rem;
    text-align: center;
    border-bottom: 1px solid #E8DEF8;  /* 修改边框颜色 */
 }
 th {
    background-color: #ffffff;
    color: #1C1B1F;
    font-weight: 500;
 }
 tr:hover {
    background-color: #F7F2FA;
 }
 .exam-status-tag {
    padding: 2px 4px;  /* 修改padding值以匹配dark主题 */
    border-radius: 3px;  /* 修改圆角大小 */
    font-size: 1.2rem;  /* 修改字体大小 */
    font-weight: 500;
 }
 .exam-status-进行中 {
    background-color: #DDF4D7;
    color: #365534;
 }
 .exam-status-即将开始 {
    background-color: #FFF2D6;
    color: #594300;
 }
 .exam-status-已结束 {
    background-color: #FFDAD6;
    color: #5C1130;
 }
 .exam-status-未开始 {
    background-color: #E8DEF8;
    color: #1C1B1F;
 }
 #settings-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
 }
 #settings-modal-content {
    background: #FFFFFF;
    padding: 32px 48px 32px 32px;
    margin: 32px auto;
    border-radius: 28px;
    width: 600px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
 }
 #settings-modal-content::-webkit-scrollbar {
    width: 8px;
 }
 #settings-modal-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
 }
 #settings-modal-content::-webkit-scrollbar-thumb {
    background: #E8DEF8;
    border-radius: 8px;
    border: 2px solid #FFFFFF;
 }
 #settings-modal-content::-webkit-scrollbar-thumb:hover {
    background: #D0BCFF;
 }
 #settings-modal-content h3 {
    margin: 0 0 24px;
    color: #1C1B1F;
    font-size: 24px;
    font-weight: 400;
 }
 #settings-modal-content label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
    font-size: 16px;
    color: #1C1B1F;
 }
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
    font-size: 1.8rem;
    padding: 12px 16px;
    margin: 8px 0 24px;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #E8DEF8;
    border-radius: 12px;
    background-color: #FFFFFF;
    color: #1C1B1F;
    transition: all 0.2s ease;
 }
 #settings-modal-content input:focus {
    outline: none;
    border-color: #6750A4;
    background-color: #F7F2FA;
 }
 .button-group {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    background-color: #FFFFFF;
    padding: 16px 0;
    border-top: 1px solid #E8DEF8;
 }
 #save-settings-btn, #close-settings-btn {
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
 }
 #save-settings-btn {
    background-color: #6750A4;
    color: #FFFFFF;
 }
 #close-settings-btn {
    background-color: #E8DEF8;
    color: #1C1B1F;
 }
 #save-settings-btn:hover, #close-settings-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 }
 #save-settings-btn::before {
    content: "✓";
    font-size: 18px;
 }
 #close-settings-btn::before {
    content: "✕";
    font-size: 18px;
 }
 .error-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFDAD6;
    color: #5C1130;
    padding: 16px 24px;
    border-radius: 16px;
    display: none;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    animation: slideUp 0.3s ease;
 }
 .switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
 }
 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E8DEF8;
    transition: .3s;
    border-radius: 16px;
 }
 .slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: #FFFFFF;
    transition: .3s;
    border-radius: 50%;
 }
 input:checked + .slider {
    background-color: #6750A4;
 }
 input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #FFFFFF;
 }
 .config-file-container {
    margin: 24px 0;
    padding: 24px;
    border: 2px solid #E8DEF8;
    border-radius: 20px;
    background-color: #F7F2FA;
    transition: all 0.2s ease;
 }
 .config-file-container:hover {
    border-color: #6750A4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 .config-file-container input[type="file"] {
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
    padding: 12px;
    border: 2px dashed #E8DEF8;
    border-radius: 16px;
    background-color: #FFFFFF;
    color: #1C1B1F;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .config-file-container input[type="file"]::-webkit-file-upload-button {
    padding: 8px 16px;
    margin-right: 12px;
    background-color: #E8DEF8;
    color: #1C1B1F;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .config-file-container input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #D0BCFF;
 }
 .file-hint {
    margin-top: 12px;
    font-size: 14px;
    color: #49454F;
    line-height: 1.5;
 }
 .config-control-btn {
    margin-top: 20px;
    padding: 12px 28px;
    background-color: #E8DEF8;
    color: #1C1B1F;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
 }
 .config-control-btn:hover {
    background-color: #D0BCFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }
 .theme-toggle-container {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
 }
 #theme-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.2rem;
    background-color: #FFFFFF;
    color: #1C1B1F;
    border: 2px solid #E8DEF8;
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
 }
 #theme-select:hover {
    background-color: #F7F2FA;
    border-color: #D0BCFF;
 }
 #theme-select:focus {
    outline: none;
    border-color: #6750A4;
    background-color: #F7F2FA;
 }
 #theme-select option {
    background-color: #FFFFFF;
    color: #1C1B1F;
    padding: 12px;
 }
 #theme-select option:hover,
 #theme-select option:focus {
    background-color: #F7F2FA;
 }
 .theme-toggle-container label {
    font-size: 16px;
    color: #1C1B1F;
    margin-bottom: 8px;
 }
 .reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(8px);
    z-index: 9999;
 }
 .reminder-overlay.show {
    opacity: 1;
    visibility: visible;
 }
 .reminder-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
 }
 .reminder-title {
    font-size: 5rem;
    color: #FF3B30;
    margin-bottom: 2rem;
 }
 .reminder-subtitle {
    font-size: 3rem;
    color: #FF9500;
 }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 .info-section {
    position: relative;
 }
 .info-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #E8DEF8;
    color: #1C1B1F;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
 }
 .info-toggle-btn:hover {
    background-color: #D0BCFF;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
 .paper-count-container {
    margin: 20px 0;
 }
 .paper-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 2.5rem;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #E8DEF8;
    color: #1C1B1F;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .count-btn:hover {
    background-color: #D0BCFF;
    transform: translateY(-1px);
 }
 .count-btn .material-icons {
    font-size: 20px;
 }
 .count-btn-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .count-btn .material-icons {
    font-size: 16px;
 }
 .count-control input {
    width: 60px;
    padding: 5px;
    font-size: 2rem;
    text-align: center;
    background-color: #FFFFFF;
    color: #1C1B1F;
    border: 2px solid #E8DEF8;
    border-radius: 8px;
 }
--- a/exam/Styles/md3/dark.css
+++ b/exam/Styles/md3/dark.css
@ -1,3 +1,25 @@
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    padding: 12px 24px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #4A4458; /* 按钮背景颜色 */
    color: #E6E1E5; /* 按钮文字颜色 */
    border: none; /* 按钮边框样式 */
    border-radius: 20px; /* 按钮圆角大小 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #635B70; /* 悬停时的背景颜色 */
    transform: translateY(-1px); /* 悬停时向上移动 1px */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
 }
 body {
    font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
    margin: 0;
@ -24,6 +46,22 @@ body::-webkit-scrollbar {
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
 }
 #fullscreen-btn::before {
    content: "fullscreen";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #settings-btn::before {
    content: "settings";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #fullscreen-btn {
@ -31,7 +69,7 @@ body::-webkit-scrollbar {
 }
 #settings-btn {
-    right: 120px;
+    right: 140px;
 }
 #settings-btn:hover, #fullscreen-btn:hover {
@ -68,7 +106,7 @@ h1 {
 }
 #message {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
    color: #D0BCFF;
    margin-bottom: 24px;
 }
@ -143,15 +181,15 @@ tr:hover {
 }
 .exam-status-tag {
-    padding: 6px 12px;
+    padding: 2px 4px;
-    border-radius: 8px;
+    border-radius: 3px;
    font-size: 1.2rem;
    font-weight: 500;
 }
 .exam-status-进行中 {
-    background-color: #365534;
+    background-color: #263227;
-    color: #90D480;
+    color: green;
 }
 .exam-status-即将开始 {
@ -160,13 +198,13 @@ tr:hover {
 }
 .exam-status-已结束 {
-    background-color: #5C1130;
+    background-color: #3a2523;
-    color: #FFB3B3;
+    color: red;
 }
 .exam-status-未开始 {
-    background-color: #4A4458;
+    background-color: #3c2f1d;
-    color: #E6E1E5;
+    color: orange;
 }
 #settings-modal {
@ -229,7 +267,7 @@ tr:hover {
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
    padding: 12px 16px;
    margin: 8px 0 24px;
    width: 100%;
@ -252,6 +290,10 @@ tr:hover {
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    background-color: #2B2930;
    padding: 16px 0;
    border-top: 1px solid #4A4458;
 }
 #save-settings-btn, #close-settings-btn {
@ -262,6 +304,9 @@ tr:hover {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
 }
 #save-settings-btn {
@ -279,6 +324,16 @@ tr:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 }
 #save-settings-btn::before {
    content: "✓";
    font-size: 18px;
 }
 #close-settings-btn::before {
    content: "✕";
    font-size: 18px;
 }
 .error-container {
    position: fixed;
    bottom: 24px;
@ -404,3 +459,245 @@ input:checked + .slider:before {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
 }
 .theme-toggle-container {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
 }
 #theme-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.2rem;
    background-color: #332D41;
    color: #E6E1E5;
    border: 2px solid #4A4458;
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
 }
 #theme-select:hover {
    background-color: #4A4458;
    border-color: #635B70;
 }
 #theme-select:focus {
    outline: none;
    border-color: #D0BCFF;
    background-color: #4A4458;
 }
 #theme-select option {
    background-color: #332D41;
    color: #E6E1E5;
    padding: 12px;
 }
 #theme-select option:hover,
 #theme-select option:focus {
    background-color: #4A4458;
 }
 .theme-toggle-container label {
    font-size: 16px;
    color: #E6E1E5;
    margin-bottom: 8px;
 }
 .reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(8px);
    z-index: 9999;
 }
 .reminder-overlay.show {
    opacity: 1;
    visibility: visible;
 }
 .reminder-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
 }
 .reminder-title {
    font-size: 5rem;
    color: #FF453A;
    margin-bottom: 2rem;
 }
 .reminder-subtitle {
    font-size: 3rem;
    color: #FFD60A;
 }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 .info-toggle-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: #4A4458;
    color: #E6E1E5;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1;
 }
 .info-toggle-btn:hover {
    background-color: #635B70;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
 #paper-info {
    font-size: 3rem;
    margin: 16px 0;
    text-align: left;
    color: #E6E1E5;
 }
 #exam-papers, #answer-sheets {
    margin: 10px 0;
 }
 .paper-count-container {
    margin: 20px 0;
 }
 .paper-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 2.5rem;
 }
 .count-btn-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-control input {
    width: 60px;
    padding: 5px;
    font-size: 2rem;
    text-align: center;
    background-color: #332D41;
    color: #E6E1E5;
    border: 2px solid #4A4458;
    border-radius: 8px;
 }
 .count-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .count-btn .material-icons {
    font-size: 16px;
 }
 .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #4A4458;
    color: #E6E1E5;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .count-btn:hover {
    background-color: #635B70;
    transform: translateY(-1px);
 }
 .count-btn .material-icons {
    font-size: 20px;
 }
 .info-section {
    position: relative;
 }
 .info-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #4A4458;
    color: #E6E1E5;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
 }
 .info-toggle-btn:hover {
    background-color: #635B70;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
--- a/exam/Styles/md3/light.css
+++ b/exam/Styles/md3/light.css
@ -1,3 +1,25 @@
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    padding: 12px 24px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #E8DEF8; /* 按钮背景颜色 */
    color: #000000; /* 按钮文字颜色 */
    border: none; /* 按钮边框样式 */
    border-radius: 20px; /* 按钮圆角大小 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #D0BCFF; /* 悬停时的背景颜色 */
    transform: translateY(-1px); /* 悬停时向上移动 1px */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
 }
 body {
    font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
    margin: 0;
@ -24,6 +46,22 @@ body::-webkit-scrollbar {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
 }
 #fullscreen-btn::before {
    content: "fullscreen";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #settings-btn::before {
    content: "settings";
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 4px;
 }
 #fullscreen-btn {
@ -31,7 +69,7 @@ body::-webkit-scrollbar {
 }
 #settings-btn {
-    right: 120px;
+    right: 140px;
 }
 #settings-btn:hover, #fullscreen-btn:hover {
@ -68,7 +106,7 @@ h1 {
 }
 #message {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
    color: #6750A4;
    margin-bottom: 24px;
 }
@ -100,6 +138,10 @@ h1 {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 .info-section {
    position: relative;
 }
 #current-time {
    font-size: 8rem;
    text-align: center;
@ -115,6 +157,17 @@ h1 {
    color: #1C1B1F;
 }
 #paper-info {
    font-size: 3rem;
    margin: 16px 0;
    text-align: left;
    color: #1C1B1F;
 }
 #exam-papers, #answer-sheets {
    margin: 10px 0;
 }
 table {
    width: 100%;
    border-collapse: separate;
@ -143,8 +196,8 @@ tr:hover {
 }
 .exam-status-tag {
-    padding: 6px 12px;
+    padding: 2px 4px;
-    border-radius: 8px;
+    border-radius: 3px;
    font-size: 1.2rem;
    font-weight: 500;
 }
@ -229,7 +282,7 @@ tr:hover {
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
    padding: 12px 16px;
    margin: 8px 0 24px;
    width: 100%;
@ -252,6 +305,26 @@ tr:hover {
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    background-color: #FFFFFF;
    padding: 16px 0;
    border-top: 1px solid #E8DEF8;
 }
 #save-settings-btn, #close-settings-btn {
    display: flex;
    align-items: center;
    gap: 12px;
 }
 #save-settings-btn::before {
    content: "✓";
    font-size: 18px;
 }
 #close-settings-btn::before {
    content: "✕";
    font-size: 18px;
 }
 #save-settings-btn, #close-settings-btn {
@ -262,6 +335,9 @@ tr:hover {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
 }
 #save-settings-btn {
@ -404,3 +480,183 @@ input:checked + .slider:before {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }
 .theme-toggle-container {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
 }
 #theme-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1.2rem;
    background-color: #FFFFFF;
    color: #1C1B1F;
    border: 2px solid #E8DEF8;
    border-radius: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
 }
 #theme-select:hover {
    background-color: #F7F2FA;
    border-color: #D0BCFF;
 }
 #theme-select:focus {
    outline: none;
    border-color: #6750A4;
    background-color: #F7F2FA;
 }
 #theme-select option {
    background-color: #FFFFFF;
    color: #1C1B1F;
    padding: 12px;
 }
 #theme-select option:hover,
 #theme-select option:focus {
    background-color: #F7F2FA;
 }
 .theme-toggle-container label {
    font-size: 16px;
    color: #1C1B1F;
    margin-bottom: 8px;
 }
 .reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(8px);
    z-index: 9999;
 }
 .reminder-overlay.show {
    opacity: 1;
    visibility: visible;
 }
 .reminder-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
 }
 .reminder-title {
    font-size: 5rem;
    color: #FF3B30;
    margin-bottom: 2rem;
 }
 .reminder-subtitle {
    font-size: 3rem;
    color: #FF9500;
 }
 .info-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #E8DEF8;
    color: #1C1B1F;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
 }
 .info-toggle-btn:hover {
    background-color: #D0BCFF;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
 .paper-count-container {
    margin: 20px 0;
 }
 .paper-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 2.5rem;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-control input {
    width: 60px;
    padding: 5px;
    font-size: 2rem;
    text-align: center;
    background-color: #FFFFFF;
    color: #1C1B1F;
    border: 2px solid #E8DEF8;
    border-radius: 8px;
 }
 .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #E8DEF8;
    color: #1C1B1F;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .count-btn:hover {
    background-color: #D0BCFF;
    transform: translateY(-1px);
 }
 .count-btn .material-icons {
    font-size: 20px;
 }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
--- a/exam/Styles/old/background.jpg
+++ b/exam/Styles/old/background.jpg
--- a/exam/Styles/old/background_light.jpg
+++ b/exam/Styles/old/background_light.jpg
--- a/exam/Styles/old/dark.css
+++ b/exam/Styles/old/dark.css
@ -0,0 +1,697 @@
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    background-color: #1f1f1f; /* 按钮背景颜色 */
    color: #e0e0e0; /* 按钮文字颜色 */
    border: 1px solid #333333; /* 按钮边框样式 */
    border-radius: 4px; /* 按钮圆角大小 */
    padding: 8px 16px; /* 按钮内边距 */
    font-size: 14px; /* 按钮字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #2a2a2a; /* 按钮悬停时的背景颜色 */
    transform: scale(1.05); /* 悬停时放大 5% */
 }
 body {
    font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: url('background.jpg') no-repeat center center fixed; /* 更新路径 */
    background-size: cover;
    animation: fadeIn 1s;
    color: #e0e0e0;
    overflow: auto; /* 允许页面滚动 */
 }
 /* 隐藏滚动条 */
 body::-webkit-scrollbar {
    display: none;
 }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
 }
 #fullscreen-btn, #settings-btn {
    position: absolute;
    top: 20px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    background-color: #1f1f1f;
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1001;
 }
 #fullscreen-btn {
    right: 20px;
 }
 #settings-btn {
    right: 120px; /* Fullscreen button's left */
 }
 #settings-btn:hover, #fullscreen-btn:hover {
    background-color: #333;
    transform: scale(1.05);
 }
 .container {
    padding: 20px;
    max-width: 1400px; /* 增加主体部分宽度 */
    margin: auto;
    background-color: rgba(0, 0, 0, 0.4); /* 使用rgba设置背景透明度为80% */
 }
 h1 {
    font-size: 3.5rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 #room {
    font-size: 3.5rem;
    font-weight: bold;
    color: #e0e0e0;
    position: relative;
    right: 0;
    margin-left: 20px; /* 调整位置使其保持在container中 */
 }
 #message {
    font-size: 1.8rem;
    color: #16a3d1;
    margin-bottom: 20px;
 }
 .content {
    display: flex;
    justify-content: space-between;
    gap: 3px; /* 板块间隔3px */
 }
 .left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
 }
 .left-column {
    width: 45%;
 }
 .right-column {
    width: 50%;
 }
 .clock-section, .info-section, .right-column {
    background-color: rgba(31, 31, 31, 0.5); /* 亚克力效果 */
    backdrop-filter: blur(10px);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 20px; /* 增加时钟和信息板块之间的间隔 */
 }
 #current-time {
    font-size: 8rem;
    text-align: center;
    color: #7cc3fb;
    margin: 0;
    font-weight: bold;
 }
 #current-subject, #exam-timing, #remaining-time, #status {
    font-size: 3rem;
    margin: 10px 0;
    text-align: left;
    color: #e0e0e0;
 }
 table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background-color: rgba(31, 31, 31, 0.5);
 }
 th, td {
    border: 1px solid #fff;
    padding: 0px; /* 缩短行高 */
    font-size: 1.8rem;
    text-align: center;
 }
 th {
    background-color: #333;
    color: #7cc3fb;
    font-weight: bold;
    border-bottom: 2px solid #fff;
 }
 tr:hover {
    background-color: #333;
 }
 table {
    border-radius: 8px;
    overflow: hidden;
 }
 td {
    border-bottom: 1px solid #fff;
 }
 td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
 }
 td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
 }
 .exam-status-tag {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 1.2rem;
    display: inline-block;
    min-width: 60px;
 }
 .exam-status-进行中 {
    background-color: rgba(91, 168, 56, 0.2);
    color: #5ba838;
 }
 .exam-status-即将开始 {
    background-color: rgba(254, 153, 1, 0.2);
    color: #fe9901;
 }
 .exam-status-已结束 {
    background-color: rgba(236, 4, 52, 0.2);
    color: #ec0434;
 }
 .exam-status-未开始 {
    background-color: rgba(238, 238, 91, 0.2);
    color: #eeee5b;
 }
 #settings-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
 }
 #settings-modal-content {
    background: rgba(31, 31, 31, 0.95);
    padding: 25px;
    margin: 25px auto;
    border-radius: 12px;
    border: 1px solid #444;
    backdrop-filter: blur(8px);
    max-width: 600px;
    max-height: 60vh;  /* 限制最大高度 */
    overflow-y: auto;  /* 允许垂直滚动 */
    animation: fadeIn 0.5s ease;
 }
 /* 设置滚动条样式 */
 #settings-modal-content::-webkit-scrollbar {
    width: 8px;
 }
 #settings-modal-content::-webkit-scrollbar-track {
    background: rgba(31, 31, 31, 0.5);
    border-radius: 4px;
 }
 #settings-modal-content::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
 }
 #settings-modal-content::-webkit-scrollbar-thumb:hover {
    background: #888;
 }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
 }
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
 }
 .fade-out {
    animation: fadeOut 0.3s ease;
 }
 #settings-modal-content h3 {
    margin: 0 0 20px;
    color: #e0e0e0;
    font-size: 20px;
 }
 #settings-modal-content label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    font-size: 16px;
    color: #b0b0b0;
 }
 #settings-modal-content label[for="offset-time"],
 #settings-modal-content label[for="room-input"],
 #settings-modal-content label[for="zoom-input"] {
    justify-content: space-between;
 }
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
    flex-grow: 1;
    margin-left: 10px;
    font-size: 1.8rem;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #222;
    color: #e0e0e0;
 }
 #settings-modal-content input:focus {
    outline: none;
    border-color: #007acc;
    box-shadow: 0 0 0 1px #007acc;
 }
 .button-group {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
 }
 #settings-modal-content button {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(52,152,219,0.25);
 }
 #settings-modal-content button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(52,152,219,0.35);
 }
 #close-settings-btn {
    padding: 10px 20px;
    font-size: 2rem;
    cursor: pointer;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
 }
 #close-settings-btn:hover {
    background-color: #c9302c;
 }
 .error-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ff6b6b;
    color: white;
    padding: 16px;
    display: none;
    z-index: 10001;
    animation: slideUp 0.3s ease;
 }
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
 }
 .error-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
 }
 .error-content:before {
    content: '!';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: white;
    color: #ff6b6b;
    border-radius: 50%;
    font-weight: bold;
 }
 .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
 }
 .switch input {
    opacity: 0;
    width: 0;
    height: 0;
 }
 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
 }
 .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
 }
 input:checked + .slider {
    background-color: #2196F3;
 }
 input:checked + .slider:before {
    transform: translateX(26px);
 }
 .theme-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
 }
 #theme-select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #222;
    color: #e0e0e0;
    cursor: pointer;
    outline: none;
    width: 120px;
 }
 #theme-select:hover {
    border-color: #666;
 }
 #theme-select:focus {
    border-color: #007acc;
    box-shadow: 0 0 0 1px #007acc;
 }
 #theme-select option {
    background-color: #222;
    color: #e0e0e0;
    padding: 8px;
 }
 .config-file-container {
    margin: 12px 0;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: rgba(31, 31, 31, 0.5);
    box-sizing: border-box;
    max-width: 100%;
 }
 .config-file-container label {
    display: block;
    margin-bottom: 8px;
    color: #e0e0e0;
 }
 .config-file-container input[type="file"] {
    display: block;
    width: calc(100% - 16px);  /* 减去padding的宽度 */
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #222;
    color: #e0e0e0;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
 .config-file-container input[type="file"]:hover {
    background-color: #333;
 }
 .file-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
 }
 .config-control-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
 }
 .config-control-btn:hover {
    background-color: #c9302c;
 }
 .reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(8px);
    z-index: 9999;
 }
 .reminder-overlay.show {
    opacity: 1;
    visibility: visible;
 }
 .reminder-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
 }
 .reminder-title {
    font-size: 5rem;
    color: #FF453A;
    margin-bottom: 2rem;
 }
 .reminder-subtitle {
    font-size: 3rem;
    color: #FFD60A;
 }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 .info-section {
    position: relative;
 }
 .info-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #1f1f1f;
    color: #e0e0e0;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
 }
 .info-toggle-btn:hover {
    background-color: #333;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
 .paper-count-container {
    margin: 20px 0;
 }
 .paper-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 2.5rem;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-control input {
    width: 60px;
    padding: 5px;
    font-size: 2rem;
    text-align: center;
    background-color: #1f1f1f;
    color: #e0e0e0;
    border: 2px solid #333;
    border-radius: 8px;
 }
 .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #1f1f1f;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .count-btn:hover {
    background-color: #333;
    transform: translateY(-1px);
 }
 .count-btn .material-icons {
    font-size: 20px;
 }
 .count-btn-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .count-btn .material-icons {
    font-size: 16px;
 }
--- a/exam/Styles/old/light.css
+++ b/exam/Styles/old/light.css
@ -0,0 +1,694 @@
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    padding: 10px 20px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #f0f0f0; /* 按钮背景颜色 */
    color: #333; /* 按钮文字颜色 */
    border: 1px solid #ccc; /* 按钮边框 */
    border-radius: 5px; /* 按钮圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 设置按钮的层级，确保在其他元素之上 */
 }
 #return-btn:hover {
    background-color: #ccc; /* 悬停时的背景颜色 */
    transform: scale(1.05); /* 悬停时放大 5% */
 }
 body {
    font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif; /* 设置字体 */
    margin: 0; /* 去除默认外边距 */
    padding: 0; /* 去除默认内边距 */
    background: url('background_light.jpg') no-repeat center center fixed; /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个页面 */
    animation: fadeIn 1s; /* 页面加载时的淡入动画 */
    color: #333; /* 全局文字颜色 */
    overflow: auto; /* 允许页面滚动 */
 }
 body::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
 }
@keyframes fadeIn {
    from { opacity: 0; } /* 动画开始时透明 */
    to { opacity: 1; } /* 动画结束时完全显示 */
 }
 #fullscreen-btn, #settings-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    padding: 10px 20px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #f0f0f0; /* 按钮背景颜色 */
    color: #333; /* 按钮文字颜色 */
    border: 1px solid #ccc; /* 按钮边框 */
    border-radius: 5px; /* 按钮圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 设置按钮的层级，确保在其他元素之上 */
 }
 #fullscreen-btn {
    right: 20px; /* 距离右侧 20px */
 }
 #settings-btn {
    right: 120px; /* 距离右侧 120px */
 }
 #settings-btn:hover, #fullscreen-btn:hover {
    background-color: #ccc; /* 悬停时的背景颜色 */
    transform: scale(1.05); /* 悬停时放大 5% */
 }
 .container {
    padding: 20px; /* 内边距 */
    max-width: 1400px; /* 最大宽度 */
    margin: auto; /* 居中对齐 */
    background-color: rgba(255, 255, 255, 0.4); /* 半透明背景 */
 }
 h1 {
    font-size: 3.5rem; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-align: left; /* 左对齐 */
    margin-bottom: 10px; /* 下边距 */
    color: #333; /* 文字颜色 */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
 }
 #room {
    font-size: 3.5rem; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    color: #333; /* 文字颜色 */
    position: relative; /* 相对定位 */
    right: 0; /* 向右移动 0 */
    margin-left: 20px; /* 左边距 */
 }
 #message {
    font-size: 1.8rem; /* 字体大小 */
    color: #16a3d1; /* 文字颜色 */
    margin-bottom: 20px; /* 下边距 */
 }
 .content {
    display: flex;
    justify-content: space-between;
    gap: 3px;
 }
 .left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
 }
 .left-column {
    width: 45%;
 }
 .right-column {
    width: 50%;
 }
 .clock-section, .info-section, .right-column {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
 }
 .clock-section, .info-section {
    margin-bottom: 20px; /* 增加时钟和信息板块之间的间隔 */
 }
 #current-time {
    font-size: 8rem;
    text-align: center;
    color: #333;
    margin: 0;
    font-weight: bold;
 }
 #current-subject, #exam-timing, #remaining-time, #status {
    font-size: 3rem;
    margin: 10px 0;
    text-align: left;
    color: #333;
 }
 table {
    width: 100%; /* 表格宽度 */
    border-collapse: collapse; /* 合并边框 */
    margin-top: 20px; /* 上边距 */
    border: 1px solid #000; /* 表格边框 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
 }
 th, td {
    border: 1px solid #000;
    padding: 0px;
    font-size: 1.8rem;
    text-align: center;
 }
 th {
    background-color: #f0f0f0; /* 背景颜色 */
    color: #333; /* 文字颜色 */
    font-weight: bold; /* 字体加粗 */
    border-bottom: 2px solid #000; /* 下边框 */
 }
 tr:hover {
    background-color: #f0f0f0; /* 背景颜色 */
 }
 table {
    border-radius: 8px;
    overflow: hidden;
 }
 td {
    border-bottom: 1px solid #000; /* 下边框 */
    padding: 0px; /* 内边距 */
    font-size: 1.8rem; /* 字体大小 */
    text-align: center; /* 居中对齐 */
 }
 td:first-child {
    border-top-left-radius: 8px; /* 左上角圆角 */
    border-bottom-left-radius: 8px; /* 左下角圆角 */
 }
 td:last-child {
    border-top-right-radius: 8px; /* 右上角圆角 */
    border-bottom-right-radius: 8px; /* 右下角圆角 */
 }
 .exam-status-tag {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 1.2rem;
    display: inline-block;
    min-width: 60px;
 }
 .exam-status-进行中 {
    background-color: rgba(91, 168, 56, 0.1);
    color: #5ba838;
 }
 .exam-status-即将开始 {
    background-color: rgba(254, 153, 1, 0.1);
    color: #fe9901;
 }
 .exam-status-已结束 {
    background-color: rgba(236, 4, 52, 0.1);
    color: #ec0434;
 }
 .exam-status-未开始 {
    background-color: rgba(238, 238, 91, 0.1);
    color: #d4b106;
 }
 #settings-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
 }
 #settings-modal-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 25px;
    margin: 25px auto;
    border-radius: 12px;
    border: 1px solid #ccc;
    backdrop-filter: blur(8px);
    max-width: 600px;
    max-height: 60vh;  /* 限制最大高度 */
    overflow-y: auto;  /* 允许垂直滚动 */
    animation: fadeIn 0.5s ease;
 }
 /* 设置滚动条样式 */
 #settings-modal-content::-webkit-scrollbar {
    width: 8px;
 }
 #settings-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
 }
 #settings-modal-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
 }
 #settings-modal-content::-webkit-scrollbar-thumb:hover {
    background: #999;
 }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
 }
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
 }
 .fade-out {
    animation: fadeOut 0.3s ease;
 }
 #settings-modal-content h3 {
    margin: 0 0 20px;
    color: #333;
    font-size: 20px;
 }
 #settings-modal-content label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    font-size: 16px;
    color: #666;
 }
 #settings-modal-content label[for="offset-time"],
 #settings-modal-content label[for="room-input"],
 #settings-modal-content label[for="zoom-input"] {
    justify-content: space-between;
 }
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
    flex-grow: 1;
    margin-left: 10px;
 }
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
    font-size: 1.8rem;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
 }
 #settings-modal-content input:focus {
    outline: none;
    border-color: #007acc;
    box-shadow: 0 0 0 1px #007acc;
 }
 .button-group {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
 }
 #settings-modal-content button {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(52,152,219,0.25);
 }
 #settings-modal-content button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(52,152,219,0.35);
 }
 #close-settings-btn {
    padding: 10px 20px;
    font-size: 2rem;
    cursor: pointer;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
 }
 #close-settings-btn:hover {
    background-color: #c9302c;
 }
 .error-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ff6b6b;
    color: white;
    padding: 16px;
    display: none;
    z-index: 10001;
    animation: slideUp 0.3s ease;
 }
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
 }
 .error-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
 }
 .error-content:before {
    content: '!';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: white;
    color: #ff6b6b;
    border-radius: 50%;
    font-weight: bold;
 }
 .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
 }
 .switch input {
    opacity: 0;
    width: 0;
    height: 0;
 }
 .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
 }
 .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
 }
 input:checked + .slider {
    background-color: #2196F3;
 }
 input:checked + .slider:before {
    transform: translateX(26px);
 }
 theme-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
 }
 #theme-select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
    width: 120px;
 }
 #theme-select:hover {
    border-color: #999;
 }
 #theme-select:focus {
    border-color: #007acc;
    box-shadow: 0 0 0 1px #007acc;
 }
 #theme-select option {
    background-color: #fff;
    color: #333;
    padding: 8px;
 }
 .config-file-container {
    margin: 12px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    max-width: 100%;
 }
 .config-file-container label {
    display: block;
    margin-bottom: 8px;
    color: #333;
 }
 .config-file-container input[type="file"] {
    display: block;
    width: calc(100% - 16px);  /* 减去padding的宽度 */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
 .config-file-container input[type="file"]:hover {
    background-color: #f5f5f5;
 }
 .file-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
 }
 .config-control-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
 }
 .config-control-btn:hover {
    background-color: #c9302c;
 }
 .reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(8px);
    z-index: 9999;
 }
 .reminder-overlay.show {
    opacity: 1;
    visibility: visible;
 }
 .reminder-content {
    text-align: center;
    animation: fadeIn 0.5s ease;
 }
 .reminder-title {
    font-size: 5rem;
    color: #FF3B30;
    margin-bottom: 2rem;
 }
 .reminder-subtitle {
    font-size: 3rem;
    color: #FF9500;
 }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 .info-section {
    position: relative;
 }
 .info-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
 }
 .info-toggle-btn:hover {
    background-color: #ccc;
    transform: translateY(-1px);
 }
 .info-toggle-btn .material-icons {
    font-size: 24px;
 }
 .paper-count-container {
    margin: 20px 0;
 }
 .paper-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 2.5rem;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
 }
 .count-btn:hover {
    background-color: #ccc;
    transform: translateY(-1px);
 }
 .count-btn .material-icons {
    font-size: 20px;
 }
 .count-btn-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
 }
 .count-control {
    display: flex;
    align-items: center;
    gap: 5px;
 }
 .count-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .count-btn .material-icons {
    font-size: 16px;
 }
--- a/exam/Styles/profile.json
+++ b/exam/Styles/profile.json
@ -0,0 +1,16 @@
 {
    "theme":[
        {
            "name": "ExamAware旧版",
            "path": "ealg"
        },
        {
            "name": "ExamSchedule旧版",
            "path": "old"
        },
        {
            "name": "Material Design 3",
            "path": "md3"
        }
    ]
 }
--- a/exam/exam_config.json
+++ b/exam/exam_config.json
@ -1,47 +1,47 @@
 {
-    "examName": "限时训练",
+    "examName": "淄博齐盛高级中学第一次模块考试",
    "message": "请保持安静，认真答题",
    "room": "",
    "examInfos": [
        {
            "name": "语文",
-            "start": "2025-03-31T07:20:00",
+            "start": "2025-05-06T07:30:00",
-            "end": "2025-03-31T09:50:00"
+            "end": "2025-05-06T10:00:00"
        },
        {
            "name": "物理",
-            "start": "2025-03-31T10:20:00",
+            "start": "2025-05-06T10:20:00",
-            "end": "2025-03-31T11:50:00"
+            "end": "2025-05-06T11:50:00"
        },
        {
            "name": "英语",
            "start": "2025-03-31T14:10:00",
            "end": "2025-03-31T23:15:00"
        },
        {
            "name": "历史",
            "start": "2025-03-31T23:55:00",
            "end": "2025-04-01T01:00:00"
        },
        {
            "name": "数学",
-            "start": "2025-04-01T07:50:00",
+            "start": "2025-05-06T14:10:00",
-            "end": "2025-04-01T09:50:00"
+            "end": "2025-05-06T16:10:00"
        },
        {
            "name": "政治",
            "start": "2025-05-06T16:30:00",
            "end": "2025-05-06T18:00:00"
        },
        {
            "name": "生物/地理",
            "start": "2025-05-07T08:00:00",
            "end": "2025-05-07T09:30:00"
        },
        {
            "name": "化学",
-            "start": "2025-04-01T10:20:00",
+            "start": "2025-05-07T10:00:00",
-            "end": "2025-04-01T11:50:00"
+            "end": "2025-05-07T11:30:00"
        },
        {
-            "name": "生物/政治",
+            "name": "英语",
-            "start": "2025-04-01T14:10:00",
+            "start": "2025-05-07T14:10:00",
-            "end": "2025-04-01T15:40:00"
+            "end": "2025-05-07T16:10:00"
        },
        {
-            "name": "地理",
+            "name": "历史",
-            "start": "2025-04-01T16:10:00",
+            "start": "2025-05-07T16:30:00",
-            "end": "2025-04-01T17:40:00"
+            "end": "2025-05-07T18:00:00"
        }
    ]
 }
--- a/exam/index.html
+++ b/exam/index.html
@ -4,13 +4,15 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam Schedule</title>
-    <link rel="stylesheet" href="Styles/dark.css" id="theme-link">
+    <link id="theme-link" rel="stylesheet" href="Styles/md3/dark.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
    <div class="error-container">
        <div class="error-content" id="errorMessage"></div>
    </div>
    <button id="return-btn" onclick="window.location.href = '../'">返回</button>
    <button id="settings-btn">设置</button>
    <button id="fullscreen-btn">全屏</button>
    <div class="container">
@ -25,8 +27,69 @@
                    <div id="current-time"></div>
                </div>
                <div class="info-section">
                    <button id="info-toggle-btn" class="info-toggle-btn" title="切换显示模式">
                        <span class="material-icons">swap_horiz</span>
                    </button>
                    <div id="current-subject"></div>
                    <div id="exam-timing"></div>
                    <div id="paper-info" style="display: none;">
                        <div class="paper-count-container">
                            <div class="paper-input-group">
                                <label>试卷:</label>
                                <div class="count-control">
                                    <div class="count-btn-group">
                                        <button class="count-btn" data-target="paper-count" data-action="decrease">
                                            <span class="material-icons">remove</span>
                                        </button>
                                        <button class="count-btn" data-target="paper-count" data-action="increase">
                                            <span class="material-icons">add</span>
                                        </button>
                                    </div>
                                    <input type="number" id="paper-count" min="0" value="0">
                                </div>
                                <span>张</span>
                                <div class="count-control">
                                    <div class="count-btn-group">
                                        <button class="count-btn" data-target="paper-pages" data-action="decrease">
                                            <span class="material-icons">remove</span>
                                        </button>
                                        <button class="count-btn" data-target="paper-pages" data-action="increase">
                                            <span class="material-icons">add</span>
                                        </button>
                                    </div>
                                    <input type="number" id="paper-pages" min="0" value="0">
                                </div>
                                <span>页</span>
                            </div>
                            <div class="paper-input-group">
                                <label>答题卡:</label>
                                <div class="count-control">
                                    <div class="count-btn-group">
                                        <button class="count-btn" data-target="sheet-count" data-action="decrease">
                                            <span class="material-icons">remove</span>
                                        </button>
                                        <button class="count-btn" data-target="sheet-count" data-action="increase">
                                            <span class="material-icons">add</span>
                                        </button>
                                    </div>
                                    <input type="number" id="sheet-count" min="0" value="0">
                                </div>
                                <span>张</span>
                                <div class="count-control">
                                    <div class="count-btn-group">
                                        <button class="count-btn" data-target="sheet-pages" data-action="decrease">
                                            <span class="material-icons">remove</span>
                                        </button>
                                        <button class="count-btn" data-target="sheet-pages" data-action="increase">
                                            <span class="material-icons">add</span>
                                        </button>
                                    </div>
                                    <input type="number" id="sheet-pages" min="0" value="0">
                                </div>
                                <span>页</span>
                            </div>
                        </div>
                    </div>
                    <div id="remaining-time"></div>
                    <div id="status"></div>
                </div>
@ -49,6 +112,12 @@
            </div>
        </div>
    </div>
    <div id="reminder-overlay" class="reminder-overlay">
        <div class="reminder-content">
            <h1 class="reminder-title">距离考试结束还有 15 分钟</h1>
            <h2 class="reminder-subtitle">注意掌握时间</h2>
        </div>
    </div>
    <!-- Settings Modal -->
    <div id="settings-modal">
        <div id="settings-modal-content" class="settings-panel dark-theme">
@ -66,11 +135,20 @@
                <button id="clear-config-btn" class="config-control-btn">清除本地配置</button>
            </div>
            <div class="theme-toggle-container">
                <label for="theme-select">主题:</label>
                <select id="theme-select">
                    <!-- 动态填充主题选项 -->
                </select>
                <label for="theme-toggle">亮/暗色模式:</label>
                <label class="switch">
                    <input type="checkbox" id="theme-toggle">
                    <span class="slider round"></span>
                </label>
                <label for="auto-toggle">自动切换显示:</label>
                <label class="switch">
                    <input type="checkbox" id="auto-toggle">
                    <span class="slider round"></span>
                </label>
            </div>
            <div class="button-group">
                <button id="save-settings-btn" class="control-btn">确定</button>
--- a/icon.png
+++ b/icon.png
--- a/index.html
+++ b/index.html
@ -6,9 +6,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择页面</title>
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
-            background: #1C1B1F;
+            background: #2C2B30;
            display: flex;
            justify-content: center;
            align-items: center;
@ -20,40 +21,46 @@
        }
        h1 {
-            color: #E6E1E5;
+            display: none; /* 隐藏选择版本标题 */
            font-size: 48px;
            text-align: center;
            margin-bottom: 40px;
            animation: fadeInUp 1s ease-in-out;
            font-weight: 500;
        }
        /* 只针对主导航按钮的样式 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
-            display: flex;
+            display: grid;
-            justify-content: center;
+            grid-template-columns: repeat(3, 1fr);
-            gap: 16px;
+            gap: 24px;
            animation: fadeInUp 1s ease-in-out;
        }
-        a {
+        /* 主导航按钮样式 */
        ul a {
            color: #E6E1E5;
            text-decoration: none;
-            font-size: 16px;
+            font-size: 20px;
            font-weight: 500;
-            padding: 16px 24px;
+            padding: 32px;
-            border-radius: 100px;
+            border-radius: 24px;
            background-color: #49454F;
            transition: all 0.3s ease;
-            display: inline-block;
+            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            min-width: 200px;
            text-align: center;
        }
-        a:hover {
+        ul a:hover {
            background-color: #605D64;
-            transform: translateY(-2px);
+            transform: translateY(-4px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }
        ul .material-icons {
            font-size: 32px;
        }
        @keyframes fadeInUp {
@ -78,12 +85,7 @@
        }
        .github-link {
-            position: absolute;
+            position: static;
            top: 16px;
            right: 16px;
            background-color: transparent;
            padding: 8px;
            border-radius: 50%;
        }
        .github-link:hover {
@ -97,20 +99,85 @@
            height: 24px;
            filter: invert(1);
        }
        .project-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: 500;
            color: #E6E1E5;
            animation: fadeInUp 1s ease-in-out;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .project-logo {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }
        .material-icons {
            font-size: 20px;
        }
        .top-right-links {
            position: absolute;
            top: 16px;
            right: 16px;
            display: flex;
            gap: 16px;
            align-items: center;
        }
        .about-link {
            background-color: transparent;
            padding: 8px 16px;
            border-radius: 100px;
            font-size: 14px;
            text-decoration: none;
            color: rgba(255, 255, 255, 1);
            display: flex;              /* 新增：使用flex布局 */
            align-items: center;        /* 新增：垂直居中对齐 */
            gap: 6px;                   /* 新增：图标与文字间距 */
        }
        .about-link:hover {
            background-color: transparent;
            transform: none;
            box-shadow: none;
            color: rgba(255, 255, 255, 0.7);
        }
        .about-link .material-icons {
            font-size: 18px;
        }
    </style>
 </head>
 <body>
-    <h1>选择版本：</h1>
+    <div class="project-title">
        <img src="./icon.png" alt="ExamSchedule Logo" class="project-logo">
        ExamSchedule
    </div>
    <ul>
-        <li><a href="./time/">电子钟表</a></li>
+        <li><a href="./time/"><span class="material-icons">schedule</span>电子钟表</a></li>
-        <li><a href="./exam/">考试看板</a></li>
+        <li><a href="./exam/"><span class="material-icons">dashboard</span>考试看板</a></li>
-        <li><a href="./notification/">考试广播</a></li>
+        <li><a href="./notification/"><span class="material-icons">campaign</span>考试广播</a></li>
    </ul>
-    <!-- 添加GitHub图标跳转项目地址 -->
+    <!-- 添加关于链接和GitHub图标 -->
    <div class="top-right-links">
        <a href="./about/" class="about-link">
            <span class="material-icons">info</span>
            关于
        </a>
        <a href="https://github.com/ExamAware/ExamSchedule" target="_blank" class="github-link">
            <img src="./github-icon.png" alt="GitHub" title="在GitHub上查看源代码">
        </a>
    </div>
    <!-- 新增版权信息 -->
    <div class="copyright">&copy; 2024-2025 ExamAware开发团队 版权所有</div>
--- a/notification/index.html
+++ b/notification/index.html
@ -17,6 +17,7 @@
    <link rel="stylesheet" href="styles/switch.css">
 </head>
 <body class="light-mode">
    <button id="return-btn" onclick="goBack()">返回</button>
    <div class="info-container">
        <div class="info-content" id="infoMessage"></div>
    </div>
--- a/notification/scripts/display.js
+++ b/notification/scripts/display.js
@ -31,13 +31,16 @@ function updateDisplay() {
 function formatTime(ms) {
    try {
-        if (ms < 0) return '00:00';
+        if (ms < 0) return '00:00:00';
        var totalSeconds = Math.floor(ms / 1000),
-            minutes = Math.floor(totalSeconds / 60),
+            hours = Math.floor(totalSeconds / 3600),
            minutes = Math.floor((totalSeconds % 3600) / 60),
            seconds = totalSeconds % 60;
-        return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+        return (hours < 10 ? '0' : '') + hours + ':' +
               (minutes < 10 ? '0' : '') + minutes + ':' +
               (seconds < 10 ? '0' : '') + seconds;
    } catch (e) {
-        return '--:--';
+        return '--:--:--';
    }
 }
--- a/notification/scripts/script.js
+++ b/notification/scripts/script.js
@ -102,45 +102,36 @@ function loadRemindersToQueue(reminders) {
    var now = Date.now();
    reminders.forEach(function(reminder) {
        var reminderTime;
        var targetCourse;
        if (currentCourse) {
-            switch (reminder.condition) {
+            targetCourse = currentCourse;
                case 'beforeStart':
                    reminderTime = new Date(currentCourse.start).getTime() - reminder.time * 60000;
                    break;
                case 'beforeEnd':
                    reminderTime = new Date(currentCourse.end).getTime() - reminder.time * 60000;
                    break;
                case 'afterEnd':
                    reminderTime = new Date(currentCourse.end).getTime() + reminder.time * 60000;
                    break;
                case 'start':
                    reminderTime = new Date(currentCourse.start).getTime();
                    break;
                case 'end':
                    reminderTime = new Date(currentCourse.end).getTime();
                    break;
                default:
                    console.error('未知的提醒条件:', reminder.condition);
                    return;
        } 
-        } else {
+        else if (getNextCourse()) {
-            var nextCourse = getNextCourse();
+            targetCourse = getNextCourse();
            if (nextCourse) {
                switch (reminder.condition) {
                    case 'beforeStart':
                        reminderTime = new Date(nextCourse.start).getTime() - reminder.time * 60000;
                        break;
                    case 'start':
                        reminderTime = new Date(nextCourse.start).getTime();
                        break;
                    default:
                        console.error('未知的提醒条件:', reminder.condition);
                        return;
        }
-            } else {
+        else {
            errorSystem.show('当前没有课程信息', 'info');
            return;
        }
        switch (reminder.condition) {
            case 'beforeStart':
                   reminderTime = new Date(targetCourse .start).getTime() - reminder.time * 60000;
                   break;
            case 'beforeEnd':
                reminderTime = new Date(targetCourse .end).getTime() - reminder.time * 60000;
                break;
            case 'afterEnd':
                reminderTime = new Date(targetCourse .end).getTime() + reminder.time * 60000;
                break;
            case 'start':
                reminderTime = new Date(targetCourse .start).getTime();
                break;
            case 'end':
                reminderTime = new Date(targetCourse .end).getTime();
                break;
            default:
                //console.error('未知的提醒条件:', reminder.condition);
                //return;
        }
        if (reminderTime > now) {
            reminderQueue.addReminder({ time: reminderTime, condition: reminder.condition, audio: reminder.audio });
@ -199,4 +190,21 @@ function init() {
 window.onbeforeunload = function () {
    if (timer) clearTimeout(timer);
 };
 function goBack() {
    window.history.back(); // 返回上一页
 }
 // 监听主题切换
 document.getElementById('theme-toggle').addEventListener('change', function () {
    const body = document.body;
    if (this.checked) {
        body.classList.remove('light-mode');
        body.classList.add('dark-mode');
    } else {
        body.classList.remove('dark-mode');
        body.classList.add('light-mode');
    }
 });
 init();
--- a/notification/styles/action-btn.css
+++ b/notification/styles/action-btn.css
@ -10,6 +10,9 @@
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25);
    margin-top: 10px;
    margin: 0;
    height: 38px;
    line-height: 18px;
 }
 .action-btn:hover {
    transform: translateY(-1px);
--- a/notification/styles/dark-mode.css
+++ b/notification/styles/dark-mode.css
@ -104,3 +104,35 @@ body.dark-mode .action-btn {
 body.dark-mode .action-btn:hover {
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.35);
 }
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    background-color: #f5f7fa; /* 默认亮色模式背景颜色 */
    color: #333333; /* 默认亮色模式文字颜色 */
    border: 1px solid #cccccc; /* 默认亮色模式边框颜色 */
    border-radius: 16px; /* 按钮圆角大小 */
    padding: 10px 18px; /* 按钮内边距 */
    font-size: 14px; /* 按钮字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #e0e4e8; /* 默认亮色模式悬停背景颜色 */
    transform: scale(1.05); /* 悬停时放大 5% */
 }
 /* 暗色模式 */
 body.dark-mode #return-btn {
    background-color: #4a4f55; /* 更浅的暗色模式背景颜色 */
    color: #e0e0e0; /* 暗色模式文字颜色 */
    border: 1px solid #555555; /* 更浅的暗色模式边框颜色 */
 }
 body.dark-mode #return-btn:hover {
    background-color: #3b4046; /* 更浅的暗色模式悬停背景颜色 */
 }
--- a/notification/styles/schedule-table.css
+++ b/notification/styles/schedule-table.css
@ -7,15 +7,17 @@
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 }
 .schedule-table th, .schedule-table td {
    padding: 14px 16px;
    text-align: left;
 }
 .schedule-table th {
    background: #f8f9fa;
    padding: 16px;
    color: #57606f;
    font-weight: 600;
    border-bottom: 2px solid #e0e6ed;
 }
 .schedule-table td {
    padding: 14px;
    border-bottom: 1px solid #f1f3f6;
 }
 .current-class {
--- a/time/index.html
+++ b/time/index.html
@ -30,115 +30,16 @@
 	<link rel="shortcut icon" href="../favicon.ico">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=DM+Sans|Inter|Space+Mono|Work+Sans|Libre+Franklin&display=swap" rel="stylesheet">
-	<style>
+	<link rel="stylesheet" href="styles.css"> <!-- 引入单独的 CSS 文件 -->
 		/* 基础样式 */
 		body {
 			font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
 			margin: 0;
 			padding: 20px;
 			background: #1C1B1F;
 			color: #E6E1E5;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 100vh;
 		}
 		.container {
 			text-align: center;
 			background: #2B2930;
 			padding: 48px;
 			border-radius: 28px;
 			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 			animation: fadeIn 0.3s ease-in-out;
 		}
 		.time {
 			font-size: 10rem;
 			margin: 0;
 			color: #D0BCFF;
 			font-weight: 400;
 			text-shadow: none;
 		}
 		.text {
 			font-size: 1.5rem;
 			margin-bottom: 32px;
 			color: #E6E1E5;
 		}
 		.controls {
 			margin-top: 40px;
 			display: flex;
 			gap: 12px;
 			flex-wrap: wrap;
 			justify-content: center;
 		}
 		.btn, #fontSelector {
 			padding: 12px 24px;
 			border: none;
 			border-radius: 20px;
 			cursor: pointer;
 			transition: all 0.2s ease;
 			font-size: 1rem;
 			font-weight: 500;
 			background-color: #4A4458;
 			color: #E6E1E5;
 			box-shadow: 0 1px 3px rgba(0,0,0,0.3);
 		}
 		.btn:hover, #fontSelector:hover {
 			background-color: #635B70;
 			transform: translateY(-1px);
 			box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 		}
 		#fontSelector {
 			padding: 10px 20px;
 		}
 		.btn.fullscreen {
 			background-color: #5C1130;
 			color: #FFB3B3;
 		}
 		.btn.fullscreen:hover {
 			background-color: #7D2046;
 		}
 		/* 简化动画效果 */
 		@keyframes fadeIn {
 			from { opacity: 0; transform: translateY(10px); }
 			to { opacity: 1; transform: translateY(0); }
 		}
 		/* 删除发光动画，符合 MD3 的简洁风格 */
 		/* 下拉菜单样式 */
 		select {
 			appearance: none;
 			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E6E1E5'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
 			background-repeat: no-repeat;
 			background-position: right 10px center;
 			background-size: 20px;
 			padding-right: 40px;
 		}
 		select option {
 			background-color: #2B2930;
 			color: #E6E1E5;
 		}
 	</style>
 </head>
 <body>
 	<button id="return-btn" onclick="goBack()">返回</button> <!-- 新增返回按钮 -->
 	<div class="container">
 		<div class="text">当前时间：</div>
 		<div class="time" id="time"></div>
 		<div class="controls">
-			<select id="fontSelector" class="btn">
+			<select id="fontSelector" class="btn" onchange="changeFontFamily()">
 				<!-- 新增的Google字体选项 -->
 				<option value="Roboto">Roboto（在线）</option>
 				<option value="DM Sans">DM Sans（在线）</option>
 				<option value="Inter">Inter（在线）</option>
@ -149,7 +50,10 @@
 				<option value="黑体">黑体</option>
 				<option value="宋体">宋体</option>
 			</select>
-			<button class="btn" onclick="changeFontFamily()">更改字体</button>
+			<div class="font-size-control">
 				<input type="number" id="fontSizeInput" class="btn" value="160" min="10" max="500" step="5">
 				<span class="unit">px</span>
 			</div>
 			<button class="btn" onclick="changeFontSize(-5)">减小字号</button>
 			<button class="btn" onclick="changeFontSize(5)">增大字号</button>
 			<button class="btn fullscreen" onclick="toggleFullScreen()">全屏/还原</button>
@ -157,6 +61,11 @@
 	</div>
 	<script>
 		// 返回上级目录的函数
 		function goBack() {
 			window.history.back();
 		}
 		setInterval(() => {
 			const date = new Date();
 			const time = date.toLocaleTimeString('zh-CN', {
@ -167,9 +76,17 @@
 		function changeFontSize(change) {
 			const elements = document.querySelectorAll('.time');
 			const input = document.getElementById('fontSizeInput');
 			elements.forEach(element => {
 				let newSize;
 				if (typeof change === 'number') {
 					const currentSize = parseFloat(window.getComputedStyle(element).fontSize);
-				element.style.fontSize = `${currentSize + change}px`;
+					newSize = currentSize + change;
 					input.value = newSize;
 				} else {
 					newSize = parseInt(input.value);
 				}
 				element.style.fontSize = `${newSize}px`;
 			});
 		}
@ -190,6 +107,12 @@
 				}
 			}
 		}
 		// 监听字号输入框变化
 		document.getElementById('fontSizeInput').addEventListener('input', () => changeFontSize());
 		// 初始化默认字号
 		window.addEventListener('load', () => changeFontSize());
 	</script>
 </body>
--- a/time/styles.css
+++ b/time/styles.css
@ -0,0 +1,129 @@
 /* 基础样式 */
 body {
    font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
    margin: 0;
    padding: 20px;
    background: #1C1B1F;
    color: #E6E1E5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
 }
 .container {
    text-align: center;
    background: #2B2930;
    padding: 48px;
    border-radius: 28px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease-in-out;
 }
 .time {
    font-size: 160px;  /* 更新默认字号 */
    margin: 0;
    color: #D0BCFF;
    font-weight: 400;
    text-shadow: none;
 }
 .text {
    font-size: 1.8rem;
    margin-bottom: 32px;
    color: #E6E1E5;
 }
 .controls {
    margin-top: 40px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
 }
 .btn,
 #fontSelector {
    padding: 12px 24px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    font-weight: 500;
    background-color: #4A4458;
    color: #E6E1E5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 .btn:hover,
 #fontSelector:hover {
    background-color: #635B70;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
 }
 #fontSelector {
    padding: 10px 20px;
 }
 .btn.fullscreen {
    background-color: #5C1130;
    color: #FFB3B3;
 }
 .btn.fullscreen:hover {
    background-color: #7D2046;
 }
 /* 返回按钮样式 */
 #return-btn {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部 20px */
    left: 20px; /* 距离左侧 20px */
    padding: 12px 24px; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    background-color: #2b2b2b; /* 按钮背景颜色 */
    color: #ffffff; /* 按钮文字颜色 */
    border: 1px solid #444444; /* 按钮边框样式 */
    border-radius: 20px; /* 按钮圆角大小 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
    z-index: 1001; /* 按钮层级 */
 }
 #return-btn:hover {
    background-color: #3c3c3c; /* 悬停时的背景颜色 */
    transform: translateY(-1px); /* 悬停时向上移动 1px */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
 }
 /* 简化动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 .font-size-control {
    display: flex;
    align-items: center;
    gap: 4px;
 }
 #fontSizeInput {
    width: 70px;
    text-align: center;
    padding: 12px 8px;
 }
 .unit {
    color: #E6E1E5;
    font-size: 0.9rem;
 }
Author	SHA1	Message	Date
MKStoler1024	a8f8080327	fix: 优化关于链接样式，使用flex布局实现图标与文字垂直居中	2025-04-23 22:46:33 +00:00
MKStoler1024	70562f8563	fix: 修复考试时间显示逻辑，优化剩余时间格式，调整样式	2025-04-23 15:08:35 +00:00
MKStoler1024	c759f051b3	chore: examconfig	2025-04-23 17:12:17 +08:00
MKStoler1024	68deff86b1	fix: md3亮色样式丢失	2025-04-22 15:17:43 +00:00
MKStoler1024	c3f6a5c091	chore: 更新时间表	2025-04-22 15:09:00 +00:00
KeilAwk	d248463086	fix: 修复reminder无法正确注册	2025-04-20 23:58:09 +08:00
MKStoler1024	23927cdd20	feat: 优化主导航按钮样式，调整布局和交互效果，移除选择版本标题	2025-04-15 15:12:05 +00:00
MKStoler1024	9b88b395f6	feat: 主页icon	2025-04-14 17:14:26 +00:00
MKStoler1024	f608a788f4	feat: 更新关于页面，添加功能特点、部署说明和开发信息，优化样式	2025-04-14 17:09:54 +00:00
MKStoler1024	e5a75c8a69	feat: 调整表格样式以匹配深色主题，修改边框颜色和内边距	2025-04-14 16:49:20 +00:00
MKStoler1024	7e6ed74f39	feat: 添加自动切换显示功能，优化试卷和答题卡数量控制样式	2025-04-14 16:24:23 +00:00
MKStoler1024	24c6a78b6d	feat: 移除消息编辑功能相关说明	2025-04-14 00:40:16 +08:00
Hellofhz	230794902d	feat: 添加考试广播返回按钮	2025-04-13 20:11:48 +08:00
fhzit	9db25b5623	feat: 添加考试广播返回按钮	2025-04-13 13:35:14 +08:00
MKStoler1024	7a2fbf0603	feat: 添加试卷和答题卡数量控制功能，优化信息显示样式	2025-04-12 17:06:30 +00:00
MKStoler1024	3ced2cf789	feat: 调整考试状态标签样式，修改边框圆角和字体大小	2025-04-12 15:24:50 +00:00
MKStoler1024	9afc4d4d4b	feat: 统一按钮背景颜色和悬停效果，优化整体样式	2025-04-12 15:23:08 +00:00
MKStoler1024	8aabdb8e00	feat: 更新时间格式显示，增加小时和秒的支持；优化表格样式，统一单元格内边距	2025-04-12 15:02:33 +00:00
MKStoler1024	7e3927dc96	feat: 添加字体大小控制功能，更新默认字号样式	2025-04-12 14:57:53 +00:00
MKStoler1024	2b7a35ab8e	feat: 添加 Material Icons 字体支持，优化选择页面样式和布局	2025-04-12 14:52:50 +00:00
MKStoler1024	ffbf6569f5	feat: 添加 Material Icons 字体支持，优化按钮样式和布局	2025-04-12 14:49:27 +00:00
Hellofhz	5d9879a964	feat: 在线时间和考试看板返回按钮的实现 #20	2025-04-12 21:58:07 +08:00
Hellofhz	a3ca92e58f	docs: update README 更新了README文件中的部署教程链接，更新了截图	2025-04-12 19:18:16 +08:00
fhzit	835e1cd2d5	docs: update README 更新了README文件中的部署教程链接，更新了截图	2025-04-12 19:16:39 +08:00
MKStoler1024	5f4fdc186c	feat: 更新考试时间配置，调整日期和时间以确保准确性	2025-04-12 02:09:14 +00:00
MKStoler1024	55fecdf88b	feat: 更新考试信息提醒逻辑，优化样式以适应不同屏幕宽度	2025-04-10 17:40:08 +00:00
MKStoler1024	27a7a760ad	feat: 添加考试提醒功能，更新主题样式并优化配置	2025-04-10 17:23:35 +00:00
MKStoler1024	24c9a6a3e7	feat: 切换主题 - Created light.css and dark.css files for Material Design 3 with appropriate styles for body, buttons, tables, and modals. - Added light.css for ExamAware-Leagy theme with a consistent design for various UI components. - Introduced a profile.json file to manage theme configurations, allowing for easy switching between themes. - Ensured responsive design and accessibility features across all styles.	2025-04-10 16:54:48 +00:00