BiryaniHubflaskhema20014

Sleeping

App Files Files Community

lokesh341 commited on Apr 17

Commit

a8784d0

verified ·

1 Parent(s): 46f28e7

Update templates/search.html

Browse files

Files changed (1) hide show

templates/search.html +272 -353

templates/search.html CHANGED Viewed

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Search - Menu</title>
     <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">
     <style>
@@ -16,6 +17,98 @@
             flex-direction: column;
             padding-bottom: 70px;
         }
         .fixed-top-bar {
             position: relative;
             top: 0;
@@ -26,44 +119,20 @@
             color: white;
             padding: 15px;
             display: flex;
             align-items: center;
             z-index: 1000;
         }
-        .orange-label {
-            background-color: #FFA500;
-            padding: 5px 10px;
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
             position: absolute;
-            left: 10px;
             top: 50%;
             transform: translateY(-50%);
-        }
-        .back-button {
-            background-color: black;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 25px;
-            height: 25px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            cursor: pointer;
-            margin-right: 10px;
-        }
-        .search-bar-container {
-            position: fixed;
-            bottom: 10px;
-            left: 50%;
-            transform: translateX(-50%);
             display: flex;
             align-items: center;
             width: 300px;
             max-width: 90%;
-            z-index: 1000;
         }
         .search-bar-container input {
             width: 100%;
@@ -75,370 +144,220 @@
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
         }
-        .search-icon {
-            position: absolute;
-            left: 15px;
-            font-size: 18px;
             color: #888;
         }
-        .mic-icon {
             position: absolute;
-            right: 15px;
             font-size: 18px;
             color: #888;
-            cursor: pointer;
         }
-        .autocomplete-suggestions {
-            position: absolute;
-            bottom: 100%;
             left: 0;
-            width: 100%;
-            max-height: 200px;
-            overflow-y: auto;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             z-index: 1000;
-            display: none;
         }
-        .autocomplete-suggestions .suggestion-item {
-            padding: 8px 15px;
-            cursor: pointer;
-            font-size: 14px;
-            color: #333;
         }
-        .autocomplete-suggestions .suggestion-item:hover {
-            background-color: #f1f1f1;
         }
-        .container {
-            max-width: 900px;
-            margin-top: 20px;
-            margin-bottom: 70px;
         }
-        .search-item {
-            cursor: pointer;
         }
-        .menu-card {
-            max-width: 350px;
-            border-radius: 15px;
-            overflow: hidden;
-            background-color: #fff;
-            margin: auto;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            transition: transform 0.2s;
-        }
-        .menu-card:hover {
-            transform: scale(1.05);
         }
-        .menu-video {
-            height: 200px;
-            width: 100%;
-            object-fit: cover;
-            border-radius: 15px 15px 0 0;
         }
-        .card-body {
-            padding: 10px;
             text-align: center;
-        }
-        .card-title {
             font-size: 1.2rem;
-            font-weight: 600;
-            margin: 0;
-            color: #333333;
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
-        <div class="orange-label">
-            <button class="back-button" onclick="window.location.href='/menu'"><</button>
-            <span>Search</span>
         </div>
     </div>
-    <div class="container">
-        <h2>Search Results</h2>
-        <div id="searchResults" class="row">
-            {% for item in all_items %}
-                <div class="col-md-6 mb-4 search-item"
-                     data-name="{{ item.Name | lower }}"
-                     data-section="{{ item.Section__c | lower }}"
-                     data-price="{{ item.Price__c | default('0.00') }}"
-                     data-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
-                     data-description="{{ item.Description__c | default('No description') | e }}"
-                     data-ingredients="{{ item.IngredientsInfo__c | default('Not specified') | e }}"
-                     data-nutrition="{{ item.NutritionalInfo__c | default('Not available') | e }}"
-                     data-allergens="{{ item.Allergens__c | default('None listed') | e }}"
-                     data-category="{{ item.Category__c | default('') }}"
-                     onclick="triggerItemModal(this)">
-                    <div class="card menu-card">
-                        <img src="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
-                             class="card-img-top menu-video" alt="{{ item.Name }}" style="height: 200px; object-fit: cover;">
-                        <div class="card-body">
-                            <h5 class="card-title">{{ item.Name }}</h5>
                         </div>
                     </div>
-                </div>
             {% endfor %}
         </div>
     </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-mic mic-icon" id="micIcon"></i>
-        <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
-    </div>
-    <!-- Include the Item Modal from Menu HTML -->
-    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
-                    <h5 id="modal-name" class="fw-bold text-center"></h5>
-                    <p id="modal-price" class="text-muted text-center"></p>
-                    <p id="modal-description" class="text-secondary"></p>
-                    <div class="nutritional-info">
-                        <strong>Ingredients:</strong> <span id="modal-ingredients"></span><br>
-                        <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
-                        <strong>Allergens:</strong> <span id="modal-allergens"></span>
-                    </div>
-                    <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Customization Options</h6>
-                        <div id="addons-list" class="addons-container">Loading customization options...</div>
-                    </div>
-                    <div class="mt-4">
-                        <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
-                    </div>
-                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
-                </div>
-                <div class="modal-footer d-flex align-items-center justify-content-between">
-                    <div class="d-flex align-items-center gap-2">
-                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
-                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
-                    </div>
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
-                </div>
-            </div>
-        </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const menuItems = [
-            {% for item in all_items %}
-                "{{ item.Name | e }}",
             {% endfor %}
         ];
-        function sanitizeInput(input) {
-            const div = document.createElement('div');
-            div.textContent = input;
-            return div.innerHTML;
-        }
-        document.addEventListener('DOMContentLoaded', function () {
-            const searchBar = document.getElementById('searchBar');
-            const suggestionsContainer = document.getElementById('autocompleteSuggestions');
-            const searchResults = document.getElementById('searchResults');
-            function filterSearch() {
-                const input = sanitizeInput(searchBar.value.trim().toLowerCase());
-                const items = document.querySelectorAll('.search-item');
-                items.forEach(item => {
-                    const itemName = item.getAttribute('data-name');
-                    const itemSection = item.getAttribute('data-section');
-                    if (itemName.includes(input) || itemSection.includes(input)) {
-                        item.style.display = 'block';
-                    } else {
-                        item.style.display = 'none';
-                    }
-                });
-                if (!input) {
-                    items.forEach(item => item.style.display = 'block');
-                }
             }
-            searchBar.addEventListener('input', function () {
-                const input = sanitizeInput(this.value.trim().toLowerCase());
-                suggestionsContainer.innerHTML = '';
-                suggestionsContainer.style.display = 'none';
-                if (input) {
-                    const filteredItems = menuItems.filter(item =>
-                        item.toLowerCase().includes(input)
-                    );
-                    if (filteredItems.length > 0) {
-                        filteredItems.forEach(item => {
-                            const suggestionDiv = document.createElement('div');
-                            suggestionDiv.classList.add('suggestion-item');
-                            suggestionDiv.innerText = item;
-                            suggestionDiv.addEventListener('click', function () {
-                                searchBar.value = item;
-                                suggestionsContainer.style.display = 'none';
-                                filterSearch();
-                            });
-                            suggestionsContainer.appendChild(suggestionDiv);
-                        });
-                        suggestionsContainer.style.display = 'block';
-                    }
-                }
-                filterSearch();
-            });
-            document.addEventListener('click', function (event) {
-                if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
-                    suggestionsContainer.style.display = 'none';
-                }
-            });
-            // Quantity controls for modal
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
-            decreaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    quantityInput.value = currentQuantity;
-                }
             });
-            increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                currentQuantity++;
-                quantityInput.value = currentQuantity;
-            });
-        });
-        function triggerItemModal(element) {
-            const name = element.querySelector('.card-title').innerText;
-            const price = element.getAttribute('data-price');
-            const image = element.getAttribute('data-image');
-            const description = element.getAttribute('data-description');
-            const ingredients = element.getAttribute('data-ingredients');
-            const nutrition = element.getAttribute('data-nutrition');
-            const allergens = element.getAttribute('data-allergens');
-            const section = element.getAttribute('data-section');
-            const selectedCategory = element.getAttribute('data-category');
-            // Populate modal
-            document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
-            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
-            document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
-            document.getElementById('modal-allergens').innerText = allergens || 'None listed';
-            document.getElementById('modal-instructions').value = '';
-            const modalSectionEl = document.getElementById('modal-section');
-            modalSectionEl.setAttribute('data-section', section);
-            modalSectionEl.setAttribute('data-category', selectedCategory);
-            document.getElementById('quantityInput').value = 1;
-            // Fetch addons (assuming this endpoint exists)
-            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
-                .then(response => response.json())
-                .then(data => {
-                    const addonsList = document.getElementById('addons-list');
-                    addonsList.innerHTML = '';
-                    if (!data.success || !data.addons || data.addons.length === 0) {
-                        addonsList.innerHTML = '<p>No customization options available.</p>';
-                        return;
-                    }
-                    data.addons.forEach(addon => {
-                        const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section');
-                        const title = document.createElement('h6');
-                        title.innerText = addon.name;
-                        sectionDiv.appendChild(title);
-                        const optionsContainer = document.createElement('div');
-                        addon.options.forEach((option, index) => {
-                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                            const listItem = document.createElement('div');
-                            listItem.classList.add('form-check');
-                            listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                       data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
-                                <label class="form-check-label" for="${optionId}">
-                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
-                                </label>
-                            `;
-                            optionsContainer.appendChild(listItem);
-                        });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
-                })
-                .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-                });
-            // Show modal
-            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-            modal.show();
         }
-        function addToCartFromModal() {
-            const itemName = document.getElementById('modal-name').innerText;
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-            const itemImage = document.getElementById('modal-img').src;
-            const instructions = document.getElementById('modal-instructions').value.trim();
-            const quantity = parseInt(document.getElementById('quantityInput').value);
-            const section = document.getElementById('modal-section').getAttribute('data-section');
-            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
-            const addons = Array.from(document.querySelectorAll('.addon-option:checked')).map(cb => ({
-                name: cb.getAttribute('data-name'),
-                price: parseFloat(cb.getAttribute('data-price') || 0)
-            }));
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: addons,
-                instructions: instructions,
-                quantity: quantity
-            };
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart successfully!');
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                    modal.hide();
-                    // Optionally update cart UI here if needed
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('Error adding item to cart.');
-            });
-        }
-    </script>
-</body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search Menu</title>
+    <!-- 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">
     <style>
             flex-direction: column;
             padding-bottom: 70px;
         }
+        .container {
+            max-width: 900px;
+        }
+        .menu-card {
+            max-width: 350px;
+            border-radius: 15px;
+            overflow: hidden;
+            background-color: #fff;
+            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 {
+            height: 200px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 15px 15px 0 0;
+            background-color: #000;
+        }
+        .menu-card .card-body .card-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin: 10px 0;
+            color: #333333;
+            text-align: center;
+        }
+        .menu-card .card-body .card-text.section {
+            font-size: 0.9rem;
+            color: #6c757d;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+        .avatar-dropdown-container {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            align-items: right;
+            justify-content: center;
+        }
+        .avatar-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #007bff;
+            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: #fff8f0;
+            border-radius: 5px;
+            width: 220px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            display: none;
+            border: 1px solid #ffd8b1;
+        }
+        .dropdown-menu .dropdown-item {
+            padding: 12px 16px;
+            text-decoration: none;
+            color: #333;
+            border-bottom: 1px solid #ffd8b1;
+            display: block;
+            font-size: 15px;
+            transition: background-color 0.2s ease;
+        }
+        .dropdown-menu .dropdown-item:last-child {
+            border-bottom: none;
+        }
+        .dropdown-menu .dropdown-item:hover {
+            background-color: #ffe4c4;
+            color: #333;
+        }
         .fixed-top-bar {
             position: relative;
             top: 0;
             color: white;
             padding: 15px;
             display: flex;
+            justify-content: space-between;
             align-items: center;
             z-index: 1000;
         }
+        .search-bar-container {
             position: absolute;
+            left: 20px;
             top: 50%;
             transform: translateY(-50%);
             display: flex;
             align-items: center;
             width: 300px;
             max-width: 90%;
+            position: relative;
         }
         .search-bar-container input {
             width: 100%;
             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;
         }
+        .bottom-action-bar {
+            position: fixed;
+            bottom: 0;
             left: 0;
+            right: 0;
+            background-color: white;
+            padding: 10px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
             z-index: 1000;
+            max-width: 900px;
+            margin: 0 auto;
         }
+        .bottom-action-bar .btn {
+            flex: 1;
+            margin: 0 5px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-weight: bold;
+            font-size: 16px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            min-width: 0;
+            white-space: nowrap;
         }
+        .bottom-action-bar .btn-order-history {
+            background-color: #FFA07A;
+            border-color: #FFA07A;
         }
+        .bottom-action-bar .btn-order-history:hover {
+            background-color: #FF8C61;
+            border-color: #FF8C61;
         }
+        .bottom-action-bar .btn-view-cart {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
         }
+        .bottom-action-bar .btn-view-cart:hover {
+            background-color: #0D9232;
+            border-color: #0D9232;
         }
+        .cart-icon-badge {
+            background-color: white;
+            color: #0FAA39;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            margin-left: 8px;
         }
+        .no-results {
             text-align: center;
             font-size: 1.2rem;
+            color: #6c757d;
+            margin-top: 20px;
+        }
+        @media (max-width: 576px) {
+            .fixed-top-bar {
+                height: 60px;
+                padding: 10px;
+            }
+            .search-bar-container {
+                width: 80%;
+                max-width: 100%;
+                left: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+            .search-bar-container input {
+                padding: 6px 35px 6px 35px;
+                font-size: 14px;
+                border-radius: 20px;
+            }
+            .search-icon {
+                left: 12px;
+                font-size: 16px;
+            }
+            .avatar-dropdown-container {
+                right: 10px;
+            }
+            .avatar-icon {
+                width: 40px;
+                height: 40px;
+                font-size: 20px;
+            }
+            .dropdown-menu {
+                width: 220px;
+            }
+            .dropdown-menu .dropdown-item {
+                padding: 12px 16px;
+                font-size: 15px;
+            }
+            .menu-card {
+                max-width: 100%;
+            }
+            .menu-card img {
+                height: 150px;
+            }
+            .menu-card .card-body .card-title {
+                font-size: 1rem;
+            }
+            .menu-card .card-body .card-text.section {
+                font-size: 0.8rem;
+            }
+            .bottom-action-bar {
+                padding: 8px 10px;
+            }
+            .bottom-action-bar .btn {
+                padding: 8px 10px;
+                font-size: 14px;
+            }
+            .cart-icon-badge {
+                width: 18px;
+                height: 18px;
+                font-size: 10px;
+                margin-left: 5px;
+            }
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
+        <div class="avatar-dropdown-container">
+            <div class="avatar-icon">
+                <span>{{ first_letter }}</span>
+            </div>
+            <div class="dropdown-menu">
+                <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('logout') }}" class="dropdown-item">Logout</a>
+            </div>
+        </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>
         </div>
     </div>
+    <div class="container mt-4">
+        <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') }}')">
+                            <img src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" alt="{{ item.Name | default('Unnamed Item') }}" class="card-img-top">
+                            <div class="card-body">
+                                <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                                <p class="card-text section">{{ item.Section__c | default(section) }}</p>
+                            </div>
                         </div>
                     </div>
+                {% endfor %}
             {% endfor %}
         </div>
+        <div class="no-results" id="noResults" style="display: none;">
+            No items found matching your search.
+        </div>
     </div>
+    <div class="bottom-action-bar">
+        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
+            <i class="bi bi-clock-history"></i> Order History
+        </a>
+        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
+            <i class="bi bi-cart"></i> View Cart
+            <span id="cart-item-count" class="cart-icon-badge" style="display: none;">0</span>
+        </a>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const menuItems = [
+            {% for section, items in ordered_menu.items() %}
+                {% for item in items %}
+                    {
+                        name: "{{ item.Name | default('Unnamed Item') }}",
+                        section: "{{ item.Section__c | default(section) }}"
+                    },
+                {% endfor %}
             {% endfor %}
         ];
+        function updateCartUI(cart) {
+            if (!Array.isArray(cart)) {
+                console.error('Invalid cart data:', cart);
+                return;
             }
+            let totalQuantity = 0;
+            cart.forEach(item => {
+                totalQuantity += item.quantity;
             });
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
+            }
         }
+        function getCartLocalStorage() {
+            return JSON.parse(localStorage.getItem('