mirror of
https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule
synced 2025-04-29 08:06:33 +00:00
feat: （重大更新）添加主题切换功能，优化颜色和样式
This commit is contained in:
MKStoler1024
parent
6ce7bcbb59
commit
5659ad56d3
@ -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>
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user