📱 QuickQR

Create professional, customizable QR codes instantly — free, no signup required.

QuickQR is a lightweight, single-page QR code generator for text, URLs, and contact cards (vCard). Pick your colors, generate instantly, and download a high-resolution PNG — all in your browser.

---

✨ Features

• Two content modes
  • Text / URL — encode any link or plain text.
  • Contact Card (vCard) — encode a name, phone number, email, and organization as a scannable digital business card.
• Custom colors — pick your own foreground (QR code) and background colors with a live color picker.
• Instant live preview — see your QR code update in real time as you type or change colors.
• High-resolution export — download a crisp 512×512 PNG, independent of the on-screen preview size.
• Copy raw content — copy the underlying text/vCard data to your clipboard with one click.
• Smart filenames — downloaded contact-card QR codes are automatically named after the contact (e.g. abdul-wasay-khan-contact.png).
• Input validation — friendly inline errors if a field is empty before generating.
• Zero backend — everything runs client-side; nothing you enter is sent to a server.
• No install, no signup — just open the page.

🖥️ Preview

QuickQR presents a two-column layout: form controls (mode tabs, content fields, color pickers) on one side, and a live QR preview with download/copy actions on the other.

🚀 Getting Started

QuickQR is a single HTML file with one external script dependency loaded from a CDN (qr-code-styling) — no build step or package installation needed.

Option 1: Open directly

git clone https://github.com/wasay-khanzada/QuickQR.git
cd QuickQR
open index.html   # macOS
# or just double-click index.html on Windows/Linux

Option 2: Serve locally

npx serve .
# or
python3 -m http.server 8000

Then visit http://localhost:PORT.

Option 3: GitHub Pages

Enable GitHub Pages on the main branch (root) in the repository settings for a live, shareable link.

Note: An internet connection is required on first load to fetch the qr-code-styling library from the jsDelivr CDN.

📝 Usage

1. Choose a mode: Text / URL or Contact Card.
2. Fill in the relevant fields.
3. Optionally customize the QR code color and background color.
4. Click Generate QR Code.
5. Click Download PNG to save a high-resolution image, or use the copy icon to copy the raw content instead.

🛠️ Tech Stack

• HTML5 & CSS3 (no frameworks)
• Vanilla JavaScript (no build tools)
• qr-code-styling (via CDN) for QR rendering and styled export

📁 Project Structure

QuickQR/
└── index.html   # entire app: markup, styles, and logic

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for guidelines on how to get started.

📜 License

This project is licensed under the MIT License.

🙋 Author

Abdul Wasay Khan Portfolio · GitHub

---

If you find QuickQR useful, consider giving the repo a ⭐ — it helps others find it too.