133 lines
6.3 KiB
XML
133 lines
6.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#141414"/>
|
|
<stop offset="100%" stop-color="#1a1a1a"/>
|
|
</linearGradient>
|
|
<linearGradient id="tl-bg" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#1e1e1e"/>
|
|
<stop offset="100%" stop-color="#262626"/>
|
|
</linearGradient>
|
|
<linearGradient id="sel" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#3c82dc" stop-opacity="0.55"/>
|
|
<stop offset="100%" stop-color="#3c82dc" stop-opacity="0.2"/>
|
|
</linearGradient>
|
|
<linearGradient id="eight" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#ffd230"/>
|
|
<stop offset="100%" stop-color="#d4a000"/>
|
|
</linearGradient>
|
|
<linearGradient id="glow" x1="0.5" y1="0" x2="0.5" y2="1">
|
|
<stop offset="0%" stop-color="#ffd230" stop-opacity="0.08"/>
|
|
<stop offset="100%" stop-color="#ffd230" stop-opacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="1280" height="640" fill="url(#bg)"/>
|
|
|
|
<!-- Subtle glow behind title -->
|
|
<ellipse cx="640" cy="200" rx="400" ry="140" fill="url(#glow)"/>
|
|
|
|
<!-- Title: "8" -->
|
|
<text x="440" y="250" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="180" font-weight="bold" fill="url(#eight)">8</text>
|
|
|
|
<!-- Title: "-cut" -->
|
|
<text x="560" y="244" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="110" font-weight="300" fill="#cccccc">-cut</text>
|
|
|
|
<!-- Tagline -->
|
|
<text x="640" y="310" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="26" fill="#777" text-anchor="middle">8-second video clips for SELVA datasets</text>
|
|
|
|
<!-- ===== Timeline ===== -->
|
|
|
|
<!-- Timeline track -->
|
|
<rect x="120" y="380" width="1040" height="72" rx="6" fill="url(#tl-bg)" stroke="#333" stroke-width="1"/>
|
|
|
|
<!-- Timeline lane -->
|
|
<rect x="120" y="398" width="1040" height="36" rx="3" fill="#2a2a2a"/>
|
|
|
|
<!-- Ruler ticks -->
|
|
<g stroke="#555" stroke-width="1">
|
|
<line x1="172" y1="380" x2="172" y2="392"/>
|
|
<line x1="224" y1="380" x2="224" y2="387"/>
|
|
<line x1="276" y1="380" x2="276" y2="392"/>
|
|
<line x1="328" y1="380" x2="328" y2="387"/>
|
|
<line x1="380" y1="380" x2="380" y2="392"/>
|
|
<line x1="432" y1="380" x2="432" y2="387"/>
|
|
<line x1="484" y1="380" x2="484" y2="392"/>
|
|
<line x1="536" y1="380" x2="536" y2="387"/>
|
|
<line x1="588" y1="380" x2="588" y2="392"/>
|
|
<line x1="640" y1="380" x2="640" y2="387"/>
|
|
<line x1="692" y1="380" x2="692" y2="392"/>
|
|
<line x1="744" y1="380" x2="744" y2="387"/>
|
|
<line x1="796" y1="380" x2="796" y2="392"/>
|
|
<line x1="848" y1="380" x2="848" y2="387"/>
|
|
<line x1="900" y1="380" x2="900" y2="392"/>
|
|
<line x1="952" y1="380" x2="952" y2="387"/>
|
|
<line x1="1004" y1="380" x2="1004" y2="392"/>
|
|
<line x1="1056" y1="380" x2="1056" y2="387"/>
|
|
<line x1="1108" y1="380" x2="1108" y2="392"/>
|
|
</g>
|
|
|
|
<!-- Selection region -->
|
|
<rect x="460" y="380" width="220" height="72" rx="2" fill="url(#sel)"/>
|
|
<line x1="460" y1="380" x2="460" y2="452" stroke="#3c82dc" stroke-width="2" stroke-opacity="0.8"/>
|
|
<line x1="680" y1="380" x2="680" y2="452" stroke="#3c82dc" stroke-width="2" stroke-opacity="0.8"/>
|
|
|
|
<!-- Playhead -->
|
|
<line x1="460" y1="372" x2="460" y2="456" stroke="#ffd230" stroke-width="2.5"/>
|
|
<polygon points="452,372 468,372 460,384" fill="#ffd230"/>
|
|
|
|
<!-- Duration label -->
|
|
<text x="570" y="422" font-family="'Courier New', monospace" font-size="18" fill="#aad4ff" text-anchor="middle" opacity="0.8">8.0s</text>
|
|
|
|
<!-- Export markers -->
|
|
<g>
|
|
<line x1="260" y1="380" x2="260" y2="452" stroke="#dc3c3c" stroke-width="2"/>
|
|
<rect x="260" y="383" width="18" height="15" rx="2" fill="#c83232"/>
|
|
<text x="269" y="395" font-family="sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">1</text>
|
|
</g>
|
|
<g>
|
|
<line x1="700" y1="380" x2="700" y2="452" stroke="#dc3c3c" stroke-width="2"/>
|
|
<rect x="700" y="383" width="18" height="15" rx="2" fill="#c83232"/>
|
|
<text x="709" y="395" font-family="sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">2</text>
|
|
</g>
|
|
<g>
|
|
<line x1="940" y1="380" x2="940" y2="452" stroke="#dc3c3c" stroke-width="2"/>
|
|
<rect x="940" y="383" width="18" height="15" rx="2" fill="#c83232"/>
|
|
<text x="949" y="395" font-family="sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">3</text>
|
|
</g>
|
|
|
|
<!-- Scissors icon -->
|
|
<g transform="translate(554, 356) scale(0.9)" 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>
|
|
|
|
<!-- Time labels below timeline -->
|
|
<text x="120" y="476" font-family="'Courier New', monospace" font-size="13" fill="#555">0:00</text>
|
|
<text x="448" y="476" font-family="'Courier New', monospace" font-size="13" fill="#e6a800">2:30</text>
|
|
<text x="1110" y="476" font-family="'Courier New', monospace" font-size="13" fill="#555">8:20</text>
|
|
|
|
<!-- ===== Feature pills ===== -->
|
|
<g font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="15">
|
|
<!-- Pill backgrounds -->
|
|
<rect x="260" y="520" width="120" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
|
|
<rect x="400" y="520" width="130" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
|
|
<rect x="550" y="520" width="120" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
|
|
<rect x="690" y="520" width="140" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
|
|
<rect x="850" y="520" width="130" height="30" rx="15" fill="#222" stroke="#444" stroke-width="1"/>
|
|
|
|
<!-- Pill text -->
|
|
<text x="320" y="540" fill="#aaa" text-anchor="middle">Batch export</text>
|
|
<text x="465" y="540" fill="#aaa" text-anchor="middle">Portrait crop</text>
|
|
<text x="610" y="540" fill="#aaa" text-anchor="middle">Annotation</text>
|
|
<text x="760" y="540" fill="#aaa" text-anchor="middle">Fuzzy matching</text>
|
|
<text x="915" y="540" fill="#aaa" text-anchor="middle">WebP + WAV</text>
|
|
</g>
|
|
|
|
<!-- Bottom border accent -->
|
|
<rect x="0" y="636" width="1280" height="4" fill="#ffd230" opacity="0.3"/>
|
|
</svg>
|