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} -

${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; }