diff --git a/website/script.js b/website/script.js index 29060a4..f85e1a7 100644 --- a/website/script.js +++ b/website/script.js @@ -270,3 +270,58 @@ window.onclick = function(event) { // Initial call to updateCart to ensure the button is hidden on page load updateCart(); + +const translations = { + en: { + "Broodjes": "Sandwiches", + "Koude Dranken": "Cold Drinks", + "Warme Dranken": "Hot Drinks", + "Snacks": "Snacks", + "deserts": "Desserts", + "Deals": "Deals", + "Soepen": "Soups", + "Salades": "Salads", + "Sausjes": "Sauces", + "Winkelmandje": "Shopping Cart", + "Bestellen": "Order", + "Prijs": "Price", + "Totaal": "Total", + "Toevoegen aan winkelmandje": "Add to Cart", + "Soep van de dag! (Allergieën? Meld het bij ons!)": "Soup of the day! (Allergies? Let us know!)", + // Add more translations as needed + }, + nl: { + "Sandwiches": "Broodjes", + "Cold Drinks": "Koude Dranken", + "Hot Drinks": "Warme Dranken", + "Snacks": "Snacks", + "Desserts": "deserts", + "Deals": "Deals", + "Soups": "Soepen", + "Salads": "Salades", + "Sauces": "Sausjes", + "Shopping Cart": "Winkelmandje", + "Order": "Bestellen", + "Price": "Prijs", + "Total": "Totaal", + "Add to Cart": "Toevoegen aan winkelmandje", + "Soup of the day! (Allergies? Let us know!)": "Soep van de dag! (Allergieën? Meld het bij ons!)", + // Add more translations as needed + } +}; + +function switchLanguage(lang) { + document.querySelectorAll("[data-translate]").forEach(element => { + const key = element.getAttribute("data-translate"); + element.textContent = translations[lang][key] || key; + }); +} + +document.addEventListener("DOMContentLoaded", () => { + document.getElementById("language-switcher").addEventListener("click", () => { + const currentLang = document.documentElement.lang; + const newLang = currentLang === "nl" ? "en" : "nl"; + document.documentElement.lang = newLang; + switchLanguage(newLang); + }); +}); diff --git a/website/style.css b/website/style.css index 7d3e984..2fe3f9f 100644 --- a/website/style.css +++ b/website/style.css @@ -238,13 +238,22 @@ body { right: 0; /* Align the cart to the right */ top: 60px; /* Ensure it starts below the categories bar */ flex-direction: column; /* Ensure the content is arranged in a column */ + overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */ + max-height: 80vh; /* Set a maximum height for the cart */ } .cart ul { list-style-type: none; padding: 0; + margin: 0; } +.cart li { + padding: 10px 0; /* Space out the items */ + border-bottom: 1px solid #ff8c00; /* Change this to the orange color */ +} + + .cart li { margin-bottom: 10px; } @@ -263,17 +272,9 @@ body { display: flex; justify-content: space-between; padding: 10px 0; - border-bottom: 1px solid #ff9d3b; + border-bottom: 2px solid #ff8c00; /* Change this to the orange color */ } -.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;