speedcode/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>speedcode</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="layout">
      <section class="panel panel-main">
        <header class="game-head">
          <div class="head-actions">
            <a href="stats.html" class="btn btn-ghost">stats</a>
            <button id="settingsBtn" class="btn btn-ghost" type="button">settings</button>
            <button id="newRoundBtn" class="btn" type="button">reset prompt</button>
          </div>
          <div class="tab-switch head-tabs" role="tablist" aria-label="main tabs">
            <button id="tabTypeBtn" class="tab-btn active" type="button" role="tab" aria-selected="true">type</button>
            <button id="tabPerksBtn" class="tab-btn" type="button" role="tab" aria-selected="false">perks</button>
          </div>
        </header>

        <section id="typeTab" class="side-tab-panel" role="tabpanel">
          <section class="profile">
            <h2 id="profileTitle">rookie typer</h2>
            <div class="level-line"><span id="shardText">shards: 0</span></div>
          </section>

          <div class="stats-grid">
            <article class="stat-card"><p>wpm</p><strong id="wpm">0</strong></article>
            <article class="stat-card"><p>accuracy</p><strong id="accuracy">100%</strong></article>
            <article class="stat-card"><p>combo</p><strong id="combo">x0</strong></article>
            <article class="stat-card"><p>time</p><strong id="time">60s</strong></article>
          </div>

          <div id="codeEditor" class="code-editor" aria-label="formatted code snippet and typing target">
            <pre class="code-pre"><code id="codeSnippet" class="language-plaintext"></code></pre>
          </div>
          <p id="snippetLanguage" class="setting-note">language: loading...</p>
          <p id="snippetSource" class="setting-note">source: loading...</p>

          <section class="results" id="results" hidden>
            <h2>round complete!</h2>
            <p id="resultsSummary"></p>
            <button id="playAgainBtn" class="btn">go again</button>
          </section>

          <section class="xp-dock" aria-label="level progress">
            <div class="level-line"><span id="levelText" style="font-weight: bold;">level 1</span><ul></ul><span id="xpText">0 / 120 xp</span></div>
            <div class="xp-bar"><div id="xpFill"></div></div>
            <p id="xpGain" class="xp-gain">+0 xp last round</p>
          </section>
        </section>

        <section id="perksTab" class="side-tab-panel" role="tabpanel" hidden>
          <div id="perks" class="perks"></div>
        </section>
      </section>
    </main>

    <div id="settingsModal" class="modal" hidden>
      <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
        <div class="modal-head">
          <h2 id="settingsTitle">settings</h2>
          <button id="closeSettingsBtn" class="btn btn-ghost" type="button">close</button>
        </div>
        <div class="settings-grid">
          <label for="profileName">name</label>
          <input id="profileName" type="text" maxlength="24" placeholder="enter your name..." />
          <label for="difficultySelect">experience level</label>
          <select id="difficultySelect">
            <option value="frontend">frontend</option>
            <option value="backend">backend</option>
            <option value="systems">systems programming</option>
            <option value="full-stack" selected>full-stack</option>
          </select>
          <label for="challengeSelect">challenge level</label>
          <select id="challengeSelect">
            <option value="casual">casual</option>
            <option value="standard" selected>standard</option>
            <option value="intense">intense</option>
            <option value="nightmare">nightmare</option>
          </select>
          <p id="difficultyBonus" class="setting-note">track xp bonus: x1.00</p>
          <p id="challengeBonus" class="setting-note">challenge xp bonus: x1.00 · round: 60s · snippet size: 100%</p>
          <button id="resetProgressBtn" class="btn btn-ghost" type="button">reset save</button>
        </div>
      </div>
    </div>

    <div id="resetConfirmModal" class="modal" hidden>
      <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="resetConfirmTitle">
        <div class="modal-head"><h2 id="resetConfirmTitle">reset progress?</h2></div>
        <p class="setting-note">this will erase your level, xp, perks, and history.</p>
        <div class="modal-actions">
          <button id="cancelResetBtn" class="btn btn-ghost" type="button">cancel</button>
          <button id="confirmResetBtn" class="btn" type="button">yes, reset</button>
        </div>
      </div>
    </div>

    <div id="levelUpOverlay" class="levelup-overlay" hidden aria-hidden="true">
      <div class="levelup-grid"></div>
      <div class="levelup-glow"></div>
      <div class="levelup-shockwave"></div>
      <div class="levelup-particles" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="levelup-core">
        <p id="levelUpKicker" class="levelup-kicker">milestone unlocked!</p>
        <h2 id="levelUpText">level up!</h2>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>