From 5659ad56d3ab66d2f7da73f9d7e7b90362822858 Mon Sep 17 00:00:00 2001
From: MKStoler1024 <158786854+MKStoler1024@users.noreply.github.com>
Date: Sat, 1 Feb 2025 14:14:26 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=EF=BC=88=E9=87=8D=E5=A4=A7=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=EF=BC=89=E6=B7=BB=E5=8A=A0=E4=B8=BB=E9=A2=98=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ExamCloudSchedule/index.html |   1 +
 ExamCloudSchedule/script.js  |  46 +++++++++++-
 ExamCloudSchedule/styles.css | 140 ++++++++++++++++++++++++++++-------
 3 files changed, 156 insertions(+), 31 deletions(-)

diff --git a/ExamCloudSchedule/index.html b/ExamCloudSchedule/index.html
index f2d8014..9dd73f8 100644
--- a/ExamCloudSchedule/index.html
+++ b/ExamCloudSchedule/index.html
@@ -49,6 +49,7 @@
             <input type="text" id="room-input" name="room-input" value="">
             <label for="zoom-input">页面缩放倍数:</label>
             <input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
+            <button id="theme-toggle-btn">切换主题</button>
             <button id="save-settings-btn">确定</button>
             <button id="close-settings-btn">关闭</button>
         </div>
diff --git a/ExamCloudSchedule/script.js b/ExamCloudSchedule/script.js
index 527351c..afc97a7 100644
--- a/ExamCloudSchedule/script.js
+++ b/ExamCloudSchedule/script.js
@@ -24,6 +24,10 @@ document.addEventListener("DOMContentLoaded", () => {
     offsetTime = parseInt(offsetTime);
     roomElem.textContent = room;
 
+    let remainingTimeColor = "#3946AF";
+    let statusColor = "#225036";
+    let upcomingStatusColor = "#DBA014";
+
     function fetchData() {
         const urlParams = new URLSearchParams(window.location.search);
         const configId = urlParams.get('configId');
@@ -98,12 +102,12 @@ document.addEventListener("DOMContentLoaded", () => {
                 remainingTimeElem.style.fontWeight = "bold";
             } else {
                 remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
-                remainingTimeElem.style.color = "#93b4f7";
+                remainingTimeElem.style.color = remainingTimeColor;
                 remainingTimeElem.style.fontWeight = "normal";
             }
 
             statusElem.textContent = "状态: 进行中";
-            statusElem.style.color = "#5ba838";
+            statusElem.style.color = statusColor;
         } else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
             const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
             currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
@@ -124,13 +128,13 @@ document.addEventListener("DOMContentLoaded", () => {
                 remainingTimeElem.style.color = "orange";
                 remainingTimeElem.style.fontWeight = "bold";
                 statusElem.textContent = "状态: 即将开始";
-                statusElem.style.color = "#DBA014";
+                statusElem.style.color = upcomingStatusColor;
             } else {
                 currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
                 remainingTimeElem.textContent = "";
                 statusElem.textContent = "状态: 未开始";
                 remainingTimeElem.style.fontWeight = "normal";
-                statusElem.style.color = "#EAEE5B";
+                statusElem.style.color = "#C6813C";
             }
 
             examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
@@ -226,5 +230,39 @@ document.addEventListener("DOMContentLoaded", () => {
         return null;
     }
 
+    document.getElementById('theme-toggle-btn').addEventListener('click', function() {
+        document.body.classList.toggle('dark-theme');
+        if (document.body.classList.contains('dark-theme')) {
+            remainingTimeColor = '#ADD8FB'; // 暗色主题下的颜色
+            statusColor = '#A2BB7A'; // 暗色主题下的颜色
+            upcomingStatusColor = '#DBA014'; // 暗色主题下的颜色
+        } else {
+            remainingTimeColor = '#3946AF'; // 亮色主题下的颜色
+            statusColor = '#225036'; // 亮色主题下的颜色
+            upcomingStatusColor = '#F26A3A'; // 亮色主题下的颜色
+        }
+        updateRemainingTimeColor();
+        updateStatusColor();
+    });
+
+    function updateRemainingTimeColor() {
+        const remainingTimeElement = document.getElementById('remaining-time');
+        const remainingTimeText = remainingTimeElement.textContent;
+        const remainingMinutes = parseInt(remainingTimeText);
+
+        if (remainingMinutes > 15) {
+            remainingTimeElement.style.color = remainingTimeColor;
+        }
+    }
+
+    function updateStatusColor() {
+        const statusElement = document.getElementById('status');
+        if (statusElement.textContent.includes('进行中')) {
+            statusElement.style.color = statusColor;
+        } else if (statusElement.textContent.includes('即将开始')) {
+            statusElement.style.color = upcomingStatusColor;
+        }
+    }
+
     fetchData();
 });
diff --git a/ExamCloudSchedule/styles.css b/ExamCloudSchedule/styles.css
index 57f31a4..1f5a192 100644
--- a/ExamCloudSchedule/styles.css
+++ b/ExamCloudSchedule/styles.css
@@ -5,7 +5,7 @@ body {
     background: url('../background.jpg') no-repeat center center fixed;
     background-size: cover;
     animation: fadeIn 1s;
-    color: #e0e0e0;
+    color: #000000;
     overflow: auto; /* 允许页面滚动 */
 }
 
@@ -26,9 +26,9 @@ body::-webkit-scrollbar {
     padding: 10px 20px;
     font-size: 1rem;
     cursor: pointer;
-    background-color: #1f1f1f;
-    color: #e0e0e0;
-    border: 1px solid #333;
+    background-color: #ffffff;
+    color: #000000;
+    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;
@@ -42,9 +42,9 @@ body::-webkit-scrollbar {
     padding: 10px 20px;
     font-size: 1rem;
     cursor: pointer;
-    background-color: #1f1f1f;
-    color: #e0e0e0;
-    border: 1px solid #333;
+    background-color: #ffffff;
+    color: #000000;
+    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;
@@ -52,12 +52,12 @@ body::-webkit-scrollbar {
 }
 
 #settings-btn:hover {
-    background-color: #333;
+    background-color: #f0f0f0;
     transform: scale(1.05);
 }
 
 #fullscreen-btn:hover {
-    background-color: #333;
+    background-color: #f0f0f0;
     transform: scale(1.05);
 }
 
@@ -65,7 +65,7 @@ body::-webkit-scrollbar {
     padding: 20px;
     max-width: 1400px; /* 增加主体部分宽度 */
     margin: auto;
-    background-color: rgba(31, 31, 31, 0.5); /* 使用rgba设置背景透明度 */
+    background-color: rgba(255, 255, 255, 0.5); /* 使用rgba设置背景透明度 */
     border-radius: 8px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
@@ -75,7 +75,7 @@ h1 {
     font-weight: bold;
     text-align: left;
     margin-bottom: 10px;
-    color: #e0e0e0;
+    color: #000000;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -84,7 +84,7 @@ h1 {
 #room {
     font-size: 3.5rem;
     font-weight: bold;
-    color: #e0e0e0;
+    color: #000000;
     position: relative;
     right: 0;
     margin-left: 20px; /* 调整位置使其保持在container中 */
@@ -92,7 +92,7 @@ h1 {
 
 #message {
     font-size: 1.5rem;
-    color: #16a3d1;
+    color: #134858;
     margin-bottom: 20px;
 }
 
@@ -103,7 +103,7 @@ h1 {
 
 .left-column, .right-column {
     width: 48%;
-    background-color: rgba(31, 31, 31, 0.2);
+    background-color: rgba(255, 255, 255, 0.2);
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     border-radius: 8px;
@@ -114,36 +114,36 @@ h1 {
     font-weight: bold;
     text-align: center;
     margin-bottom: 20px;
-    color: #7cc3fb;
+    color: #000000;
 }
 
 #current-subject, #exam-timing, #remaining-time, #status {
     font-size: 3rem;
     margin: 10px 0;
     text-align: left;
-    color: #e0e0e0;
+    color: #000000;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
-    border: 1px solid #333;
-    background-color: rgba(31, 31, 31, 0.5);
+    border: 1px solid #ccc;
+    background-color: rgba(255, 255, 255, 0.5);
 }
 
 th, td {
-    border: 1px solid #333;
+    border: 1px solid #ccc;
     padding: 8px; /* 缩短行高 */
     font-size: 2rem;
     text-align: center;
 }
 
 th {
-    background-color: #333;
-    color: #7cc3fb;
+    background-color: rgba(255, 255, 255, 0.5);
+    color: #134858;
     font-weight: bold;
-    border-bottom: 2px solid #2b71ad;
+    border-bottom: 2px solid #134858;
 }
 
 .exam-status-进行中 td {
@@ -163,7 +163,7 @@ th {
 }
 
 tr:hover {
-    background-color: #333;
+    background-color: #f0f0f0;
 }
 
 table {
@@ -172,7 +172,7 @@ table {
 }
 
 td {
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #ccc;
 }
 
 td:first-child {
@@ -200,7 +200,7 @@ td:last-child {
 }
 
 #settings-modal-content {
-    background-color: #1f1f1f;
+    background-color: #ffffff;
     margin: 5% auto;
     padding: 20px;
     border: 1px solid #888;
@@ -223,8 +223,8 @@ td:last-child {
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 5px;
-    background-color: #121212;
-    color: #e0e0e0;
+    background-color: #ffffff;
+    color: #000000;
 }
 
 #settings-modal-content button {
@@ -258,3 +258,89 @@ td:last-child {
 #close-settings-btn:hover {
     background-color: #c9302c;
 }
+
+body.dark-theme {
+    background-image: url('../background-dark.jpg');
+    color: #ffffff;
+}
+
+body.dark-theme .container {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+body.dark-theme .left-column, 
+body.dark-theme .right-column {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+body.dark-theme #current-time {
+    color: #ffffff;
+}
+
+body.dark-theme #current-subject, 
+body.dark-theme #exam-timing, 
+body.dark-theme #remaining-time, 
+body.dark-theme #status {
+    color: #ffffff;
+}
+
+body.dark-theme h1, 
+body.dark-theme #room {
+    color: #ffffff;
+}
+
+body.dark-theme table {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+body.dark-theme th, 
+body.dark-theme td {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+body.dark-theme th {
+    background-color: rgba(0, 0, 0, 0.2);
+    color: #7cc3fb;
+    border-bottom: 2px solid #134858;
+}
+
+body.dark-theme #settings-modal-content {
+    background-color: #333;
+    border: 1px solid #666;
+}
+
+body.dark-theme #settings-modal-content label,
+body.dark-theme #settings-modal-content input[type="number"],
+body.dark-theme #settings-modal-content input[type="text"] {
+    color: #ffffff;
+    background-color: #444;
+    border: 1px solid #666;
+}
+
+body.dark-theme #settings-modal-content button {
+    background-color: #555;
+    color: #ffffff;
+    border: 1px solid #666;
+}
+
+body.dark-theme #settings-modal-content button:hover {
+    background-color: #666;
+}
+
+body.dark-theme #settings-btn,
+body.dark-theme #fullscreen-btn,
+body.dark-theme #theme-toggle-btn,
+body.dark-theme #save-settings-btn,
+body.dark-theme #close-settings-btn {
+    background-color: #444;
+    color: #ffffff;
+    border: 1px solid #666;
+}
+
+body.dark-theme #settings-btn:hover,
+body.dark-theme #fullscreen-btn:hover,
+body.dark-theme #theme-toggle-btn:hover,
+body.dark-theme #save-settings-btn:hover,
+body.dark-theme #close-settings-btn:hover {
+    background-color: #666;
+}