114 lines
4.3 KiB
HTML
114 lines
4.3 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}
|
|||
|
|
body{background:#0a0a14;color:#c8d6e5;font-family:'PingFang SC',-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh}
|
|||
|
|
.card{background:#111928;border:1px solid #1e2d4a;border-radius:16px;padding:40px;width:100%;max-width:420px}
|
|||
|
|
.card h1{font-size:24px;color:#7fd6ff;margin-bottom:4px}
|
|||
|
|
.card .sub{color:#5a7d9a;font-size:13px;margin-bottom:30px}
|
|||
|
|
.field{margin-bottom:18px}
|
|||
|
|
.field label{display:block;font-size:13px;color:#7a9bb5;margin-bottom:6px}
|
|||
|
|
.field input{width:100%;padding:12px 14px;background:#0a0e1a;border:1px solid #1e2d4a;border-radius:8px;color:#e0e8f0;font-size:14px;outline:none}
|
|||
|
|
.field input:focus{border-color:#4a7dc4}
|
|||
|
|
.field .hint{font-size:11px;color:#4a5d6e;margin-top:4px}
|
|||
|
|
.btn{width:100%;padding:12px;background:linear-gradient(135deg,#2563eb,#0e7490);border:none;border-radius:8px;color:white;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px}
|
|||
|
|
.btn:hover{opacity:.9}
|
|||
|
|
.btn:disabled{opacity:.5;cursor:not-allowed}
|
|||
|
|
.msg{padding:10px 14px;border-radius:8px;font-size:13px;margin-top:16px;display:none}
|
|||
|
|
.msg.success{background:#0d3d2a;color:#4ade80;display:block}
|
|||
|
|
.msg.error{background:#2a0d0d;color:#f87171;display:block}
|
|||
|
|
.footer{margin-top:24px;text-align:center;font-size:13px}
|
|||
|
|
.footer a{color:#4a9ec4}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="card">
|
|||
|
|
<h1>🌊 注册光湖账号</h1>
|
|||
|
|
<p class="sub">注册后可进入知识库，拥有独立路径和空间</p>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label>用户名</label>
|
|||
|
|
<input type="text" id="username" placeholder="用于登录和显示的昵称" autocomplete="username">
|
|||
|
|
<div class="hint">2-20个字符 · 可使用中文</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label>邮箱</label>
|
|||
|
|
<input type="email" id="email" placeholder="your@email.com" autocomplete="email">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label>密码</label>
|
|||
|
|
<input type="password" id="password" placeholder="至少8位" autocomplete="new-password">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="field">
|
|||
|
|
<label>确认密码</label>
|
|||
|
|
<input type="password" id="password2" placeholder="再次输入密码">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="btn" id="submitBtn" onclick="register()">注册</button>
|
|||
|
|
|
|||
|
|
<div class="msg" id="msg"></div>
|
|||
|
|
|
|||
|
|
<div class="footer">
|
|||
|
|
已有账号？<a href="https://guanghubingshuo.com/outline">去登录</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
async function register() {
|
|||
|
|
const btn = document.getElementById('submitBtn');
|
|||
|
|
const msg = document.getElementById('msg');
|
|||
|
|
const username = document.getElementById('username').value.trim();
|
|||
|
|
const email = document.getElementById('email').value.trim();
|
|||
|
|
const password = document.getElementById('password').value;
|
|||
|
|
const password2 = document.getElementById('password2').value;
|
|||
|
|
|
|||
|
|
msg.className = 'msg';
|
|||
|
|
msg.style.display = 'none';
|
|||
|
|
|
|||
|
|
if (!username || username.length < 2) { showMsg('请输入至少2个字符的用户名', 'error'); return }
|
|||
|
|
if (!email || !email.includes('@')) { showMsg('请输入有效的邮箱地址', 'error'); return }
|
|||
|
|
if (password.length < 8) { showMsg('密码至少8位', 'error'); return }
|
|||
|
|
if (password !== password2) { showMsg('两次密码不一致', 'error'); return }
|
|||
|
|
|
|||
|
|
btn.disabled = true;
|
|||
|
|
btn.textContent = '注册中...';
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await fetch('https://guanghubingshuo.com/register-api/register', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {'Content-Type': 'application/json'},
|
|||
|
|
body: JSON.stringify({username, email, password})
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (data.ok) {
|
|||
|
|
showMsg('✅ 注册成功！3秒后跳转到登录页...', 'success');
|
|||
|
|
setTimeout(() => { window.location.href = 'https://guanghubingshuo.com/outline'; }, 3000);
|
|||
|
|
} else {
|
|||
|
|
showMsg('❌ ' + data.error, 'error');
|
|||
|
|
btn.disabled = false;
|
|||
|
|
btn.textContent = '注册';
|
|||
|
|
}
|
|||
|
|
} catch(e) {
|
|||
|
|
showMsg('❌ 网络错误，请重试', 'error');
|
|||
|
|
btn.disabled = false;
|
|||
|
|
btn.textContent = '注册';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showMsg(text, type) {
|
|||
|
|
const msg = document.getElementById('msg');
|
|||
|
|
msg.textContent = text;
|
|||
|
|
msg.className = 'msg ' + type;
|
|||
|
|
msg.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|