yichael
/
AnimationManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!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="../../css/login/login.css" />
  <link rel="stylesheet" href="../../css/hint-view.css" />
</head>
<body>
  <!-- 半透明背景遮罩 -->
  <div class="login-overlay" id="loginOverlay" style="display: none;"></div>

  <!-- 登录/注册容器 -->
  <div class="login-container" id="loginContainer" style="display: none;">
    <!-- 关闭按钮 -->
    <button class="close-btn" id="closeBtn">×</button>

    <!-- 标签切换 -->
    <div class="tab-switcher">
      <button class="tab-btn active" data-tab="login">登录</button>
      <button class="tab-btn" data-tab="register">注册</button>
    </div>

    <!-- 登录表单 -->
    <div class="form-container" id="loginForm">
      <!-- 登录方式切换 -->
      <div class="login-type-switcher">
        <button class="type-btn active" data-type="account">账号密码</button>
        <button class="type-btn" data-type="phone">手机验证码</button>
      </div>

      <!-- 账号密码登录 -->
      <div class="login-type-content" id="accountLogin">
        <div class="form-group">
          <label for="loginAccount">账号</label>
          <input type="text" id="loginAccount" placeholder="请输入账号" />
        </div>
        <div class="form-group">
          <label for="loginPassword">密码</label>
          <input type="password" id="loginPassword" placeholder="请输入密码" />
        </div>
      </div>

      <!-- 手机验证码登录 -->
      <div class="login-type-content" id="phoneLogin" style="display: none;">
        <div class="form-group">
          <label for="loginPhone">手机号</label>
          <input type="tel" id="loginPhone" placeholder="请输入手机号" maxlength="11" />
        </div>
        <div class="form-group">
          <label for="loginCode">验证码</label>
          <div class="code-input-group">
            <input type="text" id="loginCode" placeholder="请输入验证码" maxlength="6" />
            <button class="code-btn" id="getLoginCode">获取验证码</button>
          </div>
        </div>
      </div>

      <div class="error-message" id="loginError"></div>
      <button class="submit-btn" id="loginSubmit">登录</button>
    </div>

    <!-- 注册表单 -->
    <div class="form-container" id="registerForm" style="display: none;">
      <div class="form-group">
        <div class="avatar-upload">
          <div class="avatar-preview" id="avatarPreview">
            <img id="avatarImage" src="" alt="头像预览" style="display: none;" />
            <span class="avatar-placeholder">点击上传</span>
          </div>
          <input type="file" id="registerAvatar" accept="image/*" style="display: none;" />
        </div>
      </div>
      <div class="form-group">
        <label for="registerUsername">用户名</label>
        <input type="text" id="registerUsername" placeholder="请输入用户名" />
      </div>
      <div class="form-group">
        <label for="registerPhone">手机号</label>
        <input type="tel" id="registerPhone" placeholder="请输入手机号" maxlength="11" />
      </div>
      <div class="form-group">
        <label for="registerCode">验证码</label>
        <div class="code-input-group">
          <input type="text" id="registerCode" placeholder="请输入验证码" maxlength="6" />
          <button class="code-btn" id="getRegisterCode">获取验证码</button>
        </div>
      </div>
      <div class="form-group">
        <label for="registerPassword">密码</label>
        <input type="password" id="registerPassword" placeholder="请输入密码" />
        <div class="password-hint">
          <span class="hint-text">密码要求：8-20位，包含大小写字母和数字</span>
        </div>
      </div>
      <div class="form-group">
        <label for="registerPasswordConfirm">确认密码</label>
        <input type="password" id="registerPasswordConfirm" placeholder="请再次输入密码" />
      </div>
      <div class="error-message" id="registerError"></div>
      <button class="submit-btn" id="registerSubmit">注册</button>
    </div>
  </div>

  <script src="../../js/hint-view.js"></script>
  <script src="../../js/login/login.js"></script>
</body>
</html>