Update templates/menu.html

templates/menu.html

@@ -509,19 +509,23 @@
             align-items: flex-start; /* Align to the left */
             justify-content: flex-start; /* Align to the top */
             margin-bottom: 20px;
+            margin-left: 10px; /* Added 10px gap to the left */
         }
+        
         .form-label {
             font-size: 1.2rem;
             font-weight: 600;
             color: #333;
             margin-bottom: 10px;
         }
+        
         .toggle-container {
             display: flex;
             align-items: center;
             gap: 10px;
             margin: 8px 0;
         }
+        
         .custom-toggle {
             appearance: none;
             width: 48px;
@@ -532,9 +536,11 @@
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
+        
         .custom-toggle:checked {
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            background: linear-gradient(45deg, #32CD32, #3CB371); /* Changed to green color when checked */
         }
+        
         .custom-toggle::before {
             content: '';
             position: absolute;
@@ -547,14 +553,17 @@
             transition: transform 0.3s ease;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
+        
         .custom-toggle:checked::before {
-            transform: translateX(24px);
+            transform: translateX(24px); /* Moves the toggle to the right */
         }
+        
         .toggle-container label {
             font-size: 1rem;
             color: #333;
             cursor: pointer;
         }
+
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -1415,7 +1424,7 @@
         </div>
     </div>
 
-    <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
+   <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
             <!-- Veg Only Toggle -->
@@ -1435,6 +1444,7 @@
         </div>
     </form>
 
+
     <div class="container mt-4">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">