zyphlar
82 lines
2.8 KiB
HTML
82 lines
2.8 KiB
HTML
<!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 & 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 & iOS setup</a>
|
|
</footer>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|