style: 添加设置模态框淡出动画，优化关闭和保存设置的用户体验

exam/Scripts/examInfo.js

@@ -7,8 +7,8 @@ document.addEventListener("DOMContentLoaded", () => {
     const remainingTimeElem = document.getElementById("remaining-time");
     const statusElem = document.getElementById("status");
     const examTableBodyElem = document.getElementById("exam-table-body");
-    const roomElem = document.getElementById("room"); // 添加这一行
-    let offsetTime = getCookie("offsetTime") || 0; // 添加这一行
+    const roomElem = document.getElementById("room");
+    let offsetTime = getCookie("offsetTime") || 0;
 
     function fetchData() {
         return fetch('exam_config.json', { cache: "no-store" })

exam/Scripts/settings.js

@@ -23,7 +23,11 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     closeSettingsBtn.addEventListener("click", () => {
-        settingsModal.style.display = "none";
+        settingsModal.classList.add("fade-out");
+        setTimeout(() => {
+            settingsModal.style.display = "none";
+            settingsModal.classList.remove("fade-out");
+        }, 300);
     });
 
     saveSettingsBtn.addEventListener("click", () => {
@@ -35,7 +39,13 @@ document.addEventListener("DOMContentLoaded", () => {
         setCookie("zoomLevel", zoomLevel, 365);
         roomElem.textContent = room;
         document.body.style.zoom = zoomLevel;
-        settingsModal.style.display = "none";
+        settingsModal.classList.add("fade-out");
+        setTimeout(() => {
+            settingsModal.style.display = "none";
+            settingsModal.classList.remove("fade-out");
+        }, 300);
+        // 立即生效时间偏移
+        location.reload();
     });
 
     document.body.style.zoom = zoomLevel;

exam/Styles/dark.css

@@ -207,6 +207,15 @@ td:last-child {
     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;