diff --git a/website/index.html b/website/index.html index 9008136..b398f49 100644 --- a/website/index.html +++ b/website/index.html @@ -41,10 +41,10 @@ diff --git a/website/script.js b/website/script.js index e606e65..6f70e65 100644 --- a/website/script.js +++ b/website/script.js @@ -92,7 +92,15 @@ function showCategory(category) { } else if (category === 'Yoghurt') { items = [ - { title: "Aardbij yoghurt", imageSrc: "media/aardbij-yoghurt.png", price: 5.10 }, + { 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 = [ diff --git a/website/style.css b/website/style.css index 6eda26e..f65b610 100644 --- a/website/style.css +++ b/website/style.css @@ -212,11 +212,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 { @@ -224,6 +243,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 */ } }