hyphsworld.com/auth.html at main · hyphsworld/hyphsworld.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HYPHSWORLD | ID Portal</title>
  <link rel="stylesheet" href="auth.css" />
  <script src="site-analytics.js" defer></script>
  <style>
    :root{--green:#39ff7a;--cyan:#1ffcff;--yellow:#ffe45c;--pink:#ff39d6;--red:#ff275d;--ink:#050705;--glass:rgba(7,14,12,.78);--muted:rgba(255,255,255,.74)}
    body{background:#020604;color:#fff;overflow-x:hidden}.auth-shell:before{content:"";position:fixed;inset:-25%;z-index:-2;background:radial-gradient(circle at 15% 0%,rgba(57,255,122,.26),transparent 28%),radial-gradient(circle at 85% 15%,rgba(31,252,255,.22),transparent 28%),radial-gradient(circle at 50% 100%,rgba(255,39,214,.20),transparent 34%),linear-gradient(135deg,#020604,#07140d 45%,#050607);filter:saturate(1.2)}.auth-shell:after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.2));pointer-events:none}.one-id-card{position:relative;max-width:820px;margin:0 auto;border:1px solid rgba(57,255,122,.28);box-shadow:0 0 50px rgba(57,255,122,.13),0 26px 90px rgba(0,0,0,.45);overflow:hidden}.one-id-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(31,252,255,.07),transparent);pointer-events:none}.portal-orb{width:98px;height:98px;margin:0 auto 14px;border-radius:999px;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff,#1ffcff 18%,#39ff7a 42%,#050705 72%);box-shadow:0 0 34px rgba(31,252,255,.52),0 0 76px rgba(57,255,122,.28);font-size:2.35rem;animation:portalPulse 2.4s ease-in-out infinite}.one-id-card h1{text-align:center;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 22px rgba(57,255,122,.42)}.sub{text-align:center;color:var(--muted);font-weight:900}.one-id-panel{display:grid;gap:16px;padding:18px;border:1px solid rgba(69,255,54,.28);border-radius:26px;background:radial-gradient(circle at 10% 0%,rgba(69,255,54,.16),transparent 38%),radial-gradient(circle at 92% 0%,rgba(255,39,214,.12),transparent 34%),var(--glass);backdrop-filter:blur(14px)}.one-id-panel h2{margin:0;font-size:clamp(1.75rem,5vw,3rem);line-height:.95;text-transform:uppercase;color:#fff}.one-id-helper{margin:0;color:var(--muted);font-weight:900;line-height:1.45}.one-id-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:7px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.34)}.one-id-tabs button{flex:1;min-width:130px;background:transparent;color:#fff;border:1px solid transparent;text-transform:uppercase;letter-spacing:.08em}.one-id-tabs button.is-active{background:linear-gradient(90deg,var(--green),var(--cyan),var(--yellow));color:#050505;box-shadow:0 0 20px rgba(57,255,122,.22)}.id-scan-strip{display:grid;gap:8px;padding:12px;border-radius:18px;background:rgba(0,0,0,.34);border:1px solid rgba(31,252,255,.2)}.scan-line{height:8px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--green),var(--cyan),var(--yellow),transparent);box-shadow:0 0 18px rgba(31,252,255,.35);animation:scanMove 1.6s linear infinite}.scan-copy{margin:0;color:#d8ffe5;font-weight:1000;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}.one-id-submit{min-height:56px;background:linear-gradient(90deg,var(--green),var(--cyan),var(--yellow));font-size:1rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid #050505;box-shadow:0 10px 0 #020602,0 0 24px rgba(57,255,122,.28)}.one-id-google{background:#fff;color:#050505;border:1px solid rgba(255,255,255,.2);font-weight:1000}.one-id-small{font-size:.9rem;color:var(--muted);line-height:1.45;margin:0}.one-id-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.one-id-links a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff}.password-row{position:relative;display:grid}.password-row input{padding-right:116px}.see-password-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);min-height:36px;padding:8px 13px;border-radius:999px;background:linear-gradient(135deg,#ffe45c,#39ff7a);border:2px solid #050505;color:#050505!important;font-size:.8rem;font-weight:1000;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 0 2px rgba(255,255,255,.16),0 0 18px rgba(57,255,122,.42);text-shadow:none}.see-password-btn:hover,.see-password-btn:focus-visible{background:linear-gradient(135deg,#fff16e,#1ffcff);color:#050505!important;outline:3px solid rgba(255,39,93,.72);outline-offset:2px}.mode-signup [data-signin-copy]{display:none}.mode-signin [data-signup-copy]{display:none}@keyframes portalPulse{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.05);filter:saturate(1.35)}}@keyframes scanMove{0%{transform:translateX(-12%);opacity:.55}50%{opacity:1}100%{transform:translateX(12%);opacity:.55}}@media(max-width:640px){.one-id-tabs{border-radius:18px}.one-id-tabs button{min-width:100%}.password-row input{padding-right:104px}.see-password-btn{font-size:.74rem;padding:7px 10px;right:6px}.one-id-panel{padding:15px}.portal-orb{width:82px;height:82px}}
  </style>
</head>
<body>
  <main class="auth-shell">
    <section class="card one-id-card mode-signin" id="authCard">
      <div class="portal-orb" aria-hidden="true">💎</div>
      <p class="mini-kicker">AMS WEST ID PORTAL</p>
      <h1>HYPHSWORLD ID</h1>
      <p class="sub">One email login connects Cool Points, slots, badges, Daily Spin, vault progress, and your account.</p>

      <div id="message" class="message" role="status" aria-live="polite"></div>

      <section class="one-id-panel" aria-label="HYPHSWORLD identity form">
        <div class="one-id-tabs" role="tablist" aria-label="Choose login or signup">
          <button id="modeSignin" type="button" class="is-active" aria-selected="true">I’m Back</button>
          <button id="modeSignup" type="button" aria-selected="false">I’m New</button>
        </div>

        <div>
          <h2 data-signin-copy>Enter the Portal</h2>
          <h2 data-signup-copy>Start Your ID</h2>
          <p class="one-id-helper" data-signin-copy>Your email is your HYPHSWORLD ID. Your Cool Points connect automatically after one login.</p>
          <p class="one-id-helper" data-signup-copy>Create one HYPHSWORLD ID. Your email becomes the wallet for points, slots, rewards, and vault access.</p>
        </div>

        <div class="id-scan-strip" aria-hidden="true">
          <div class="scan-line"></div>
          <p class="scan-copy">Email scan links your Cool Points wallet</p>
        </div>

        <button id="googleLoginBtn" class="one-id-google" type="button">Continue with Google ID</button>

        <form id="oneAuthForm" autocomplete="on">
          <label>Your Email
            <input id="authEmail" type="email" autocomplete="email" placeholder="you@email.com" required />
          </label>
          <label>Your Secret Code
            <span class="password-row">
              <input id="authPassword" type="password" minlength="6" autocomplete="current-password" placeholder="6+ characters" required />
              <button id="togglePassword" class="see-password-btn" type="button" aria-pressed="false" aria-controls="authPassword">See</button>
            </span>
          </label>
          <button id="oneAuthSubmit" class="one-id-submit" type="submit">Enter HYPHSWORLD</button>
        </form>

        <p class="one-id-small"><strong>One login.</strong> Use the same email every time. Your points load automatically across slots, games, vault, and account pages.</p>
      </section>

      <div class="one-id-links">
        <a href="index.html">Back Home</a>
        <a href="account.html">Manage ID</a>
        <a href="forgot-password.html">Forgot Secret Code</a>
      </div>
    </section>
  </main>

  <script src="supabase-config.js"></script>
  <script src="auth-client.js"></script>
  <script src="cool-points.js"></script>
  <script src="cool-badges.js"></script>
  <script src="auth.js"></script>
</body>
</html>