Update templates/menu.html

templates/menu.html

@@ -9,169 +9,175 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
     body {
-        font-family: Arial, sans-serif;
-        background-color: #fdf4e3; /* Updated background color */
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-    }
-    .container {
-        max-width: 900px;
-    }
-    .menu-card {
-        max-width: 350px;
-        border-radius: 15px;
-        overflow: hidden;
-        background-color: #fff;
-        margin: auto;
-    }
-    .menu-image {
-        height: 200px;
-        width: 100%;
-        object-fit: cover;
-        border-radius: 15px 15px 0 0;
-    }
-    .card-title {
-        font-size: 1.2rem;
-        font-weight: bold;
-    }
-    .card-text {
-        font-size: 1rem;
-        color: #6c757d;
-    }
-    .btn-primary {
-        font-size: 14px;
-        font-weight: bold;
-        border-radius: 5px;
-        width: 100px;
-        background-color: #0FAA39; /* Updated button background color */
-        border-color: #28a745;
-        
-    }
-    .btn-primary:hover {
-        background-color: #0FAA39;
-        border-color: #ffffff;
-    }
-    .btn-primary:active,
-    .btn-primary:focus {
-        background-color: #4a5d68;
-        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;
-        padding: 10px 20px;
-        border-radius: 30px;
-        font-size: 1rem;
-        font-weight: bold;
-        text-decoration: none;
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-        display: flex;
-        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;
-        border-radius: 50%;
-        background-color: #5bbfc1;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-size: 20px;
-        font-weight: bold;
-    }
-    .dropdown-menu {
-        position: absolute;
-        right: 0;
-        top: 100%;
-        background-color: #fff;
-        border-radius: 5px;
-        width: 200px; /* Adjust width as needed */
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-        display: none;
-    }
-    .avatar-dropdown-container:hover .dropdown-menu {
-        display: block;
-    }
-    .dropdown-menu .dropdown-item {
-        padding: 10px 15px;
-        text-decoration: none;
-        color: #333;
-        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 */
-        left: 50%;
-        transform: translateX(-50%);
-        width: 80%;
-        max-width: 600px;
-        z-index: 999; /* Keep it above content */
-        background-color: white;
-        padding: 10px;
-        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: 120px !important; /* Increase spacing below search bar */
-    }
-    /* Ensure the container has enough margin so nothing is overlapped */
-    .container {
-        margin-top: 180px; /* Adjust spacing based on navbar and search bar */
-    }
-    .fixed-top-bar {
+    font-family: Arial, sans-serif;
+    background-color: #fdf4e3; /* Updated background color */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+.container {
+    max-width: 900px;
+    /*margin-top: 10px; /* Adjust spacing to control space between filter and menu */
+}
+.menu-card {
+    max-width: 350px;
+    border-radius: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    margin: auto;
+}
+.menu-image {
+    height: 200px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 15px 15px 0 0;
+}
+.card-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+.card-text {
+    font-size: 1rem;
+    color: #6c757d;
+}
+.btn-primary {
+    font-size: 13px;
+    font-weight: bold;
+    border-radius: 5px;
+    width: 100px;
+    background-color: #0FAA39; /* Updated button background color */
+    border-color: #0FAA39;
+}
+.btn-primary:hover {
+    background-color: #0FAA39;
+    border-color: #ffffff;
+}
+.btn-primary:active,
+.btn-primary:focus {
+    background-color: #4a5d68;
+    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;
+    padding: 10px 20px;
+    border-radius: 30px;
+    font-size: 1rem;
+    font-weight: bold;
+    text-decoration: none;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    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;
+    border-radius: 50%;
+    background-color: #5bbfc1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+}
+.dropdown-menu {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+    width: 200px; /* Adjust width as needed */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    display: none;
+}
+.avatar-dropdown-container:hover .dropdown-menu {
+    display: block;
+}
+.dropdown-menu .dropdown-item {
+    padding: 10px 15px;
+    text-decoration: none;
+    color: #333;
+    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 */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    max-width: 600px;
+    z-index: 999; /* Keep it above content */
+    background-color: white;
+    padding: 10px;
+    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 */
     top: 0;
     left: 0;
     width: 100%;
-    height: 54px; /* Adjust the height as needed */
-    z-index: 1000;
+    height: 54px;
     background-color: #FF6B35;
     color: white;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center; /* Vertically align items */
-    z-index: 10000; /* Make sure it's at the top */
+    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: center;
+    align-items: right;
     justify-content: center;
 }
-
 .search-bar-container {
+    padding: 10px;
     position: absolute;
     left: 20px;
     top: 50%;
@@ -181,105 +187,149 @@
     align-items: center;
     width: 300px; /* Adjust width as needed */
 }
-
 .search-bar-container input {
-    width: 100%;
+    width: 85%;
     padding: 8px 10px 8px 30px; /* Add padding for the icon */
     font-size: 16px;
-    border-radius: 20px;
+    border-radius: 10px;
     border: none;
 }
-
 .search-icon {
     position: absolute;
-    left: 10px; /* Position the icon inside the input box */
+    left: 15px; /* Position the icon inside the input box */
     font-size: 20px;
     color: #888; /* Icon color */
 }
-
-    /* Style for customization sections */
-    .addon-section {
-        background-color: #f8f9fa; /* Light gray background */
-        border: 2px solid #ff6b35; /* Border color */
-        border-radius: 8px;
-        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: #4a4848;
-    }
-    /* Style for add-on checkboxes */
-    .addon-section .form-check {
-        margin-left: 10px;
-    }
-
-    /* Category Filter with Custom Radio Buttons */
-    form.text-center.mb-4 {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .form-check {
-        display: inline-block;
-        margin-right: 15px;
-        margin-bottom: 15px; /* Add space between buttons */
-    }
-
-    .form-check-inline {
-        display: inline-block;
-        margin-right: 10px;
-    }
-
-    .form-check-label {
-        font-size: 16px;
-        margin-left: 8px; /* Space between radio button and label */
-    }
-
-    .custom-radio {
-        appearance: none;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        width: 20px;
-        height: 20px;
-        border: 3px solid #4CAF50; /* Green border */
-        border-radius: 50%;
-        margin-right: -5px; /* Increased spacing between button and label */
-        outline: none;
-        cursor: pointer;
-        position: relative;
-        display: inline-block;
-    }
-
-    .custom-radio:checked {
-        background-color: #4CAF50;  /* Green color when checked */
-        border-color: #4CAF50;  /* Matching border color */
-    }
-
-    .custom-radio:checked::after {
-        content: '';
-        position: absolute;
-        top: 5px;
-        left: 5px;
-        /*width: 8px;
-        height: 8px;
-        background-color: #fff;*/
-        border-radius: 50%;
+/* Style for customization sections */
+.addon-section {
+    background-color: #f8f9fa; /* Light gray background */
+    border: 2px solid #ff6b35; /* Border color */
+    border-radius: 8px;
+    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: #444;
+}
+/* Style for add-on checkboxes */
+.addon-section .form-check {
+    margin-left: 10px;
+}
+/* Category Filter with Custom Radio Buttons */
+form.text-center.mb-4 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 5px; /* Reduce bottom margin */
+}
+.form-check {
+    display: inline-block;
+    margin-right: 5px; /* Reduced space between radio button and label */
+    margin-bottom: 0; /* Remove bottom margin */
+    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;
+    margin-left: 0px; /* Spacing between radio button and label */
+    vertical-align: middle; /* Align label vertically */
+}
+.custom-radio {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 3px solid #4CAF50; /* Green border */
+    border-radius: 50%;
+    outline: none;
+    cursor: pointer;
+    position: relative;
+    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;
+    top: 5px;
+    left: 5px;
+    border-radius: 50%;
+}
+.custom-radio:hover {
+    border-color: #388E3C;
+}
+/* Optional: Style the labels */
+.form-check-label {
+    font-size: 16px;
+    margin-left: 5px; /* Space between the radio button and the label */
+}
+.cart-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.modal-footer {
+    display: flex;
+    align-items: center;
+    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 */
+    font-weight: bold; /* Bold text */
+    padding: 10px 20px; /* Adjust padding to make the button look better */
+    height: 40px; /* Match the height with quantity buttons */
+    display: flex;
+    justify-content: center;
+    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 */
     }
-
-    .custom-radio:hover {
-        border-color: #388E3C;
+    .modal-footer .btn {
+        height: 35px; /* Smaller buttons for small screens */
     }
-
-    /* Optional: Style the labels */
-    .form-check-label {
-        font-size: 16px;
-        margin-left: 8px; /* Space between the radio button and the label */
+    .modal-footer .form-control {
+        width: 40px; /* Adjust input size for smaller screens */
+        height: 35px;
     }
+}
 </style>
 </head>
 <body>