mikkeli
e50eff9122
index.html and app.js requested /static/... and /api/... from the site root, so serving the app behind a reverse proxy at a sub-path (e.g. https://host/uj/ with the prefix stripped) 404'd every asset and call. Relative URLs resolve against the page, which is the same at / and at /uj/; direct access is unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015UXA39Sh9coAx4FhRkd8R2
98 lines
3.5 KiB
HTML
98 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Audio Mastering Analysis Toolkit</title>
|
|
<link rel="stylesheet" href="static/vendor/uPlot.min.css">
|
|
<link rel="stylesheet" href="static/app.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="logo">◉</span>
|
|
<span class="brand-name">uj-mastering-master</span>
|
|
<span class="brand-sub">web</span>
|
|
</div>
|
|
<div class="topbar-controls">
|
|
<label class="field">
|
|
<span>Metric</span>
|
|
<select id="metric-select" title="Which metric to display"></select>
|
|
</label>
|
|
<label class="field">
|
|
<span>X axis</span>
|
|
<select id="x-mode-select" title="Absolute time, or each track normalised to its own length">
|
|
<option value="absolute">Absolute (s)</option>
|
|
<option value="relative">Relative (%)</option>
|
|
</select>
|
|
</label>
|
|
<button id="toggle-y-log" class="toggle" type="button">Y: log</button>
|
|
<button id="refresh-plot" class="btn" type="button" title="Redraw from cached data">Refresh</button>
|
|
<div class="separator"></div>
|
|
<button id="pick-files" class="btn primary" type="button">Add audio…</button>
|
|
<input id="file-input" type="file" accept=".mp3,.wav,.flac,.ogg,.oga,.m4a,.aif,.aiff,.opus" multiple hidden>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
|
|
<aside class="sidebar">
|
|
<section class="panel">
|
|
<h2>Files <span id="file-count" class="badge">0</span></h2>
|
|
<ul id="file-list" class="file-list"></ul>
|
|
<p id="file-empty" class="empty">Drop audio files here, or use <em>Add audio…</em>.
|
|
Files are held in this browser, not on the server.</p>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Metadata</h2>
|
|
<dl id="metadata" class="metadata">
|
|
<dt>Track</dt><dd class="muted">nothing selected</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Reference lines <span id="ref-count" class="badge">0</span></h2>
|
|
<ul id="ref-list" class="ref-list"></ul>
|
|
<div class="ref-actions">
|
|
<button id="add-ref" class="btn small" type="button">Add at centre</button>
|
|
<button id="clear-refs" class="btn small" type="button">Clear</button>
|
|
</div>
|
|
<p class="hint">Drag a line on the plot to move it. Sets are kept per metric.</p>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="stage">
|
|
<div class="plot-head">
|
|
<h1 id="plot-title">No track loaded</h1>
|
|
<div id="legend" class="legend"></div>
|
|
</div>
|
|
|
|
<div id="plot-host" class="plot-host">
|
|
<div id="placeholder" class="placeholder">
|
|
<p class="ph-title">Audio Mastering Analysis Toolkit</p>
|
|
<p class="ph-body">Drop <code>.mp3</code>, <code>.wav</code> or <code>.flac</code> files to analyse.
|
|
Audio stays in this browser's private storage; the server receives it
|
|
only for the moment it takes to compute a metric, and writes nothing to
|
|
disk. Analysis runs at the file's native sample rate.</p>
|
|
</div>
|
|
<canvas id="heatmap" class="heatmap" hidden></canvas>
|
|
</div>
|
|
|
|
<div class="statusbar">
|
|
<span id="status" class="status">Ready</span>
|
|
<span id="timing" class="timing"></span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="drop-overlay" class="drop-overlay" hidden><span>Drop to analyse</span></div>
|
|
|
|
<script src="static/vendor/uPlot.iife.min.js"></script>
|
|
<!-- app.js is an ES module: it imports ./audio-store.js, which owns the
|
|
browser-side copy of every uploaded file. -->
|
|
<script type="module" src="static/app.js"></script>
|
|
</body>
|
|
</html>
|