BiryaniHubflaskcustomize

Runtime error

App Files Files Community

geethareddy commited on Mar 22, 2025

Commit

e3eb007

verified ·

1 Parent(s): 93699eb

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +95 -124

templates/menu.html CHANGED Viewed

@@ -27,7 +27,6 @@
             margin: auto;
             display: flex;
             flex-direction: column;
-            position: relative;
         }
         .menu-image {
             height: 200px;
@@ -52,27 +51,27 @@
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
         .btn-customize {
             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;
             border-color: #0FAA39;
         }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
@@ -100,125 +99,78 @@
 </head>
 <body>
-    <!-- Fixed Top Bar -->
-    <div class="fixed-top-bar">
-        <div class="avatar-dropdown-container">
-            <div class="avatar-icon">
-                <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
-            </div>
-            <div class="dropdown-menu">
-                <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
-                <a href="{{ url_for('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..." onkeyup="filterMenu()">
-            <i class="bi bi-search search-icon"></i>
-        </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">
-            {% for category in categories %}
-                <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
-                    {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
-                <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
-            {% endfor %}
-        </div>
-        <div class="form-check">
-            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
-                {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
-            <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
-        </div>
-    </form>
-    <!-- Menu Section -->
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
-        {% if selected_category == "Customized Dish" %}
-            <div id="custom-dish-form" class="mt-4">
-                <h3>Create Your Custom Dish</h3>
-                <form method="POST" action="/generate_custom_dish">
-                    <div class="mb-3">
-                        <label for="custom-dish-name" class="form-label">Dish Name</label>
-                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
                     </div>
-                    <div class="mb-3">
-                        <label for="custom-dish-description" class="form-label">Dish Description</label>
-                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
-                </form>
             </div>
-        {% 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">
-                                <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                                <div class="card-body">
-                                    <h5 class="card-title">{{ item.Name }}</h5>
-                                    <p class="card-text">${{ item.Price__c }}</p>
-                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                                        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>
-                                </div>
-                            </div>
-                        </div>
-                    {% endfor %}
                 </div>
-            {% endfor %}
-        {% endif %}
     </div>
-    <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
             View Cart
         </a>
     </div>
-    <!-- Modal for Item Details -->
-    <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 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>
@@ -226,23 +178,42 @@
     </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>

             margin: auto;
             display: flex;
             flex-direction: column;
         }
         .menu-image {
             height: 200px;
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
+        /* Customize button styling */
         .btn-customize {
             font-size: 13px;
             font-weight: bold;
             border-radius: 5px;
+            background-color: transparent;
+            border: 1px solid #0FAA39;
+            color: #0FAA39;
+            padding: 5px 15px;
             display: inline-flex;
             align-items: center;
+            justify-content: center;
         }
+        .btn-customize:hover {
             background-color: #0FAA39;
+            color: white;
             border-color: #0FAA39;
         }
+        .btn-customize .bi-chevron-right {
+            margin-left: 5px;
+        }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
 </head>
 <body>
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
+        <div class="row">
+            <!-- Sample Item Card -->
+            <div class="col-md-6 mb-4">
+                <div class="card menu-card">
+                    <img src="your-image-path.jpg" class="card-img-top menu-image" alt="Item Image">
+                    <div class="card-body">
+                        <h5 class="card-title">Chicken Sausage</h5>
+                        <p class="card-text">Molten Cheese Indulgence with American classic herbed chicken sausage.</p>
+                        <button class="btn btn-primary">Add</button>
+                        <button class="btn btn-customize" onclick="openCustomizeModal('Chicken Sausage', 288)">
+                            Customize <i class="bi bi-chevron-right"></i>
+                        </button>
                     </div>
+                </div>
             </div>
+            <!-- Sample Item Card -->
+            <div class="col-md-6 mb-4">
+                <div class="card menu-card">
+                    <img src="your-image-path.jpg" class="card-img-top menu-image" alt="Item Image">
+                    <div class="card-body">
+                        <h5 class="card-title">Prawn Fry</h5>
+                        <p class="card-text">Delicious prawn fry with a spicy twist.</p>
+                        <button class="btn btn-primary">Add</button>
+                        <button class="btn btn-customize" onclick="openCustomizeModal('Prawn Fry', 15)">
+                            Customize <i class="bi bi-chevron-right"></i>
+                        </button>
+                    </div>
                 </div>
+            </div>
+        </div>
     </div>
     <div class="view-cart-container">
         <a href="/cart" class="view-cart-button">
             View Cart
         </a>
     </div>
+    <!-- Customize Modal -->
+    <div class="modal fade" id="customizeModal" tabindex="-1" aria-labelledby="customizeModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
+                    <h5 class="modal-title" id="customizeModalLabel">Customize Your Item</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
+                    <h5 id="modal-item-name"></h5>
+                    <p>Price: $<span id="modal-item-price"></span></p>
+                    <div id="addons-list">
+                        <!-- Addon Options will be loaded here -->
+                        <h6>Choose Toppings:</h6>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="Extra Cheese" id="addon1">
+                            <label class="form-check-label" for="addon1">
+                                Extra Cheese ($2)
+                            </label>
+                        </div>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="Olives" id="addon2">
+                            <label class="form-check-label" for="addon2">
+                                Olives ($1)
+                            </label>
+                        </div>
                     </div>
+                    <textarea class="form-control" id="special-request" placeholder="Special Instructions (Optional)"></textarea>
                 </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
     </div>
     <script>
+        // Open Customize Modal with Item Details
+        function openCustomizeModal(itemName, itemPrice) {
+            document.getElementById('modal-item-name').innerText = itemName;
+            document.getElementById('modal-item-price').innerText = itemPrice;
+            const modal = new bootstrap.Modal(document.getElementById('customizeModal'));
+            modal.show();
         }
+        // Add Custom Item to Cart from Modal
+        function addToCartFromModal() {
+            const itemName = document.getElementById('modal-item-name').innerText;
+            const itemPrice = parseFloat(document.getElementById('modal-item-price').innerText);
+            const specialRequest = document.getElementById('special-request').value;
+            let selectedAddons = [];
+            if (document.getElementById('addon1').checked) {
+                selectedAddons.push('Extra Cheese ($2)');
+            }
+            if (document.getElementById('addon2').checked) {
+                selectedAddons.push('Olives ($1)');
+            }
+            const cartItem = {
+                itemName,
+                itemPrice,
+                addons: selectedAddons,
+                specialRequest
+            };
+            // You can push this cartItem into your cart data (e.g., localStorage, array, etc.)
+            console.log(cartItem);
+            alert('Item added to cart successfully!');
+            // Close the modal
+            const modal = bootstrap.Modal.getInstance(document.getElementById('customizeModal'));
+            modal.hide();
         }
     </script>