Update templates/search.html

templates/search.html

@@ -7,6 +7,8 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <!-- Preload Placeholder Image -->
+    <link rel="preload" href="/static/placeholder.jpg" as="image">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -20,6 +22,21 @@
         .container {
             max-width: 900px;
         }
+        .menu-heading {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #fff;
+            text-align: center;
+            padding: 15px 20px;
+            margin: 20px 0;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            width: 100%;
+            max-width: 900px;
+            margin-left: auto;
+            margin-right: auto;
+        }
         .menu-card {
             max-width: 350px;
             border-radius: 15px;
@@ -28,30 +45,42 @@
             margin: auto;
             display: flex;
             flex-direction: column;
-            opacity: 0;
-            transition: opacity 0.3s ease-in-out;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
             cursor: pointer;
         }
-        .menu-card.visible {
-            opacity: 1;
-        }
-        .menu-card:hover {
-            transform: scale(1.05);
-            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
-        }
-        .menu-card img {
+        .card-img-container {
+            position: relative;
+            width: 100%;
             height: 200px;
+        }
+        .card-img {
+            height: 100%;
             width: 100%;
             object-fit: cover;
             border-radius: 15px 15px 0 0;
-            background-color: #000;
+            display: block; /* Prevents gaps or flashes */
         }
-        .menu-card .card-body .card-title {
+        .card-title {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
             font-size: 1.2rem;
             font-weight: 600;
-            margin: 10px 0;
-            color: #333333;
+            color: #fff;
+            text-align: center;
+            margin: 0;
+            padding: 5px 10px;
+            background-color: rgba(0, 0, 0, 0.5);
+            border-radius: 5px;
+            width: 90%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            z-index: 1;
+        }
+        .menu-card .card-body {
+            padding: 10px;
             text-align: center;
         }
         .menu-card .card-body .card-text.section {
@@ -308,14 +337,21 @@
                 padding: 12px 16px;
                 font-size: 15px;
             }
+            .menu-heading {
+                font-size: 1.5rem;
+                padding: 10px 15px;
+                margin: 15px 0;
+            }
             .menu-card {
                 max-width: 100%;
             }
-            .menu-card img {
+            .card-img-container {
                 height: 150px;
             }
-            .menu-card .card-body .card-title {
+            .card-title {
                 font-size: 1rem;
+                top: 8px;
+                padding: 4px 8px;
             }
             .menu-card .card-body .card-text.section {
                 font-size: 0.8rem;
@@ -351,8 +387,7 @@
                 <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
                 <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">MY Summary</a>
-
-            <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
@@ -363,14 +398,17 @@
     </div>
 
     <div class="container mt-4">
+        <h1 class="menu-heading">Search Menu Items</h1>
         <div class="row" id="menuItems">
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
                     <div class="col-md-6 mb-4 menu-item" data-name="{{ item.Name | default('Unnamed Item') }}" data-section="{{ item.Section__c | default(section) }}">
                         <div class="card menu-card" onclick="selectItem('{{ item.Name | default('Unnamed Item') }}', '{{ item.Section__c | default(section) }}')">
-                            <img src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" alt="{{ item.Name | default('Unnamed Item') }}" class="card-img-top">
-                            <div class="card-body">
+                            <div class="card-img-container">
+                                <img src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" alt="{{ item.Name | default('Unnamed Item') }}" class="card-img" loading="eager" decoding="async" width="350" height="200">
                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                            </div>
+                            <div class="card-body">
                                 <p class="card-text section">{{ item.Section__c | default(section) }}</p>
                             </div>
                         </div>
@@ -503,22 +541,6 @@
                 micIcon.style.display = 'none';
             }
 
-            // Lazy Loading for Cards
-            const menuCards = document.querySelectorAll('.menu-card');
-            const cardObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                        observer.unobserve(entry.target);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.1
-            });
-            menuCards.forEach(card => cardObserver.observe(card));
-
             // Fetch Cart
             fetch('/cart/get')
                 .then(response => {