feat: (重大更新)添加主题切换功能,优化颜色和样式

This commit is contained in:
MKStoler1024 2025-02-01 14:14:26 +00:00
parent 6ce7bcbb59
commit 5659ad56d3
3 changed files with 156 additions and 31 deletions

View File

@ -49,6 +49,7 @@
<input type="text" id="room-input" name="room-input" value=""> <input type="text" id="room-input" name="room-input" value="">
<label for="zoom-input">页面缩放倍数:</label> <label for="zoom-input">页面缩放倍数:</label>
<input type="number" id="zoom-input" step="0.1" min="0.5" max="2"> <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="save-settings-btn">确定</button>
<button id="close-settings-btn">关闭</button> <button id="close-settings-btn">关闭</button>
</div> </div>

View File

@ -24,6 +24,10 @@ document.addEventListener("DOMContentLoaded", () => {
offsetTime = parseInt(offsetTime); offsetTime = parseInt(offsetTime);
roomElem.textContent = room; roomElem.textContent = room;
let remainingTimeColor = "#3946AF";
let statusColor = "#225036";
let upcomingStatusColor = "#DBA014";
function fetchData() { function fetchData() {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const configId = urlParams.get('configId'); const configId = urlParams.get('configId');
@ -98,12 +102,12 @@ document.addEventListener("DOMContentLoaded", () => {
remainingTimeElem.style.fontWeight = "bold"; remainingTimeElem.style.fontWeight = "bold";
} else { } else {
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`; remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
remainingTimeElem.style.color = "#93b4f7"; remainingTimeElem.style.color = remainingTimeColor;
remainingTimeElem.style.fontWeight = "normal"; remainingTimeElem.style.fontWeight = "normal";
} }
statusElem.textContent = "状态: 进行中"; statusElem.textContent = "状态: 进行中";
statusElem.style.color = "#5ba838"; statusElem.style.color = statusColor;
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) { } else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000; const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`; currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
@ -124,13 +128,13 @@ document.addEventListener("DOMContentLoaded", () => {
remainingTimeElem.style.color = "orange"; remainingTimeElem.style.color = "orange";
remainingTimeElem.style.fontWeight = "bold"; remainingTimeElem.style.fontWeight = "bold";
statusElem.textContent = "状态: 即将开始"; statusElem.textContent = "状态: 即将开始";
statusElem.style.color = "#DBA014"; statusElem.style.color = upcomingStatusColor;
} else { } else {
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`; currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
remainingTimeElem.textContent = ""; remainingTimeElem.textContent = "";
statusElem.textContent = "状态: 未开始"; statusElem.textContent = "状态: 未开始";
remainingTimeElem.style.fontWeight = "normal"; 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 }))}`; 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; 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(); fetchData();
}); });

View File

@ -5,7 +5,7 @@ body {
background: url('../background.jpg') no-repeat center center fixed; background: url('../background.jpg') no-repeat center center fixed;
background-size: cover; background-size: cover;
animation: fadeIn 1s; animation: fadeIn 1s;
color: #e0e0e0; color: #000000;
overflow: auto; /* 允许页面滚动 */ overflow: auto; /* 允许页面滚动 */
} }
@ -26,9 +26,9 @@ body::-webkit-scrollbar {
padding: 10px 20px; padding: 10px 20px;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
background-color: #1f1f1f; background-color: #ffffff;
color: #e0e0e0; color: #000000;
border: 1px solid #333; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease;
@ -42,9 +42,9 @@ body::-webkit-scrollbar {
padding: 10px 20px; padding: 10px 20px;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
background-color: #1f1f1f; background-color: #ffffff;
color: #e0e0e0; color: #000000;
border: 1px solid #333; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease;
@ -52,12 +52,12 @@ body::-webkit-scrollbar {
} }
#settings-btn:hover { #settings-btn:hover {
background-color: #333; background-color: #f0f0f0;
transform: scale(1.05); transform: scale(1.05);
} }
#fullscreen-btn:hover { #fullscreen-btn:hover {
background-color: #333; background-color: #f0f0f0;
transform: scale(1.05); transform: scale(1.05);
} }
@ -65,7 +65,7 @@ body::-webkit-scrollbar {
padding: 20px; padding: 20px;
max-width: 1400px; /* 增加主体部分宽度 */ max-width: 1400px; /* 增加主体部分宽度 */
margin: auto; margin: auto;
background-color: rgba(31, 31, 31, 0.5); /* 使用rgba设置背景透明度 */ background-color: rgba(255, 255, 255, 0.5); /* 使用rgba设置背景透明度 */
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
} }
@ -75,7 +75,7 @@ h1 {
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
margin-bottom: 10px; margin-bottom: 10px;
color: #e0e0e0; color: #000000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -84,7 +84,7 @@ h1 {
#room { #room {
font-size: 3.5rem; font-size: 3.5rem;
font-weight: bold; font-weight: bold;
color: #e0e0e0; color: #000000;
position: relative; position: relative;
right: 0; right: 0;
margin-left: 20px; /* 调整位置使其保持在container中 */ margin-left: 20px; /* 调整位置使其保持在container中 */
@ -92,7 +92,7 @@ h1 {
#message { #message {
font-size: 1.5rem; font-size: 1.5rem;
color: #16a3d1; color: #134858;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -103,7 +103,7 @@ h1 {
.left-column, .right-column { .left-column, .right-column {
width: 48%; width: 48%;
background-color: rgba(31, 31, 31, 0.2); background-color: rgba(255, 255, 255, 0.2);
padding: 20px; padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 8px; border-radius: 8px;
@ -114,36 +114,36 @@ h1 {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
color: #7cc3fb; color: #000000;
} }
#current-subject, #exam-timing, #remaining-time, #status { #current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem; font-size: 3rem;
margin: 10px 0; margin: 10px 0;
text-align: left; text-align: left;
color: #e0e0e0; color: #000000;
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 20px; margin-top: 20px;
border: 1px solid #333; border: 1px solid #ccc;
background-color: rgba(31, 31, 31, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
th, td { th, td {
border: 1px solid #333; border: 1px solid #ccc;
padding: 8px; /* 缩短行高 */ padding: 8px; /* 缩短行高 */
font-size: 2rem; font-size: 2rem;
text-align: center; text-align: center;
} }
th { th {
background-color: #333; background-color: rgba(255, 255, 255, 0.5);
color: #7cc3fb; color: #134858;
font-weight: bold; font-weight: bold;
border-bottom: 2px solid #2b71ad; border-bottom: 2px solid #134858;
} }
.exam-status-进行中 td { .exam-status-进行中 td {
@ -163,7 +163,7 @@ th {
} }
tr:hover { tr:hover {
background-color: #333; background-color: #f0f0f0;
} }
table { table {
@ -172,7 +172,7 @@ table {
} }
td { td {
border-bottom: 1px solid #333; border-bottom: 1px solid #ccc;
} }
td:first-child { td:first-child {
@ -200,7 +200,7 @@ td:last-child {
} }
#settings-modal-content { #settings-modal-content {
background-color: #1f1f1f; background-color: #ffffff;
margin: 5% auto; margin: 5% auto;
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
@ -223,8 +223,8 @@ td:last-child {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
background-color: #121212; background-color: #ffffff;
color: #e0e0e0; color: #000000;
} }
#settings-modal-content button { #settings-modal-content button {
@ -258,3 +258,89 @@ td:last-child {
#close-settings-btn:hover { #close-settings-btn:hover {
background-color: #c9302c; 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;
}