Update app.py

app.py

@@ -62,7 +62,6 @@ modal_and_cart_js = """
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
-        // Reset spice levels and extras
         const spiceLevelInputs = document.querySelectorAll('input[name="spice-level"]');
         spiceLevelInputs.forEach(input => input.checked = false);
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
@@ -98,22 +97,18 @@ modal_and_cart_js = """
         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}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+            cartHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, 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 Summary:</h3><ul>";
+        let finalOrderHTML = "<h3>Your Final Order:</h3><ul>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
@@ -121,11 +116,8 @@ modal_and_cart_js = """
             finalOrderHTML += `<li>${item.name} (x${item.quantity}, Spice: ${item.spiceLevel}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
         });
         finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-        document.getElementById('summary-page').innerHTML = finalOrderHTML;
-        document.getElementById('menu-container').style.display = 'none';
-        document.getElementById('cart-container').style.display = 'none';
-        document.getElementById('finalize-container').style.display = 'none';
-        document.getElementById('summary-container').style.display = 'block';
+        finalOrderHTML += `<p style='color: green; font-size: 18px;'>Your final order has been placed. Thank you!</p>`;
+        document.getElementById('final-order').innerHTML = finalOrderHTML;
     }
 </script>
 """
@@ -135,46 +127,77 @@ def app():
     with gr.Blocks() as demo:
         gr.Markdown("## Dynamic Menu with Preferences")
 
-        # Menu container
-        menu_container = gr.Group(visible=True, elem_id="menu-container")
-        with menu_container:
-            # Radio button for selecting preference
-            selected_preference = gr.Radio(
-                choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
-                value="All",
-                label="Choose a Preference",
-            )
+        # 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"))
+        # Output area for menu items
+        menu_output = gr.HTML(value=filter_menu("All"))
 
-        # Cart container
-        cart_container = gr.Group(visible=True, elem_id="cart-container")
-        with cart_container:
-            # Floating cart display
-            cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
+        # Floating cart display
+        cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
 
-        # Finalize order button
-        finalize_container = gr.Group(visible=True, elem_id="finalize-container")
-        with finalize_container:
-            finalize_button = gr.Button("Finalize Order")
+        # 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: 40%; left: 50%; transform: translate(-50%, -40%); width: 50%; 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>
+            <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />
+            <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;">
+                <label><input type="checkbox" name="biryani-extra" value="Extra Raitha 4oz" /> Extra Raitha 4oz + $1.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Raitha 8oz" /> Extra Raitha 8oz + $2.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Salan 4oz" /> Extra Salan 4oz + $1.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Salan 8oz" /> Extra Salan 8oz + $2.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Onion" /> Extra Onion + $1.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>
+                <label><input type="checkbox" name="biryani-extra" value="Extra Fried Onion 4oz" /> Extra Fried Onion 4oz + $2.00</label>
+            </div>
+            <!-- Quantity and Special Instructions -->
+            <label for="quantity">Quantity:</label>
+            <input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
+            <br><br>
+            <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px;"></textarea>
+            <br><br>
+            <!-- Add to Cart Button -->
+            <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
+        </div>
+        """)
 
-        # Summary page container
-        summary_container = gr.Group(visible=False, elem_id="summary-container")
-        with summary_container:
-            summary_output = gr.HTML(value="", elem_id="summary-page")
+        # Finalize Order Button
+        finalize_button = gr.Button("Finalize Order")
 
         # Update menu dynamically based on preference
         selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
 
-        # Finalize order button click event
-        finalize_button.click(lambda: "Order finalized!", inputs=[], outputs=[], _js="finalizeOrder")
-
         # Layout
-        gr.Row([menu_container])
-        gr.Row([cart_container])
-        gr.Row([finalize_container])
-        gr.Row([summary_container])
+        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