From befb870dfe36f5c4c43bbe37c55c1e9f25c45c4e Mon Sep 17 00:00:00 2001 From: kitkatpotato16 <523488@vistacollege.nl> Date: Fri, 21 Feb 2025 11:25:24 +0100 Subject: [PATCH 1/3] asuidiau --- website/script.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/website/script.js b/website/script.js index 708393b..3503fc7 100644 --- a/website/script.js +++ b/website/script.js @@ -90,9 +90,17 @@ function showCategory(category) { ]; - } else if (category === 'Yoghert') { + } else if (category === 'Yoghurt') { items = [ { title: "Aardbij yoghert", imageSrc: "media/aardbij-yoghurt.png", price: 5.10 }, + { title: "Optimel klein 250ml", imageSrc: "https://m.media-amazon.com/images/I/81mIA7bHX2L.jpg", price: 1.50 }, + { title: "Optimel groot", imageSrc: "https://jumbo.com/dam-images/fit-in/360x360/Products/04092024_1725446061266_1725446064707_8713300459318_1.png", price: 2.45 }, + { title: "Melk", imageSrc: "https://static.ah.nl/dam/product/AHI_4354523130313438333436?revLabel=1&rendition=400x400_JPG_Q85&fileType=binary", price: 2.00 }, + { title: "Fristi", imageSrc: "https://www.fristi.nl/sites/rfc/files/styles/content_image_md/public/media/images/cf500c0a-589a-4677-9737-b5bc0ba6596d.png?itok=j-R-hcKp", price: 2.90 }, + { title: "Chocomel", imageSrc: "https://m.media-amazon.com/images/I/617FCPZS5sS.jpg", price: 2.90 }, + { title: "Breaker", imageSrc: "https://cdn.hoogvliet.com/Images/Product/XL/022589000.jpg", price: 2.75 }, + { title: "Yoghurt beker", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc67eaAUkb3-7eTk7WR7F16FwDDnluLv2InQ&s", price: 2.05 }, + { title: "Kwark 150 gram", imageSrc: "https://jumbo.com/dam-images/fit-in/720x720/Products/31082023_1693453250716_1693453252578_577765_CUP_08712800000136_C1N1.png", price: 2.05 }, ]; } else if (category === 'Snoep') { items = [ @@ -105,7 +113,7 @@ function showCategory(category) { { title: "Haribo Tangfastics", imageSrc: "media/tangfastics.png", price: 2.50 }, { title: "Haribo Kersen", imageSrc: "media/Kersen.png", price: 2.50 }, { title: "Popcorn zoet", imageSrc: "https://th.bing.com/th/id/OIP.6We0JA1TcUt_QOqMcMZsPwAAAA?rs=1&pid=ImgDetMain", price: 2.50 }, - { title: "Popcorn zout", imageSrc: "https://www.sligro.nl/image-service/_jcr_content.product.08713276292032.image/1/large.jpeg", price: 2.50 } + { title: "Popcorn zout", imageSrc: "https://www.sligro.nl/image-service/_jcr_content.product.08713276292032.image/1/large.jpeg", price: 2.50 }, ]; } else if (category === 'Overige') { items = [ From 838e3666b4bdc0c90d039445652c7df3b324fa84 Mon Sep 17 00:00:00 2001 From: kitkatpotato16 <523488@vistacollege.nl> Date: Fri, 21 Feb 2025 11:28:44 +0100 Subject: [PATCH 2/3] sdfg --- website/script.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/website/script.js b/website/script.js index 44a83d7..75dd34d 100644 --- a/website/script.js +++ b/website/script.js @@ -93,6 +93,14 @@ function showCategory(category) { } else if (category === 'Yoghurt') { items = [ { title: "Aardbij yoghert", imageSrc: "media/aardbij-yoghurt.png", price: 5.10 }, + { title: "Optimel klein 250ml", imageSrc: "https://m.media-amazon.com/images/I/81mIA7bHX2L.jpg", price: 1.50 }, + { title: "Optimel groot", imageSrc: "https://jumbo.com/dam-images/fit-in/360x360/Products/04092024_1725446061266_1725446064707_8713300459318_1.png", price: 2.45 }, + { title: "Melk", imageSrc: "https://static.ah.nl/dam/product/AHI_4354523130313438333436?revLabel=1&rendition=400x400_JPG_Q85&fileType=binary", price: 2.00 }, + { title: "Fristi", imageSrc: "https://www.fristi.nl/sites/rfc/files/styles/content_image_md/public/media/images/cf500c0a-589a-4677-9737-b5bc0ba6596d.png?itok=j-R-hcKp", price: 2.90 }, + { title: "Chocomel", imageSrc: "https://m.media-amazon.com/images/I/617FCPZS5sS.jpg", price: 2.90 }, + { title: "Breaker", imageSrc: "https://cdn.hoogvliet.com/Images/Product/XL/022589000.jpg", price: 2.75 }, + { title: "Yoghurt beker", imageSrc: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc67eaAUkb3-7eTk7WR7F16FwDDnluLv2InQ&s", price: 2.05 }, + { title: "Kwark 150 gram", imageSrc: "https://jumbo.com/dam-images/fit-in/720x720/Products/31082023_1693453250716_1693453252578_577765_CUP_08712800000136_C1N1.png", price: 2.05 }, ]; } else if (category === 'Snoep') { items = [ 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 3/3] 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 @@ 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 */ } }