Refactor examples into per-app directories with separate HTML, CSS, and JS

- Give each example its own directory: chat/, whiteboard/, sdk-demo/, hrpc-demo/, data-demo/, screenshare/ - Split each into index.html, style.css, and app.js (no inline script/style; CSP-friendly) - Remove old flat files (e.g. chat.html, whiteboard.html, whiteboard.js) - Update README, examples/README, and docs/HRPC to use new paths
2026-02-12 07:35:18 -05:00
parent 1ea4deac6e
commit e801bc0041
24 changed files with 1080 additions and 1217 deletions
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>BridgeSwarm – Data API Demo</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>BridgeSwarm – Data API Demo</h1>
+  <p>Uses <code>BridgeSwarm.request(type, payload)</code> to call Hypercore, Hyperbee, Hyperdrive, Autobase, and Hyperdb in the native host.</p>
+
+  <div class="section">
+    <h2>Hypercore</h2>
+    <div class="row">
+      <button class="primary" id="coreInfo">Core info</button>
+      <input type="text" id="coreAppend" placeholder="Data to append (text)">
+      <button class="secondary" id="coreAppendBtn">Append</button>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Hyperbee (key/value)</h2>
+    <div class="row">
+      <input type="text" id="beeKey" placeholder="Key">
+      <input type="text" id="beeValue" placeholder="Value">
+      <button class="primary" id="beePut">Put</button>
+      <button class="secondary" id="beeGet">Get</button>
+      <button class="secondary" id="beeDel">Del</button>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Hyperdrive (files)</h2>
+    <div class="row">
+      <input type="text" id="drivePath" placeholder="Path (e.g. /foo.txt)" value="/readme.txt">
+      <input type="text" id="driveContent" placeholder="Content to write">
+      <button class="primary" id="drivePut">Put</button>
+      <button class="secondary" id="driveGet">Get</button>
+      <button class="secondary" id="driveList">List /</button>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Autobase (log)</h2>
+    <div class="row">
+      <input type="text" id="autobaseValue" placeholder="Value to append">
+      <button class="primary" id="autobaseAppend">Append</button>
+      <button class="secondary" id="autobaseInfo">Info</button>
+      <button class="secondary" id="autobaseView">Read view (0..4)</button>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Hyperdb (records)</h2>
+    <div class="row">
+      <input type="text" id="hyperdbId" placeholder="Id">
+      <input type="text" id="hyperdbValue" placeholder="Value">
+      <button class="primary" id="hyperdbPut">Put</button>
+      <button class="secondary" id="hyperdbGet">Get</button>
+      <button class="secondary" id="hyperdbDel">Del</button>
+      <button class="secondary" id="hyperdbFind">Find all</button>
+      <button class="secondary" id="hyperdbFlush">Flush</button>
+    </div>
+  </div>
+
+  <div class="section">
+    <h2>Log</h2>
+    <div class="log" id="log"></div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>