Build a Business Card Designer with AI

Build a single-page business card designer as a static HTML/CSS/JS site. Dark background (#0a0a0f). The layout has a left sidebar (300px) for controls and a centered canvas area showing the card. The card canvas should be 700x400px on screen (representing a standard 3.5 x 2 inch business card at 200 DPI). It should have a white background by default, a subtle drop shadow, and sit centered in the main content area. Above the card, two toggle buttons: "Front" and "Back" — clicking switches between front and back card views. Each side maintains its own independent set of text elements and background. LEFT SIDEBAR CONTROLS, organized into collapsible sections: TEMPLATE SECTION: A horizontal scrolling row of 5 template thumbnails (100x57px each with a checkmark overlay on active): 1. "Minimal" — white background, name centered large, title small below, contact bottom-left 2. "Corporate" — navy (#1e293b) header band across top 40%, white name in band, details below 3. "Creative" — diagonal split (coral #f97316 top-left triangle, white bottom-right), name overlapping the split 4. "Elegant" — cream (#fdf6e3) background, serif font, thin gold (#d4a843) border inset 8px from edges 5. "Bold" — solid black background, large white name, accent color strip on left edge Clicking a template populates the card with pre-positioned text elements using that layout. User can then edit any element. TEXT ELEMENTS SECTION: A list of draggable text items currently on the card. Each shows the text content truncated to 20 chars and has an edit (pencil) and delete (X) icon. An "Add Text" button at the bottom opens a small modal: text content input, font-size slider (10px-48px), font-family dropdown (Inter, Playfair Display, Roboto Mono, Montserrat, Lora — loaded from Google Fonts CDN), color picker, bold/italic toggles, text-align (left/center/right). After adding, the text element appears on the card and can be dragged to reposition. On the card canvas, each text element is absolutely positioned. Clicking a text element on the card selects it (shows a blue dashed outline and resize handles at corners). Dragging moves it. Double-clicking opens an inline edit mode. The sidebar's text list highlights the selected element. COLORS SECTION: Background color picker for the current card side. A row of 8 preset color swatches (white, black, navy, cream, coral, forest green, slate, light gray). Also a "Gradient" toggle — when enabled, shows a second color picker and a direction dropdown (horizontal, vertical, diagonal) to create a CSS linear-gradient background. QR CODE SECTION: A toggle to enable/disable QR code on the card. When enabled, shows an input field for the QR data (URL, phone number, or plain text). The QR code renders on the card as a 80x80px element (using a canvas-based QR generator — include qrcode.js from CDN: https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js). The QR element is draggable just like text elements. Options for QR foreground color and whether to include a white padding border. EXPORT SECTION: Three buttons stacked vertically: - "Download PNG" — uses html2canvas (from CDN) to render the card at 2x resolution (1400x800px for 350 DPI quality) and triggers a download as business-card-front.png or business-card-back.png - "Download Both Sides" — downloads front and back as separate PNGs in sequence - "Print" — opens a print dialog with a print stylesheet that shows front and back cards on a single page with crop marks at the corners Save the entire card state (all text elements, positions, colors, QR data, selected template) to localStorage automatically on every change. On page load, restore the last saved state. Add a "New Card" button that confirms then clears the design. On mobile (under 768px), put the sidebar controls below the card preview in a tabbed interface (Templates | Text | Colors | QR | Export). Scale the card canvas to fit the screen width while maintaining the 3.5:2 aspect ratio. 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].