Hugging Face's logo

Spaces:
AmitJ82
/
QR-Generator-and-Reader
Running

App Files Community
AmitJ82 commited on
Commit
77933d3
·
verified ·
1 Parent(s): e84ef02

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +320 -19
index.html CHANGED
@@ -1,19 +1,320 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum QR Studio - QR Code Generator & Scanner</title>
7
+
8
+ <!-- Tailwind CSS CDN -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Font Awesome CDN -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
+
14
+ <!-- Google Fonts (Poppins & Fira Code) -->
15
+ <link rel="preconnect" href="https://fonts.googleapis.com">
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet">
18
+
19
+ <!-- QR Code Styling Library -->
20
+ <script src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>
21
+ <!-- ZXing JS Scanner Library -->
22
+ <script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
23
+
24
+ <style>
25
+ body {
26
+ font-family: 'Poppins', sans-serif;
27
+ background-color: #0f172a; /* bg-slate-900 */
28
+ }
29
+ .mono { font-family: 'Fira Code', monospace; }
30
+
31
+ ::-webkit-scrollbar { width: 8px; }
32
+ ::-webkit-scrollbar-track { background: #1e293b; }
33
+ ::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
34
+ ::-webkit-scrollbar-thumb:hover { background: #64748b; }
35
+
36
+ .tab-btn.active {
37
+ background-color: #0ea5e9; /* bg-sky-500 */
38
+ color: white;
39
+ }
40
+ .fade-in { animation: fadeIn 0.5s ease-in-out; }
41
+ @keyframes fadeIn {
42
+ from { opacity: 0; transform: translateY(10px); }
43
+ to { opacity: 1; transform: translateY(0); }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="text-slate-200">
48
+
49
+ <div class="container mx-auto p-4 md:p-8 max-w-7xl">
50
+ <header class="text-center mb-8">
51
+ <h1 class="text-4xl md:text-5xl font-bold text-white">Quantum <span class="text-sky-400">QR</span> Studio</h1>
52
+ <p class="text-slate-400 mt-2">The ultimate client-side toolkit for QR Codes.</p>
53
+ </header>
54
+
55
+ <!-- Tabs Navigation -->
56
+ <div class="mb-6 bg-slate-800 p-2 rounded-xl flex justify-center gap-2 max-w-sm mx-auto">
57
+ <button class="tab-btn w-full py-2 px-4 rounded-lg font-semibold transition active" data-tab="generator">
58
+ <i class="fas fa-qrcode mr-2"></i>Generator
59
+ </button>
60
+ <button class="tab-btn w-full py-2 px-4 rounded-lg font-semibold transition" data-tab="scanner">
61
+ <i class="fas fa-camera mr-2"></i>Scanner
62
+ </button>
63
+ </div>
64
+
65
+ <main>
66
+ <!-- Generator Tab -->
67
+ <div id="generator-tab" class="tab-content fade-in">
68
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
69
+ <!-- Left Side: Controls -->
70
+ <div class="lg:col-span-2 bg-slate-800/70 p-6 rounded-2xl">
71
+ <!-- QR Type Selector -->
72
+ <div class="mb-4">
73
+ <label for="qr-type" class="block text-sm font-bold mb-2 text-sky-400">QR CODE TYPE</label>
74
+ <select id="qr-type" class="w-full p-3 bg-slate-700 rounded-lg border-2 border-slate-600 focus:border-sky-500 focus:outline-none">
75
+ <option value="url">URL</option>
76
+ <option value="text">Text</option>
77
+ <option value="wifi">Wi-Fi Network</option>
78
+ <option value="vcard">vCard (Contact)</option>
79
+ <option value="sms">SMS</option>
80
+ <option value="phone">Phone Number</option>
81
+ <option value="email">Email</option>
82
+ <option value="upi">UPI Payment</option>
83
+ </select>
84
+ </div>
85
+
86
+ <div id="form-container" class="space-y-4"></div>
87
+
88
+ <details class="mt-6 bg-slate-900/50 rounded-lg">
89
+ <summary class="p-3 cursor-pointer font-semibold text-white">Advanced Customization</summary>
90
+ <div class="p-4 border-t border-slate-700 grid sm:grid-cols-2 gap-4">
91
+ <!-- Manual Color Pickers -->
92
+ <input type="color" id="dot-color" value="#000000" title="Dot Color" class="w-full h-10 p-1 bg-slate-700 rounded-lg">
93
+ <input type="color" id="bg-color" value="#ffffff" title="Background Color" class="w-full h-10 p-1 bg-slate-700 rounded-lg">
94
+
95
+ <!-- Error Correction -->
96
+ <select id="error-correction" class="w-full p-2 bg-slate-700 rounded-lg border-2 border-slate-600">
97
+ <option value="L">Error Correction: Low</option>
98
+ <option value="M" selected>Error Correction: Medium</option>
99
+ <option value="Q">Error Correction: Quartile</option>
100
+ <option value="H">Error Correction: High</option>
101
+ </select>
102
+
103
+ <!-- Logo Upload -->
104
+ <div class="relative">
105
+ <input type="file" id="logo-upload" accept="image/png, image/jpeg" class="hidden">
106
+ <button onclick="document.getElementById('logo-upload').click()" class="w-full p-2 bg-slate-700 rounded-lg">Upload Logo</button>
107
+ </div>
108
+
109
+ <!-- ADDED: Randomize Colors Button -->
110
+ <button id="random-color-btn" class="sm:col-span-2 w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-2 px-4 rounded-lg transition-transform hover:scale-105">
111
+ <i class="fas fa-palette mr-2"></i>Randomize Colors
112
+ </button>
113
+ </div>
114
+ </details>
115
+ </div>
116
+
117
+ <!-- Right Side: QR Preview -->
118
+ <div class="bg-slate-800/70 p-6 rounded-2xl flex flex-col items-center justify-center">
119
+ <div id="qr-code-container" class="bg-slate-700 p-4 rounded-lg mb-4">
120
+ <div id="qr-code"></div>
121
+ </div>
122
+ <p class="text-slate-400 text-sm mb-4">QR code updates in real-time</p>
123
+ <div class="w-full space-y-3">
124
+ <!-- CHANGED: Only JPG download is available now -->
125
+ <button id="download-jpg" class="w-full bg-sky-500 hover:bg-sky-600 text-white font-bold py-3 rounded-lg text-lg">
126
+ <i class="fas fa-download mr-2"></i>Download JPG
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Scanner Tab -->
134
+ <div id="scanner-tab" class="tab-content hidden fade-in">
135
+ <div class="max-w-2xl mx-auto bg-slate-800/70 p-6 rounded-2xl text-center">
136
+ <video id="scanner-video" class="w-full rounded-lg mb-4 hidden aspect-video"></video>
137
+ <div id="permission-prompt" class="mb-4">
138
+ <p class="mb-4">Allow camera access to start scanning.</p>
139
+ <button id="start-scan-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-video mr-2"></i>Use Camera</button>
140
+ </div>
141
+ <p class="text-slate-400 my-4">OR</p>
142
+ <input type="file" id="scan-file-upload" class="hidden" accept="image/*">
143
+ <button onclick="document.getElementById('scan-file-upload').click()" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-upload mr-2"></i>Upload Image</button>
144
+ <div id="scan-result" class="mt-6 text-left bg-slate-900 p-4 rounded-lg hidden break-words"></div>
145
+ </div>
146
+ </div>
147
+ </main>
148
+ </div>
149
+
150
+ <!-- JavaScript Logic -->
151
+ <script>
152
+ document.addEventListener('DOMContentLoaded', () => {
153
+ const qrCodeEl = document.getElementById('qr-code');
154
+ const qrTypeSelect = document.getElementById('qr-type');
155
+ const formContainer = document.getElementById('form-container');
156
+
157
+ const qrCode = new QRCodeStyling({
158
+ width: 250,
159
+ height: 250,
160
+ data: 'https://github.com/AmitK-1234',
161
+ image: '',
162
+ dotsOptions: { color: '#000000', type: 'rounded' },
163
+ backgroundOptions: { color: '#ffffff' },
164
+ imageOptions: { crossOrigin: 'anonymous', margin: 5 },
165
+ cornersSquareOptions: { type: 'extra-rounded' },
166
+ cornersDotOptions: { type: 'dot' },
167
+ qrOptions: { errorCorrectionLevel: 'M' }
168
+ });
169
+ qrCode.append(qrCodeEl);
170
+
171
+ const tabButtons = document.querySelectorAll('.tab-btn');
172
+ const tabContents = document.querySelectorAll('.tab-content');
173
+ let activeStream = null;
174
+
175
+ tabButtons.forEach(button => {
176
+ button.addEventListener('click', () => {
177
+ tabButtons.forEach(btn => btn.classList.remove('active'));
178
+ button.classList.add('active');
179
+ if (activeStream) stopScan();
180
+ const tabId = button.dataset.tab;
181
+ tabContents.forEach(content => {
182
+ content.id === `${tabId}-tab` ? content.classList.remove('hidden') : content.classList.add('hidden');
183
+ });
184
+ });
185
+ });
186
+
187
+ const forms = {
188
+ url: `<input type="url" id="data" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="https://example.com">`,
189
+ text: `<textarea id="data" class="qr-input w-full p-3 bg-slate-700 rounded-lg" rows="4" placeholder="Enter any text"></textarea>`,
190
+ wifi: `<input type="text" id="wifi-ssid" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Network Name (SSID)"><input type="password" id="wifi-pass" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Password"><select id="wifi-enc" class="qr-input w-full p-3 bg-slate-700 rounded-lg"><option value="WPA">WPA/WPA2</option><option value="WEP">WEP</option><option value="nopass">No Password</option></select>`,
191
+ vcard: `<input type="text" id="vcard-name" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Full Name"><input type="tel" id="vcard-tel" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Phone Number"><input type="email" id="vcard-email" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Email Address">`,
192
+ sms: `<input type="tel" id="sms-tel" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Recipient Phone Number"><textarea id="sms-body" class="qr-input w-full p-3 bg-slate-700 rounded-lg" rows="3" placeholder="SMS Message"></textarea>`,
193
+ phone: `<input type="tel" id="data" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="+1234567890">`,
194
+ email: `<input type="email" id="email-addr" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Recipient Email"><input type="text" id="email-subj" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Subject">`,
195
+ upi: `<input type="text" id="upi-id" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="yourname@bank"><input type="text" id="upi-name" class="qr-input w-full p-3 bg-slate-700 rounded-lg" placeholder="Payee Name">`
196
+ };
197
+ const renderForm = (type) => { formContainer.innerHTML = forms[type]; updateQRCode(); };
198
+ const getQRData = () => {
199
+ let data = ' ';
200
+ try {
201
+ const type = qrTypeSelect.value;
202
+ switch(type) {
203
+ case 'url': case 'text': data = document.getElementById('data').value || ' '; break;
204
+ case 'phone': data = `tel:${document.getElementById('data').value || ''}`; break;
205
+ case 'wifi': data = `WIFI:T:${document.getElementById('wifi-enc').value};S:${document.getElementById('wifi-ssid').value};P:${document.getElementById('wifi-pass').value};;`; break;
206
+ case 'vcard': data = `BEGIN:VCARD\nVERSION:3.0\nN:${document.getElementById('vcard-name').value}\nTEL:${document.getElementById('vcard-tel').value}\nEMAIL:${document.getElementById('vcard-email').value}\nEND:VCARD`; break;
207
+ case 'sms': data = `SMSTO:${document.getElementById('sms-tel').value}:${document.getElementById('sms-body').value}`; break;
208
+ case 'email': data = `mailto:${document.getElementById('email-addr').value}?subject=${encodeURIComponent(document.getElementById('email-subj').value)}`; break;
209
+ case 'upi': data = `upi://pay?pa=${document.getElementById('upi-id').value}&pn=${encodeURIComponent(document.getElementById('upi-name').value)}&cu=INR`; break;
210
+ }
211
+ } catch (e) {}
212
+ return data;
213
+ };
214
+ const updateQRCode = () => qrCode.update({ data: getQRData() });
215
+ qrTypeSelect.addEventListener('change', () => renderForm(qrTypeSelect.value));
216
+ formContainer.addEventListener('input', updateQRCode);
217
+
218
+ const dotColorPicker = document.getElementById('dot-color');
219
+ const bgColorPicker = document.getElementById('bg-color');
220
+ dotColorPicker.addEventListener('input', (e) => qrCode.update({ dotsOptions: { color: e.target.value } }));
221
+ bgColorPicker.addEventListener('input', (e) => qrCode.update({ backgroundOptions: { color: e.target.value } }));
222
+ document.getElementById('error-correction').addEventListener('change', (e) => qrCode.update({ qrOptions: { errorCorrectionLevel: e.target.value } }));
223
+ document.getElementById('logo-upload').addEventListener('change', (e) => {
224
+ const file = e.target.files[0];
225
+ if (file) qrCode.update({ image: URL.createObjectURL(file) });
226
+ });
227
+ document.getElementById('download-jpg').addEventListener('click', () => qrCode.download({ name: 'quantum-qr', extension: 'jpeg' }));
228
+
229
+ // ADDED: Random Color Palettes and Logic
230
+ const colorPalettes = [
231
+ { dots: '#4a044e', background: '#fbeaff', cornersSquare: '#210023', cornersDot: '#701a75' },
232
+ { dots: '#006d77', background: '#edf6f9', cornersSquare: '#013a40', cornersDot: '#83c5be' },
233
+ { dots: '#d90429', background: '#ffffff', cornersSquare: '#2b2d42', cornersDot: '#ef233c' },
234
+ { dots: '#1d3557', background: '#f1faee', cornersSquare: '#1d3557', cornersDot: '#457b9d' },
235
+ { dots: '#6a040f', background: '#fff3b0', cornersSquare: '#370617', cornersDot: '#9d0208' },
236
+ { dots: '#3a5a40', background: '#ffffff', cornersSquare: '#1a2a1f', cornersDot: '#588157' },
237
+ ];
238
+ document.getElementById('random-color-btn').addEventListener('click', () => {
239
+ const palette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
240
+ dotColorPicker.value = palette.dots;
241
+ bgColorPicker.value = palette.background;
242
+ qrCode.update({
243
+ dotsOptions: { color: palette.dots },
244
+ backgroundOptions: { color: palette.background },
245
+ cornersSquareOptions: { color: palette.cornersSquare },
246
+ cornersDotOptions: { color: palette.cornersDot }
247
+ });
248
+ });
249
+
250
+ // --- QR Code Scanner Logic ---
251
+ const videoEl = document.getElementById('scanner-video');
252
+ const startScanBtn = document.getElementById('start-scan-btn');
253
+ const scanResultEl = document.getElementById('scan-result');
254
+ const permissionPromptEl = document.getElementById('permission-prompt');
255
+ const codeReader = new ZXing.BrowserMultiFormatReader();
256
+ const startScan = async () => {
257
+ try {
258
+ const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
259
+ activeStream = stream;
260
+ videoEl.srcObject = stream;
261
+ videoEl.classList.remove('hidden');
262
+ permissionPromptEl.classList.add('hidden');
263
+ scanResultEl.classList.add('hidden');
264
+ codeReader.decodeFromStream(stream, videoEl, (result, err) => {
265
+ if (result) {
266
+ displayScanResult(result.getText());
267
+ stopScan();
268
+ }
269
+ });
270
+ } catch (err) {
271
+ alert('Could not access camera. Please check permissions.');
272
+ }
273
+ };
274
+ const stopScan = () => {
275
+ if (activeStream) {
276
+ activeStream.getTracks().forEach(track => track.stop());
277
+ activeStream = null;
278
+ }
279
+ codeReader.reset();
280
+ videoEl.classList.add('hidden');
281
+ permissionPromptEl.classList.remove('hidden');
282
+ };
283
+ document.getElementById('scan-file-upload').addEventListener('change', (e) => {
284
+ const file = e.target.files[0];
285
+ if (!file) return;
286
+ const reader = new FileReader();
287
+ reader.onload = (event) => {
288
+ const img = new Image();
289
+ img.onload = () => {
290
+ codeReader.decodeFromImageElement(img)
291
+ .then(result => displayScanResult(result.getText()))
292
+ .catch(err => {
293
+ alert('Could not decode QR code from the uploaded image. Please try a clearer, standard QR code.');
294
+ });
295
+ };
296
+ img.src = event.target.result;
297
+ };
298
+ reader.readAsDataURL(file);
299
+ });
300
+ const displayScanResult = (text) => {
301
+ let content = '';
302
+ if (text.startsWith('http')) {
303
+ content = `<strong>URL:</strong> <a href="${text}" target="_blank" class="text-sky-400 hover:underline">${text}</a>`;
304
+ } else if (text.startsWith('WIFI:')) {
305
+ content = `<strong>Wi-Fi Network:</strong><br><span class="mono">${text}</span>`;
306
+ } else if (text.startsWith('mailto:')) {
307
+ content = `<strong>Email:</strong> <a href="${text}" class="text-sky-400 hover:underline">${text.substring(7)}</a>`;
308
+ } else {
309
+ content = `<strong>Text:</strong><br><p class="mono">${text}</p>`;
310
+ }
311
+ scanResultEl.innerHTML = content;
312
+ scanResultEl.classList.remove('hidden');
313
+ };
314
+ startScanBtn.addEventListener('click', startScan);
315
+
316
+ renderForm('url');
317
+ });
318
+ </script>
319
+ </body>
320
+ </html>