ExamAware/ExamCloudSchedule
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule synced 2025-04-29 13:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加主题切换功能并优化样式

Browse Source
This commit is contained in:
MKStoler1024 2025-02-01 06:32:07 +00:00
parent 5477e9feb6
commit 0ed6363a16
1 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
index.php
View File

@ -8,18 +8,26 @@ header('Content-Type: text/html; charset=utf-8');
<title>考试看板配置查询</title> <title>考试看板配置查询</title>
<style> <style>
body { body {
max-width: 800px; font-family: 'Roboto', Arial, sans-serif;
margin: 20px auto; margin: 0;
padding: 20px; padding: 0;
font-family: Arial, sans-serif; background: url('background.jpg') no-repeat center center fixed;
background-color: #f2f2f2; background-size: cover;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: background-color 0.3s ease, color 0.3s ease;
} }
.container { .container {
border: 1px solid #ddd; background-color: rgba(255, 255, 255, 0.9);
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 600px;
width: 100%;
transition: background-color 0.3s ease, color 0.3s ease;
} }
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
@ -28,28 +36,32 @@ header('Content-Type: text/html; charset=utf-8');
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
color: #333;
} }
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
padding: 8px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px;
} }
button { button {
background: #007bff; background: #6200ea;
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.3s ease;
} }
button:hover { button:hover {
background: #0056b3; background: #3700b3;
} }
#result { #result {
margin-top: 20px; margin-top: 20px;
white-space: pre-wrap; white-space: pre-wrap;
color: #333;
} }
.error { .error {
color: red; color: red;
@ -65,9 +77,22 @@ header('Content-Type: text/html; charset=utf-8');
.boolean { color: blue; } .boolean { color: blue; }
.null { color: magenta; } .null { color: magenta; }
.key { color: red; } .key { color: red; }
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
background: #333;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
</style> </style>
</head> </head>
<body> <body>
<button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
<div class="container"> <div class="container">
<h1>考试看板配置查询</h1> <h1>考试看板配置查询</h1>
<div class="form-group"> <div class="form-group">
@ -134,6 +159,34 @@ header('Content-Type: text/html; charset=utf-8');
return '<span class="' + cls + '">' + match + '</span>'; return '<span class="' + cls + '">' + match + '</span>';
}); });
} }
function toggleTheme() {
const body = document.body;
const container = document.querySelector('.container');
const themeToggle = document.querySelector('.theme-toggle');
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
container.classList.remove('dark-theme');
themeToggle.textContent = '切换主题';
} else {
body.classList.add('dark-theme');
container.classList.add('dark-theme');
themeToggle.textContent = '切换主题';
}
}
</script> </script>
<style>
.dark-theme {
background: #333 !important;
color: #e0e0e0 !important;
}
.dark-theme .container {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.dark-theme .theme-toggle {
background: #e0e0e0 !important;
color: #333 !important;
}
</style>
</body> </body>
</html> </html>