Update app.py

app.py

@@ -59,28 +59,29 @@ def app():
 
         # 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 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>
-            <label for="spice-level">Choose Spice Level:</label>
-            <select id="spice-level">
-                <option value="Mild">Mild</option>
-                <option value="Medium">Medium</option>
-                <option value="Spicy">Spicy</option>
-            </select>
-            <br><br>
-            <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>
-            <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;">Add to Cart</button>
-        </div>
+        <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>
+    <label for="spice-level">Choose Spice Level:</label>
+    <select id="spice-level">
+        <option value="Mild">Mild</option>
+        <option value="Medium">Medium</option>
+        <option value="Spicy">Spicy</option>
+    </select>
+    <br><br>
+    <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>
+    <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;">Add to Cart</button>
+</div>
+
         <script>
             function openModal(name, image, description, price) {
                 document.getElementById('modal').style.display = 'block';