QR WebApp Demo

Job ID: 39270694

Budget: $10 – $30 USD

We need a frontend developer to create a hardcoded HTML/CSS/JS prototype of a QR scanning flow based on the two attached mockups. This prototype will serve as a demonstration tool and be used later as the foundation for backend integration.

The Flow:

1. Page 1 – QR Scanner
- Opens the device camera using JavaScript
- When a QR code is scanned (hardcoded or generated), it redirects to:
lokation.html?id=2158AA

2. Page 2 – Location View
- Mimics the second mockup with:
- Image + left/right swipe (or fake arrows)
- Title: Lokale Holbæk
- ID: 2158AA
- Address: Hermandsminde 1158
- Type: Stue
- Green call button (tel:30845379)
- Black “Scan new QR” button that returns to scanner page
- Bottom: Two logos (DAB + Lejerbo)

Requirements:
- HTML/CSS/JS-only (no backend, just static for now)
- Mobile-optimized (iOS/Android – we test on iPhone 16 Pro Max)
- Clicking phone number must start a call (tel: link)
- "Scan new QR" should reopen the scanner page
- Use getUserMedia() for camera or a lightweight QR scanner library like:
- html5-qrcode (preferred)
- jsQR
- Prepare code structure for future backend integration
- Use clear component structure (HTML blocks, CSS classes)

Expectations:
- Code must be well-commented and modular
- Responsive layout (identical to mockups)
- Ready to host on our server and test via smartphone
- Delivery: one zipped folder with /scan.html and /lokation.html

Required Skills:
- Strong HTML, CSS (responsive design)
- JavaScript (camera access + QR integration)
- Experience with mobile-first design
- Understanding of scalable frontend structure (for future backend use)
- Bonus: Familiar with progressive web apps (PWA)

What you get:
- 2 reference mockups (attached)
- Link to host your test version on our domain
- Future opportunity to help build full frontend/backend system
Related categories: JavaScript Mobile App Development CSS HTML5 PhoneGap