feat(05-02): add live preview panel HTML and CSS styles

- Add #live-preview div between timeline-canvas and block-inspector
- Add show selector (show-select + btn-load-show) to transport bar
- Add keyboard-hint span at far right of transport bar
- Append .live-preview, .device-strip, .strip-label, .strip-color, .strip-anim, .keyboard-hint CSS styles
This commit is contained in:
Claude
2026-04-07 10:14:16 +00:00
parent 7809402d54
commit e0e412fcd1
2 changed files with 80 additions and 0 deletions

View File

@@ -65,6 +65,7 @@
<button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
</div>
<canvas id="timeline-canvas"></canvas>
<div id="live-preview" class="live-preview" style="display:none;"></div>
<div id="block-inspector" class="block-inspector" style="display:none;"></div>
</main>
@@ -81,6 +82,13 @@
<div class="transport-sep"></div>
<select id="show-select" class="transport-file-select">
<option value="">&#8212; no shows &#8212;</option>
</select>
<button id="btn-load-show" class="transport-btn" title="Load saved show">LOAD</button>
<div class="transport-sep"></div>
<label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG" style="cursor:pointer;">
+ UPLOAD
<input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
@@ -91,6 +99,9 @@
</select>
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
<div style="flex:1"></div>
<span class="keyboard-hint">[SPACE] PLAY [&#8592;&#8594;] SEEK [^Z] UNDO [^S] SAVE</span>
</footer>
</div>