diff --git a/website/Cart/cart.css b/website/Cart/cart.css index 1eb73f3..637996e 100644 --- a/website/Cart/cart.css +++ b/website/Cart/cart.css @@ -35,7 +35,7 @@ display: flex; justify-content: space-between; padding: 10px 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #ff9d3b; } .cart-item button { diff --git a/website/Cart/cart.js b/website/Cart/cart.js index a4b1ecf..f4384ca 100644 --- a/website/Cart/cart.js +++ b/website/Cart/cart.js @@ -63,4 +63,15 @@ updateCartCountDisplay(); // Initialize the cart count on page load // Function to close the modal window function closeModal() { document.getElementById('modal').style.display = 'none'; -} \ No newline at end of file +<<<<<<< HEAD:website/cart.js +} + +let cartCount = 0; + +function addToCart() { + cartCount++; + document.querySelector('.cart-count').textContent = cartCount; +} +======= +} +>>>>>>> 1f418f9c8547c52f6394b681eb5ce02ee196b69a:website/Cart/cart.js diff --git a/website/style.css b/website/style.css index 1d6339e..715a80d 100644 --- a/website/style.css +++ b/website/style.css @@ -3,33 +3,26 @@ body { font-family: Arial, sans-serif; margin: 0; display: flex; - flex-direction: column; /* Change to column to accommodate the top bar */ - background-color: #f2c14e; + justify-content: space-between; + background-color: #ffffff; } -/* Top bar menu */ -.menu-bar { - width: 100%; - background-color: #f2c14e; - padding: 10px 0; - display: flex; - justify-content: space-around; - align-items: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - 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 */ -} - -.menu-bar.dark { - background-color: #d1a73e; /* Darker background color when modal is open */ +/* Linkerkant menu */ +.menu-list { + width: 25%; + background-color: #d7d7d7; + padding: 20px; + height: 100vh; + overflow-y: auto; } .menu-item { background-color: #fff; padding: 10px 20px; margin: 5px; + background-color: #ff9d3b; + padding: 20px; + margin: 10px 0; border-radius: 8px; cursor: pointer; font-size: 1.2em; @@ -37,7 +30,7 @@ body { } .menu-item:hover { - background-color: #f59e42; + background-color: #ff9d3b; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } @@ -60,6 +53,9 @@ body { text-align: center; cursor: pointer; transition: all 0.3s ease; + background-color: #e3e3e3 ; + + } .product-box:hover {