mirror of
https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule
synced 2025-04-29 18:26:34 +00:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
19c9f4b2b4 | ||
|
|
7f99f2613b | ||
|
|
b2833c81ad | ||
|
|
937e664122 | ||
|
|
970b521074 | ||
|
|
c31c20f705 |
@ -1,6 +1,7 @@
|
|||||||
<?php
|
<?php
|
||||||
require_once '../includes/auth.php';
|
require_once '../includes/auth.php';
|
||||||
checkLogin();
|
checkLogin();
|
||||||
|
$role = getUserRole($_SESSION['username']);
|
||||||
|
|
||||||
// 获取所有配置文件列表
|
// 获取所有配置文件列表
|
||||||
$configs = [];
|
$configs = [];
|
||||||
@ -126,7 +127,12 @@ uksort($configs, function($a, $b) {
|
|||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>考试配置管理 <small>当前用户：<?= $_SESSION['username'] ?></small></h1>
|
<h1>考试配置管理 <small>当前用户：<?= $_SESSION['username'] ?></small></h1>
|
||||||
<a href="login.php?action=logout" class="md3-button">退出登录</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>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|||||||
@ -81,9 +81,27 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 16px;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<a href="../" class="back-button md3-button">返回</a>
|
||||||
<div class="login-container md3-card">
|
<div class="login-container md3-card">
|
||||||
<h2>登录</h2>
|
<h2>登录</h2>
|
||||||
<?php if (isset($error)): ?>
|
<?php if (isset($error)): ?>
|
||||||
|
|||||||
154
admin/users.php
Normal file
154
admin/users.php
Normal 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>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
BIN
background.jpg
BIN
background.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
@ -20,4 +20,20 @@ function verifyUser($username, $password) {
|
|||||||
}
|
}
|
||||||
return false;
|
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';
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
@ -1,4 +1,12 @@
|
|||||||
[{
|
[
|
||||||
"username": "admin",
|
{
|
||||||
"password": "21232f297a57a5a743894a0e4a801fc3"
|
"username": "admin",
|
||||||
}]
|
"password": "21232f297a57a5a743894a0e4a801fc3",
|
||||||
|
"role": "admin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"username": "user",
|
||||||
|
"password": "e10adc3949ba59abbe56e057f20f883e",
|
||||||
|
"role": "user"
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -8,7 +8,37 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
const statusElem = document.getElementById("status");
|
const statusElem = document.getElementById("status");
|
||||||
const examTableBodyElem = document.getElementById("exam-table-body");
|
const examTableBodyElem = document.getElementById("exam-table-body");
|
||||||
const roomElem = document.getElementById("room");
|
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 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() {
|
function fetchData() {
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
@ -74,12 +104,50 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
}
|
}
|
||||||
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
||||||
lastExam = exam;
|
lastExam = exam;
|
||||||
|
isnotificated = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 清空原有内容
|
||||||
|
if (paperInfoElem) paperInfoElem.style.display = showPaperInfo ? "block" : "none";
|
||||||
|
if (currentSubjectElem) currentSubjectElem.style.display = showPaperInfo ? "none" : "block";
|
||||||
|
|
||||||
if (currentExam) {
|
if (currentExam) {
|
||||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
const currentStatus = `当前科目: ${currentExam.name}`;
|
||||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
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 remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
|
||||||
const remainingHours = Math.floor(remainingTime / 3600);
|
const remainingHours = Math.floor(remainingTime / 3600);
|
||||||
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
|
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
|
||||||
@ -87,54 +155,81 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||||
|
|
||||||
if (remainingHours === 0 && remainingMinutes <= 14) {
|
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
if (remainingTimeElem) {
|
||||||
remainingTimeElem.style.color = "red";
|
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||||
remainingTimeElem.style.fontWeight = "bold";
|
remainingTimeElem.style.color = "red";
|
||||||
statusElem.textContent = "状态: 即将结束";
|
remainingTimeElem.style.fontWeight = "bold";
|
||||||
statusElem.style.color = "red";
|
}
|
||||||
} else {
|
if (statusElem) {
|
||||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
statusElem.textContent = "状态: 即将结束";
|
||||||
remainingTimeElem.style.color = "#93b4f7";
|
statusElem.style.color = "red";
|
||||||
remainingTimeElem.style.fontWeight = "normal";
|
}
|
||||||
statusElem.textContent = "状态: 进行中";
|
|
||||||
statusElem.style.color = "#5ba838";
|
|
||||||
}
|
|
||||||
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
|
|
||||||
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
|
|
||||||
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
|
||||||
examTimingElem.textContent = "";
|
|
||||||
remainingTimeElem.textContent = ``;
|
|
||||||
statusElem.textContent = "状态: 已结束";
|
|
||||||
statusElem.style.color = "red";
|
|
||||||
} else if (nextExam) {
|
|
||||||
const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
|
|
||||||
const remainingHours = Math.floor(timeUntilStart / 3600);
|
|
||||||
const remainingMinutes = Math.floor((timeUntilStart % 3600) / 60);
|
|
||||||
const remainingSeconds = Math.floor(timeUntilStart % 60);
|
|
||||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
|
||||||
|
|
||||||
if (timeUntilStart <= 15 * 60) {
|
// 在剩余15分钟时显示提醒
|
||||||
currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
|
if (isnotificated === false && remainingMinutes === 14 && remainingSeconds === 59) {
|
||||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
isnotificated = true;
|
||||||
remainingTimeElem.style.color = "orange";
|
const overlay = document.getElementById('reminder-overlay');
|
||||||
remainingTimeElem.style.fontWeight = "bold";
|
if (overlay) {
|
||||||
statusElem.textContent = "状态: 即将开始";
|
overlay.classList.add('show');
|
||||||
statusElem.style.color = "#DBA014";
|
setTimeout(() => {
|
||||||
|
overlay.classList.remove('show');
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
|
if (remainingTimeElem) {
|
||||||
remainingTimeElem.textContent = "";
|
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||||
statusElem.textContent = "状态: 未开始";
|
remainingTimeElem.style.color = "#93b4f7";
|
||||||
remainingTimeElem.style.fontWeight = "normal";
|
remainingTimeElem.style.fontWeight = "normal";
|
||||||
statusElem.style.color = "#EAEE5B";
|
}
|
||||||
|
if (statusElem) {
|
||||||
|
statusElem.textContent = "状态: 进行中";
|
||||||
|
statusElem.style.color = "#5ba838";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
|
||||||
} else {
|
} else {
|
||||||
currentSubjectElem.textContent = "考试均已结束";
|
// 非考试时间，显示表格
|
||||||
examTimingElem.textContent = "";
|
updateDisplay(false);
|
||||||
remainingTimeElem.textContent = "";
|
if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
|
||||||
statusElem.textContent = "状态: 空闲";
|
if (currentSubjectElem) currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||||
statusElem.style.color = "#3946AF";
|
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 = "";
|
examTableBodyElem.innerHTML = "";
|
||||||
@ -203,9 +298,66 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
console.error('更新考试信息失败:', e);
|
||||||
errorSystem.show('更新考试信息失败: ' + e.message);
|
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();
|
fetchData();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -9,21 +9,49 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
const zoomInput = document.getElementById("zoom-input");
|
const zoomInput = document.getElementById("zoom-input");
|
||||||
const themeToggle = document.getElementById("theme-toggle");
|
const themeToggle = document.getElementById("theme-toggle");
|
||||||
const themeLink = document.getElementById("theme-link");
|
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 offsetTime = getCookie("offsetTime") || 0;
|
||||||
let room = getCookie("room") || "";
|
let room = getCookie("room") || "";
|
||||||
let zoomLevel = getCookie("zoomLevel") || 1;
|
let zoomLevel = getCookie("zoomLevel") || 1;
|
||||||
|
let currentTheme = getCookie("currentTheme") || "ealg";
|
||||||
let theme = getCookie("theme") || "dark";
|
let theme = getCookie("theme") || "dark";
|
||||||
|
let isAutoToggle = getCookie("autoToggle") || false;
|
||||||
|
let themeConfig = [];
|
||||||
|
|
||||||
offsetTime = parseInt(offsetTime);
|
offsetTime = parseInt(offsetTime);
|
||||||
roomElem.textContent = room;
|
roomElem.textContent = room;
|
||||||
|
autoToggle.checked = isAutoToggle === "true";
|
||||||
|
|
||||||
if (theme === "light") {
|
// 初始化主题
|
||||||
themeLink.href = "Styles/light.css";
|
const currentThemePath = `Styles/${currentTheme}/${theme}.css`;
|
||||||
themeToggle.checked = true;
|
themeLink.href = currentThemePath;
|
||||||
} else {
|
themeToggle.checked = theme === "light";
|
||||||
themeLink.href = "Styles/dark.css";
|
|
||||||
themeToggle.checked = false;
|
// 加载主题配置
|
||||||
|
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", () => {
|
settingsBtn.addEventListener("click", () => {
|
||||||
@ -55,27 +83,88 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
room = roomInput.value;
|
room = roomInput.value;
|
||||||
zoomLevel = parseFloat(zoomInput.value);
|
zoomLevel = parseFloat(zoomInput.value);
|
||||||
theme = themeToggle.checked ? "light" : "dark";
|
theme = themeToggle.checked ? "light" : "dark";
|
||||||
|
currentTheme = themeSelect.value;
|
||||||
|
isAutoToggle = autoToggle.checked;
|
||||||
setCookie("offsetTime", offsetTime, 365);
|
setCookie("offsetTime", offsetTime, 365);
|
||||||
setCookie("room", room, 365);
|
setCookie("room", room, 365);
|
||||||
setCookie("zoomLevel", zoomLevel, 365);
|
setCookie("zoomLevel", zoomLevel, 365);
|
||||||
setCookie("theme", theme, 365);
|
setCookie("theme", theme, 365);
|
||||||
|
setCookie("currentTheme", currentTheme, 365);
|
||||||
|
setCookie("autoToggle", isAutoToggle, 365);
|
||||||
roomElem.textContent = room;
|
roomElem.textContent = room;
|
||||||
document.body.style.zoom = zoomLevel;
|
document.body.style.zoom = zoomLevel;
|
||||||
themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
|
updateThemeLink();
|
||||||
settingsModal.classList.add("fade-out");
|
settingsModal.classList.add("fade-out");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
settingsModal.style.display = "none";
|
settingsModal.style.display = "none";
|
||||||
settingsModal.classList.remove("fade-out");
|
settingsModal.classList.remove("fade-out");
|
||||||
}, 300);
|
}, 300);
|
||||||
|
// 立即生效时间偏移
|
||||||
location.reload();
|
location.reload();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
errorSystem.show('保存设置失败: ' + e.message);
|
errorSystem.show('保存设置失败: ' + e.message);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
themeSelect.addEventListener("change", () => {
|
||||||
|
currentTheme = themeSelect.value;
|
||||||
|
updateThemeLink();
|
||||||
|
});
|
||||||
|
|
||||||
themeToggle.addEventListener("change", () => {
|
themeToggle.addEventListener("change", () => {
|
||||||
const theme = themeToggle.checked ? "light" : "dark";
|
updateThemeLink();
|
||||||
themeLink.href = theme === "light" ? "Styles/light.css" : "Styles/dark.css";
|
});
|
||||||
|
|
||||||
|
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 {
|
try {
|
||||||
|
|||||||
671
present/Styles/ealg/dark.css
Normal file
671
present/Styles/ealg/dark.css
Normal 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
670
present/Styles/ealg/light.css
Normal 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
703
present/Styles/md3/dark.css
Normal 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
634
present/Styles/md3/light.css
Normal 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
BIN
present/Styles/old/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
present/Styles/old/background_light.jpg
Normal file
BIN
present/Styles/old/background_light.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
@ -1,8 +1,29 @@
|
|||||||
|
#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 {
|
body {
|
||||||
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
|
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: url('../../background.jpg') no-repeat center center fixed; /* 更新路径 */
|
background: url('background.jpg') no-repeat center center fixed; /* 更新路径 */
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
animation: fadeIn 1s;
|
animation: fadeIn 1s;
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
@ -75,7 +96,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#message {
|
#message {
|
||||||
font-size: 1.5rem;
|
font-size: 1.8rem;
|
||||||
color: #16a3d1;
|
color: #16a3d1;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
@ -219,9 +240,30 @@ td:last-child {
|
|||||||
border: 1px solid #444;
|
border: 1px solid #444;
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
max-height: 60vh; /* 限制最大高度 */
|
||||||
|
overflow-y: auto; /* 允许垂直滚动 */
|
||||||
animation: fadeIn 0.5s ease;
|
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 {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; transform: translateY(-20px); }
|
from { opacity: 0; transform: translateY(-20px); }
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
@ -261,7 +303,7 @@ td:last-child {
|
|||||||
#settings-modal-content input[type="text"] {
|
#settings-modal-content input[type="text"] {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
font-size: 1.5rem;
|
font-size: 1.8rem;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -411,12 +453,41 @@ input:checked + .slider:before {
|
|||||||
gap: 10px;
|
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 {
|
.config-file-container {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid #555;
|
border: 1px solid #555;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: rgba(31, 31, 31, 0.5);
|
background-color: rgba(31, 31, 31, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-file-container label {
|
.config-file-container label {
|
||||||
@ -427,13 +498,17 @@ input:checked + .slider:before {
|
|||||||
|
|
||||||
.config-file-container input[type="file"] {
|
.config-file-container input[type="file"] {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: calc(100% - 16px); /* 减去padding的宽度 */
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid #555;
|
border: 1px solid #555;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-file-container input[type="file"]:hover {
|
.config-file-container input[type="file"]:hover {
|
||||||
@ -461,3 +536,162 @@ input:checked + .slider:before {
|
|||||||
.config-control-btn:hover {
|
.config-control-btn:hover {
|
||||||
background-color: #c9302c;
|
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;
|
||||||
|
}
|
||||||
@ -1,82 +1,103 @@
|
|||||||
|
#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 {
|
body {
|
||||||
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
|
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif; /* 设置字体 */
|
||||||
margin: 0;
|
margin: 0; /* 去除默认外边距 */
|
||||||
padding: 0;
|
padding: 0; /* 去除默认内边距 */
|
||||||
background: url('../../background_light.jpg') no-repeat center center fixed;
|
background: url('background_light.jpg') no-repeat center center fixed; /* 设置背景图片 */
|
||||||
background-size: cover;
|
background-size: cover; /* 背景图片覆盖整个页面 */
|
||||||
animation: fadeIn 1s;
|
animation: fadeIn 1s; /* 页面加载时的淡入动画 */
|
||||||
color: #333;
|
color: #333; /* 全局文字颜色 */
|
||||||
overflow: auto;
|
overflow: auto; /* 允许页面滚动 */
|
||||||
}
|
}
|
||||||
|
|
||||||
body::-webkit-scrollbar {
|
body::-webkit-scrollbar {
|
||||||
display: none;
|
display: none; /* 隐藏滚动条 */
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; }
|
from { opacity: 0; } /* 动画开始时透明 */
|
||||||
to { opacity: 1; }
|
to { opacity: 1; } /* 动画结束时完全显示 */
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullscreen-btn, #settings-btn {
|
#fullscreen-btn, #settings-btn {
|
||||||
position: absolute;
|
position: absolute; /* 绝对定位 */
|
||||||
top: 20px;
|
top: 20px; /* 距离顶部 20px */
|
||||||
padding: 10px 20px;
|
padding: 10px 20px; /* 内边距 */
|
||||||
font-size: 1rem;
|
font-size: 1rem; /* 字体大小 */
|
||||||
cursor: pointer;
|
cursor: pointer; /* 鼠标悬停时显示为手型 */
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0; /* 按钮背景颜色 */
|
||||||
color: #333;
|
color: #333; /* 按钮文字颜色 */
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc; /* 按钮边框 */
|
||||||
border-radius: 5px;
|
border-radius: 5px; /* 按钮圆角 */
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
|
||||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
|
||||||
z-index: 1001;
|
z-index: 1001; /* 设置按钮的层级，确保在其他元素之上 */
|
||||||
}
|
}
|
||||||
|
|
||||||
#fullscreen-btn {
|
#fullscreen-btn {
|
||||||
right: 20px;
|
right: 20px; /* 距离右侧 20px */
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn {
|
#settings-btn {
|
||||||
right: 120px;
|
right: 120px; /* 距离右侧 120px */
|
||||||
}
|
}
|
||||||
|
|
||||||
#settings-btn:hover, #fullscreen-btn:hover {
|
#settings-btn:hover, #fullscreen-btn:hover {
|
||||||
background-color: #ccc;
|
background-color: #ccc; /* 悬停时的背景颜色 */
|
||||||
transform: scale(1.05);
|
transform: scale(1.05); /* 悬停时放大 5% */
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 20px;
|
padding: 20px; /* 内边距 */
|
||||||
max-width: 1400px;
|
max-width: 1400px; /* 最大宽度 */
|
||||||
margin: auto;
|
margin: auto; /* 居中对齐 */
|
||||||
background-color: rgba(255, 255, 255, 0.4);
|
background-color: rgba(255, 255, 255, 0.4); /* 半透明背景 */
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem; /* 字体大小 */
|
||||||
font-weight: bold;
|
font-weight: bold; /* 字体加粗 */
|
||||||
text-align: left;
|
text-align: left; /* 左对齐 */
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px; /* 下边距 */
|
||||||
color: #333;
|
color: #333; /* 文字颜色 */
|
||||||
display: flex;
|
display: flex; /* 使用 flex 布局 */
|
||||||
align-items: center;
|
align-items: center; /* 垂直居中 */
|
||||||
justify-content: space-between;
|
justify-content: space-between; /* 两端对齐 */
|
||||||
}
|
}
|
||||||
|
|
||||||
#room {
|
#room {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem; /* 字体大小 */
|
||||||
font-weight: bold;
|
font-weight: bold; /* 字体加粗 */
|
||||||
color: #333;
|
color: #333; /* 文字颜色 */
|
||||||
position: relative;
|
position: relative; /* 相对定位 */
|
||||||
right: 0;
|
right: 0; /* 向右移动 0 */
|
||||||
margin-left: 20px;
|
margin-left: 20px; /* 左边距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
#message {
|
#message {
|
||||||
font-size: 1.5rem;
|
font-size: 1.8rem; /* 字体大小 */
|
||||||
color: #16a3d1;
|
color: #16a3d1; /* 文字颜色 */
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px; /* 下边距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
@ -127,11 +148,11 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%; /* 表格宽度 */
|
||||||
border-collapse: collapse;
|
border-collapse: collapse; /* 合并边框 */
|
||||||
margin-top: 20px;
|
margin-top: 20px; /* 上边距 */
|
||||||
border: 1px solid #000;
|
border: 1px solid #000; /* 表格边框 */
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
@ -142,14 +163,14 @@ th, td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0; /* 背景颜色 */
|
||||||
color: #333;
|
color: #333; /* 文字颜色 */
|
||||||
font-weight: bold;
|
font-weight: bold; /* 字体加粗 */
|
||||||
border-bottom: 2px solid #000;
|
border-bottom: 2px solid #000; /* 下边框 */
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:hover {
|
tr:hover {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0; /* 背景颜色 */
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
@ -158,17 +179,20 @@ table {
|
|||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid #000;
|
border-bottom: 1px solid #000; /* 下边框 */
|
||||||
|
padding: 0px; /* 内边距 */
|
||||||
|
font-size: 1.8rem; /* 字体大小 */
|
||||||
|
text-align: center; /* 居中对齐 */
|
||||||
}
|
}
|
||||||
|
|
||||||
td:first-child {
|
td:first-child {
|
||||||
border-top-left-radius: 8px;
|
border-top-left-radius: 8px; /* 左上角圆角 */
|
||||||
border-bottom-left-radius: 8px;
|
border-bottom-left-radius: 8px; /* 左下角圆角 */
|
||||||
}
|
}
|
||||||
|
|
||||||
td:last-child {
|
td:last-child {
|
||||||
border-top-right-radius: 8px;
|
border-top-right-radius: 8px; /* 右上角圆角 */
|
||||||
border-bottom-right-radius: 8px;
|
border-bottom-right-radius: 8px; /* 右下角圆角 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.exam-status-tag {
|
.exam-status-tag {
|
||||||
@ -220,9 +244,30 @@ td:last-child {
|
|||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
max-height: 60vh; /* 限制最大高度 */
|
||||||
|
overflow-y: auto; /* 允许垂直滚动 */
|
||||||
animation: fadeIn 0.5s ease;
|
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 {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; transform: translateY(-20px); }
|
from { opacity: 0; transform: translateY(-20px); }
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
@ -266,7 +311,7 @@ td:last-child {
|
|||||||
|
|
||||||
#settings-modal-content input[type="number"],
|
#settings-modal-content input[type="number"],
|
||||||
#settings-modal-content input[type="text"] {
|
#settings-modal-content input[type="text"] {
|
||||||
font-size: 1.5rem;
|
font-size: 1.8rem;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@ -409,19 +454,48 @@ input:checked + .slider:before {
|
|||||||
transform: translateX(26px);
|
transform: translateX(26px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-toggle-container {
|
theme-toggle-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 10px;
|
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 {
|
.config-file-container {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-file-container label {
|
.config-file-container label {
|
||||||
@ -432,13 +506,17 @@ input:checked + .slider:before {
|
|||||||
|
|
||||||
.config-file-container input[type="file"] {
|
.config-file-container input[type="file"] {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: calc(100% - 16px); /* 减去padding的宽度 */
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-file-container input[type="file"]:hover {
|
.config-file-container input[type="file"]:hover {
|
||||||
@ -466,3 +544,151 @@ input:checked + .slider:before {
|
|||||||
.config-control-btn:hover {
|
.config-control-btn:hover {
|
||||||
background-color: #c9302c;
|
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
16
present/Styles/profile.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"theme":[
|
||||||
|
{
|
||||||
|
"name": "ExamAware旧版",
|
||||||
|
"path": "ealg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ExamSchedule旧版",
|
||||||
|
"path": "old"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Material Design 3",
|
||||||
|
"path": "md3"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -4,13 +4,15 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Exam Schedule</title>
|
<title>Exam Schedule</title>
|
||||||
<link rel="stylesheet" href="Styles/dark.css" id="theme-link">
|
<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/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="error-container">
|
<div class="error-container">
|
||||||
<div class="error-content" id="errorMessage"></div>
|
<div class="error-content" id="errorMessage"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="return-btn" onclick="window.location.href = '../'">返回</button>
|
||||||
<button id="settings-btn">设置</button>
|
<button id="settings-btn">设置</button>
|
||||||
<button id="fullscreen-btn">全屏</button>
|
<button id="fullscreen-btn">全屏</button>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -25,7 +27,68 @@
|
|||||||
<div id="current-time"></div>
|
<div id="current-time"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-section">
|
<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="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="exam-timing"></div>
|
||||||
<div id="remaining-time"></div>
|
<div id="remaining-time"></div>
|
||||||
<div id="status"></div>
|
<div id="status"></div>
|
||||||
@ -49,6 +112,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 -->
|
<!-- Settings Modal -->
|
||||||
<div id="settings-modal">
|
<div id="settings-modal">
|
||||||
<div id="settings-modal-content" class="settings-panel dark-theme">
|
<div id="settings-modal-content" class="settings-panel dark-theme">
|
||||||
@ -59,12 +128,27 @@
|
|||||||
<input type="text" id="room-input" name="room-input" value="">
|
<input type="text" id="room-input" name="room-input" value="">
|
||||||
<label for="zoom-input">页面缩放倍数:</label>
|
<label for="zoom-input">页面缩放倍数:</label>
|
||||||
<input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
|
<input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
|
||||||
|
<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">
|
<div class="theme-toggle-container">
|
||||||
|
<label for="theme-select">主题:</label>
|
||||||
|
<select id="theme-select">
|
||||||
|
<!-- 动态填充主题选项 -->
|
||||||
|
</select>
|
||||||
<label for="theme-toggle">亮/暗色模式:</label>
|
<label for="theme-toggle">亮/暗色模式:</label>
|
||||||
<label class="switch">
|
<label class="switch">
|
||||||
<input type="checkbox" id="theme-toggle">
|
<input type="checkbox" id="theme-toggle">
|
||||||
<span class="slider round"></span>
|
<span class="slider round"></span>
|
||||||
</label>
|
</label>
|
||||||
|
<label for="auto-toggle">自动切换显示:</label>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="checkbox" id="auto-toggle">
|
||||||
|
<span class="slider round"></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<button id="save-settings-btn" class="control-btn">确定</button>
|
<button id="save-settings-btn" class="control-btn">确定</button>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user