Gingham Generator

I have the template content from earlier in this conversation, so I'll build directly from that. This tool needs:

• Color number picker — how many stripe colors (2–8ish)
• Color hex pickers — one swatch per active color, dynamically generated
• Size picker — canvas W×H (equal, per your earlier spec)
• Export picker — PNG vs SVG

I'll render gingham live on a <canvas> for preview, then export as PNG (canvas → blob) or SVG (rebuild as vector rects) — both self-contained, no external libs.gingham-generator.html — matches your tools.eliana.lol house style (nav, theme toggle, monospace, --accent/--puny/--hover tokens, showStatus() for feedback instead of alert()).

What it has:

• Color number picker — dropdown, 2–8 colors
• Color hex pickers — one row per active color: a native <input type="color"> swatch synced live with an editable hex text field (invalid hex is rejected with a status error, not silently accepted)
• Size picker — single number input, kept square (W = H, per your original spec), min 100 / max 4000
• Export picker — dropdown for PNG or SVG, single download button
• Bonus: stripe-width control and a "randomize colors" button, since both felt natural for a generator like this

How it works: canvas renders live pixel-by-pixel (fast even at 800×800+) using each color's own self-crossing overlay plus auto-blended cross-color overlaps, matching the "5 stripes + 5 overlays" logic from before but now generalized to any count. PNG export uses canvas.toBlob(); SVG export rebuilds the same pattern as vector <rect>s so it stays fully editable/scalable outside the tool.

One thing to flag since it affects drop-in behavior: it references global.css, favicon.svg, and the nav links (index.html, extra.html, credits.html, changelog.html) exactly like your template — so it'll need to sit in the same directory as those on tools.eliana.lol to render correctly.