Join the 1UP Beta | Train Like a Hero



<style>
  /* ========= LAYOUT & THEME ========= */
  .beta-hero {
    text-align:center;
    padding: 72px 16px 32px;
    background: radial-gradient(circle at top, #24144b 0, #05020d 55%, #03010a 100%);
    color:#fff;
  }
  .beta-hero .eyebrow {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:#b9b5ff;
    margin-bottom: 8px;
  }
  .beta-hero h1 {
    margin: 0 0 12px;
    font-weight: 800;
    font-size: clamp(32px, 5vw, 40px);
  }
  .beta-hero p {
    max-width: 880px;
    margin: 0 auto 18px;
    color:#d7d8ff;
    font-size: 15px;
  }
  .beta-hero .micro-trust {
    font-size: 13px;
    color:#8f90c8;
    margin-top: 6px;
  }

  .beta-pills {
    list-style:none;
    display:flex;
    gap:10px;
    justify-content:center;
    padding:0;
    margin:14px 0 20px;
    flex-wrap:wrap;
  }
  .beta-pills li {
    background:rgba(12, 7, 40, 0.9);
    color:#eaeaff;
    border:1px solid rgba(119, 93, 255, 0.5);
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .beta-pills li span.dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffdd72,#ff7ab5);
    box-shadow:0 0 12px rgba(255,180,120,0.7);
  }

  .section { padding: 48px 16px; }
  .light { background:#f7f7fb; }
  .dark { background:#05020f; color:#fff; }
  .container { max-width:1080px; margin:0 auto; }

  /* ========= FEATURE CARDS ========= */
  .features3 {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .features3 .card {
    background:radial-gradient(circle at top left,#221b49 0,#130f28 40%,#080515 100%);
    color:#fff;
    border:1px solid rgba(92, 74, 200, 0.6);
    border-radius:16px;
    padding:18px 18px 20px;
    box-shadow:0 18px 40px rgba(3, 1, 20, 0.75);
    position:relative;
    overflow:hidden;
  }
  .features3 .card::before {
    content:"";
    position:absolute;
    inset:-40%;
    opacity:0.16;
    background:radial-gradient(circle at top,#9f7bff,transparent 55%);
    pointer-events:none;
  }
  .features3 .card h3 {
    position:relative;
    margin-top:0;
    margin-bottom:10px;
    font-size:17px;
  }
  .features3 .card p {
    position:relative;
    margin:0;
    font-size:14px;
    color:#deddfd;
  }
  @media (max-width: 900px){
    .features3{ grid-template-columns:1fr; }
  }

  /* ========= FORM ========= */
  .form-wrap { max-width:820px; margin:0 auto; }
  .grid-2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .grid-2 .span-2 { grid-column: span 2; }
  @media (max-width: 720px){
    .grid-2{ grid-template-columns:1fr; }
    .grid-2 .span-2{ grid-column: auto; }
  }

  .field {
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .field label {
    font-weight:700;
    font-size:14px;
    color:#f1f1ff;
  }
  .field input,
  .field select {
    padding:12px 14px;
    border-radius:10px;
    border:1px solid #372a69;
    background:#0b061b;
    color:#eee;
    font-size:14px;
  }
  .field input::placeholder {
    color:#706c9b;
  }
  .field input:focus,
  .field select:focus {
    outline:2px solid #6d4bff;
    outline-offset:1px;
  }

  .agree {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:16px 0;
    font-size:13px;
    color:#dcdcff;
  }
  .agree input {
    margin-top:3px;
  }

  .cta-btn {
    display:inline-block;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
  }
  .primary {
    background:linear-gradient(135deg,#7e5bff,#ff7bcb);
    color:#fff;
    border:0;
    box-shadow:0 14px 30px rgba(43, 13, 122, 0.65);
  }
  .primary:hover {
    filter:brightness(1.05);
    transform:translateY(-1px);
  }
  .primary.full {
    width:100%; text-align:center;
  }
  .ghost {
    border:1px solid #6d4bff;
    color:#6d4bff;
    background:transparent;
  }

  .muted { color:#bdbde6; font-size:14px; }

  /* ========= ANIMATIONS ========= */
  [data-animate] {
    opacity:0;
    transform: translateY(14px);
    transition:
      opacity 0.6s ease-out,
      transform 0.6s ease-out;
  }
  [data-animate].is-visible {
    opacity:1;
    transform: translateY(0);
  }
  [data-animate].delay-1 { transition-delay:0.08s; }
  [data-animate].delay-2 { transition-delay:0.16s; }
  [data-animate].delay-3 { transition-delay:0.24s; }
</style>

<!-- HERO -->
<section class="beta-hero">
  <div class="container" data-animate>
    <div class="eyebrow">Early Access • Limited Beta</div>

    <!-- A/B tested hero title -->
    <h1 id="heroTitle">Level Up Your Training—For Real</h1>

    <!-- A/B tested subtitle -->
    <p id="heroSubtitle">
      1UP is a training game where your real workouts power an in-game avatar. In this beta, we’re testing the core engine:
  missions, XP, and quick video check-ins that verify every rep. Fill the 30-second form and we’ll send you straight to
  TestFlight to install 1UP.
    </p>

    <!-- ✅ Fixed UL markup -->
    <ul class="beta-pills">
      <li>Beta for anyone ready to level up their training.</li>
      <li><span class="dot"></span>Video-verified performance</li>
      <li><span class="dot"></span>XP, missions, and streaks</li>
    </ul>

    <a href="#beta-form" class="cta-btn primary">Get Early Access</a>
    <div class="micro-trust">
      Built for programs that want more than a stopwatch: real data, real stakes, real progress.
    </div>
  </div>
</section>

<!-- PROOF / BENEFITS -->
<section class="section light">
  <div class="container features3">
    <div class="card" data-animate>
      <h3>🎮 Your Training is the Engine of the 1UP Metaverse.</h3>
      <p>
       Real training drives in-game progression—missions, streaks, and skill paths that evolve with you.
      </p>
    </div>
    <div class="card" data-animate>
      <h3>✅ Receipts For Every Rep</h3>
      <p>
        Quick video uploads validate effort. Rankings, XP, and achievements are built on verified work, not guesswork.
      </p>
    </div>
    <div class="card" data-animate>
      <h3>📊 Coach-Built, Data-Backed Programs</h3>
      <p>
        Programs designed by coaches and trainers—track makes, reps, streaks, and consistency with dashboards that actually matter.
      </p>
    </div>
  </div>
</section>

<!-- BETA FORM (SHORT + REDIRECT) -->
<section id="beta-form" class="section dark">
  <div class="container form-wrap" data-animate>
    <h2 style="margin-top:0">Request Beta Access</h2>
    <p class="muted">
      30 seconds to apply. After you submit, we’ll send you directly to TestFlight to install the beta build.
    </p>

    <form method="POST" action="/beta-signup" id="joinBetaForm" novalidate>
      <!-- Honeypot -->
      <input type="text" name="company" autocomplete="off" tabindex="-1"
             style="position:absolute;left:-9999px" aria-hidden="true">

      <!-- Hidden A/B variant field (read by Flask) -->
      <input type="hidden" name="variant" id="variantField" value="A">

      <div class="grid-2">
        <div class="field">
          <label for="full_name">Full Name</label>
          <input id="full_name" name="full_name" type="text" placeholder="Jordan Taylor" required>
        </div>
        <div class="field">
          <label for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="you@example.com" required>
        </div>

        <div class="field">
          <label for="age_range">Age Range</label>
          <select id="age_range" name="age_range" required>
            <option value="" disabled selected>Select</option>
            <option>13–17</option><option>18–24</option><option>25–34</option>
            <option>35–44</option><option>45–54</option><option>55+</option>
          </select>
        </div>

        <!-- ✅ TRAINER vs TRAINEE ROLE -->
        <div class="field span-2">
          <label>Are you joining as a Trainer or a Trainee?</label>

          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;">
            <label style="background:#0b061b;border:1px solid #372a69;border-radius:12px;padding:12px;cursor:pointer;">
              <input type="radio" name="role" value="trainer" required style="margin-right:8px;">
              <strong>Trainer</strong>
              <div style="font-size:12px;color:#bdbde6;margin-top:6px;line-height:1.4;">
                 You’ll be testing the coach tools: creating drills and workouts, saving them to a library, sharing them with trainees,
  and reviewing their video-verified sessions and stats.
              </div>
            </label>

            <label style="background:#0b061b;border:1px solid #372a69;border-radius:12px;padding:12px;cursor:pointer;">
              <input type="radio" name="role" value="trainee" required style="margin-right:8px;">
              <strong>Trainee</strong>
              <div style="font-size:12px;color:#bdbde6;margin-top:6px;line-height:1.4;">
                You’ll be testing the player experience: running missions, uploading quick proof videos, earning XP for your avatar,
  and seeing how feedback and progression feel inside the app.
              </div>
            </label>
          </div>
        </div>

        <div class="field">
          <label for="program_choice">Which program do you want to test first?</label>
          <select id="program_choice" name="program_choice" required>
            <option value="" disabled selected>Select</option>
            <option>Basketball — Shooting Gauntlet</option>
            <option>Fitness — Push-Up Program</option>
          </select>
        </div>

        <div class="field span-2">
          <label for="training_frequency">How often will you train during the beta?</label>
          <select id="training_frequency" name="training_frequency" required>
            <option value="" disabled selected>Select</option>
            <option>1–2 days/week</option>
            <option>3–4 days/week</option>
            <option>5+ days/week</option>
          </select>
        </div>
      </div>

      <label class="agree">
        <input type="checkbox" name="agree" required>
        <span>
          I agree to receive beta updates and understand this is an early test build of 1UP
          (features may change, break, or improve quickly).
        </span>
      </label>

      <button type="submit" class="cta-btn primary full">
        Join the Beta & Go to TestFlight
      </button>

      <p class="muted" style="margin-top:10px;">
        No spam. We’ll only email you about beta access, updates, or important changes.
      </p>
    </form>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="section light">
  <div class="container" data-animate>
    <h2>How the 1UP Beta Works</h2>
    <ol style="padding-left:18px; color:#252443; font-size:14px;">
      <li><strong>Apply & Install</strong> – Submit the form, then install 1UP via TestFlight.</li>
      <li><strong>Create Your Avatar</strong> – Pick your look, join your coach or program with a code.</li>
      <li><strong>Run Missions</strong> – Complete workouts, upload a quick video, and earn XP.</li>
      <li><strong>Shape the Game</strong> – Share feedback. Your reps and ideas help shape the future of 1UP.</li>
    </ol>
  </div>
</section>

<section class="section dark">
  <div class="container" data-animate>
    <h2>What You’ll Be Testing in This Beta</h2>
    <p class="muted" style="margin-bottom:16px;">
      This is not the full 1UP metaverse yet. In this phase, we’re stress-testing the challenge engine that powers the game.
    </p>

    <div class="grid-2">
      <div>
        <h3 style="font-size:15px;margin-top:0;margin-bottom:6px;">If you join as a Trainer</h3>
        <ul style="padding-left:18px;font-size:13px;color:#dcdcff;margin:0;">
          <li>Building and editing workouts, drills, and challenges.</li>
          <li>Sharing programs with athletes, students, or clients via codes.</li>
          <li>Reviewing video-verified sessions instead of trusting “I did it.”</li>
          <li>Seeing how XP, streaks, and basic stats support your coaching.</li>
        </ul>
      </div>

      <div>
        <h3 style="font-size:15px;margin-top:0;margin-bottom:6px;">If you join as a Trainee</h3>
        <ul style="padding-left:18px;font-size:13px;color:#dcdcff;margin:0;">
          <li>Playing through missions built by coaches inside the app.</li>
          <li>Recording or uploading short proof clips after workouts.</li>
          <li>Watching your avatar level up from verified work, not guesses.</li>
          <li>Giving feedback on difficulty, pacing, and how fun it feels.</li>
        </ul>
      </div>
    </div>

    <p class="muted" style="margin-top:18px;">
      Future seasons will bring more sports, game modes, cosmetics, and a deeper metaverse. This beta is about getting
      the core “train → prove → progress” loop right.
    </p>
  </div>
</section>

<script>
  (function() {
    // === A/B VARIANT HANDLING ===
    var v = sessionStorage.getItem('ab_variant');
    if (!v) {
      v = Math.random() < 0.5 ? 'A' : 'B';
      sessionStorage.setItem('ab_variant', v);
    }

    // Push into hidden field for backend
    var vf = document.getElementById('variantField');
    if (vf) vf.value = v;

    // Variant-specific hero text
    var heroTitle = document.getElementById('heroTitle');
    var heroSubtitle = document.getElementById('heroSubtitle');

    if (v === 'B') {
      if (heroTitle) {
        heroTitle.textContent = 'Join the 1Up Training Metaverse';
      }
      if (heroSubtitle) {
        heroSubtitle.textContent =
          '1UP is a mobile training game where real workouts fuel your avatar. This beta tests the challenge engine—missions, XP, and video proof—not the full metaverse yet. Apply below and we’ll send you straight to TestFlight.';
      }
    }

    document.documentElement.setAttribute('data-variant', v);

    // === SIMPLE FORM GUARD + ANALYTICS HOOK ===
    const form = document.getElementById('joinBetaForm');
    if (form) {
      form.addEventListener('submit', function(e){
        if(!form.checkValidity()){
          e.preventDefault();
          alert('Please complete the required fields before joining the beta.');
          return false;
        }
        try { gtag('event', 'beta_form_submit', { 'variant': v }); } catch(err){}
      });
    }

    // === ROLE TOGGLES PROGRAM REQUIREMENT ===
    const roleRadios = document.querySelectorAll('input[name="role"]');
    const programSelect = document.getElementById('program_choice');

    function applyRoleRules() {
      if (!programSelect) return;
      const selected = document.querySelector('input[name="role"]:checked');
      const role = selected ? selected.value : null;
      const programField = programSelect.closest('.field');
      if (!programField) return;

      if (role === 'trainer') {
        programSelect.required = false;
        programField.style.opacity = '0.6';
      } else {
        programSelect.required = true;
        programField.style.opacity = '1';
      }
    }

    roleRadios.forEach(function(radio) {
      radio.addEventListener('change', applyRoleRules);
    });
    applyRoleRules();

    // === SCROLL-BASED FADE-IN ANIMATIONS ===
    var animated = document.querySelectorAll('[data-animate]');
    if ('IntersectionObserver' in window) {
      var observer = new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.18 });

      animated.forEach(function(el){ observer.observe(el); });
    } else {
      animated.forEach(function(el){ el.classList.add('is-visible'); });
    }
  })();
</script>