diff --git a/website/index.html b/website/index.html
index 109b8bf..08dc0e4 100644
--- a/website/index.html
+++ b/website/index.html
@@ -16,11 +16,11 @@
-
-
-
-
-
+
+
+
+
+
@@ -34,7 +34,7 @@
diff --git a/website/media/broodje-gezond.jpg b/website/media/broodje-gezond.jpg
new file mode 100644
index 0000000..804ac56
Binary files /dev/null and b/website/media/broodje-gezond.jpg differ
diff --git a/website/media/frikandel.jpg b/website/media/frikandel.jpg
new file mode 100644
index 0000000..68b8abf
Binary files /dev/null and b/website/media/frikandel.jpg differ
diff --git a/website/media/ijs.png b/website/media/ijs.png
new file mode 100644
index 0000000..abd88ab
Binary files /dev/null and b/website/media/ijs.png differ
diff --git a/website/media/spa.jpg b/website/media/spa.jpg
new file mode 100644
index 0000000..d3fb895
Binary files /dev/null and b/website/media/spa.jpg differ
diff --git a/website/script.js b/website/script.js
index 7f38dd2..26a9af4 100644
--- a/website/script.js
+++ b/website/script.js
@@ -2,62 +2,42 @@
function showItemDetails(item) {
var items = [];
- // Afhankelijk van het geselecteerde item, voeg de producten toe
- if (item === 'Broodjes') {
- items = [
- {
- title: "Broodje Gezond",
- image: "https://thumbs.dreamstime.com/b/submarine-sandwich-ham-cheese-clipping-path-egg-tomato-cucumber-lettuce-white-48580716.jpg",
- description: "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus."
+ // Afhankelijk van het geselecteerde item, pas de details aan
+ if (item === 'Broodjes') {
+ title = "Broodje gezond";
+ imageSrc = "media/broodje-gezond.jpg";
+ description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
+ } else if (item === 'drinks') {
+ title = "Spa water";
+ imageSrc = "media/spa.jpg";
+ description = "Koude verfrissende water";
+ } else if (item === 'Snacks') {
+ title = "Frikandel";
+ imageSrc = "media/frikandel.jpg";
+ description = "Een frikandel, dat wil je wel!";
+ } else if (item === 'deserts') {
+ title = "Ijsjes";
+ imageSrc = "media/ijs.png";
+ description = "Een lekker ijsje met vele smaken, zoals aardbei, vannille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)";
+ } else if (item === 'Deals') {
+ title = "Deals";
+ imageSrc = "https://www.google.com/url?sa=i&url=https%3A%2F%2Farchies.com%2Fmeal-deals%2F&psig=AOvVaw1_NfFf4gcmKiCqOgfey2ct&ust=1739435784222000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCPj9m7_dvYsDFQAAAAAdAAAAABAE";
+ description = "Onze beste deals met de beste prijzenn!";
+ } else if (item === 'Placeholder1') {
+ title = "Placeholder 1";
+ imageSrc = "";
+ description = "Beschrijving voor Placeholder 1.";
+ } else if (item === 'Placeholder2') {
+ title = "Placeholder 2";
+ imageSrc = "";
+ description = "Beschrijving voor Placeholder 2.";
}
- ];
- } else if (item === 'drinks') {
- items = [
- {
- title: "Spa Water",
- image: "https://m.media-amazon.com/images/I/71VrczELeaL._AC_SY741_.jpg",
- description: "Koude verfrissende water."
- }
- ];
- } else if (item === 'Snacks') {
- items = [
- {
- title: "Frikandel",
- image: "https://boshuis.huisjebezorgd.nl/wp-content/uploads/2020/03/29512948_652505005141152_1601506864166600704_o.jpg",
- description: "Een frikandel, dat wil je wel!"
- }
- ];
- } else if (item === 'deserts') {
- items = [
- {
- title: "Ijsjes",
- image: "https://th.bing.com/th/id/R.5e81f369a0da6a92106391e7b0a5119b?rik=KD0kNGiRjGM22g&riu=http%3a%2f%2fwww.brookersicecream.com%2fwp-content%2fuploads%2f2018%2f09%2fIce-Cream-Fan.png&ehk=%2bfZOURa%2fKgmE4uuuESx9We3OBrwXpPaaMZpJaBJt4bo%3d&risl=&pid=ImgRaw&r=0",
- description: "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)."
- }
- ];
- }
+
- // Leeg de productweergave
- const productDisplay = document.getElementById('product-display');
- productDisplay.innerHTML = '';
-
- // Voeg de items toe aan de weergave
- items.forEach(item => {
- const productBox = document.createElement('div');
- productBox.classList.add('product-box');
- productBox.innerHTML = `
-
- ${item.title}
- `;
- productDisplay.appendChild(productBox);
- });
-}
-
-// Functie om het modaal venster te openen
-function openModal(title, image, description) {
- document.getElementById("modal-title").innerText = title;
- document.getElementById("modal-image").src = image;
- document.getElementById("modal-description").innerText = description;
+ // Toon de details aan de rechterkant
+ document.getElementById("item-title").innerText = title;
+ document.getElementById("item-image").src = imageSrc;
+ document.getElementById("item-description").innerText = description;
// Zet het modaal venster zichtbaar
document.getElementById("modal").style.display = "block";
diff --git a/website/style.css b/website/style.css
index deeedc3..079fd45 100644
--- a/website/style.css
+++ b/website/style.css
@@ -53,18 +53,14 @@ body {
cursor: pointer;
}
-.product-box img {
- width: 100%;
- height: auto;
- transition: transform 0.3s ease;
+.menu-detail img {
+ width: 70%;
+ max-width: 300px;
+ max-height: 400px;
+ margin-bottom: 20px;
}
-.product-box:hover img {
- transform: scale(1.1);
-}
-
-.product-box h3 {
- font-size: 1.1em;
+.menu-detail h2 {
color: #d32f2f;
margin: 10px 0;
}