Dungeons-Proxy/public/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#0a0a0a">
  <meta name="description" content="Your next chapter starts here. Request private-alpha access to Dungeons & Ground.">
  <title>Dungeons & Ground — Your next chapter</title>
  <link rel="icon" type="image/svg+xml" href="/_access/assets/mark.svg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Unbounded:wght@500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/_access/assets/style.css">
  <script src="/_access/assets/app.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#access-number">Skip to access number</a>
  <header class="nav">
    <a class="mark" href="/" aria-label="Dungeons & Ground home">
      <span class="mark-icon" aria-hidden="true">D<span>&amp;</span>G</span>
      <span class="mark-copy"><strong>DUNGEONS</strong><small>&amp; GROUND</small></span>
    </a>
    <span class="alpha-tag"><i></i> PRIVATE ALPHA <span class="tag-divider">/</span> INVITATION REQUIRED</span>
  </header>
  <main>
    <div class="hero">
      <section class="hero-copy" aria-labelledby="hero-title">
        <p class="eyebrow"><span></span> A WORLD WORTH GETTING INTO</p>
        <h1 id="hero-title">YOUR NEXT<br>CHAPTER<br><em>AWAITS.</em></h1>
        <p class="lede">Beyond this gate, a universe of your own. Real players. AI companions. Stories that keep moving, even when life gets in the way.</p>
        <div class="transmission">
          <div class="signal" aria-hidden="true"><i></i><i></i><b>D&amp;G</b></div>
          <div><small>A MESSAGE FROM THE GROUNDKEEPER</small><p>“Every great adventure begins with<br>someone opening a door.”</p></div>
        </div>
        <div class="trust-row"><span>PRIVATE WORLDS</span><i></i><span>YOUR PACE</span><i></i><span>INFINITE POSSIBILITIES</span></div>
      </section>
      <section class="access-card" aria-labelledby="access-title">
        <div class="card-top"><span>THE GATE / ACCESS CONTROL</span><span class="lock" aria-hidden="true">◇</span></div>
        <div class="card-content">
          <p class="eyebrow acid">YOU’RE ONE STEP AWAY</p>
          <h2 id="access-title">ENTER THE<br>GROUND.</h2>
          <p class="card-lede">Already approved? Enter the number<br class="desktop-break"> our bot sent to your direct messages.</p>
          <form id="access-form" novalidate data-code-length="{{CODE_LENGTH}}">
            <label for="access-number">YOUR ACCESS NUMBER <span>{{CODE_LENGTH}} DIGITS</span></label>
            <input id="access-number" name="code" type="text" inputmode="numeric" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="32" placeholder="Paste your number" aria-describedby="code-hint form-status" required>
            <p id="code-hint" class="hint">Your number is reusable for {{CODE_DAYS}} days after approval.</p>
            <div id="form-status" class="form-status" role="status" aria-live="polite" tabindex="-1" hidden></div>
            <button id="enter-button" class="enter-button" type="submit"><span id="button-label">ENTER THE ALPHA</span><span aria-hidden="true">↗</span></button>
          </form>
          <noscript><p class="form-status">Enable JavaScript to submit your access number.</p></noscript>
          <div class="request-access">
            <div class="request-heading"><h3>DON’T HAVE A NUMBER?</h3><span>01 → 02 → 03</span></div>
            <p>Open a bot, choose <strong>Get access</strong>, and wait for an administrator to approve your request.</p>
            <div class="providers">{{PROVIDERS}}</div>
            <p class="dm-note">Keep your DMs open. Your invitation will arrive there.</p>
          </div>
        </div>
        <div class="card-bottom"><i></i> ADMIN-APPROVED ACCESS <span>D&amp;G / ALPHA</span></div>
      </section>
    </div>
    <section class="steps" aria-label="How to get access">
      <article><span class="step-number">01</span><div><h2>MAKE CONTACT</h2><p>Find us on Telegram or Discord.<br>Press Get access in the bot.</p></div><span class="step-arrow" aria-hidden="true">↗</span></article>
      <article><span class="step-number">02</span><div><h2>GET THE GREEN LIGHT</h2><p>An administrator reviews your request.<br>Your number arrives in a private message.</p></div><span class="step-arrow" aria-hidden="true">↗</span></article>
      <article><span class="step-number">03</span><div><h2>WRITE YOUR NEXT CHAPTER</h2><p>Enter your number and step inside.<br>Request a new one after {{CODE_DAYS}} days.</p></div></article>
    </section>
  </main>
  <footer class="footer"><span>STORIES THAT WAIT FOR NO ONE.</span><span>DUNGEONS &amp; GROUND <i>©</i> PRIVATE ALPHA</span></footer>
</body>
</html>