Update app.py

app.py

@@ -155,7 +155,7 @@ button {
         "Veg Manchurian": 12
     };
     let finalized = false;
-    function openModal(name, image2, description, price) {
+    function openModal(name, image, description, price) {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
             return;
@@ -172,7 +172,7 @@ button {
         }
         modal.style.left = '50%';
         modal.style.transform = 'translate(-50%, -50%)';
-        document.getElementById('modal-image').src = image2;
+        document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
@@ -337,40 +337,51 @@ def app():
                 value="All",
                 label="Choose a Preference",
             )
+            # Empty div box with 300px height
+            empty_div = gr.HTML('<div style="height: 20px;"></div>')
 
             # Output area for menu items
             menu_output = gr.HTML(value=filter_menu("All"))
 
             # Button to navigate to Cart Page
-            view_cart_button = gr.Button("View Cart")
+            view_cart_button = gr.Button("View Cart", elem_id="view-cart-button")
+
+            # Empty div box with 300px height
+            empty_div = gr.HTML('<div style="height: 300px;"></div>')
 
             # 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 id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 10px; z-index: 1000; width: 90%; max-width: 500px; height: 750px; overflow-y: hidden;">
+                    <div style="text-align: right; height: 30px;">
+                        <button onclick="closeModal()" style="background: none; border: none; font-size: 16px; cursor: pointer; height: 30px; width: 30px;">&times;</button>
                     </div>
-                    <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />
-                    <h4 id="modal-name"></h4>
-                    <p id="modal-description"></p>
-                    <p id="modal-price"></p>
-                    <!-- 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>
+                    <img id="modal-image" style="width: 100%; height: 250px; border-radius: 8px; margin-bottom: 5px;" />
+                    <h4 id="modal-name" style="font-size: 18px; height: auto; margin-bottom: 5px;"></h4>
+                    <p id="modal-description" style="font-size: 14px; height: auto; margin-bottom: 5px;"></p>
+                    <p id=\"modal-price\" style=\"font-size: 14px; font-weight: bold; height: auto; margin-bottom: 10px;\">$</p>
+                    <!-- Biryani Extras -->
+                    <label for=\"biryani-extras\" style=\"display: block; font-size: 12px; margin-bottom: 5px; font-weight: bold;\">Extras :</label>
+                    <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; height: 70px; overflow-y: auto;">
+                        <label style="font-size: 12px;"><input type="checkbox" name="biryani-extra" value="Thums up" /> Thums up + $2.00</label>
+                        <label style="font-size: 12px;"><input type="checkbox" name="biryani-extra" value="Sprite" /> Sprite + $2.00</label>
+                        <label style="font-size: 12px;"><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha  + $1.00</label>
+                        <label style="font-size: 12px;"><input type="checkbox" name="biryani-extra" value="Extra Salan" /> Extra Salan  + $2.00</label>
+                        <label style="font-size: 12px;"><input type="checkbox" name="biryani-extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>
+                        <label style="font-size: 12px;"><input type="checkbox" name="biryani-extra" value="Chilli Chicken" /> Chilli Chicken + $14.00</label>
+                        <label style="font-size: 12px;"><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: 30px;" />
-                    <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px;"></textarea>
-                    <!-- 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 style="margin-bottom: 5px;">
+                        <label for="quantity" style="display: block; font-size: 12px; margin-bottom: 5px;">Quantity:</label>
+                        <input type="number" id="quantity" value="1" min="1" style="width: 50px; height: 25px; font-size: 12px;" />
+                    </div>
+                    <div style="margin-bottom: 5px;">
+                        <label for="special-instructions" style="display: block; font-size: 12px; margin-bottom: 5px;">Special Instructions:</label>
+                        <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px; font-size: 12px;"></textarea>
+                    </div>
+                    <div style="text-align: center; margin-top: 10px;">
+                        <button id="add-to-cart-button" onclick="addToCart()" style="background-color: #28a745; color: white; border: none; padding: 8px 16px; font-size: 12px; border-radius: 5px; cursor: pointer;">Add to Cart</button>
+                    </div>
                 </div>
                 """)
             # Update menu dynamically based on preference
@@ -431,6 +442,7 @@ def app():
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[menu_section, cart_section],
         )
+        
 
     return demo