diff options
| -rw-r--r-- | tools/timeline_editor/index.html | 67 |
1 files changed, 33 insertions, 34 deletions
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html index ccd2750..15e92a6 100644 --- a/tools/timeline_editor/index.html +++ b/tools/timeline_editor/index.html @@ -33,11 +33,17 @@ padding: 20px; border-radius: 8px; margin-bottom: 20px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + flex-wrap: wrap; } h1 { - margin-bottom: 10px; + margin: 0; color: #4ec9b0; + white-space: nowrap; } .controls { @@ -45,7 +51,6 @@ gap: 10px; flex-wrap: wrap; align-items: center; - margin-bottom: 20px; } .checkbox-label { @@ -327,8 +332,8 @@ .properties-panel { position: fixed; - top: 80px; - right: 20px; + bottom: 20px; + left: 20px; width: 350px; max-height: 80vh; background: #252526; @@ -341,7 +346,7 @@ } .properties-panel.collapsed { - transform: translateX(370px); + transform: translateY(calc(100% + 40px)); } .panel-header { @@ -375,8 +380,8 @@ .panel-collapse-btn { position: fixed; - top: 80px; - right: 20px; + bottom: 20px; + left: 20px; background: #252526; border: 1px solid #858585; color: #d4d4d4; @@ -452,29 +457,26 @@ <div class="container"> <header> <h1>📊 Timeline Editor</h1> - <p>Interactive editor for timeline.seq files</p> + <div class="controls"> + <label class="file-label"> + 📂 Load timeline.seq + <input type="file" id="fileInput" accept=".seq"> + </label> + <button id="saveBtn" disabled>💾 Save timeline.seq</button> + <label class="file-label"> + 🎵 Load Audio (WAV) + <input type="file" id="audioInput" accept=".wav"> + </label> + <button id="clearAudioBtn" disabled>✖ Clear Audio</button> + <button id="addSequenceBtn" disabled>➕ Add Sequence</button> + <button id="deleteBtn" disabled>🗑️ Delete Selected</button> + <button id="reorderBtn" disabled>🔄 Re-order by Time</button> + </div> </header> - <div class="controls"> - <label class="file-label"> - 📂 Load timeline.seq - <input type="file" id="fileInput" accept=".seq"> - </label> - <button id="saveBtn" disabled>💾 Save timeline.seq</button> - <label class="file-label"> - 🎵 Load Audio (WAV) - <input type="file" id="audioInput" accept=".wav"> - </label> - <button id="clearAudioBtn" disabled>✖ Clear Audio</button> - <button id="addSequenceBtn" disabled>➕ Add Sequence</button> - <button id="deleteBtn" disabled>🗑️ Delete Selected</button> - <button id="reorderBtn" disabled>🔄 Re-order by Time</button> - </div> - <div class="zoom-controls"> <label>Zoom: <input type="range" id="zoomSlider" min="10" max="200" value="100" step="10"></label> <span id="zoomLevel">100%</span> - <label style="margin-left: 20px">Pixels per second: <span id="pixelsPerSec">100</span></label> <label class="checkbox-label" style="margin-left: 20px"> <input type="checkbox" id="showBeatsCheckbox"> Show Beats (BPM: <span id="currentBPM">120</span>) @@ -489,12 +491,12 @@ <div class="timeline" id="timeline"></div> </div> - <button class="panel-collapse-btn" id="panelCollapseBtn">◀ Properties</button> + <button class="panel-collapse-btn" id="panelCollapseBtn">▲ Properties</button> <div class="properties-panel" id="propertiesPanel" style="display: none;"> <div class="panel-header"> <h2>Properties</h2> - <button class="panel-toggle" id="panelToggle">▶ Collapse</button> + <button class="panel-toggle" id="panelToggle">▼ Collapse</button> </div> <div id="propertiesContent"></div> </div> @@ -534,7 +536,6 @@ const messageArea = document.getElementById('messageArea'); const zoomSlider = document.getElementById('zoomSlider'); const zoomLevel = document.getElementById('zoomLevel'); - const pixelsPerSecLabel = document.getElementById('pixelsPerSec'); const stats = document.getElementById('stats'); // Parser: timeline.seq → JavaScript objects @@ -596,7 +597,7 @@ priority: parseInt(seqMatch[2]), effects: [], name: seqMatch[3] || '', - _collapsed: false + _collapsed: true }; sequences.push(currentSequence); currentPriority = -1; // Reset effect priority for new sequence @@ -1280,7 +1281,7 @@ startTime: 0, priority: 0, effects: [], - _collapsed: false + _collapsed: true }); renderTimeline(); showMessage('New sequence added', 'success'); @@ -1331,7 +1332,6 @@ const zoom = parseInt(e.target.value); pixelsPerSecond = zoom; zoomLevel.textContent = `${zoom}%`; - pixelsPerSecLabel.textContent = zoom; if (audioBuffer) { renderWaveform(); // Re-render waveform at new zoom } @@ -1352,13 +1352,13 @@ panelToggle.addEventListener('click', () => { propertiesPanel.classList.add('collapsed'); panelCollapseBtn.classList.add('visible'); - panelToggle.textContent = '◀ Expand'; + panelToggle.textContent = '▲ Expand'; }); panelCollapseBtn.addEventListener('click', () => { propertiesPanel.classList.remove('collapsed'); panelCollapseBtn.classList.remove('visible'); - panelToggle.textContent = '▶ Collapse'; + panelToggle.textContent = '▼ Collapse'; }); // Click outside to deselect @@ -1394,7 +1394,6 @@ // Update zoom slider and labels zoomSlider.value = pixelsPerSecond; zoomLevel.textContent = `${pixelsPerSecond}%`; - pixelsPerSecLabel.textContent = pixelsPerSecond; // Re-render waveform and timeline at new zoom if (audioBuffer) { |