index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#f7c66b" />
    <meta name="description" content="Popcat clone: click or tap the cat to make it pop and rack up your score." />
    <title>Popcat Clone</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body>
    <main class="app">
      <header class="topbar">
        <h1 class="title">POPCAT</h1>
        <div class="controls">
          <button id="mute" class="icon-btn" type="button" aria-pressed="false" aria-label="Mute sound">🔊</button>
          <button id="reset" class="icon-btn" type="button" aria-label="Reset counter">↺</button>
        </div>
      </header>

      <section class="counter-wrap" aria-live="polite" aria-atomic="true">
        <div id="counter" class="counter">0</div>
        <div id="cps" class="cps">0.0 pops / sec</div>
      </section>

      <button
        id="cat"
        class="cat"
        type="button"
        aria-label="Pop the cat"
        aria-describedby="hint"
      >
        <img id="cat-img" class="cat-img" src="/cat-closed.svg" alt="" draggable="false" />
      </button>

      <p id="hint" class="hint">Click, tap, or press Space to pop</p>

      <footer class="footer">
        <span>Best: <strong id="best">0</strong></span>
        <a href="https://github.com/CommunityPokeOrg/popcat-clone" target="_blank" rel="noreferrer">Source</a>
      </footer>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>