2.4 KiB
Here is the refined specification for Version 0.1.0. This document is ready to be handed to a developer.
Specification v0.1.0: Static Client-Side QR Code Generator
1. Project Overview Build a lightweight, single-page web utility that generates QR codes for URLs entirely within the user's browser. The priority for this version is speed, simplicity, and establishing a robust "no-backend" architecture.
2. Technical Constraints
- Architecture: Static HTML/CSS/JS. No server-side rendering.
- Backend: Strictly None. The page must function 100% offline once the initial assets are loaded.
- Dependencies: Use a single, lightweight, open-source JavaScript library for QR generation (e.g.,
qrcode.jsorqrcode-svg). No other external dependencies (no jQuery, no Lodash, etc.). - Frameworks: Forbidden. Use Semantic HTML5, CSS3, and Vanilla ES6+ JavaScript.
- Performance:
- Target Google Lighthouse Performance score of 95-100.
- No blocking scripts in the
<head>. - Total page weight (gzipped) target: < 50KB.
3. Functional Requirements
-
Input:
-
A single, clearly labeled text input field.
-
Placeholder text: "https://example.com".
-
Generation Logic:
-
Trigger: The QR code should generate immediately upon a valid entry.
-
Debouncing: Implement a slight delay (e.g., 300ms) while typing to prevent flashing/performance hits during rapid keystrokes.
-
Correction Level: Hardcode to 'High' (H) to ensure the code is scan-robust.
-
Output:
-
Render the QR code in the visual center of the page.
-
If the input is empty, show a placeholder state or a blank canvas to keep the layout stable.
-
Download:
-
A single button labeled "Download PNG".
-
Clicking it downloads the currently generated QR code image.
4. UI/UX Design
-
Aesthetic: Minimalist, "Subtle & Elegant."
-
Colors:
-
Background: Off-white / Soft Gray (e.g.,
#f4f4f4). -
Container: White card with subtle shadow.
-
QR Code: Standard Black on White.
-
Typography: System Font Stack (San Francisco, Segoe UI, Roboto) for instant rendering.
-
Layout:
-
Vertical stack: Title -> Input -> QR Display -> Download Button.
-
Responsive: The card must fit comfortably on mobile screens without horizontal scrolling.
5. Deliverables
index.htmlstyle.cssscript.jsREADME.md(Brief local setup instructions).