96 lines
4.4 KiB
XML
96 lines
4.4 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 200">
|
|
<defs>
|
|
<linearGradient id="timeline-bg" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#1e1e1e"/>
|
|
<stop offset="100%" stop-color="#2a2a2a"/>
|
|
</linearGradient>
|
|
<linearGradient id="selection" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#3c82dc" stop-opacity="0.6"/>
|
|
<stop offset="100%" stop-color="#3c82dc" stop-opacity="0.3"/>
|
|
</linearGradient>
|
|
<linearGradient id="eight-grad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#ffd230"/>
|
|
<stop offset="100%" stop-color="#e6a800"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="720" height="200" rx="12" fill="#161616"/>
|
|
|
|
<!-- Timeline track -->
|
|
<rect x="40" y="100" width="640" height="48" rx="4" fill="url(#timeline-bg)" stroke="#333" stroke-width="1"/>
|
|
|
|
<!-- Timeline lane -->
|
|
<rect x="40" y="112" width="640" height="24" rx="2" fill="#2a2a2a"/>
|
|
|
|
<!-- Selection region (8 seconds) -->
|
|
<rect x="240" y="100" width="140" height="48" rx="2" fill="url(#selection)"/>
|
|
<line x1="240" y1="100" x2="240" y2="148" stroke="#3c82dc" stroke-width="2" stroke-opacity="0.8"/>
|
|
<line x1="380" y1="100" x2="380" y2="148" stroke="#3c82dc" stroke-width="2" stroke-opacity="0.8"/>
|
|
|
|
<!-- Playhead -->
|
|
<line x1="240" y1="96" x2="240" y2="152" stroke="#ffd230" stroke-width="2"/>
|
|
<polygon points="234,96 246,96 240,104" fill="#ffd230"/>
|
|
|
|
<!-- Ruler ticks -->
|
|
<g stroke="#555" stroke-width="1">
|
|
<line x1="80" y1="100" x2="80" y2="108"/>
|
|
<line x1="120" y1="100" x2="120" y2="105"/>
|
|
<line x1="160" y1="100" x2="160" y2="108"/>
|
|
<line x1="200" y1="100" x2="200" y2="105"/>
|
|
<line x1="240" y1="100" x2="240" y2="108"/>
|
|
<line x1="280" y1="100" x2="280" y2="105"/>
|
|
<line x1="320" y1="100" x2="320" y2="108"/>
|
|
<line x1="360" y1="100" x2="360" y2="105"/>
|
|
<line x1="400" y1="100" x2="400" y2="108"/>
|
|
<line x1="440" y1="100" x2="440" y2="105"/>
|
|
<line x1="480" y1="100" x2="480" y2="108"/>
|
|
<line x1="520" y1="100" x2="520" y2="105"/>
|
|
<line x1="560" y1="100" x2="560" y2="108"/>
|
|
<line x1="600" y1="100" x2="600" y2="105"/>
|
|
<line x1="640" y1="100" x2="640" y2="108"/>
|
|
</g>
|
|
|
|
<!-- Export markers -->
|
|
<g>
|
|
<line x1="130" y1="100" x2="130" y2="148" stroke="#dc3c3c" stroke-width="2"/>
|
|
<rect x="130" y="102" width="14" height="12" rx="1" fill="#c83232"/>
|
|
<text x="137" y="112" font-family="sans-serif" font-size="9" fill="white" text-anchor="middle">1</text>
|
|
</g>
|
|
<g>
|
|
<line x1="390" y1="100" x2="390" y2="148" stroke="#dc3c3c" stroke-width="2"/>
|
|
<rect x="390" y="102" width="14" height="12" rx="1" fill="#c83232"/>
|
|
<text x="397" y="112" font-family="sans-serif" font-size="9" fill="white" text-anchor="middle">2</text>
|
|
</g>
|
|
<g>
|
|
<line x1="540" y1="100" x2="540" y2="148" stroke="#dc3c3c" stroke-width="2"/>
|
|
<rect x="540" y="102" width="14" height="12" rx="1" fill="#c83232"/>
|
|
<text x="547" y="112" font-family="sans-serif" font-size="9" fill="white" text-anchor="middle">3</text>
|
|
</g>
|
|
|
|
<!-- "8" numeral -->
|
|
<text x="100" y="72" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="72" font-weight="bold" fill="url(#eight-grad)">8</text>
|
|
|
|
<!-- "-cut" text -->
|
|
<text x="148" y="70" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="48" font-weight="300" fill="#cccccc">-cut</text>
|
|
|
|
<!-- Scissors icon near playhead -->
|
|
<g transform="translate(296, 82) scale(0.7)" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round">
|
|
<circle cx="5" cy="5" r="4" />
|
|
<circle cx="5" cy="19" r="4" />
|
|
<line x1="9" y1="7" x2="20" y2="17"/>
|
|
<line x1="9" y1="17" x2="20" y2="7"/>
|
|
</g>
|
|
|
|
<!-- Tagline -->
|
|
<text x="400" y="72" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="14" fill="#777">8-second clips for foley datasets</text>
|
|
|
|
<!-- Duration label in selection -->
|
|
<text x="310" y="130" font-family="'Courier New', monospace" font-size="13" fill="#aad4ff" text-anchor="middle" opacity="0.9">8.0s</text>
|
|
|
|
<!-- Time labels -->
|
|
<text x="40" y="166" font-family="'Courier New', monospace" font-size="10" fill="#666">0:00</text>
|
|
<text x="230" y="166" font-family="'Courier New', monospace" font-size="10" fill="#e6a800">1:15</text>
|
|
<text x="640" y="166" font-family="'Courier New', monospace" font-size="10" fill="#666">5:00</text>
|
|
</svg>
|