Update app.py

app.py

@@ -60,50 +60,51 @@ def app():
         # 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" required /> American Mild</label>
-        <label><input type="radio" name="spice-level" value="American Medium" required /> American Medium</label>
-        <label><input type="radio" name="spice-level" value="American Spicy" required /> American Spicy</label>
-        <label><input type="radio" name="spice-level" value="Indian Mild" required /> Indian Mild</label>
-        <label><input type="radio" name="spice-level" value="Indian Medium" required /> Indian Medium</label>
-        <label><input type="radio" name="spice-level" value="Indian Very Spicy" required /> 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" /> 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;">Add to Cart</button>
-</div>
+            <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" required /> American Mild</label>
+                <label><input type="radio" name="spice-level" value="American Medium" required /> American Medium</label>
+                <label><input type="radio" name="spice-level" value="American Spicy" required /> American Spicy</label>
+                <label><input type="radio" name="spice-level" value="Indian Mild" required /> Indian Mild</label>
+                <label><input type="radio" name="spice-level" value="Indian Medium" required /> Indian Medium</label>
+                <label><input type="radio" name="spice-level" value="Indian Very Spicy" required /> 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" /> 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>
         <script>
+            // A placeholder for the cart items
+            let cart = [];
+
             function openModal(name, image, description, price) {
                 document.getElementById('modal').style.display = 'block';
                 document.getElementById('modal-image').src = image;
@@ -111,9 +112,44 @@ def app():
                 document.getElementById('modal-description').innerText = description;
                 document.getElementById('modal-price').innerText = price;
             }
+
             function closeModal() {
                 document.getElementById('modal').style.display = 'none';
             }
+
+            function addToCart() {
+                // Get dish details
+                const name = document.getElementById('modal-name').innerText;
+                const price = document.getElementById('modal-price').innerText;
+                const spiceLevel = document.querySelector('input[name="spice-level"]:checked')?.value || "Not Selected";
+                const quantity = parseInt(document.getElementById('quantity').value) || 1;
+                const instructions = document.getElementById('special-instructions').value;
+
+                // Get selected extras
+                const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')).map(extra => extra.value);
+
+                // Create a cart item object
+                const cartItem = {
+                    name,
+                    price,
+                    spiceLevel,
+                    quantity,
+                    instructions,
+                    extras
+                };
+
+                // Add to cart
+                cart.push(cartItem);
+
+                // Update the cart display (for demo purposes, we'll log it in the console)
+                console.log("Cart:", cart);
+
+                // Optionally, show a confirmation message
+                alert(`${name} added to cart!`);
+
+                // Close the modal
+                closeModal();
+            }
         </script>
         """)