diff --git a/php/process_ticket.php b/php/process_ticket.php index c3a3679..3d13968 100644 --- a/php/process_ticket.php +++ b/php/process_ticket.php @@ -44,7 +44,7 @@ $qrCodes = []; // Array to store QR code URLs for email attachment // Insert one ticket per row and generate QR codes for ($i = 0; $i < $quantity; $i++) { $ticket_id = bin2hex(random_bytes(16)); // Generate a 32-character unique ticket ID - $qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=" . urlencode($ticket_id); // Generate QR code link + $qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" . urlencode($ticket_id); // Generate QR code link $one_ticket_quantity = 1; // Each row represents one ticket $stmt->bind_param("ssssss", $ticket_id, $name, $email, $category, $one_ticket_quantity, $qrCodeUrl); if (!$stmt->execute()) { diff --git a/qr/qr.html b/qr/qr.html index 57f6b7d..d47ec6e 100644 --- a/qr/qr.html +++ b/qr/qr.html @@ -9,13 +9,14 @@ -
-

QR Scanner Page

+
+

QR Scanner

- + QR Icon - - diff --git a/qr/qrCodeScanner.js b/qr/qrCodeScanner.js index 76bb2dd..37ee6b3 100644 --- a/qr/qrCodeScanner.js +++ b/qr/qrCodeScanner.js @@ -2,15 +2,17 @@ const btnScanQR = document.getElementById('btn-scan-qr'); const qrCanvas = document.getElementById('qr-canvas'); const qrResult = document.getElementById('qr-result'); const outputData = document.getElementById('outputData'); +const video = document.getElementById('video'); btnScanQR.addEventListener('click', () => { + btnScanQR.hidden = true; // Hide the QR code icon + video.hidden = false; // Show the video element qrCanvas.hidden = false; qrResult.hidden = true; const context = qrCanvas.getContext('2d'); navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) .then((stream) => { - const video = document.createElement('video'); video.srcObject = stream; video.setAttribute('playsinline', true); // Required to work on iOS video.play(); @@ -26,6 +28,7 @@ btnScanQR.addEventListener('click', () => { outputData.innerText = qrCodeData; qrResult.hidden = false; qrCanvas.hidden = true; + video.hidden = true; // Hide the video element after scanning stream.getTracks().forEach(track => track.stop()); } catch (e) { requestAnimationFrame(scan); diff --git a/qr/styles.css b/qr/styles.css index c1ef19f..fd1223b 100644 --- a/qr/styles.css +++ b/qr/styles.css @@ -50,3 +50,13 @@ html { max-width: 700px; background-color: white; } + + #video { + display: block; + margin: 0 auto; + width: 100%; + max-width: 400px; + border: 2px solid white; + border-radius: 10px; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + }