hsxtxxcykcds2026-frontend/frontend/prototype/login-en.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Shanghai–Suzhou Collaborative Emerging Industries Sci-Tech Innovation Competition Registration System</title>
  <link rel="icon" type="image/png" href="/favicon.png?v=20260829c">
  <link rel="stylesheet" href="/frontend/assets/prototype.css" />
  <script src="/frontend/assets/prototype-scale.js"></script>
</head>
<body class="login-page-wls login-page-wls--en">
  <div class="login-page-wls__wrap">
    <div class="login-page-wls__inner">
      <aside class="login-page-wls__brand" aria-label="Competition registration system">
        <div class="login-page-wls__logo" aria-hidden="true">
          <svg viewBox="0 0 100 100" width="72" height="72" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <defs>
              <linearGradient id="loginPetalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#55c6e9" />
                <stop offset="45%" stop-color="#109bd3" />
                <stop offset="100%" stop-color="#087db4" />
              </linearGradient>
              <path id="loginPetal" d="M50 50 C46.2 44.2 44.2 34.5 46.2 27.2 C47.3 23.6 48.6 21.2 50 20.2 C51.4 21.2 52.7 23.6 53.8 27.2 C55.8 34.5 53.8 44.2 50 50Z" />
            </defs>
            <g fill="url(#loginPetalGrad)" stroke="#087db4" stroke-width="0.35" stroke-linejoin="round">
              <use href="#loginPetal" />
              <use href="#loginPetal" transform="rotate(90 50 50)" />
              <use href="#loginPetal" transform="rotate(180 50 50)" />
              <use href="#loginPetal" transform="rotate(270 50 50)" />
            </g>
            <circle cx="50" cy="50" r="3.6" fill="#5c6068" stroke="#fdfcfc" stroke-width="0.65" />
          </svg>
        </div>
        <div class="login-page-wls__mark">
          <div class="login-page-wls__mark-cn">CONNECTING EVERYTHING&nbsp;&nbsp;·&nbsp;&nbsp;INNOVATING THE FUTURE WITH CHIPS</div>
        </div>
        <h1 class="login-page-wls__title">
          <span class="login-page-wls__title-main">Shanghai–Suzhou Collaborative Emerging Industries Sci-Tech Innovation Competition Registration System</span>
        </h1>
      </aside>

      <section class="login-page-wls__panel">
        <div class="login-page-wls__card">
          <h2 class="login-page-wls__card-title">Welcome</h2>
          <form id="loginForm" class="login-page-wls__form" novalidate>
            <input type="tel" class="login-page-wls__input" name="mobile" autocomplete="tel" inputmode="tel" placeholder="Mobile Number" />
            <div class="login-page-wls__code-row">
              <input type="text" class="login-page-wls__input login-page-wls__input-code" name="captcha" autocomplete="one-time-code" placeholder="Verification Code" />
              <button type="button" class="login-page-wls__code-btn">Get Code</button>
            </div>
            <button type="submit" class="login-page-wls__submit">Log In</button>
            <div class="login-page-wls__quick-entry" aria-label="Registration portals">
              <div class="login-page-wls__quick-row login-page-wls__quick-row--english">
                <a class="login-page-wls__quick-link" href="/frontend/prototype/login-en.html?role=user">Competition Registration</a>
                <span class="login-page-wls__quick-sep">|</span>
                <a class="login-page-wls__quick-link" href="/frontend/prototype/login-en.html?role=audience">Audience Registration</a>
              </div>
            </div>
          </form>
        </div>
      </section>
    </div>

    <footer class="login-page-wls__footer">
      <p class="login-page-wls__copyright">© Shanghai Liaison Office of Suzhou Municipal People's Government&nbsp;&nbsp;Suzhou Hengtai</p>
    </footer>
  </div>

  <script>
    const form = document.getElementById("loginForm");
    const codeBtn = document.querySelector(".login-page-wls__code-btn");
    const requestedRole = new URLSearchParams(window.location.search).get("role");
    const role = requestedRole === "audience" ? "audience" : "user";

    function englishLayoutHref(nextRole) {
      return "/frontend/layout.html?role=" + encodeURIComponent(nextRole) + "&lang=en";
    }

    codeBtn.addEventListener("click", function () {
      codeBtn.textContent = "Code Sent";
      codeBtn.disabled = true;
      setTimeout(() => {
        codeBtn.textContent = "Get Code";
        codeBtn.disabled = false;
      }, 1500);
    });

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      const mobile = form.elements.mobile.value.trim();
      if (mobile) {
        localStorage.setItem("verifiedMobile", mobile);
      }
      window.location.href = englishLayoutHref(role);
    });
  </script>
</body>
</html>