beta.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Primary Meta Tags -->
  <title>Join the Beta - GF PriceChecker</title>
  <meta name="title" content="Join the Beta - GF PriceChecker">
  <meta name="description" content="Help test GF PriceChecker before launch. Join our TestFlight beta program and provide feedback on tracking gluten-free price differentials.">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.gfpricechecker.com/beta.html">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.gfpricechecker.com/beta.html">
  <meta property="og:title" content="Join the Beta - GF PriceChecker">
  <meta property="og:description" content="Help test GF PriceChecker before launch. Join our TestFlight beta program and provide feedback on tracking gluten-free price differentials.">
  <meta property="og:image" content="https://www.gfpricechecker.com/assets/images/og-image.png">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://www.gfpricechecker.com/beta.html">
  <meta property="twitter:title" content="Join the Beta - GF PriceChecker">
  <meta property="twitter:description" content="Help test GF PriceChecker before launch. Join our TestFlight beta program and provide feedback on tracking gluten-free price differentials.">
  <meta property="twitter:image" content="https://www.gfpricechecker.com/assets/images/og-image.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/assets/images/favicon.png">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/assets/css/base.css">
  <link rel="stylesheet" href="/assets/css/components.css">

  <!-- Cloudflare Web Analytics -->
  <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;84f439e876194e66b093f87464973973&quot;}"></script>
</head>
<body>

  <!-- Skip Navigation Link for Accessibility -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <!-- Navigation will be loaded by components.js -->
  <div id="navbar-placeholder"></div>

  <!-- Main Content -->
  <main id="main-content">

    <!-- Status Banner (will be populated from status.json) -->
    <div class="container">
      <div id="status-banner" class="status-banner status-banner-testflight" role="status" aria-live="polite">
        <strong>Beta Testing!</strong> Join our TestFlight beta program.
      </div>
    </div>

    <!-- Hero Section -->
    <section class="section">
      <div class="container text-center">
        <h1>Join the Beta</h1>
        <p style="max-width: 600px; margin-left: auto; margin-right: auto;">
          Help shape GF PriceChecker before its official release. Beta testers get early access and can provide direct feedback.
        </p>
        <div style="margin-top: var(--space-xl);">
          <a href="https://testflight.apple.com/join/DdFkCU4W" target="_blank" rel="noopener noreferrer" class="button-primary" style="font-size: var(--text-lg); padding: var(--space-lg) var(--space-2xl);">Join TestFlight Beta</a>
        </div>
      </div>
    </section>

    <!-- What is Beta Testing -->
    <section class="section" style="background-color: var(--light-gray);">
      <div class="container" style="max-width: 800px;">
        <h2>What is Beta Testing?</h2>
        <p>
          Beta testing lets you try the app before it's publicly available. You'll use a pre-release version through Apple's TestFlight app. Your feedback helps identify issues and improvements before the official launch.
        </p>
        <p>
          This isn't the final product. You may encounter bugs or incomplete features. That's expected and helpful for development.
        </p>
      </div>
    </section>

    <!-- How to Join -->
    <section class="section">
      <div class="container" style="max-width: 800px;">
        <h2>How to Join</h2>
        <ol class="beta-steps">
          <li>
            <strong>Install TestFlight</strong>
            <p>Download the <a href="https://apps.apple.com/app/testflight/id899247664" target="_blank" rel="noopener noreferrer">TestFlight app</a> from the App Store on your iPhone. It's free and made by Apple.</p>
          </li>
          <li>
            <strong>Open the Public Link</strong>
            <p>Click this link on your iPhone: <a href="https://testflight.apple.com/join/DdFkCU4W" target="_blank" rel="noopener noreferrer">testflight.apple.com/join/DdFkCU4W</a></p>
          </li>
          <li>
            <strong>Download the Beta</strong>
            <p>Once you open the link, TestFlight will prompt you to install GF PriceChecker. Tap "Accept" and then "Install."</p>
          </li>
          <li>
            <strong>Use the App and Share Feedback</strong>
            <p>Use the app as you normally would. To send feedback, take a screenshot in the app and TestFlight will prompt you to share it with notes. You can also shake your device to report an issue.</p>
          </li>
        </ol>
      </div>
    </section>

    <!-- What to Test -->
    <section class="section" style="background-color: var(--light-gray);">
      <div class="container" style="max-width: 800px;">
        <h2>What to Focus On</h2>
        <p>When testing, pay attention to these areas:</p>
        <ul class="beta-focus-list">
          <li><strong>Adding products:</strong> Can you add gluten-free products and their regular equivalents easily?</li>
          <li><strong>The three-step review:</strong> After scanning a shelf tag, is tapping the name, then the price, then the size clear? Does the scan pick up the right text?</li>
          <li><strong>Size and unit price:</strong> This is the newest area and the one most likely to misbehave. Try entering a package size directly, and try entering a posted unit price instead — in both cents and dollars. Try skipping size entirely and check that those items are reported as excluded rather than silently dropped.</li>
          <li><strong>Receipt verification:</strong> Selecting products, scanning the receipt, and matching each one to a line. Is the suggested line usually right? Is the receipt readable enough to find your product?</li>
          <li><strong>Data accuracy:</strong> Do the unit price and package price differentials look right against what you actually paid?</li>
          <li><strong>Backup and restore:</strong> Export a backup and restore it. Everything should come back, sizes included.</li>
          <li><strong>General usability:</strong> Is anything confusing or hard to find?</li>
          <li><strong>Crashes or errors:</strong> If the app crashes or shows an error, note what you were doing.</li>
        </ul>
        <p>
          There's no wrong way to test. Use the app naturally and report anything that seems off.
        </p>
      </div>
    </section>

    <!-- Contact -->
    <section class="section">
      <div class="container text-center">
        <h2>Questions?</h2>
        <p class="mb-lg">
          Reach out if you have trouble joining the beta or want to share feedback directly.
        </p>
        <div class="empty-state-action">
          <a href="mailto:gfpricechecker@gmail.com" class="button-primary" style="font-size: var(--text-md); padding: var(--space-md) var(--space-xl);">Email Us</a>
        </div>
      </div>
    </section>

  </main>

  <!-- Footer will be loaded by components.js -->
  <div id="footer-placeholder"></div>

  <!-- Scripts -->
  <script src="/assets/js/components.js"></script>
  <script src="/assets/js/utils.js"></script>
  <script src="/assets/js/content-loader.js"></script>
  <script src="/assets/js/main.js"></script>

</body>
</html>