qrdamage/specs/geminini.md

Specification v0.2.0: Multi-Format Static QR Generator

1. Project Overview Build a fast, offline-capable single-page application that generates QR codes for various data types (URL, WiFi, Email). The application must feature a responsive split-pane layout and polished, non-jarring visual updates.

2. Technical Constraints

• Architecture: Static HTML/CSS/JS (Vanilla). No frameworks.
• Backend: None. Zero network requests after initial load.
• Performance: 95+ Lighthouse score.
• Page Title: QR Generator

3. Functional Requirements

• Input Modes:
• The interface must support different input forms based on the selected mode:

1. URL / Text (Default): Single Textarea.
2. WiFi: Inputs for "SSID" (Network Name), "Password", and "Encryption Type" (WPA/WEP/None). The JS must format this into the standard WiFi string format (e.g., WIFI:S:MyNetwork;T:WPA;P:mypassword;;).
3. Email: Inputs for "To", "Subject", and "Body".

• Generation Logic:

• Auto-Update: The QR code updates automatically as the user types (with debouncing).

• Error Correction: High (H).

• Download:

• Button text: "Download".

• Format: PNG.

4. UI/UX & Layout Design

• Grid Layout (The "Side-by-Side" Requirement):

• Desktop/Tablet: A two-column layout.

• Left Pane: Input controls (Mode selector + Input fields).

• Right Pane: The generated QR code + Download button.

• Vertical alignment: The QR code should remain sticky or centered vertically as the input form grows.

• Mobile: Automatically stack vertically (Inputs on top, QR on bottom) using CSS Media Queries.

• Visual Stability (The "Anti-Flicker" Requirement):

• Fixed Dimensions: The QR code container must have a reserved, fixed aspect ratio/size to prevent the rest of the page from "jumping" or reflowing when the QR code redraws.

• Subtle Transition:

• Use a CSS transition on the QR code container (specifically opacity or filter).

• When the code updates, it should not "flash" white. A standard approach is a very fast (e.g., 200ms) cross-fade or simply keeping the opacity at 1 and letting the canvas repaint instantly.

• Developer Note: Avoid destroying and recreating the DOM element if possible; update the canvas context or src attribute smoothly.

5. Styling Guidelines

• Aesthetic: Clean, professional, minimal.
• Colors: Neutral tones. The focus should be on the functionality.
• Typography: System fonts.

6. Deliverables

• index.html (Semantic markup with input forms for all 3 modes).
• style.css (Flexbox/Grid for layout + transitions).
• script.js (Logic for string formatting WiFi/Email and QR generation).
• README.md