Skip to content

Commit e98419d

Browse files
AirstarsAsiaAirstarsAsia
committed
Add Wi-Fi QR code generator at /qr
- Standalone QR generator for Wi-Fi networks - Support for WPA3/WPA2, WPA, WEP, and open networks - FreshPass branding and color scheme - Download functionality for generated QR codes - Clean, responsive design matching site style
1 parent a94e0c6 commit e98419d

4 files changed

Lines changed: 524 additions & 13 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,12 @@ npm run build
3737
npm start
3838
```
3939

40-
Open [http://localhost:3000](http://localhost:3000) to view the site.
4140

4241
## Tech Stack
4342

44-
- Next.js 13
45-
- React 18
46-
- Tailwind CSS
47-
- Framer Motion
48-
- Lenis (smooth scrolling)
49-
- TypeScript# Deployed to new server
50-
# Clean server deployment
43+
- Next.js 13 (React framework)
44+
- React 18 (JavaScript library)
45+
- TypeScript (for type safety)
46+
- Tailwind CSS (for styling)
47+
- Framer Motion (for animations)
48+
- Lenis (for smooth scrolling)

‎app/qr/page.tsx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
'use client'
2+
3+
import { useState } from 'react'
4+
import QRCode from 'qrcode'
5+
6+
export default function WiFiQRGenerator() {
7+
const [ssid, setSsid] = useState('')
8+
const [password, setPassword] = useState('')
9+
const [displayName, setDisplayName] = useState('')
10+
const [encryption, setEncryption] = useState('WPA')
11+
const [qrCodeUrl, setQrCodeUrl] = useState('')
12+
13+
const encryptionTypes = [
14+
{ value: 'WPA', label: 'WPA3/WPA2' },
15+
{ value: 'WPA2', label: 'WPA2' },
16+
{ value: 'WPA', label: 'WPA' },
17+
{ value: 'WEP', label: 'WEP' },
18+
{ value: 'nopass', label: 'Open (No Password)' }
19+
]
20+
21+
const generateQR = async () => {
22+
if (!ssid) return
23+
24+
const wifiString = `WIFI:T:${encryption};S:${ssid};P:${password};H:false;;`
25+
26+
try {
27+
const url = await QRCode.toDataURL(wifiString, {
28+
width: 300,
29+
margin: 2,
30+
color: {
31+
dark: '#2E3331',
32+
light: '#EDF0E9'
33+
}
34+
})
35+
setQrCodeUrl(url)
36+
} catch (error) {
37+
console.error('Error generating QR code:', error)
38+
}
39+
}
40+
41+
const downloadQR = () => {
42+
if (!qrCodeUrl) return
43+
44+
const link = document.createElement('a')
45+
link.download = `wifi-${displayName || ssid}-qr.png`
46+
link.href = qrCodeUrl
47+
link.click()
48+
}
49+
50+
return (
51+
<div className="min-h-screen bg-cream">
52+
<div className="container mx-auto px-6 py-12">
53+
<div className="max-w-2xl mx-auto">
54+
{/* Header */}
55+
<div className="text-center mb-12">
56+
<img
57+
src="/Icon-Dark.svg"
58+
alt="FreshPass Logo"
59+
className="w-16 h-16 mx-auto mb-4"
60+
/>
61+
<h1 className="text-4xl md:text-5xl font-bold text-dark-gray mb-4 font-display">
62+
Wi-Fi QR Generator
63+
</h1>
64+
<p className="text-lg text-gray-green font-text">
65+
Generate QR codes for easy Wi-Fi sharing
66+
</p>
67+
</div>
68+
69+
{/* Form */}
70+
<div className="bg-white rounded-2xl p-8 shadow-lg mb-8">
71+
<div className="space-y-6">
72+
<div>
73+
<label className="block text-dark-gray font-medium mb-2 font-text">
74+
Network Name (SSID) *
75+
</label>
76+
<input
77+
type="text"
78+
value={ssid}
79+
onChange={(e) => setSsid(e.target.value)}
80+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-freshpass-green focus:border-transparent font-text"
81+
placeholder="Enter Wi-Fi network name"
82+
/>
83+
</div>
84+
85+
<div>
86+
<label className="block text-dark-gray font-medium mb-2 font-text">
87+
Password
88+
</label>
89+
<input
90+
type="password"
91+
value={password}
92+
onChange={(e) => setPassword(e.target.value)}
93+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-freshpass-green focus:border-transparent font-text"
94+
placeholder="Enter Wi-Fi password"
95+
/>
96+
</div>
97+
98+
<div>
99+
<label className="block text-dark-gray font-medium mb-2 font-text">
100+
Display Name (Optional)
101+
</label>
102+
<input
103+
type="text"
104+
value={displayName}
105+
onChange={(e) => setDisplayName(e.target.value)}
106+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-freshpass-green focus:border-transparent font-text"
107+
placeholder="Name for QR code file"
108+
/>
109+
</div>
110+
111+
<div>
112+
<label className="block text-dark-gray font-medium mb-2 font-text">
113+
Encryption Type
114+
</label>
115+
<select
116+
value={encryption}
117+
onChange={(e) => setEncryption(e.target.value)}
118+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-freshpass-green focus:border-transparent font-text"
119+
>
120+
{encryptionTypes.map((type) => (
121+
<option key={type.value} value={type.value}>
122+
{type.label}
123+
</option>
124+
))}
125+
</select>
126+
</div>
127+
128+
<button
129+
onClick={generateQR}
130+
disabled={!ssid}
131+
className="w-full bg-freshpass-green text-dark-gray py-3 px-6 rounded-lg font-medium hover:bg-freshpass-green-70 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-text"
132+
>
133+
Generate QR Code
134+
</button>
135+
</div>
136+
</div>
137+
138+
{/* QR Code Display */}
139+
{qrCodeUrl && (
140+
<div className="bg-white rounded-2xl p-8 shadow-lg text-center">
141+
<h3 className="text-xl font-bold text-dark-gray mb-4 font-display">
142+
Your Wi-Fi QR Code
143+
</h3>
144+
<div className="mb-6">
145+
<img
146+
src={qrCodeUrl}
147+
alt="Wi-Fi QR Code"
148+
className="mx-auto border-2 border-gray-200 rounded-lg"
149+
/>
150+
</div>
151+
<p className="text-gray-green mb-4 font-text">
152+
{displayName || ssid}
153+
</p>
154+
<button
155+
onClick={downloadQR}
156+
className="bg-dark-gray text-white py-2 px-6 rounded-lg font-medium hover:bg-gray-green transition-colors font-text"
157+
>
158+
Download QR Code
159+
</button>
160+
</div>
161+
)}
162+
</div>
163+
</div>
164+
</div>
165+
)
166+
}

0 commit comments

Comments
 (0)