From 20c5fb21d52360269f7efcc3f233c887b9b7b333 Mon Sep 17 00:00:00 2001
From: cowboykipnugget <524877@vistacollege.nl>
Date: Wed, 12 Feb 2025 09:47:28 +0100
Subject: [PATCH] sdsfns

---
 website/index.html |  34 ++++++++-------
 website/script.js  | 101 ++++++++++++++++++++++++++++-----------------
 website/style.css  |  78 +++++++++++++++++++++++++++-------
 3 files changed, 144 insertions(+), 69 deletions(-)

diff --git a/website/index.html b/website/index.html
index 7e218a0..109b8bf 100644
--- a/website/index.html
+++ b/website/index.html
@@ -12,29 +12,31 @@
     <!-- 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>
-        <!-- Placeholder Items -->
-        <div class="menu-item" onclick="showItemDetails('Placeholder1')">Placeholder 1</div>
-        <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>
+    <!-- Rechterkant: Productafbeeldingen in mooie hokjes -->
+    <div id="product-display" class="product-display">
+        <!-- Hier komen de items die worden weergegeven als afbeeldingen -->
+    </div>
+
+    <!-- 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 McDonald's</p>
     </footer>
-    
+
+    <script src="script.js"></script>
 </body>
-<script src="script.js"></script>
 </html>
diff --git a/website/script.js b/website/script.js
index 48fd24a..7f38dd2 100644
--- a/website/script.js
+++ b/website/script.js
@@ -1,42 +1,69 @@
 // 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') {
-                title = "Broodje gezond";
-                imageSrc = "https://thumbs.dreamstime.com/b/submarine-sandwich-ham-cheese-clipping-path-egg-tomato-cucumber-lettuce-white-48580716.jpg";
-                description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
-            } else if (item === 'drinks') {
-                title = "Spa water";
-                imageSrc = "https://m.media-amazon.com/images/I/71VrczELeaL._AC_SY741_.jpg";
-                description = "Koude verfrissende water";
-            } else if (item === 'Snacks') {
-                title = "Frikandel";
-                imageSrc = "https://boshuis.huisjebezorgd.nl/wp-content/uploads/2020/03/29512948_652505005141152_1601506864166600704_o.jpg"; 
-                description = "Een frikandel, dat wil je wel!";
-            }  else if (item === 'deserts') {
-                title = "Ijsjes";
-                imageSrc = "https://th.bing.com/th/id/R.5e81f369a0da6a92106391e7b0a5119b?rik=KD0kNGiRjGM22g&riu=http%3a%2f%2fwww.brookersicecream.com%2fwp-content%2fuploads%2f2018%2f09%2fIce-Cream-Fan.png&ehk=%2bfZOURa%2fKgmE4uuuESx9We3OBrwXpPaaMZpJaBJt4bo%3d&risl=&pid=ImgRaw&r=0"; 
-                description = "Een lekker ijsje met vele smaken, zoals aardbei, vannille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)";
-            } else if (item === 'Placeholder1') {
-                title = "Placeholder 1";
-                image = "";
-                description = "Beschrijving voor Placeholder 1.";
-            } else if (item === 'Placeholder2') {
-                title = "Placeholder 2";
-                image = "";
-                description = "Beschrijving voor Placeholder 2.";
+    // Afhankelijk van het geselecteerde item, voeg de producten toe
+    if (item === 'Broodjes') {
+        items = [
+            {
+                title: "Broodje Gezond",
+                image: "https://thumbs.dreamstime.com/b/submarine-sandwich-ham-cheese-clipping-path-egg-tomato-cucumber-lettuce-white-48580716.jpg",
+                description: "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus."
             }
-        
+        ];
+    } else if (item === 'drinks') {
+        items = [
+            {
+                title: "Spa Water",
+                image: "https://m.media-amazon.com/images/I/71VrczELeaL._AC_SY741_.jpg",
+                description: "Koude verfrissende water."
+            }
+        ];
+    } else if (item === 'Snacks') {
+        items = [
+            {
+                title: "Frikandel",
+                image: "https://boshuis.huisjebezorgd.nl/wp-content/uploads/2020/03/29512948_652505005141152_1601506864166600704_o.jpg",
+                description: "Een frikandel, dat wil je wel!"
+            }
+        ];
+    } else if (item === 'deserts') {
+        items = [
+            {
+                title: "Ijsjes",
+                image: "https://th.bing.com/th/id/R.5e81f369a0da6a92106391e7b0a5119b?rik=KD0kNGiRjGM22g&riu=http%3a%2f%2fwww.brookersicecream.com%2fwp-content%2fuploads%2f2018%2f09%2fIce-Cream-Fan.png&ehk=%2bfZOURa%2fKgmE4uuuESx9We3OBrwXpPaaMZpJaBJt4bo%3d&risl=&pid=ImgRaw&r=0",
+                description: "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)."
+            }
+        ];
+    }
 
-            // Toon de details aan de rechterkant
-            document.getElementById("item-title").innerText = title;
-            document.getElementById("item-image").src = imageSrc;
-            document.getElementById("item-description").innerText = description;
+    // Leeg de productweergave
+    const productDisplay = document.getElementById('product-display');
+    productDisplay.innerHTML = '';
 
-            // Zorg ervoor dat de detailsectie zichtbaar wordt
-            document.getElementById("menu-detail").style.display = "block";
-        }
\ No newline at end of file
+    // Voeg de items toe aan de weergave
+    items.forEach(item => {
+        const productBox = document.createElement('div');
+        productBox.classList.add('product-box');
+        productBox.innerHTML = `
+            <img src="${item.image}" alt="${item.title}" onclick="openModal('${item.title}', '${item.image}', '${item.description}')">
+            <h3>${item.title}</h3>
+        `;
+        productDisplay.appendChild(productBox);
+    });
+}
+
+// Functie om het modaal venster te openen
+function openModal(title, image, description) {
+    document.getElementById("modal-title").innerText = title;
+    document.getElementById("modal-image").src = image;
+    document.getElementById("modal-description").innerText = description;
+
+    // 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";
+}
diff --git a/website/style.css b/website/style.css
index c269385..deeedc3 100644
--- a/website/style.css
+++ b/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,38 +27,84 @@ 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 */
 }
 
-.menu-detail img {
-    width: 70%;
-    max-width: 200px;
-    max-height: 400px;
-    margin-bottom: 20px;
+.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 h2 {
+.product-box img {
+    width: 100%;
+    height: auto;
+    transition: transform 0.3s ease;
+}
+
+.product-box:hover img {
+    transform: scale(1.1);
+}
+
+.product-box h3 {
+    font-size: 1.1em;
     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;