Blame for server/web/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scott Wu Math</title>
<meta name="description" content="Make the target from playing cards with + − × ÷, every card once. An OpenEnv environment people and language models play the same way.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5' y='2' width='22' height='28' rx='3' fill='%23fff' stroke='%23222' stroke-width='2'/%3E%3Ctext x='16' y='22' font-size='14' text-anchor='middle' fill='%23c0392b'%3E%E2%99%A5%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<header class="bar">
  <div class="brand">Scott Wu Math</div>
  <nav>
    <a href="#rules" id="rules-link">Rules</a>
    <a href="/static/card.html">Environment card</a>
    <a href="/docs">API</a>
  </nav>
</header>

<main class="layout">
  <section class="game">
    <div class="modes" role="tablist" aria-label="Level">
      <button role="tab" data-level="24">24 <span>4 cards</span></button>
      <button role="tab" data-level="three-digit">Three-digit <span>6</span></button>
      <button role="tab" data-level="year">Year <span>8</span></button>
      <button role="tab" data-level="four-digit">Four-digit <span>9</span></button>
      <button role="tab" data-level="custom">Your number</button>
      <button role="tab" data-level="video">From the video</button>
    </div>

    <form class="custom" id="custom" hidden>
      <label for="custom-target">Target</label>
      <input id="custom-target" inputmode="numeric" pattern="[0-9]*" maxlength="6" placeholder="6843" autocomplete="off">
      <button type="submit" class="btn">Deal</button>
      <span class="muted" id="custom-hint">Any number up to 999,999. 4 cards below 100, 6 below 1,000, 8 below 3,000, else 9.</span>
    </form>

    <div class="table" id="table">
      <div class="table-head">
        <div class="target"><span class="target-label">Make</span> <span id="target">—</span></div>
        <div class="table-meta">
          <span id="task-id" class="muted"></span>
          <span id="timer" class="timer">0:00</span>
        </div>
      </div>
      <div class="piles" id="piles" aria-live="polite"></div>
      <div class="ops" id="ops" aria-label="Operators">
        <button data-op="+" title="Add (+)">+</button>
        <button data-op="-" title="Subtract (−)">−</button>
        <button data-op="*" title="Multiply (× or x)">×</button>
        <button data-op="/" title="Divide (÷ or /)">÷</button>
      </div>
      <div class="status" id="status"></div>
    </div>

    <div class="controls">
      <button class="btn" id="undo" title="Undo (Backspace)">Undo</button>
      <button class="btn" id="restart" title="Put every card back">Start over</button>
      <span class="grow"></span>
      <button class="btn" id="giveup" title="End this deal and show a solution">Show a solution</button>
      <button class="btn primary" id="deal">New deal</button>
    </div>

    <form class="typed" id="typed">
      <label for="expr">Or type it</label>
      <input id="expr" autocomplete="off" spellcheck="false" placeholder="((13 − 12) + (11 − 10) + 7) × 9 × 5 × 5">
      <button class="btn" type="submit">Submit</button>
    </form>

    <div class="result" id="result" hidden></div>
  </section>

  <aside class="side">
    <section>
      <h2>Steps</h2>
      <ol class="steps" id="steps"></ol>
      <p class="muted" id="steps-empty">Pick a card, an operator, then another card.</p>
    </section>
    <section>
      <h2>Expression</h2>
      <code class="expression" id="expression">—</code>
    </section>
    <section>
      <details>
        <summary>Prompt the model reads</summary>
        <pre class="prompt" id="prompt"></pre>
      </details>
    </section>
    <section>
      <h2>This browser</h2>
      <table class="stats" id="stats">
        <thead><tr><th>Level</th><th>Solved</th><th>Best</th></tr></thead>
        <tbody></tbody>
      </table>
    </section>
  </aside>
</main>

<dialog id="rules">
  <form method="dialog">
    <h2>Rules</h2>
    <ul>
      <li>Use every card exactly once. A = 1, J = 11, Q = 12, K = 13.</li>
      <li>Combine two at a time with + − × ÷. Division is exact, so fractions are fine along the way.</li>
      <li>No joining cards into longer numbers, no powers, no minus sign in front of a card.</li>
      <li>One submission per deal. Exact is 1 point; a valid answer within 10% earns up to 0.3.</li>
    </ul>
    <p class="muted">Keys: + − × ÷ pick an operator (x and * work for ×, / for ÷), Backspace undoes, Enter deals again once a deal is over.</p>
    <button class="btn" value="close">Close</button>
  </form>
</dialog>

<script src="/static/cards.js"></script>
<script src="/static/app.js"></script>
</body>
</html>