ExamAware/ExamSchedule
3
0
Fork 0
mirror of https://github.com/ExamAware/ExamSchedule.git synced 2025-04-29 11:06:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加考试安排和当前时间页面

Browse Source
This commit is contained in:
MKStoler1024 2025-01-15 03:53:02 +00:00
parent 98dfcbb3ce
commit 40154d4f19
7 changed files with 313 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
exam_config.json → exam/exam_config.json
View File

55
exam/index.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exam Schedule</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="settings-btn">设置</button>
<button id="fullscreen-btn">全屏</button>
<div class="container">
<h1 id="examName">
考试安排
<span id="room"></span>
</h1>
<p id="message"></p>
<div class="content">
<div class="left-column">
<div id="current-time"></div>
<div id="current-subject"></div>
<div id="exam-timing"></div>
<div id="remaining-time"></div>
<div id="status"></div>
</div>
<div class="right-column">
<table>
<thead>
<tr>
<th>科目</th>
<th>开始时间</th>
<th>结束时间</th>
</tr>
</thead>
<tbody id="exam-table-body">
<!-- Dynamically filled by JavaScript -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal">
<div id="settings-modal-content">
<label for="offset-time">偏移时间（秒）:</label>
<input type="number" id="offset-time" name="offset-time" value="0">
<label for="room-input">考场号:</label>
<input type="text" id="room-input" name="room-input" value="">
<button id="save-settings-btn">确定</button>
<button id="close-settings-btn">关闭</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

0
script.js → exam/script.js
View File

0
styles.css → exam/styles.css
View File

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

140
index.html
View File

@ -1,55 +1,85 @@
<!DOCTYPE html> <!--
<html lang="en"> _ooOoo_
<head> o8888888o
<meta charset="UTF-8"> 88" . "88
<meta name="viewport" content="width=device-width, initial-scale=1.0"> (| -_- |)
<title>Exam Schedule</title> O\ = /O
<link rel="stylesheet" href="styles.css"> ____/---\____
</head> .' \\| |// '.
<body> / \\||| : |||// \
<button id="settings-btn">设置</button> / _||||| -:- |||||- \
<button id="fullscreen-btn">全屏</button> | | \\\ - /// | |
<div class="container"> | _| ''---/'' | |
<h1 id="examName"> \ .-\__ `-` ___/-. /
考试安排 ___`. .' /--.--\ `. . __
<span id="room"></span> ."" '< `.___\_<|>_/___.' >'"".
</h1> | | : `- \.;`\ _ /';.\ - ` : | |
<p id="message"></p> \ \ `-. \_ __\ /__ _/ .-\ / /
<div class="content"> ======`-.____`-.___\_____/___.-`____.-'======
<div class="left-column"> `=---='
<div id="current-time"></div> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<div id="current-subject"></div> 佛祖保佑 永无BUG
<div id="exam-timing"></div> -->
<div id="remaining-time"></div> <!DOCTYPE html>
<div id="status"></div> <html lang="en">
</div> <head>
<div class="right-column"> <link rel="shortcut icon" href="/favicon.ico">
<table> <meta charset="UTF-8">
<thead> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<tr> <title>选择页面</title>
<th>科目</th> <style>
<th>开始时间</th> body {
<th>结束时间</th> background-image: url('/background.jpg');
</tr> background-size: cover;
</thead> background-repeat: no-repeat;
<tbody id="exam-table-body"> display: flex;
<!-- Dynamically filled by JavaScript --> justify-content: center;
</tbody> align-items: center;
</table> height: 100vh;
</div> margin: 0;
</div> font-family: 'Helvetica Neue', sans-serif;
</div> }
<!-- Settings Modal --> h1 {
<div id="settings-modal"> color: white;
<div id="settings-modal-content"> font-size: 36px; /* 更大一点 */
<label for="offset-time">偏移时间（秒）:</label> text-align: center;
<input type="number" id="offset-time" name="offset-time" value="0"> animation: fadeInUp 1s ease-in-out;
<label for="room-input">考场号:</label> }
<input type="text" id="room-input" name="room-input" value=""> ul {
<button id="save-settings-btn">确定</button> list-style: none;
<button id="close-settings-btn">关闭</button> padding: 0;
</div> margin: 0;
</div> animation: fadeInUp 1s ease-in-out;
<script src="script.js"></script> }
</body> li {
</html> margin-bottom: 20px; /* 增加间距 */
}
a {
color: white;
text-decoration: none;
font-weight: bold; /* 加粗链接文本 */
transition: color 0.3s ease; /* 添加过渡效果 */
}
a:hover {
color: #f8d800; /* 鼠标悬停时的颜色 */
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<h1>选择版本：</h1>
<ul>
<li><a href="./time/">电子钟表</a></li>
<li><a href="./exam/">考试看板</a></li>
</ul>
</body>
</html>

173
time/index.html Normal file
View File

@ -0,0 +1,173 @@
<!--
_ooOoo_
o8888888o
88" . "88
(| -_- |)
O\ = /O
____/---\____
.' \\| |// '.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| _| ''---/'' | |
\ .-\__ `-` ___/-. /
___`. .' /--.--\ `. . __
."" '< `.___\_<|>_/___.' >'"".
| | : `- \.;`\ _ /';.\ - ` : | |
\ \ `-. \_ __\ /__ _/ .-\ / /
======`-.____`-.___\_____/___.-`____.-'======
`=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
佛祖保佑 永无BUG
佛祖有BUG 代码也没BUG
（莫要打我……真的就开个玩笑！）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当前时间</title>
<link rel="shortcut icon" href="/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Sans|Inter|Space+Mono|Work+Sans|Libre+Franklin&display=swap" rel="stylesheet">
<style>
body {
background: url('/background.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.container {
text-align: center;
animation: fadeIn 2s ease-in-out;
}
.time {
font-size: 10rem;
margin: 0;
animation: glow 1s ease-in-out infinite alternate;
}
.text {
font-size: 1.5rem;
margin-bottom: 20px;
}
.btn {
padding: 10px 25px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.controls {
margin-top: 30px;
}
.btn.fullscreen {
background-color: #f44336;
color: #fff;
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes glow {
from {
text-shadow: 0 0 10px #222;
}
to {
text-shadow: 0 0 20px #000;
}
}
</style>
</head>
<body>
<div class="container">
<div class="text">当前时间：</div>
<div class="time" id="time"></div>
<div class="controls">
<select id="fontSelector" class="btn">
<!-- 新增的Google字体选项 -->
<option value="Roboto">Roboto（在线）</option>
<option value="DM Sans">DM Sans（在线）</option>
<option value="Inter">Inter（在线）</option>
<option value="Space Mono">Space Mono（在线）</option>
<option value="Work Sans">Work Sans（在线）</option>
<option value="Libre Franklin">Libre Franklin（在线）</option>
<option value="微软雅黑">微软雅黑</option>
<option value="黑体">黑体</option>
<option value="宋体">宋体</option>
</select>
<button class="btn" onclick="changeFontFamily()">更改字体</button>
<button class="btn" onclick="changeFontSize(-5)">减小字号</button>
<button class="btn" onclick="changeFontSize(5)">增大字号</button>
<button class="btn fullscreen" onclick="toggleFullScreen()">全屏/还原</button>
</div>
</div>
<script>
setInterval(() => {
const date = new Date();
const time = date.toLocaleTimeString('zh-CN', {
hour12: false
});
document.getElementById('time').textContent = time;
}, 1000);
function changeFontSize(change) {
const elements = document.querySelectorAll('.time');
elements.forEach(element => {
const currentSize = parseFloat(window.getComputedStyle(element).fontSize);
element.style.fontSize = `${currentSize + change}px`;
});
}
function changeFontFamily() {
const selectedFont = document.getElementById('fontSelector').value;
const elements = document.querySelectorAll('.time, .text');
elements.forEach(element => {
element.style.fontFamily = selectedFont;
});
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
</script>
</body>
</html>