alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 11:07:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dylanomz
2025-02-21 11:39:46 +01:00
parent 35a0671e5b f9f86ff64d
commit bf028dc270
3 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/index.html
View File

@@ -41,10 +41,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>

10
website/script.js
View File

@@ -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 = [

31
website/style.css
View File

@@ -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 */
}
}