ExamAware/ExamCloudSchedule
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamCloudSchedule synced 2025-04-29 03:56:34 +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

79
index.php
View File

@ -8,18 +8,26 @@ header('Content-Type: text/html; charset=utf-8');
<title>考试看板配置查询</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
font-family: 'Roboto', Arial, sans-serif;
margin: 0;
padding: 0;
background: url('background.jpg') no-repeat center center fixed;
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 {
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
max-width: 600px;
width: 100%;
transition: background-color 0.3s ease, color 0.3s ease;
}
.form-group {
margin-bottom: 15px;
@ -28,28 +36,32 @@ header('Content-Type: text/html; charset=utf-8');
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
input[type="text"] {
width: 100%;
padding: 8px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
button {
background: #007bff;
background: #6200ea;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
button:hover {
background: #0056b3;
background: #3700b3;
}
#result {
margin-top: 20px;
white-space: pre-wrap;
color: #333;
}
.error {
color: red;
@ -65,9 +77,22 @@ header('Content-Type: text/html; charset=utf-8');
.boolean { color: blue; }
.null { color: magenta; }
.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>
</head>
<body>
<button class="theme-toggle" onclick="toggleTheme()">切换主题</button>
<div class="container">
<h1>考试看板配置查询</h1>
<div class="form-group">
@ -134,6 +159,34 @@ header('Content-Type: text/html; charset=utf-8');
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>
<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>
</html>