94 lines
4.2 KiB
HTML
94 lines
4.2 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>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
|
|
.login-card { background: white; border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 40px; max-width: 400px; width: 100%; }
|
|
.form-control:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); }
|
|
.btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; }
|
|
.btn-primary:hover { background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-card">
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-music-note-beamed" style="font-size: 48px; color: #667eea;"></i>
|
|
<h4 class="mt-3">有音个性化教学系统</h4>
|
|
<p class="text-muted">请登录继续</p>
|
|
</div>
|
|
|
|
<form id="loginForm">
|
|
<div class="mb-3">
|
|
<label class="form-label">用户名</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
|
<input type="text" class="form-control" id="username" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">密码</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
|
<input type="password" class="form-control" id="password" required>
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePassword()">
|
|
<i class="bi bi-eye" id="toggleIcon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="errorMsg" class="alert alert-danger d-none"></div>
|
|
<button type="submit" class="btn btn-primary w-100 py-2">
|
|
<i class="bi bi-box-arrow-in-right"></i> 登录
|
|
</button>
|
|
</form>
|
|
|
|
<div class="text-center mt-3">
|
|
<small class="text-muted">密码要求：8位以上，包含大小写字母、数字和特殊字符</small>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function togglePassword() {
|
|
const input = document.getElementById('password');
|
|
const icon = document.getElementById('toggleIcon');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('bi-eye');
|
|
icon.classList.add('bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('bi-eye-slash');
|
|
icon.classList.add('bi-eye');
|
|
}
|
|
}
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errorMsg = document.getElementById('errorMsg');
|
|
errorMsg.classList.add('d-none');
|
|
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
username: document.getElementById('username').value,
|
|
password: document.getElementById('password').value
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (response.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errorMsg.textContent = result.error || '登录失败';
|
|
errorMsg.classList.remove('d-none');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |