<div class="editor-window">
<div class="editor-header">
<div class="controls">
<button class="tool-btn">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</button>
<span class="timecode" id="time-display">00:00:00:00</span>
</div>
</div>
<div class="timeline-container">
<div class="track-labels">
<div class="track-label">V1</div>
<div class="track-label">A1</div>
</div>
<div class="track-area" id="track-area">
<div class="ruler"></div>
<div class="playhead" id="playhead">
<div class="playhead-top"></div>
<div class="playhead-line"></div>
</div>
<div class="editor-track">
<div class="clip video-clip" style="width: 300px; left: 50px;">Interview.mp4</div>
<div class="clip video-clip" style="width: 200px; left: 400px;">B-Roll.mp4</div>
</div>
<div class="editor-track">
<div class="clip audio-clip" style="width: 300px; left: 50px;">Camera Audio</div>
<div class="clip audio-clip" style="width: 500px; left: 400px;">Background Music.wav</div>
</div>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #111827;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.editor-window {
width: 100%;
max-width: 900px;
background: #1e293b;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid #334155;
display: flex;
flex-direction: column;
}
.editor-header {
background: #0f172a;
padding: 16px 20px;
border-bottom: 1px solid #334155;
}
.controls {
display: flex;
align-items: center;
gap: 12px;
}
.tool-btn {
background: #334155;
color: #f8fafc;
border: none;
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.timecode {
margin-left: auto;
color: #3b82f6;
font-family: "Courier New", Courier, monospace;
font-size: 1.125rem;
font-weight: bold;
}
.timeline-container {
display: flex;
height: 250px;
}
.track-labels {
width: 60px;
background: #0f172a;
border-right: 1px solid #334155;
display: flex;
flex-direction: column;
padding-top: 30px;
}
.track-label {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
color: #94a3b8;
font-weight: 600;
border-bottom: 1px solid #334155;
}
.track-area {
flex-grow: 1;
position: relative;
overflow-x: auto;
overflow-y: hidden;
background: #1e293b;
padding-top: 30px;
}
.ruler {
position: absolute;
top: 0;
left: 0;
width: 2000px;
height: 30px;
background: #334155;
border-bottom: 1px solid #0f172a;
}
.playhead {
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 14px;
z-index: 100;
transform: translateX(-7px);
cursor: ew-resize;
}
.playhead-top {
width: 14px;
height: 14px;
background: #ef4444;
clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}
.playhead-line {
position: absolute;
top: 14px;
left: 6px;
width: 2px;
height: calc(100% - 14px);
background: #ef4444;
}
.editor-track {
position: relative;
height: 80px;
width: 2000px;
border-bottom: 1px solid #334155;
background: rgba(15, 23, 42, 0.3);
}
.clip {
position: absolute;
top: 10px;
height: 60px;
border-radius: 6px;
padding: 8px;
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.video-clip { background: #3b82f6; border: 1px solid #60a5fa; }
.audio-clip { background: #10b981; border: 1px solid #34d399; }
const playhead = document.getElementById("playhead");
const trackArea = document.getElementById("track-area");
const timeDisplay = document.getElementById("time-display");
let isDragging = false;
playhead.addEventListener("pointerdown", function(e) {
isDragging = true;
playhead.setPointerCapture(e.pointerId);
});
playhead.addEventListener("pointermove", function(e) {
if (!isDragging) return;
const rect = trackArea.getBoundingClientRect();
let x = e.clientX - rect.left + trackArea.scrollLeft;
if (x < 0) x = 0;
playhead.style.left = x + "px";
const totalSeconds = Math.floor(x / 50);
const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, "0");
const seconds = (totalSeconds % 60).toString().padStart(2, "0");
const frames = Math.floor((x % 50) / 1.66).toString().padStart(2, "0");
timeDisplay.innerText = "00:" + minutes + ":" + seconds + ":" + frames;
});
playhead.addEventListener("pointerup", function() {
isDragging = false;
});
