| 1 |
<div style="max-width: 480px; font-size: 0.85rem;"> |
| 2 |
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;"> |
| 3 |
<span style="font-size: 0.75rem; opacity: 0.6; min-width: 50px;">0:00</span> |
| 4 |
<div style="flex: 1; position: relative; height: 32px;"> |
| 5 |
<div style="position: absolute; left: 0; top: 8px; width: 100%; height: 16px; background: var(--border); opacity: 0.3;"></div> |
| 6 |
<div style="position: absolute; left: 0; top: 4px; width: 48px; height: 24px; background: var(--primary-dark); color: var(--primary-light); font-size: 0.7rem; display: flex; align-items: center; justify-content: center;">Pre-roll</div> |
| 7 |
<div style="position: absolute; left: 45%; top: 4px; width: 48px; height: 24px; background: var(--primary-dark); color: var(--primary-light); font-size: 0.7rem; display: flex; align-items: center; justify-content: center;">Mid-roll</div> |
| 8 |
<div style="position: absolute; right: 0; top: 4px; width: 52px; height: 24px; background: var(--primary-dark); color: var(--primary-light); font-size: 0.7rem; display: flex; align-items: center; justify-content: center;">Post-roll</div> |
| 9 |
</div> |
| 10 |
<span style="font-size: 0.75rem; opacity: 0.6; min-width: 50px; text-align: right;">4:32</span> |
| 11 |
</div> |
| 12 |
<div style="display: flex; gap: 0.5rem; margin-left: 58px; font-size: 0.75rem; opacity: 0.6;"> |
| 13 |
<span>Intro jingle</span> |
| 14 |
<span style="margin-left: auto;">at 1:58</span> |
| 15 |
<span style="margin-left: 2rem;">Outro CTA</span> |
| 16 |
</div> |
| 17 |
</div> |
| 18 |
|