bitgate/packages/site/public/demo.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Try BitGate — live demo</title>
<meta name="description" content="Add reports, restrict a seller, switch moderators — and watch four surfaces reach four different conclusions from the same evidence." />
<link rel="icon" href="./assets/icon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="./assets/site.css" />
</head>
<body>

<nav class="nav">
  <a class="brand" href="./index.html">
    <img class="mark" src="./assets/mark.svg" alt="" width="30" height="30" />
    <span class="wordmark">BitGate</span>
  </a>
  <div class="links">
    <a href="./index.html">Overview</a>
    <a href="./docs.html">Integrate</a>
    <a class="active" href="./demo.html">Try it</a>
    <a href="https://github.com/PR0M3TH3AN/Nostr-Governance">Source</a>
  </div>
</nav>

<header class="hero" style="padding-top:48px; padding-bottom:0">
  <div class="container narrow" style="padding:0">
    <span class="eyebrow">Live demo</span>
    <h1 style="font-size:clamp(32px, 4.5vw, 44px)">Same evidence.<br />Different <em>answers</em>.</h1>
    <p class="lead" style="max-width:560px">
      This runs the real engine in your browser against an in-memory relay, so
      nothing is published and nothing is fetched. Change the evidence on the
      right and watch every surface re-decide.
    </p>
  </div>
</header>

<section class="container">
  <div class="sandbox">
    <div class="panel">
      <h3>The listing</h3>
      <p class="panel-sub">Wrapped in a real <code>&lt;bitgate-veil&gt;</code>, using the marketplace preset.</p>

      <bitgate-veil id="veil" profile="browse">
        <div class="demo-card">
          <div class="art">Refurbished widget</div>
          <div class="meta">
            <div><strong>Refurbished widget</strong></div>
            <div class="price">12,000 sats · sold by d4d4…d4d4</div>
          </div>
        </div>
      </bitgate-veil>

      <h3 style="margin-top:26px">Every surface, right now</h3>
      <p class="panel-sub">One snapshot, evaluated four ways.</p>
      <table class="surface-table" id="surfaces">
        <thead>
          <tr><th>Surface</th><th>Visibility</th><th>Transaction</th><th>Rank</th></tr>
        </thead>
        <tbody></tbody>
      </table>

      <ul class="reason-list" id="reasons"></ul>
    </div>

    <div class="panel">
      <h3>Evidence</h3>
      <p class="panel-sub">Everything here is signed state the engine reduces.</p>

      <div class="control-row">
        <button type="button" id="add-scam">+1 scam report</button>
        <button type="button" id="add-malware">+1 malware report</button>
      </div>
      <div class="control-row">
        <button type="button" id="add-mute">+1 trusted mute</button>
        <button type="button" id="deny-seller">Restrict the seller</button>
      </div>
      <div class="control-row">
        <button type="button" id="block">Block them yourself</button>
        <button type="button" class="reset" id="reset">Reset</button>
      </div>

      <h3 style="margin-top:24px">Signed in as</h3>
      <p class="panel-sub">Capability checks are enforced in the command layer, not the UI.</p>
      <div class="control-row">
        <button type="button" data-viewer="shopper">Shopper</button>
        <button type="button" data-viewer="listing">Listing moderator</button>
        <button type="button" data-viewer="seller">Seller moderator</button>
      </div>

      <bitgate-capabilities id="caps"></bitgate-capabilities>
    </div>
  </div>

  <div class="callout">
    <strong>Note the seller's view.</strong> However strong the evidence, the
    seller dashboard never hides the listing from its own seller — hiding it
    would leave no route to appeal.
  </div>
</section>

<section class="container narrow">
  <h2>The markup behind this</h2>
  <p class="section-sub">
    In production the provider takes relay URLs. Here it is handed an in-memory
    runtime so the page works offline and publishes nothing.
  </p>
  <pre><code>&lt;bitgate-provider relays="wss://relay.example" root="&lt;root&gt;" policy="commerce"&gt;
  &lt;bitgate-veil profile="browse" target-address="30078:&lt;seller&gt;:sku-001"&gt;
    …your listing markup…
  &lt;/bitgate-veil&gt;
&lt;/bitgate-provider&gt;</code></pre>
  <div class="cta-row" style="margin-top:20px">
    <a class="btn primary" href="./docs.html">Integration guide →</a>
    <a class="btn secondary" href="https://github.com/PR0M3TH3AN/Nostr-Governance">Read the source</a>
  </div>
</section>

<footer>
  <div>BitGate — GPL-3.0-or-later.</div>
  <div class="footer-links">
    <a href="./index.html">Overview</a>
    <a href="./docs.html">Integrate</a>
    <a href="https://github.com/PR0M3TH3AN/Nostr-Governance">Source</a>
  </div>
</footer>

<script type="module" src="./assets/demo.js"></script>

</body>
</html>