Spaces:
Sleeping
Sleeping
| # Updated Cart Modal HTML | |
| def create_cart_modal(): | |
| cart_modal_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;">×</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> | |
| <button style="background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;" onclick="submitOrder()">Submit Order</button> | |
| </div> | |
| </div> | |
| """ | |
| return cart_modal_html | |
| # Final Order Page HTML | |
| def create_final_order_page(): | |
| final_order_html = """ | |
| <div id="final-order-page" style="display: none; padding: 20px; max-width: 1200px; margin: auto;"> | |
| <h1>Final Order</h1> | |
| <div id="final-order-items"></div> | |
| <p id="final-order-total-cost" style="font-size: 1.2em; font-weight: bold;">Total Order Cost: $0.00</p> | |
| <button onclick="confirmOrder()" style="background-color: #28a745; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Confirm Order</button> | |
| </div> | |
| """ | |
| return final_order_html | |
| # Updated JavaScript for Submit Order | |
| def modal_js(): | |
| modal_script = """ | |
| <script> | |
| let cart = []; | |
| let totalCartCost = 0; | |
| function openModal(name, image2, description, price) { | |
| const modal = document.getElementById('modal'); | |
| modal.style.display = 'block'; | |
| document.getElementById('modal-image').src = image2; | |
| document.getElementById('modal-name').innerText = name; | |
| document.getElementById('modal-description').innerText = description; | |
| document.getElementById('modal-price').innerText = price; | |
| resetAddOns(); // Reset add-ons when opening the modal | |
| } | |
| 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 selectedAddOns = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')); | |
| const extras = selectedAddOns.map(extra => ({ | |
| name: extra.value, | |
| price: parseFloat(extra.getAttribute('data-price')), | |
| quantity: 1 | |
| })); | |
| const extrasCost = extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0); | |
| const totalCost = (price * quantity) + extrasCost; | |
| cart.push({ name, price, quantity, extras, instructions, totalCost }); | |
| totalCartCost += totalCost; | |
| updateCartButton(); | |
| updateCartTotalCost(); | |
| closeModal(); | |
| } | |
| function updateCartButton() { | |
| const cartButton = document.getElementById('cart-button'); | |
| 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} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', '); | |
| cartItemsContainer.innerHTML += ` | |
| <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;"> | |
| <h3>${item.name}</h3> | |
| <p>Quantity: ${item.quantity}</p> | |
| <p>Extras: ${extrasList || 'None'}</p> | |
| <p>Special Instructions: ${item.instructions || 'None'}</p> | |
| <p>Total Cost: $${item.totalCost.toFixed(2)}</p> | |
| </div> | |
| `; | |
| }); | |
| document.getElementById('cart-total-cost').innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`; | |
| cartModal.style.display = 'block'; | |
| } | |
| function closeCartModal() { | |
| document.getElementById('cart-modal').style.display = 'none'; | |
| } | |
| function submitOrder() { | |
| const finalOrderPage = document.getElementById('final-order-page'); | |
| const finalOrderItemsContainer = document.getElementById('final-order-items'); | |
| finalOrderItemsContainer.innerHTML = ""; | |
| cart.forEach((item) => { | |
| const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', '); | |
| finalOrderItemsContainer.innerHTML += ` | |
| <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;"> | |
| <h3>${item.name}</h3> | |
| <p>Quantity: ${item.quantity}</p> | |
| <p>Extras: ${extrasList || 'None'}</p> | |
| <p>Special Instructions: ${item.instructions || 'None'}</p> | |
| <p>Total Cost: $${item.totalCost.toFixed(2)}</p> | |
| </div> | |
| `; | |
| }); | |
| document.getElementById('final-order-total-cost').innerText = `Total Order Cost: $${totalCartCost.toFixed(2)}`; | |
| finalOrderPage.style.display = 'block'; | |
| document.getElementById('cart-modal').style.display = 'none'; | |
| } | |
| function confirmOrder() { | |
| alert("Order confirmed! Thank you for your purchase."); | |
| cart = []; | |
| totalCartCost = 0; | |
| updateCartButton(); | |
| updateCartTotalCost(); | |
| document.getElementById('final-order-page').style.display = 'none'; | |
| } | |
| </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;' 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;'>×</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><button style='background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='submitOrder()'>Submit Order</button></div></div>") | |
| # Add Final Order Page | |
| gr.HTML(create_final_order_page()) | |
| 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] | |
| ) | |
| app.launch() | |