ExamAware/ExamCloudSchedule
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule synced 2025-04-29 13:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: ExamAware:v0.0.1
Branches Tags
ExamAware:main
ExamAware:v1.1.1
ExamAware:v1.1.0
ExamAware:v1.0.0
ExamAware:v0.0.1
..
compare: ExamAware:main
Branches Tags
ExamAware:main
ExamAware:v1.1.1
ExamAware:v1.1.0
ExamAware:v1.0.0
ExamAware:v0.0.1

10 Commits
v0.0.1 ... main

Author SHA1 Message Date
fhzit
19c9f4b2b4 feat： 管理后台登录页返回按钮的实现 2025-04-20 10:59:13 +08:00
MKStoler1024
7f99f2613b feat: 添加用户管理功能，支持添加、删除、修改用户及角色 2025-04-18 00:21:31 +08:00
MKStoler1024
b2833c81ad chore: 删除背景图片文件 2025-04-18 00:11:37 +08:00
MKStoler1024
937e664122 feat: 同步es代码 2025-04-18 00:07:53 +08:00
MKStoler1024
970b521074
feat(style): 统一MD3 2025-04-10 06:47:00 +08:00
MKStoler1024
c31c20f705 style: 更新 light.css，优化样式和配色方案 2025-04-03 07:56:14 +00:00
MKStoler1024
701a021694
docs: readme&warning 2025-04-03 06:42:27 +08:00
MKStoler1024
aff0362040
docs: readme 2025-04-03 06:40:02 +08:00
MKStoler1024
b3039ef4fa feat: Material Design 3 样式 2025-04-02 15:45:52 +00:00
MKStoler1024
f57ffbf367 chore: 同步ES代码 2025-04-02 09:09:42 +00:00
28 changed files with 5501 additions and 1017 deletions
Show Stats Expand all files Collapse all files

59
ExamCloudSchedule/index.html
View File

@ -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>

272
ExamCloudSchedule/script.js
View File

@ -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();
});

346
ExamCloudSchedule/styles.css
View File

@ -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;
}

14
README.md
View File

@ -1,5 +1,8 @@
# ExamCloudSechdule
> [!WARNING]
> 要使用，请下载 Release。
ExamCloudSechdule 是一个用于管理和查看考试安排的系统。它包括以下几个主要功能：
1. **考试看板配置查询**：用户可以通过输入配置 ID 来获取考试安排的详细信息。
@ -18,6 +21,17 @@ ExamCloudSechdule 是一个用于管理和查看考试安排的系统。它包
- `/includes`: 管理员认证目录。
- `/configs`: 安排存放目录。
## 界面截图
![ee660e51df2f9984fb554b45253ca621](https://github.com/user-attachments/assets/6f61c6f6-a6ad-448f-9009-362e944b3dd3)
![f08b4b040750be52a0539cac122e3ffd](https://github.com/user-attachments/assets/599cea9a-4f6b-4889-8183-9ebc925b9f68)
![89cdcef605ac601cd2665d3d8c7bbdd3](https://github.com/user-attachments/assets/8f3b3bbd-f36b-4a3d-8e89-2f5b64914e9f)
![ed35ada1596518c45d45028db75cd23e_720](https://github.com/user-attachments/assets/c919c877-d5e4-45e5-9d16-0468092179e4)
## 使用方法
### 考试看板配置查询

276
admin/edit.php
View File

@ -3,168 +3,222 @@ require_once '../includes/auth.php';
checkLogin();
$id = $_GET['id'] ?? '';
$config = ['examName' => '', 'message' => '', 'examInfos' => []];
$config = ['examName' => '', 'message' => '', 'room' => '', 'examInfos' => []];
// Debug: 输出POST数据
error_log('POST data: ' . print_r($_POST, true));
// 保存逻辑
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$id = preg_replace('/[^a-zA-Z0-9]/', '', $_POST['id']);
$newConfig = [
'examName' => $_POST['examName'],
'message' => $_POST['message'],
'room' => $_POST['room'],
'examName' => $_POST['examName'] ?? '',
'message' => $_POST['message'] ?? '',
'room' => $_POST['room'] ?? '',
'examInfos' => []
];
foreach ($_POST['subject'] as $index => $subject) {
$newConfig['examInfos'][] = [
'name' => $subject,
'start' => $_POST['start'][$index],
'end' => $_POST['end'][$index]
];
// 验证并处理科目数据
if (isset($_POST['subject']) && is_array($_POST['subject'])) {
foreach ($_POST['subject'] as $index => $subject) {
if (!empty($subject) && isset($_POST['start'][$index]) && isset($_POST['end'][$index])) {
// 格式化时间为标准格式
$startTime = date('Y-m-d\TH:i:s', strtotime($_POST['start'][$index]));
$endTime = date('Y-m-d\TH:i:s', strtotime($_POST['end'][$index]));
$newConfig['examInfos'][] = [
'name' => $subject,
'start' => $startTime,
'end' => $endTime
];
}
}
}
file_put_contents("../configs/{$id}.json", json_encode($newConfig, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
header('Location: index.php');
exit;
// Debug: 输出配置数据
error_log('Config to save: ' . print_r($newConfig, true));
// 保存配置
$jsonData = json_encode($newConfig, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
if ($jsonData === false) {
error_log('JSON encode error: ' . json_last_error_msg());
} else {
$saveResult = file_put_contents("../configs/{$id}.json", $jsonData);
if ($saveResult === false) {
error_log('File write failed for: ../configs/' . $id . '.json');
} else {
header('Location: index.php');
exit;
}
}
}
// 加载现有配置
if (!empty($id) && file_exists("../configs/{$id}.json")) {
$config = json_decode(file_get_contents("../configs/{$id}.json"), true);
if ($config === null) {
error_log('JSON decode error: ' . json_last_error_msg());
$config = ['examName' => '', 'message' => '', 'room' => '', 'examInfos' => []];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>编辑配置</title>
<link rel="stylesheet" href="/assets/css/md3.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
background: var(--md-surface);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 24px;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 500px;
max-width: 1200px;
margin: 0 auto;
}
.container h3 {
margin-top: 0;
.form-wrapper {
display: flex;
gap: 24px;
}
.container div {
margin-bottom: 15px;
.form-basic {
width: 380px;
flex-shrink: 0;
height: fit-content;
background: var(--md-surface);
padding: 24px;
border-radius: 16px;
box-shadow: var(--md-elevation-1);
}
.container label {
display: block;
margin-bottom: 5px;
}
.container input[type="text"],
.container input[type="datetime-local"] {
.form-basic .md3-text-field {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.container button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
.form-basic .form-group {
display: flex;
flex-direction: column;
}
.container button:hover {
background-color: #45a049;
.form-basic .md3-label {
margin-bottom: 8px;
}
.form-subjects {
flex-grow: 1;
background: var(--md-surface);
padding: 24px;
border-radius: 16px;
box-shadow: var(--md-elevation-1);
min-width: 0; /* 防止flex子项溢出 */
}
.subject {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background: var(--md-surface-variant);
padding: 24px;
border-radius: 16px;
margin-bottom: 16px;
}
.subject button {
background-color: #dc3545;
margin-top: 10px;
.form-group {
margin-bottom: 16px;
}
.subject button:hover {
background-color: #c82333;
.form-actions {
margin-top: 24px;
display: flex;
gap: 12px;
justify-content: flex-end;
}
h3 {
margin-top: 0;
color: var(--md-on-surface);
}
</style>
</head>
<body>
<div class="container">
<form method="post" id="examForm" class="form-wrapper">
<div class="form-basic">
<h3>基本信息</h3>
<div class="form-group">
<label class="md3-label">配置ID:</label>
<input type="text" name="id" class="md3-text-field" value="<?= htmlspecialchars($id) ?>" required>
</div>
<div class="form-group">
<label class="md3-label">考试名称:</label>
<input type="text" name="examName" class="md3-text-field" value="<?= htmlspecialchars($config['examName']) ?>" required>
</div>
<div class="form-group">
<label class="md3-label">考试提示语:</label>
<input type="text" name="message" class="md3-text-field" value="<?= htmlspecialchars($config['message']) ?>">
</div>
<div class="form-group">
<label class="md3-label">考场号:</label>
<input type="text" name="room" class="md3-text-field" value="<?= htmlspecialchars($config['room'] ?? '') ?>" required>
</div>
<div class="form-actions">
<button type="submit" class="md3-button">保存配置</button>
</div>
</div>
<div class="form-subjects">
<h3>考试科目安排</h3>
<div id="subjects">
<?php if (!empty($config['examInfos'])): ?>
<?php foreach ($config['examInfos'] as $subject): ?>
<div class="subject">
<div class="form-group">
<label class="md3-label">科目名称:</label>
<input type="text" name="subject[]" class="md3-text-field" value="<?= htmlspecialchars($subject['name']) ?>" required>
</div>
<div class="form-group">
<label class="md3-label">开始时间:</label>
<input type="datetime-local" name="start[]" class="md3-text-field" value="<?= htmlspecialchars($subject['start']) ?>" required>
</div>
<div class="form-group">
<label class="md3-label">结束时间:</label>
<input type="datetime-local" name="end[]" class="md3-text-field" value="<?= htmlspecialchars($subject['end']) ?>" required>
</div>
<button type="button" class="md3-button delete-btn" onclick="this.parentElement.remove()">删除</button>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="form-actions">
<button type="button" class="md3-button" onclick="addSubject()">添加科目</button>
</div>
</div>
</form>
</div>
<script>
function addSubject() {
const container = document.getElementById('subjects');
const index = Date.now();
const html = `
<div class="subject">
<div>
<label>科目名称:</label>
<input type="text" name="subject[]" required>
<div class="form-group">
<label class="md3-label">科目名称:</label>
<input type="text" name="subject[]" class="md3-text-field" required>
</div>
<div>
<label>开始时间:</label>
<input type="datetime-local" name="start[]" required>
<div class="form-group">
<label class="md3-label">开始时间:</label>
<input type="datetime-local" name="start[]" class="md3-text-field" required>
</div>
<div>
<label>结束时间:</label>
<input type="datetime-local" name="end[]" required>
<div class="form-group">
<label class="md3-label">结束时间:</label>
<input type="datetime-local" name="end[]" class="md3-text-field" required>
</div>
<button type="button" onclick="this.parentElement.remove()">删除</button>
<button type="button" class="md3-button delete-btn" onclick="this.parentElement.remove()">删除</button>
</div>`;
container.insertAdjacentHTML('beforeend', html);
}
</script>
</head>
<body>
<div class="container">
<form method="post">
<div>
<label>配置ID:</label>
<input type="text" name="id" value="<?= htmlspecialchars($id) ?>" required>
</div>
<div>
<label>考试名称:</label>
<input type="text" name="examName" value="<?= htmlspecialchars($config['examName']) ?>" required>
</div>
<div>
<label>考试提示语:</label>
<input type="text" name="message" value="<?= htmlspecialchars($config['message']) ?>">
</div>
<div>
<label>考场号:</label>
<input type="text" name="room" value="<?= htmlspecialchars($config['room'] ?? '') ?>" required>
</div>
<h3>考试科目安排</h3>
<div id="subjects">
<?php foreach ($config['examInfos'] as $subject): ?>
<div class="subject">
<div>
<label>科目名称:</label>
<input type="text" name="subject[]" value="<?= htmlspecialchars($subject['name']) ?>" required>
</div>
<div>
<label>开始时间:</label>
<input type="datetime-local" name="start[]" value="<?= str_replace(' ', 'T', $subject['start']) ?>" required>
</div>
<div>
<label>结束时间:</label>
<input type="datetime-local" name="end[]" value="<?= str_replace(' ', 'T', $subject['end']) ?>" required>
</div>
<button type="button" onclick="this.parentElement.remove()">删除</button>
</div>
<?php endforeach; ?>
</div>
<button type="button" onclick="addSubject()">添加科目</button>
<hr>
<button type="submit">保存配置</button>
</form>
</div>
</body>
</html>

178
admin/index.php
View File

@ -1,6 +1,7 @@
<?php
require_once '../includes/auth.php';
checkLogin();
$role = getUserRole($_SESSION['username']);
// 获取所有配置文件列表
$configs = [];
@ -24,109 +25,142 @@ uksort($configs, function($a, $b) {
<html>
<head>
<title>配置管理后台</title>
<link rel="stylesheet" href="/assets/css/md3.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
font-family: Roboto, sans-serif;
background: var(--md-surface);
margin: 0;
padding: 20px;
padding: 24px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 24px;
}
.header h1 {
margin: 0;
.content {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
.add-btn-container {
margin-bottom: 20px;
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
margin-top: 24px;
}
table {
border-collapse: collapse;
width: 100%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.card {
background: var(--md-surface);
border-radius: 16px;
padding: 24px;
box-shadow: var(--md-elevation-1);
transition: box-shadow 0.3s ease;
display: flex;
flex-direction: column;
gap: 16px;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
.card:hover {
box-shadow: var(--md-elevation-2);
}
th {
background-color: #f5f5f5;
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.actions a {
margin-right: 10px;
color: #007bff;
text-decoration: none;
.card-title {
font-size: 20px;
font-weight: 500;
color: var(--md-on-surface);
margin: 0;
}
.actions a:hover {
text-decoration: underline;
.card-meta {
color: var(--md-on-surface-variant);
font-size: 14px;
}
.logout {
color: #dc3545;
.card-actions {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--md-outline);
}
.add-btn {
background: #28a745;
color: white;
padding: 10px 15px;
border-radius: 4px;
text-decoration: none;
.card-actions a {
text-decoration: none; /* 添加这一行 */
}
.add-btn:hover {
background: #218838;
.add-card {
border: 2px dashed var(--md-outline);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-height: 200px;
text-decoration: none; /* 添加这一行 */
}
.no-configs {
text-align: center;
padding: 20px;
color: #888;
.add-card:hover {
border-color: var(--md-primary);
background: var(--md-primary-container);
}
.add-icon {
font-size: 48px;
color: var(--md-primary);
}
</style>
</head>
<body>
<div class="header">
<h1>考试配置管理 <small>当前用户：<?= $_SESSION['username'] ?></small></h1>
<a href="login.php?action=logout" class="logout">退出登录</a>
<div>
<?php if ($role === 'admin'): ?>
<a href="users.php" class="md3-button">用户管理</a>
<?php endif; ?>
<a href="login.php?action=logout" class="md3-button">退出登录</a>
</div>
</div>
<div class="add-btn-container">
<a href="edit.php" class="add-btn">新建配置</a>
</div>
<table>
<thead>
<tr>
<th>配置ID</th>
<th>最后修改时间</th>
<th>文件大小</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php if(empty($configs)): ?>
<tr>
<td colspan="4" class="no-configs">暂无配置文件</td>
</tr>
<?php else: ?>
<div class="content">
<div class="grid">
<a href="edit.php" class="card add-card">
<div class="add-icon">+</div>
<span class="card-title">新建配置</span>
</a>
<?php if(!empty($configs)): ?>
<?php foreach($configs as $config): ?>
<tr>
<td><?= htmlspecialchars($config['id']) ?></td>
<td><?= $config['mtime'] ?></td>
<td><?= round($config['size']/1024, 2) ?> KB</td>
<td class="actions">
<a href="edit.php?id=<?= urlencode($config['id']) ?>">编辑</a>
<a href="#" onclick="confirmDelete('<?= $config['id'] ?>')">删除</a>
<a href="../get_config.php?id=<?= urlencode($config['id']) ?>" target="_blank">预览</a>
</td>
</tr>
<div class="card">
<div class="card-header">
<h3 class="card-title"><?= htmlspecialchars($config['id']) ?></h3>
</div>
<div class="card-meta">
最后修改：<?= $config['mtime'] ?><br>
文件大小：<?= round($config['size']/1024, 2) ?> KB
</div>
<div class="card-actions">
<a href="edit.php?id=<?= urlencode($config['id']) ?>" class="md3-button">编辑</a>
<a href="../get_config.php?id=<?= urlencode($config['id']) ?>" class="md3-button" target="_blank">查看</a>
<button class="md3-button" style="background:var(--md-error)" onclick="confirmDelete('<?= $config['id'] ?>')">删除</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<script>
function confirmDelete(id) {

101
admin/login.php
View File

@ -30,74 +30,91 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<html>
<head>
<title>登录</title>
<link rel="stylesheet" href="/assets/css/md3.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
background: var(--md-surface);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
margin: 0;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
background: var(--md-surface);
padding: 32px;
border-radius: 28px;
box-shadow: var(--md-elevation-1);
width: 320px;
}
.login-container form {
display: flex;
flex-direction: column;
gap: 16px;
}
.login-container .md3-text-field {
width: 100%;
box-sizing: border-box;
margin-bottom: 0;
}
.login-container .md3-button {
margin-top: 8px;
}
.login-container h2 {
margin-top: 0;
color: var(--md-on-surface);
margin: 0 0 24px;
text-align: center;
}
.login-container div {
margin-bottom: 15px;
}
.login-container label {
display: block;
margin-bottom: 5px;
}
.login-container input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.login-container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.login-container button:hover {
background-color: #45a049;
margin-bottom: 16px;
}
.error {
color: red;
color: var(--md-error);
text-align: center;
margin-bottom: 15px;
margin-bottom: 16px;
}
.back-button {
position: absolute;
top: 16px;
left: 16px;
text-decoration: none;
padding: 8px 16px;
background: var(--md-primary);
color: var(--md-on-primary);
border-radius: 4px;
box-shadow: var(--md-elevation-1);
font-size: 14px;
}
.back-button:hover {
background: var(--md-primary-hover);
}
</style>
</head>
<body>
<div class="login-container">
<a href="../" class="back-button md3-button">返回</a>
<div class="login-container md3-card">
<h2>登录</h2>
<?php if (isset($error)): ?>
<div class="error"><?= $error ?></div>
<?php endif; ?>
<form method="post">
<div>
<label>用户名:</label>
<input type="text" name="username" required>
</div>
<div>
<label>密码:</label>
<input type="password" name="password" required>
</div>
<button type="submit">登录</button>
<label class="md3-label">用户名:</label>
<input type="text" name="username" class="md3-text-field" required>
<label class="md3-label">密码:</label>
<input type="password" name="password" class="md3-text-field" required>
<button type="submit" class="md3-button">登录</button>
</form>
</div>
</body>

154
admin/users.php Normal file
View File

@ -0,0 +1,154 @@
<?php
require_once '../includes/auth.php';
checkLogin();
if ($_SESSION['username'] !== 'admin') {
header('Location: index.php');
exit;
}
$users_file = __DIR__ . '/../includes/users.json';
$users = json_decode(file_get_contents($users_file), true) ?: [];
// 添加用户
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_user'])) {
$new_user = trim($_POST['username']);
$new_pass = $_POST['password'];
$new_role = $_POST['role'] === 'admin' ? 'admin' : 'user';
if ($new_user && $new_pass) {
foreach ($users as $u) {
if ($u['username'] === $new_user) {
$error = '用户名已存在';
break;
}
}
if (!isset($error)) {
$users[] = [
'username' => $new_user,
'password' => md5($new_pass),
'role' => $new_role
];
file_put_contents($users_file, json_encode($users, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
header('Location: users.php');
exit;
}
} else {
$error = '用户名和密码不能为空';
}
}
// 删除用户
if (isset($_GET['del']) && $_GET['del'] !== 'admin') {
$users = array_filter($users, function($u) {
return $u['username'] !== $_GET['del'];
});
file_put_contents($users_file, json_encode(array_values($users), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
header('Location: users.php');
exit;
}
// 修改密码
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['change_pass'])) {
$target = $_POST['target_user'];
$new_pass = $_POST['new_password'];
foreach ($users as &$u) {
if ($u['username'] === $target && $target !== '') {
$u['password'] = md5($new_pass);
break;
}
}
unset($u);
file_put_contents($users_file, json_encode($users, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
$msg = '密码已修改';
header('Location: users.php');
exit;
}
// 修改角色
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['change_role'])) {
$target = $_POST['target_user'];
$new_role = $_POST['new_role'] === 'admin' ? 'admin' : 'user';
foreach ($users as &$u) {
if ($u['username'] === $target && $target !== 'admin') {
$u['role'] = $new_role;
break;
}
}
unset($u);
file_put_contents($users_file, json_encode($users, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
header('Location: users.php');
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>用户管理</title>
<link rel="stylesheet" href="/assets/css/md3.css">
<style>
body { background: var(--md-surface); margin: 0; padding: 24px; }
.container { max-width: 700px; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; margin-top: 24px; }
th, td { padding: 12px; border-bottom: 1px solid var(--md-outline); }
th { background: var(--md-surface-variant); }
.md3-button { margin-right: 8px; }
.error { color: var(--md-error); margin-bottom: 12px; }
.msg { color: var(--md-primary); margin-bottom: 12px; }
form.inline { display:inline; }
select { padding: 4px 8px; }
</style>
</head>
<body>
<div class="container md3-card">
<h2>用户管理</h2>
<?php if (isset($error)): ?><div class="error"><?= $error ?></div><?php endif; ?>
<?php if (isset($msg)): ?><div class="msg"><?= $msg ?></div><?php endif; ?>
<form method="post" style="margin-bottom:16px;">
<input type="text" name="username" class="md3-text-field" placeholder="新用户名" required>
<input type="password" name="password" class="md3-text-field" placeholder="密码" required>
<select name="role" class="md3-text-field" style="width:auto;">
<option value="user">普通用户</option>
<option value="admin">管理员</option>
</select>
<button type="submit" name="add_user" class="md3-button">添加用户</button>
</form>
<table>
<tr><th>用户名</th><th>类型</th><th>操作</th></tr>
<?php foreach ($users as $u): ?>
<tr>
<td><?= htmlspecialchars($u['username']) ?></td>
<td>
<?php if ($u['username'] === 'admin'): ?>
管理员
<?php else: ?>
<form method="post" class="inline" style="margin:0;">
<input type="hidden" name="target_user" value="<?= htmlspecialchars($u['username']) ?>">
<select name="new_role" onchange="this.form.submit()">
<option value="user" <?= (isset($u['role']) && $u['role'] === 'user') ? 'selected' : '' ?>>普通用户</option>
<option value="admin" <?= (isset($u['role']) && $u['role'] === 'admin') ? 'selected' : '' ?>>管理员</option>
</select>
<input type="hidden" name="change_role" value="1">
</form>
<?php endif; ?>
</td>
<td>
<form method="post" class="inline" style="margin:0;">
<input type="hidden" name="target_user" value="<?= htmlspecialchars($u['username']) ?>">
<input type="password" name="new_password" placeholder="新密码" class="md3-text-field" style="width:100px;" required>
<button type="submit" name="change_pass" class="md3-button">改密</button>
</form>
<?php if ($u['username'] !== 'admin'): ?>
<a href="?del=<?= urlencode($u['username']) ?>" class="md3-button" style="background:var(--md-error)" onclick="return confirm('确定删除该用户？')">删除</a>
<?php else: ?>
<span style="color:#888;">保护</span>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<div style="margin-top:24px;">
<a href="index.php" class="md3-button">返回管理首页</a>
</div>
</div>
</body>
</html>

75
assets/css/md3.css Normal file
View File

@ -0,0 +1,75 @@
:root {
/* MD3 Colors - Green Theme */
--md-primary: #2e7d32;
--md-on-primary: #FFFFFF;
--md-primary-container: #b8e6b9;
--md-on-primary-container: #005006;
--md-secondary: #466c48;
--md-on-secondary: #FFFFFF;
--md-surface: #fbfdf7;
--md-surface-variant: #dde5db;
--md-on-surface: #191c18;
--md-on-surface-variant: #414942;
--md-outline: #727971;
--md-error: #be3920;
/* Elevation */
--md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
--md-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
}
.md3-text-field {
padding: 12px 16px;
border-radius: 4px;
border: 1px solid var(--md-outline);
background: var(--md-surface);
color: var(--md-on-surface);
font-family: Roboto, sans-serif;
font-size: 16px;
transition: border-color 0.2s;
}
.md3-text-field:focus {
outline: none;
border-color: var(--md-primary);
}
.md3-button {
padding: 10px 24px;
border-radius: 20px;
border: none;
background: var(--md-primary);
color: var(--md-on-primary);
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1px;
cursor: pointer;
transition: background 0.2s;
text-decoration: none; /* 添加这一行 */
}
.md3-button:hover {
background: var(--md-primary-container);
color: var(--md-on-primary-container);
}
.md3-card {
background: var(--md-surface);
border-radius: 12px;
padding: 24px;
box-shadow: var(--md-elevation-1);
transition: box-shadow 0.2s;
}
.md3-card:hover {
box-shadow: var(--md-elevation-2);
}
.md3-label {
color: var(--md-on-surface-variant);
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}

BIN
background-dark.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 MiB

BIN
background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 MiB

16
includes/auth.php
View File

@ -20,4 +20,20 @@ function verifyUser($username, $password) {
}
return false;
}
function getAllUsers() {
global $users_file;
return json_decode(file_get_contents($users_file), true) ?: [];
}
function getUserRole($username) {
global $users_file;
$users = json_decode(file_get_contents($users_file), true) ?: [];
foreach ($users as $user) {
if ($user['username'] === $username) {
return isset($user['role']) ? $user['role'] : 'user';
}
}
return 'user';
}
?>

16
includes/users.json
View File

@ -1,4 +1,12 @@
[{
"username": "admin",
"password": "21232f297a57a5a743894a0e4a801fc3"
}]
[
{
"username": "admin",
"password": "21232f297a57a5a743894a0e4a801fc3",
"role": "admin"
},
{
"username": "user",
"password": "e10adc3949ba59abbe56e057f20f883e",
"role": "user"
}
]

168
index.php
View File

@ -6,68 +6,74 @@ header('Content-Type: text/html; charset=utf-8');
<html>
<head>
<title>考试看板配置查询</title>
<link rel="stylesheet" href="/assets/css/md3.css">
<style>
body {
font-family: 'Roboto', Arial, sans-serif;
font-family: Roboto, sans-serif;
margin: 0;
padding: 0;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
color: #333;
background: var(--md-surface);
color: var(--md-on-surface);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: background-color 0.3s ease, color 0.3s ease;
min-height: 100vh;
}
.container {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
background: var(--md-surface);
padding: 32px;
border-radius: 28px;
box-shadow: var(--md-elevation-1);
max-width: 600px;
width: 100%;
transition: background-color 0.3s ease, color 0.3s ease;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
input[type="text"] {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
button {
background: #6200ea;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
button:hover {
background: #3700b3;
h1 {
color: var(--md-on-surface);
font-size: 24px;
margin-bottom: 24px;
}
#result {
margin-top: 20px;
white-space: pre-wrap;
color: #333;
margin-top: 24px;
padding: 16px;
background: var(--md-surface-variant);
border-radius: 16px;
max-height: 400px;
overflow: auto;
}
#result pre {
margin: 0;
}
/* 定制滚动条样式 */
#result::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#result::-webkit-scrollbar-track {
background: var(--md-surface-variant);
border-radius: 4px;
}
#result::-webkit-scrollbar-thumb {
background: var(--md-outline);
border-radius: 4px;
}
#result::-webkit-scrollbar-thumb:hover {
background: var(--md-primary);
}
.error {
color: red;
color: var(--md-error);
}
pre {
background: #f4f4f4;
background: var(--md-surface-variant);
padding: 10px;
border-radius: 4px;
overflow: auto;
@ -77,50 +83,22 @@ header('Content-Type: text/html; charset=utf-8');
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
background: #333;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-theme {
background: url('background-dark.jpg') no-repeat center center fixed !important;
background-size: cover !important;
color: #e0e0e0 !important;
}
.dark-theme .container {
background-color: rgba(50, 50, 50, 0.9) !important;
}
.dark-theme .theme-toggle {
background: #e0e0e0 !important;
color: #333 !important;
}
.dark-theme label {
color: #e0e0e0 !important;
}
</style>
</head>
<body>
<button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
<div class="container">
<div class="container md3-card">
<h1>考试看板配置查询</h1>
<div class="form-group">
<label for="configId">输入配置ID：</label>
<input type="text" id="configId" placeholder="例如：room301">
<button onclick="loadConfig()">获取配置</button>
<button id="enterButton" style="display:none;" onclick="enterSchedule()">进入</button>
<label class="md3-label" for="configId">输入配置ID：</label>
<input type="text" id="configId" class="md3-text-field" placeholder="例如：room301">
<button class="md3-button" onclick="loadConfig()">获取配置</button>
<button id="enterButton" class="md3-button" style="display:none;" onclick="enterSchedule()">进入</button>
</div>
<div id="result"></div>
<hr>
<p>管理员请前往 <a href="/admin/login.php">管理后台</a></p>
<p>管理员请前往 <a href="/admin/login.php" class="md3-button">管理后台</a></p>
</div>
<script>
@ -155,7 +133,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高亮显示
@ -174,38 +152,6 @@ header('Content-Type: text/html; charset=utf-8');
return '<span class="' + cls + '">' + match + '</span>';
});
}
function toggleTheme() {
const body = document.body;
const container = document.querySelector('.container');
const themeToggle = document.querySelector('.theme-toggle');
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
container.classList.remove('dark-theme');
themeToggle.textContent = '切换主题';
} else {
body.classList.add('dark-theme');
container.classList.add('dark-theme');
themeToggle.textContent = '切换主题';
}
}
</script>
<style>
.dark-theme {
background: url('background-dark.jpg') no-repeat center center fixed !important;
background-size: cover !important;
color: #e0e0e0 !important;
}
.dark-theme .container {
background-color: rgba(50, 50, 50, 0.9) !important;
}
.dark-theme .theme-toggle {
background: #e0e0e0 !important;
color: #333 !important;
}
.dark-theme label {
color: #e0e0e0 !important;
}
</style>
</body>
</html>

363
present/Scripts/examInfo.js Normal file
View File

@ -0,0 +1,363 @@
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");
const infoToggleBtn = document.getElementById("info-toggle-btn");
const paperInfoElem = document.getElementById("paper-info");
const examPapersElem = document.getElementById("exam-papers");
const answerSheetsElem = document.getElementById("answer-sheets");
let offsetTime = getCookie("offsetTime") || 0;
let showPaperInfo = getCookie("showPaperInfo") === "true";
let autoToggle = getCookie("autoToggle") === "true";
// 初始化显示状态
if (showPaperInfo) {
currentSubjectElem.style.display = "none";
paperInfoElem.style.display = "block";
}
// 更新显示内容
function updateDisplay(isExamTime) {
if (autoToggle) {
// 在考试期间显示页数，其他时间显示表格
paperInfoElem.style.display = isExamTime ? "block" : "none";
currentSubjectElem.style.display = "block";
}
}
infoToggleBtn.addEventListener("click", () => {
if (!autoToggle) {
showPaperInfo = !showPaperInfo;
paperInfoElem.style.display = showPaperInfo ? "block" : "none";
currentSubjectElem.style.display = "block";
setCookie("showPaperInfo", showPaperInfo, 365);
}
});
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;
isnotificated = false;
}
});
// 清空原有内容
if (paperInfoElem) paperInfoElem.style.display = showPaperInfo ? "block" : "none";
if (currentSubjectElem) currentSubjectElem.style.display = showPaperInfo ? "none" : "block";
if (currentExam) {
const currentStatus = `当前科目: ${currentExam.name}`;
if (!showPaperInfo) {
currentSubjectElem.textContent = currentStatus;
}
currentSubjectElem.style.display = "block"; // 总是显示科目信息
paperInfoElem.style.display = showPaperInfo ? "block" : "none";
// 加载本地存储的页数信息
if (showPaperInfo) {
// 加载本地保存的页数信息
const paperCount = document.getElementById('paper-count');
const paperPages = document.getElementById('paper-pages');
const sheetCount = document.getElementById('sheet-count');
const sheetPages = document.getElementById('sheet-pages');
if (paperCount && paperPages && sheetCount && sheetPages) {
try {
const savedInfo = localStorage.getItem('paperInfo');
if (savedInfo) {
const info = JSON.parse(savedInfo);
paperCount.value = info.paperCount || 0;
paperPages.value = info.paperPages || 0;
sheetCount.value = info.sheetCount || 0;
sheetPages.value = info.sheetPages || 0;
}
} catch (e) {
console.error('加载页数信息失败:', e);
}
}
}
if (examTimingElem) {
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) {
if (remainingTimeElem) {
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
remainingTimeElem.style.color = "red";
remainingTimeElem.style.fontWeight = "bold";
}
if (statusElem) {
statusElem.textContent = "状态: 即将结束";
statusElem.style.color = "red";
}
// 在剩余15分钟时显示提醒
if (isnotificated === false && remainingMinutes === 14 && remainingSeconds === 59) {
isnotificated = true;
const overlay = document.getElementById('reminder-overlay');
if (overlay) {
overlay.classList.add('show');
setTimeout(() => {
overlay.classList.remove('show');
}, 5000);
}
}
} else {
if (remainingTimeElem) {
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
remainingTimeElem.style.color = "#93b4f7";
remainingTimeElem.style.fontWeight = "normal";
}
if (statusElem) {
statusElem.textContent = "状态: 进行中";
statusElem.style.color = "#5ba838";
}
}
} else {
// 非考试时间，显示表格
updateDisplay(false);
if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
if (currentSubjectElem) currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
if (examTimingElem) examTimingElem.textContent = "";
if (remainingTimeElem) remainingTimeElem.textContent = "";
if (statusElem) {
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 {
if (currentSubjectElem) currentSubjectElem.textContent = "考试均已结束";
if (examTimingElem) examTimingElem.textContent = "";
if (remainingTimeElem) remainingTimeElem.textContent = "";
if (statusElem) {
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) {
console.error('更新考试信息失败:', e);
errorSystem.show('更新考试信息失败: ' + e.message);
}
}
// 添加页数控制处理
document.querySelectorAll('.count-btn').forEach(btn => {
btn.addEventListener('click', () => {
const target = document.getElementById(btn.dataset.target);
const action = btn.dataset.action;
const currentValue = parseInt(target.value) || 0;
if (action === 'increase') {
target.value = currentValue + 1;
} else if (action === 'decrease' && currentValue > 0) {
target.value = currentValue - 1;
}
// 保存到localStorage
updatePaperInfo();
});
});
// 监听输入框直接输入
['paper-count', 'paper-pages', 'sheet-count', 'sheet-pages'].forEach(id => {
const input = document.getElementById(id);
input.addEventListener('change', () => {
const value = parseInt(input.value) || 0;
input.value = Math.max(0, value); // 确保不小于0
updatePaperInfo();
});
});
function updatePaperInfo() {
const paperInfo = {
paperCount: parseInt(document.getElementById('paper-count').value) || 0,
paperPages: parseInt(document.getElementById('paper-pages').value) || 0,
sheetCount: parseInt(document.getElementById('sheet-count').value) || 0,
sheetPages: parseInt(document.getElementById('sheet-pages').value) || 0
};
localStorage.setItem('paperInfo', JSON.stringify(paperInfo));
}
// 初始化加载保存的页数信息
function loadPaperInfo() {
try {
const savedInfo = localStorage.getItem('paperInfo');
if (savedInfo) {
const info = JSON.parse(savedInfo);
document.getElementById('paper-count').value = info.paperCount || 0;
document.getElementById('paper-pages').value = info.paperPages || 0;
document.getElementById('sheet-count').value = info.sheetCount || 0;
document.getElementById('sheet-pages').value = info.sheetPages || 0;
}
} catch (e) {
console.error('加载页数信息失败:', e);
}
}
loadPaperInfo();
fetchData();
});

17
present/Scripts/main.js Normal file
View 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);
}
});
});

175
present/Scripts/settings.js Normal file
View File

@ -0,0 +1,175 @@
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");
const configFileInput = document.getElementById("config-file");
const clearConfigBtn = document.getElementById("clear-config-btn");
const themeSelect = document.getElementById("theme-select");
const autoToggle = document.getElementById("auto-toggle");
let offsetTime = getCookie("offsetTime") || 0;
let room = getCookie("room") || "";
let zoomLevel = getCookie("zoomLevel") || 1;
let currentTheme = getCookie("currentTheme") || "ealg";
let theme = getCookie("theme") || "dark";
let isAutoToggle = getCookie("autoToggle") || false;
let themeConfig = [];
offsetTime = parseInt(offsetTime);
roomElem.textContent = room;
autoToggle.checked = isAutoToggle === "true";
// 初始化主题
const currentThemePath = `Styles/${currentTheme}/${theme}.css`;
themeLink.href = currentThemePath;
themeToggle.checked = theme === "light";
// 加载主题配置
fetch('Styles/profile.json')
.then(response => response.json())
.then(data => {
themeConfig = data.theme;
// 填充主题选择下拉框
themeConfig.forEach(theme => {
const option = document.createElement('option');
option.value = theme.path || theme.type;
option.textContent = theme.name;
themeSelect.appendChild(option);
});
themeSelect.value = currentTheme;
updateThemeLink();
})
.catch(error => errorSystem.show('加载主题配置失败: ' + error.message));
function updateThemeLink() {
const themePath = currentTheme;
const isDark = !themeToggle.checked;
themeLink.href = `Styles/${themePath}/${isDark ? 'dark' : 'light'}.css`;
}
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";
currentTheme = themeSelect.value;
isAutoToggle = autoToggle.checked;
setCookie("offsetTime", offsetTime, 365);
setCookie("room", room, 365);
setCookie("zoomLevel", zoomLevel, 365);
setCookie("theme", theme, 365);
setCookie("currentTheme", currentTheme, 365);
setCookie("autoToggle", isAutoToggle, 365);
roomElem.textContent = room;
document.body.style.zoom = zoomLevel;
updateThemeLink();
settingsModal.classList.add("fade-out");
setTimeout(() => {
settingsModal.style.display = "none";
settingsModal.classList.remove("fade-out");
}, 300);
// 立即生效时间偏移
location.reload();
} catch (e) {
errorSystem.show('保存设置失败: ' + e.message);
}
});
themeSelect.addEventListener("change", () => {
currentTheme = themeSelect.value;
updateThemeLink();
});
themeToggle.addEventListener("change", () => {
updateThemeLink();
});
configFileInput.addEventListener("change", (event) => {
try {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const config = JSON.parse(e.target.result);
// 验证配置文件格式
if (!config.examInfos || !Array.isArray(config.examInfos)) {
throw new Error("无效的配置文件格式");
}
// 验证每个考试信息
config.examInfos.forEach(exam => {
if (!exam.name || !exam.start || !exam.end) {
throw new Error("考试信息不完整");
}
// 验证日期格式
if (isNaN(new Date(exam.start).getTime()) || isNaN(new Date(exam.end).getTime())) {
throw new Error("无效的日期格式");
}
});
// 保存配置到本地存储
localStorage.setItem('localExamConfig', JSON.stringify(config));
errorSystem.show('配置文件已加载，将在下次启动时生效');
} catch (error) {
errorSystem.show('配置文件格式错误: ' + error.message);
}
};
reader.readAsText(file);
} catch (e) {
errorSystem.show('读取文件失败: ' + e.message);
}
});
clearConfigBtn.addEventListener("click", () => {
try {
if (confirm("确定要清除本地配置吗？这将恢复使用默认配置文件。")) {
localStorage.removeItem('localExamConfig');
configFileInput.value = ''; // 清空文件选择
errorSystem.show('本地配置已清除，将在下次启动时生效');
}
} catch (e) {
errorSystem.show('清除配置失败: ' + e.message);
}
});
try {
document.body.style.zoom = zoomLevel;
} catch (e) {
errorSystem.show('初始化缩放失败: ' + e.message);
}
});

39
present/Scripts/utils.js Normal file
View 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';
}
};

671
present/Styles/ealg/dark.css Normal file
View File

@ -0,0 +1,671 @@
#return-btn {
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部 20px */
left: 20px; /* 距离左侧 20px */
padding: 12px 24px; /* 内边距 */
font-size: 1rem; /* 字体大小 */
cursor: pointer; /* 鼠标悬停时显示为手型 */
background-color: #404040; /* 修改为统一的灰色背景 */
color: #E6E1E5; /* 按钮文字颜色 */
border: none; /* 按钮边框样式 */
border-radius: 20px; /* 按钮圆角大小 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
z-index: 1001; /* 按钮层级 */
}
#return-btn:hover {
background-color: #4A4A4A; /* 统一的灰色悬停背景 */
transform: translateY(-1px); /* 悬停时向上移动 1px */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
}
body {
font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
margin: 0;
padding: 0;
background: #121212;
color: #E6E1E5;
overflow: auto;
}
body::-webkit-scrollbar {
display: none;
}
#fullscreen-btn, #settings-btn {
position: absolute;
top: 20px;
padding: 12px 24px;
font-size: 1rem;
cursor: pointer;
background-color: #404040;
color: #E6E1E5;
border: none;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: all 0.2s ease;
z-index: 1001;
display: flex;
align-items: center;
}
#fullscreen-btn::before {
content: "fullscreen";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#settings-btn::before {
content: "settings";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#fullscreen-btn {
right: 20px;
}
#settings-btn {
right: 140px;
}
#settings-btn:hover, #fullscreen-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.container {
padding: 24px;
max-width: 90%;
margin: auto;
background-color: #121212;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
h1 {
font-size: 3.5rem;
font-weight: 400;
text-align: left;
margin-bottom: 16px;
color: #E6E1E5;
display: flex;
align-items: center;
justify-content: space-between;
}
#room {
font-size: 3.5rem;
font-weight: 400;
color: #E6E1E5;
margin-left: 20px;
}
#message {
font-size: 1.8rem;
color: #aaaaaa;
margin-bottom: 24px;
}
.content {
display: flex;
justify-content: space-between;
gap: 24px;
}
.left-column, .right-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.left-column {
width: 50%;
}
.right-column {
width: 50%;
}
.clock-section, .info-section, .right-column {
background-color: #212121;
padding: 24px;
border-radius: 14px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#current-time {
font-size: 8rem;
text-align: center;
color: #FFFFFF;
margin: 0;
font-weight: 400;
}
#current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #FFFFFF;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 24px;
background-color: #212121;
border-radius: 14px;
overflow: hidden;
}
th, td {
padding: 3px;
font-size: 1.8rem;
text-align: center;
border-bottom: 1px solid #555555;
}
th {
background-color: transparent;
color: #FFFFFF;
font-weight: 500;
}
tr:hover {
background-color: #555555;
}
.exam-status-tag {
padding: 2px 4px;
border-radius: 3px;
font-size: 1.2rem;
font-weight: 500;
}
.exam-status-进行中 {
background-color: #263227;
color: green;
}
.exam-status-即将开始 {
background-color: #594300;
color: #FFB960;
}
.exam-status-已结束 {
background-color: #3a2523;
color: red;
}
.exam-status-未开始 {
background-color: #3c2f1d;
color: orange;
}
#settings-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
}
#settings-modal-content {
background: #404040;
padding: 32px 48px 32px 32px;
margin: 32px auto;
border-radius: 28px;
width: 600px;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#settings-modal-content::-webkit-scrollbar {
width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: transparent;
margin: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #4A4458;
border-radius: 8px;
border: 2px solid #2B2930;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #635B70;
}
#settings-modal-content h3 {
margin: 0 0 24px;
color: #E6E1E5;
font-size: 24px;
font-weight: 400;
}
#settings-modal-content label {
display: flex;
align-items: center;
gap: 16px;
margin: 16px 0;
font-size: 16px;
color: #E6E1E5;
}
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
box-sizing: border-box;
border: 2px solid #4A4458;
border-radius: 12px;
background-color: #332D41;
color: #E6E1E5;
transition: all 0.2s ease;
}
#settings-modal-content input:focus {
outline: none;
border-color: #D0BCFF;
background-color: #4A4458;
}
.button-group {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 32px;
position: relative;
background-color: #404040;
padding: 16px 0;
border-top: 1px solid #555555;
}
#save-settings-btn, #close-settings-btn {
padding: 12px 24px;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
#save-settings-btn {
background-color: #404040;
color: #E6E1E5;
}
#save-settings-btn::before {
content: "✓";
font-size: 18px;
}
#close-settings-btn {
background-color: #404040;
color: #E6E1E5;
}
#close-settings-btn::before {
content: "✕";
font-size: 18px;
}
#save-settings-btn:hover, #close-settings-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.error-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #5C1130;
color: #FFB3B3;
padding: 16px 24px;
border-radius: 16px;
display: none;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
animation: slideUp 0.3s ease;
}
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #4A4458;
transition: .3s;
border-radius: 16px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 4px;
background-color: #E6E1E5;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #D0BCFF;
}
input:checked + .slider:before {
transform: translateX(20px);
background-color: #1C1B1F;
}
.config-file-container {
margin: 24px 0;
padding: 24px;
border: 2px solid #555555;
border-radius: 20px;
background-color: #4A4A4A;
transition: all 0.2s ease;
}
.config-file-container:hover {
border-color: #D0BCFF;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.config-file-container input[type="file"] {
max-width: 100%;
width: auto;
box-sizing: border-box;
padding: 12px;
border: 2px dashed #4A4458;
border-radius: 16px;
background-color: #332D41;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button {
padding: 8px 16px;
margin-right: 12px;
background-color: #404040;
color: #E6E1E5;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button:hover {
background-color: #4A4A4A;
}
.file-hint {
margin-top: 12px;
font-size: 14px;
color: #CAC4D0;
line-height: 1.5;
}
.config-control-btn {
margin-top: 20px;
padding: 12px 28px;
background-color: #404040;
color: #E6E1E5;
border: none;
border-radius: 24px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.config-control-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.theme-toggle-container {
margin: 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#theme-select {
width: 100%;
padding: 12px 16px;
font-size: 1.2rem;
background-color: #404040;
color: #FFFFFF;
border: 2px solid #555555;
border-radius: 12px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
#theme-select:hover {
background-color: #4A4A4A;
border-color: #666666;
}
#theme-select:focus {
outline: none;
border-color: #D0BCFF;
background-color: #4A4A4A;
}
#theme-select option {
background-color: #404040;
color: #FFFFFF;
padding: 12px;
}
#theme-select option:hover,
#theme-select option:focus {
background-color: #4A4A4A;
}
.theme-toggle-container label {
font-size: 16px;
color: #E6E1E5;
margin-bottom: 8px;
}
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
backdrop-filter: blur(8px);
z-index: 9999;
}
.reminder-overlay.show {
opacity: 1;
visibility: visible;
}
.reminder-content {
text-align: center;
animation: fadeIn 0.5s ease;
}
.reminder-title {
font-size: 5rem;
color: white;
margin-bottom: 2rem;
}
.reminder-subtitle {
font-size: 3rem;
color: #FFD60A;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #404040;
color: #E6E1E5;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #212121;
color: #E6E1E5;
border: 2px solid #404040;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #404040;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #4A4A4A;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
.count-btn-group {
display: flex;
flex-direction: column;
gap: 2px;
margin-right: 8px;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-btn {
width: 24px;
height: 24px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.count-btn .material-icons {
font-size: 16px;
}

670
present/Styles/ealg/light.css Normal file
View File

@ -0,0 +1,670 @@
#return-btn {
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部 20px */
left: 20px; /* 距离左侧 20px */
padding: 12px 24px; /* 内边距 */
font-size: 1rem; /* 字体大小 */
cursor: pointer; /* 鼠标悬停时显示为手型 */
background-color: #E8DEF8; /* 按钮背景颜色 */
color: #1C1B1F; /* 按钮文字颜色 */
border: none; /* 按钮边框样式 */
border-radius: 20px; /* 按钮圆角大小 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
z-index: 1001; /* 按钮层级 */
}
#return-btn:hover {
background-color: #D0BCFF; /* 悬停时的背景颜色 */
transform: translateY(-1px); /* 悬停时向上移动 1px */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}
body {
font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
margin: 0;
padding: 0;
background: #FFFBFE;
color: #1C1B1F;
overflow: auto;
}
body::-webkit-scrollbar {
display: none;
}
#fullscreen-btn, #settings-btn {
position: absolute;
top: 20px;
padding: 12px 24px;
font-size: 1rem;
cursor: pointer;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.2s ease;
z-index: 1001;
display: flex;
align-items: center;
}
#fullscreen-btn {
right: 20px;
}
#settings-btn {
right: 140px;
}
#settings-btn:hover, #fullscreen-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#settings-btn::before {
content: "settings";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#fullscreen-btn::before {
content: "fullscreen";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
.container {
padding: 24px;
max-width: 100%;
margin: auto;
background-color: #FFFFFF;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
font-size: 3.5rem;
font-weight: 400;
text-align: left;
margin-bottom: 16px;
color: #1C1B1F;
display: flex;
align-items: center;
justify-content: space-between;
}
#room {
font-size: 3.5rem;
font-weight: 400;
color: #1C1B1F;
margin-left: 20px;
}
#message {
font-size: 1.8rem;
color: #6750A4;
margin-bottom: 24px;
}
.content {
display: flex;
justify-content: space-between;
gap: 24px;
}
.left-column, .right-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.left-column {
width: 45%;
}
.right-column {
width: 50%;
}
.clock-section, .info-section, .right-column {
background-color: #FFFFFF;
padding: 24px;
border-radius: 28px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#current-time {
font-size: 8rem;
text-align: center;
color: #000000;
margin: 0;
font-weight: 400;
}
#current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #000000;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 24px;
background-color: #FFFFFF;
border-radius: 16px;
overflow: hidden;
}
th, td {
padding: 3px; /* 修改padding值以匹配dark主题 */
font-size: 1.8rem;
text-align: center;
border-bottom: 1px solid #E8DEF8; /* 修改边框颜色 */
}
th {
background-color: #ffffff;
color: #1C1B1F;
font-weight: 500;
}
tr:hover {
background-color: #F7F2FA;
}
.exam-status-tag {
padding: 2px 4px; /* 修改padding值以匹配dark主题 */
border-radius: 3px; /* 修改圆角大小 */
font-size: 1.2rem; /* 修改字体大小 */
font-weight: 500;
}
.exam-status-进行中 {
background-color: #DDF4D7;
color: #365534;
}
.exam-status-即将开始 {
background-color: #FFF2D6;
color: #594300;
}
.exam-status-已结束 {
background-color: #FFDAD6;
color: #5C1130;
}
.exam-status-未开始 {
background-color: #E8DEF8;
color: #1C1B1F;
}
#settings-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
}
#settings-modal-content {
background: #FFFFFF;
padding: 32px 48px 32px 32px;
margin: 32px auto;
border-radius: 28px;
width: 600px;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#settings-modal-content::-webkit-scrollbar {
width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: transparent;
margin: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #E8DEF8;
border-radius: 8px;
border: 2px solid #FFFFFF;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #D0BCFF;
}
#settings-modal-content h3 {
margin: 0 0 24px;
color: #1C1B1F;
font-size: 24px;
font-weight: 400;
}
#settings-modal-content label {
display: flex;
align-items: center;
gap: 16px;
margin: 16px 0;
font-size: 16px;
color: #1C1B1F;
}
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
box-sizing: border-box;
border: 2px solid #E8DEF8;
border-radius: 12px;
background-color: #FFFFFF;
color: #1C1B1F;
transition: all 0.2s ease;
}
#settings-modal-content input:focus {
outline: none;
border-color: #6750A4;
background-color: #F7F2FA;
}
.button-group {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 32px;
position: relative;
background-color: #FFFFFF;
padding: 16px 0;
border-top: 1px solid #E8DEF8;
}
#save-settings-btn, #close-settings-btn {
padding: 12px 24px;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
#save-settings-btn {
background-color: #6750A4;
color: #FFFFFF;
}
#close-settings-btn {
background-color: #E8DEF8;
color: #1C1B1F;
}
#save-settings-btn:hover, #close-settings-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#save-settings-btn::before {
content: "✓";
font-size: 18px;
}
#close-settings-btn::before {
content: "✕";
font-size: 18px;
}
.error-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #FFDAD6;
color: #5C1130;
padding: 16px 24px;
border-radius: 16px;
display: none;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
animation: slideUp 0.3s ease;
}
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #E8DEF8;
transition: .3s;
border-radius: 16px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 4px;
background-color: #FFFFFF;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #6750A4;
}
input:checked + .slider:before {
transform: translateX(20px);
background-color: #FFFFFF;
}
.config-file-container {
margin: 24px 0;
padding: 24px;
border: 2px solid #E8DEF8;
border-radius: 20px;
background-color: #F7F2FA;
transition: all 0.2s ease;
}
.config-file-container:hover {
border-color: #6750A4;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.config-file-container input[type="file"] {
max-width: 100%;
width: auto;
box-sizing: border-box;
padding: 12px;
border: 2px dashed #E8DEF8;
border-radius: 16px;
background-color: #FFFFFF;
color: #1C1B1F;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button {
padding: 8px 16px;
margin-right: 12px;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button:hover {
background-color: #D0BCFF;
}
.file-hint {
margin-top: 12px;
font-size: 14px;
color: #49454F;
line-height: 1.5;
}
.config-control-btn {
margin-top: 20px;
padding: 12px 28px;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 24px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.config-control-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.theme-toggle-container {
margin: 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#theme-select {
width: 100%;
padding: 12px 16px;
font-size: 1.2rem;
background-color: #FFFFFF;
color: #1C1B1F;
border: 2px solid #E8DEF8;
border-radius: 12px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
#theme-select:hover {
background-color: #F7F2FA;
border-color: #D0BCFF;
}
#theme-select:focus {
outline: none;
border-color: #6750A4;
background-color: #F7F2FA;
}
#theme-select option {
background-color: #FFFFFF;
color: #1C1B1F;
padding: 12px;
}
#theme-select option:hover,
#theme-select option:focus {
background-color: #F7F2FA;
}
.theme-toggle-container label {
font-size: 16px;
color: #1C1B1F;
margin-bottom: 8px;
}
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
backdrop-filter: blur(8px);
z-index: 9999;
}
.reminder-overlay.show {
opacity: 1;
visibility: visible;
}
.reminder-content {
text-align: center;
animation: fadeIn 0.5s ease;
}
.reminder-title {
font-size: 5rem;
color: #FF3B30;
margin-bottom: 2rem;
}
.reminder-subtitle {
font-size: 3rem;
color: #FF9500;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #E8DEF8;
color: #1C1B1F;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
.count-btn-group {
display: flex;
flex-direction: column;
gap: 2px;
margin-right: 8px;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-btn {
width: 24px;
height: 24px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.count-btn .material-icons {
font-size: 16px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #FFFFFF;
color: #1C1B1F;
border: 2px solid #E8DEF8;
border-radius: 8px;
}

703
present/Styles/md3/dark.css Normal file
View File

@ -0,0 +1,703 @@
#return-btn {
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部 20px */
left: 20px; /* 距离左侧 20px */
padding: 12px 24px; /* 内边距 */
font-size: 1rem; /* 字体大小 */
cursor: pointer; /* 鼠标悬停时显示为手型 */
background-color: #4A4458; /* 按钮背景颜色 */
color: #E6E1E5; /* 按钮文字颜色 */
border: none; /* 按钮边框样式 */
border-radius: 20px; /* 按钮圆角大小 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
z-index: 1001; /* 按钮层级 */
}
#return-btn:hover {
background-color: #635B70; /* 悬停时的背景颜色 */
transform: translateY(-1px); /* 悬停时向上移动 1px */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
}
body {
font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
margin: 0;
padding: 0;
background: #1C1B1F;
color: #E6E1E5;
overflow: auto;
}
body::-webkit-scrollbar {
display: none;
}
#fullscreen-btn, #settings-btn {
position: absolute;
top: 20px;
padding: 12px 24px;
font-size: 1rem;
cursor: pointer;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: all 0.2s ease;
z-index: 1001;
display: flex;
align-items: center;
}
#fullscreen-btn::before {
content: "fullscreen";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#settings-btn::before {
content: "settings";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#fullscreen-btn {
right: 20px;
}
#settings-btn {
right: 140px;
}
#settings-btn:hover, #fullscreen-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.container {
padding: 24px;
max-width: 1400px;
margin: auto;
background-color: #2B2930;
border-radius: 28px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
h1 {
font-size: 3.5rem;
font-weight: 400;
text-align: left;
margin-bottom: 16px;
color: #E6E1E5;
display: flex;
align-items: center;
justify-content: space-between;
}
#room {
font-size: 3.5rem;
font-weight: 400;
color: #E6E1E5;
margin-left: 20px;
}
#message {
font-size: 1.8rem;
color: #D0BCFF;
margin-bottom: 24px;
}
.content {
display: flex;
justify-content: space-between;
gap: 24px;
}
.left-column, .right-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.left-column {
width: 45%;
}
.right-column {
width: 50%;
}
.clock-section, .info-section, .right-column {
background-color: #332D41;
padding: 24px;
border-radius: 28px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#current-time {
font-size: 8rem;
text-align: center;
color: #D0BCFF;
margin: 0;
font-weight: 400;
}
#current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #E6E1E5;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 24px;
background-color: #332D41;
border-radius: 16px;
overflow: hidden;
}
th, td {
padding: 1px;
font-size: 1.8rem;
text-align: center;
border-bottom: 1px solid #4A4458;
}
th {
background-color: #4A4458;
color: #D0BCFF;
font-weight: 500;
}
tr:hover {
background-color: #4A4458;
}
.exam-status-tag {
padding: 2px 4px;
border-radius: 3px;
font-size: 1.2rem;
font-weight: 500;
}
.exam-status-进行中 {
background-color: #263227;
color: green;
}
.exam-status-即将开始 {
background-color: #594300;
color: #FFB960;
}
.exam-status-已结束 {
background-color: #3a2523;
color: red;
}
.exam-status-未开始 {
background-color: #3c2f1d;
color: orange;
}
#settings-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
}
#settings-modal-content {
background: #2B2930;
padding: 32px 48px 32px 32px;
margin: 32px auto;
border-radius: 28px;
width: 600px;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#settings-modal-content::-webkit-scrollbar {
width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: transparent;
margin: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #4A4458;
border-radius: 8px;
border: 2px solid #2B2930;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #635B70;
}
#settings-modal-content h3 {
margin: 0 0 24px;
color: #E6E1E5;
font-size: 24px;
font-weight: 400;
}
#settings-modal-content label {
display: flex;
align-items: center;
gap: 16px;
margin: 16px 0;
font-size: 16px;
color: #E6E1E5;
}
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
box-sizing: border-box;
border: 2px solid #4A4458;
border-radius: 12px;
background-color: #332D41;
color: #E6E1E5;
transition: all 0.2s ease;
}
#settings-modal-content input:focus {
outline: none;
border-color: #D0BCFF;
background-color: #4A4458;
}
.button-group {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 32px;
position: relative;
background-color: #2B2930;
padding: 16px 0;
border-top: 1px solid #4A4458;
}
#save-settings-btn, #close-settings-btn {
padding: 12px 24px;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
#save-settings-btn {
background-color: #D0BCFF;
color: #1C1B1F;
}
#close-settings-btn {
background-color: #4A4458;
color: #E6E1E5;
}
#save-settings-btn:hover, #close-settings-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
#save-settings-btn::before {
content: "✓";
font-size: 18px;
}
#close-settings-btn::before {
content: "✕";
font-size: 18px;
}
.error-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #5C1130;
color: #FFB3B3;
padding: 16px 24px;
border-radius: 16px;
display: none;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
animation: slideUp 0.3s ease;
}
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #4A4458;
transition: .3s;
border-radius: 16px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 4px;
background-color: #E6E1E5;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #D0BCFF;
}
input:checked + .slider:before {
transform: translateX(20px);
background-color: #1C1B1F;
}
.config-file-container {
margin: 24px 0;
padding: 24px;
border: 2px solid #4A4458;
border-radius: 20px;
background-color: #2B2930;
transition: all 0.2s ease;
}
.config-file-container:hover {
border-color: #D0BCFF;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.config-file-container input[type="file"] {
max-width: 100%;
width: auto;
box-sizing: border-box;
padding: 12px;
border: 2px dashed #4A4458;
border-radius: 16px;
background-color: #332D41;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button {
padding: 8px 16px;
margin-right: 12px;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button:hover {
background-color: #635B70;
}
.file-hint {
margin-top: 12px;
font-size: 14px;
color: #CAC4D0;
line-height: 1.5;
}
.config-control-btn {
margin-top: 20px;
padding: 12px 28px;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 24px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.config-control-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.theme-toggle-container {
margin: 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#theme-select {
width: 100%;
padding: 12px 16px;
font-size: 1.2rem;
background-color: #332D41;
color: #E6E1E5;
border: 2px solid #4A4458;
border-radius: 12px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
#theme-select:hover {
background-color: #4A4458;
border-color: #635B70;
}
#theme-select:focus {
outline: none;
border-color: #D0BCFF;
background-color: #4A4458;
}
#theme-select option {
background-color: #332D41;
color: #E6E1E5;
padding: 12px;
}
#theme-select option:hover,
#theme-select option:focus {
background-color: #4A4458;
}
.theme-toggle-container label {
font-size: 16px;
color: #E6E1E5;
margin-bottom: 8px;
}
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
backdrop-filter: blur(8px);
z-index: 9999;
}
.reminder-overlay.show {
opacity: 1;
visibility: visible;
}
.reminder-content {
text-align: center;
animation: fadeIn 0.5s ease;
}
.reminder-title {
font-size: 5rem;
color: #FF453A;
margin-bottom: 2rem;
}
.reminder-subtitle {
font-size: 3rem;
color: #FFD60A;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-toggle-btn {
position: absolute;
right: 20px;
top: 20px;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 1;
}
.info-toggle-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
#paper-info {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #E6E1E5;
}
#exam-papers, #answer-sheets {
margin: 10px 0;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-btn-group {
display: flex;
flex-direction: column;
gap: 2px;
margin-right: 8px;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #332D41;
color: #E6E1E5;
border: 2px solid #4A4458;
border-radius: 8px;
}
.count-btn {
width: 24px;
height: 24px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.count-btn .material-icons {
font-size: 16px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #4A4458;
color: #E6E1E5;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #4A4458;
color: #E6E1E5;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #635B70;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}

634
present/Styles/md3/light.css Normal file
View File

@ -0,0 +1,634 @@
#return-btn {
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部 20px */
left: 20px; /* 距离左侧 20px */
padding: 12px 24px; /* 内边距 */
font-size: 1rem; /* 字体大小 */
cursor: pointer; /* 鼠标悬停时显示为手型 */
background-color: #E8DEF8; /* 按钮背景颜色 */
color: #000000; /* 按钮文字颜色 */
border: none; /* 按钮边框样式 */
border-radius: 20px; /* 按钮圆角大小 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
z-index: 1001; /* 按钮层级 */
}
#return-btn:hover {
background-color: #D0BCFF; /* 悬停时的背景颜色 */
transform: translateY(-1px); /* 悬停时向上移动 1px */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}
body {
font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
margin: 0;
padding: 0;
background: #FFFBFE;
color: #1C1B1F;
overflow: auto;
}
body::-webkit-scrollbar {
display: none;
}
#fullscreen-btn, #settings-btn {
position: absolute;
top: 20px;
padding: 12px 24px;
font-size: 1rem;
cursor: pointer;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.2s ease;
z-index: 1001;
display: flex;
align-items: center;
}
#fullscreen-btn::before {
content: "fullscreen";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#settings-btn::before {
content: "settings";
font-family: 'Material Icons';
font-size: 20px;
margin-right: 4px;
}
#fullscreen-btn {
right: 20px;
}
#settings-btn {
right: 140px;
}
#settings-btn:hover, #fullscreen-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.container {
padding: 24px;
max-width: 1400px;
margin: auto;
background-color: #F7F2FA;
border-radius: 28px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
font-size: 3.5rem;
font-weight: 400;
text-align: left;
margin-bottom: 16px;
color: #1C1B1F;
display: flex;
align-items: center;
justify-content: space-between;
}
#room {
font-size: 3.5rem;
font-weight: 400;
color: #1C1B1F;
margin-left: 20px;
}
#message {
font-size: 1.8rem;
color: #6750A4;
margin-bottom: 24px;
}
.content {
display: flex;
justify-content: space-between;
gap: 24px;
}
.left-column, .right-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.left-column {
width: 45%;
}
.right-column {
width: 50%;
}
.clock-section, .info-section, .right-column {
background-color: #FFFFFF;
padding: 24px;
border-radius: 28px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.info-section {
position: relative;
}
#current-time {
font-size: 8rem;
text-align: center;
color: #6750A4;
margin: 0;
font-weight: 400;
}
#current-subject, #exam-timing, #remaining-time, #status {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #1C1B1F;
}
#paper-info {
font-size: 3rem;
margin: 16px 0;
text-align: left;
color: #1C1B1F;
}
#exam-papers, #answer-sheets {
margin: 10px 0;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 24px;
background-color: #FFFFFF;
border-radius: 16px;
overflow: hidden;
}
th, td {
padding: 1px;
font-size: 1.8rem;
text-align: center;
border-bottom: 1px solid #E8DEF8;
}
th {
background-color: #E8DEF8;
color: #1C1B1F;
font-weight: 500;
}
tr:hover {
background-color: #F7F2FA;
}
.exam-status-tag {
padding: 2px 4px;
border-radius: 3px;
font-size: 1.2rem;
font-weight: 500;
}
.exam-status-进行中 {
background-color: #DDF4D7;
color: #365534;
}
.exam-status-即将开始 {
background-color: #FFF2D6;
color: #594300;
}
.exam-status-已结束 {
background-color: #FFDAD6;
color: #5C1130;
}
.exam-status-未开始 {
background-color: #E8DEF8;
color: #1C1B1F;
}
#settings-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
}
#settings-modal-content {
background: #FFFFFF;
padding: 32px 48px 32px 32px;
margin: 32px auto;
border-radius: 28px;
width: 600px;
max-height: 60vh;
overflow-y: auto;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#settings-modal-content::-webkit-scrollbar {
width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: transparent;
margin: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #E8DEF8;
border-radius: 8px;
border: 2px solid #FFFFFF;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #D0BCFF;
}
#settings-modal-content h3 {
margin: 0 0 24px;
color: #1C1B1F;
font-size: 24px;
font-weight: 400;
}
#settings-modal-content label {
display: flex;
align-items: center;
gap: 16px;
margin: 16px 0;
font-size: 16px;
color: #1C1B1F;
}
#settings-modal-content input[type="number"],
#settings-modal-content input[type="text"] {
font-size: 1.8rem;
padding: 12px 16px;
margin: 8px 0 24px;
width: 100%;
box-sizing: border-box;
border: 2px solid #E8DEF8;
border-radius: 12px;
background-color: #FFFFFF;
color: #1C1B1F;
transition: all 0.2s ease;
}
#settings-modal-content input:focus {
outline: none;
border-color: #6750A4;
background-color: #F7F2FA;
}
.button-group {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 32px;
position: relative;
background-color: #FFFFFF;
padding: 16px 0;
border-top: 1px solid #E8DEF8;
}
#save-settings-btn, #close-settings-btn {
display: flex;
align-items: center;
gap: 12px;
}
#save-settings-btn::before {
content: "✓";
font-size: 18px;
}
#close-settings-btn::before {
content: "✕";
font-size: 18px;
}
.error-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #FFDAD6;
color: #5C1130;
padding: 16px 24px;
border-radius: 16px;
display: none;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
animation: slideUp 0.3s ease;
}
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #E8DEF8;
transition: .3s;
border-radius: 16px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 4px;
background-color: #FFFFFF;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #6750A4;
}
input:checked + .slider:before {
transform: translateX(20px);
background-color: #FFFFFF;
}
.config-file-container {
margin: 24px 0;
padding: 24px;
border: 2px solid #E8DEF8;
border-radius: 20px;
background-color: #F7F2FA;
transition: all 0.2s ease;
}
.config-file-container:hover {
border-color: #6750A4;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.config-file-container input[type="file"] {
max-width: 100%;
width: auto;
box-sizing: border-box;
padding: 12px;
border: 2px dashed #E8DEF8;
border-radius: 16px;
background-color: #FFFFFF;
color: #1C1B1F;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button {
padding: 8px 16px;
margin-right: 12px;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.config-file-container input[type="file"]::-webkit-file-upload-button:hover {
background-color: #D0BCFF;
}
.file-hint {
margin-top: 12px;
font-size: 14px;
color: #49454F;
line-height: 1.5;
}
.config-control-btn {
margin-top: 20px;
padding: 12px 28px;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 24px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.config-control-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.theme-toggle-container {
margin: 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#theme-select {
width: 100%;
padding: 12px 16px;
font-size: 1.2rem;
background-color: #FFFFFF;
color: #1C1B1F;
border: 2px solid #E8DEF8;
border-radius: 12px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
#theme-select:hover {
background-color: #F7F2FA;
border-color: #D0BCFF;
}
#theme-select:focus {
outline: none;
border-color: #6750A4;
background-color: #F7F2FA;
}
#theme-select option {
background-color: #FFFFFF;
color: #1C1B1F;
padding: 12px;
}
#theme-select option:hover,
#theme-select option:focus {
background-color: #F7F2FA;
}
.theme-toggle-container label {
font-size: 16px;
color: #1C1B1F;
margin-bottom: 8px;
}
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
backdrop-filter: blur(8px);
z-index: 9999;
}
.reminder-overlay.show {
opacity: 1;
visibility: visible;
}
.reminder-content {
text-align: center;
animation: fadeIn 0.5s ease;
}
.reminder-title {
font-size: 5rem;
color: #FF3B30;
margin-bottom: 2rem;
}
.reminder-subtitle {
font-size: 3rem;
color: #FF9500;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #E8DEF8;
color: #1C1B1F;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #FFFFFF;
color: #1C1B1F;
border: 2px solid #E8DEF8;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #E8DEF8;
color: #1C1B1F;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #D0BCFF;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

BIN
present/Styles/old/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
present/Styles/old/background_light.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

697
present/Styles/old/dark.css Normal file
View File

@ -0,0 +1,697 @@
#return-btn {
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部 20px */
left: 20px; /* 距离左侧 20px */
background-color: #1f1f1f; /* 按钮背景颜色 */
color: #e0e0e0; /* 按钮文字颜色 */
border: 1px solid #333333; /* 按钮边框样式 */
border-radius: 4px; /* 按钮圆角大小 */
padding: 8px 16px; /* 按钮内边距 */
font-size: 14px; /* 按钮字体大小 */
cursor: pointer; /* 鼠标悬停时显示为手型 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
z-index: 1001; /* 按钮层级 */
}
#return-btn:hover {
background-color: #2a2a2a; /* 按钮悬停时的背景颜色 */
transform: scale(1.05); /* 悬停时放大 5% */
}
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.8rem;
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;
max-height: 60vh; /* 限制最大高度 */
overflow-y: auto; /* 允许垂直滚动 */
animation: fadeIn 0.5s ease;
}
/* 设置滚动条样式 */
#settings-modal-content::-webkit-scrollbar {
width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: rgba(31, 31, 31, 0.5);
border-radius: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #666;
border-radius: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #888;
}
@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.8rem;
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;
}
#theme-select {
padding: 8px 12px;
font-size: 14px;
border: 1px solid #555;
border-radius: 4px;
background-color: #222;
color: #e0e0e0;
cursor: pointer;
outline: none;
width: 120px;
}
#theme-select:hover {
border-color: #666;
}
#theme-select:focus {
border-color: #007acc;
box-shadow: 0 0 0 1px #007acc;
}
#theme-select option {
background-color: #222;
color: #e0e0e0;
padding: 8px;
}
.config-file-container {
margin: 12px 0;
padding: 10px;
border: 1px solid #555;
border-radius: 5px;
background-color: rgba(31, 31, 31, 0.5);
box-sizing: border-box;
max-width: 100%;
}
.config-file-container label {
display: block;
margin-bottom: 8px;
color: #e0e0e0;
}
.config-file-container input[type="file"] {
display: block;
width: calc(100% - 16px); /* 减去padding的宽度 */
padding: 8px;
border: 1px solid #555;
border-radius: 4px;
background-color: #222;
color: #e0e0e0;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.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;
}
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
backdrop-filter: blur(8px);
z-index: 9999;
}
.reminder-overlay.show {
opacity: 1;
visibility: visible;
}
.reminder-content {
text-align: center;
animation: fadeIn 0.5s ease;
}
.reminder-title {
font-size: 5rem;
color: #FF453A;
margin-bottom: 2rem;
}
.reminder-subtitle {
font-size: 3rem;
color: #FFD60A;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #1f1f1f;
color: #e0e0e0;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #333;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-control input {
width: 60px;
padding: 5px;
font-size: 2rem;
text-align: center;
background-color: #1f1f1f;
color: #e0e0e0;
border: 2px solid #333;
border-radius: 8px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #1f1f1f;
color: #e0e0e0;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #333;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
.count-btn-group {
display: flex;
flex-direction: column;
gap: 2px;
margin-right: 8px;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-btn {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
}
.count-btn .material-icons {
font-size: 16px;
}

694
present/Styles/old/light.css Normal file
View File

@ -0,0 +1,694 @@
#return-btn {
position: absolute; /* 绝对定位 */
top: 20px; /* 距离顶部 20px */
left: 20px; /* 距离左侧 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; /* 设置按钮的层级，确保在其他元素之上 */
}
#return-btn:hover {
background-color: #ccc; /* 悬停时的背景颜色 */
transform: scale(1.05); /* 悬停时放大 5% */
}
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; /* 距离顶部 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; /* 距离右侧 20px */
}
#settings-btn {
right: 120px; /* 距离右侧 120px */
}
#settings-btn:hover, #fullscreen-btn:hover {
background-color: #ccc; /* 悬停时的背景颜色 */
transform: scale(1.05); /* 悬停时放大 5% */
}
.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; /* 使用 flex 布局 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 两端对齐 */
}
#room {
font-size: 3.5rem; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
color: #333; /* 文字颜色 */
position: relative; /* 相对定位 */
right: 0; /* 向右移动 0 */
margin-left: 20px; /* 左边距 */
}
#message {
font-size: 1.8rem; /* 字体大小 */
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; /* 下边框 */
padding: 0px; /* 内边距 */
font-size: 1.8rem; /* 字体大小 */
text-align: center; /* 居中对齐 */
}
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;
max-height: 60vh; /* 限制最大高度 */
overflow-y: auto; /* 允许垂直滚动 */
animation: fadeIn 0.5s ease;
}
/* 设置滚动条样式 */
#settings-modal-content::-webkit-scrollbar {
width: 8px;
}
#settings-modal-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}
#settings-modal-content::-webkit-scrollbar-thumb:hover {
background: #999;
}
@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.8rem;
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;
}
#theme-select {
padding: 8px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
color: #333;
cursor: pointer;
outline: none;
width: 120px;
}
#theme-select:hover {
border-color: #999;
}
#theme-select:focus {
border-color: #007acc;
box-shadow: 0 0 0 1px #007acc;
}
#theme-select option {
background-color: #fff;
color: #333;
padding: 8px;
}
.config-file-container {
margin: 12px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
max-width: 100%;
}
.config-file-container label {
display: block;
margin-bottom: 8px;
color: #333;
}
.config-file-container input[type="file"] {
display: block;
width: calc(100% - 16px); /* 减去padding的宽度 */
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
color: #333;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.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;
}
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
backdrop-filter: blur(8px);
z-index: 9999;
}
.reminder-overlay.show {
opacity: 1;
visibility: visible;
}
.reminder-content {
text-align: center;
animation: fadeIn 0.5s ease;
}
.reminder-title {
font-size: 5rem;
color: #FF3B30;
margin-bottom: 2rem;
}
.reminder-subtitle {
font-size: 3rem;
color: #FF9500;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-section {
position: relative;
}
.info-toggle-btn {
position: absolute;
right: 0;
top: 0;
background-color: #f0f0f0;
color: #333;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.info-toggle-btn:hover {
background-color: #ccc;
transform: translateY(-1px);
}
.info-toggle-btn .material-icons {
font-size: 24px;
}
.paper-count-container {
margin: 20px 0;
}
.paper-input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
font-size: 2.5rem;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background-color: #f0f0f0;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}
.count-btn:hover {
background-color: #ccc;
transform: translateY(-1px);
}
.count-btn .material-icons {
font-size: 20px;
}
.count-btn-group {
display: flex;
flex-direction: column;
gap: 2px;
margin-right: 8px;
}
.count-control {
display: flex;
align-items: center;
gap: 5px;
}
.count-btn {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.count-btn .material-icons {
font-size: 16px;
}

16
present/Styles/profile.json Normal file
View File

@ -0,0 +1,16 @@
{
"theme":[
{
"name": "ExamAware旧版",
"path": "ealg"
},
{
"name": "ExamSchedule旧版",
"path": "old"
},
{
"name": "Material Design 3",
"path": "md3"
}
]
}

164
present/index.html Normal file
View File

@ -0,0 +1,164 @@
<!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 id="theme-link" rel="stylesheet" href="Styles/md3/dark.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="error-container">
<div class="error-content" id="errorMessage"></div>
</div>
<button id="return-btn" onclick="window.location.href = '../'">返回</button>
<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">
<button id="info-toggle-btn" class="info-toggle-btn" title="切换显示模式">
<span class="material-icons">swap_horiz</span>
</button>
<div id="current-subject"></div>
<div id="paper-info" style="display: none;">
<div class="paper-count-container">
<div class="paper-input-group">
<label>试卷:</label>
<div class="count-control">
<div class="count-btn-group">
<button class="count-btn" data-target="paper-count" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<button class="count-btn" data-target="paper-count" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<input type="number" id="paper-count" min="0" value="0">
</div>
<span>张</span>
<div class="count-control">
<div class="count-btn-group">
<button class="count-btn" data-target="paper-pages" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<button class="count-btn" data-target="paper-pages" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<input type="number" id="paper-pages" min="0" value="0">
</div>
<span>页</span>
</div>
<div class="paper-input-group">
<label>答题卡:</label>
<div class="count-control">
<div class="count-btn-group">
<button class="count-btn" data-target="sheet-count" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<button class="count-btn" data-target="sheet-count" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<input type="number" id="sheet-count" min="0" value="0">
</div>
<span>张</span>
<div class="count-control">
<div class="count-btn-group">
<button class="count-btn" data-target="sheet-pages" data-action="decrease">
<span class="material-icons">remove</span>
</button>
<button class="count-btn" data-target="sheet-pages" data-action="increase">
<span class="material-icons">add</span>
</button>
</div>
<input type="number" id="sheet-pages" min="0" value="0">
</div>
<span>页</span>
</div>
</div>
</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>
<div id="reminder-overlay" class="reminder-overlay">
<div class="reminder-content">
<h1 class="reminder-title">距离考试结束还有 15 分钟</h1>
<h2 class="reminder-subtitle">注意掌握时间</h2>
</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="config-file-container">
<label for="config-file">配置文件:</label>
<input type="file" id="config-file" accept=".json">
<div class="file-hint">支持.json格式文件</div>
<button id="clear-config-btn" class="config-control-btn">清除本地配置</button>
</div>
<div class="theme-toggle-container">
<label for="theme-select">主题:</label>
<select id="theme-select">
<!-- 动态填充主题选项 -->
</select>
<label for="theme-toggle">亮/暗色模式:</label>
<label class="switch">
<input type="checkbox" id="theme-toggle">
<span class="slider round"></span>
</label>
<label for="auto-toggle">自动切换显示:</label>
<label class="switch">
<input type="checkbox" id="auto-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>