add app, fix ble, use flash

2026-07-04 03:28:14 -07:00
parent e6a2a65b82
commit 24de5d8d39
13 changed files with 1028 additions and 249 deletions
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#1f1147">
+  <title>BabyMobile Audio Manager</title>
+  <link rel="manifest" href="./manifest.webmanifest">
+  <link rel="icon" href="./icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="./icon.svg">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <header>
+    <div class="brand">
+      <img src="./icon.svg" alt="" width="32" height="32">
+      <h1>BabyMobile</h1>
+    </div>
+    <div class="conn">
+      <span id="status-dot" class="dot"></span>
+      <span id="status-text">Not connected</span>
+      <button id="btn-connect" class="primary">Scan &amp; connect</button>
+    </div>
+  </header>
+
+  <div id="unsupported" class="banner" hidden>
+    ⚠ This browser has no Web Bluetooth. Use <b>Chrome</b> or <b>Edge</b> on
+    Android / desktop, or the free <b>Bluefy</b> browser on iPhone/iPad.
+  </div>
+
+  <main>
+    <section class="card">
+      <h2>1 · Add audio</h2>
+      <div id="drop" class="drop">
+        <p>Tap or drop an audio file</p>
+        <small>WAV, MP3, M4A, OGG… — converted in your browser</small>
+        <input id="file" type="file" accept="audio/*" hidden>
+      </div>
+      <div class="opts">
+        <label>Format <select id="bits"></select></label>
+        <label>Rate <select id="rate"></select></label>
+      </div>
+      <p id="convert-info" class="info">No file selected.</p>
+      <div class="row">
+        <label>Upload to <select id="upload-slot" data-needs-conn disabled></select></label>
+        <button id="btn-upload" class="primary" data-needs-conn disabled>Upload</button>
+      </div>
+      <div class="progress"><div id="upload-bar" class="bar"></div></div>
+    </section>
+
+    <section class="card">
+      <h2>2 · Play</h2>
+      <div class="row">
+        <label>Play <select id="play-slot" data-needs-conn disabled></select></label>
+        <button id="btn-play" data-needs-conn disabled>▶ Play</button>
+        <button id="btn-stop" data-needs-conn disabled>⏹ Stop</button>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="card-head">
+        <h2>Tracks on device</h2>
+        <button id="btn-refresh" class="mini" data-needs-conn disabled>↻ Refresh</button>
+      </div>
+      <p class="hint">Live from the device. Titles are remembered locally — the device stores audio, not names.</p>
+      <ul id="slots" class="slots"></ul>
+    </section>
+
+    <section class="card">
+      <h2>Log</h2>
+      <pre id="log" class="log"></pre>
+    </section>
+  </main>
+
+  <footer>
+    Client-side only · no data leaves your device · <a href="./README.md">about &amp; iOS setup</a>
+  </footer>
+
+  <script type="module" src="./app.js"></script>
+</body>
+</html>