wagesj45/mp3-com-meta-browser
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add Bulma loader and client-side DB bootstrap (fflate + sql.js); download/unzip/cache DB and show stub UI

Browse source
This commit is contained in:
Jordan Wages 2025-09-16 16:51:17 -05:00
commit 669e73f065
5 changed files with 505 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

61
index.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MP3.com Metadata Browser</title>
<link rel="stylesheet" href="./bulma.min.css" />
</head>
<body>
<!-- Simple header (Bulma navbar not needed yet) -->
<section class="section">
<div class="container">
<h1 class="title">MP3.com Metadata Browser</h1>
<p class="subtitle">Client-side, static, zero-API search.</p>
</div>
</section>
<!-- Loader/progress area: shown while DB is fetched/unpacked/initialized -->
<section id="loader" class="section" aria-live="polite">
<div class="container">
<div class="box">
<p id="loader-step" class="mb-2">Preparing…</p>
<!-- Bulma progress bar: we update value/max via JS. No inline styles. -->
<progress id="loader-progress" class="progress is-primary" value="0" max="100">0%</progress>
<p id="loader-detail" class="is-size-7 has-text-grey">Starting…</p>
</div>
</div>
</section>
<!-- Main app UI: hidden until DB is ready -->
<section id="app" class="section" hidden>
<div class="container">
<div class="box">
<form id="search-form" class="mb-4" role="search" aria-label="Track search">
<div class="field">
<label class="label" for="q">Search</label>
<div class="control">
<input id="q" name="q" class="input" type="search" placeholder="Search artist, title, album, genre…" disabled aria-disabled="true" />
</div>
<p class="help">Powered by in-browser SQLite FTS; no network queries.</p>
</div>
</form>
<!-- Results stub for now -->
<div id="results" class="content">
<p class="has-text-grey">Database not initialized yet.</p>
</div>
</div>
</div>
</section>
<!-- Third-party libs loaded from CDNs (no trackers). Pinned versions. -->
<!-- fflate: tiny ZIP library used to unzip the downloaded DB archive client-side. -->
<script src="https://cdn.jsdelivr.net/npm/fflate@0.8.2/umd/index.js" crossorigin="anonymous"></script>
<!-- sql.js (WASM SQLite) loader; WASM resolved via locateFile in script.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.2/sql-wasm.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- App logic -->
<script src="./script.js"></script>
</body>
</html>