web_huangguo2_h5/app/template/pages/register.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{.metaTitle}}</title>
  {{template "seoCommon" .}}
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/register.css?v=3">
  <script>
    // PC 注册走弹窗：桌面访问 /register 时回首页并打开注册弹窗
    (function () {
      try {
        if (window.matchMedia && window.matchMedia("(min-width: 769px)").matches) {
          window.location.replace("/?auth=register");
        }
      } catch (e) {}
    })();
  </script>
</head>
<body class="page-register">
  <header class="page-subheader" aria-label="注册顶栏">
    <a class="page-subheader__btn" href="javascript:history.back()" aria-label="返回">
      <img class="icon" src="/static/images/chevron-left.svg" alt="返回">
    </a>
    <h1 class="page-subheader__title">注册账号</h1>
    <span class="page-subheader__btn" aria-hidden="true"></span>
  </header>

  <main class="register-page">
    <div class="register-page__inner">
      <div class="register-page__brand">
        <img class="register-page__logo" src="/static/logo_icon.png" alt="黄果短剧">
      </div>

      <div class="register-page__content">
        <div class="register-page__intro">
          <h2 class="register-page__title">创建账号</h2>
          <p class="register-page__desc">注册后即可解锁付费剧集并收藏作品</p>
        </div>

        <form class="register-page__form" action="/api/auth/register" method="post" data-register-page-form novalidate>
          <label class="register-page__field" data-field="account">
            <span class="register-page__label">账号</span>
            <span class="register-page__control">
              <img class="icon" src="/static/images/user.svg" alt="" aria-hidden="true">
              <input
                class="register-page__input"
                type="text"
                name="account"
                autocomplete="username"
                placeholder="6 到 20 位字母或数字"
                minlength="6"
                maxlength="20"
                pattern="[A-Za-z0-9]{6,20}"
                required
              >
            </span>
            <span class="register-page__error" data-field-error="account" hidden>
              <img class="register-page__error-icon" src="/static/images/error-tip.svg" alt="" aria-hidden="true">
              <span data-field-error-text></span>
            </span>
          </label>

          <label class="register-page__field" data-field="password">
            <span class="register-page__label">密码</span>
            <span class="register-page__control">
              <img class="icon" src="/static/images/lock-dim.svg" alt="" aria-hidden="true">
              <input
                class="register-page__input"
                type="password"
                name="password"
                autocomplete="new-password"
                placeholder="8 位以上，含字母与数字"
                minlength="8"
                maxlength="64"
                data-register-page-password
                required
              >
              <button class="register-page__toggle" type="button" data-register-page-toggle="password" aria-label="显示密码">
                <img class="icon" src="/static/images/eye.svg" alt="" data-register-page-toggle-icon="password">
              </button>
            </span>
            <span class="register-page__error" data-field-error="password" hidden>
              <img class="register-page__error-icon" src="/static/images/error-tip.svg" alt="" aria-hidden="true">
              <span data-field-error-text></span>
            </span>
          </label>

          <label class="register-page__field" data-field="passwordConfirm">
            <span class="register-page__label">确认密码</span>
            <span class="register-page__control">
              <img class="icon" src="/static/images/lock-dim.svg" alt="" aria-hidden="true">
              <input
                class="register-page__input"
                type="password"
                name="passwordConfirm"
                autocomplete="new-password"
                placeholder="再次输入密码"
                minlength="8"
                maxlength="64"
                data-register-page-password-confirm
                required
              >
              <button class="register-page__toggle" type="button" data-register-page-toggle="confirm" aria-label="显示密码">
                <img class="icon" src="/static/images/eye.svg" alt="" data-register-page-toggle-icon="confirm">
              </button>
            </span>
            <span class="register-page__error" data-field-error="passwordConfirm" hidden>
              <img class="register-page__error-icon" src="/static/images/error-tip.svg" alt="" aria-hidden="true">
              <span data-field-error-text></span>
            </span>
          </label>

          <label class="register-page__agree" data-field="agree">
            <input class="register-page__checkbox" type="checkbox" name="agree" required>
            <span class="register-page__check" aria-hidden="true"></span>
            <span>
              我已年满 18 岁，并同意
              <a href="/terms">《用户条款》</a>
              与
              <a href="/privacy">《隐私政策》</a>
            </span>
          </label>
          <span class="register-page__error" data-field-error="agree" hidden>
            <img class="register-page__error-icon" src="/static/images/error-tip.svg" alt="" aria-hidden="true">
            <span data-field-error-text></span>
          </span>

          <button class="btn btn--primary register-page__submit" type="submit" data-register-page-submit>注册</button>
        </form>

        <p class="register-page__switch">
          <span>已有账号？</span>
          <a href="/login">立即登录</a>
        </p>
      </div>
    </div>
  </main>

  <script defer src="/static/js/common/cookie.js?v=1"></script>
  <script defer src="/static/js/common/request.js?v=6"></script>
  <script defer src="/static/js/common/auth.js?v=3"></script>
  <script defer src="/static/js/pages/register.js?v=4"></script>
</body>
</html>