336 lines
10 KiB
HTML
336 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>管理员登录 - 测评报告系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ff7e5f 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.login-container {
|
||
background: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
overflow: hidden;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
animation: slideUp 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(50px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.login-header {
|
||
background: linear-gradient(135deg, #ff7e5f, #feb47b);
|
||
color: white;
|
||
padding: 40px 30px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.login-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
animation: float 20s linear infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0% { transform: translate(0, 0); }
|
||
100% { transform: translate(20px, 20px); }
|
||
}
|
||
|
||
.login-header h1 {
|
||
font-size: 28px;
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.login-header p {
|
||
opacity: 0.9;
|
||
font-size: 14px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.login-body {
|
||
padding: 40px 30px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 15px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
font-size: 16px;
|
||
transition: all 0.3s ease;
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.form-group input:focus {
|
||
outline: none;
|
||
border-color: #ff7e5f;
|
||
background: white;
|
||
box-shadow: 0 0 0 3px rgba(255, 126, 95, 0.1);
|
||
}
|
||
|
||
.login-btn {
|
||
width: 100%;
|
||
padding: 15px;
|
||
background: linear-gradient(135deg, #ff7e5f, #feb47b);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 5px 20px rgba(255, 126, 95, 0.3);
|
||
}
|
||
|
||
.login-btn:hover {
|
||
background: linear-gradient(135deg, #ff6b52, #fe9b5b);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(255, 126, 95, 0.4);
|
||
}
|
||
|
||
.login-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.credentials-info {
|
||
background: #f8f9fa;
|
||
border-left: 4px solid #ff7e5f;
|
||
padding: 15px;
|
||
margin: 25px 0;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.credentials-info h4 {
|
||
color: #2d5a3d;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.credentials-info p {
|
||
color: #666;
|
||
font-size: 13px;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.credentials-info strong {
|
||
color: #ff7e5f;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.error-message {
|
||
background: #fff5f5;
|
||
border: 1px solid #fed7d7;
|
||
color: #e53e3e;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
display: none;
|
||
animation: shake 0.5s ease-in-out;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
}
|
||
|
||
.success-message {
|
||
background: #f0fff4;
|
||
border: 1px solid #c6f6d5;
|
||
color: #38a169;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
display: none;
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #8b5a2b;
|
||
font-size: 12px;
|
||
background: #fef6f0;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.login-container {
|
||
margin: 10px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.login-header {
|
||
padding: 30px 20px;
|
||
}
|
||
|
||
.login-header h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.login-body {
|
||
padding: 30px 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-container">
|
||
<div class="login-header">
|
||
<h1>🔐 管理员登录</h1>
|
||
<p>测评报告管理系统</p>
|
||
</div>
|
||
|
||
<div class="login-body">
|
||
<div class="error-message" id="error-message">
|
||
用户名或密码错误，请重试！
|
||
</div>
|
||
|
||
<div class="success-message" id="success-message">
|
||
登录成功，正在跳转...
|
||
</div>
|
||
|
||
<form id="login-form">
|
||
<div class="form-group">
|
||
<label for="username">用户名</label>
|
||
<input type="text" id="username" name="username" required
|
||
placeholder="请输入用户名" autocomplete="username">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="password">密码</label>
|
||
<input type="password" id="password" name="password" required
|
||
placeholder="请输入密码" autocomplete="current-password">
|
||
</div>
|
||
|
||
<button type="submit" class="login-btn">
|
||
🚀 登录系统
|
||
</button>
|
||
</form>
|
||
|
||
<div class="credentials-info">
|
||
<h4>📋 登录信息</h4>
|
||
<p>用户名：<strong>admin</strong></p>
|
||
<p>密码：<strong>admin123</strong></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>© 2024 尚逸基石学科能力测评系统</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 检查是否已经登录
|
||
const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true';
|
||
if (isAuthenticated) {
|
||
window.location.href = '/';
|
||
return;
|
||
}
|
||
|
||
const loginForm = document.getElementById('login-form');
|
||
const errorMessage = document.getElementById('error-message');
|
||
const successMessage = document.getElementById('success-message');
|
||
|
||
loginForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById('username').value;
|
||
const password = document.getElementById('password').value;
|
||
|
||
// 隐藏之前的消息
|
||
errorMessage.style.display = 'none';
|
||
successMessage.style.display = 'none';
|
||
|
||
// 简单的硬编码验证（实际项目中应该使用后端API）
|
||
if (username === 'admin' && password === 'admin123') {
|
||
// 登录成功
|
||
localStorage.setItem('isAuthenticated', 'true');
|
||
successMessage.style.display = 'block';
|
||
|
||
// 禁用登录按钮
|
||
const loginBtn = document.querySelector('.login-btn');
|
||
loginBtn.disabled = true;
|
||
loginBtn.textContent = '⏳ 正在跳转...';
|
||
|
||
// 延迟跳转以显示成功消息
|
||
setTimeout(() => {
|
||
window.location.href = '/';
|
||
}, 1000);
|
||
|
||
} else {
|
||
// 登录失败
|
||
errorMessage.style.display = 'block';
|
||
|
||
// 清空密码字段
|
||
document.getElementById('password').value = '';
|
||
document.getElementById('password').focus();
|
||
|
||
// 3秒后自动隐藏错误消息
|
||
setTimeout(() => {
|
||
errorMessage.style.display = 'none';
|
||
}, 3000);
|
||
}
|
||
});
|
||
|
||
// 自动聚焦到用户名输入框
|
||
document.getElementById('username').focus();
|
||
|
||
// 回车键快速提交
|
||
document.getElementById('password').addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
loginForm.dispatchEvent(new Event('submit'));
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|