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

website/cart.js

@@ -1,6 +1,10 @@
+
+
 // Array to hold items added to the shopping cart
 const cart = [];
 
+
+
 // Functie om een item aan het winkelwagentje toe te voegen
 function addToCart(item) {
     cart.unshift(item); // Add item to the beginning of the cart array
@@ -8,6 +12,8 @@ function addToCart(item) {
     closeModal();
 }
 
+
+
 // Functie om het winkelwagentje bij te werken
 function updateCart() {
     const cartItemsContainer = document.getElementById("cart-items");
@@ -35,6 +41,7 @@ function updateCart() {
     }
 }
 
+
 // Functie om een item uit het winkelwagentje te verwijderen
 function removeFromCart(index) {
     cart.splice(index, 1);
@@ -43,3 +50,9 @@ function removeFromCart(index) {
 
 // Initial call to updateCart to ensure the button is hidden on page load
 updateCart();
+
+// Functie om het modaal venster te sluiten
+function closeModal() {
+    document.getElementById('modal').style.display = 'none';
+}
+

website/index.html

@@ -6,6 +6,7 @@
     <title>Het hoofdmenu van de Mees</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="cart.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="icon" href="media/favicon.ico" type="image/x-icon">
 </head>
 
@@ -52,6 +53,12 @@
         <button id="order-button">Bestellen</button>
     </div>
 
+    <!-- Winkelwagen icoon -->
+    <div class="cart-icon">
+        <i class="fas fa-shopping-cart"></i>
+        <span class="cart-count">0</span> <!-- Aantal producten -->
+    </div>
+
     <footer>
         <p>&copy; 2025 Vista </p>
     </footer>
@@ -61,3 +68,4 @@
     <script src="cart.js"></script>
 </body>
 </html>
+

website/script.js

@@ -25,7 +25,9 @@ function showCategory(category) {
             { title: "Fanta orange zero", imageSrc: "media/fanta-zero.jpg", price: 1.80 },
             { title: "Fanta exotic zero", imageSrc: "media/fanta-exotic-zero.jpg", price: 1.80 },
             { title: "Fanta lemon zero", imageSrc: "media/fanta-lemon-zero.jpg", price: 1.80 },
-            { title: "Fanta cassis", imageSrc: "media/fanta-cassis.jpg", price: 1.80 }, ]
+            { title: "Ice tea", imageSrc: "https://www.manutan.nl/img/S/GRP/ST/AIG12165970.jpg", price: 1.80},
+            { title: "Fanta cassis", imageSrc: "media/fanta-cassis.jpg", price: 1.80 },
+            { title: "Milkshake", imageSrc: "https://s3.amazonaws.com/static.realcaliforniamilk.com/media/recipes_2/sunset-sprinkle-shakes.jpg", price: 2.50 }, ]
     } else if (category === 'Warme-Dranken') {
         items = [
             { title: "Chocomel", imageSrc: "media/choco-gs.jpg", price: 1.00 },
@@ -47,8 +49,8 @@ function showCategory(category) {
         items = [
             { title: "Ijsjes", imageSrc: "media/Ijs.png", price: 1.50 },
             { title: "Sorbet", imageSrc: "media/sorbet.webp", price: 2.50 },
-            { title: "Softijs", imageSrc: "https://www.yourlittleblackbook.me/wp-content/uploads/2023/07/lekkerste-softijs-amsterdam.jpg", price: 2.50 },
-            { title: "Sundea ijs", imageSrc: "https://easyfoodheesch.nl/wp-content/uploads/2021/02/IMG_7402.jpg", price: 2.50 },
+            { title: "Softijs", imageSrc: "media/softijs.jpg", price: 2.50 },
+            { title: "Sundea ijs", imageSrc: "media/sundea.jpg", price: 2.50 },
         ];
     } else if (category === 'Deals') {
         items = [
@@ -128,7 +130,3 @@ function getDescription(title) {
     return "";
 }
 
-// Functie om het modaal venster te sluiten
-function closeModal() {
-    document.getElementById('modal').style.display = 'none';
-}

website/style.css

@@ -133,3 +133,59 @@ body {
 #add-to-cart:hover {
     background-color: #45a049;
 }
+
+ /* Winkelwagen-icoon */
+ .cart-icon {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: #ff6600;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 50%;
+    font-size: 20px;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cart-icon:hover {
+    background-color: #e65c00;
+}
+
+.cart-count {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background: red;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 3px 6px;
+    border-radius: 50%;
+}
+
+/* Productstijl */
+.products {
+    display: flex;
+    gap: 20px;
+    margin: 50px;
+}
+
+.product {
+    border: 1px solid #ddd;
+    padding: 20px;
+    text-align: center;
+}
+
+.product button {
+    background-color: #ff6600;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.product button:hover {
+    background-color: #e65c00;
+}

website/welcome.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>De Welkompagina van de Mees</title>
+    <title>De welkompagina van de Mees</title>
     <link rel="stylesheet" href="welcome.css">
     <link rel="icon" href="media/favicon.ico" type="image/x-icon">
 </head>
@@ -21,7 +21,9 @@
     </div>
 
     <footer>
-        <p>&copy; 2025 Vista </p>
+        <center>
+            <p>&copy; 2025 Vista </p>
+        </center>
     </footer>
 
 </body>