mirror of
https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule
synced 2025-04-29 03:26:34 +00:00
添加考试安排页面及样式，更新配置加载功能
This commit is contained in:
MKStoler
parent
a1a7c2ef63
commit
e25390cdc6
58
ExamCloudSchedule/index.html
Normal file
58
ExamCloudSchedule/index.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Exam Schedule</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button id="settings-btn">设置</button>
|
||||||
|
<button id="fullscreen-btn">全屏</button>
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="examName">
|
||||||
|
考试安排
|
||||||
|
<span id="room"></span>
|
||||||
|
</h1>
|
||||||
|
<p id="message"></p>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left-column">
|
||||||
|
<div id="current-time"></div>
|
||||||
|
<div id="current-subject"></div>
|
||||||
|
<div id="exam-timing"></div>
|
||||||
|
<div id="remaining-time"></div>
|
||||||
|
<div id="status"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right-column">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>科目</th>
|
||||||
|
<th>开始时间</th>
|
||||||
|
<th>结束时间</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="exam-table-body">
|
||||||
|
<!-- Dynamically filled by JavaScript -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Settings Modal -->
|
||||||
|
<div id="settings-modal">
|
||||||
|
<div id="settings-modal-content">
|
||||||
|
<label for="offset-time">偏移时间（秒）:</label>
|
||||||
|
<input type="number" id="offset-time" name="offset-time" value="0">
|
||||||
|
<label for="room-input">考场号:</label>
|
||||||
|
<input type="text" id="room-input" name="room-input" value="">
|
||||||
|
<label for="zoom-input">页面缩放倍数:</label>
|
||||||
|
<input type="number" id="zoom-input" step="0.1" min="0.5" max="2">
|
||||||
|
<button id="save-settings-btn">确定</button>
|
||||||
|
<button id="close-settings-btn">关闭</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
230
ExamCloudSchedule/script.js
Normal file
230
ExamCloudSchedule/script.js
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const examNameElem = document.getElementById("examName");
|
||||||
|
const messageElem = document.getElementById("message");
|
||||||
|
const currentTimeElem = document.getElementById("current-time");
|
||||||
|
const currentSubjectElem = document.getElementById("current-subject");
|
||||||
|
const examTimingElem = document.getElementById("exam-timing");
|
||||||
|
const remainingTimeElem = document.getElementById("remaining-time");
|
||||||
|
const statusElem = document.getElementById("status");
|
||||||
|
const examTableBodyElem = document.getElementById("exam-table-body");
|
||||||
|
const fullscreenBtn = document.getElementById("fullscreen-btn");
|
||||||
|
const settingsBtn = document.getElementById("settings-btn");
|
||||||
|
const settingsModal = document.getElementById("settings-modal");
|
||||||
|
const closeSettingsBtn = document.getElementById("close-settings-btn");
|
||||||
|
const saveSettingsBtn = document.getElementById("save-settings-btn");
|
||||||
|
const offsetTimeInput = document.getElementById("offset-time");
|
||||||
|
const roomInput = document.getElementById("room-input");
|
||||||
|
const roomElem = document.getElementById("room");
|
||||||
|
const zoomInput = document.getElementById("zoom-input");
|
||||||
|
|
||||||
|
let offsetTime = getCookie("offsetTime") || 0;
|
||||||
|
let room = getCookie("room") || "";
|
||||||
|
let zoomLevel = getCookie("zoomLevel") || 1;
|
||||||
|
|
||||||
|
offsetTime = parseInt(offsetTime);
|
||||||
|
roomElem.textContent = room;
|
||||||
|
|
||||||
|
function fetchData() {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const configId = urlParams.get('configId');
|
||||||
|
if (!configId) {
|
||||||
|
console.error('No configId provided');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(`/get_config.php?id=${encodeURIComponent(configId)}`, { cache: "no-store" }) // 不保留缓存
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
displayExamInfo(data);
|
||||||
|
updateCurrentTime();
|
||||||
|
updateExamInfo(data);
|
||||||
|
setInterval(() => updateCurrentTime(), 1000); // Update current time every second
|
||||||
|
setInterval(() => updateExamInfo(data), 1000); // Update exam info every second
|
||||||
|
})
|
||||||
|
.catch(error => console.error('Error fetching exam data:', error));
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayExamInfo(data) {
|
||||||
|
// Display exam name
|
||||||
|
const examNameText = data.examName;
|
||||||
|
const roomText = roomElem.textContent;
|
||||||
|
examNameElem.innerHTML = `${examNameText} <span id="room">${roomText}</span>`;
|
||||||
|
// Display message
|
||||||
|
messageElem.textContent = data.message;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCurrentTime() {
|
||||||
|
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||||
|
currentTimeElem.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTimeWithoutSeconds(time) {
|
||||||
|
// Convert time to string and remove seconds if present
|
||||||
|
return time.slice(0, -3);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateExamInfo(data) {
|
||||||
|
const now = new Date(new Date().getTime() + offsetTime * 1000);
|
||||||
|
let currentExam = null;
|
||||||
|
let nextExam = null;
|
||||||
|
let lastExam = null;
|
||||||
|
|
||||||
|
data.examInfos.forEach(exam => {
|
||||||
|
const start = new Date(exam.start);
|
||||||
|
const end = new Date(exam.end);
|
||||||
|
if (now >= start && now <= end) {
|
||||||
|
currentExam = exam;
|
||||||
|
}
|
||||||
|
if (!currentExam && !nextExam && now < start) {
|
||||||
|
nextExam = exam;
|
||||||
|
}
|
||||||
|
if (now > end && (!lastExam || end > new Date(lastExam.end))) {
|
||||||
|
lastExam = exam;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (currentExam) {
|
||||||
|
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||||
|
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||||
|
const remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
|
||||||
|
const remainingHours = Math.floor(remainingTime / 3600);
|
||||||
|
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
|
||||||
|
const remainingSeconds = Math.floor(remainingTime % 60);
|
||||||
|
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||||
|
|
||||||
|
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||||
|
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||||
|
remainingTimeElem.style.color = "red";
|
||||||
|
remainingTimeElem.style.fontWeight = "bold";
|
||||||
|
} else {
|
||||||
|
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||||
|
remainingTimeElem.style.color = "#93b4f7";
|
||||||
|
remainingTimeElem.style.fontWeight = "normal";
|
||||||
|
}
|
||||||
|
|
||||||
|
statusElem.textContent = "状态: 进行中";
|
||||||
|
statusElem.style.color = "#5ba838";
|
||||||
|
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
|
||||||
|
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
|
||||||
|
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||||
|
examTimingElem.textContent = "";
|
||||||
|
remainingTimeElem.textContent = ``;
|
||||||
|
statusElem.textContent = "状态: 已结束";
|
||||||
|
statusElem.style.color = "red";
|
||||||
|
} else if (nextExam) {
|
||||||
|
const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
|
||||||
|
const remainingHours = Math.floor(timeUntilStart / 3600);
|
||||||
|
const remainingMinutes = Math.floor((timeUntilStart % 3600) / 60);
|
||||||
|
const remainingSeconds = Math.floor(timeUntilStart % 60);
|
||||||
|
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||||
|
|
||||||
|
if (timeUntilStart <= 15 * 60) {
|
||||||
|
currentSubjectElem.textContent = `即将开始: ${nextExam.name}`;
|
||||||
|
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||||
|
remainingTimeElem.style.color = "orange";
|
||||||
|
remainingTimeElem.style.fontWeight = "bold";
|
||||||
|
statusElem.textContent = "状态: 即将开始";
|
||||||
|
statusElem.style.color = "#DBA014";
|
||||||
|
} else {
|
||||||
|
currentSubjectElem.textContent = `下一场科目: ${nextExam.name}`;
|
||||||
|
remainingTimeElem.textContent = "";
|
||||||
|
statusElem.textContent = "状态: 未开始";
|
||||||
|
remainingTimeElem.style.fontWeight = "normal";
|
||||||
|
statusElem.style.color = "#EAEE5B";
|
||||||
|
}
|
||||||
|
|
||||||
|
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||||
|
} else {
|
||||||
|
currentSubjectElem.textContent = "考试均已结束";
|
||||||
|
examTimingElem.textContent = "";
|
||||||
|
remainingTimeElem.textContent = "";
|
||||||
|
statusElem.textContent = "状态: 空闲";
|
||||||
|
statusElem.style.color = "#3946AF";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update next exams table
|
||||||
|
examTableBodyElem.innerHTML = "";
|
||||||
|
data.examInfos.forEach(exam => {
|
||||||
|
const start = new Date(exam.start);
|
||||||
|
const end = new Date(exam.end);
|
||||||
|
let status = "";
|
||||||
|
if (now < start) {
|
||||||
|
status = "即将开始";
|
||||||
|
} else if (now > end) {
|
||||||
|
status = "已结束";
|
||||||
|
} else {
|
||||||
|
status = "进行中";
|
||||||
|
}
|
||||||
|
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.className = `exam-status-${status}`;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${exam.name}</td>
|
||||||
|
<td>${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||||
|
<td>${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
|
||||||
|
`;
|
||||||
|
examTableBodyElem.appendChild(row);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fullscreen functionality
|
||||||
|
fullscreenBtn.addEventListener("click", () => {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen();
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Open settings modal
|
||||||
|
settingsBtn.addEventListener("click", () => {
|
||||||
|
offsetTimeInput.value = offsetTime;
|
||||||
|
roomInput.value = room;
|
||||||
|
zoomInput.value = zoomLevel;
|
||||||
|
settingsModal.style.display = "block";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close settings modal
|
||||||
|
closeSettingsBtn.addEventListener("click", () => {
|
||||||
|
settingsModal.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save settings
|
||||||
|
saveSettingsBtn.addEventListener("click", () => {
|
||||||
|
offsetTime = parseInt(offsetTimeInput.value);
|
||||||
|
room = roomInput.value;
|
||||||
|
zoomLevel = parseFloat(zoomInput.value);
|
||||||
|
setCookie("offsetTime", offsetTime, 365);
|
||||||
|
setCookie("room", room, 365);
|
||||||
|
setCookie("zoomLevel", zoomLevel, 365);
|
||||||
|
roomElem.textContent = room;
|
||||||
|
document.body.style.zoom = zoomLevel;
|
||||||
|
settingsModal.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.style.zoom = zoomLevel;
|
||||||
|
|
||||||
|
// Utility function to set a cookie
|
||||||
|
function setCookie(name, value, days) {
|
||||||
|
const d = new Date();
|
||||||
|
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||||
|
const expires = "expires=" + d.toUTCString();
|
||||||
|
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility function to get a cookie
|
||||||
|
function getCookie(name) {
|
||||||
|
const nameEQ = name + "=";
|
||||||
|
const ca = document.cookie.split(';');
|
||||||
|
for (let i = 0; i < ca.length; i++) {
|
||||||
|
let c = ca[i];
|
||||||
|
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
||||||
|
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
});
|
||||||
260
ExamCloudSchedule/styles.css
Normal file
260
ExamCloudSchedule/styles.css
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
body {
|
||||||
|
font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: url('../background.jpg') no-repeat center center fixed;
|
||||||
|
background-size: cover;
|
||||||
|
animation: fadeIn 1s;
|
||||||
|
color: #e0e0e0;
|
||||||
|
overflow: auto; /* 允许页面滚动 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
color: #e0e0e0;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 120px; /* Fullscreen button's left */
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
color: #e0e0e0;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-btn:hover {
|
||||||
|
background-color: #333;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
#fullscreen-btn:hover {
|
||||||
|
background-color: #333;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1400px; /* 增加主体部分宽度 */
|
||||||
|
margin: auto;
|
||||||
|
background-color: rgba(31, 31, 31, 0.5); /* 使用rgba设置背景透明度 */
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #e0e0e0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#room {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #e0e0e0;
|
||||||
|
position: relative;
|
||||||
|
right: 0;
|
||||||
|
margin-left: 20px; /* 调整位置使其保持在container中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
#message {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #16a3d1;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-column, .right-column {
|
||||||
|
width: 48%;
|
||||||
|
background-color: rgba(31, 31, 31, 0.2);
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#current-time {
|
||||||
|
font-size: 10rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #7cc3fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#current-subject, #exam-timing, #remaining-time, #status {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin: 10px 0;
|
||||||
|
text-align: left;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
background-color: rgba(31, 31, 31, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #333;
|
||||||
|
padding: 8px; /* 缩短行高 */
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #333;
|
||||||
|
color: #7cc3fb;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 2px solid #2b71ad;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-status-进行中 td {
|
||||||
|
color: #5ba838 !important; /* 绿色字体 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-status-即将开始 td {
|
||||||
|
color: #fe9901 !important; /* 橙色字体 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-status-已结束 td {
|
||||||
|
color: #ec0434 !important; /* 红色字体 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.exam-status-空闲 td {
|
||||||
|
color: blue !important; /* 蓝色字体 */
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child {
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:last-child {
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal-content {
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
margin: 5% auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 600px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal-content label {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal-content input[type="number"],
|
||||||
|
#settings-modal-content input[type="text"] {
|
||||||
|
font-size: 2rem;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #121212;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal-content button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #93b4f7;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-modal-content button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-settings-btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #d9534f;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-settings-btn:hover {
|
||||||
|
background-color: #c9302c;
|
||||||
|
}
|
||||||
BIN
background.jpg
Normal file
BIN
background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
10
index.php
10
index.php
@ -74,6 +74,7 @@ header('Content-Type: text/html; charset=utf-8');
|
|||||||
<label for="configId">输入配置ID：</label>
|
<label for="configId">输入配置ID：</label>
|
||||||
<input type="text" id="configId" placeholder="例如：room301">
|
<input type="text" id="configId" placeholder="例如：room301">
|
||||||
<button onclick="loadConfig()">获取配置</button>
|
<button onclick="loadConfig()">获取配置</button>
|
||||||
|
<button id="enterButton" style="display:none;" onclick="enterSchedule()">进入</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="result"></div>
|
<div id="result"></div>
|
||||||
@ -86,10 +87,12 @@ header('Content-Type: text/html; charset=utf-8');
|
|||||||
function loadConfig() {
|
function loadConfig() {
|
||||||
const configId = document.getElementById('configId').value.trim();
|
const configId = document.getElementById('configId').value.trim();
|
||||||
const resultDiv = document.getElementById('result');
|
const resultDiv = document.getElementById('result');
|
||||||
|
const enterButton = document.getElementById('enterButton');
|
||||||
resultDiv.innerHTML = '加载中...';
|
resultDiv.innerHTML = '加载中...';
|
||||||
|
|
||||||
if(!configId) {
|
if(!configId) {
|
||||||
resultDiv.innerHTML = '<span class="error">请输入配置ID</span>';
|
resultDiv.innerHTML = '<span class="error">请输入配置ID</span>';
|
||||||
|
enterButton.style.display = 'none';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,12 +105,19 @@ header('Content-Type: text/html; charset=utf-8');
|
|||||||
})
|
})
|
||||||
.then(data => {
|
.then(data => {
|
||||||
resultDiv.innerHTML = `<pre>${syntaxHighlight(JSON.stringify(data, null, 4))}</pre>`;
|
resultDiv.innerHTML = `<pre>${syntaxHighlight(JSON.stringify(data, null, 4))}</pre>`;
|
||||||
|
enterButton.style.display = 'inline-block';
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
resultDiv.innerHTML = `<span class="error">错误：${error.error || '获取配置失败'}</span>`;
|
resultDiv.innerHTML = `<span class="error">错误：${error.error || '获取配置失败'}</span>`;
|
||||||
|
enterButton.style.display = 'none';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function enterSchedule() {
|
||||||
|
const configId = document.getElementById('configId').value.trim();
|
||||||
|
window.location.href = `/ExamCloudSchedule/index.html?configId=${encodeURIComponent(configId)}`;
|
||||||
|
}
|
||||||
|
|
||||||
// JSON高亮显示
|
// JSON高亮显示
|
||||||
function syntaxHighlight(json) {
|
function syntaxHighlight(json) {
|
||||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user