Update app.py

app.py

@@ -91,46 +91,49 @@ with gr.Blocks() as demo:
 
     # JavaScript for managing the pop-up
     gr.HTML(f"""
-        <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
-                              background-color: white; padding: 20px; border-radius: 10px; 
-                              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 500px;">
-            <span onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px;">&times;</span>
-
-            <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
-            <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
-            <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
-            <p id="popup-price" style="margin-top: 10px; font-size: 16px; color: #444;"></p>
-            
-            
-            <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
-            <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
-                <!-- Your extras section here -->
-            </div>
-
-            <button onclick="addToCart(document.getElementById('popup-title').textContent, document.querySelector('input[name=spice]:checked').value)" 
-                    style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; 
-                           border-radius: 5px; cursor: pointer;">Add to Cart</button>
-            
+    <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+                          background-color: white; padding: 20px; border-radius: 10px; 
+                          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 500px;">
+        <span onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px;">&times;</span>
+
+        <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
+        <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
+        <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
+        <p id="popup-price" style="margin-top: 10px; font-size: 16px; color: #444;"></p>
+        
+        <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
+        <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+            <label style="margin-right: 10px;"><input type="checkbox" name="extras" value="Extra Raitha"> Extra Raitha</label>
+            <label style="margin-right: 10px;"><input type="checkbox" name="extras" value="Extra Salan"> Extra Salan</label>
         </div>
-        <script>
-            function showPopup(image, title, description, price) {
-                document.getElementById('popup-image').src = image;
-                document.getElementById('popup-title').textContent = title;
-                document.getElementById('popup-description').textContent = description;
-                document.getElementById('popup-price').textContent = "Price: " + price;
-
-                // Display the popup
-                document.getElementById('popup').style.display = 'block';
-            }
-            function closePopup() {
-                document.getElementById('popup').style.display = 'none';
-            }
-            function addToCart(dishName, spiceLevel) {
-                const selectedExtras = Array.from(document.querySelectorAll('input[name=extras]:checked')).map(cb => cb.value).join(", ");
-                alert(dishName + " with " + spiceLevel + " spice level and extras: " + selectedExtras + " has been added to the cart!");
-            }
-        </script>
-    """)
+
+        <button onclick="addToCart()" 
+                style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; 
+                       border-radius: 5px; cursor: pointer;">Add to Cart</button>
+    </div>
+    <script>
+        function showPopup(image, title, description, price) {
+            document.getElementById('popup-image').src = image;
+            document.getElementById('popup-title').textContent = title;
+            document.getElementById('popup-description').textContent = description;
+            document.getElementById('popup-price').textContent = "Price: " + price;
+
+            // Display the popup
+            document.getElementById('popup').style.display = 'block';
+        }
+        function closePopup() {
+            document.getElementById('popup').style.display = 'none';
+        }
+        function addToCart() {
+            const extras = Array.from(document.querySelectorAll('input[name=extras]:checked'))
+                                .map(extra => extra.value)
+                                .join(", ");
+            alert("Item added to cart with extras: " + extras);
+            closePopup();
+        }
+    </script>
+""")
+demo.launch()
 
     # Button click events
     btn_all.click(
@@ -146,4 +149,48 @@ with gr.Blocks() as demo:
         outputs=dish_display
     )
 
+demo.launch()gr.HTML(f"""
+    <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+                          background-color: white; padding: 20px; border-radius: 10px; 
+                          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 500px;">
+        <span onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px;">&times;</span>
+
+        <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
+        <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
+        <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
+        <p id="popup-price" style="margin-top: 10px; font-size: 16px; color: #444;"></p>
+        
+        <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
+        <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+            <label style="margin-right: 10px;"><input type="checkbox" name="extras" value="Extra Raitha"> Extra Raitha</label>
+            <label style="margin-right: 10px;"><input type="checkbox" name="extras" value="Extra Salan"> Extra Salan</label>
+        </div>
+
+        <button onclick="addToCart()" 
+                style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; 
+                       border-radius: 5px; cursor: pointer;">Add to Cart</button>
+    </div>
+    <script>
+        function showPopup(image, title, description, price) {
+            document.getElementById('popup-image').src = image;
+            document.getElementById('popup-title').textContent = title;
+            document.getElementById('popup-description').textContent = description;
+            document.getElementById('popup-price').textContent = "Price: " + price;
+
+            // Display the popup
+            document.getElementById('popup').style.display = 'block';
+        }
+        function closePopup() {
+            document.getElementById('popup').style.display = 'none';
+        }
+        function addToCart() {
+            const extras = Array.from(document.querySelectorAll('input[name=extras]:checked'))
+                                .map(extra => extra.value)
+                                .join(", ");
+            alert("Item added to cart with extras: " + extras);
+            closePopup();
+        }
+    </script>
+""")
+
 demo.launch()