Update app.py

app.py

@@ -112,7 +112,7 @@ def filter_menu(preference):
 
     return html_content
 
-# Create Modal Window HTML
+# Create Modal Window for Add-ons and Quantity
 def create_modal_window():
     add_ons = load_add_ons_from_salesforce()
     add_ons_html = ""
@@ -157,7 +157,7 @@ def modal_js():
             modal.style.display = 'block';
             modal.style.position = 'fixed';
             modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
-            modal.style.top = ${event.clientY}px;
+            modal.style.top = `${event.clientY}px`;
             modal.style.left = '50%';
             modal.style.transform = 'translate(-50%, -50%)';
             document.getElementById('modal-image').src = image2;
@@ -193,15 +193,15 @@ def modal_js():
         }
         function updateCartButton() {
             const cartButton = document.getElementById('cart-button');
-            cartButton.innerText = View Cart (${cart.length} items);
+            cartButton.innerText = `View Cart (${cart.length} items)`;
         }
         function openCartModal() {
             const cartModal = document.getElementById('cart-modal');
             const cartItemsContainer = document.getElementById('cart-items');
             cartItemsContainer.innerHTML = "";
             cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => ${extra.name} x<input type="number" value="${extra.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'extra', this.value)" /> (+$${(extra.price * extra.quantity).toFixed(2)})).join(', ');
-                cartItemsContainer.innerHTML += 
+                const extrasList = item.extras.map(extra => `${extra.name} x<input type="number" value="${extra.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'extra', this.value)" /> (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
+                cartItemsContainer.innerHTML += `
                     <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
                         <h3>${item.name}</h3>
                         <p>Quantity: <input type="number" value="${item.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'item', this.value)" /></p>
@@ -210,7 +210,7 @@ def modal_js():
                         <p>Total Cost: $<span id="item-${index}-total">${item.totalCost.toFixed(2)}</span></p>
                         <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
                     </div>
-                ;
+                `;
             });
             cartModal.style.display = 'block';
         }
@@ -234,13 +234,13 @@ def modal_js():
             const price = item.price;
             const extrasCost = item.extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
             item.totalCost = (price * item.quantity) + extrasCost;
-            document.getElementById(item-${index}-total).innerText = item.totalCost.toFixed(2);
+            document.getElementById(`item-${index}-total`).innerText = item.totalCost.toFixed(2);
             updateCartTotalCost();  // Update total cost displayed
         }
         function updateCartTotalCost() {
             const totalCostElement = document.getElementById('cart-total-cost');
             totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
-            totalCostElement.innerText = Total Cart Cost: $${totalCartCost.toFixed(2)};
+            totalCostElement.innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
         }
         function proceedToCheckout() {
             alert("Proceeding to checkout...");
@@ -253,44 +253,3 @@ def modal_js():
     </script>
     """
     return modal_script
-
-# Gradio App
-with gr.Blocks() as app:
-    with gr.Row():
-        gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
-
-    with gr.Row(visible=True) as login_page:
-        with gr.Column():
-            login_email = gr.Textbox(label="Email")
-            login_password = gr.Textbox(label="Password", type="password")
-            login_button = gr.Button("Login")
-            signup_button = gr.Button("Go to Signup")
-            login_output = gr.Textbox(label="Status")
-
-    with gr.Row(visible=False) as signup_page:
-        with gr.Column():
-            signup_name = gr.Textbox(label="Name")
-            signup_email = gr.Textbox(label="Email")
-            signup_phone = gr.Textbox(label="Phone")
-            signup_password = gr.Textbox(label="Password", type="password")
-            submit_signup = gr.Button("Signup")
-            login_redirect = gr.Button("Go to Login")
-            signup_output = gr.Textbox(label="Status")
-
-    with gr.Row(visible=False) as menu_page:
-        with gr.Column():
-            preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
-            menu_output = gr.HTML()
-            gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
-            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
-            gr.HTML(create_modal_window())
-            gr.HTML(modal_js())
-
-    login_button.click(
-        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]
-    )
-    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
-
-app.launch()