From 42c4f80111335fdf152d6e3e1b15319b607d451f Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Fri, 21 Feb 2025 11:33:05 +0100
Subject: [PATCH] Enhance layout and translations for better user experience

---
 website/index.html |  4 ++--
 website/script.js  |  2 ++
 website/style.css  | 31 +++++++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/website/index.html b/website/index.html
index b196353..3c7d79e 100644
--- a/website/index.html
+++ b/website/index.html
@@ -40,10 +40,10 @@
     <div id="modal" class="modal">
         <div class="modal-content">
             <span class="close" onclick="closeModal()">&times;</span>
-            <h2 id="modal-title" ></h2>
+            <h2 id="modal-title"></h2>
             <img id="modal-image" src="" alt="">
             <p id="modal-description"></p>
-            <p id="modal-price" ></p>
+            <p id="modal-price"></p>
             <button id="add-to-cart" data-translate="Toevoegen aan winkelmandje">Toevoegen aan winkelmandje</button>
         </div>
     </div>
diff --git a/website/script.js b/website/script.js
index 6ed99d2..1c22d3a 100644
--- a/website/script.js
+++ b/website/script.js
@@ -298,6 +298,7 @@ const translations = {
         "Soepen": "Soups",
         "Salades": "Salads",
         "Sausjes": "Sauces",
+        "Snoep": "Candy",
         "Winkelmandje": "Shopping Cart",
         "Prijs": "Price",
         "Toevoegen aan winkelmandje": "Add to cart",
@@ -338,6 +339,7 @@ const translations = {
         "Soups": "Soepen",
         "Salads": "Salades",
         "Sauces": "Sausjes",
+        "Candy": "Snoep",
         "Shopping Cart": "Winkelmandje",
         "Price": "Prijs",
         "Add to cart": "Toevoegen aan winkelmandje",
diff --git a/website/style.css b/website/style.css
index 63e1d8d..41c8b90 100644
--- a/website/style.css
+++ b/website/style.css
@@ -211,11 +211,30 @@ body {
 @media (max-width: 768px) {
     .menu-bar {
         flex-wrap: wrap; /* Allow wrapping of menu items */
+        width: 100%; /* Use full width for menu bar */
+        top: 0; /* Fix the menu bar to the top */
+        left: 0;
+        transform: translate(0, 0);
+        justify-content: space-around; /* Spread the menu items */
+        flex-wrap: wrap; /* Ensure all items are in a single row */
+        padding: 10px; /* Add padding for better spacing */
+    }
+
+    .menu-item {
+        flex: 1 1 48%; /* Make each menu item take half width */
+        margin: 5px 1%; /* Add margin between items */
+        font-size: 1em; /* Adjust font size for better readability */
     }
 
     .product-display {
         width: 100%; /* Use full width for product display */
         margin-top: 120px; /* Increase margin to accommodate wrapped menu bar */
+        padding: 10px; /* Add padding for better spacing */
+    }
+
+    .product-box {
+        width: calc(50% - 20px); /* Two items per row */
+        margin: 10px; /* Add margin between items */
     }
 
     .cart {
@@ -223,6 +242,18 @@ body {
         top: auto; /* Remove fixed position */
         bottom: 0; /* Position at the bottom */
         height: auto; /* Adjust height */
+        max-height: 50vh; /* Set a maximum height for the cart */
+        overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
+    }
+
+    .cart-icon {
+        top: 20px; /* Adjust position */
+        right: 20px; /* Adjust position */
+    }
+
+    .language-switcher {
+        bottom: 20px; /* Position at the bottom */
+        left: 20px; /* Position at the left */
     }
 }