BiryaniHubflaskhema21

Sleeping

App Files Files Community

lokesh341 commited on Mar 27, 2025

Commit

0b8a5a2

verified ·

1 Parent(s): 686f4a7

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +61 -30

templates/menu.html CHANGED Viewed

@@ -188,27 +188,32 @@
             z-index: 1000;
         }
         .search-bar-container {
-            padding: 10px;
             position: absolute;
-            left: 20px;
             top: 50%;
-            transform: translateY(-50%);
             display: flex;
-            justify-content: flex-start;
             align-items: center;
             width: 300px;
         }
         .search-bar-container input {
-            width: 85%;
-            padding: 8px 10px 8px 30px;
             font-size: 16px;
-            border-radius: 10px;
             border: none;
         }
         .search-icon {
             position: absolute;
             left: 15px;
-            font-size: 20px;
             color: #888;
         }
         .addon-section {
@@ -304,19 +309,6 @@
             height: 40px;
             width: 40px;
         }
-        @media (max-width: 576px) {
-            .modal-dialog {
-                max-width: 98%;
-            }
-            .modal-footer .btn {
-                height: 35px;
-                padding: 0 12px;
-            }
-            .modal-footer .form-control {
-                width: 40px;
-                height: 35px;
-            }
-        }
         /* Styles for Ingredients, Nutritional Info, and Allergens */
         .item-details {
             background-color: #f8f9fa;
@@ -357,7 +349,7 @@
         .toggle-details:hover {
             text-decoration: underline;
         }
-        /* New Styles for Category Buttons */
         .category-buttons {
             display: flex;
             flex-wrap: wrap;
@@ -383,6 +375,52 @@
         .category-button:hover {
             background-color: #e6f4ea;
         }
     </style>
 </head>
 <body>
@@ -404,7 +442,6 @@
         </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">
@@ -413,7 +450,6 @@
             {% 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>
@@ -715,7 +751,6 @@
             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');
@@ -723,13 +758,9 @@
             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();
                 });
             });
@@ -1091,7 +1122,7 @@
             document.body.appendChild(successNotification);
             setTimeout(() => {
                 successNotification.remove();
-            }, 2000);
         }
         document.addEventListener('DOMContentLoaded', function () {

             z-index: 1000;
         }
         .search-bar-container {
             position: absolute;
+            left: 50%;
             top: 50%;
+            transform: translate(-50%, -50%);
             display: flex;
             align-items: center;
             width: 300px;
+            max-width: 90%;
         }
         .search-bar-container input {
+            width: 100%;
+            padding: 8px 15px 8px 40px;
             font-size: 16px;
+            border-radius: 25px;
             border: none;
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            outline: none;
+        }
+        .search-bar-container input::placeholder {
+            color: #888;
         }
         .search-icon {
             position: absolute;
             left: 15px;
+            font-size: 18px;
             color: #888;
         }
         .addon-section {
             height: 40px;
             width: 40px;
         }
         /* Styles for Ingredients, Nutritional Info, and Allergens */
         .item-details {
             background-color: #f8f9fa;
         .toggle-details:hover {
             text-decoration: underline;
         }
+        /* Category Buttons */
         .category-buttons {
             display: flex;
             flex-wrap: wrap;
         .category-button:hover {
             background-color: #e6f4ea;
         }
+        /* Mobile View Adjustments */
+        @media (max-width: 576px) {
+            .fixed-top-bar {
+                height: 60px;
+                padding: 10px;
+            }
+            .search-bar-container {
+                width: 80%;
+                max-width: 100%;
+            }
+            .search-bar-container input {
+                padding: 6px 12px 6px 35px;
+                font-size: 14px;
+                border-radius: 20px;
+            }
+            .search-icon {
+                left: 12px;
+                font-size: 16px;
+            }
+            .avatar-dropdown-container {
+                right: 10px;
+            }
+            .avatar-icon {
+                width: 35px;
+                height: 35px;
+                font-size: 18px;
+            }
+            .category-buttons {
+                gap: 8px;
+            }
+            .category-button {
+                padding: 4px 12px;
+                font-size: 0.85rem;
+            }
+            .modal-dialog {
+                max-width: 98%;
+            }
+            .modal-footer .btn {
+                height: 35px;
+                padding: 0 12px;
+            }
+            .modal-footer .form-control {
+                width: 40px;
+                height: 35px;
+            }
+        }
     </style>
 </head>
 <body>
         </div>
     </div>
     <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">
             {% endfor %}
             <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
         </div>
         <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
                     this.classList.add('selected');
                     selectedCategoryInput.value = this.getAttribute('data-category');
                     categoryForm.submit();
                 });
             });
             document.body.appendChild(successNotification);
             setTimeout(() => {
                 successNotification.remove();
+            }, \x2000);
         }
         document.addEventListener('DOMContentLoaded', function () {