Update templates/menu.html (#10)

- Update templates/menu.html (c2086350e4206775c2fb4edb9a9cc1c65d97e7c8)


Co-authored-by: D Satish Chandra <[email protected]>

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;
@@ -18,7 +18,6 @@
 }
 .container {
     max-width: 900px;
-    /*margin-top: 10px; /* Adjust spacing to control space between filter and menu */
 }
 .menu-card {
     max-width: 350px;
@@ -26,16 +25,19 @@
     overflow: hidden;
     background-color: #fff;
     margin: auto;
+    display: flex;
+    flex-direction: column;
 }
 .menu-image {
-    height: 200px;
-    width: 100%;
-    object-fit: cover;
-    border-radius: 15px 15px 0 0;
+    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;
@@ -203,28 +205,27 @@ h1.text-center {
 /* Style for customization sections */
 .addon-section {
     background-color: #fff; /* Light gray background */
-    border: 2px solid #ff6b35; /* Border color */
+    border: 2px solid #6c757d; /* 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: #666;
+    /*color: #6c757d; */
 }
 /* Style for add-on checkboxes */
 .addon-section .form-check {
     margin-left: 10px;
+    color: #6c757d;
+    
 }
 /* Category Filter with Custom Radio Buttons */
 form.text-center.mb-4 {
     display: flex;
-    /*flex-wrap: wrap;  /* Allow wrapping if needed */
-    /*gap: 15px;/* Add gap between the radio buttons */
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -232,15 +233,14 @@ form.text-center.mb-4 {
 }
 .form-check {
     display: inline-block;
-    margin-right: 15px; /* Reduced space between radio button and label */
+    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 */
-    gap: 10px; /* Add gap between the radio button and the label */
-    /* vertical-align: middle; /* Align radio buttons vertically */
+    vertical-align: middle; /* Align radio buttons vertically */
 }
 .form-check-inline {
     display: inline-block;
-    margin-right: 20px;  /* Decrease space between each radio button */
+    margin-right: 5px;  /* Decrease space between each radio button */
 }
 .form-check-label {
     display: inline-block;
@@ -248,6 +248,9 @@ form.text-center.mb-4 {
     margin-left: 5px; /* Spacing between radio button and label */
     vertical-align: middle; /* Align label vertically */
 }
+form-check-input addon-option{
+  color: #78706E;
+}     
 .custom-radio {
     appearance: none;
     -webkit-appearance: none;
@@ -256,11 +259,12 @@ form.text-center.mb-4 {
     height: 20px;
     border: 3px solid #4CAF50; /* Green border */
     border-radius: 50%;
+    margin-right: -5px; /* Reduced spacing between button and label */
     outline: none;
     cursor: pointer;
     position: relative;
     display: inline-block;
-   vertical-align: middle; /* Align vertically with text */
+    vertical-align: middle; /* Align vertically with text */
 }
 .custom-radio:checked {
     background-color: #4CAF50;  /* Green color when checked */
@@ -272,7 +276,6 @@ form.text-center.mb-4 {
     top: 5px;
     left: 5px;
     border-radius: 50%;
-    padding: 15px;
 }
 .custom-radio:hover {
     border-color: #388E3C;
@@ -280,7 +283,7 @@ form.text-center.mb-4 {
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;
-    margin-left: 0px; /* Space between the radio button and the label */
+    margin-left: 8px; /* Space between the radio button and the label */
 }
 .cart-container {
     display: flex;