<!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>
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <div class="logo">
                    <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                </div>
                <h1>语音视频通话</h1>
                <p class="subtitle">基于 WebRTC 的实时通信系统</p>
            </div>

            <div class="auth-tabs">
                <button class="auth-tab active" data-tab="login">登录</button>
                <button class="auth-tab" data-tab="register">注册</button>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="auth-form active">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" id="loginUsername" placeholder="请输入用户名" autocomplete="username" required>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" id="loginPassword" placeholder="请输入密码" autocomplete="current-password" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block">登录</button>
            </form>

            <!-- 注册表单 -->
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" id="regUsername" placeholder="2-20个字符" required>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" id="regPassword" placeholder="至少6位" required>
                </div>
                <div class="form-group">
                    <label>确认密码</label>
                    <input type="password" id="regPasswordConfirm" placeholder="再次输入密码" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block">注册</button>
            </form>

            <div id="authMessage" class="auth-message"></div>
        </div>
    </div>

    <script src="assets/js/login.js"></script>
</body>
</html>
