Build a QR Code Generator with AI

Build a single-page QR code generator as a static HTML/CSS/JS site. Include the QR code library from CDN: https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js (this handles the actual QR matrix generation and canvas rendering). Dark background (#0a0a0f), two-column layout on desktop: left column (420px) for inputs, right column for the live QR preview. LEFT COLUMN — Input Controls: DATA TYPE SELECTOR — four tab-style buttons in a row: 1. "URL" (default active, blue) — shows a single URL input (placeholder "https://example.com") 2. "Text" — shows a multi-line textarea (placeholder "Enter any text...", max 300 chars with counter) 3. "WiFi" — shows three inputs: Network Name (SSID), Password, and Security Type dropdown (WPA/WPA2, WEP, None). Generates the WiFi QR string format: WIFI:T:{type};S:{ssid};P:{password};; 4. "vCard" — shows fields for: Full Name, Phone, Email, Company, Job Title, Website, Address. Generates a vCard 3.0 format string: BEGIN:VCARD\nVERSION:3.0\nFN:{name}\nTEL:{phone}\nEMAIL:{email}\nORG:{company}\nTITLE:{title}\nURL:{website}\nADR:{address}\nEND:VCARD Below the data type section, a horizontal divider (#2a2a3a). CUSTOMIZATION SECTION: "Foreground Color" — color picker input (default #000000) with a text hex input beside it showing the current value. Include 6 preset swatches below: black, navy (#1e3a5f), dark green (#166534), dark red (#991b1b), purple (#581c87), charcoal (#374151). "Background Color" — color picker (default #ffffff) with hex input. Presets: white, light gray (#f3f4f6), cream (#fef3c7), light blue (#dbeafe), light pink (#fce7f3), transparent (show a checkerboard pattern to indicate transparency). "Size" — a range slider from 128px to 512px (default 256px) with the current value displayed as "{N}px" to the right. The QR preview updates in real-time as the slider moves. "Error Correction" — four radio buttons in a row with labels: - L (Low, 7%) — default - M (Medium, 15%) - Q (Quartile, 25%) - H (High, 30%) — recommended when using a center logo Include a small info text: "Higher correction = scannable even with logo overlay or damage" "Center Logo" — a dashed-border drop zone (120x60px) that says "Paste image URL". Input field for an image URL. When a URL is entered, render a preview thumbnail and overlay the image centered on the QR code at 20% of the QR size. The logo should have a white padding box around it (4px). Only available when error correction is Q or H (show a note: "Set error correction to Q or H for logo support"). When error correction is L or M and a logo is set, show a yellow warning: "Logo may make QR unreadable at this correction level." RIGHT COLUMN — QR Preview: A centered #12121a card (padding 32px) containing: - The QR code rendered in a div using the qrcode.js library. The QR should update in real-time as any input changes (debounced at 300ms to avoid excessive re-rendering). - If a center logo URL is provided, overlay the logo image on the canvas using JavaScript: after qrcode.js renders, get the canvas context, draw the logo image centered with white padding background. - Below the QR code, show the encoded data truncated to 50 chars with "..." if longer. - Show a "Data Size: X bytes" indicator and warn if approaching the QR capacity limit for the selected error correction level. DOWNLOAD BUTTONS — a row of three buttons below the QR preview: 1. "Download PNG" (#3b82f6) — extracts the canvas as a PNG at the selected size and triggers download as "qr-code.png" 2. "Download SVG" (#22c55e) — generates an SVG representation of the QR matrix (iterate the QR module data and create rect elements for each dark module) and downloads as "qr-code.svg". The SVG should use the selected foreground/background colors. 3. "Copy to Clipboard" (#8b5cf6) — copies the QR canvas as an image to the clipboard using the Clipboard API's write method with a ClipboardItem containing the PNG blob. Show a green toast notification ("Downloaded!" or "Copied!") for 2 seconds after each action. BATCH MODE (collapsible section below, toggle header "Batch Generate"): - A textarea where users can paste multiple URLs (one per line, max 20) - A "Generate All" button that creates QR codes for each URL using the current customization settings - Display all QR codes in a grid (3 per row) with the URL truncated below each - "Download All as ZIP" button — use JSZip from CDN (https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js) to bundle all PNGs into a zip file Save all settings (colors, size, error correction, last data type and input) to localStorage. Restore on page load. On mobile (under 768px), stack the input column above the QR preview vertically. Make the QR preview full width with 16px padding. The batch grid becomes 2 per row. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].