Update templates/menu.html

templates/menu.html

@@ -35,7 +35,6 @@
             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);
         }
@@ -211,7 +210,7 @@
         }
         .search-bar-container input {
             width: 100%;
-            padding: 8px 40px 8px 40px;
+            padding: 8px 100px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
             border: none;
@@ -230,6 +229,7 @@
             left: 15px;
             font-size: 18px;
             color: #888;
+            cursor: pointer;
         }
         .mic-icon {
             position: absolute;
@@ -242,6 +242,21 @@
         .mic-icon.active {
             color: #007bff;
         }
+        #searchButton {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            border-radius: 20px;
+            height: 30px;
+            line-height: 1;
+            position: absolute;
+            right: 40px;
+            padding: 5px 10px;
+            font-size: 14px;
+        }
+        #searchButton:hover {
+            background-color: #0D9232;
+            border-color: #0D9232;
+        }
         /* Addon Section */
         .addon-section {
             background-color: #fff;
@@ -830,7 +845,7 @@
                 transform: translateY(-50%);
             }
             .search-bar-container input {
-                padding: 6px 35px 6px 35px;
+                padding: 6px 90px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
@@ -842,6 +857,11 @@
                 right: 12px;
                 font-size: 16px;
             }
+            #searchButton {
+                padding: 4px 8px;
+                font-size: 12px;
+                right: 35px;
+            }
             .avatar-dropdown-container {
                 right: 10px;
             }
@@ -1314,84 +1334,6 @@
         .cart-item .remove-button:hover {
             background-color: #c82333;
         }
-        /* Responsive Design */
-        @media (max-width: 480px) {
-            .chat-container {
-                border-radius: 0;
-                box-shadow: none;
-            }
-            .chat-header {
-                font-size: 16px;
-                padding: 10px;
-            }
-            .chat-messages {
-                padding: 10px;
-            }
-            .bot-message, .user-message {
-                font-size: 13px;
-                padding: 8px 12px;
-                margin: 5px 0;
-            }
-            .chat-input input {
-                font-size: 13px;
-                padding: 8px;
-            }
-            .chat-input button {
-                font-size: 13px;
-                padding: 8px 15px;
-            }
-            .ingredients-list, .menu-items-list, .customization-ingredients-list {
-                flex-direction: row;
-                gap: 10px;
-            }
-            .ingredient-item, .menu-item {
-                flex: 0 0 150px;
-            }
-            .ingredient-item img, .menu-item img {
-                height: 100px;
-            }
-            .ingredient-item div, .menu-item div {
-                font-size: 13px;
-            }
-            .ingredient-item button, .menu-item button {
-                font-size: 11px;
-                padding: 6px;
-            }
-            .option-button {
-                font-size: 13px;
-                padding: 8px 15px;
-            }
-            .selected-ingredients, .selected-customization-ingredients, .cart-items {
-                padding: 10px;
-                gap: 8px;
-            }
-            .cart-item {
-                font-size: 12px;
-                padding: 4px 8px;
-            }
-            .cart-item img {
-                width: 25px;
-                height: 25px;
-            }
-        }
-        @media (min-width: 481px) and (max-width: 768px) {
-            .chat-container {
-                max-width: 600px;
-            }
-            .chat-header {
-                font-size: 17px;
-                padding: 11px;
-            }
-            .chat-messages {
-                padding: 12px;
-            }
-            .ingredient-item, .menu-item {
-                flex: 0 0 180px;
-            }
-            .ingredient-item img, .menu-item img {
-                height: 110px;
-            }
-        }
         /* Mic Modal Styling */
         #micModal .modal-dialog {
             max-width: 300px;
@@ -1498,6 +1440,84 @@
                 font-size: 0.9rem;
             }
         }
+        /* Responsive Design */
+        @media (max-width: 480px) {
+            .chat-container {
+                border-radius: 0;
+                box-shadow: none;
+            }
+            .chat-header {
+                font-size: 16px;
+                padding: 10px;
+            }
+            .chat-messages {
+                padding: 10px;
+            }
+            .bot-message, .user-message {
+                font-size: 13px;
+                padding: 8px 12px;
+                margin: 5px 0;
+            }
+            .chat-input input {
+                font-size: 13px;
+                padding: 8px;
+            }
+            .chat-input button {
+                font-size: 13px;
+                padding: 8px 15px;
+            }
+            .ingredients-list, .menu-items-list, .customization-ingredients-list {
+                flex-direction: row;
+                gap: 10px;
+            }
+            .ingredient-item, .menu-item {
+                flex: 0 0 150px;
+            }
+            .ingredient-item img, .menu-item img {
+                height: 100px;
+            }
+            .ingredient-item div, .menu-item div {
+                font-size: 13px;
+            }
+            .ingredient-item button, .menu-item button {
+                font-size: 11px;
+                padding: 6px;
+            }
+            .option-button {
+                font-size: 13px;
+                padding: 8px 15px;
+            }
+            .selected-ingredients, .selected-customization-ingredients, .cart-items {
+                padding: 10px;
+                gap: 8px;
+            }
+            .cart-item {
+                font-size: 12px;
+                padding: 4px 8px;
+            }
+            .cart-item img {
+                width: 25px;
+                height: 25px;
+            }
+        }
+        @media (min-width: 481px) and (max-width: 768px) {
+            .chat-container {
+                max-width: 600px;
+            }
+            .chat-header {
+                font-size: 17px;
+                padding: 11px;
+            }
+            .chat-messages {
+                padding: 12px;
+            }
+            .ingredient-item, .menu-item {
+                flex: 0 0 180px;
+            }
+            .ingredient-item img, .menu-item img {
+                height: 110px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -1515,15 +1535,15 @@
         </div>
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
-            <i class="bi bi-search search-icon"></i>
+            <i class="bi bi-search search-icon" id="searchIcon" style="cursor: pointer;"></i>
             <i class="bi bi-mic mic-icon" id="micIcon"></i>
+            <button type="button" id="searchButton" class="btn btn-primary">Search</button>
         </div>
     </div>
 
     <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
-            <!-- Veg Only Toggle -->
             <input type="checkbox" id="veg-toggle" name="veg"
                    {% if selected_category == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
@@ -1531,7 +1551,6 @@
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
-            <!-- Customized Dish Toggle -->
             <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
                    {% if selected_category == "Customized Dish" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('custom')"
@@ -1555,81 +1574,79 @@
                 </div>
             </div>
         {% else %}
-            {% if ordered_menu.items()|length == 0 %}
-                <p>No menu items available for this category.</p>
-            {% else %}
-                {% for section, items in ordered_menu.items() %}
-                    <h3>{{ section }}</h3>
-                    <div class="row">
-                        {% for item in items %}
-                            <div class="col-md-6 mb-4">
-                                <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
-                                    <video 
-                                        class="card-img-top menu-video" 
-                                        muted 
-                                        loop 
-                                        preload="auto" 
-                                        data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" 
-                                        poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
-                                        width="350" 
-                                        height="200" 
-                                        onmouseover="this.play()" 
-                                        onmouseout="this.pause(); this.currentTime = 0;" 
-                                        onerror="this.poster='/static/placeholder.jpg';">
-                                        <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
-                                        Your browser does not support the video tag.
-                                    </video>
-                                    <div class="addbutton">
-                                        <div class="card-body d-flex align-items-center justify-content-between">
-                                            <div>
-                                                <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
-                                                <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
-                                            </div>
-                                            <div class="d-flex flex-column align-items-center justify-content-center">
-                                                <div class="button-container" 
-                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}" 
-                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
-                                                     data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
-                                                     data-item-section="{{ item.Section__c | default(section) }}" 
-                                                     data-item-category="{{ selected_category }}"
-                                                     data-item-description="{{ item.Description__c | default('No description') }}"
-                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
-                                                    {% if item.Section__c == 'Soft Drinks' %}
-                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
-                                                    {% else %}
-                                                        <button class="btn btn-primary" 
-                                                                data-bs-toggle="modal" 
-                                                                data-bs-target="#itemModal" 
-                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
-                                                            ADD
-                                                        </button>
-                                                        {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
-                                                            <span class="customisable-text">Customisable</span>
-                                                        {% endif %}
+            {% for section, items in ordered_menu.items() %}
+                <h3>{{ section }}</h3>
+                <div class="row">
+                    {% for item in items %}
+                        <div class="col-md-6 mb-4">
+                            <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
+                                <video 
+                                    class="card-img-top menu-video" 
+                                    muted 
+                                    loop 
+                                    preload="auto" 
+                                    data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" 
+                                    poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                                    width="350" 
+                                    height="200" 
+                                    onmouseover="this.play()" 
+                                    onmouseout="this.pause(); this.currentTime = 0;" 
+                                    onerror="this.poster='/static/placeholder.jpg';">
+                                    <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
+                                    Your browser does not support the video tag.
+                                </video>
+                                <div class="addbutton">
+                                    <div class="card-body d-flex align-items-center justify-content-between">
+                                        <div>
+                                            <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                                            <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-items-center justify-content-center">
+                                            <div class="button-container" 
+                                                 data-item-name="{{ item.Name | default('Unnamed Item') }}" 
+                                                 data-item-price="{{ item.Price__c | default('0.00') }}" 
+                                                 data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
+                                                 data-item-section="{{ item.Section__c | default(section) }}" 
+                                                 data-item-category="{{ selected_category }}"
+                                                 data-item-description="{{ item.Description__c | default('No description') }}"
+                                                 data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
+                                                {% if item.Section__c == 'Soft Drinks' %}
+                                                    <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
+                                                {% else %}
+                                                    <button class="btn btn-primary" 
+                                                            data-bs-toggle="modal" 
+                                                            data-bs-target="#itemModal" 
+                                                            onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                        ADD
+                                                    </button>
+                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
+                                                        <span class="customisable-text">Customisable</span>
                                                     {% endif %}
-                                                </div>
+                                                {% endif %}
                                             </div>
                                         </div>
                                     </div>
-                                    {% if item.Section__c != 'Soft Drinks' %}
-                                        <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
-                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
-                                            <h6>Description</h6>
-                                            <p>{{ item.Description__c | default('No description available') }}</p>
-                                            <h6>Ingredients</h6>
-                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
-                                            <h6>Nutritional Info</h6>
-                                            <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
-                                            <h6>Allergens</h6>
-                                            <p>{{ item.Allergens__c | default('None listed') }}</p>
-                                        </div>
-                                    {% endif %}
                                 </div>
+                                {% if item.Section__c != 'Soft Drinks' %}
+                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                        <h6>Description</h6>
+                                        <p>{{ item.Description__c | default('No description available') }}</p>
+                                        <h6>Ingredients</h6>
+                                        <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
+                                        <h6>Nutritional Info</h6>
+                                        <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
+                                        <h6>Allergens</h6>
+                                        <p>{{ item.Allergens__c | default('None listed') }}</p>
+                                    </div>
+                                {% endif %}
                             </div>
-                        {% endfor %}
-                    </div>
-                {% endfor %}
-            {% endif %}
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                <p>No menu items available for this category. Please try a different filter or contact support.</p>
+            {% endfor %}
         {% endif %}
     </div>
 
@@ -1752,8 +1769,13 @@
             {% endfor %}
         ];
 
-        // Lazy load videos
+        // Lazy load videos and initialize menu cards
         document.addEventListener('DOMContentLoaded', function () {
+            // Ensure menu cards are visible on load
+            document.querySelectorAll('.menu-card').forEach(card => {
+                card.classList.add('visible');
+            });
+
             const videos = document.querySelectorAll('.menu-video');
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
@@ -1775,9 +1797,16 @@
 
             // Search functionality
             const searchBar = document.getElementById('searchBar');
-            searchBar.addEventListener('input', function () {
-                const searchTerm = this.value.toLowerCase();
+            const searchIcon = document.getElementById('searchIcon');
+            const searchButton = document.getElementById('searchButton');
+
+            function performSearch() {
+                const searchTerm = searchBar.value.toLowerCase();
                 const menuCards = document.querySelectorAll('.menu-card');
+                if (menuCards.length === 0) {
+                    console.warn('No menu cards found. Check if menu items are loaded.');
+                    return;
+                }
                 menuCards.forEach(card => {
                     const itemName = card.getAttribute('data-item-name').toLowerCase();
                     const itemSection = card.getAttribute('data-item-section').toLowerCase();
@@ -1789,7 +1818,11 @@
                         card.classList.remove('visible');
                     }
                 });
-            });
+            }
+
+            searchBar.addEventListener('input', performSearch);
+            searchIcon.addEventListener('click', performSearch);
+            searchButton.addEventListener('click', performSearch);
 
             // Toggle details
             document.querySelectorAll('.toggle-details').forEach(link => {
@@ -1834,7 +1867,7 @@
                 addonsList.classList.add('addon-loading');
                 addonsList.innerHTML = '';
 
-                fetch(`/get_addons?name=${encodeURIComponent(name)}&section=${encodeURIComponent(section)}`)
+                fetch(`/get_addons?name=${encodeURIComponent(name)}§ion=${encodeURIComponent(section)}`)
                     .then(response => response.json())
                     .then(data => {
                         addonsList.classList.remove('addon-loading');