Merge branch 'main' of https://github.com/Alvin-Zilverstand/Schoolkantine

website/index.html

@@ -12,13 +12,9 @@
     <!-- Linkerkant menu -->
     <div class="menu-list">
         <h2>Menu</h2>
-        <!-- Broodje Gezond -->
-        <div class="menu-item" onclick="showItemDetails('Broodjes')">Broodje Gezond</div>
-        <!-- Spa Water -->
-        <div class="menu-item" onclick="showItemDetails('drinks')">Spa Water</div>
-        <!-- Frikandel -->
-        <div class="menu-item" onclick="showItemDetails('Snacks')">Frikandel</div>
-        <!-- Ijsjes -->
+        <div class="menu-item" onclick="showItemDetails('Broodjes')">Broodjes</div>
+        <div class="menu-item" onclick="showItemDetails('drinks')">Drinken</div>
+        <div class="menu-item" onclick="showItemDetails('Snacks')">Snacks</div>
         <div class="menu-item" onclick="showItemDetails('deserts')">Ijsjes</div>
         <!--Deals-->
         <div class="menu-item" onclick="showItemDetails('Deals')">Deals</div>
@@ -28,16 +24,20 @@
         <div class="menu-item" onclick="showItemDetails('Placeholder2')">Placeholder 2</div>
     </div>
 
-    <div id="menu-detail" class="menu-detail">
-    <h2 id="item-title">Selecteer een item</h2>
-    <img id="item-image" src="" alt="">
-    <p id="item-description"></p>
+    <!-- Modaal venster voor grotere afbeelding en beschrijving -->
+    <div id="modal" class="modal" onclick="closeModal()">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2 id="modal-title"></h2>
+            <img id="modal-image" src="" alt="">
+            <p id="modal-description"></p>
+        </div>
     </div>
 
     <footer>
         <p>&copy; 2025 vista </p>
     </footer>
-    
+
+    <script src="script.js"></script>
 </body>
-<script src="script.js"></script>
 </html>

website/script.js

@@ -1,8 +1,6 @@
 // Functie om de details van een geselecteerd item weer te geven
-        function showItemDetails(item) {
-            var title = '';
-            var description = '';
-            var imageSrc = '';
+function showItemDetails(item) {
+    var items = [];
 
             // Afhankelijk van het geselecteerde item, pas de details aan
             if (item === 'Broodjes') {
@@ -22,12 +20,12 @@
                 imageSrc = "media/ijs.png"; 
                 description = "Een lekker ijsje met vele smaken, zoals aardbei, vannille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)";
             }   else if (item === 'Deals') {
-                title = "soepen";
-                imageSrc = "https://archies.com/wp-content/uploads/2024/07/MEAL-DEALS_HERO_MOBILE-1.jpg"; 
+                title = "Deals";
+                imageSrc = "media/deals.jpg"; 
                 description = "Onze beste deals met de beste prijzen!";
             }   else if (item === 'soep') {
                 title = "soepen";
-                imageSrc = "https://www.lekkeretenmetlinda.nl/wp-content/uploads/2025/01/Minestrone-soep-1a-768x576.jpg";
+                imageSrc = "media/soep.jpg";
                 description = "soep van de dag! (Allergieen? Meld het bij ons!";
             }   else if (item === 'Placeholder 2') {
                 title = "Placeholder 2";
@@ -41,6 +39,11 @@
             document.getElementById("item-image").src = imageSrc;
             document.getElementById("item-description").innerText = description;
 
-            // Zorg ervoor dat de detailsectie zichtbaar wordt
-            document.getElementById("menu-detail").style.display = "block";
-        }
+    // Zet het modaal venster zichtbaar
+    document.getElementById("modal").style.display = "block";
+}
+
+// Functie om het modaal venster te sluiten
+function closeModal() {
+    document.getElementById("modal").style.display = "none";
+}

website/style.css

@@ -1,11 +1,11 @@
-/* Algemeen stijlen */
+/* Algemene body */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     display: flex;
 }
 
-/* Linkerkant: Het menu */
+/* Linkerkant menu */
 .menu-list {
     width: 30%;
     background-color: #f2c14e;
@@ -27,18 +27,30 @@ body {
     border-radius: 8px;
     cursor: pointer;
     font-size: 1.2em;
+    transition: all 0.3s ease;
 }
 
 .menu-item:hover {
     background-color: #f59e42;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* Rechterkant: Detail weergave */
-.menu-detail {
+/* Productweergave in mooie hokjes */
+.product-display {
     width: 70%;
-    background-color: white;
+    display: flex;
+    flex-wrap: wrap;
     padding: 20px;
-    display: none; /* Start verborgen */
+}
+
+.product-box {
+    width: 200px;
+    margin: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    cursor: pointer;
 }
 
 .menu-detail img {
@@ -50,15 +62,45 @@ body {
 
 .menu-detail h2 {
     color: #d32f2f;
-    font-size: 2em;
+    margin: 10px 0;
 }
 
-.menu-detail p {
-    font-size: 1.2em;
-    color: #555;
+/* Modaal venster (pop-up) */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: white;
+    margin: 15% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 60%;
+    text-align: center;
+}
+
+.modal img {
+    width: 100%;
+    max-width: 200px;
     margin: 20px 0;
 }
 
+.close {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 30px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
 /* Footer */
 footer {
     text-align: center;