You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
4.3 KiB
101 lines
4.3 KiB
<!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>
|
|
body { background: #f5f6fa; font-family: 'Segoe UI', Arial, sans-serif; }
|
|
.container { max-width: 350px; margin: 60px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px #0001; padding: 32px 28px; }
|
|
h2 { text-align: center; margin-bottom: 24px; color: #333; }
|
|
.tabs { display: flex; margin-bottom: 24px; }
|
|
.tab { flex: 1; text-align: center; padding: 10px 0; cursor: pointer; border-bottom: 2px solid #eee; color: #888; font-weight: 500; }
|
|
.tab.active { color: #1976d2; border-bottom: 2px solid #1976d2; }
|
|
.form-group { margin-bottom: 18px; }
|
|
label { display: block; margin-bottom: 6px; color: #555; }
|
|
input { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; }
|
|
button { width: 100%; padding: 10px; background: #1976d2; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; margin-top: 8px; }
|
|
button:active { background: #145ea8; }
|
|
.msg { text-align: center; color: #e53935; margin-bottom: 10px; min-height: 22px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="tabs">
|
|
<div class="tab active" id="loginTab">登录</div>
|
|
<div class="tab" id="registerTab">注册</div>
|
|
</div>
|
|
<div class="msg" id="msg"></div>
|
|
<form id="loginForm">
|
|
<div class="form-group">
|
|
<label for="login-username">用户名</label>
|
|
<input type="text" id="login-username" required autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="login-password">密码</label>
|
|
<input type="password" id="login-password" required autocomplete="current-password">
|
|
</div>
|
|
<button type="submit">登录</button>
|
|
</form>
|
|
<form id="registerForm" style="display:none;">
|
|
<div class="form-group">
|
|
<label for="register-username">用户名</label>
|
|
<input type="text" id="register-username" required autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="register-email">邮箱</label>
|
|
<input type="email" id="register-email" required autocomplete="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="register-password">密码</label>
|
|
<input type="password" id="register-password" required autocomplete="new-password">
|
|
</div>
|
|
<button type="submit">注册</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
const loginTab = document.getElementById('loginTab');
|
|
const registerTab = document.getElementById('registerTab');
|
|
const loginForm = document.getElementById('loginForm');
|
|
const registerForm = document.getElementById('registerForm');
|
|
const msg = document.getElementById('msg');
|
|
|
|
loginTab.onclick = () => {
|
|
loginTab.classList.add('active');
|
|
registerTab.classList.remove('active');
|
|
loginForm.style.display = '';
|
|
registerForm.style.display = 'none';
|
|
msg.textContent = '';
|
|
};
|
|
registerTab.onclick = () => {
|
|
registerTab.classList.add('active');
|
|
loginTab.classList.remove('active');
|
|
registerForm.style.display = '';
|
|
loginForm.style.display = 'none';
|
|
msg.textContent = '';
|
|
};
|
|
|
|
loginForm.onsubmit = async e => {
|
|
e.preventDefault();
|
|
msg.textContent = '';
|
|
const username = document.getElementById('login-username').value.trim();
|
|
const password = document.getElementById('login-password').value;
|
|
if (!username || !password) { msg.textContent = '请填写完整信息'; return; }
|
|
// TODO: 替换为实际API
|
|
msg.style.color = '#1976d2';
|
|
msg.textContent = '登录成功（示例）';
|
|
};
|
|
registerForm.onsubmit = async e => {
|
|
e.preventDefault();
|
|
msg.textContent = '';
|
|
const username = document.getElementById('register-username').value.trim();
|
|
const email = document.getElementById('register-email').value.trim();
|
|
const password = document.getElementById('register-password').value;
|
|
if (!username || !email || !password) { msg.textContent = '请填写完整信息'; return; }
|
|
// TODO: 替换为实际API
|
|
msg.style.color = '#1976d2';
|
|
msg.textContent = '注册成功（示例）';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|