Update templates/menu.html

templates/menu.html

@@ -8,7 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
-    body {
+   body {
     font-family: Arial, sans-serif;
     background-color: #fdf4e3; /* Updated background color */
     margin: 0;
@@ -16,11 +16,9 @@
     display: flex;
     flex-direction: column;
 }
-
 .container {
     max-width: 900px;
 }
-
 .menu-card {
     max-width: 350px;
     border-radius: 15px;
@@ -30,25 +28,21 @@
     display: flex;
     flex-direction: column;
 }
-
 .menu-image {
     height: 200px; /* Fixed height */
     width: 100%; /* Full width of the card */
     object-fit: fill; /* Ensure the image covers the area and maintains the aspect ratio */
     border-radius: 15px 15px 0 0; /* Rounded top corners */
 }
-
 .card-title {
     font-size: 1.2rem;
     font-weight: bold;
     margin: 10px 0;
 }
-
 .card-text {
     font-size: 1rem;
     color: #6c757d;
 }
-
 .btn-primary {
     font-size: 13px;
     font-weight: bold;
@@ -57,26 +51,22 @@
     background-color: #0FAA39; /* Updated button background color */
     border-color: #0FAA39;
 }
-
 .btn-primary:hover {
     background-color: #0FAA39;
-    border-color: #ffffff;
+    border-color: #0FAA39;
 }
-
 .btn-primary:active,
 .btn-primary:focus {
-    background-color: #4a5d68;
+    background-color: #0FAA39;
     border-color: #ffffff;
     box-shadow: none;
 }
-
 .view-cart-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
 }
-
 .view-cart-button {
     background-color: #0FAA39; /* Updated View Cart button background color */
     color: #fff;
@@ -90,16 +80,13 @@
     align-items: center;
     justify-content: center;
 }
-
 .view-cart-button:hover {
     background-color: #109835; /* Slightly darker shade for hover effect */
     text-decoration: none;
 }
-
 .avatar-dropdown-container {
     position: relative;
 }
-
 .avatar-icon {
     width: 40px;
     height: 40px;
@@ -113,7 +100,6 @@
     font-size: 20px;
     font-weight: bold;
 }
-
 .dropdown-menu {
     position: absolute;
     right: 0;
@@ -124,11 +110,19 @@
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
     display: none;
 }
-
 .avatar-dropdown-container:hover .dropdown-menu {
     display: block;
 }
-
+.avatar-dropdown-container {
+    position: absolute;
+    right: 20px; /* Adjust the value as needed to position it properly */
+    top: 50%; /* Adjust top to place it within the header */
+    transform: translateY(-50%); /* Correct the alignment to be perfectly centered */
+    display: flex;
+    align-items: right;
+    justify-content: center;
+}
+     
 .dropdown-menu .dropdown-item {
     padding: 10px 15px;
     text-decoration: none;
@@ -136,15 +130,12 @@
     border-bottom: 1px solid #ddd;
     display: block; /* Make each item stack vertically */
 }
-
 .dropdown-menu .dropdown-item:last-child {
     border-bottom: none; /* Remove the bottom border from the last item */
 }
-
 .dropdown-menu .dropdown-item:hover {
     background-color: #f1f1f1;
 }
-
 .fixed-search-container {
     position: absolute;
     top: 90px; /* Move it slightly lower */
@@ -158,25 +149,21 @@
     border-radius: 25px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 }
-
 /* Ensure the category filter dropdown does not overlap */
 form.text-center.mb-4 {
     margin-top: 10px; /* No margin at the top */
     margin-bottom: 0px; /* Small space at the bottom */
 }
-
 /* Ensure the container has enough margin so nothing is overlapped */
 .container {
     margin-top: 10px; /* Adjust spacing based on navbar and search bar */
     padding-top: 0 !important; /* Ensure no padding is added by default */
 }
-
 h1.text-center {
     margin-top: 10px; /* Reduced space above */
     padding-top: 0 !important; /* Removed padding */
     font-weight: semi-bold; /* Make the "Menu" text bold */
 }
-
 .fixed-top-bar {
     /* Remove the fixed positioning */
     position: relative; /* Change from fixed to relative */
@@ -192,16 +179,6 @@ h1.text-center {
     align-items: center; /* Vertically align items */
     z-index: 1000; /* Make sure it's still above other content */
 }
-.avatar-dropdown-container {
-    position: absolute;
-    right: 20px; /* Adjust the value as needed to position it properly */
-    top: 50%; /* Adjust top to place it within the header */
-    transform: translateY(-50%); /* Correct the alignment to be perfectly centered */
-    display: flex;
-    align-items: right;
-    justify-content: center;
-}
-
 .search-bar-container {
     padding: 10px;
     position: absolute;
@@ -213,7 +190,6 @@ h1.text-center {
     align-items: center;
     width: 300px; /* Adjust width as needed */
 }
-
 .search-bar-container input {
     width: 85%;
     padding: 8px 10px 8px 30px; /* Add padding for the icon */
@@ -221,14 +197,12 @@ h1.text-center {
     border-radius: 10px;
     border: none;
 }
-
 .search-icon {
     position: absolute;
     left: 15px; /* Position the icon inside the input box */
     font-size: 20px;
     color: #888; /* Icon color */
 }
-
 /* Style for customization sections */
 .addon-section {
     background-color: #fff; /* Light gray background */
@@ -237,22 +211,71 @@ h1.text-center {
     padding: 12px;
     margin-bottom: 10px; /* Spacing between sections */
 }
-
 /* Customization section title */
 .addon-section h6 {
     margin-bottom: 10px;
     font-size: 1.1rem;
     font-weight: bold;
-    /*color: #6c757d; */
+    color: #343a40; /* Darker title text */
 }
-
 /* Style for add-on checkboxes */
 .addon-section .form-check {
-    margin-left: 10px;
-    color: #6c757d;
-    
+     display: inline-flex; /* Display checkboxes horizontally */
+    align-items: center;  /* Align checkboxes and labels */
+    margin-left: 10px; /* Space between checkboxes */
+    color: #343a40; /* Darker text color */
+}
+/* Customize the default checkbox */
+.addon-section .form-check-input {
+    -webkit-appearance: none;  /* Remove default checkbox styling in Webkit browsers (e.g. Chrome, Safari) */
+    -moz-appearance: none;     /* Remove default checkbox styling in Firefox */
+    appearance: none;          /* Remove default checkbox styling in all browsers */
+    width: 20px;
+    height: 20px;
+    border: 2px solid #343a40; /* Darker border color */
+    border-radius: 5px;        /* Rounded corners */
+    background-color: #f0f0f0; /* Lighter gray background when unchecked */
+    position: relative;
+    margin-right: 10px;        /* Add space between the checkbox and label */
+}
+     
+/* Checked state for the custom checkbox */
+.addon-section .form-check-input:checked {
+    background-color: #006400;  /* Dark green background when checked */
+    border-color: #006400;      /* Dark green border when checked */
+}
+/* Add the check mark when checkbox is checked */
+.addon-section .form-check-input:checked::before {
+    content: '';  /* Unicode check mark */
+    font-size: 14px;
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    color: white;  /* White color for the check mark */
+}
+/* Hover effect for the checkboxes */
+.addon-section .form-check-input:hover {
+    /* background-color: #006400;  /* Slightly darker background on hover */
+}
+/* Focus effect on custom checkbox */
+.addon-section .form-check-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #006400;  /* Green focus outline */
+}
+/* Custom checkbox label styles */
+.addon-section .form-check-label {
+    font-size: 16px;
+    margin-left: 5px;
+    cursor: pointer;
+    display: inline-block;  /* Ensure label aligns correctly with checkbox */
+    vertical-align: middle; /* Align text vertically with the checkbox */
+}
+/* Fix alignment of text and checkbox */
+.addon-section .form-check input[type="checkbox"], 
+.addon-section .form-check label {
+    display: inline-block;
+    /* vertical-align: middle; /* Align text and checkboxes vertically */
 }
-
 /* Category Filter with Custom Radio Buttons */
 form.text-center.mb-4 {
     display: flex;
@@ -261,7 +284,6 @@ form.text-center.mb-4 {
     justify-content: center;
     margin-bottom: 5px; /* Reduce bottom margin */
 }
-
 .form-check {
     display: inline-block;
     margin-right: 5px; /* Reduced space between radio button and label */
@@ -269,12 +291,10 @@ form.text-center.mb-4 {
     margin-top: 10px; /* Adds space between categories and Customized Dish */
     vertical-align: middle; /* Align radio buttons vertically */
 }
-
 .form-check-inline {
     display: inline-block;
     margin-right: 5px;  /* Decrease space between each radio button */
 }
-
 .form-check-label {
     display: inline-block;
     font-size: 16px;
@@ -282,9 +302,8 @@ form.text-center.mb-4 {
     vertical-align: middle; /* Align label vertically */
 }
 form-check-input addon-option{
-  color: #78706E;
+  color: #333d47;
 }     
-
 .custom-radio {
     appearance: none;
     -webkit-appearance: none;
@@ -300,12 +319,10 @@ form-check-input addon-option{
     display: inline-block;
     vertical-align: middle; /* Align vertically with text */
 }
-
 .custom-radio:checked {
     background-color: #4CAF50;  /* Green color when checked */
     border-color: #4CAF50;  /* Matching border color */
 }
-
 .custom-radio:checked::after {
     content: '';
     position: relative;
@@ -313,17 +330,14 @@ form-check-input addon-option{
     left: 5px;
     border-radius: 50%;
 }
-
 .custom-radio:hover {
     border-color: #388E3C;
 }
-
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;
     margin-left: 8px; /* Space between the radio button and the label */
 }
-
 .cart-container {
     display: flex;
     align-items: center;
@@ -335,24 +349,20 @@ form-check-input addon-option{
     justify-content: space-between; /* Space between quantity and Add to Cart button */
     padding: 10px;
 }
-
 .modal-footer .d-flex {
     display: flex;
     align-items: center;
     gap: 10px; /* Space between quantity buttons */
 }
-
 .modal-footer .btn {
     height: 40px; /* Set consistent button height */
     padding: 0 15px; /* Adjust padding to fit inside the buttons */
 }
-
 .modal-footer .form-control {
     width: 50px; /* Fixed width for quantity input */
     height: 40px; /* Match the height of buttons */
     text-align: center; /* Center the value inside the input */
 }
-
 .modal-footer .btn-primary {
     background-color: #0FAA39; /* Green background for Add to Cart button */
     border-color: #0FAA39; /* Border color to match button background */
@@ -364,28 +374,23 @@ form-check-input addon-option{
     align-items: center;
     width: auto; /* Auto width to adjust to button text */
 }
-
 .modal-footer .btn-outline-secondary {
     height: 40px; /* Ensure quantity buttons are the same size */
     width: 40px; /* Make sure the buttons are square */
 }
-
 @media (max-width: 576px) {
     /* Responsive adjustments for smaller screens */
     .modal-dialog {
         max-width: 98%; /* Adjust modal width for smaller screens */
     }
-
     .modal-footer .btn {
         height: 35px; /* Smaller buttons for small screens */
     }
-
     .modal-footer .form-control {
         width: 40px; /* Adjust input size for smaller screens */
         height: 35px;
     }
 }
-
 </style>
 </head>
 <body>
@@ -411,7 +416,7 @@ form-check-input addon-option{
 </div>
 
 <!-- Category Filter with Custom Radio Buttons -->
-<form method="get" action="/Menu_page" class="text-center mb-4">
+<form method="get" action="/menu" class="text-center mb-4">
     <label class="form-label fw-bold">Select a Category:</label>
     <div class="form-check form-check-inline">
         {% for category in categories %}
@@ -427,7 +432,7 @@ form-check-input addon-option{
         <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
     </div>
 </form>
-
+  
   <!-- Show menu items only when Customized Dish is not selected -->
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
@@ -478,7 +483,7 @@ form-check-input addon-option{
 
     <!-- View Cart Button -->
     <div class="view-cart-container">
-        <a href="/cart" class="view-cart-button">
+        <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
             View Cart
         </a>
     </div>