|
|
|
|
<!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 rel="stylesheet" href="./assets/css/style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body class="auth-page">
|
|
|
|
|
<div class="auth-shell login-shell">
|
|
|
|
|
<section class="auth-hero">
|
|
|
|
|
<div class="auth-badge">Campus Sports</div>
|
|
|
|
|
<h1>运动会报名系统</h1>
|
|
|
|
|
<p class="auth-subtitle">统一完成赛事报名、个人信息维护与报名记录查看，界面简洁，流程清晰。</p>
|
|
|
|
|
<div class="notice-card">
|
|
|
|
|
<h2>报名须知</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>请使用真实身份信息注册，身份证号、邮箱和学号均需准确填写。</li>
|
|
|
|
|
<li>普通用户仅能查看和修改自己的信息，并完成项目报名。</li>
|
|
|
|
|
<li>管理员可以管理用户、项目和报名记录。</li>
|
|
|
|
|
<li>登录时需要输入图像验证码，请注意区分大小写。</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="auth-panel">
|
|
|
|
|
<div class="panel-head">
|
|
|
|
|
<h2>账号登录</h2>
|
|
|
|
|
<p>请输入邮箱或学号、密码和图像验证码后进入系统。</p>
|
|
|
|
|
</div>
|
|
|
|
|
<form id="loginForm" class="form-grid single-column" autocomplete="off">
|
|
|
|
|
<label class="field">
|
|
|
|
|
<span>邮箱 / 学号</span>
|
|
|
|
|
<input type="text" name="loginId" placeholder="请输入邮箱或学号" autocomplete="off">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="field">
|
|
|
|
|
<span>登录密码</span>
|
|
|
|
|
<input type="password" name="password" placeholder="请输入登录密码" autocomplete="new-password">
|
|
|
|
|
</label>
|
|
|
|
|
<label class="field">
|
|
|
|
|
<span>图像验证码</span>
|
|
|
|
|
<div class="captcha-row">
|
|
|
|
|
<input type="text" name="captcha" placeholder="请输入验证码" autocomplete="off">
|
|
|
|
|
<canvas id="captchaCanvas" width="140" height="48" aria-label="图像验证码"></canvas>
|
|
|
|
|
<button type="button" class="ghost-btn small" id="refreshCaptcha">刷新</button>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="remember-inline" style="display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:14px;">
|
|
|
|
|
<input type="checkbox" id="rememberAccount">
|
|
|
|
|
<span>记住账号</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div class="form-actions stacked">
|
|
|
|
|
<button type="submit" class="primary-btn">登录</button>
|
|
|
|
|
<button type="button" class="ghost-btn" id="goRegister">注册</button>
|
|
|
|
|
</div>
|
|
|
|
|
<p id="loginMessage" class="form-message"></p>
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="./assets/js/config.js"></script>
|
|
|
|
|
<script src="./assets/js/common.js"></script>
|
|
|
|
|
<script src="./assets/js/login.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
