mirror of
https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule
synced 2025-04-29 08:06:33 +00:00
chore: 同步ES代码
This commit is contained in:
MKStoler1024
parent
90b765573d
commit
f57ffbf367
@ -1,59 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Exam Schedule</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<button id="settings-btn">设置</button>
|
||||
<button id="fullscreen-btn">全屏</button>
|
||||
<div class="container">
|
||||
<h1 id="examName">
|
||||
考试安排
|
||||
<span id="room"></span>
|
||||
</h1>
|
||||
<p id="message"></p>
|
||||
<div class="content">
|
||||
<div class="left-column">
|
||||
<div id="current-time"></div>
|
||||
<div id="current-subject"></div>
|
||||
<div id="exam-timing"></div>
|
||||
<div id="remaining-time"></div>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
<div class="right-column">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>科目</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="exam-table-body">
|
||||
<!-- Dynamically filled by JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Settings Modal -->
|
||||
<div id="settings-modal">
|
||||
<div id="settings-modal-content">
|
||||
<label for="offset-time">偏移时间（秒）:</label>
|
||||
<input type="number" id="offset-time" name="offset-time" value="0">
|
||||
<label for="room-input">考场号:</label>
|
||||
<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>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,272 +0,0 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const examNameElem = document.getElementById("examName");
|
||||
const messageElem = document.getElementById("message");
|
||||
const currentTimeElem = document.getElementById("current-time");
|
||||
const currentSubjectElem = document.getElementById("current-subject");
|
||||
const examTimingElem = document.getElementById("exam-timing");
|
||||
const remainingTimeElem = document.getElementById("remaining-time");
|
||||
const statusElem = document.getElementById("status");
|
||||
const examTableBodyElem = document.getElementById("exam-table-body");
|
||||
const fullscreenBtn = document.getElementById("fullscreen-btn");
|
||||
const settingsBtn = document.getElementById("settings-btn");
|
||||
const settingsModal = document.getElementById("settings-modal");
|
||||
const closeSettingsBtn = document.getElementById("close-settings-btn");
|
||||
const saveSettingsBtn = document.getElementById("save-settings-btn");
|
||||
const offsetTimeInput = document.getElementById("offset-time");
|
||||
const roomInput = document.getElementById("room-input");
|
||||
const roomElem = document.getElementById("room");
|
||||
const zoomInput = document.getElementById("zoom-input");
|
||||
|
||||
let offsetTime = getCookie("offsetTime") || 0;
|
||||
let room = getCookie("room") || "";
|
||||
let zoomLevel = getCookie("zoomLevel") || 1;
|
||||
|
||||
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');
|
||||
if (!configId) {
|
||||
console.error('No configId provided');
|
||||
return;
|
||||
}
|
||||
|
||||
return fetch(`/get_config.php?id=${encodeURIComponent(configId)}`, { cache: "no-store" }) // 不保留缓存
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (!room) {
|
||||
room = data.room;
|
||||
roomElem.textContent = room;
|
||||
}
|
||||
displayExamInfo(data);
|
||||
updateCurrentTime();
|
||||
updateExamInfo(data);
|
||||
setInterval(() => updateCurrentTime(), 1000); // Update current time every second
|
||||
setInterval(() => updateExamInfo(data), 1000); // Update exam info every second
|
||||
})
|
||||
.catch(error => console.error('Error fetching exam data:', error));
|
||||
}
|
||||
|
||||
function displayExamInfo(data) {
|
||||
// Display exam name
|
||||
const examNameText = data.examName;
|
||||
const roomText = roomElem.textContent;
|
||||
examNameElem.innerHTML = `${examNameText} <span id="room">${roomText}</span>`;
|
||||
// Display message
|
||||
messageElem.textContent = data.message;
|
||||
}
|
||||
|
||||
function updateCurrentTime() {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
currentTimeElem.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
}
|
||||
|
||||
function formatTimeWithoutSeconds(time) {
|
||||
// Convert time to string and remove seconds if present
|
||||
return time.slice(0, -3);
|
||||
}
|
||||
|
||||
function updateExamInfo(data) {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
let currentExam = null;
|
||||
let nextExam = null;
|
||||
let lastExam = null;
|
||||
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
if (now >= start && now <= end) {
|
||||
currentExam = exam;
|
||||
}
|
||||
if (!currentExam && !nextExam && now < start) {
|
||||
nextExam = exam;
|
||||
}
|
||||
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
||||
lastExam = exam;
|
||||
}
|
||||
});
|
||||
|
||||
if (currentExam) {
|
||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||
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}秒`;
|
||||
|
||||
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "red";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
} else {
|
||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = remainingTimeColor;
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
}
|
||||
|
||||
statusElem.textContent = "状态: 进行中";
|
||||
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}`;
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = ``;
|
||||
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}秒`;
|
||||
|
||||
if (timeUntilStart <= 15 * 60) {
|
||||
currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "orange";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
statusElem.textContent = "状态: 即将开始";
|
||||
statusElem.style.color = upcomingStatusColor;
|
||||
} else {
|
||||
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 未开始";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
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 }))}`;
|
||||
} else {
|
||||
currentSubjectElem.textContent = "考试均已结束";
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 空闲";
|
||||
statusElem.style.color = "#3946AF";
|
||||
}
|
||||
|
||||
// Update next exams table
|
||||
examTableBodyElem.innerHTML = "";
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
let status = "";
|
||||
if (now < start) {
|
||||
status = "即将开始";
|
||||
} else if (now > end) {
|
||||
status = "已结束";
|
||||
} else {
|
||||
status = "进行中";
|
||||
}
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.className = `exam-status-${status}`;
|
||||
row.innerHTML = `
|
||||
<td>${exam.name}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td>${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
`;
|
||||
examTableBodyElem.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Fullscreen functionality
|
||||
fullscreenBtn.addEventListener("click", () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Open settings modal
|
||||
settingsBtn.addEventListener("click", () => {
|
||||
offsetTimeInput.value = offsetTime;
|
||||
roomInput.value = room;
|
||||
zoomInput.value = zoomLevel;
|
||||
settingsModal.style.display = "block";
|
||||
});
|
||||
|
||||
// Close settings modal
|
||||
closeSettingsBtn.addEventListener("click", () => {
|
||||
settingsModal.style.display = "none";
|
||||
});
|
||||
|
||||
// Save settings
|
||||
saveSettingsBtn.addEventListener("click", () => {
|
||||
offsetTime = parseInt(offsetTimeInput.value);
|
||||
room = roomInput.value;
|
||||
zoomLevel = parseFloat(zoomInput.value);
|
||||
setCookie("offsetTime", offsetTime, 365);
|
||||
setCookie("room", room, 365);
|
||||
setCookie("zoomLevel", zoomLevel, 365);
|
||||
roomElem.textContent = room;
|
||||
document.body.style.zoom = zoomLevel;
|
||||
settingsModal.style.display = "none";
|
||||
});
|
||||
|
||||
document.body.style.zoom = zoomLevel;
|
||||
|
||||
// Utility function to set a cookie
|
||||
function setCookie(name, value, days) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
const expires = "expires=" + d.toUTCString();
|
||||
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
// Utility function to get a cookie
|
||||
function getCookie(name) {
|
||||
const nameEQ = name + "=";
|
||||
const ca = document.cookie.split(';');
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
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();
|
||||
});
|
||||
@ -1,346 +0,0 @@
|
||||
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: #000000;
|
||||
overflow: auto; /* 允许页面滚动 */
|
||||
}
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
#fullscreen-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
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;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#settings-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 120px; /* Fullscreen button's left */
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
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;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#settings-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#fullscreen-btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
max-width: 1400px; /* 增加主体部分宽度 */
|
||||
margin: auto;
|
||||
background-color: rgba(255, 255, 255, 0.5); /* 使用rgba设置背景透明度 */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#room {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
right: 0;
|
||||
margin-left: 20px; /* 调整位置使其保持在container中 */
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
color: #134858;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left-column, .right-column {
|
||||
width: 48%;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#current-time {
|
||||
font-size: 10rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#current-subject, #exam-timing, #remaining-time, #status {
|
||||
font-size: 3rem;
|
||||
margin: 10px 0;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px; /* 缩短行高 */
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #134858;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #134858;
|
||||
}
|
||||
|
||||
.exam-status-进行中 td {
|
||||
color: #5ba838 !important; /* 绿色字体 */
|
||||
}
|
||||
|
||||
.exam-status-即将开始 td {
|
||||
color: #fe9901 !important; /* 橙色字体 */
|
||||
}
|
||||
|
||||
.exam-status-已结束 td {
|
||||
color: #ec0434 !important; /* 红色字体 */
|
||||
}
|
||||
|
||||
.exam-status-空闲 td {
|
||||
color: blue !important; /* 蓝色字体 */
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#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-color: #ffffff;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#settings-modal-content label {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#settings-modal-content input[type="number"],
|
||||
#settings-modal-content input[type="text"] {
|
||||
font-size: 2rem;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#settings-modal-content button {
|
||||
padding: 10px 20px;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
background-color: #93b4f7;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#settings-modal-content button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@ -155,7 +155,7 @@ header('Content-Type: text/html; charset=utf-8');
|
||||
|
||||
function enterSchedule() {
|
||||
const configId = document.getElementById('configId').value.trim();
|
||||
window.location.href = `/ExamCloudSchedule/index.html?configId=${encodeURIComponent(configId)}`;
|
||||
window.location.href = `/present/index.html?configId=${encodeURIComponent(configId)}`;
|
||||
}
|
||||
|
||||
// JSON高亮显示
|
||||
|
||||
211
present/Scripts/examInfo.js
Normal file
211
present/Scripts/examInfo.js
Normal file
@ -0,0 +1,211 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const examNameElem = document.getElementById("examName");
|
||||
const messageElem = document.getElementById("message");
|
||||
const currentTimeElem = document.getElementById("current-time");
|
||||
const currentSubjectElem = document.getElementById("current-subject");
|
||||
const examTimingElem = document.getElementById("exam-timing");
|
||||
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;
|
||||
|
||||
function fetchData() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const configId = urlParams.get('configId');
|
||||
|
||||
if (!configId) {
|
||||
errorSystem.show('未提供配置ID，请从主页进入');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/get_config.php?id=${encodeURIComponent(configId)}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => { throw err; });
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
displayExamInfo(data);
|
||||
updateCurrentTime();
|
||||
updateExamInfo(data);
|
||||
setInterval(() => updateCurrentTime(), 1000);
|
||||
setInterval(() => updateExamInfo(data), 1000);
|
||||
})
|
||||
.catch(error => errorSystem.show('获取考试数据失败: ' + error.message));
|
||||
}
|
||||
|
||||
function displayExamInfo(data) {
|
||||
try {
|
||||
const examNameText = data.examName;
|
||||
const roomText = roomElem.textContent;
|
||||
examNameElem.innerHTML = `${examNameText} <span id="room">${roomText}</span>`;
|
||||
messageElem.textContent = data.message;
|
||||
} catch (e) {
|
||||
errorSystem.show('显示考试信息失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCurrentTime() {
|
||||
try {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
currentTimeElem.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
} catch (e) {
|
||||
errorSystem.show('更新时间失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function updateExamInfo(data) {
|
||||
try {
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
let currentExam = null;
|
||||
let nextExam = null;
|
||||
let lastExam = null;
|
||||
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
if (now >= start && now <= end) {
|
||||
currentExam = exam;
|
||||
}
|
||||
if (!currentExam && !nextExam && now < start) {
|
||||
nextExam = exam;
|
||||
}
|
||||
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
||||
lastExam = exam;
|
||||
}
|
||||
});
|
||||
|
||||
if (currentExam) {
|
||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||
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}秒`;
|
||||
|
||||
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "red";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
statusElem.textContent = "状态: 即将结束";
|
||||
statusElem.style.color = "red";
|
||||
} else {
|
||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "#93b4f7";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
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;
|
||||
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = ``;
|
||||
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}秒`;
|
||||
|
||||
if (timeUntilStart <= 15 * 60) {
|
||||
currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "orange";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
statusElem.textContent = "状态: 即将开始";
|
||||
statusElem.style.color = "#DBA014";
|
||||
} else {
|
||||
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 未开始";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
statusElem.style.color = "#EAEE5B";
|
||||
}
|
||||
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
} else {
|
||||
currentSubjectElem.textContent = "考试均已结束";
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 空闲";
|
||||
statusElem.style.color = "#3946AF";
|
||||
}
|
||||
|
||||
examTableBodyElem.innerHTML = "";
|
||||
|
||||
// 预处理日期和时间段
|
||||
const dateGroups = {};
|
||||
data.examInfos.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const hour = start.getHours();
|
||||
const dateStr = `${start.getMonth() + 1}月${start.getDate()}日<br>${hour < 12 ? '上午' : (hour < 18 ? '下午' : '晚上')}`;
|
||||
|
||||
if (!dateGroups[dateStr]) {
|
||||
dateGroups[dateStr] = [];
|
||||
}
|
||||
dateGroups[dateStr].push(exam);
|
||||
});
|
||||
|
||||
// 生成表格
|
||||
Object.entries(dateGroups).forEach(([dateStr, exams]) => {
|
||||
let isFirstRow = true;
|
||||
// 计算实际需要的行数（考虑科目名称中的斜杠）
|
||||
const totalRows = exams.reduce((acc, exam) => {
|
||||
return acc + (exam.name.includes('/') ? exam.name.split('/').length : 1);
|
||||
}, 0);
|
||||
|
||||
exams.forEach(exam => {
|
||||
const start = new Date(exam.start);
|
||||
const end = new Date(exam.end);
|
||||
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||
|
||||
let status = "未开始";
|
||||
if (now < start) {
|
||||
status = now > new Date(start.getTime() - 15 * 60 * 1000) ? "即将开始" : "未开始";
|
||||
} else if (now > end) {
|
||||
status = "已结束";
|
||||
} else {
|
||||
status = "进行中";
|
||||
}
|
||||
|
||||
// 处理包含斜杠的科目名称
|
||||
const subjects = exam.name.split('/');
|
||||
subjects.forEach((subject, index) => {
|
||||
const row = document.createElement("tr");
|
||||
let cells = '';
|
||||
|
||||
if (isFirstRow) {
|
||||
cells = `<td rowspan="${totalRows}">${dateStr}</td>`;
|
||||
isFirstRow = false;
|
||||
}
|
||||
|
||||
// 仅在第一个科目行添加时间和状态
|
||||
if (index === 0) {
|
||||
cells += `
|
||||
<td>${subject.trim()}</td>
|
||||
<td rowspan="${subjects.length}">${formatTimeWithoutSeconds(start.toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td rowspan="${subjects.length}">${formatTimeWithoutSeconds(end.toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||
<td rowspan="${subjects.length}"><span class="exam-status-tag exam-status-${status}">${status}</span></td>
|
||||
`;
|
||||
} else {
|
||||
cells += `<td>${subject.trim()}</td>`;
|
||||
}
|
||||
|
||||
row.innerHTML = cells;
|
||||
examTableBodyElem.appendChild(row);
|
||||
});
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
errorSystem.show('更新考试信息失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
});
|
||||
17
present/Scripts/main.js
Normal file
17
present/Scripts/main.js
Normal file
@ -0,0 +1,17 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const fullscreenBtn = document.getElementById("fullscreen-btn");
|
||||
|
||||
fullscreenBtn.addEventListener("click", () => {
|
||||
try {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
errorSystem.show('全屏切换失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
86
present/Scripts/settings.js
Normal file
86
present/Scripts/settings.js
Normal file
@ -0,0 +1,86 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const settingsBtn = document.getElementById("settings-btn");
|
||||
const settingsModal = document.getElementById("settings-modal");
|
||||
const closeSettingsBtn = document.getElementById("close-settings-btn");
|
||||
const saveSettingsBtn = document.getElementById("save-settings-btn");
|
||||
const offsetTimeInput = document.getElementById("offset-time");
|
||||
const roomInput = document.getElementById("room-input");
|
||||
const roomElem = document.getElementById("room");
|
||||
const zoomInput = document.getElementById("zoom-input");
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const themeLink = document.getElementById("theme-link");
|
||||
|
||||
let offsetTime = getCookie("offsetTime") || 0;
|
||||
let room = getCookie("room") || "";
|
||||
let zoomLevel = getCookie("zoomLevel") || 1;
|
||||
let theme = getCookie("theme") || "dark";
|
||||
|
||||
offsetTime = parseInt(offsetTime);
|
||||
roomElem.textContent = room;
|
||||
|
||||
if (theme === "light") {
|
||||
themeLink.href = "Styles/light.css";
|
||||
themeToggle.checked = true;
|
||||
} else {
|
||||
themeLink.href = "Styles/dark.css";
|
||||
themeToggle.checked = false;
|
||||
}
|
||||
|
||||
settingsBtn.addEventListener("click", () => {
|
||||
try {
|
||||
offsetTimeInput.value = offsetTime;
|
||||
roomInput.value = room;
|
||||
zoomInput.value = zoomLevel;
|
||||
settingsModal.style.display = "block";
|
||||
} catch (e) {
|
||||
errorSystem.show('打开设置失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
closeSettingsBtn.addEventListener("click", () => {
|
||||
try {
|
||||
settingsModal.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
settingsModal.style.display = "none";
|
||||
settingsModal.classList.remove("fade-out");
|
||||
}, 300);
|
||||
} catch (e) {
|
||||
errorSystem.show('关闭设置失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
saveSettingsBtn.addEventListener("click", () => {
|
||||
try {
|
||||
offsetTime = parseInt(offsetTimeInput.value);
|
||||
room = roomInput.value;
|
||||
zoomLevel = parseFloat(zoomInput.value);
|
||||
theme = themeToggle.checked ? "light" : "dark";
|
||||
setCookie("offsetTime", offsetTime, 365);
|
||||
setCookie("room", room, 365);
|
||||
setCookie("zoomLevel", zoomLevel, 365);
|
||||
setCookie("theme", theme, 365);
|
||||
roomElem.textContent = room;
|
||||
document.body.style.zoom = zoomLevel;
|
||||
themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
|
||||
settingsModal.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
settingsModal.style.display = "none";
|
||||
settingsModal.classList.remove("fade-out");
|
||||
}, 300);
|
||||
location.reload();
|
||||
} catch (e) {
|
||||
errorSystem.show('保存设置失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
themeToggle.addEventListener("change", () => {
|
||||
const theme = themeToggle.checked ? "light" : "dark";
|
||||
themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
|
||||
});
|
||||
|
||||
try {
|
||||
document.body.style.zoom = zoomLevel;
|
||||
} catch (e) {
|
||||
errorSystem.show('初始化缩放失败: ' + e.message);
|
||||
}
|
||||
});
|
||||
39
present/Scripts/utils.js
Normal file
39
present/Scripts/utils.js
Normal file
@ -0,0 +1,39 @@
|
||||
function setCookie(name, value, days) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
const expires = "expires=" + d.toUTCString();
|
||||
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
const nameEQ = name + "=";
|
||||
const ca = document.cookie.split(';');
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function formatTimeWithoutSeconds(time) {
|
||||
return time.slice(0, -3);
|
||||
}
|
||||
|
||||
const errorSystem = {
|
||||
show: function(message) {
|
||||
try {
|
||||
const container = document.querySelector('.error-container');
|
||||
const content = document.getElementById('errorMessage');
|
||||
content.textContent = message;
|
||||
container.style.display = 'flex';
|
||||
setTimeout(this.hide, 5000);
|
||||
} catch(e) {
|
||||
console.error('错误提示系统异常:', e);
|
||||
}
|
||||
},
|
||||
hide: function() {
|
||||
const container = document.querySelector('.error-container');
|
||||
if (container) container.style.display = 'none';
|
||||
}
|
||||
};
|
||||
463
present/Styles/dark.css
Normal file
463
present/Styles/dark.css
Normal file
@ -0,0 +1,463 @@
|
||||
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.5rem;
|
||||
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;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
@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.5rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.config-file-container {
|
||||
margin: 12px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(31, 31, 31, 0.5);
|
||||
}
|
||||
|
||||
.config-file-container label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.config-file-container input[type="file"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
background-color: #222;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
468
present/Styles/light.css
Normal file
468
present/Styles/light.css
Normal file
@ -0,0 +1,468 @@
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
#settings-btn {
|
||||
right: 120px;
|
||||
}
|
||||
|
||||
#settings-btn:hover, #fullscreen-btn:hover {
|
||||
background-color: #ccc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#room {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: relative;
|
||||
right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
@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.5rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.config-file-container {
|
||||
margin: 12px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.config-file-container label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.config-file-container input[type="file"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
80
present/index.html
Normal file
80
present/index.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<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 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<div class="error-content" id="errorMessage"></div>
|
||||
</div>
|
||||
<button id="settings-btn">设置</button>
|
||||
<button id="fullscreen-btn">全屏</button>
|
||||
<div class="container">
|
||||
<h1 id="examName">
|
||||
考试安排
|
||||
<span id="room"></span>
|
||||
</h1>
|
||||
<p id="message"></p>
|
||||
<div class="content">
|
||||
<div class="left-column">
|
||||
<div class="clock-section">
|
||||
<div id="current-time"></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div id="current-subject"></div>
|
||||
<div id="exam-timing"></div>
|
||||
<div id="remaining-time"></div>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-column">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>科目</th>
|
||||
<th>开始</th>
|
||||
<th>结束</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="exam-table-body">
|
||||
<!-- Dynamically filled by JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Settings Modal -->
|
||||
<div id="settings-modal">
|
||||
<div id="settings-modal-content" class="settings-panel dark-theme">
|
||||
<h3>系统设置</h3>
|
||||
<label for="offset-time">偏移时间（秒）:</label>
|
||||
<input type="number" id="offset-time" name="offset-time" value="0">
|
||||
<label for="room-input">考场号:</label>
|
||||
<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">
|
||||
<div class="theme-toggle-container">
|
||||
<label for="theme-toggle">亮/暗色模式:</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="theme-toggle">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button id="save-settings-btn" class="control-btn">确定</button>
|
||||
<button id="close-settings-btn" class="control-btn">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="Scripts/utils.js"></script>
|
||||
<script src="Scripts/settings.js"></script>
|
||||
<script src="Scripts/examInfo.js"></script>
|
||||
<script src="Scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user