69 lines
2.8 KiB
Markdown
69 lines
2.8 KiB
Markdown
### Specification v0.2.1: Multi-Format Static QR Generator
|
|
|
|
**1. Project Overview**
|
|
Build a fast, offline-capable single-page application that generates QR codes. The application must feature a high-contrast, utilitarian interface that prioritizes raw functionality and visual hierarchy over modern softness.
|
|
|
|
**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:**
|
|
1. **URL / Text (Default):** Single Textarea.
|
|
2. **WiFi:** Inputs for SSID, Password, Encryption. Formats to `WIFI:S:...`.
|
|
3. **Email:** Inputs for To, Subject, Body. Formats to `mailto:...`.
|
|
|
|
|
|
* **Generation Logic:** Auto-update with debouncing. High (H) error correction.
|
|
* **Output:** PNG Download.
|
|
|
|
**4. UI/UX & Layout Design**
|
|
|
|
* **Desktop Layout (The "Broadsheet" View):**
|
|
* **Split Pane:** Fixed-width sidebar (Left) for controls; Fluid container (Right) for output.
|
|
* **Visual Texture:** The Right Pane should feature a subtle "engineering paper" dot-grid background to distinguish the workspace from the controls.
|
|
* **Sticky Preview:** The QR code container must remain fixed in view while scrolling through long input forms.
|
|
|
|
|
|
* **Mobile Layout:** Stacked vertically. Top border acts as a "Masthead."
|
|
* **Interaction Design:**
|
|
* **Anti-Flicker:** The QR container preserves its dimensions to prevent layout shifts.
|
|
* **Feedback:** No soft transitions. State changes (like button hovers) should be sharp and instantaneous or high-contrast (e.g., inverting colors).
|
|
|
|
|
|
|
|
**5. Styling Guidelines (The "Brutalist" Update)**
|
|
|
|
* **Design Philosophy:** "Editorial Brutalism" / "1990s Industrial."
|
|
* *Reference:* New York Times structure meets NeXTSTEP utility.
|
|
* *Core Rule:* **No rounded corners (`border-radius: 0`).**
|
|
|
|
|
|
* **Color Palette:**
|
|
* **Strict Monochrome:** Pure Black (`#000`) and White (`#fff`).
|
|
* **Contrast:** High contrast borders (1px solid black) define all containment areas.
|
|
|
|
|
|
* **Typography (The "Data vs. UI" Split):**
|
|
* **Interface/Labels:** Serif (Georgia, Times New Roman). Represents the "System" or "Authority."
|
|
* **User Inputs:** Monospace (Courier, Lucida Console). Represents "Raw Data."
|
|
|
|
|
|
* **Visual Elements:**
|
|
* **Hard Shadows:** Elements meant to "pop" (like the QR container) use hard, solid-color block shadows (e.g., `10px 10px 0px #000`) rather than soft blurs.
|
|
* **Borders:** All inputs and buttons have visible, consistent 1px solid borders.
|
|
* **Buttons:** Uppercase, Monospace, solid black background. Inverts to white background/black text on hover.
|
|
|
|
|
|
|
|
**6. Deliverables**
|
|
|
|
* `index.html` (Semantic markup).
|
|
* `style.css` (Strict Grid/Flexbox with brutalist variables).
|
|
* `script.js` (Logic).
|
|
* `README.md`
|