Update app.py

app.py

@@ -58,14 +58,11 @@ modal_and_cart_js = """
             return;
         }
         document.getElementById('modal').style.display = 'block';
-        document.body.style.overflow = 'hidden'; // Disable scrolling
         document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
-
-        const spiceLevelInputs = document.querySelectorAll('input[name="spice-level"]');
-        spiceLevelInputs.forEach(input => input.checked = false);
+        // Reset extras
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
         document.getElementById('quantity').value = 1;
@@ -73,7 +70,6 @@ modal_and_cart_js = """
     }
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
-        document.body.style.overflow = ''; // Re-enable scrolling
     }
     function addToCart() {
         if (finalized) {
@@ -82,17 +78,49 @@ modal_and_cart_js = """
         }
         const name = document.getElementById('modal-name').innerText;
         const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-        const spiceLevel = document.querySelector('input[name="spice-level"]:checked')?.value || "Not Selected";
         const quantity = parseInt(document.getElementById('quantity').value) || 1;
         const instructions = document.getElementById('special-instructions').value;
         const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')).map(extra => extra.value);
         const extrasCost = extras.reduce((sum, extra) => sum + (extrasPrices[extra] || 0), 0);
         const itemTotal = (price + extrasCost) * quantity;
-        const cartItem = { name, price, spiceLevel, quantity, instructions, extras, itemTotal };
+        const cartItem = { name, price, quantity, instructions, extras, itemTotal };
         cart.push(cartItem);
         alert(`${name} added to cart!`);
+        updateCartDisplay();
         closeModal();
     }
+    function updateCartDisplay() {
+        let totalBill = 0;
+        let cartHTML = "<h3>Your Cart:</h3><ul>";
+        cart.forEach((item, index) => {
+            totalBill += item.itemTotal;
+            const extras = item.extras.join(', ');
+            cartHTML += `<li><input type='checkbox' id='cart-item-${index}' value='${index}' checked onclick='removeItem(${index})'> ${item.name} (x${item.quantity}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+        });
+        cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        document.getElementById('floating-cart').innerHTML = cartHTML;
+    }
+    function removeItem(index) {
+        cart.splice(index, 1);
+        updateCartDisplay();
+    }
+    function finalizeOrder() {
+        if (cart.length === 0) {
+            alert("Your cart is empty. Please add items before finalizing.");
+            return;
+        }
+        finalized = true;
+        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
+        let totalBill = 0;
+        cart.forEach(item => {
+            totalBill += item.itemTotal;
+            const extras = item.extras.join(', ');
+            finalOrderHTML += `<li>${item.name} (x${item.quantity}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+        });
+        finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        document.getElementById('final-order').innerHTML = finalOrderHTML;
+        alert("Your order has been finalized. You cannot make changes now.");
+    }
 </script>
 """
 
@@ -101,18 +129,25 @@ def app():
     with gr.Blocks() as demo:
         gr.Markdown("## Dynamic Menu with Preferences")
 
+        # Radio button for selecting preference
         selected_preference = gr.Radio(
             choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
             value="All",
             label="Choose a Preference",
         )
 
+        # Output area for menu items
         menu_output = gr.HTML(value=filter_menu("All"))
 
+        # Floating cart display
         cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
 
+        # Final order display
+        final_order_output = gr.HTML(value="", elem_id="final-order")
+
+        # Modal window
         modal_window = gr.HTML("""
-        <div id="modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
+        <div id="modal" style="display: none; position: fixed; top: 10%; left: 5%; width: 90%; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
             <div style="text-align: right;">
                 <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
             </div>
@@ -120,16 +155,6 @@ def app():
             <h2 id="modal-name"></h2>
             <p id="modal-description"></p>
             <p id="modal-price"></p>
-            <!-- Spice Levels -->
-            <label for="spice-level">Choose a Spice Level (Required):</label>
-            <div id="spice-level-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
-                <label><input type="radio" name="spice-level" value="American Mild" /> American Mild</label>
-                <label><input type="radio" name="spice-level" value="American Medium" /> American Medium</label>
-                <label><input type="radio" name="spice-level" value="American Spicy" /> American Spicy</label>
-                <label><input type="radio" name="spice-level" value="Indian Mild" /> Indian Mild</label>
-                <label><input type="radio" name="spice-level" value="Indian Medium" /> Indian Medium</label>
-                <label><input type="radio" name="spice-level" value="Indian Very Spicy" /> Indian Very Spicy</label>
-            </div>
             <!-- Biryani Extras -->
             <label for="biryani-extras">Biryani Extras (Optional - Choose as many as you like):</label>
             <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
@@ -152,17 +177,22 @@ def app():
         </div>
         """)
 
+        # Finalize Order Button
         finalize_button = gr.Button("Finalize Order")
 
-        finalize_button.click(lambda: "Order finalized!", outputs=[])
+        # Finalize order button click event
+        finalize_button.click(lambda: "Order finalized!", outputs=[final_order_output])
 
+        # Update menu dynamically based on preference
         selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
 
+        # Layout
         gr.Row([selected_preference])
         gr.Row(menu_output)
         gr.Row(cart_output)
         gr.Row(modal_window)
         gr.Row(finalize_button)
+        gr.Row(final_order_output)
         gr.HTML(modal_and_cart_js)
 
     return demo