106 lines
6.1 KiB
HTML
106 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>lv8girl · 注册</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
:root {
|
||
--bg: #f0f7f0;
|
||
--surface: #ffffff;
|
||
--surface-light: #e8f0e8;
|
||
--border: #d0e0d0;
|
||
--text: #2c3e2c;
|
||
--text-soft: #5f6b5f;
|
||
--text-hint: #8f9f8f;
|
||
--primary: #3d9e4a;
|
||
--accent: #ffb347;
|
||
--gradient: linear-gradient(135deg, #3d9e4a, #5a9cff);
|
||
}
|
||
body.dark-mode {
|
||
--bg: #1a1e1a;
|
||
--surface: #1e261e;
|
||
--surface-light: #2a3a2a;
|
||
--border: #2a3a2a;
|
||
--text: #e0e8e0;
|
||
--text-soft: #b0bcb0;
|
||
--text-hint: #8a958a;
|
||
--primary: #6b8e6b;
|
||
--accent: #ffb347;
|
||
}
|
||
body { background: var(--bg); color: var(--text); font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; transition: background 0.3s, color 0.3s; }
|
||
.register-wrapper { max-width: 420px; width: 100%; }
|
||
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
|
||
.logo { font-size: 2rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.logo span { font-size: 0.9rem; background: var(--accent); color: var(--surface); padding: 4px 12px; border-radius: 30px; margin-left: 10px; -webkit-text-fill-color: var(--surface); }
|
||
.theme-toggle { background: var(--surface-light); border: none; color: var(--text); font-size: 1.3rem; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
|
||
.theme-toggle:hover { background: var(--accent); color: var(--surface); }
|
||
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 30px 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
|
||
.card h2 { text-align: center; margin-bottom: 25px; color: var(--accent); font-weight: 600; }
|
||
.error-message { background: var(--surface-light); border-left: 4px solid #ff6b6b; color: var(--text-soft); padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
|
||
.success-message { background: var(--surface-light); border-left: 4px solid var(--primary); color: var(--text-soft); padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
|
||
.form-group { margin-bottom: 20px; }
|
||
label { display: block; margin-bottom: 8px; color: var(--text-soft); font-size: 0.9rem; }
|
||
input { width: 100%; padding: 12px 15px; background: var(--surface-light); border: 1px solid var(--border); border-radius: 30px; color: var(--text); font-size: 1rem; outline: none; transition: border 0.2s; }
|
||
input:focus { border-color: var(--accent); }
|
||
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
|
||
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
|
||
.checkbox-group label { margin-bottom: 0; font-size: 0.9rem; }
|
||
.checkbox-group a { color: var(--accent); text-decoration: none; }
|
||
.btn { width: 100%; padding: 14px; background: var(--gradient); border: none; border-radius: 40px; color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform 0.2s; margin-top: 10px; }
|
||
.btn:hover { transform: scale(1.02); }
|
||
.footer-text { text-align: center; margin-top: 25px; color: var(--text-hint); }
|
||
.footer-text a { color: var(--accent); text-decoration: none; font-weight: 500; }
|
||
.footer-text a:hover { text-decoration: underline; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="register-wrapper">
|
||
<div class="header">
|
||
<div class="logo">lv8girl<span>绿坝娘</span></div>
|
||
<button class="theme-toggle" id="themeToggle">🌓</button>
|
||
</div>
|
||
<div class="card">
|
||
<h2>注册</h2>
|
||
{{if .Error}}<div class="error-message">{{.Error}}</div>{{end}}
|
||
{{if .Success}}
|
||
<div class="success-message">{{.Success}}</div>
|
||
{{else}}
|
||
<form method="post">
|
||
<div class="form-group">
|
||
<label>用户名</label>
|
||
<input type="text" name="username" placeholder="3-20个字符，支持中文、字母、数字、下划线" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>邮箱</label>
|
||
<input type="email" name="email" placeholder="请输入有效邮箱" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>密码</label>
|
||
<input type="password" name="password" placeholder="至少6位" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>确认密码</label>
|
||
<input type="password" name="confirm_password" placeholder="请再次输入密码" required>
|
||
</div>
|
||
<div class="checkbox-group">
|
||
<input type="checkbox" name="agree" id="agree" required>
|
||
<label for="agree">我已阅读并同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></label>
|
||
</div>
|
||
<button type="submit" class="btn">注 册</button>
|
||
</form>
|
||
<div class="footer-text">已有账号？ <a href="/login">去登录</a></div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const themeToggle = document.getElementById('themeToggle');
|
||
themeToggle.addEventListener('click', () => {
|
||
document.body.classList.toggle('dark-mode');
|
||
themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌓';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|