alex/qrdamage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
qrdamage/specs/geminini.md
Alexander Wainwright 09f3907a15 Make some big updates
2025-12-17 14:13:48 +10:00

2.8 KiB
Raw Permalink Blame History

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