<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PotatoOrNot — Find out if your PC is a potato</title>
  <meta name="description" content="Can your PC run this game? Search a game, enter your specs, and get a clear Potato Score in seconds." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://potatoornot.com/" />
  <meta property="og:title" content="PotatoOrNot — Find out if your PC is a potato" />
  <meta property="og:description" content="Search a game, enter your PC specs, and get your Potato Score." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://potatoornot.com/" />
  <meta name="theme-color" content="#050816" />
  <link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml" />
  <link rel="preconnect" href="https://store.cloudflare.steamstatic.com" />
  <link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
  <div class="noise"></div>
  <header class="site-header">
    <a class="brand" href="/" aria-label="PotatoOrNot home">
      <span class="brand-mark">🥔</span>
      <span class="brand-text">Potato<span>OrNot</span></span>
    </a>
    <nav class="top-nav" aria-label="Primary navigation">
      <a href="#checker">Can my PC run it?</a>
      <a href="#tools">Tools</a>
      <a href="#popular">Popular games</a>
    </nav>
  </header>

  <main>
    <section class="hero" id="checker">
      <div class="hero-copy">
        <div class="pill"><span></span> Can my PC run it?</div>
        <h1>Find out if your PC is a potato.</h1>
        <p class="hero-subtitle">Search a game, enter your specs, and get a clean compatibility verdict with a shareable <strong>Potato Score</strong>.</p>
        <div class="hero-actions">
          <a class="btn btn-primary" href="#setup-card">Start checking</a>
          <a class="btn btn-secondary" href="#popular">See popular games</a>
        </div>
        <div class="trust-row" aria-label="Key features">
          <span>⚡ Fast verdict</span>
          <span>🎮 Game requirements</span>
          <span>🥔 Potato Score</span>
        </div>
      </div>

      <aside class="score-preview" aria-label="Potato Score preview">
        <div class="score-top">
          <div>
            <span class="eyebrow">Your result</span>
            <h2>Potato Score</h2>
          </div>
          <div class="preview-score" id="previewScore">?</div>
        </div>
        <div class="score-bar" aria-hidden="true"><span id="previewBar"></span></div>
        <h3 id="previewTitle">Choose a game and your specs</h3>
        <div class="mini-stats">
          <div><span>Minimum</span><strong id="miniMin">—</strong></div>
          <div><span>Recommended</span><strong id="miniRec">—</strong></div>
          <div><span>Performance</span><strong id="miniPerf">—</strong></div>
        </div>
      </aside>
    </section>

    <section class="checker-grid">
      <form class="setup-card" id="setup-card" autocomplete="off">
        <div class="section-title"><span>01</span><h2>Your setup</h2></div>

        <label for="gameSearch">Select game</label>
        <div class="search-wrap">
          <input id="gameSearch" name="game" type="search" placeholder="Type a game name, e.g. Counter-Strike 2" aria-describedby="searchHelp" />
          <div class="search-results" id="searchResults" role="listbox" aria-label="Game results"></div>
        </div>
        <p class="hint" id="searchHelp">Search is powered by Cloudflare Pages Functions using Steam first. RAWG support is prepared for the next step.</p>

        <label for="cpuInput">CPU</label>
        <input id="cpuInput" name="cpu" type="text" placeholder="e.g. Intel Core i5-12400F" />

        <label for="gpuInput">GPU</label>
        <input id="gpuInput" name="gpu" type="text" placeholder="e.g. NVIDIA RTX 3060" />

        <label for="ramInput">RAM (GB)</label>
        <input id="ramInput" name="ram" type="number" min="1" max="512" step="1" placeholder="e.g. 16" />

        <button class="btn btn-primary full" type="submit">Check compatibility</button>
        <button class="btn btn-ghost full" type="button" id="clearBtn">Clear fields</button>
      </form>

      <section class="result-card" aria-live="polite">
        <div class="selected-game">
          <img id="gameImage" src="assets/img/game-placeholder.svg" alt="" />
          <div>
            <span class="eyebrow">Selected game</span>
            <h2 id="gameName">No game selected</h2>
            <p id="gameMeta">Start by searching for a game.</p>
          </div>
        </div>

        <div class="empty-state" id="emptyState">
          <div class="potato-big">🥔</div>
          <h2>Your Potato Score is waiting.</h2>
          <p>No fields are pre-filled. Pick a game and enter your real PC specs.</p>
        </div>

        <div class="result-content hidden" id="resultContent">
          <div class="score-circle-wrap">
            <div class="score-circle" id="scoreCircle"><span id="scoreNumber">—</span><small>/100 potato</small></div>
            <div>
              <h2 id="verdictTitle">Verdict</h2>
              <p id="verdictText">Compatibility summary will appear here.</p>
            </div>
          </div>

          <div class="requirements-grid">
            <article>
              <h3>Minimum requirements</h3>
              <div class="badge" id="minBadge">—</div>
              <p id="minReq">—</p>
            </article>
            <article>
              <h3>Recommended requirements</h3>
              <div class="badge" id="recBadge">—</div>
              <p id="recReq">—</p>
            </article>
          </div>

          <article class="performance-box">
            <h3>Estimated performance</h3>
            <p id="performanceText">—</p>
          </article>

          <div class="share-box">
            <p id="shareText">Share your Potato Score with friends.</p>
            <button class="btn btn-secondary" id="shareBtn" type="button">Share result</button>
          </div>
        </div>
      </section>
    </section>

    <section class="tools" id="tools">
      <div class="section-heading centered">
        <span class="eyebrow">Free PC gaming tools</span>
        <h2>More ways to test your potato.</h2>
        <p>Start with the compatibility checker. Then use our upcoming tools to estimate FPS, compare hardware, optimize settings, and help your group decide what to play.</p>
      </div>

      <div class="tools-grid">
        <article class="tool-card tool-card-active">
          <div class="tool-icon" aria-hidden="true">🎮</div>
          <h3>Can I Run It?</h3>
          <p>Check if your PC meets the minimum and recommended system requirements for any game.</p>
          <a class="tool-btn" href="#setup-card">Check now <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">⏱️</div>
          <h3>Bottleneck Calculator</h3>
          <p>Calculate if your CPU or GPU is limiting your system's performance at different resolutions.</p>
          <a class="tool-btn" href="#roadmap">Calculate <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">🛠️</div>
          <h3>Build Generator</h3>
          <p>Generate an optimized PC build for your budget with automatic component balancing.</p>
          <a class="tool-btn" href="#roadmap">Generate build <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">🧠</div>
          <h3>Compare CPUs</h3>
          <p>Compare specs and performance of different CPUs for gaming, productivity, and upgrades.</p>
          <a class="tool-btn" href="#roadmap">Compare CPUs <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">🎛️</div>
          <h3>Compare GPUs</h3>
          <p>Compare NVIDIA, AMD, and Intel graphics cards by benchmarks, VRAM, power, and prices.</p>
          <a class="tool-btn" href="#roadmap">Compare GPUs <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">🖱️</div>
          <h3>Mouse Sensitivity</h3>
          <p>Convert mouse sensitivity between different games and keep the same aim in FPS games.</p>
          <a class="tool-btn" href="#roadmap">Convert <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">📈</div>
          <h3>FPS Estimator</h3>
          <p>Estimate FPS for any game with your GPU and CPU, including DLSS, FSR, and Frame Generation.</p>
          <a class="tool-btn" href="#roadmap">Estimate FPS <span>→</span></a>
        </article>

        <article class="tool-card">
          <div class="tool-icon" aria-hidden="true">🎚️</div>
          <h3>Game Settings Optimizer</h3>
          <p>Get optimal graphics settings for any game and maximize FPS or quality based on your GPU.</p>
          <a class="tool-btn" href="#roadmap">Optimize <span>→</span></a>
        </article>
      </div>
    </section>


    <section class="popular" id="popular">
      <div class="section-heading">
        <span class="eyebrow">Popular checks</span>
        <h2>Start with a trending game</h2>
      </div>
      <div class="popular-grid" id="popularGrid"></div>
    </section>

    <section class="roadmap" id="roadmap">
      <div class="section-heading">
        <span class="eyebrow">Coming soon</span>
        <h2>Next features on the PotatoOrNot roadmap.</h2>
      </div>
      <div class="roadmap-grid">
        <article><strong>📋 My Game List</strong><span>Add many games and see what runs well.</span></article>
        <article><strong>👥 What can we play?</strong><span>Compare multiple PCs and find games everyone can run.</span></article>
        <article><strong>📤 Share to Discord</strong><span>Generate a clean share card for your group.</span></article>
        <article><strong>📈 FPS Estimator</strong><span>Estimate FPS by game, GPU, CPU, resolution, and settings.</span></article>
        <article><strong>⏱️ Bottleneck Calculator</strong><span>Find out if the CPU or GPU is holding the setup back.</span></article>
        <article><strong>🎚️ Settings Optimizer</strong><span>Recommend graphics settings for FPS or quality.</span></article>
      </div>
    </section>
  </main>

  <footer>
    <p>🥔 PotatoOrNot — Find out if your PC is a potato.</p>
    <p class="footer-note">Game data is based on public store metadata and requirements when available. Compatibility is an estimate.</p>
  </footer>

  <script src="assets/js/data.js"></script>
  <script src="assets/js/potato.js"></script>
  <script src="assets/js/app.js"></script>
</body>
</html>
