Update app.py

app.py

@@ -66,7 +66,7 @@ def login(email, password):
 # Function to load menu data
 def load_menu_from_salesforce():
     try:
-        query = "SELECT Name, Price__c, Description__c, Image1__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
+        query = "SELECT Name, Price__c, Description__c, Image1__c, Image2__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
         result = sf.query(query)
         return result['records']
     except Exception as e:
@@ -94,7 +94,8 @@ def filter_menu(preference):
         for item in items:
             html_content += f"""
             <div style="border: 1px solid #ddd; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; height: 350px;">
-                <img src="{item.get('Image1__c', '')}" style="width: 100%; height: 200px; object-fit: cover;">
+                <img src="{item.get('Image1__c', '')}" style="width: 100%; height: 200px; object-fit: cover;" 
+                onclick="openModal('{item['Name']}', '{item.get('Image2__c', '')}', '{item['Description__c']}', '${item['Price__c']}')">
                 <div style="padding: 10px;">
                     <h3 style='font-size: 1.2em; text-align: center;'>{item['Name']}</h3>
                     <p style='font-size: 1.1em; color: green; text-align: center;'>${item['Price__c']}</p>
@@ -110,6 +111,82 @@ def filter_menu(preference):
 
     return html_content
 
+# Create Modal Window HTML
+def create_modal_window():
+    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>
+        <!-- Add-ons Section -->
+        <label for="biryani-extras"><strong>Add-ons :</strong></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>
+        </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 your 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>
+    """
+    return modal_html
+
+# JavaScript for Modal Functionality
+def modal_js():
+    modal_script = """
+    <script>
+        function openModal(name, image2, description, price) {
+            const modal = document.getElementById('modal');
+            modal.style.display = 'block';
+            modal.style.position = 'fixed';
+            if (window.innerWidth <= 768) {
+                modal.style.width = '90%';
+                modal.style.top = `${event.touches ? event.touches[0].screenY : event.clientY}px`;
+            } else {
+                modal.style.width = '30%';
+                modal.style.top = `${event.clientY}px`;
+            }
+            modal.style.left = '50%';
+            modal.style.transform = 'translate(-50%, -50%)';
+            document.getElementById('modal-image').src = image2;
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-price').innerText = price;
+            document.getElementById('quantity').value = 1;
+            document.getElementById('special-instructions').value = '';
+        }
+
+        function closeModal() {
+            document.getElementById('modal').style.display = 'none';
+        }
+
+        function addToCart() {
+            const name = document.getElementById('modal-name').innerText;
+            const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const quantity = parseInt(document.getElementById('quantity').value) || 1;
+            const instructions = document.getElementById('special-instructions').value;
+            const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')).map(extra => extra.value);
+            const extrasCost = extras.length * 2;  // Assuming $2 per extra
+            const totalCost = (price + extrasCost) * quantity;
+
+            alert(`${quantity} x ${name} added to cart! Total: $${totalCost.toFixed(2)}`);
+            closeModal();
+        }
+    </script>
+    """
+    return modal_script
+
 # Gradio App
 with gr.Blocks() as app:
     with gr.Row():
@@ -137,30 +214,14 @@ with gr.Blocks() as app:
         with gr.Column():
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
-
-    with gr.Row(visible=False) as footer:
-        gr.HTML("<footer style='text-align: center;'>Thank you! Welcome again!</footer>")
-
-    def handle_login(email, password):
-        status, user = login(email, password)
-        if status == "Login successful!":
-            content = filter_menu("All")  # Default to "All" on login
-            return gr.update(visible=False), gr.update(visible=True), gr.update(visible=True), gr.update(value=content), status
-        else:
-            return gr.update(), gr.update(), gr.update(), gr.update(), status
-
-    def handle_signup(name, email, phone, password):
-        return signup(name, email, phone, password)
-
-    def handle_menu(preference):
-        content = filter_menu(preference)
-        return content
+            gr.HTML(create_modal_window())  # Add modal window HTML
+            gr.HTML(modal_js())  # Add modal JavaScript
 
     login_button.click(
-        handle_login, [login_email, login_password], [login_page, menu_page, footer, menu_output, login_output]
+        lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")
+        if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), gr.update(), "Invalid email or password."),
+        [login_email, login_password], [login_page, menu_page, menu_output, login_output]
     )
-    signup_button.click(lambda: (gr.update(visible=False), gr.update(visible=True)), None, [login_page, signup_page])
-    submit_signup.click(handle_signup, [signup_name, signup_email, signup_phone, signup_password], signup_output)
-    preference.change(handle_menu, [preference], menu_output)
+    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
 
 app.launch()