docs/demo.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Live Polymarket Arbitrage Scanner</title>
<meta name="description" content="Can you make free money on Polymarket right now? This page watches Polymarket's live order book and shows you the answer in real time." />
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="stylesheet" href="assets/style.css?v=6" />
</head>
<body>

<div class="demo-shell">

  <nav class="demo-nav">
    <div class="brand">
      <span id="conn-dot" class="dot pend"></span>
      <strong>Polymarket Arbitrage Scanner</strong>
      <span id="conn-label" class="status-text">connecting…</span>
    </div>
    <div class="nav-links">
      <a href="index.html">About this project</a>
      <a href="https://polymarket.com" target="_blank" rel="noopener">What is Polymarket?</a>
      <a href="https://github.com/matthewnyc2/arbitrage" target="_blank" rel="noopener">Source</a>
    </div>
  </nav>

  <!-- Giant hero: one question, one live answer -->
  <section class="hero-q">
    <div class="hero-q-inner">
      <div class="q-line">Can you make free money on Polymarket right now?</div>
      <div class="a-line" id="a-line">
        <span class="spinner"></span><span class="muted">checking live prices…</span>
      </div>
      <div class="a-sub" id="a-sub">
        Scanning <span id="watch-count">6</span> live events from Polymarket for an arbitrage window.
      </div>
    </div>
  </section>

  <!-- The main workbench: one event at a time, clickable -->
  <div class="workbench">

    <aside class="event-column">
      <div class="column-head">
        <h3>Live events from Polymarket</h3>
        <p>Click any event to see the math for it.</p>
      </div>
      <div id="event-list" class="event-cards">
        <div class="event-card skeleton">loading…</div>
      </div>
    </aside>

    <main class="main-column">

      <section class="focused-event">
        <div class="focused-head">
          <div class="focused-title-row">
            <h2 id="event-title">—</h2>
            <button class="why-btn" type="button" id="why-this-event">What is this event?</button>
          </div>
          <div class="subtitle" id="event-subtitle">Pick an event on the left to see the arbitrage math.</div>
        </div>

        <!-- The big interactive calculator block -->
        <div class="calc-card">
          <div class="calc-row calc-head">
            <div class="calc-label">If you bought one share of every possible answer right now</div>
            <span class="status fair" id="basket-status">waiting</span>
          </div>

          <div class="calc-grid">
            <div class="calc-cell">
              <div class="cell-label">You would pay</div>
              <div class="cell-val" id="basket-cost">—</div>
              <div class="cell-sub" id="basket-cost-sub">for one full set</div>
            </div>
            <div class="calc-cell">
              <div class="cell-label">You would get back</div>
              <div class="cell-val is-fixed">$1.00</div>
              <div class="cell-sub">guaranteed — exactly one answer wins</div>
            </div>
            <div class="calc-cell highlight">
              <div class="cell-label">Your profit</div>
              <div class="cell-val" id="basket-pnl">—</div>
              <div class="cell-sub" id="basket-pnl-sub">per one-set bet</div>
            </div>
          </div>

          <div class="scale-row">
            <span class="scale-lbl">What if you bought more?</span>
            <div class="scale-buttons" id="scale-buttons">
              <button type="button" data-qty="1" class="active">1 set</button>
              <button type="button" data-qty="10">10 sets</button>
              <button type="button" data-qty="100">100 sets</button>
              <button type="button" data-qty="1000">1,000 sets</button>
            </div>
          </div>
          <div class="scale-out" id="scale-out"></div>

          <div class="threshold-bar">
            <div class="fill" id="basket-fill" style="width: 0%;"></div>
            <div class="marker-dollar" title="$1.00"></div>
          </div>
          <div class="threshold-bar-labels">
            <span class="left">$0.80 — you'd pocket 20¢ per set</span>
            <span class="center">$1.00 — break-even</span>
            <span class="right">$1.20 — overpriced</span>
          </div>
        </div>

        <div class="section-head">
          <h3>The possible answers and what the market thinks of each</h3>
          <p>
            Each row is one possible answer. The percentage is the market's
            current estimate of that answer being correct — because a $0.72
            share pays $1 when it wins, it must be priced at roughly a 72%
            probability.
          </p>
        </div>
        <div class="outcome-list" id="outcome-list">
          <div class="outcome-row skeleton">loading…</div>
        </div>
      </section>

    </main>
  </div>

  <!-- FAQ - collapsible plain-English Q&A -->
  <section class="faq">
    <div class="faq-inner">
      <h2>Questions you probably have</h2>

      <details class="faq-item" open>
        <summary>What is Polymarket?</summary>
        <p>
          Polymarket is an online betting site for real-world questions —
          elections, sports, Fed meetings, crypto prices, award shows.
          Each question has a list of possible answers, and each answer is
          a share you can buy. When the real-world event resolves, shares
          of the winning answer pay exactly <strong>$1</strong>, and every
          other share pays <strong>$0</strong>. The price of a share is
          basically the market's guess at how likely that answer is.
        </p>
      </details>

      <details class="faq-item">
        <summary>Why does "buying one share of every answer" always pay $1?</summary>
        <p>
          Because exactly one answer can win. If the event has four possible
          outcomes (say: "25 bps up", "no change", "25 bps down", "50+ bps
          down") and you own one share of each, then <em>whatever</em>
          happens, you hold the winning share — and that share pays $1.
          The other three pay $0. You paid for all four, but only the
          winner matters.
        </p>
      </details>

      <details class="faq-item">
        <summary>So where's the free money?</summary>
        <p>
          If the <em>total</em> cost of buying one of every answer drops
          below $1, you're guaranteed to make the difference. Example: if
          the four answers cost 60¢, 30¢, 7¢, and 2¢ — total 99¢ — you
          pay 99¢ now and receive exactly $1 later, no matter which one
          wins. That's a risk-free 1¢ profit on every $1 you bet.
        </p>
      </details>

      <details class="faq-item">
        <summary>Why am I seeing "no free money" every time I check?</summary>
        <p>
          Because the math is public and professional trading bots watch it
          too. The moment the total dips below $1, they instantly buy every
          outcome and push the price back up. Arbitrage on big, popular
          Polymarket events is usually closed within milliseconds. A browser
          page running on your laptop is not going to beat them.
        </p>
        <p>
          This demo exists to show <em>how</em> the math works and
          <em>how often</em> the opportunities actually appear. Watching it
          produce nothing for 30 minutes is more informative than a fake
          demo that flashes profits every second.
        </p>
      </details>

      <details class="faq-item">
        <summary>Is this actually live?</summary>
        <p>
          Yes. Your browser opens a WebSocket to Polymarket's public CLOB
          (the same one their website uses) and receives real price updates
          every few milliseconds. The number of price updates received is
          in the footer below — it ticks up in real time. The event list
          is refreshed hourly by a GitHub Action so you're always looking
          at currently-open markets.
        </p>
      </details>

      <details class="faq-item">
        <summary>Does this page actually trade?</summary>
        <p>
          <strong>No.</strong> This page is read-only. It does not hold money,
          sign transactions, or submit orders. It's a live view of the math.
          The full Python bot in the GitHub repo can submit real orders, but
          only with explicit operator configuration and hard risk caps —
          and even then it defaults to a dry-run mode that logs orders
          instead of broadcasting them.
        </p>
      </details>

      <details class="faq-item">
        <summary>Why would I hire the person who built this?</summary>
        <p>
          Because the same skills — reading real-time market data, writing
          low-latency async pipelines, building production-grade risk
          systems, and shipping interactive demos that explain themselves —
          solve a lot of other, more lucrative problems than retail
          arbitrage. If you have a problem that looks like "connect to a
          streaming API, do math on every event, take action under hard
          constraints," that's this whole project in one sentence.
        </p>
      </details>

    </div>
  </section>

  <!-- Footer stats: show this is truly live -->
  <footer class="live-stats">
    <div class="live-inner">
      <div class="stat">
        <div class="stat-num" id="stat-events">—</div>
        <div class="stat-lbl">events watched</div>
      </div>
      <div class="stat">
        <div class="stat-num" id="stat-tokens">—</div>
        <div class="stat-lbl">answers tracked</div>
      </div>
      <div class="stat">
        <div class="stat-num" id="stat-books">0</div>
        <div class="stat-lbl">order books active</div>
      </div>
      <div class="stat">
        <div class="stat-num" id="stat-msgs">0</div>
        <div class="stat-lbl">price updates received</div>
      </div>
      <div class="stat">
        <div class="stat-num" id="stat-uptime">00:00</div>
        <div class="stat-lbl">running for</div>
      </div>
    </div>
    <p class="live-caption">
      Every number above comes from Polymarket's servers. Nothing is mocked.
      Close this tab and it all stops.
    </p>
  </footer>

  <footer class="site-footer">
    <p>
      <a href="index.html">About this project</a> ·
      <a href="https://github.com/matthewnyc2/arbitrage" target="_blank" rel="noopener">Source code</a>
    </p>
  </footer>
</div>

<!-- Modal for "what is this event" -->
<div class="modal" id="modal" hidden>
  <div class="modal-backdrop" data-close></div>
  <div class="modal-card">
    <button type="button" class="modal-x" data-close aria-label="close">×</button>
    <div id="modal-content"></div>
  </div>
</div>

<script src="assets/demo.js?v=7"></script>
</body>
</html>