Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Scan - Barcode Ninja</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script> | |
| </head> | |
| <body class="bg-gray-900"> | |
| <div class="fixed inset-0 flex flex-col"> | |
| <!-- Scanner Viewport --> | |
| <div id="scanner" class="flex-1 relative overflow-hidden"> | |
| <video id="video" class="absolute inset-0 w-full h-full object-cover"></video> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="border-4 border-indigo-400 rounded-lg w-64 h-32"></div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="bg-gray-800 p-4 flex justify-between items-center"> | |
| <button id="cancelScan" class="text-white hover:text-indigo-300 transition"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| <p class="text-white">Scanning...</p> | |
| <button id="toggleTorch" class="text-white hover:text-indigo-300 transition"> | |
| <i data-feather="zap" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Scanner logic would go here | |
| document.getElementById('cancelScan').addEventListener('click', () => { | |
| // In a real app, we would stop the scanner and go back | |
| window.history.back(); | |
| }); | |
| // This is where we would initialize Quagga.js for barcode scanning | |
| // For demo purposes, we'll simulate finding a barcode after 2 seconds | |
| setTimeout(() => { | |
| const barcode = 'BC' + Math.floor(100000 + Math.random() * 900000); | |
| window.parent.postMessage({ type: 'barcodeScanned', barcode }, '*'); | |
| window.history.back(); | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> | |