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

website/index.html

@@ -16,11 +16,11 @@
         <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>
-    </div>
+        <!--Deals-->
-
+        <div class="menu-item" onclick="showItemDetails('Deals')">Deals</div>
-    <!-- Rechterkant: Productafbeeldingen in mooie hokjes -->
+        <!-- Placeholder Items -->
-    <div id="product-display" class="product-display">
+        <div class="menu-item" onclick="showItemDetails('Placeholder1')">Placeholder 1</div>
-        <!-- Hier komen de items die worden weergegeven als afbeeldingen -->
+        <div class="menu-item" onclick="showItemDetails('Placeholder2')">Placeholder 2</div>
     </div>
 
     <!-- Modaal venster voor grotere afbeelding en beschrijving -->
@@ -34,7 +34,7 @@
     </div>
 
     <footer>
-        <p>&copy; 2025 McDonald's</p>
+        <p>&copy; 2025 vista </p>
     </footer>
 
     <script src="script.js"></script>

website/script.js

@@ -2,62 +2,42 @@
 function showItemDetails(item) {
     var items = [];
 
-    // Afhankelijk van het geselecteerde item, voeg de producten toe
+            // Afhankelijk van het geselecteerde item, pas de details aan
-    if (item === 'Broodjes') {
+            if (item === 'Broodjes') {
-        items = [
+                title = "Broodje gezond";
-            {
+                imageSrc = "media/broodje-gezond.jpg";
-                title: "Broodje Gezond",
+                description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
-                image: "https://thumbs.dreamstime.com/b/submarine-sandwich-ham-cheese-clipping-path-egg-tomato-cucumber-lettuce-white-48580716.jpg",
+            } else if (item === 'drinks') {
-                description: "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus."
+                title = "Spa water";
+                imageSrc = "media/spa.jpg";
+                description = "Koude verfrissende water";
+            } else if (item === 'Snacks') {
+                title = "Frikandel";
+                imageSrc = "media/frikandel.jpg"; 
+                description = "Een frikandel, dat wil je wel!";
+            }  else if (item === 'deserts') {
+                title = "Ijsjes";
+                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 = "Deals";
+                imageSrc = "https://www.google.com/url?sa=i&url=https%3A%2F%2Farchies.com%2Fmeal-deals%2F&psig=AOvVaw1_NfFf4gcmKiCqOgfey2ct&ust=1739435784222000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCPj9m7_dvYsDFQAAAAAdAAAAABAE"; 
+                description = "Onze beste deals met de beste prijzenn!";
+            }   else if (item === 'Placeholder1') {
+                title = "Placeholder 1";
+                imageSrc = "";
+                description = "Beschrijving voor Placeholder 1.";
+            }   else if (item === 'Placeholder2') {
+                title = "Placeholder 2";
+                imageSrc = "";
+                description = "Beschrijving voor Placeholder 2.";
             }
-        ];
-    } 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!)."
-            }
-        ];
-    }
     
-    // Leeg de productweergave
-    const productDisplay = document.getElementById('product-display');
-    productDisplay.innerHTML = '';
 
-    // Voeg de items toe aan de weergave
+            // Toon de details aan de rechterkant
-    items.forEach(item => {
+            document.getElementById("item-title").innerText = title;
-        const productBox = document.createElement('div');
+            document.getElementById("item-image").src = imageSrc;
-        productBox.classList.add('product-box');
+            document.getElementById("item-description").innerText = description;
-        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";

website/style.css

@@ -53,18 +53,14 @@ body {
     cursor: pointer;
 }
 
-.product-box img {
+.menu-detail img {
-    width: 100%;
+    width: 70%;
-    height: auto;
+    max-width: 300px;
-    transition: transform 0.3s ease;
+    max-height: 400px;
+    margin-bottom: 20px;
 }
 
-.product-box:hover img {
+.menu-detail h2 {
-    transform: scale(1.1);
-}
-
-.product-box h3 {
-    font-size: 1.1em;
     color: #d32f2f;
     margin: 10px 0;
 }