diff options
| -rw-r--r-- | tools/timeline_editor/index.html | 54 |
1 files changed, 50 insertions, 4 deletions
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html index c77ae41..4dd37ee 100644 --- a/tools/timeline_editor/index.html +++ b/tools/timeline_editor/index.html @@ -149,6 +149,36 @@ box-shadow: 0 0 10px rgba(78, 201, 176, 0.5); } + .sequence-name { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + font-weight: bold; + color: #ffffff; + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), + -1px -1px 4px rgba(0, 0, 0, 0.7); + pointer-events: none; + white-space: nowrap; + opacity: 1; + transition: opacity 0.3s ease; + z-index: 10; + } + + .sequence.hovered .sequence-name { + opacity: 0; + } + + .sequence-info { + position: absolute; + top: 8px; + left: 8px; + font-size: 11px; + color: #858585; + pointer-events: none; + } + .effect { position: absolute; background: #3a3d41; @@ -569,15 +599,31 @@ seqTimeDisplay = `Start: ${seq.startTime.toFixed(2)}s`; } - seqDiv.innerHTML = ` - <strong>Sequence ${seqIndex + 1}</strong><br> - <small>${seqTimeDisplay} | Priority: ${seq.priority}</small> - `; + // Create sequence name overlay (large, centered, fades on hover) + const seqNameDiv = document.createElement('div'); + seqNameDiv.className = 'sequence-name'; + seqNameDiv.textContent = seq.name || `Sequence ${seqIndex + 1}`; + + // Create small info text in corner + const seqInfoDiv = document.createElement('div'); + seqInfoDiv.className = 'sequence-info'; + seqInfoDiv.innerHTML = `${seqTimeDisplay} | Priority: ${seq.priority}`; + + seqDiv.appendChild(seqNameDiv); + seqDiv.appendChild(seqInfoDiv); if (selectedItem && selectedItem.type === 'sequence' && selectedItem.index === seqIndex) { seqDiv.classList.add('selected'); } + // Fade name on hover + seqDiv.addEventListener('mouseenter', () => { + seqDiv.classList.add('hovered'); + }); + seqDiv.addEventListener('mouseleave', () => { + seqDiv.classList.remove('hovered'); + }); + seqDiv.addEventListener('mousedown', (e) => startDrag(e, 'sequence', seqIndex)); seqDiv.addEventListener('click', (e) => { e.stopPropagation(); |