BiryaniHubflaskhema21

Sleeping

App Files Files Community

lokesh341 commited on Mar 27, 2025

Commit

686f4a7

verified ·

1 Parent(s): b3fc3b4

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +60 -63

templates/menu.html CHANGED Viewed

@@ -269,52 +269,6 @@
             justify-content: center;
             margin-bottom: 5px;
         }
-        .form-check {
-            display: inline-block;
-            margin-right: 5px;
-            margin-bottom: 0;
-            margin-top: 10px;
-            vertical-align: middle;
-        }
-        .form-check-inline {
-            display: inline-block;
-            margin-right: 5px;
-        }
-        .form-check-label {
-            display: inline-block;
-            font-size: 16px;
-            margin-left: 5px;
-            vertical-align: middle;
-        }
-        .custom-radio {
-            appearance: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            width: 20px;
-            height: 20px;
-            border: 3px solid #4CAF50;
-            border-radius: 50%;
-            margin-right: -5px;
-            outline: none;
-            cursor: pointer;
-            position: relative;
-            display: inline-block;
-            vertical-align: middle;
-        }
-        .custom-radio:checked {
-            background-color: #4CAF50;
-            border-color: #4CAF50;
-        }
-        .custom-radio:checked::after {
-            content: '';
-            position: relative;
-            top: 5px;
-            left: 5px;
-            border-radius: 50%;
-        }
-        .custom-radio:hover {
-            border-color: #388E3C;
-        }
         .modal-footer {
             display: flex;
             align-items: center;
@@ -369,10 +323,10 @@
             border-radius: 8px;
             padding: 10px;
             margin: 10px 15px;
-            display: none; /* Initially hidden */
         }
         .item-details.show {
-            display: block; /* Show when toggled */
         }
         .item-details h6 {
             font-size: 0.9rem;
@@ -403,6 +357,32 @@
         .toggle-details:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
@@ -424,20 +404,17 @@
         </div>
     </div>
-    <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 %}
-                <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
-                    {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
-                <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
             {% endfor %}
         </div>
-        <div class="form-check">
-            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
-                {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
-            <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
-        </div>
     </form>
     <div class="container mt-4">
@@ -495,12 +472,8 @@
                                         </div>
                                     </div>
                                 </div>
-                                <!-- Toggle Link for Details -->
                                 <div class="toggle-details" data-item-name="{{ item.Name }}">Show Details</div>
-                                <!-- Ingredients, Nutritional Info, and Allergens Section -->
-                                <div class="item-details" id="details-{{ item.Name | replace(' ', '-') }}">
-                                    <!-- Content will be populated by JavaScript -->
-                                </div>
                             </div>
                         </div>
                     {% endfor %}
@@ -736,6 +709,30 @@
                     this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
         });
         // Debounce Function for Search

             justify-content: center;
             margin-bottom: 5px;
         }
         .modal-footer {
             display: flex;
             align-items: center;
             border-radius: 8px;
             padding: 10px;
             margin: 10px 15px;
+            display: none;
         }
         .item-details.show {
+            display: block;
         }
         .item-details h6 {
             font-size: 0.9rem;
         .toggle-details:hover {
             text-decoration: underline;
         }
+        /* New Styles for Category Buttons */
+        .category-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            margin-top: 10px;
+        }
+        .category-button {
+            background-color: #fff;
+            border: 2px solid #0FAA39;
+            color: #0FAA39;
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .category-button.selected {
+            background-color: #0FAA39;
+            color: #fff;
+            border-color: #0FAA39;
+        }
+        .category-button:hover {
+            background-color: #e6f4ea;
+        }
     </style>
 </head>
 <body>
         </div>
     </div>
+    <!-- Updated Category Selection -->
+    <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
         <label class="form-label fw-bold">Select a Category:</label>
+        <div class="category-buttons">
             {% for category in categories %}
+                <button type="button" class="category-button {% if selected_category == category %}selected{% endif %}" data-category="{{ category }}">{{ category }}</button>
             {% endfor %}
+            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
         </div>
+        <!-- Hidden input to store the selected category -->
+        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
     <div class="container mt-4">
                                         </div>
                                     </div>
                                 </div>
                                 <div class="toggle-details" data-item-name="{{ item.Name }}">Show Details</div>
+                                <div class="item-details" id="details-{{ item.Name | replace(' ', '-') }}"></div>
                             </div>
                         </div>
                     {% endfor %}
                     this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
+            // Category Button Functionality
+            const categoryButtons = document.querySelectorAll('.category-button');
+            const categoryForm = document.getElementById('categoryForm');
+            const selectedCategoryInput = document.getElementById('selectedCategoryInput');
+            // Set default category to "All" if none is selected
+            if (!selectedCategoryInput.value) {
+                selectedCategoryInput.value = "All";
+                document.querySelector('.category-button[data-category="All"]').classList.add('selected');
+            }
+            categoryButtons.forEach(button => {
+                button.addEventListener('click', function () {
+                    // Remove 'selected' class from all buttons
+                    categoryButtons.forEach(btn => btn.classList.remove('selected'));
+                    // Add 'selected' class to the clicked button
+                    this.classList.add('selected');
+                    // Update the hidden input value
+                    selectedCategoryInput.value = this.getAttribute('data-category');
+                    // Submit the form
+                    categoryForm.submit();
+                });
+            });
         });
         // Debounce Function for Search