Merge branch 'main' of https://github.com/Alvin-Zilverstand/Spik-en-span

2026-03-06 11:17:09 +01:00 · 2025-04-04 10:20:19 +02:00
parent e7abb49f0b 4af6fe45c1
commit 36ff15042f
5 changed files with 106 additions and 85 deletions
--- a/employee-login.html
+++ b/employee-login.html
@@ -45,7 +45,7 @@
          </div>
        </div>
      </nav>
-
+    <!--
    <div class="container mt-5">
        <h1 class="text-center">Medewerker Login</h1>
        <form id="loginForm" action="process_login.php" method="POST" class="mt-4">
@@ -60,6 +60,8 @@
            <button type="submit" class="btn btn-primary">Inloggen</button>
        </form>
    </div>
+  -->
+
 </body>

 <script>
--- a/achtergrond.jpg
+++ b/achtergrond.jpg
--- a/over-ons.html
+++ b/over-ons.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="nl">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Over Ons - Spik en Span</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
@@ -14,7 +14,7 @@
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">
            <img src="assets/favicon.ico" alt="Bootstrap" width="30" height="24">
-            Spik & Span
+            
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
@@ -46,93 +46,12 @@
        </div>
      </nav>

-      <!DOCTYPE html>
-<html lang="nl">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Over Ons - Spik en Span</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f8f9fa;
-            text-align: center;
-        }
-        .container {
-            max-width: 800px;
-            margin: 50px auto;
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        h2 {
-            color: #28a745;
-        }
-        p {
-            text-align: left;
-            line-height: 1.6;
-        }
-        .team-member {
-            margin: 20px 0;
-        }
-        .team-member img {
-            border-radius: 50%;
-            width: 150px;
-            height: 150px;
-        }
-        .team-member h3 {
-            margin: 10px 0 5px;
-        }
-        .team-member p {
-            margin: 0;
-        }
-    </style>
-</head>
-<body>
-  <!DOCTYPE html>
-  <html lang="nl">
-  <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Over Ons - Spik en Span</title>
-      <style>
-          body {
-              font-family: Arial, sans-serif;
-              margin: 0;
-              padding: 0;
-              background-color: #f8f9fa;
-              text-align: center;
-          }
-          .container {
-              max-width: 800px;
-              margin: 50px auto;
-              background: white;
-              padding: 20px;
-              border-radius: 10px;
-              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-              text-align: left;
-          }
-          h2 {
-              color: #d81b60;
-          }
-          img {
-              width: 100%;
-              border-radius: 10px;
-          }
-          p {
-              line-height: 1.6;
-          }
-      </style>
  </head>
  <body>
    <img src="img/spik.jpg" alt="Spik en Span live op het podium" style="width: 250px; border-radius: 10px; margin-right: 20px;">
    <div>
      <div class="container">
          <h2>Over Spik en Span</h2>
-          <img src="schermafbeelding.jpg" alt="Spik en Span op het podium">
          <p><strong>Spik en Span</strong>, bestaande uit Jo Huijnen en Niek Dirkx, is een van de meest succesvolle vastelaoves-duo’s in Limburg. Met hun aanstekelijke energie en feestelijke muziek hebben ze zich de afgelopen jaren ontwikkeld tot dé Kampioene van de Nach.</p>
  
          <h2>Succes en Prestaties</h2>
--- a/qr-scanner.php
+++ b/qr-scanner.php
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR Scanner</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
+</head>
+<body>
+    <div class="container mt-5">
+        <h1 class="text-center">QR Code Scanner</h1>
+        <div id="qr-reader" class="mt-4"></div>
+        <div id="qr-reader-results" class="mt-3 text-center"></div>
+        <a href="logout.php" class="btn btn-danger mt-4">Logout</a>
+    </div>
+
+    <script>
+        const qrReaderResults = document.getElementById('qr-reader-results');
+
+        function onScanSuccess(decodedText, decodedResult) {
+            // Display the scanned QR code content
+            qrReaderResults.innerHTML = `<p class="text-success">Scanned Content: ${decodedText}</p>`;
+
+            // Send the scanned ticket ID to the server for validation
+            fetch('validate_ticket.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ticket_id: decodedText })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.valid) {
+                    qrReaderResults.innerHTML += `<p class="text-success">Ticket is valid!</p>`;
+                } else {
+                    qrReaderResults.innerHTML += `<p class="text-danger">Invalid or already scanned ticket.</p>`;
+                }
+            })
+            .catch(error => {
+                qrReaderResults.innerHTML += `<p class="text-danger">Error validating ticket.</p>`;
+            });
+        }
+
+        function onScanError(errorMessage) {
+            console.warn(`QR Code scan error: ${errorMessage}`);
+        }
+
+        // Initialize the QR Code scanner
+        const html5QrCode = new Html5Qrcode("qr-reader");
+        html5QrCode.start(
+            { facingMode: "environment" }, // Use the back camera
+            {
+                fps: 10, // Frames per second
+                qrbox: 250 // QR code scanning box size
+            },
+            onScanSuccess,
+            onScanError
+        ).catch(err => {
+            qrReaderResults.innerHTML = `<p class="text-danger">Unable to start QR scanner: ${err}</p>`;
+        });
+    </script>
+</body>
+</html>
--- a/style.css
+++ b/style.css
@@ -87,3 +87,40 @@ button {
 button:hover {
    background-color: #218838;
 }
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f9fa;
+    text-align: center;
+}
+.container {
+    max-width: 800px;
+    margin: 50px auto;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+h2 {
+    color: #28a745;
+}
+p {
+    text-align: left;
+    line-height: 1.6;
+}
+.team-member {
+    margin: 20px 0;
+}
+.team-member img {
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+}
+.team-member h3 {
+    margin: 10px 0 5px;
+}
+.team-member p {
+    margin: 0;
+}