Update app.py

app.py

@@ -284,7 +284,38 @@ button {
         alert("Your final order has been submitted!");
     }
 </script>
-# Gradio App
+# Modal HTML Content
+MODAL_HTML = """
+<div id="modal" style="display: none; position: fixed; 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: 300px; border-radius: 8px; margin-bottom: 20px;" />
+    <h2 id="modal-name"></h2>
+    <p id="modal-description"></p>
+    <p id="modal-price"></p>
+    <!-- Biryani Extras -->
+    <label for="biryani-extras">Extras :</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="Thums up" /> Thums up + $2.00</label>
+        <label><input type="checkbox" name="biryani-extra" value="Sprite" /> Sprite + $2.00</label>
+        <label><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha  + $1.00</label>
+        <label><input type="checkbox" name="biryani-extra" value="Extra Salan" /> Extra Salan  + $2.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="Chilli Chicken" /> Chilli Chicken + $14.00</label>
+        <label><input type="checkbox" name="biryani-extra" value="Veg Manchurian" /> Veg Manchurian + $12.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>
+"""
+
 # Gradio App
 def app():
     with gr.Blocks() as demo:
@@ -325,37 +356,8 @@ def app():
             # Output area for menu items
             menu_output = gr.HTML(value=filter_menu("All"))
 
-            # Modal window
-            modal_window = gr.HTML("""
-                <div id="modal" style="display: none; position: fixed; 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: 300px; border-radius: 8px; margin-bottom: 20px;" />
-                    <h2 id="modal-name"></h2>
-                    <p id="modal-description"></p>
-                    <p id="modal-price"></p>
-                    <!-- Biryani Extras -->
-                    <label for="biryani-extras">Extras :</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="Thums up" /> Thums up + $2.00</label>
-                        <label><input type="checkbox" name="biryani-extra" value="Sprite" /> Sprite + $2.00</label>
-                        <label><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha  + $1.00</label>
-                        <label><input type="checkbox" name="biryani-extra" value="Extra Salan" /> Extra Salan  + $2.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="Chilli Chicken" /> Chilli Chicken + $14.00</label>
-                        <label><input type="checkbox" name="biryani-extra" value="Veg Manchurian" /> Veg Manchurian + $12.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>
-                """)
+            # Modal window using the pre-defined MODAL_HTML
+            modal_window = gr.HTML(MODAL_HTML)
 
             # Layout
             gr.Row([selected_preference])