diff --git a/website/Cart/cart.js b/website/Cart/cart.js
index bf4445a..3d1d9f0 100644
--- a/website/Cart/cart.js
+++ b/website/Cart/cart.js
@@ -1,10 +1,11 @@
// Array to hold items added to the shopping cart
-const cart = [];
-let cartCount = 0; // Initialize cart count
+const cart = JSON.parse(localStorage.getItem('cart')) || [];
+let cartCount = cart.length; // Initialize cart count
// Function to add an item to the shopping cart
function addToCart(item) {
- cart.unshift(item); // Add item to the beginning of the cart array
+ cart.push(item); // Add item to the cart array
+ localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
cartCount++; // Increment cart count
updateCartCountDisplay(); // Update the cart count display
@@ -41,6 +42,7 @@ function updateCart() {
// Function to remove an item from the shopping cart
function removeFromCart(index) {
cart.splice(index, 1);
+ localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
cartCount--; // Decrement cart count
updateCartCountDisplay(); // Update the cart count display
@@ -54,23 +56,11 @@ function updateCartCountDisplay() {
}
}
-
// Initial calls
updateCart();
updateCartCountDisplay(); // Initialize the cart count on page load
-
// Function to close the modal window
function closeModal() {
document.getElementById('modal').style.display = 'none';
-<<<<<<< HEAD:website/cart.js
}
-let cartCount = 0;
-
-function addToCart() {
- cartCount++;
- document.querySelector('.cart-count').textContent = cartCount;
-}
-=======
-
->>>>>>> 1f418f9c8547c52f6394b681eb5ce02ee196b69a:website/Cart/cart.js
\ No newline at end of file
diff --git a/website/index.html b/website/index.html
index 60a9b98..6d3ad97 100644
--- a/website/index.html
+++ b/website/index.html
@@ -6,7 +6,6 @@
Het hoofdmenu van de Mees
-
@@ -14,6 +13,9 @@
+
+ 
+
diff --git a/website/media/logo.png b/website/media/logo.png
new file mode 100644
index 0000000..fe61b23
Binary files /dev/null and b/website/media/logo.png differ
diff --git a/website/script.js b/website/script.js
index 7fa8b44..60da581 100644
--- a/website/script.js
+++ b/website/script.js
@@ -97,6 +97,16 @@ function showCategory(category) {
productDisplay.appendChild(productBox);
});
+
+ // Transition the menu bar to the top
+ document.querySelector('.menu-bar').classList.add('top');
+
+ // Show the shopping cart and cart icon
+ document.getElementById('cart').classList.add('visible');
+ document.querySelector('.cart-icon').classList.add('visible');
+
+ // Hide the logo
+ document.querySelector('.logo').classList.add('hidden');
}
// Functie om de details van een item weer te geven in het modaal
@@ -112,8 +122,7 @@ function showItemDetails(item) {
document.getElementById("modal-description").innerText = description;
document.getElementById("modal-price").innerText = `Prijs: €${price.toFixed(2)}`;
document.getElementById("add-to-cart").onclick = function() {
- const quantity = parseInt(document.getElementById("item-quantity").value);
- addToCart({ title, price, quantity });
+ addToCart({ title, price });
};
document.getElementById('modal').style.display = 'block';
@@ -160,9 +169,7 @@ function getDescription(title) {
// Functie om een item aan het winkelwagentje toe te voegen
function addToCart(item) {
const cart = JSON.parse(localStorage.getItem('cart')) || [];
- for (let i = 0; i < item.quantity; i++) {
- cart.push(item);
- }
+ cart.push(item); // Add item to the cart array
localStorage.setItem('cart', JSON.stringify(cart));
updateCart();
}
diff --git a/website/style.css b/website/style.css
index 5313a92..2b844fc 100644
--- a/website/style.css
+++ b/website/style.css
@@ -13,13 +13,25 @@ body {
background-color: #f2c14e;
padding: 10px 0;
display: flex;
- justify-content: space-around;
+ flex-wrap: wrap; /* Allow wrapping of menu items */
+ justify-content: center; /* Center the menu items */
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ position: absolute; /* Initially position in the middle */
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1000; /* Ensure it is above other elements */
+ transition: all 0.3s ease; /* Add transition for position and background color */
+}
+
+.menu-bar.top {
position: fixed; /* Fix the top bar to the top */
top: 0;
- z-index: 1000; /* Ensure it is above other elements */
- transition: background-color 0.3s ease; /* Add transition for background color */
+ left: 0;
+ transform: translate(0, 0);
+ justify-content: space-around; /* Spread the menu items */
+ flex-wrap: nowrap; /* Ensure all items are in a single row */
}
.menu-bar.dark {
@@ -34,11 +46,12 @@ body {
cursor: pointer;
font-size: 1.2em;
transition: all 0.3s ease;
+ flex: 1 1 calc(33.333% - 10px); /* Allow 3 items per row with margin */
+ text-align: center; /* Center text inside the menu item */
}
-.menu-item:hover {
- background-color: #f59e42;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+.menu-bar.top .menu-item {
+ flex: none; /* Remove flex-grow to fit all items in a single row */
}
/* Productweergave in een grid */
@@ -130,6 +143,7 @@ body {
/* Winkelwagen-icoon */
.cart-icon {
+ display: none; /* Initially hide the cart icon */
position: fixed;
top: 80px; /* Move the cart icon down */
right: 20px;
@@ -142,6 +156,10 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
+.cart-icon.visible {
+ display: block; /* Show the cart icon when the 'visible' class is added */
+}
+
.cart-icon:hover {
background-color: #e65c00;
}
@@ -201,4 +219,92 @@ body {
bottom: 0; /* Position at the bottom */
height: auto; /* Adjust height */
}
+}
+
+/* Winkelmandje sectie */
+.cart {
+ display: none; /* Initially hide the cart */
+ width: 15%; /* Make the cart a bit smaller */
+ padding: 20px;
+ background-color: #fff;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ margin-top: 80px; /* Increase margin to ensure it starts below the categories bar */
+ position: fixed; /* Fix the cart to the right side */
+ right: 0; /* Align the cart to the right */
+ top: 60px; /* Ensure it starts below the categories bar */
+ flex-direction: column; /* Ensure the content is arranged in a column */
+}
+
+.cart ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+.cart li {
+ margin-bottom: 10px;
+}
+
+.cart-item button {
+ background-color: #d32f2f;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+
+.cart-item {
+ display: flex;
+ justify-content: space-between;
+ padding: 10px 0;
+ border-bottom: 1px solid #ff9d3b;
+}
+
+.cart-item button {
+ background-color: #d32f2f;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.cart-item button:hover {
+ background-color: #b71c1c;
+}
+
+#order-button {
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ border-radius: 5px;
+ width: 100%;
+ text-align: center;
+ margin-top: 20px;
+ display: none; /* Hide the button by default */
+ align-self: flex-end; /* Ensure the button is at the bottom */
+}
+
+#order-button:hover {
+ background-color: #45a049;
+}
+
+.cart.visible {
+ display: flex; /* Show the cart when the 'visible' class is added */
+}
+
+.logo {
+ width: 100%;
+ max-width: 200px;
+ margin: 20px auto;
+ display: block;
+ transition: opacity 0.3s ease; /* Add transition for smooth hiding */
+}
+
+.logo.hidden {
+ opacity: 0; /* Hide the logo */
+ visibility: hidden; /* Ensure the logo is not clickable */
}
\ No newline at end of file