alvin/Spik-en-span
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Spik-en-span.git synced 2026-03-06 11:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor code: remove unnecessary comments and clean up whitespace in various files

Browse Source
This commit is contained in:
vista-man
2025-04-10 22:53:25 +02:00
parent e46044682e
commit 4e0f6238b6
8 changed files with 62 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/script.js
View File

@@ -1,4 +1,3 @@
// Check if the ticket form exists before adding an event listener
const ticketForm = document.getElementById('ticketForm'); const ticketForm = document.getElementById('ticketForm');
if (ticketForm) { if (ticketForm) {
ticketForm.addEventListener('submit', function (e) { ticketForm.addEventListener('submit', function (e) {
@@ -25,7 +24,6 @@ if (ticketForm) {
}); });
} }
// Function to toggle video playback
function toggleVideo() { function toggleVideo() {
const video = document.getElementById('myVideo'); const video = document.getElementById('myVideo');
if (video) { if (video) {

10
php/get_ticket_details.php
View File

@@ -1,21 +1,18 @@
<?php <?php
header('Content-Type: application/json'); header('Content-Type: application/json');
// Database connection
$servername = "localhost"; $servername = "localhost";
$username = "database12"; // Updated username $username = "database12";
$password = "181t$1lJg"; // Updated password $password = "181t$1lJg";
$dbname = "spik_en_span"; $dbname = "spik_en_span";
$conn = new mysqli($servername, $username, $password, $dbname); $conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) { if ($conn->connect_error) {
echo json_encode(['success' => false, 'message' => 'Databaseverbinding mislukt.']); echo json_encode(['success' => false, 'message' => 'Databaseverbinding mislukt.']);
exit(); exit();
} }
// Retrieve ticket_id from the query string
$ticket_id = isset($_GET['ticket_id']) ? trim($_GET['ticket_id']) : ''; $ticket_id = isset($_GET['ticket_id']) ? trim($_GET['ticket_id']) : '';
if (empty($ticket_id)) { if (empty($ticket_id)) {
@@ -23,7 +20,6 @@ if (empty($ticket_id)) {
exit(); exit();
} }
// Query the database for ticket details
$sql = "SELECT ticket_id, category, day FROM tickets WHERE ticket_id = ?"; $sql = "SELECT ticket_id, category, day FROM tickets WHERE ticket_id = ?";
$stmt = $conn->prepare($sql); $stmt = $conn->prepare($sql);
$stmt->bind_param("s", $ticket_id); $stmt->bind_param("s", $ticket_id);
@@ -33,7 +29,6 @@ $result = $stmt->get_result();
if ($result->num_rows > 0) { if ($result->num_rows > 0) {
$ticket = $result->fetch_assoc(); $ticket = $result->fetch_assoc();
// Check if the ticket has already been scanned
$checkScannedSql = "SELECT id FROM scanned_tickets WHERE ticket_id = ?"; $checkScannedSql = "SELECT id FROM scanned_tickets WHERE ticket_id = ?";
$checkStmt = $conn->prepare($checkScannedSql); $checkStmt = $conn->prepare($checkScannedSql);
$checkStmt->bind_param("s", $ticket_id); $checkStmt->bind_param("s", $ticket_id);
@@ -43,7 +38,6 @@ if ($result->num_rows > 0) {
if ($checkResult->num_rows > 0) { if ($checkResult->num_rows > 0) {
echo json_encode(['success' => false, 'message' => 'Ticket al gescanned.']); echo json_encode(['success' => false, 'message' => 'Ticket al gescanned.']);
} else { } else {
// Insert the ticket into the scanned_tickets table
$insertScannedSql = "INSERT INTO scanned_tickets (ticket_id, is_valid) VALUES (?, ?)"; $insertScannedSql = "INSERT INTO scanned_tickets (ticket_id, is_valid) VALUES (?, ?)";
$insertStmt = $conn->prepare($insertScannedSql); $insertStmt = $conn->prepare($insertScannedSql);
$is_valid = true; $is_valid = true;

1
php/logout.php
View File

@@ -1,4 +1,3 @@
<!-- filepath: c:\xampp\htdocs\Spik-en-span\logout.php -->
<?php <?php
session_start(); session_start();
session_destroy(); session_destroy();

13
php/process_login.php
View File

@@ -1,23 +1,18 @@
<!-- filepath: c:\xampp\htdocs\Spik-en-span\process_login.php -->
<?php <?php
// Database connection
$servername = "localhost"; $servername = "localhost";
$username = "database12"; // Updated username $username = "database12";
$password = "181t$1lJg"; // Updated password $password = "181t$1lJg";
$dbname = "spik_en_span"; $dbname = "spik_en_span";
$conn = new mysqli($servername, $username, $password, $dbname); $conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) { if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error); die("Connection failed: " . $conn->connect_error);
} }
// Retrieve form data
$username = isset($_POST['username']) ? trim(htmlspecialchars($_POST['username'])) : ''; $username = isset($_POST['username']) ? trim(htmlspecialchars($_POST['username'])) : '';
$password = isset($_POST['password']) ? trim(htmlspecialchars($_POST['password'])) : ''; $password = isset($_POST['password']) ? trim(htmlspecialchars($_POST['password'])) : '';
// Validate credentials
$sql = "SELECT id, password_hash FROM employees WHERE username = ?"; $sql = "SELECT id, password_hash FROM employees WHERE username = ?";
$stmt = $conn->prepare($sql); $stmt = $conn->prepare($sql);
if ($stmt) { if ($stmt) {
@@ -32,13 +27,11 @@ if ($stmt) {
try { try {
if ($password_hash && password_verify($password, $password_hash)) { if ($password_hash && password_verify($password, $password_hash)) {
// Start session and store user ID
session_start(); session_start();
$_SESSION['user_id'] = $user_id; $_SESSION['user_id'] = $user_id;
header("Location: "); // Redirect to the QR scanner page header("Location: ");
exit(); exit();
} else { } else {
// Redirect back to login page with an error message
header("Location: ../employee-login.php?error=invalid_credentials"); header("Location: ../employee-login.php?error=invalid_credentials");
exit(); exit();
} }

80
php/process_ticket.php
View File

@@ -1,42 +1,35 @@
<!-- filepath: c:\xampp\htdocs\Spik-en-span\process_ticket.php -->
<?php <?php
// Enable error reporting
ini_set('display_errors', 1); ini_set('display_errors', 1);
ini_set('display_startup_errors', 1); ini_set('display_startup_errors', 1);
error_reporting(E_ALL); error_reporting(E_ALL);
// Database connection
$servername = "localhost"; $servername = "localhost";
$username = "database12"; // Updated username $username = "database12";
$password = "181t$1lJg"; // Updated password $password = "181t$1lJg";
$dbname = "spik_en_span"; $dbname = "spik_en_span";
$conn = new mysqli($servername, $username, $password, $dbname); $conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) { if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error); die("Connection failed: " . $conn->connect_error);
} }
// Retrieve form data
$name = $_POST['name']; $name = $_POST['name'];
$email = $_POST['email']; $email = $_POST['email'];
$category = $_POST['category']; // e.g., 'Volwassenen Vrijdag' or 'Kinderen Zaterdag' $category = $_POST['category'];
$quantity = (int)$_POST['quantity']; $quantity = (int)$_POST['quantity'];
// Extract day and category from the input list($categoryType, $day) = explode(' ', $category);
list($categoryType, $day) = explode(' ', $category); // Split into 'Volwassenen'/'Kinderen' and 'Vrijdag'/'Zaterdag'
$day = strtolower($day) === 'vrijdag' ? 'friday' : 'saturday'; $day = strtolower($day) === 'vrijdag' ? 'friday' : 'saturday';
$categoryType = strtolower($categoryType) === 'volwassenen' ? 'volwassen' : 'kind'; $categoryType = strtolower($categoryType) === 'volwassenen' ? 'volwassen' : 'kind';
require __DIR__ . '/../phpmailer/src/PHPMailer.php'; require __DIR__ . '/../phpmailer/src/PHPMailer.php';
require __DIR__ . '/../phpmailer/src/SMTP.php'; require __DIR__ . '/../phpmailer/src/SMTP.php';
require __DIR__ . '/../phpmailer/src/Exception.php'; require __DIR__ . '/../phpmailer/src/Exception.php';
require_once __DIR__ . '/../fpdf/fpdf.php'; // Ensure FPDF is included only once require_once __DIR__ . '/../fpdf/fpdf.php';
use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\PHPMailer;
// Prepare SQL statement
$sql = "INSERT INTO tickets (ticket_id, name, email, category, day, quantity, qr_code_link) VALUES (?, ?, ?, ?, ?, ?, ?)"; $sql = "INSERT INTO tickets (ticket_id, name, email, category, day, quantity, qr_code_link) VALUES (?, ?, ?, ?, ?, ?, ?)";
$stmt = $conn->prepare($sql); $stmt = $conn->prepare($sql);
@@ -44,13 +37,12 @@ if (!$stmt) {
die("Error preparing statement: " . $conn->error); die("Error preparing statement: " . $conn->error);
} }
$qrCodes = []; // Array to store QR code URLs for PDF attachment $qrCodes = [];
// Insert one ticket per row and generate QR codes
for ($i = 0; $i < $quantity; $i++) { for ($i = 0; $i < $quantity; $i++) {
$ticket_id = bin2hex(random_bytes(16)); // Generate a 32-character unique ticket ID $ticket_id = bin2hex(random_bytes(16));
$qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" . urlencode($ticket_id); // Generate QR code link $qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" . urlencode($ticket_id);
$one_ticket_quantity = 1; // Each row represents one ticket $one_ticket_quantity = 1;
$stmt->bind_param("sssssis", $ticket_id, $name, $email, $categoryType, $day, $one_ticket_quantity, $qrCodeUrl); $stmt->bind_param("sssssis", $ticket_id, $name, $email, $categoryType, $day, $one_ticket_quantity, $qrCodeUrl);
if (!$stmt->execute()) { if (!$stmt->execute()) {
echo "Error: " . $stmt->error; echo "Error: " . $stmt->error;
@@ -59,80 +51,71 @@ for ($i = 0; $i < $quantity; $i++) {
exit(); exit();
} }
$qrCodes[] = ['ticket_id' => $ticket_id, 'qr_code_url' => $qrCodeUrl]; // Store QR code details for PDF $qrCodes[] = ['ticket_id' => $ticket_id, 'qr_code_url' => $qrCodeUrl];
} }
$stmt->close(); $stmt->close();
$conn->close(); $conn->close();
// Generate individual PDFs for each QR code $pdfPaths = [];
$pdfPaths = []; // Array to store paths of generated PDFs
foreach ($qrCodes as $index => $qrCode) { foreach ($qrCodes as $index => $qrCode) {
$pdf = new FPDF(); $pdf = new FPDF();
$pdf->AddPage(); $pdf->AddPage();
// Add a header with a gradient-like effect $pdf->SetFillColor(40, 167, 69);
$pdf->SetFillColor(40, 167, 69); // Green background $pdf->SetTextColor(255, 255, 255);
$pdf->SetTextColor(255, 255, 255); // White text
$pdf->SetFont('Arial', 'B', 24); $pdf->SetFont('Arial', 'B', 24);
$pdf->Cell(0, 20, 'Spik & Span - Ticket Bevestiging', 0, 1, 'C', true); $pdf->Cell(0, 20, 'Spik & Span - Ticket Bevestiging', 0, 1, 'C', true);
$pdf->Ln(10); $pdf->Ln(10);
// Add a colored section for customer details $pdf->SetFillColor(230, 230, 250);
$pdf->SetFillColor(230, 230, 250); // Light lavender background $pdf->SetTextColor(0, 0, 0);
$pdf->SetTextColor(0, 0, 0); // Black text
$pdf->SetFont('Arial', '', 14); $pdf->SetFont('Arial', '', 14);
$pdf->Cell(0, 10, 'Naam: ' . $name, 0, 1, 'L', true); $pdf->Cell(0, 10, 'Naam: ' . $name, 0, 1, 'L', true);
$pdf->Cell(0, 10, 'E-mail: ' . $email, 0, 1, 'L', true); $pdf->Cell(0, 10, 'E-mail: ' . $email, 0, 1, 'L', true);
$pdf->Ln(10); $pdf->Ln(10);
// Add ticket details with a colored background $pdf->SetFillColor(240, 255, 240);
$pdf->SetFillColor(240, 255, 240); // Light green background $pdf->SetTextColor(0, 0, 0);
$pdf->SetTextColor(0, 0, 0); // Black text
$pdf->SetFont('Arial', '', 14); $pdf->SetFont('Arial', '', 14);
$pdf->Cell(0, 10, 'Ticket ' . ($index + 1) . ':', 0, 1, 'L', true); $pdf->Cell(0, 10, 'Ticket ' . ($index + 1) . ':', 0, 1, 'L', true);
$pdf->Cell(0, 10, 'Ticket ID: ' . $qrCode['ticket_id'], 0, 1, 'L', true); $pdf->Cell(0, 10, 'Ticket ID: ' . $qrCode['ticket_id'], 0, 1, 'L', true);
$pdf->Ln(5); $pdf->Ln(5);
// Add QR code image centered and larger
$qrCodeImage = file_get_contents($qrCode['qr_code_url']); $qrCodeImage = file_get_contents($qrCode['qr_code_url']);
$qrCodePath = __DIR__ . "/temp_qr_$index.png"; $qrCodePath = __DIR__ . "/temp_qr_$index.png";
file_put_contents($qrCodePath, $qrCodeImage); file_put_contents($qrCodePath, $qrCodeImage);
$pdf->Cell(0, 0, '', 0, 1, 'C'); // Move to the center $pdf->Cell(0, 0, '', 0, 1, 'C');
$pdf->Image($qrCodePath, ($pdf->GetPageWidth() - 80) / 2, $pdf->GetY(), 80, 80); // Larger QR code $pdf->Image($qrCodePath, ($pdf->GetPageWidth() - 80) / 2, $pdf->GetY(), 80, 80);
$pdf->Ln(90); $pdf->Ln(90);
// Clean up temporary QR code image
unlink($qrCodePath); unlink($qrCodePath);
// Add a footer on the same page $pdf->SetY(-50);
$pdf->SetY(-50); // Adjust Y position to ensure the footer fits on the same page $pdf->SetFillColor(40, 167, 69);
$pdf->SetFillColor(40, 167, 69); // Green background $pdf->SetTextColor(255, 255, 255);
$pdf->SetTextColor(255, 255, 255); // White text
$pdf->SetFont('Arial', 'I', 12); $pdf->SetFont('Arial', 'I', 12);
$pdf->Cell(0, 10, 'Bedankt voor uw bestelling bij Spik & Span!', 0, 1, 'C', true); $pdf->Cell(0, 10, 'Bedankt voor uw bestelling bij Spik & Span!', 0, 1, 'C', true);
$pdf->Cell(0, 10, 'Voor vragen kunt u contact opnemen via onze website.', 0, 1, 'C', true); $pdf->Cell(0, 10, 'Voor vragen kunt u contact opnemen via onze website.', 0, 1, 'C', true);
// Save PDF to a temporary file
$pdfPath = __DIR__ . "/ticket_$index.pdf"; $pdfPath = __DIR__ . "/ticket_$index.pdf";
$pdf->Output('F', $pdfPath); $pdf->Output('F', $pdfPath);
$pdfPaths[] = $pdfPath; // Store the path of the generated PDF $pdfPaths[] = $pdfPath;
} }
// Send confirmation email with all PDF attachments
$mail = new PHPMailer(true); $mail = new PHPMailer(true);
try { try {
$mail->isSMTP(); $mail->isSMTP();
$mail->Host = 'smtp.gmail.com'; // Gmail SMTP server $mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true; $mail->SMTPAuth = true;
$mail->Username = 'ticketsopdracht@gmail.com'; // Your Gmail address $mail->Username = 'ticketsopdracht@gmail.com';
$mail->Password = 'rqxm fbju xbmu qmbr'; // Your App Password from Google $mail->Password = 'rqxm fbju xbmu qmbr';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Use TLS encryption $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = 587; // TLS port $mail->Port = 587;
$mail->setFrom('ticketsopdracht@gmail.com', 'Spik & Span'); // Sender email and name $mail->setFrom('ticketsopdracht@gmail.com', 'Spik & Span');
$mail->addAddress($email, $name); // Recipient email and name $mail->addAddress($email, $name);
$mail->isHTML(true); $mail->isHTML(true);
$mail->Subject = 'Bevestiging van je bestelling'; $mail->Subject = 'Bevestiging van je bestelling';
@@ -144,19 +127,16 @@ try {
<p style="font-size: 16px; color: #333;">Met vriendelijke groet,<br><strong>Spik & Span</strong></p> <p style="font-size: 16px; color: #333;">Met vriendelijke groet,<br><strong>Spik & Span</strong></p>
</div>'; </div>';
// Attach each PDF to the email
foreach ($pdfPaths as $pdfPath) { foreach ($pdfPaths as $pdfPath) {
$mail->addAttachment($pdfPath); $mail->addAttachment($pdfPath);
} }
$mail->send(); $mail->send();
// Clean up temporary PDF files
foreach ($pdfPaths as $pdfPath) { foreach ($pdfPaths as $pdfPath) {
unlink($pdfPath); unlink($pdfPath);
} }
// Redirect to the order completion page
header("Location: ../order-complete.html"); header("Location: ../order-complete.html");
exit(); exit();
} catch (Exception $e) { } catch (Exception $e) {

4
qr/qr.html
View File

@@ -14,8 +14,8 @@
<a id="btn-scan-qr"> <a id="btn-scan-qr">
<img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg" alt="QR Icon"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg" alt="QR Icon">
</a> </a>
<video id="video" autoplay playsinline></video> <!-- Only one video element --> <video id="video" autoplay playsinline></video>
<canvas id="qr-canvas" hidden></canvas> <!-- Ensure canvas is hidden --> <canvas id="qr-canvas" hidden></canvas>
<div id="qr-result" hidden> <div id="qr-result" hidden>
<b>Data:</b> <span id="outputData"></span> <b>Data:</b> <span id="outputData"></span>
</div> </div>

42
qr/qrCodeScanner.js
View File

@@ -1,29 +1,29 @@
const btnScanQR = document.getElementById('btn-scan-qr'); const btnScanQR = document.getElementById('btn-scan-qr');
const qrCanvas = document.getElementById('qr-canvas'); // Canvas for QR code processing const qrCanvas = document.getElementById('qr-canvas');
const qrResult = document.getElementById('qr-result'); const qrResult = document.getElementById('qr-result');
const outputData = document.getElementById('outputData'); const outputData = document.getElementById('outputData');
const video = document.getElementById('video'); // Video element for camera feed const video = document.getElementById('video');
const scanAgainButton = document.createElement('button'); // Button to scan another ticket const scanAgainButton = document.createElement('button');
scanAgainButton.textContent = 'Scan Nog Een Ticket'; scanAgainButton.textContent = 'Scan Nog Een Ticket';
scanAgainButton.className = 'btn btn-primary mt-3'; scanAgainButton.className = 'btn btn-primary mt-3';
scanAgainButton.style.display = 'none'; // Initially hidden scanAgainButton.style.display = 'none';
scanAgainButton.addEventListener('click', () => { scanAgainButton.addEventListener('click', () => {
location.reload(); // Reload the page to reset the scanner location.reload();
}); });
document.body.appendChild(scanAgainButton); // Add the button to the page document.body.appendChild(scanAgainButton);
btnScanQR.addEventListener('click', () => { btnScanQR.addEventListener('click', () => {
btnScanQR.hidden = true; // Hide the QR code icon btnScanQR.hidden = true;
video.style.display = 'block'; // Show the video element video.style.display = 'block';
qrCanvas.hidden = true; // Ensure canvas remains hidden qrCanvas.hidden = true;
qrResult.hidden = true; qrResult.hidden = true;
const context = qrCanvas.getContext('2d'); const context = qrCanvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then((stream) => { .then((stream) => {
video.srcObject = stream; video.srcObject = stream;
video.setAttribute('playsinline', true); // Required to work on iOS video.setAttribute('playsinline', true);
video.play(); video.play();
const scan = () => { const scan = () => {
@@ -38,7 +38,7 @@ btnScanQR.addEventListener('click', () => {
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.success) { if (data.success) {
document.body.style.backgroundColor = 'green'; // Change background to green document.body.style.backgroundColor = 'green';
outputData.innerHTML = ` outputData.innerHTML = `
<p><strong>Ticket ID:</strong> ${data.ticket_id}</p> <p><strong>Ticket ID:</strong> ${data.ticket_id}</p>
<p><strong>Dag:</strong> ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}</p> <p><strong>Dag:</strong> ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}</p>
@@ -46,16 +46,16 @@ btnScanQR.addEventListener('click', () => {
<p style="color: green;">Ticket succesvol gescand en opgeslagen!</p> <p style="color: green;">Ticket succesvol gescand en opgeslagen!</p>
`; `;
} else { } else {
document.body.style.backgroundColor = 'red'; // Change background to red document.body.style.backgroundColor = 'red';
outputData.innerHTML = `<p style="color: red;">${data.message}</p>`; outputData.innerHTML = `<p style="color: red;">${data.message}</p>`;
} }
setTimeout(() => { setTimeout(() => {
document.body.style.backgroundColor = ''; // Reset background color document.body.style.backgroundColor = '';
}, 2000); // Reset after 2 seconds }, 2000);
qrResult.hidden = false; qrResult.hidden = false;
qrCanvas.hidden = true; // Ensure canvas remains hidden qrCanvas.hidden = true;
video.hidden = true; // Hide the video element after scanning video.hidden = true;
scanAgainButton.style.display = 'block'; // Show the "Scan Again" button scanAgainButton.style.display = 'block';
stream.getTracks().forEach(track => track.stop()); stream.getTracks().forEach(track => track.stop());
}) })
.catch(err => { .catch(err => {
@@ -63,12 +63,12 @@ btnScanQR.addEventListener('click', () => {
document.body.style.backgroundColor = 'red'; document.body.style.backgroundColor = 'red';
outputData.innerHTML = `<p style="color: red;">Fout bij het ophalen van ticketgegevens.</p>`; outputData.innerHTML = `<p style="color: red;">Fout bij het ophalen van ticketgegevens.</p>`;
setTimeout(() => { setTimeout(() => {
document.body.style.backgroundColor = ''; // Reset background color document.body.style.backgroundColor = '';
}, 2000); // Reset after 2 seconds }, 2000);
qrResult.hidden = false; qrResult.hidden = false;
qrCanvas.hidden = true; // Ensure canvas remains hidden qrCanvas.hidden = true;
video.hidden = true; video.hidden = true;
scanAgainButton.style.display = 'block'; // Show the "Scan Again" button scanAgainButton.style.display = 'block';
stream.getTracks().forEach(track => track.stop()); stream.getTracks().forEach(track => track.stop());
}); });
} catch (e) { } catch (e) {

8
qr/styles.css
View File

@@ -32,7 +32,7 @@ html {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 75vh; /* Full viewport height for vertical centering */ height: 75vh;
} }
#btn-scan-qr img { #btn-scan-qr img {
@@ -40,7 +40,7 @@ html {
padding: 15px; padding: 15px;
margin: 15px; margin: 15px;
background: white; background: white;
border-radius: 10px; /* Optional: Add rounded corners */ border-radius: 10px;
} }
#qr-result { #qr-result {
@@ -52,7 +52,7 @@ html {
} }
#video { #video {
display: none; /* Initially hidden */ display: none;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
@@ -62,5 +62,5 @@ html {
} }
#video:visible { #video:visible {
display: block; /* Show the video feed when it becomes visible */ display: block;
} }