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

lknlklk

Browse Source
This commit is contained in:
kitkatpotato16
2025-02-11 13:30:35 +01:00
parent 0a79c69b08
commit b2ee75f9ce
1 changed files with 0 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
index.html
View File

@@ -1,132 +0,0 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vista menu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
}
/* Linkerkant: Het menu */
.menu-list {
width: 30%;
background-color: #f2c14e;
padding: 20px;
height: 100vh;
overflow-y: auto;
}
.menu-list h2 {
color: #d32f2f;
font-size: 2em;
margin-bottom: 20px;
}
.menu-item {
background-color: #fff;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
cursor: pointer;
font-size: 1.2em;
}
.menu-item:hover {
background-color: #f59e42;
}
/* Rechterkant: Detail weergave */
.menu-detail {
width: 70%;
background-color: white;
padding: 20px;
display: none; /* Start verborgen */
}
.menu-detail img {
width: 100%;
max-width: 400px;
height: auto;
margin-bottom: 20px;
}
.menu-detail h2 {
color: #d32f2f;
font-size: 2em;
}
.menu-detail p {
font-size: 1.2em;
color: #555;
margin: 20px 0;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #f2c14e;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- Linkerkant menu -->
<div class="menu-list">
<h2>Menu</h2>
<div class="menu-item" onclick="showItemDetails('burger')">Burgers</div>
<div class="menu-item" onclick="showItemDetails('drinks')">Drinken</div>
<div class="menu-item" onclick="showItemDetails('fries')">Frietjes</div>
</div>
<!-- Rechterkant detailweergave -->
<div id="menu-detail" class="menu-detail">
<h2 id="item-title">Selecteer een item</h2>
<img id="item-image" src="" alt="">
<p id="item-description"></p>
</div>
<footer>
<p>&copy; 2025 McDonald's</p>
</footer>
<script>
// Functie om de details van een geselecteerd item weer te geven
function showItemDetails(item) {
var title = "";
var image = "";
var description = "";
// Afhankelijk van het geselecteerde item, pas de details aan
if (item === 'burger') {
title = "Big Mac";
image = "https://via.placeholder.com/400x300?text=Big+Mac";
description = "De iconische burger met twee rundvleesburgers, sla, kaas, pickles, ui, en speciale saus.";
} else if (item === 'drinks') {
title = "Coca-Cola";
image = "https://via.placeholder.com/400x300?text=Coca-Cola";
description = "Verfrissende Coca-Cola om je maaltijd compleet te maken.";
} else if (item === 'fries') {
title = "Frietjes";
image = "https://via.placeholder.com/400x300?text=Frietjes";
description = "Knapperige, gouden frietjes geserveerd met zout.";
}
// Toon de details aan de rechterkant
document.getElementById("item-title").innerText = title;
document.getElementById("item-image").src = image;
document.getElementById("item-description").innerText = description;
// Zorg ervoor dat de detailsectie zichtbaar wordt
document.getElementById("menu-detail").style.display = "block";
}
</script>
</body>
</html>