BiryaniHubflaskcustomize

Runtime error

App Files Files Community

geethareddy commited on Mar 22, 2025

Commit

93699eb

verified ·

1 Parent(s): 8e8e0f8

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +32 -53

templates/menu.html CHANGED Viewed

@@ -10,7 +10,7 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #fdf4e3; /* Updated background color */
             margin: 0;
             padding: 0;
             display: flex;
@@ -27,6 +27,7 @@
             margin: auto;
             display: flex;
             flex-direction: column;
         }
         .menu-image {
             height: 200px;
@@ -55,9 +56,18 @@
             font-size: 13px;
             font-weight: bold;
             border-radius: 5px;
-            width: 100px;
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
         .btn-primary:hover, .btn-customize:hover {
             background-color: #0FAA39;
@@ -86,61 +96,11 @@
             background-color: #109835;
             text-decoration: none;
         }
-        .avatar-dropdown-container {
-            position: relative;
-        }
-        .avatar-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background-color: #5bbfc1;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 20px;
-            font-weight: bold;
-        }
-        .dropdown-menu {
-            position: absolute;
-            right: 0;
-            top: 100%;
-            background-color: #fff;
-            border-radius: 5px;
-            width: 200px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            display: none;
-        }
-        .avatar-dropdown-container:hover .dropdown-menu {
-            display: block;
-        }
-        .avatar-dropdown-container {
-            position: absolute;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            display: flex;
-            align-items: right;
-            justify-content: center;
-        }
-        .dropdown-menu .dropdown-item {
-            padding: 10px 15px;
-            text-decoration: none;
-            color: #333;
-            border-bottom: 1px solid #ddd;
-            display: block;
-        }
-        .dropdown-menu .dropdown-item:last-child {
-            border-bottom: none;
-        }
-        .dropdown-menu .dropdown-item:hover {
-            background-color: #f1f1f1;
-        }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
@@ -159,6 +119,7 @@
         </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">
@@ -175,6 +136,7 @@
         </div>
     </form>
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
@@ -208,6 +170,7 @@
                                         onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
                                         Add
                                     </button>
                                     <button class="btn btn-customize" onclick="customizeItem('{{ item.Name }}', '{{ item.Price__c }}')">
                                         <i class="bi bi-pencil-square"></i> Customize
                                     </button>
@@ -220,6 +183,7 @@
         {% endif %}
     </div>
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
             View Cart
@@ -262,9 +226,24 @@
     </div>
     <script>
         function customizeItem(itemName, itemPrice) {
             alert(`Customizing your ${itemName} for $${itemPrice}`);
         }
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

     <style>
         body {
             font-family: Arial, sans-serif;
+            background-color: #fdf4e3;
             margin: 0;
             padding: 0;
             display: flex;
             margin: auto;
             display: flex;
             flex-direction: column;
+            position: relative;
         }
         .menu-image {
             height: 200px;
             font-size: 13px;
             font-weight: bold;
             border-radius: 5px;
             background-color: #0FAA39;
             border-color: #0FAA39;
+            position: absolute;
+            right: 10px;  /* Align the Customize button to the right */
+            bottom: 10px; /* Place it at the bottom right corner of the image */
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            padding: 5px 15px;
+        }
+        .btn-customize i {
+            margin-left: 5px;
         }
         .btn-primary:hover, .btn-customize:hover {
             background-color: #0FAA39;
             background-color: #109835;
             text-decoration: none;
         }
     </style>
 </head>
 <body>
+    <!-- Fixed Top Bar -->
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
         </div>
     </div>
+    <!-- Category Filter -->
     <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">
         </div>
     </form>
+    <!-- Menu Section -->
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
                                         onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
                                         Add
                                     </button>
+                                    <!-- Customize Button -->
                                     <button class="btn btn-customize" onclick="customizeItem('{{ item.Name }}', '{{ item.Price__c }}')">
                                         <i class="bi bi-pencil-square"></i> Customize
                                     </button>
         {% endif %}
     </div>
+    <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
             View Cart
     </div>
     <script>
+        // Customize Item Action
         function customizeItem(itemName, itemPrice) {
             alert(`Customizing your ${itemName} for $${itemPrice}`);
         }
+        // Handle Search Filtering (optional)
+        function filterMenu() {
+            let input = document.getElementById('searchBar').value.toLowerCase();
+            let items = document.querySelectorAll('.menu-card');
+            items.forEach(item => {
+                let itemName = item.querySelector('.card-title').innerText.toLowerCase();
+                if (itemName.includes(input)) {
+                    item.style.display = 'block';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        }
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>