improved web ui, upload is sorta better, 5sec advertise btn

This commit is contained in:
zyphlar
2026-07-04 03:28:14 -07:00
parent 8cba579780
commit d3bd7b71b9
8 changed files with 458 additions and 79 deletions
+34 -4
View File
@@ -39,10 +39,31 @@
<label>Format <select id="bits"></select></label>
<label>Rate <select id="rate"></select></label>
</div>
<div id="trim" class="opts trim" hidden>
<label>Trim start <input id="trim-start" type="number" min="0" step="0.1" value="0"><span class="unit">s</span></label>
<label>Trim end <input id="trim-end" type="number" min="0" step="0.1" value="0"><span class="unit">s</span></label>
<button id="btn-preview" class="mini" disabled>▶ Preview</button>
<div id="trim" class="trim" hidden>
<div class="wave-wrap">
<canvas id="wave" class="wave"></canvas>
<div id="trim-region" class="trim-region"></div>
<div id="handle-start" class="handle" role="slider" tabindex="0" aria-label="Clip start">
<span class="chev top"></span><span class="line"></span><span class="chev bot"></span>
</div>
<div id="handle-end" class="handle" role="slider" tabindex="0" aria-label="Clip end">
<span class="chev top"></span><span class="line"></span><span class="chev bot"></span>
</div>
</div>
<div class="trim-readout">
<span class="time-fields">
<input id="trim-start-s" class="time-in" type="number" min="0" step="0.01" inputmode="decimal" aria-label="Clip start seconds">
<span class="dash"></span>
<input id="trim-end-s" class="time-in" type="number" min="0" step="0.01" inputmode="decimal" aria-label="Clip end seconds">
<span class="unit">s</span>
</span>
<span id="trim-clip" class="clip">0.0s clip</span>
<button id="btn-preview" class="mini" disabled>▶ Preview</button>
</div>
<label class="level">This file's level
<input id="track-level" type="range" min="0" max="150" value="100">
<span id="track-level-val" class="unit">100%</span>
</label>
</div>
<p id="convert-info" class="info">No file selected.</p>
<div class="row">
@@ -52,6 +73,15 @@
<div class="progress"><div id="upload-bar" class="bar"></div></div>
</section>
<section class="card">
<div class="card-head">
<h2>Playback volume</h2>
<span id="volume-val" class="muted-val"></span>
</div>
<input id="volume" type="range" min="0" max="150" value="100" class="vol-slider" data-needs-conn disabled>
<p class="hint">Master volume on the device, saved across reboots. A file's own level is set above, before upload.</p>
</section>
<section class="card">
<div class="card-head">
<h2>Tracks on device</h2>