Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -316,6 +316,69 @@ def app_interface():
|
|
316 |
)
|
317 |
|
318 |
return app
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
319 |
|
320 |
if __name__ == "__main__":
|
321 |
app = app_interface()
|
|
|
316 |
)
|
317 |
|
318 |
return app
|
319 |
+
def app():
|
320 |
+
with gr.Blocks() as demo:
|
321 |
+
gr.Markdown("## Dynamic Menu with Preferences")
|
322 |
+
|
323 |
+
# Radio button for selecting preference
|
324 |
+
selected_preference = gr.Radio(
|
325 |
+
choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
|
326 |
+
value="All",
|
327 |
+
label="Choose a Preference",
|
328 |
+
)
|
329 |
+
|
330 |
+
# Output area for menu items
|
331 |
+
menu_output = gr.HTML(value=filter_menu("All"))
|
332 |
+
|
333 |
+
# Floating cart display
|
334 |
+
cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
|
335 |
+
|
336 |
+
# Final order display
|
337 |
+
final_order_output = gr.HTML(value="", elem_id="final-order")
|
338 |
+
|
339 |
+
# Modal window
|
340 |
+
modal_window = gr.HTML("""
|
341 |
+
<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;">
|
342 |
+
<div style="text-align: right;">
|
343 |
+
<button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">×</button>
|
344 |
+
</div>
|
345 |
+
<img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />
|
346 |
+
<h2 id="modal-name"></h2>
|
347 |
+
<p id="modal-description"></p>
|
348 |
+
<p id="modal-price"></p>
|
349 |
+
<!-- Biryani Extras -->
|
350 |
+
<label for="biryani-extras">Biryani Extras :</label>
|
351 |
+
<div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
|
352 |
+
<label><input type="checkbox" name="biryani-extra" value="Thums up" /> Thums up + $2.00</label>
|
353 |
+
<label><input type="checkbox" name="biryani-extra" value="Sprite" /> Sprite + $2.00</label>
|
354 |
+
<label><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha + $1.00</label>
|
355 |
+
<label><input type="checkbox" name="biryani-extra" value="Extra Salan" /> Extra Salan + $2.00</label>
|
356 |
+
<label><input type="checkbox" name="biryani-extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>
|
357 |
+
<label><input type="checkbox" name="biryani-extra" value="Chilli Chicken" /> Chilli Chicken + $14.00</label>
|
358 |
+
<label><input type="checkbox" name="biryani-extra" value="Veg Manchurian" /> Veg Manchurian + $12.00</label>
|
359 |
+
</div>
|
360 |
+
<!-- Quantity and Special Instructions -->
|
361 |
+
<label for="quantity">Quantity:</label>
|
362 |
+
<input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
|
363 |
+
<br><br>
|
364 |
+
<textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px;"></textarea>
|
365 |
+
<br><br>
|
366 |
+
<!-- Add to Cart Button -->
|
367 |
+
<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>
|
368 |
+
</div>
|
369 |
+
""")
|
370 |
+
|
371 |
+
# Update menu dynamically based on preference
|
372 |
+
selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
|
373 |
+
|
374 |
+
# Layout
|
375 |
+
gr.Row([selected_preference])
|
376 |
+
gr.Row(menu_output)
|
377 |
+
gr.Row(cart_output)
|
378 |
+
gr.Row(modal_window)
|
379 |
+
gr.Row(final_order_output)
|
380 |
+
gr.HTML(modal_and_cart_js)
|
381 |
+
return demo
|
382 |
|
383 |
if __name__ == "__main__":
|
384 |
app = app_interface()
|