Spaces:
Sleeping
Sleeping
File size: 9,422 Bytes
00864ee 40e55c3 00864ee 19d4e5e 00864ee 19d4e5e 00864ee 40e55c3 00864ee 40e55c3 00864ee 40e55c3 da85a51 40e55c3 da85a51 40e55c3 00864ee 40e55c3 00864ee 40e55c3 00864ee 40e55c3 00864ee 40e55c3 00864ee 40e55c3 00864ee d78b5df 40e55c3 00864ee d78b5df 00864ee 76df88b 00864ee 76df88b 40e55c3 32f17be 00864ee 54f831b e767e0f a088b71 e767e0f cc5a2e7 2691732 6cf5b04 2691732 91f1be6 32f38e3 cc5a2e7 6cf5b04 cc5a2e7 00864ee a2874a3 20c55b6 8117a65 2691732 6cf5b04 59cd355 95b25f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
# 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()
|