From d3122a47ffefea184a2b208aa5bf86b38eb5cd35 Mon Sep 17 00:00:00 2001
From: MKStoler1024 <158786854+MKStoler1024@users.noreply.github.com>
Date: Mon, 24 Feb 2025 05:55:14 +0000
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80=E5=92=8C=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E6=95=88=E6=9E=9C=EF=BC=8C=E6=9B=B4=E6=96=B0=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E5=92=8C=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 exam/index.html |   9 +-
 exam/styles.css |  62 +++--
 exam/x.html     | 596 ++++++++++++++++++++++++++++++++++++++++++++++++
 time/index.html |  27 ++-
 4 files changed, 665 insertions(+), 29 deletions(-)
 create mode 100644 exam/x.html

diff --git a/exam/index.html b/exam/index.html
index ff3620f..9b5e941 100644
--- a/exam/index.html
+++ b/exam/index.html
@@ -46,15 +46,18 @@
     </div>
     <!-- Settings Modal -->
     <div id="settings-modal">
-        <div id="settings-modal-content">
+        <div id="settings-modal-content" class="settings-panel dark-theme">
+            <h3>系统设置</h3>
             <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 class="button-group">
+                <button id="save-settings-btn" class="control-btn">确定</button>
+                <button id="close-settings-btn" class="control-btn">关闭</button>
+            </div>
         </div>
     </div>
     <script src="script.js"></script>
diff --git a/exam/styles.css b/exam/styles.css
index 08d88ff..d235218 100644
--- a/exam/styles.css
+++ b/exam/styles.css
@@ -192,31 +192,47 @@ td:last-child {
 }
 
 #settings-modal-content {
-    background-color: #1f1f1f;
-    margin: 5% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
+    background: rgba(31, 31, 31, 0.95);
+    padding: 25px;
+    margin: 25px auto;
+    border-radius: 12px;
+    border: 1px solid #444;
+    backdrop-filter: blur(8px);
     max-width: 600px;
-    border-radius: 10px;
-    backdrop-filter: blur(10px);
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+#settings-modal-content h3 {
+    margin: 0 0 20px;
+    color: #e0e0e0;
+    font-size: 20px;
 }
 
 #settings-modal-content label {
-    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 12px 0;
+    font-size: 16px;
+    color: #b0b0b0;
 }
 
 #settings-modal-content input[type="number"],
 #settings-modal-content input[type="text"] {
-    font-size: 2rem;
+    font-size: 1.5rem;
     padding: 10px;
     margin-top: 10px;
     margin-bottom: 20px;
     width: 100%;
     box-sizing: border-box;
-    border: 1px solid #ccc;
+    border: 1px solid #555;
     border-radius: 5px;
-    background-color: #121212;
+    background-color: #222;
     color: #e0e0e0;
 }
 
@@ -226,20 +242,28 @@ td:last-child {
     box-shadow: 0 0 0 1px #007acc;
 }
 
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
 #settings-modal-content button {
-    padding: 10px 20px;
-    font-size: 2rem;
-    cursor: pointer;
-    background-color: #93b4f7;
+    background: linear-gradient(135deg, #3498db, #2980b9);
     color: white;
     border: none;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-    transition: background-color 0.3s ease;
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 12px rgba(52,152,219,0.25);
 }
 
 #settings-modal-content button:hover {
-    background-color: #45a049;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px rgba(52,152,219,0.35);
 }
 
 #close-settings-btn {
diff --git a/exam/x.html b/exam/x.html
new file mode 100644
index 0000000..1d0d161
--- /dev/null
+++ b/exam/x.html
@@ -0,0 +1,596 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>课程状态系统完整版</title>
+    <style>
+        /* 基础样式 */
+        body {
+            font-family: 'Segoe UI', Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: #f5f7fa;
+            color: #2d3436;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        /* 状态显示框 */
+        .status-box {
+            background: linear-gradient(145deg, #ffffff, #f8f9fa);
+            border: 1px solid #e0e6ed;
+            padding: 30px;
+            margin: 20px 0;
+            border-radius: 16px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
+            transition: all 0.3s ease;
+        }
+        .time-display {
+            font-size: 48px;
+            color: #2c3e50;
+            font-weight: 700;
+            margin: 15px 0;
+            text-align: center;
+            letter-spacing: 2px;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .status-label {
+            font-size: 28px;
+            text-align: center;
+            margin: 15px 0;
+            color: #57606f;
+        }
+
+        /* 课程表格 */
+        .schedule-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 25px 0;
+            background: white;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        }
+        .schedule-table th {
+            background: #f8f9fa;
+            padding: 16px;
+            color: #57606f;
+            font-weight: 600;
+            border-bottom: 2px solid #e0e6ed;
+        }
+        .schedule-table td {
+            padding: 14px;
+            border-bottom: 1px solid #f1f3f6;
+        }
+        .current-class {
+            background: #e8f5e9 !important;
+            position: relative;
+        }
+        .current-class:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 4px;
+            background: #2ecc71;
+        }
+        .future-class {
+            background: #f8f9fa !important;
+        }
+        .past-class {
+            background: #fafafa !important;
+            color: #a4b0be;
+        }
+
+        /* 全屏模式 */
+        .fullscreen-mode {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #ffffff;
+            z-index: 9999;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+        .fullscreen-mode .status-box {
+            width: 100%;
+            height: 100%;
+            border: none;
+            box-shadow: none;
+            border-radius: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background: none;
+        }
+        .fullscreen-mode .time-display {
+            font-size: 25vw;
+            line-height: 0.9;
+            color: #2c3e50;
+        }
+        .fullscreen-mode .status-label {
+            font-size: 6vw;
+            margin-top: 4vw;
+            color: #57606f;
+        }
+        .fullscreen-mode .control-bar,
+        .fullscreen-mode .settings-panel,
+        .fullscreen-mode .schedule-table {
+            display: none !important;
+        }
+
+        /* 控制按钮 */
+        .control-bar {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 10000;
+            display: flex;
+            gap: 10px;
+        }
+        .control-btn {
+            background: linear-gradient(135deg, #3498db, #2980b9);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 12px rgba(52,152,219,0.25);
+        }
+        .control-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(52,152,219,0.35);
+        }
+
+        /* 设置面板 */
+        .settings-panel {
+            background: rgba(255,255,255,0.95);
+            padding: 25px;
+            margin: 25px 0;
+            border-radius: 12px;
+            border: 1px solid #e0e6ed;
+            backdrop-filter: blur(8px);
+        }
+        .settings-panel h3 {
+            margin: 0 0 20px;
+            color: #2c3e50;
+            font-size: 20px;
+        }
+        .settings-panel label {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin: 12px 0;
+            font-size: 16px;
+            color: #57606f;
+        }
+        .settings-panel input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #3498db;
+        }
+
+        /* 错误提示 */
+        .error-container {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: #ff6b6b;
+            color: white;
+            padding: 16px;
+            display: none;
+            z-index: 10001;
+            animation: slideUp 0.3s ease;
+        }
+        @keyframes slideUp {
+            from { transform: translateY(100%); }
+            to { transform: translateY(0); }
+        }
+        .error-content {
+            max-width: 800px;
+            margin: 0 auto;
+            font-size: 15px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .error-content:before {
+            content: '!';
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+            background: white;
+            color: #ff6b6b;
+            border-radius: 50%;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="error-container">
+        <div class="error-content" id="errorMessage"></div>
+    </div>
+
+    <div class="container">
+        <div class="control-bar">
+            <button class="control-btn" onclick="toggleFullscreen()">全屏</button>
+            <button class="control-btn" onclick="testSound('classStart')">测试上课铃</button>
+            <button class="control-btn" onclick="testSound('classEnd')">测试下课铃</button>
+        </div>
+
+        <div class="status-box">
+            <div class="status-label" id="statusLabel">正在初始化...</div>
+            <div class="time-display" id="timeDisplay">--:--</div>
+            <div id="timeDescription" style="text-align:center;color:#a4b0be;"></div>
+        </div>
+
+        <div class="settings-panel">
+            <h3>系统设置</h3>
+            <label>
+                <input type="checkbox" id="classBell"> 启用上课铃声
+            </label>
+            <br>
+            <label>
+                <input type="checkbox" id="breakBell"> 启用下课铃声
+            </label>
+        </div>
+
+        <table class="schedule-table" id="scheduleTable">
+            <tr>
+                <th>课程名称</th>
+                <th>时间段</th>
+                <th>状态</th>
+            </tr>
+        </table>
+    </div>
+
+    <script>
+        // 错误处理系统
+        var errorSystem = {
+            show: function(message) {
+                try {
+                    var container = document.querySelector('.error-container');
+                    var content = document.getElementById('errorMessage');
+                    content.textContent = message;
+                    container.style.display = 'flex';
+                    setTimeout(this.hide, 5000);
+                } catch(e) {
+                    console.error('错误提示系统异常:', e);
+                }
+            },
+            hide: function() {
+                var container = document.querySelector('.error-container');
+                if (container) container.style.display = 'none';
+            }
+        };
+
+        // 新增：课程配置数组
+        var courseSchedule = [
+            { name: "第一节课", start: "08:00", end: "08:50" },
+            { name: "第二节课", start: "09:00", end: "09:50" },
+            { name: "第三节课", start: "10:10", end: "11:00" },
+            { name: "第四节课", start: "11:10", end: "12:00" },
+            { name: "第一节课", start: "13:30", end: "14:20" },
+            { name: "第二节课", start: "14:30", end: "15:20" },
+            { name: "第三节课", start: "15:40", end: "16:30" },
+            { name: "第四节课", start: "16:40", end: "17:30" },
+            { name: "第一节课", start: "18:00", end: "18:50" },
+            { name: "第二节课", start: "19:00", end: "19:50" },
+            { name: "第三节课", start: "20:10", end: "21:00" },
+            { name: "第四节课", start: "21:10", end: "22:00" }
+        ];
+
+        // 恢复使用原来的音频系统
+        var audioController = (function() {
+            var audioPool = [];
+            var maxPoolSize = 3;
+            var soundFiles = {
+                classStart: 'class_start.mp3',
+                classEnd: 'class_end.mp3'
+            };
+
+            function init() {
+                try {
+                    Object.keys(soundFiles).forEach(function(type) {
+                        for (var i = 0; i < 2; i++) {
+                            createAudio(type);
+                        }
+                    });
+                } catch(e) {
+                    errorSystem.show('音频初始化失败: ' + e.message);
+                }
+            }
+
+            function createAudio(type) {
+                var audio = document.createElement('audio');
+                audio.style.display = 'none';
+                audio.preload = 'auto';
+                audio.src = soundFiles[type];
+                var retryCount = 0;
+                function loadAudio() {
+                    try {
+                        audio.load();
+                    } catch(e) {
+                        if (retryCount++ < 3) {
+                            setTimeout(loadAudio, 1000);
+                        }
+                    }
+                }
+                audio.addEventListener('error', function() {
+                    if (retryCount++ < 3) {
+                        setTimeout(loadAudio, 1000);
+                    }
+                });
+                document.body.appendChild(audio);
+                loadAudio();
+                audioPool.push(audio);
+                return audio;
+            }
+
+            function play(type) {
+                try {
+                    var audio = audioPool.find(function(a) { return a.paused; });
+                    if (!audio) {
+                        if (audioPool.length < maxPoolSize) {
+                            audio = createAudio(type);
+                        } else {
+                            return errorSystem.show('系统繁忙，请稍后再试');
+                        }
+                    }
+                    audio.src = soundFiles[type];
+                    try {
+                        audio.play();
+                    } catch(e) {
+                        errorSystem.show('播放失败: ' + e.message);
+                    }
+                } catch(e) {
+                    errorSystem.show('音频系统错误: ' + e.message);
+                }
+            }
+
+            return {
+                init: init,
+                play: play
+            };
+        })();
+
+        audioController.init();
+
+        // 全局状态变量
+        var isFullscreen = false, currentCourse = null, lastCourse = null, timer = null, lastUpdate = Date.now();
+
+        // 新增：安全更新循环函数
+        function safeUpdate() {
+            try {
+                var now = Date.now();
+                updateCourseStatus();
+                updateDisplay();
+                var nextTick = Math.max(1000 - (Date.now() - now), 50);
+                timer = setTimeout(safeUpdate, nextTick);
+                lastUpdate = now;
+            } catch (e) {
+                errorSystem.show('更新循环错误: ' + e.message);
+            }
+        }
+
+        // 新增：解析时间字符串
+        function parseTime(timeStr) {
+            try {
+                var now = new Date();
+                var parts = timeStr.split(':');
+                return new Date(
+                    now.getFullYear(),
+                    now.getMonth(),
+                    now.getDate(),
+                    parseInt(parts[0]),
+                    parseInt(parts[1]),
+                    0
+                );
+            } catch (e) {
+                errorSystem.show('时间解析错误: ' + e.message);
+                return new Date();
+            }
+        }
+
+        // 新增：更新当前课程状态函数
+        function updateCourseStatus() {
+            try {
+                var now = new Date();
+                currentCourse = null;
+                for (var i = 0; i < courseSchedule.length; i++) {
+                    var course = courseSchedule[i],
+                        start = parseTime(course.start),
+                        end = parseTime(course.end);
+                    if (end < start) end.setDate(end.getDate() + 1);
+                    if (now >= start && now <= end) {
+                        currentCourse = course;
+                        break;
+                    }
+                }
+                if (currentCourse !== lastCourse) {
+                    handleStatusChange();
+                    lastCourse = currentCourse;
+                }
+            } catch (e) {
+                errorSystem.show('课程状态更新失败: ' + e.message);
+            }
+        }
+
+        // 在状态变化处理函数中使用 audioController 而非 audioContext
+        function handleStatusChange() {
+            try {
+                if (!currentCourse && localStorage.breakBell === 'true') {
+                    audioController.play('classEnd');
+                } else if (currentCourse && localStorage.classBell === 'true') {
+                    audioController.play('classStart');
+                }
+            } catch (e) {
+                errorSystem.show('状态变化处理错误: ' + e.message);
+            }
+        }
+
+        // 新增：界面更新函数
+        function updateDisplay() {
+            try {
+                var now = new Date(),
+                    timeDisplay = document.getElementById('timeDisplay'),
+                    statusLabel = document.getElementById('statusLabel'),
+                    timeDesc = document.getElementById('timeDescription');
+                if (currentCourse) {
+                    var endTime = parseTime(currentCourse.end),
+                        remain = endTime - now;
+                    statusLabel.textContent = currentCourse.name + ' 进行中';
+                    timeDisplay.textContent = formatTime(remain);
+                    timeDesc.textContent = '剩余时间';
+                } else {
+                    statusLabel.textContent = '课间休息中';
+                    var nextCourse = getNextCourse();
+                    if (nextCourse) {
+                        var startTime = parseTime(nextCourse.start),
+                            remain = startTime - now;
+                        timeDisplay.textContent = formatTime(remain);
+                        timeDesc.textContent = '距离 ' + nextCourse.name;
+                    } else {
+                        timeDisplay.textContent = '00:00';
+                        timeDesc.textContent = '今日课程已结束';
+                    }
+                }
+                updateScheduleTable();
+            } catch (e) {
+                errorSystem.show('界面更新失败: ' + e.message);
+            }
+        }
+
+        // 新增：格式化时间显示函数
+        function formatTime(ms) {
+            try {
+                if (ms < 0) return '00:00';
+                var totalSeconds = Math.floor(ms / 1000),
+                    minutes = Math.floor(totalSeconds / 60),
+                    seconds = totalSeconds % 60;
+                return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+            } catch (e) {
+                return '--:--';
+            }
+        }
+
+        // 新增：更新课程表显示
+        function updateScheduleTable() {
+            try {
+                var now = new Date(),
+                    rows = document.querySelectorAll('#scheduleTable tr:not(:first-child)');
+                for (var i = 0; i < rows.length; i++) {
+                    var course = courseSchedule[i],
+                        start = parseTime(course.start),
+                        end = parseTime(course.end),
+                        row = rows[i];
+                    row.className = '';
+                    if (now >= start && now <= end) {
+                        row.className = 'current-class';
+                    } else if (now < start) {
+                        row.className = 'future-class';
+                    } else {
+                        row.className = 'past-class';
+                    }
+                }
+            } catch (e) {
+                errorSystem.show('课程表更新失败: ' + e.message);
+            }
+        }
+
+        // 新增：获取下一节课
+        function getNextCourse() {
+            try {
+                var now = new Date();
+                for (var i = 0; i < courseSchedule.length; i++) {
+                    var start = parseTime(courseSchedule[i].start);
+                    if (start > now) return courseSchedule[i];
+                }
+                return null;
+            } catch (e) {
+                errorSystem.show('获取下一节课失败: ' + e.message);
+                return null;
+            }
+        }
+
+        // 修改：全屏切换函数
+        function toggleFullscreen() {
+            try {
+                isFullscreen = !isFullscreen;
+                document.body.classList.toggle('fullscreen-mode', isFullscreen);
+                if (isFullscreen) {
+                    document.querySelector('.settings-panel').style.display = 'none';
+                    document.querySelector('.schedule-table').style.display = 'none';
+                    document.querySelector('.container').style.width = '100%';
+                    document.querySelector('.container').style.height = '100%';
+                } else {
+                    document.querySelector('.settings-panel').style.display = '';
+                    document.querySelector('.schedule-table').style.display = '';
+                    document.querySelector('.container').style.width = '';
+                    document.querySelector('.container').style.height = '';
+                }
+            } catch (e) {
+                errorSystem.show('全屏切换失败: ' + e.message);
+            }
+        }
+
+        // 测试铃声函数中调用音频播放改用 audioController
+        function testSound(type) {
+            try {
+                if (confirm('确定要测试' + (type === 'classStart' ? '上课' : '下课') + '铃声吗？')) {
+                    audioController.play(type);
+                }
+            } catch (e) {
+                errorSystem.show('测试铃声失败: ' + e.message);
+            }
+        }
+
+        // 修改：系统初始化函数
+        function init() {
+            try {
+                var table = document.getElementById('scheduleTable');
+                courseSchedule.forEach(function(course) {
+                    var row = table.insertRow(-1);
+                    row.innerHTML = '<td>' + course.name + '</td>' +
+                                    '<td>' + course.start + ' - ' + course.end + '</td>' +
+                                    '<td></td>';
+                });
+                // 初始化设置复选框
+                document.getElementById('classBell').checked = localStorage.classBell === 'true';
+                document.getElementById('breakBell').checked = localStorage.breakBell === 'true';
+                document.getElementById('classBell').onchange = function () {
+                    localStorage.classBell = this.checked;
+                };
+                document.getElementById('breakBell').onchange = function () {
+                    localStorage.breakBell = this.checked;
+                };
+                // 启动安全更新循环
+                safeUpdate();
+                // 移除或修改音频权限激活代码（用原音频系统无需特殊激活）
+                document.body.onclick = null;
+            } catch (e) {
+                errorSystem.show('系统初始化失败: ' + e.message);
+            }
+        }
+        window.onbeforeunload = function () {
+            if (timer) clearTimeout(timer);
+        };
+        init();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/time/index.html b/time/index.html
index c7046f9..8249b26 100644
--- a/time/index.html
+++ b/time/index.html
@@ -31,48 +31,61 @@
 	<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 {
+			font-family: 'Segoe UI', Arial, sans-serif;
+			margin: 0;
+			padding: 20px;
 			background: url('../background.jpg') no-repeat center center fixed;
 			background-size: cover;
-			margin: 0;
-			padding: 0;
-			font-family: 'Roboto', sans-serif;
+			color: #2d3436;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 100vh;
-			color: #fff;
 		}
 
 		.container {
 			text-align: center;
+			background: rgba(255, 255, 255, 0.8);
+			border: 1px solid #e0e6ed;
+			padding: 30px;
+			border-radius: 16px;
+			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
 			animation: fadeIn 2s ease-in-out;
 		}
 
 		.time {
 			font-size: 10rem;
 			margin: 0;
+			color: #2c3e50;
+			font-weight: 700;
+			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 			animation: glow 1s ease-in-out infinite alternate;
 		}
 
 		.text {
 			font-size: 1.5rem;
 			margin-bottom: 20px;
+			color: #57606f;
 		}
 
 		.btn {
 			padding: 10px 25px;
 			margin: 10px;
 			border: none;
-			border-radius: 5px;
+			border-radius: 8px;
 			cursor: pointer;
 			transition: all 0.3s ease;
 			font-weight: 500;
+			background: linear-gradient(135deg, #3498db, #2980b9);
+			color: white;
+			box-shadow: 0 4px 12px rgba(52, 152, 219, 0.25);
 		}
 
 		.btn:hover {
-			transform: translateY(-3px);
-			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+			transform: translateY(-1px);
+			box-shadow: 0 6px 16px rgba(52, 152, 219, 0.35);
 		}
 
 		.controls {