Hugging Face's logo

Spaces:
Mohabedalgani
/
test
Running

App Files Community
Mohabedalgani commited on
Commit
85ae11a
·
verified ·
1 Parent(s): 3d5ea39

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +13 -572
index.html CHANGED
@@ -50,6 +50,18 @@
50
  margin: 0 auto;
51
  display: block;
52
  }
 
 
 
 
 
 
 
 
 
 
 
 
53
  </style>
54
  </head>
55
  <body class="bg-gray-50 min-h-screen">
@@ -82,576 +94,5 @@
82
  <div class="flex justify-center space-x-4">
83
  <button id="startScanBtn" class="bg-white text-teal-700 font-bold py-3 px-8 rounded-full hover:bg-teal-100 transition duration-300 shadow-lg animate-pulse-slow">
84
  <i class="fas fa-qrcode mr-2"></i> Start Scanning
85
- </button>
86
- <button id="startVoiceBtn" class="bg-teal-800 text-white font-bold py-3 px-8 rounded-full hover:bg-teal-900 transition duration-300 shadow-lg">
87
- <i class="fas fa-microphone mr-2"></i> Record Voice
88
- </button>
89
- </div>
90
- </div>
91
- </section>
92
-
93
- <!-- How It Works Section -->
94
- <section class="py-16 bg-white">
95
- <div class="container mx-auto px-4">
96
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2>
97
-
98
- <div class="grid md:grid-cols-3 gap-8">
99
- <!-- Step 1 -->
100
- <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
101
- <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
102
- <span class="text-teal-700 text-2xl font-bold">1</span>
103
- </div>
104
- <h3 class="text-xl font-semibold mb-3 text-center text-gray-800">Grant Camera Access</h3>
105
- <p class="text-gray-600">When prompted, allow MediScan to access your device's camera. We only use this to scan QR codes and don't store any images.</p>
106
- </div>
107
-
108
- <!-- Step 2 -->
109
- <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
110
- <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
111
- <span class="text-teal-700 text-2xl font-bold">2</span>
112
- </div>
113
- <h3 class="text-xl font-semibold mb-3 text-center text-gray-800">Scan the QR Code</h3>
114
- <p class="text-gray-600">Point your camera at the medical QR code. Hold steady until the code is recognized (usually within seconds).</p>
115
- </div>
116
-
117
- <!-- Step 3 -->
118
- <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
119
- <div class="bg-teal-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
120
- <span class="text-teal-700 text-2xl font-bold">3</span>
121
- </div>
122
- <h3 class="text-xl font-semibold mb-3 text-center text-gray-800">Get Instant Information</h3>
123
- <p class="text-gray-600">View the medical information securely. This could be patient records, medication details, or product information.</p>
124
- </div>
125
- </div>
126
- </div>
127
- </section>
128
-
129
- <!-- Voice Recording Section -->
130
- <section class="py-16 bg-gray-100">
131
- <div class="container mx-auto px-4">
132
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Voice to QR Code</h2>
133
-
134
- <div class="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto">
135
- <div class="text-center mb-8">
136
- <p class="text-gray-600 mb-6">Record your voice message and we'll convert it into a QR code that can be scanned to play back your recording.</p>
137
-
138
- <div class="flex justify-center space-x-4 mb-6">
139
- <button id="startRecordingBtn" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
140
- <i class="fas fa-microphone mr-2"></i> Start Recording
141
- </button>
142
- <button id="stopRecordingBtn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 hidden">
143
- <i class="fas fa-stop mr-2"></i> Stop Recording
144
- </button>
145
- </div>
146
-
147
- <div id="recordingStatus" class="text-gray-600 mb-6 hidden">
148
- <div class="flex items-center justify-center">
149
- <div class="w-3 h-3 bg-red-600 rounded-full mr-2 recording-animation"></div>
150
- <span>Recording in progress...</span>
151
- </div>
152
- </div>
153
-
154
- <audio id="audioPlayback" controls class="mx-auto mb-6 hidden"></audio>
155
-
156
- <div id="qrCodeContainer" class="hidden">
157
- <h3 class="text-xl font-semibold mb-4 text-gray-800">Your Voice QR Code</h3>
158
- <div id="voiceQRCode" class="mb-4"></div>
159
- <p class="text-gray-600 mb-4">Scan this QR code to play back your recorded message.</p>
160
- <button id="downloadQRBtn" class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded transition duration-300">
161
- <i class="fas fa-download mr-2"></i> Download QR Code
162
- </button>
163
- </div>
164
- </div>
165
- </div>
166
- </div>
167
- </section>
168
-
169
- <!-- Scanner Modal -->
170
- <div id="scannerModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
171
- <div class="w-full max-w-md">
172
- <div class="flex justify-between items-center mb-4">
173
- <h3 class="text-xl font-bold text-white">Scan Medical QR Code</h3>
174
- <button id="closeScannerBtn" class="text-white text-2xl">
175
- <i class="fas fa-times"></i>
176
- </button>
177
- </div>
178
-
179
- <div class="scanner-frame relative">
180
- <video id="scannerVideo" class="w-full h-auto rounded-lg" playsinline></video>
181
- <div class="scanner-overlay rounded-lg"></div>
182
- </div>
183
-
184
- <div class="mt-6 text-center text-white">
185
- <p class="mb-4">Point your camera at a medical QR code. Make sure it's well-lit and within the frame.</p>
186
- <div class="flex justify-center space-x-4">
187
- <button id="toggleTorchBtn" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-full">
188
- <i class="fas fa-lightbulb mr-2"></i> Torch
189
- </button>
190
- <button id="switchCameraBtn" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-full">
191
- <i class="fas fa-camera-retro mr-2"></i> Switch Camera
192
- </button>
193
- </div>
194
- </div>
195
- </div>
196
- </div>
197
-
198
- <!-- Camera Permission Guide -->
199
- <section class="py-16 bg-gray-100">
200
- <div class="container mx-auto px-4">
201
- <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
202
- <div class="md:flex">
203
- <div class="md:w-1/2 bg-teal-600 text-white p-8 flex items-center">
204
- <div>
205
- <h2 class="text-3xl font-bold mb-4">Camera Access Guide</h2>
206
- <p class="mb-6">We need camera access to scan QR codes, but we respect your privacy. Here's how to grant permission:</p>
207
- <div class="space-y-4">
208
- <div class="flex items-start space-x-3">
209
- <i class="fas fa-mobile-alt mt-1"></i>
210
- <div>
211
- <h4 class="font-semibold">On Mobile Devices</h4>
212
- <p class="text-sm">Tap "Allow" when the browser asks for camera permission.</p>
213
- </div>
214
- </div>
215
- <div class="flex items-start space-x-3">
216
- <i class="fas fa-lock mt-1"></i>
217
- <div>
218
- <h4 class="font-semibold">Privacy Assurance</h4>
219
- <p class="text-sm">We don't store or transmit any images from your camera.</p>
220
- </div>
221
- </div>
222
- </div>
223
- </div>
224
- </div>
225
- <div class="md:w-1/2 p-8">
226
- <h3 class="text-xl font-semibold mb-4 text-gray-800">Troubleshooting</h3>
227
- <div class="space-y-4">
228
- <div class="flex items-start space-x-3">
229
- <i class="fas fa-exclamation-triangle text-yellow-500 mt-1"></i>
230
- <div>
231
- <h4 class="font-semibold">Permission Denied?</h4>
232
- <p class="text-sm text-gray-600">Go to your browser settings and enable camera access for this site.</p>
233
- </div>
234
- </div>
235
- <div class="flex items-start space-x-3">
236
- <i class="fas fa-question-circle text-blue-500 mt-1"></i>
237
- <div>
238
- <h4 class="font-semibold">Can't Scan?</h4>
239
- <p class="text-sm text-gray-600">Ensure good lighting and hold the QR code steady in the frame.</p>
240
- </div>
241
- </div>
242
- <div class="flex items-start space-x-3">
243
- <i class="fas fa-camera text-purple-500 mt-1"></i>
244
- <div>
245
- <h4 class="font-semibold">No Camera?</h4>
246
- <p class="text-sm text-gray-600">You can upload an image containing the QR code instead.</p>
247
- </div>
248
- </div>
249
- </div>
250
- <button class="mt-6 w-full bg-teal-600 hover:bg-teal-700 text-white py-3 rounded-lg font-medium transition">
251
- <i class="fas fa-camera mr-2"></i> Try Scanning Again
252
- </button>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
- </section>
258
-
259
- <!-- Features Section -->
260
- <section class="py-16 bg-white">
261
- <div class="container mx-auto px-4">
262
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Use MediScan?</h2>
263
-
264
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
265
- <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
266
- <div class="text-teal-600 text-3xl mb-4">
267
- <i class="fas fa-bolt"></i>
268
- </div>
269
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Instant Access</h3>
270
- <p class="text-gray-600">Get immediate access to medical information without typing or searching.</p>
271
- </div>
272
-
273
- <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
274
- <div class="text-teal-600 text-3xl mb-4">
275
- <i class="fas fa-shield-alt"></i>
276
- </div>
277
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Secure</h3>
278
- <p class="text-gray-600">All data is encrypted and transmitted securely to protect patient privacy.</p>
279
- </div>
280
-
281
- <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
282
- <div class="text-teal-600 text-3xl mb-4">
283
- <i class="fas fa-mobile-alt"></i>
284
- </div>
285
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Mobile-Friendly</h3>
286
- <p class="text-gray-600">Optimized for all mobile devices with easy one-handed operation.</p>
287
- </div>
288
-
289
- <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
290
- <div class="text-teal-600 text-3xl mb-4">
291
- <i class="fas fa-history"></i>
292
- </div>
293
- <h3 class="text-xl font-semibold mb-3 text-gray-800">History</h3>
294
- <p class="text-gray-600">View your scan history for quick reference (optional and encrypted).</p>
295
- </div>
296
-
297
- <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
298
- <div class="text-teal-600 text-3xl mb-4">
299
- <i class="fas fa-language"></i>
300
- </div>
301
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Multi-Language</h3>
302
- <p class="text-gray-600">Supports multiple languages for international medical standards.</p>
303
- </div>
304
-
305
- <div class="bg-teal-50 p-6 rounded-xl border border-teal-100">
306
- <div class="text-teal-600 text-3xl mb-4">
307
- <i class="fas fa-bell"></i>
308
- </div>
309
- <h3 class="text-xl font-semibold mb-3 text-gray-800">Alerts</h3>
310
- <p class="text-gray-600">Get important alerts about medications or medical conditions.</p>
311
- </div>
312
- </div>
313
- </div>
314
- </section>
315
-
316
- <!-- Footer -->
317
- <footer class="bg-gray-800 text-white py-12">
318
- <div class="container mx-auto px-4">
319
- <div class="grid md:grid-cols-4 gap-8">
320
- <div>
321
- <h3 class="text-xl font-bold mb-4 flex items-center">
322
- <i class="fas fa-heartbeat mr-2"></i> MediScan
323
- </h3>
324
- <p class="text-gray-400">Providing instant access to medical information through secure QR code scanning technology.</p>
325
- </div>
326
- <div>
327
- <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
328
- <ul class="space-y-2">
329
- <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
330
- <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
331
- <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
332
- <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
333
- </ul>
334
- </div>
335
- <div>
336
- <h4 class="text-lg font-semibold mb-4">Legal</h4>
337
- <ul class="space-y-2">
338
- <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
339
- <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
340
- <li><a href="#" class="text-gray-400 hover:text-white transition">HIPAA Compliance</a></li>
341
- </ul>
342
- </div>
343
- <div>
344
- <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
345
- <ul class="space-y-2">
346
- <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> [email protected]</li>
347
- <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> (800) 555-HELP</li>
348
- <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Medical Way, Boston, MA</li>
349
- </ul>
350
- </div>
351
- </div>
352
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
353
- <p>&copy; 2023 MediScan. All rights reserved.</p>
354
- </div>
355
- </div>
356
- </footer>
357
-
358
- <!-- QR Code Detected Modal -->
359
- <div id="resultModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center p-4">
360
- <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
361
- <div class="flex justify-between items-center mb-4">
362
- <h3 class="text-xl font-bold text-gray-800">Scan Result</h3>
363
- <button id="closeResultBtn" class="text-gray-500 hover:text-gray-700 text-2xl">
364
- <i class="fas fa-times"></i>
365
- </button>
366
- </div>
367
- <div id="scanResultContent" class="mb-6">
368
- <!-- Dynamic content will be inserted here -->
369
- </div>
370
- <div class="flex justify-between">
371
- <button id="newScanBtn" class="bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded-lg font-medium transition">
372
- <i class="fas fa-qrcode mr-2"></i> Scan Another
373
- </button>
374
- <button id="saveResultBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium transition">
375
- <i class="fas fa-save mr-2"></i> Save
376
- </button>
377
- </div>
378
- </div>
379
- </div>
380
-
381
- <script>
382
- document.addEventListener('DOMContentLoaded', function() {
383
- // Elements
384
- const startScanBtn = document.getElementById('startScanBtn');
385
- const scannerModal = document.getElementById('scannerModal');
386
- const closeScannerBtn = document.getElementById('closeScannerBtn');
387
- const scannerVideo = document.getElementById('scannerVideo');
388
- const toggleTorchBtn = document.getElementById('toggleTorchBtn');
389
- const switchCameraBtn = document.getElementById('switchCameraBtn');
390
- const resultModal = document.getElementById('resultModal');
391
- const closeResultBtn = document.getElementById('closeResultBtn');
392
- const newScanBtn = document.getElementById('newScanBtn');
393
- const saveResultBtn = document.getElementById('saveResultBtn');
394
- const scanResultContent = document.getElementById('scanResultContent');
395
-
396
- // Voice recording elements
397
- const startVoiceBtn = document.getElementById('startVoiceBtn');
398
- const startRecordingBtn = document.getElementById('startRecordingBtn');
399
- const stopRecordingBtn = document.getElementById('stopRecordingBtn');
400
- const recordingStatus = document.getElementById('recordingStatus');
401
- const audioPlayback = document.getElementById('audioPlayback');
402
- const qrCodeContainer = document.getElementById('qrCodeContainer');
403
- const voiceQRCode = document.getElementById('voiceQRCode');
404
- const downloadQRBtn = document.getElementById('downloadQRBtn');
405
-
406
- // Variables
407
- let stream = null;
408
- let currentFacingMode = 'environment';
409
- let torchEnabled = false;
410
- let track = null;
411
-
412
- // Voice recording variables
413
- let mediaRecorder;
414
- let audioChunks = [];
415
- let audioBlob;
416
- let audioUrl;
417
-
418
- // Start scanning
419
- startScanBtn.addEventListener('click', async function() {
420
- scannerModal.classList.remove('hidden');
421
- document.body.style.overflow = 'hidden';
422
-
423
- try {
424
- stream = await navigator.mediaDevices.getUserMedia({
425
- video: {
426
- facingMode: currentFacingMode,
427
- width: { ideal: 1280 },
428
- height: { ideal: 720 }
429
- }
430
- });
431
-
432
- scannerVideo.srcObject = stream;
433
- track = stream.getVideoTracks()[0];
434
-
435
- // Check if torch is available
436
- if ('torch' in track.getCapabilities()) {
437
- toggleTorchBtn.classList.remove('hidden');
438
- }
439
-
440
- // Start QR code detection
441
- detectQRCode();
442
-
443
- } catch (error) {
444
- console.error('Error accessing camera:', error);
445
- alert('Could not access the camera. Please ensure you have granted camera permissions.');
446
- closeScanner();
447
- }
448
- });
449
-
450
- // Close scanner
451
- closeScannerBtn.addEventListener('click', closeScanner);
452
-
453
- function closeScanner() {
454
- if (stream) {
455
- stream.getTracks().forEach(track => track.stop());
456
- }
457
- scannerModal.classList.add('hidden');
458
- document.body.style.overflow = 'auto';
459
- }
460
-
461
- // Toggle torch
462
- toggleTorchBtn.addEventListener('click', function() {
463
- if (!track) return;
464
-
465
- try {
466
- torchEnabled = !torchEnabled;
467
- track.applyConstraints({
468
- advanced: [{torch: torchEnabled}]
469
- });
470
-
471
- toggleTorchBtn.innerHTML = torchEnabled
472
- ? '<i class="fas fa-lightbulb mr-2"></i> Torch On'
473
- : '<i class="fas fa-lightbulb mr-2"></i> Torch Off';
474
-
475
- } catch (error) {
476
- console.error('Error toggling torch:', error);
477
- }
478
- });
479
-
480
- // Switch camera
481
- switchCameraBtn.addEventListener('click', async function() {
482
- if (!stream) return;
483
-
484
- currentFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
485
-
486
- try {
487
- // Stop previous stream
488
- stream.getTracks().forEach(track => track.stop());
489
-
490
- // Get new stream
491
- stream = await navigator.mediaDevices.getUserMedia({
492
- video: {
493
- facingMode: currentFacingMode,
494
- width: { ideal: 1280 },
495
- height: { ideal: 720 }
496
- }
497
- });
498
-
499
- scannerVideo.srcObject = stream;
500
- track = stream.getVideoTracks()[0];
501
-
502
- // Reset torch
503
- torchEnabled = false;
504
- if ('torch' in track.getCapabilities()) {
505
- toggleTorchBtn.classList.remove('hidden');
506
- toggleTorchBtn.innerHTML = '<i class="fas fa-lightbulb mr-2"></i> Torch';
507
- } else {
508
- toggleTorchBtn.classList.add('hidden');
509
- }
510
-
511
- } catch (error) {
512
- console.error('Error switching camera:', error);
513
- }
514
- });
515
-
516
- // QR Code detection
517
- function detectQRCode() {
518
- // In a real implementation, you would use a QR code scanning library like jsQR
519
- // This is a simplified simulation for demonstration purposes
520
-
521
- // Simulate QR code detection after 3 seconds
522
- setTimeout(() => {
523
- // Only show result if scanner is still open
524
- if (!scannerModal.classList.contains('hidden')) {
525
- showResult({
526
- type: "Medical QR",
527
- data: "Patient: John Doe\nMedication: Ibuprofen 200mg\nDosage: 1 tablet every 6 hours\nExpires: 12/2024\nLot: IBU12345",
528
- timestamp: new Date().toLocaleString()
529
- });
530
- closeScanner();
531
- }
532
- }, 3000);
533
- }
534
-
535
- // Show scan result
536
- function showResult(data) {
537
- scanResultContent.innerHTML = `
538
- <div class="bg-teal-50 border-l-4 border-teal-600 p-4 mb-4">
539
- <h4 class="font-bold text-teal-800">${data.type}</h4>
540
- <p class="text-sm text-gray-600">Scanned at ${data.timestamp}</p>
541
- </div>
542
- <div class="bg-gray-100 p-4 rounded-lg">
543
- <pre class="text-sm whitespace-pre-wrap font-mono">${data.data}</pre>
544
- </div>
545
- `;
546
- resultModal.classList.remove('hidden');
547
- document.body.style.overflow = 'hidden';
548
- }
549
-
550
- // Close result modal
551
- closeResultBtn.addEventListener('click', function() {
552
- resultModal.classList.add('hidden');
553
- document.body.style.overflow = 'auto';
554
- });
555
-
556
- // New scan
557
- newScanBtn.addEventListener('click', function() {
558
- resultModal.classList.add('hidden');
559
- startScanBtn.click();
560
- });
561
-
562
- // Save result
563
- saveResultBtn.addEventListener('click', function() {
564
- alert('Scan result saved to your history.');
565
- resultModal.classList.add('hidden');
566
- document.body.style.overflow = 'auto';
567
- });
568
-
569
- // Voice recording functionality
570
- startVoiceBtn.addEventListener('click', function() {
571
- // Scroll to voice recording section
572
- document.querySelector('#voiceQRCode').scrollIntoView({
573
- behavior: 'smooth'
574
- });
575
- });
576
-
577
- startRecordingBtn.addEventListener('click', startRecording);
578
- stopRecordingBtn.addEventListener('click', stopRecording);
579
-
580
- async function startRecording() {
581
- try {
582
- const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
583
- mediaRecorder = new MediaRecorder(stream);
584
- audioChunks = [];
585
-
586
- mediaRecorder.ondataavailable = function(event) {
587
- if (event.data.size > 0) {
588
- audioChunks.push(event.data);
589
- }
590
- };
591
-
592
- mediaRecorder.onstop = function() {
593
- audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
594
- audioUrl = URL.createObjectURL(audioBlob);
595
- audioPlayback.src = audioUrl;
596
- audioPlayback.classList.remove('hidden');
597
-
598
- // Generate QR code with the audio URL
599
- generateQRCode(audioUrl);
600
- };
601
-
602
- mediaRecorder.start();
603
- startRecordingBtn.classList.add('hidden');
604
- stopRecordingBtn.classList.remove('hidden');
605
- recordingStatus.classList.remove('hidden');
606
-
607
- } catch (error) {
608
- console.error('Error accessing microphone:', error);
609
- alert('Could not access the microphone. Please ensure you have granted microphone permissions.');
610
- }
611
- }
612
-
613
- function stopRecording() {
614
- if (mediaRecorder && mediaRecorder.state !== 'inactive') {
615
- mediaRecorder.stop();
616
- mediaRecorder.stream.getTracks().forEach(track => track.stop());
617
-
618
- startRecordingBtn.classList.remove('hidden');
619
- stopRecordingBtn.classList.add('hidden');
620
- recordingStatus.classList.add('hidden');
621
- }
622
- }
623
-
624
- function generateQRCode(audioUrl) {
625
- // Clear previous QR code
626
- voiceQRCode.innerHTML = '';
627
-
628
- // Generate new QR code
629
- QRCode.toCanvas(voiceQRCode, audioUrl, {
630
- width: 200,
631
- margin: 2,
632
- color: {
633
- dark: '#0d9488', // teal-600
634
- light: '#ffffff'
635
- }
636
- }, function(error) {
637
- if (error) console.error(error);
638
- });
639
-
640
- // Show QR code container
641
- qrCodeContainer.classList.remove('hidden');
642
- }
643
-
644
- // Download QR code
645
- downloadQRBtn.addEventListener('click', function() {
646
- if (!voiceQRCode.firstChild) return;
647
-
648
- const canvas = voiceQRCode.querySelector('canvas');
649
- const link = document.createElement('a');
650
- link.download = 'voice-message-qr.png';
651
- link.href = canvas.toDataURL('image/png');
652
- link.click();
653
- });
654
- });
655
- </script>
656
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohabedalgani/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
657
  </html>
 
50
  margin: 0 auto;
51
  display: block;
52
  }
53
+ .progress-bar {
54
+ height: 6px;
55
+ background-color: #e5e7eb;
56
+ border-radius: 3px;
57
+ overflow: hidden;
58
+ }
59
+ .progress-bar-fill {
60
+ height: 100%;
61
+ background-color: #10b981;
62
+ width: 0%;
63
+ transition: width 0.1s linear;
64
+ }
65
  </style>
66
  </head>
67
  <body class="bg-gray-50 min-h-screen">
 
94
  <div class="flex justify-center space-x-4">
95
  <button id="startScanBtn" class="bg-white text-teal-700 font-bold py-3 px-8 rounded-full hover:bg-teal-100 transition duration-300 shadow-lg animate-pulse-slow">
96
  <i class="fas fa-qrcode mr-2"></i> Start Scanning
97
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </html>