Add chain explorer layout and theme toggle

index.html

@@ -2,13 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="theme-color" content="#111912">
+  <meta name="theme-color" content="#f7931a">
   <meta name="description" content="A private Bitcoin playground. Mine fake coins, inscribe a thought, and follow it into a block.">
   <title>Super Testnet — your little Bitcoin universe</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 </head>
 <body>
-  <header><a class="brand" href="#"><span class="mark">S↗</span> SUPER TESTNET <span class="version">v0</span></a><span class="network"><i></i> PRIVATE LOCAL CHAIN</span></header>
+  <header>
+    <a class="brand" href="#"><span class="mark">S↗</span> SUPER TESTNET <span class="version">v0</span></a>
+    <div class="header-actions"><span class="network"><i></i> PRIVATE LOCAL CHAIN</span><button id="theme-toggle" class="theme-toggle quiet" type="button" aria-label="Toggle color theme">☀ Light</button></div>
+  </header>
   <main>
     <section class="hero"><div><p class="eyebrow">BITCOIN, WITH ROOM TO EXPERIMENT</p><h1>Your little<br>Bitcoin universe.</h1><p class="intro">Mine a block. Inscribe a thought. See it land in your wallet.<br>All in your browser, all with pretend money.</p></div><div class="orbit" aria-hidden="true"><div class="cube"><svg viewBox="0 0 100 100" width="82" height="82" fill="none" stroke="currentColor" stroke-width="5" aria-hidden="true"><path d="M35 17v12m12-12v12M35 76v12m12-12v12M24 29h25c22 0 22 23 0 23H24m0 0h28c22 0 22 24 0 24H24m7-47v47"/></svg></div><span>YOUR CHAIN. YOUR PACE.</span></div></section>
     <aside class="notice"><strong>Test coins only.</strong> This is a private simulation, not Bitcoin testnet or mainnet. Keys stay in this browser, unencrypted. Never load real keys or send real funds here.</aside>
@@ -25,8 +28,18 @@
       </article>
     </section>
     <section class="collection-section"><div class="section-title"><div><p class="eyebrow">04 / THE THINGS YOU MADE</p><h2>Your inscriptions <span id="collection-count">0</span></h2></div><span class="muted">Owned by this wallet</span></div><div id="collectibles" class="collectibles"><p class="empty">Your first inscription belongs here.<br><span>Fund your wallet, write some text, and make it yours.</span></p></div></section>
-    <section class="explorer-section"><div class="section-title"><div><p class="eyebrow">FOLLOW THE TRAIL</p><h2>Chain explorer</h2></div><button id="export-lab" class="quiet">↓ Save complete lab</button></div><div id="blocks" class="blocks"></div><article id="inspector" class="panel" hidden tabindex="-1"></article></section>
+    <section class="explorer-section">
+      <div class="section-title"><div><p class="eyebrow">05 / FOLLOW THE TRAIL</p><h2>Chain explorer</h2></div><button id="export-lab" class="quiet">↓ Save complete lab</button></div>
+      <div class="chain-board">
+        <div class="mempool-head"><div><span class="chain-kicker">MEMPOOL</span><strong>Waiting for the next block</strong></div><span class="muted">commit + reveal transactions live here before mining</span></div>
+        <div id="mempool-list" class="mempool-list"></div>
+        <div class="chain-divider"><span>↓ mine</span></div>
+        <div class="blocks-head"><span class="chain-kicker">BLOCKS</span><span class="muted">newest first · click any block to inspect it</span></div>
+        <div id="blocks" class="blocks"></div>
+      </div>
+      <article id="inspector" class="panel inspector" hidden tabindex="-1"></article>
+    </section>
     <details class="about"><summary>Under the hood & attribution</summary><p>Real serialized Bitcoin transactions, Schnorr signatures and Taproot commit/reveal scripts, on a deliberately simplified local UTXO chain. No proof of work, Bitcoin consensus, peer network, public broadcast, or production custody. Collectible outputs cannot be spent in v0.</p><p>Built from and inspired by <a href="https://github.com/supertestnet/testnet_generator">Supertestnet’s testnet_generator</a>, <a href="https://github.com/supertestnet/inscriptions-online">inscriptions-online</a>, and <a href="https://github.com/supertestnet/vanilla-js-browser-wallet">vanilla-js-browser-wallet</a>. <a href="https://github.com/supertestnet/node_faker">node_faker</a> was evaluated for future RPC compatibility.</p><p>Transaction library: <a href="https://github.com/cmdruid/tapscript">tapscript by Christopher Scott</a> (<a href="/licenses/tapscript.txt">CC-BY-1.0</a>). <a href="/licenses/supertestnet-CC0.txt">Supertestnet CC0 license</a> · <a href="/licenses/noble-curves.txt">noble-curves license</a> · <a href="/licenses/noble-hashes.txt">noble-hashes license</a>.</p></details>
     <footer><span>SMALL CHAIN. BIG POSSIBILITIES.</span><button id="reset" class="quiet danger">Reset local lab</button></footer>
   </main><script type="module" src="/src/main.js"></script>
-</body></html>
+</body></html>