Update templates/menu.html

templates/menu.html

@@ -333,6 +333,40 @@ form-check-input addon-option{
 .custom-radio:hover {
     border-color: #388E3C;
 }
+     /* Custom Toggle Switch Styling */
+.custom-toggle {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    position: relative;
+    width: 60px;
+    height: 34px;
+    background: #ccc;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.custom-toggle:checked {
+    background: #4caf50;
+}
+
+.custom-toggle:before {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 26px;
+    height: 26px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.3s;
+}
+
+.custom-toggle:checked:before {
+    transform: translateX(26px);
+}
+
 /* Optional: Style the labels */
 .form-check-label {
     font-size: 16px;
@@ -421,18 +455,23 @@ form-check-input addon-option{
     <label class="form-label fw-bold">Select a Category:</label>
     <div class="form-check form-check-inline">
         {% for category in categories %}
-            <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
+            <!-- Toggle switch instead of radio button -->
+            <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}"
+                class="custom-toggle"
                 {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
             <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
         {% endfor %}
-  </div>
-   <!-- Separate Customized Dish radio button in a new div to align it properly -->
-    <div class="form-check">
-        <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
+    </div>
+
+    <!-- Customized Dish toggle (styled like a switch) -->
+    <div class="form-check form-check-inline">
+        <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
+            class="custom-toggle"
             {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
         <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">