109 lines
4.8 KiB
HTML
109 lines
4.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}登录 - 儿童语言学习系统{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="auth-page-container">
|
|
<div class="container py-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-lg-5">
|
|
<div class="card kid-auth-card shadow-lg">
|
|
<div class="kid-auth-header">
|
|
<i class="fas fa-rocket icon"></i>
|
|
<h2 class="fw-bold">欢迎回来！</h2>
|
|
</div>
|
|
<div class="card-body p-4 p-md-5">
|
|
<p class="text-center text-muted mb-4">继续你的语言学习大冒险！</p>
|
|
|
|
<form method="POST" id="loginForm">
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">邮箱地址</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
|
|
<input type="email" class="form-control" id="email" name="email"
|
|
placeholder="请输入您的邮箱" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">密码</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-lock"></i></span>
|
|
<input type="password" class="form-control" id="password" name="password"
|
|
placeholder="请输入您的密码" required>
|
|
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="remember" name="remember">
|
|
<label class="form-check-label" for="remember">记住我</label>
|
|
</div>
|
|
<a href="{{ url_for('auth.forgot_password') }}" class="small">忘记密码？</a>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-100 py-2 mb-3">
|
|
<i class="fas fa-paper-plane me-2"></i>登录出发！
|
|
</button>
|
|
</form>
|
|
|
|
<hr class="my-3">
|
|
|
|
<div class="text-center">
|
|
<p class="mb-0">还没有账户？
|
|
<a href="{{ url_for('auth.register') }}" class="fw-bold" style="color: var(--kid-accent);">
|
|
立即加入
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 密码显示/隐藏切换
|
|
const togglePassword = document.getElementById('togglePassword');
|
|
const passwordInput = document.getElementById('password');
|
|
|
|
togglePassword.addEventListener('click', function() {
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.setAttribute('type', type);
|
|
|
|
const icon = togglePassword.querySelector('i');
|
|
icon.classList.toggle('fa-eye');
|
|
icon.classList.toggle('fa-eye-slash');
|
|
});
|
|
|
|
// 表单验证
|
|
const loginForm = document.getElementById('loginForm');
|
|
loginForm.addEventListener('submit', function(e) {
|
|
const email = document.getElementById('email').value.trim();
|
|
const password = document.getElementById('password').value.trim();
|
|
|
|
if (!email || !password) {
|
|
e.preventDefault();
|
|
alert('请填写完整的登录信息');
|
|
return;
|
|
}
|
|
|
|
// 简单的邮箱格式验证
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(email)) {
|
|
e.preventDefault();
|
|
alert('请输入有效的邮箱地址');
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|