mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 19:16:33 +00:00
feat: 添加考试安排和当前时间页面
This commit is contained in:
MKStoler1024
parent
98dfcbb3ce
commit
40154d4f19
55
exam/index.html
Normal file
55
exam/index.html
Normal 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>
|
||||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
122
index.html
122
index.html
@ -1,55 +1,85 @@
|
|||||||
|
<!--
|
||||||
|
_ooOoo_
|
||||||
|
o8888888o
|
||||||
|
88" . "88
|
||||||
|
(| -_- |)
|
||||||
|
O\ = /O
|
||||||
|
____/---\____
|
||||||
|
.' \\| |// '.
|
||||||
|
/ \\||| : |||// \
|
||||||
|
/ _||||| -:- |||||- \
|
||||||
|
| | \\\ - /// | |
|
||||||
|
| _| ''---/'' | |
|
||||||
|
\ .-\__ `-` ___/-. /
|
||||||
|
___`. .' /--.--\ `. . __
|
||||||
|
."" '< `.___\_<|>_/___.' >'"".
|
||||||
|
| | : `- \.;`\ _ /';.\ - ` : | |
|
||||||
|
\ \ `-. \_ __\ /__ _/ .-\ / /
|
||||||
|
======`-.____`-.___\_____/___.-`____.-'======
|
||||||
|
`=---='
|
||||||
|
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
佛祖保佑 永无BUG
|
||||||
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<link rel="shortcut icon" href="/favicon.ico">
|
||||||
<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>选择页面</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<style>
|
||||||
|
body {
|
||||||
|
background-image: url('/background.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Helvetica Neue', sans-serif;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: 36px; /* 更大一点 */
|
||||||
|
text-align: center;
|
||||||
|
animation: fadeInUp 1s ease-in-out;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
animation: fadeInUp 1s ease-in-out;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<button id="settings-btn">设置</button>
|
<h1>选择版本：</h1>
|
||||||
<button id="fullscreen-btn">全屏</button>
|
<ul>
|
||||||
<div class="container">
|
<li><a href="./time/">电子钟表</a></li>
|
||||||
<h1 id="examName">
|
<li><a href="./exam/">考试看板</a></li>
|
||||||
考试安排
|
</ul>
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
173
time/index.html
Normal file
173
time/index.html
Normal 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>
|
||||||
Loading…
x
Reference in New Issue
Block a user