alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-07 05:53:00 +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:
cowboykipnugget
2025-02-12 13:50:09 +01:00
parent e0077b4e1c
commit ca7bf5f948
3 changed files with 108 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
website/index.html
View File

@@ -13,15 +13,19 @@
<!-- Linkerkant menu --> <!-- Linkerkant menu -->
<div class="menu-list"> <div class="menu-list">
<h2>Menu</h2> <h2>Menu</h2>
<div class="menu-item" onclick="showItemDetails('Broodjes')">Broodjes</div> <div class="menu-item" onclick="showCategory('Broodjes')">Broodjes</div>
<div class="menu-item" onclick="showItemDetails('drinks')">Drinken</div> <div class="menu-item" onclick="showCategory('drinks')">Drinken</div>
<div class="menu-item" onclick="showItemDetails('Snacks')">Snacks</div> <div class="menu-item" onclick="showCategory('Snacks')">Snacks</div>
<div class="menu-item" onclick="showItemDetails('deserts')">Ijsjes</div> <div class="menu-item" onclick="showCategory('deserts')">Ijsjes</div>
<div class="menu-item" onclick="showItemDetails('Deals')">Deals</div> <div class="menu-item" onclick="showCategory('Deals')">Deals</div>
<div class="menu-item" onclick="showItemDetails('Soepen')">Soepen</div> <div class="menu-item" onclick="showCategory('Soepen')">Soepen</div>
<div class="menu-item" onclick="showItemDetails('Salades')">Salades</div> <div class="menu-item" onclick="showCategory('Salades')">Salades</div>
<!-- placeholder--> <div class="menu-item" onclick="showCategory('Placeholder2')">Placeholder 2</div>
<div class="menu-item" onclick="showItemDetails('Placeholder2')">Placeholder 2</div> </div>
<!-- Productweergave -->
<div id="product-display" class="product-display">
<!-- Product items worden hier toegevoegd via JavaScript -->
</div> </div>
<!-- Modaal venster voor grotere afbeelding en beschrijving --> <!-- Modaal venster voor grotere afbeelding en beschrijving -->
@@ -45,9 +49,9 @@
<p>Totaal: €<span id="total-price">0.00</span></p> <p>Totaal: €<span id="total-price">0.00</span></p>
<button id="order-button">Bestellen</button> <button id="order-button">Bestellen</button>
</div> </div>
<footer> <footer>
<p>&copy; 2025 vista </p> <p>&copy; 2025 Vista </p>
</footer> </footer>
</body> </body>

119
website/script.js
View File

@@ -1,74 +1,65 @@
// Functie om de details van een geselecteerd item weer te geven // Functie om de productcategorie te tonen
function showItemDetails(item) { function showCategory(category) {
var title = ""; const productDisplay = document.getElementById('product-display');
var imageSrc = ""; productDisplay.innerHTML = ''; // Maak het display leeg voordat we nieuwe items toevoegen
var description = "";
var price = 0;
// Afhankelijk van het geselecteerde item, pas de details aan let items = [];
if (item === 'Broodjes') {
title = "Broodje Gezond"; // Afhankelijk van de gekozen categorie, voeg je de juiste producten toe
imageSrc = "media/broodje-gezond.jpg"; if (category === 'Broodjes') {
description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus."; items = [
price = 3.50; { title: "Broodje Gezond", imageSrc: "media/broodje-gezond.jpg", price: 3.50 },
} else if (item === 'drinks') { { title: "Broodje Kaas", imageSrc: "media/broodje-kaas.jpg", price: 3.00 },
title = "Spa Water"; ];
imageSrc = "media/spa.webp"; } else if (category === 'drinks') {
description = "Koude verfrissende water."; items = [
price = 1.00; { title: "Spa Water", imageSrc: "media/spa.webp", price: 1.00 },
} else if (item === 'Snacks') { { title: "Cola", imageSrc: "media/cola.jpg", price: 1.50 },
title = "Frikandel"; ];
imageSrc = "media/frikandel.jpg"; } else if (category === 'Snacks') {
description = "Een frikandel, dat wil je wel!"; items = [
price = 2.00; { title: "Frikandel", imageSrc: "media/frikandel.jpg", price: 2.00 },
} else if (item === 'deserts') { { title: "Bitterballen", imageSrc: "media/bitterballen.jpg", price: 2.50 },
title = "Ijsjes"; ];
imageSrc = "media/ijs.png";
description = "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).";
price = 1.50;
} else if (item === 'Deals') {
title = "Deals";
imageSrc = "media/deals.jpg";
description = "Onze beste deals met de beste prijzen!";
price = 10.00;
} else if (item === 'Soepen') {
title = "Soepen";
imageSrc = "media/soep.jpg";
description = "Soep van de dag! (Allergieën? Meld het bij ons!)";
price = 2.50;
} else if (item === 'Salades') {
title = "Salades";
imageSrc = "media/salade.jpg";
description = "Een heerlijke salade met verse groenten en een dressing naar keuze.";
price = 3.00;
} else if (item === 'Placeholder2') {
title = "Placeholder 2";
imageSrc = "";
description = "Beschrijving voor Placeholder 2.";
price = 0;
} }
// Update de inhoud van het modaal venster // Voeg de items toe aan de weergave
document.getElementById("modal-title").innerText = title; items.forEach(item => {
document.getElementById("modal-image").src = imageSrc; const productBox = document.createElement('div');
document.getElementById("modal-description").innerText = description; productBox.classList.add('product-box');
document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`; productBox.onclick = () => showItemDetails(item);
document.getElementById("add-to-cart").onclick = function() {
addToCart({ title, price }); productBox.innerHTML = `
<img src="${item.imageSrc}" alt="${item.title}">
<h3>${item.title}</h3>
<p>€${item.price.toFixed(2)}</p>
`;
productDisplay.appendChild(productBox);
});
}
// Functie om de details van een item weer te geven in het modaal
function showItemDetails(item) {
const modalTitle = document.getElementById('modal-title');
const modalImage = document.getElementById('modal-image');
const modalDescription = document.getElementById('modal-description');
const modalPrice = document.getElementById('modal-price');
const addToCartButton = document.getElementById('add-to-cart');
modalTitle.innerText = item.title;
modalImage.src = item.imageSrc;
modalDescription.innerText = `Beschrijving van ${item.title}`;
modalPrice.innerText = `Prijs: €${item.price.toFixed(2)}`;
addToCartButton.onclick = function() {
addToCart({ title: item.title, price: item.price });
}; };
// Zet het modaal venster zichtbaar document.getElementById('modal').style.display = 'block';
document.getElementById("modal").style.display = "block";
} }
// Functie om het modaal venster te sluiten // Functie om het modaal venster te sluiten
function closeModal() { function closeModal() {
document.getElementById("modal").style.display = "none"; document.getElementById('modal').style.display = 'none';
}
// Zorg ervoor dat het modaal venster sluit wanneer er buiten het venster wordt geklikt
window.onclick = function(event) {
if (event.target == document.getElementById("modal")) {
closeModal();
}
} }

83
website/style.css
View File

@@ -3,8 +3,8 @@ body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: space-between; /* Ensure the body content is spaced between */ justify-content: space-between;
background-color: #f2c14e; /* Set the background color to yellow */ background-color: #f2c14e;
} }
/* Linkerkant menu */ /* Linkerkant menu */
@@ -14,22 +14,15 @@ body {
padding: 20px; padding: 20px;
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
order: 1; /* Ensure the menu is on the left */
}
.menu-list h2 {
color: #d32f2f;
font-size: 2em;
margin-bottom: 20px;
} }
.menu-item { .menu-item {
background-color: #fff; background-color: #fff;
padding: 20px; /* Increase padding for larger buttons */ padding: 20px;
margin: 10px 0; margin: 10px 0;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 1.5em; /* Increase font size for larger buttons */ font-size: 1.5em;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@@ -38,12 +31,13 @@ body {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
/* Productweergave in mooie hokjes */ /* Productweergave in een grid */
.product-display { .product-display {
width: 70%; width: 70%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 20px; padding: 20px;
justify-content: space-around;
} }
.product-box { .product-box {
@@ -54,26 +48,20 @@ body {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
} }
.menu-detail img { .product-box:hover {
width: 70%; transform: scale(1.05);
max-width: 300px;
max-height: 400px;
margin-bottom: 20px;
} }
.menu-detail h2 { .product-box img {
color: #d32f2f; width: 100%;
margin: 10px 0; max-height: 150px;
object-fit: cover;
} }
.menu-item:hover { /* Modaal venster */
background-color: #f59e42;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Modaal venster (pop-up) */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@@ -83,25 +71,24 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
overflow: auto; /* Allow scrolling within the modal */
} }
.modal-content { .modal-content {
background-color: white; background-color: white;
margin: 5% auto; /* Reduce margin to fit more content */ margin: 5% auto;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
width: 80%; /* Increase width to fit more content */ width: 80%;
max-width: 600px; /* Set a maximum width */ max-width: 600px;
text-align: center; text-align: center;
max-height: 90vh; /* Ensure the modal content fits within the viewport height */ max-height: 90vh;
overflow-y: auto; /* Allow vertical scrolling within the modal */ overflow-y: auto;
} }
.modal img { .modal img {
width: 100%; width: 100%;
max-width: 300px; /* Ensure the image fits within the modal */ max-width: 300px;
height: auto; /* Maintain aspect ratio */ height: auto;
margin: 20px 0; margin: 20px 0;
} }
@@ -114,6 +101,23 @@ body {
cursor: pointer; cursor: pointer;
} }
/* Winkelmandje */
.cart {
width: 25%;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.cart ul {
list-style-type: none;
padding: 0;
}
.cart li {
margin-bottom: 10px;
}
#add-to-cart { #add-to-cart {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
@@ -121,19 +125,8 @@ body {
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
margin-top: 20px;
} }
#add-to-cart:hover { #add-to-cart:hover {
background-color: #45a049; background-color: #45a049;
} }
/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #f2c14e;
position: fixed;
bottom: 0;
width: 100%;
}