| 1 | --- |
| 2 | const accent = "var(--alc-accent-deep)"; |
| 3 | const ok = "var(--alc-success)"; |
| 4 | --- |
| 5 | |
| 6 | <svg viewBox="0 0 280 130" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid meet"> |
| 7 | <!-- editor pane --> |
| 8 | <g transform="translate(28 22)"> |
| 9 | <rect width="100" height="74" rx="8" fill="var(--alc-bg-code)" stroke="var(--alc-hairline-2)" stroke-width="1" /> |
| 10 | <circle cx="10" cy="9" r="2.4" fill="var(--alc-danger)" /> |
| 11 | <circle cx="18" cy="9" r="2.4" fill="var(--alc-warn)" /> |
| 12 | <circle cx="26" cy="9" r="2.4" fill="var(--alc-accent-bright)" /> |
| 13 | <line x1="10" y1="22" x2="80" y2="22" stroke={accent} stroke-width="2" stroke-linecap="round" /> |
| 14 | <line x1="10" y1="32" x2="60" y2="32" stroke="var(--alc-fg-3)" stroke-width="1.5" stroke-linecap="round" opacity="0.7" /> |
| 15 | <line x1="10" y1="42" x2="74" y2="42" stroke="var(--alc-fg-3)" stroke-width="1.5" stroke-linecap="round" opacity="0.55" /> |
| 16 | <line x1="10" y1="52" x2="50" y2="52" stroke={ok} stroke-width="2" stroke-linecap="round" /> |
| 17 | <line x1="10" y1="62" x2="68" y2="62" stroke="var(--alc-fg-3)" stroke-width="1.5" stroke-linecap="round" opacity="0.55" /> |
| 18 | </g> |
| 19 | |
| 20 | <!-- hot-reload curved arrow --> |
| 21 | <g stroke={accent} stroke-width="1.6" fill="none" stroke-linecap="round"> |
| 22 | <path d="M 138 60 C 154 40, 174 40, 188 60" /> |
| 23 | <path d="M 184 56 L 188 60 L 184 64" stroke-linejoin="round" /> |
| 24 | <path d="M 188 76 C 174 96, 154 96, 138 76" /> |
| 25 | <path d="M 142 80 L 138 76 L 142 72" stroke-linejoin="round" /> |
| 26 | </g> |
| 27 | <text x="163" y="70" text-anchor="middle" font-family="var(--alc-font-mono)" font-size="9" fill={accent} font-weight="700">42ms</text> |
| 28 | |
| 29 | <!-- test tube --> |
| 30 | <g transform="translate(208 22)"> |
| 31 | <rect width="44" height="74" rx="8" fill="var(--alc-bg-elev-1)" stroke="var(--alc-hairline-2)" stroke-width="1" /> |
| 32 | <!-- tube glyph --> |
| 33 | <path d="M22 18 L22 50 C22 56, 30 56, 30 50 L30 18 Z" fill="rgba(76, 137, 88, 0.15)" stroke={ok} stroke-width="1.4" stroke-linejoin="round" /> |
| 34 | <line x1="20" y1="18" x2="32" y2="18" stroke={ok} stroke-width="1.4" stroke-linecap="round" /> |
| 35 | <circle cx="26" cy="44" r="1.5" fill={ok} /> |
| 36 | <circle cx="24" cy="48" r="1" fill={ok} /> |
| 37 | <text x="22" y="68" text-anchor="middle" font-family="var(--alc-font-mono)" font-size="8" fill={ok} font-weight="700">PASS</text> |
| 38 | </g> |
| 39 | |
| 40 | <!-- caption --> |
| 41 | <text x="140" y="118" text-anchor="middle" font-family="var(--alc-font-hand)" font-size="13" fill={accent} font-style="italic"> |
| 42 | edit · save · tested |
| 43 | </text> |
| 44 | </svg> |