添加考试安排页面及样式，更新配置加载功能

2025-04-29 03:26:34 +00:00 · 2025-02-01 03:03:54 +08:00 · 2025-02-01 03:03:54 +08:00 · e25390cdc6
commit e25390cdc6
parent a1a7c2ef63
6 changed files with 558 additions and 0 deletions
--- a/ExamCloudSchedule/index.html
+++ b/ExamCloudSchedule/index.html
@ -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>
--- a/ExamCloudSchedule/script.js
+++ b/ExamCloudSchedule/script.js
@ -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();
+});
--- a/ExamCloudSchedule/styles.css
+++ b/ExamCloudSchedule/styles.css
@ -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;
+}
--- a/background.jpg
+++ b/background.jpg
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.php
+++ b/index.php
@ -74,6 +74,7 @@ header('Content-Type: text/html; charset=utf-8');
            <label for="configId">输入配置ID：</label>
            <input type="text" id="configId" placeholder="例如：room301">
            <button onclick="loadConfig()">获取配置</button>
+            <button id="enterButton" style="display:none;" onclick="enterSchedule()">进入</button>
        </div>
        
        <div id="result"></div>
@ -86,10 +87,12 @@ header('Content-Type: text/html; charset=utf-8');
    function loadConfig() {
        const configId = document.getElementById('configId').value.trim();
        const resultDiv = document.getElementById('result');
+        const enterButton = document.getElementById('enterButton');
        resultDiv.innerHTML = '加载中...';
        
        if(!configId) {
            resultDiv.innerHTML = '<span class="error">请输入配置ID</span>';
+            enterButton.style.display = 'none';
            return;
        }

@ -102,12 +105,19 @@ header('Content-Type: text/html; charset=utf-8');
            })
            .then(data => {
                resultDiv.innerHTML = `<pre>${syntaxHighlight(JSON.stringify(data, null, 4))}</pre>`;
+                enterButton.style.display = 'inline-block';
            })
            .catch(error => {
                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高亮显示
    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');