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

website/Cart/cart.css

@@ -1,93 +0,0 @@
-/* Winkelmandje sectie */
-.cart {
-    width: 15%; /* Make the cart a bit smaller */
-    padding: 20px;
-    background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    margin-top: 80px; /* Increase margin to ensure it starts below the categories bar */
-    position: fixed; /* Fix the cart to the right side */
-    right: 0; /* Align the cart to the right */
-    top: 60px; /* Ensure it starts below the categories bar */
-    display: flex;
-    flex-direction: column; /* Ensure the content is arranged in a column */
-}
-
-.cart ul {
-    list-style-type: none;
-    padding: 0;
-}
-
-.cart li {
-    margin-bottom: 10px;
-}
-
-.cart-item button {
-    background-color: #d32f2f;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    cursor: pointer;
-    border-radius: 5px;
-}
-
-
-.cart-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px 0;
-    border-bottom: 1px solid #ff9d3b;
-}
-
-.cart-item button {
-    background-color: #d32f2f;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    cursor: pointer;
-    border-radius: 5px;
-}
-
-.cart-item button:hover {
-    background-color: #b71c1c;
-}
-
-#order-button {
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    cursor: pointer;
-    border-radius: 5px;
-    width: 100%;
-    text-align: center;
-    margin-top: 20px;
-    display: none; /* Hide the button by default */
-    align-self: flex-end; /* Ensure the button is at the bottom */
-}
-
-#order-button:hover {
-    background-color: #45a049;
-}
-
-
-.cart-item button:hover {
-    background-color: #b71c1c;
-}
-
-#order-button {
-    background-color: #4CAF50;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    cursor: pointer;
-    border-radius: 5px;
-    width: 100%;
-    text-align: center;
-    margin-top: 20px;
-    display: none; /* Hide the button by default */
-    align-self: flex-end; /* Ensure the button is at the bottom */
-}
-
-#order-button:hover {
-    background-color: #45a049;
-}

website/Cart/cart.js

@@ -1,66 +0,0 @@
-// Array to hold items added to the shopping cart
-const cart = JSON.parse(localStorage.getItem('cart')) || [];
-let cartCount = cart.length; // Initialize cart count
-
-// Function to add an item to the shopping cart
-function addToCart(item) {
-    cart.push(item); // Add item to the cart array
-    localStorage.setItem('cart', JSON.stringify(cart));
-    updateCart();
-    cartCount++; // Increment cart count
-    updateCartCountDisplay(); // Update the cart count display
-    closeModal();
-}
-
-// Function to update the shopping cart display
-function updateCart() {
-    const cartItemsContainer = document.getElementById("cart-items");
-    cartItemsContainer.innerHTML = '';
-    let totalPrice = 0;
-    cart.forEach((item, index) => {
-        const cartItemElement = document.createElement('li');
-        cartItemElement.className = 'cart-item';
-        cartItemElement.innerHTML = `
-            <span>${item.title}</span>
-            <span>€${item.price.toFixed(2)}</span>
-            <button onclick="removeFromCart(${index})">Verwijderen</button>
-        `;
-        cartItemsContainer.appendChild(cartItemElement);
-        totalPrice += item.price;
-    });
-    document.getElementById('total-price').innerText = totalPrice.toFixed(2);
-
-    // Show or hide the "Bestellen" button based on the cart's content
-    const orderButton = document.getElementById('order-button');
-    if (cart.length > 0) {
-        orderButton.style.display = 'block';
-    } else {
-        orderButton.style.display = 'none';
-    }
-}
-
-// Function to remove an item from the shopping cart
-function removeFromCart(index) {
-    cart.splice(index, 1);
-    localStorage.setItem('cart', JSON.stringify(cart));
-    updateCart();
-    cartCount--; // Decrement cart count
-    updateCartCountDisplay(); // Update the cart count display
-}
-
-// Function to update the cart count display
-function updateCartCountDisplay() {
-    const cartCountElement = document.getElementById("cart-count"); // Get the element to display the count
-    if (cartCountElement) { // Check if the element exists
-        cartCountElement.textContent = cartCount; // Update the text content with the cart count
-    }
-}
-
-// Initial calls
-updateCart();
-updateCartCountDisplay(); // Initialize the cart count on page load
-
-// Function to close the modal window
-function closeModal() {
-    document.getElementById('modal').style.display = 'none';
-}

website/betalen.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Betaalpagina Mees</title>
+    <link rel="icon" href="media/favicon.ico" type="image/x-icon">
+</head>
+<body>
+    <h1></h1>
+</body>
+</html>

website/index.html

@@ -53,7 +53,9 @@
             <!-- Winkelmandje items worden hier dynamisch toegevoegd -->
         </ul>
         <p>Totaal: €<span id="total-price">0.00</span></p>
-        <button id="order-button">Bestellen</button>
+        <a href="betalen.html">
+            <button id="order-button">Bestellen</button>
+        </a>
     </div>
 
     <!-- Winkelwagen icoon -->

website/style.css

@@ -9,7 +9,7 @@ body {
 
 /* Top bar menu */
 .menu-bar {
-    width: 75%;
+    width: 75%; /* Use 75% of the screen width on the first page */
     background-color: #ffffff;
     padding: 10px 0;
 
@@ -26,6 +26,7 @@ body {
 }
 
 .menu-bar.top {
+    width: 100%; /* Use 100% of the screen width when at the top */
     position: fixed; /* Fix the top bar to the top */
     top: 0;
     left: 0;