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

2026-03-06 13:26:49 +01:00 · 2025-04-09 13:46:32 +02:00
parent bf433e9ab6 ed9ce9a863
commit 8695286236
11 changed files with 347 additions and 100 deletions
--- a/bestellen.css
+++ b/bestellen.css
@@ -0,0 +1,195 @@
+#ticketForm {
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+#qrCodeContainer {
+    margin-top: 20px;
+}
+
+
+.body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    }
+      
+    .navbar {
+    display: flex;
+    align-items: right;
+    justify-content: right;
+    background-color: #000;
+    padding: 10px 20px;
+    color: black;
+    }
+
+    .logo {
+        height: 50px;
+        position: absolute;
+        left: 20px;
+        }
+
+    .nav-links {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        margin-right: 15px;
+        }
+
+    .nav-links li {
+        margin: 0 15px;
+        }
+    .nav-links a {
+        text-decoration: none;
+        color: rgb(0, 0, 0);
+        font-size: 18px;
+         }
+
+    .section{
+        background-color: #000000;
+    }
+
+
+
+    .size {
+    width: 33.33%;
+    height: 25%;
+    }
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    text-align: center;
+}
+.container {
+    max-width: 600px;
+    margin: 50px auto;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+input, textarea {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+button {
+    background-color: #28a745;
+    color: white;
+    padding: 10px 15px; 
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #218838;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f9fa;
+    text-align: center;
+}v
+.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);
+    opacity: 0.5;
+    background-color: rgba(255, 255, 255, 0.7);
+    }
+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;
+}
+
+.achtergrond-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1; 
+  }
+  
+  .inhoud {
+    position: relative;
+    z-index: 1;
+    color: white;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.background-video {
+    max-width: 100%;
+    height: auto;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+}
+
+
+.background-video {
+    display: flex;
+    justify-content: center;
+
+}
+
+.item-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30px;
+}
+
+.item {
+    flex: 0 0 48%;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.item img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 15px;
+}
+
+.item h5 {
+    margin-bottom: 10px;
+}
+
+.item p {
+    margin-bottom: 15px;
+}
+
+.item button {
+    width: 100%;
+}
--- a/bestellen.html
+++ b/bestellen.html
@@ -7,6 +7,7 @@
    <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">
+    <link rel="stylesheet" href="bestellen.css">
 </head>
 <body>
    
--- a/employee-login.html
+++ b/employee-login.html
@@ -26,6 +26,10 @@
                    Home
                </a>
              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="bestellen.html">
+                    Tickets Bestellen</a>
+              </li>
              <li class="nav-item">
                <a class="nav-link active" href="contact.html">
                    Contact
@@ -45,7 +49,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,7 +64,6 @@
            <button type="submit" class="btn btn-primary">Inloggen</button>
        </form>
    </div>
-  -->

 </body>

--- a/index.html
+++ b/index.html
@@ -51,67 +51,11 @@
    </div>
 </nav>

-    <div class="video-container text-center">
-        <h1>KAMPIOENEN VAN DE NACH</h1>
-        <video autoplay loop class="background-video">
+<video id="myVideo" autoplay loop class="background-video">
  <source src="img/yt1z.net - Spik Span - Kampioene van de nach de11devande11de 2023 (720p) (1).mp4" type="video/mp4">
-        </video>
-        <div class="inhoud">
-            <button onclick="toggleVideo()">⏯ Video pauzeren/afspelen</button>
-        </div>
-    </div>
+</video>

-        
-    <!-- <div class="container mt-5">
-        <h1 class="text-center">Koop je tickets voor Spik en Span!</h1>
-        <form id="ticketForm" action="process_ticket.php" method="POST" class="mt-4">
-            <div class="mb-3">
-                <label for="name" class="form-label">Naam</label>
-                <input type="text" id="name" name="name" class="form-control" required>
-            </div>
-            <div class="mb-3">
-                <label for="email" class="form-label">E-mailadres</label>
-                <input type="email" id="email" name="email" class="form-control" required>
-            </div>
-            <div class="mb-3">
-                <label for="ticketCategory" class="form-label">Categorie</label>
-                <select id="ticketCategory" name="category" class="form-select" required>
-                    <option value="adult">Volwassenen</option>
-                    <option value="child">Kinderen</option>
-                    <option value="group">Groepen</option>
-                </select>
-            </div>
-            <div class="mb-3">
-                <label for="ticketQuantity" class="form-label">Aantal tickets</label>
-                <input type="number" id="ticketQuantity" name="quantity" class="form-control" min="1" max="10" required>
-            </div>
-            <button type="submit" class="btn btn-primary">Koop Tickets</button>
-        </form>
-        <div id="qrCodeContainer" class="mt-5 text-center"></div>
-    </div>-->
-
-    <div id="carouselExampleIndicators" class="carousel slide size">
-        <div class="carousel-indicators">
-          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-        </div>
-        <div class="carousel-inner">
-          <div class="carousel-item active">
-            <img src="img/vrij.jpg" class="d-block w-100" alt="...">
-          </div>
-          <div class="carousel-item">
-            <img src="img/za.jpg" class="d-block w-100" alt="...">
-          </div>
-        </div>
-        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
-          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Previous</span>
-        </button>
-        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
-          <span class="carousel-control-next-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Next</span>
-        </button>
-      </div>
+<button onclick="toggleVideo()">⏯ </button>

 </body>

--- a/process_ticket.php
+++ b/process_ticket.php
@@ -0,0 +1,36 @@
+<!-- filepath: c:\xampp\htdocs\Spik-en-span\process_ticket.php -->
+<?php
+// Database connection
+$servername = "localhost";
+$username = "root";
+$password = "";
+$dbname = "spik_en_span";
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+// Check connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+// Retrieve form data
+$name = $_POST['name'];
+$email = $_POST['email'];
+$category = $_POST['category'];
+$quantity = $_POST['quantity'];
+$ticket_id = "TICKET-" . time();
+
+// Insert ticket into database
+$sql = "INSERT INTO tickets (ticket_id, name, email, category, quantity) VALUES (?, ?, ?, ?, ?)";
+$stmt = $conn->prepare($sql);
+$stmt->bind_param("ssssi", $ticket_id, $name, $email, $category, $quantity);
+
+if ($stmt->execute()) {
+    echo "Ticket successfully purchased! Your Ticket ID is: " . $ticket_id;
+} else {
+    echo "Error: " . $stmt->error;
+}
+
+$stmt->close();
+$conn->close();
+?>
--- a/script.js
+++ b/script.js
@@ -23,3 +23,12 @@ document.getElementById('ticketForm').addEventListener('submit', function (e) {

    alert('Ticket(s) successfully generated!');
 });
+
+function toggleVideo() {
+    const video = document.getElementById('myVideo');
+    if (video.paused) {
+      video.play();
+    } else {
+      video.pause();
+    }
+  }
--- a/style.css
+++ b/style.css
@@ -13,12 +13,13 @@
    font-family: Arial, sans-serif;
    }
      
-.navbar {
+    .navbar {
    display: flex;
    align-items: right;
    justify-content: right;
    background-color: #000;
    padding: 10px 20px;
+    color: black;
    }

    .logo {
@@ -44,54 +45,103 @@
         }

    .section{
-        background-color: #000;
+        background-color: #000000;
    }



-.size {
+    .size {
    width: 33.33%;
    height: 25%;
-}
+    }

-.item-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 30px;
-}
-
-.item {
-    flex: 0 0 48%;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 15px;
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
    text-align: center;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-
-.item img {
-    max-width: 100%;
-    height: auto;
-    margin-bottom: 15px;
+.container {
+    max-width: 600px;
+    margin: 50px auto;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
-
-.item h5 {
-    margin-bottom: 10px;
-}
-
-.item p {
-    margin-bottom: 15px;
-}
-
-.item button {
+input, textarea {
    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+button {
+    background-color: #28a745;
+    color: white;
+    padding: 10px 15px; 
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button:hover {
+    background-color: #218838;
 }

-.video-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f9fa;
+    text-align: center;
+}v
+.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);
+    opacity: 0.5;
+    background-color: rgba(255, 255, 255, 0.7);
+    }
+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;
+}
+
+.achtergrond-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1; 
+  }
+  
+  .inhoud {
+    position: relative;
+    z-index: 1;
+    color: white;
    text-align: center;
    margin-top: 20px;
 }
@@ -100,8 +150,13 @@
    max-width: 100%;
    height: auto;
    margin-top: 15px;
+    display: flex;
+    justify-content: center;
 }

-.inhoud button {
-    margin-top: 10px;
+
+.background-video {
+    display: flex;
+    justify-content: center;
+
 }
--- a/vrijdag-kinderen.html
+++ b/vrijdag-kinderen.html
@@ -7,6 +7,7 @@
    <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">
+    <link rel="stylesheet" href="bestellen.css">
 </head>
 <body>
    
--- a/vrijdag-volwassenen.html
+++ b/vrijdag-volwassenen.html
@@ -7,6 +7,7 @@
    <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">
+    <link rel="stylesheet" href="bestellen.css">
 </head>
 <body>
    
--- a/zaterdag-kinderen.html
+++ b/zaterdag-kinderen.html
@@ -7,6 +7,7 @@
    <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">
+    <link rel="stylesheet" href="bestellen.css">
 </head>
 <body>
    
--- a/zaterdag-volwassenen.html
+++ b/zaterdag-volwassenen.html
@@ -7,6 +7,7 @@
    <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">
+    <link rel="stylesheet" href="bestellen.css">
 </head>
 <body>