uj-mastering-master/static/index.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>