{% extends "base.html" %}

{% block title %}注册 - 微博超话签到{% endblock %}

{% block extra_css %}
<style>
    .auth-container { max-width: 420px; margin: 60px auto; }
    .auth-card {
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(12px);
        border-radius: 24px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        padding: 44px 36px;
        border: 1px solid rgba(255,255,255,0.6);
    }
    .auth-title {
        text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 8px;
        background: linear-gradient(135deg, #6366f1, #a855f7);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .auth-subtitle { text-align: center; color: #94a3b8; font-size: 15px; margin-bottom: 32px; }
    .strength-bar-row { display: flex; gap: 4px; margin-top: 8px; }
    .strength-bar { flex: 1; height: 4px; background: #e2e8f0; border-radius: 4px; transition: background 0.3s; }
    .strength-bar.active { background: #10b981; }
    .auth-link { text-align: center; margin-top: 24px; color: #94a3b8; font-size: 14px; }
    .auth-link a { color: #6366f1; text-decoration: none; font-weight: 600; }
    .auth-link a:hover { text-decoration: underline; }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card">
        <h1 class="auth-title">🔥 微博超话签到</h1>
        <p class="auth-subtitle">创建你的账号</p>
        <form method="POST">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required oninput="checkStrength()">
                <div class="strength-bar-row">
                    <div class="strength-bar"></div><div class="strength-bar"></div>
                    <div class="strength-bar"></div><div class="strength-bar"></div><div class="strength-bar"></div>
                </div>
                <small style="color:#94a3b8; font-size:12px; margin-top:6px; display:block;">需包含大小写字母、数字、特殊字符，至少 8 位</small>
            </div>
            <div class="form-group">
                <label for="confirm_password">确认密码</label>
                <input type="password" id="confirm_password" name="confirm_password" required placeholder="再次输入密码">
            </div>
            <div class="form-group">
                <label for="invite_code">邀请码</label>
                <input type="text" id="invite_code" name="invite_code" required placeholder="请输入邀请码">
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%; padding:14px; font-size:16px; border-radius:16px;">注册</button>
        </form>
        <div class="auth-link">已有账号？<a href="{{ url_for('login') }}">登录</a></div>
    </div>
</div>
<script>
function checkStrength() {
    const pw = document.getElementById('password').value;
    let s = 0;
    if (pw.length >= 8) s++;
    if (/[a-z]/.test(pw)) s++;
    if (/[A-Z]/.test(pw)) s++;
    if (/\d/.test(pw)) s++;
    if (/[!@#$%^&*]/.test(pw)) s++;
    document.querySelectorAll('.strength-bar').forEach((b, i) => {
        b.classList.toggle('active', i < s);
    });
}
</script>
{% endblock %}