Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # Popcorn data | |
| popcorn_data = [ | |
| { | |
| "name": "Cheese Popcorn", | |
| "image": "static/Flavours/Cheese popcorn.jpg", | |
| "prices": { | |
| "Small": "₹199", | |
| "Medium": "₹349", | |
| "Large": "₹499" | |
| } | |
| }, | |
| { | |
| "name": "Caramel Popcorn", | |
| "image": "static/Flavours/Caramel popcorn.jpg", | |
| "prices": { | |
| "Small": "₹249", | |
| "Medium": "₹399", | |
| "Large": "₹599" | |
| } | |
| }, | |
| { | |
| "name": "Butter Popcorn", | |
| "image": "static/Flavours/Butter popcorn.jpg", | |
| "prices": { | |
| "Small": "₹149", | |
| "Medium": "₹299", | |
| "Large": "₹399" | |
| } | |
| }, | |
| { | |
| "name": "Spicy Popcorn", | |
| "image": "static/Flavours/Spicy popcorn.jpg", | |
| "prices": { | |
| "Small": "₹249", | |
| "Medium": "₹449", | |
| "Large": "₹649" | |
| } | |
| }, | |
| ] | |
| def display_price(prices, size): | |
| return f"<div class='popcorn-price'>{prices[size]}</div>" | |
| with gr.Blocks(css=""" | |
| .main-container { | |
| background: linear-gradient(to right, #fff3e0, #ffe0b2); | |
| padding: 40px; | |
| border-radius: 20px; | |
| } | |
| ..app-header h1 { | |
| text-align: center; | |
| color: #d35400; /* Rich orange */ | |
| font-size: 48px !important; /* Make it big */ | |
| font-weight: 900 !important; /* Make it bold */ | |
| margin-bottom: 30px; | |
| font-family: 'Segoe UI', sans-serif; | |
| } | |
| .popcorn-card { | |
| border: 2px solid #ffcc00; | |
| border-radius: 15px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); | |
| background-color: #ffffffcc; | |
| margin: 10px; | |
| } | |
| .popcorn-price { | |
| color: #ff6600; | |
| font-weight: bold; | |
| font-size: 18px; | |
| margin-top: 10px; | |
| } | |
| .popcorn-name { | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: #333; | |
| margin-top: 10px; | |
| } | |
| """) as demo: | |
| with gr.Column(elem_classes="main-container"): | |
| gr.Markdown("<h1 class='app-header'>🍿 Welcome to the Popcorn Gallery</h1>") | |
| for i in range(0, len(popcorn_data), 2): | |
| with gr.Row(): | |
| for item in popcorn_data[i:i+2]: | |
| with gr.Column(elem_classes="popcorn-card"): | |
| gr.Image(value=item["image"], label=item["name"], height=200) | |
| gr.Markdown(f"<div class='popcorn-name'>{item['name']}</div>") | |
| size_dropdown = gr.Dropdown( | |
| choices=list(item["prices"].keys()), | |
| value="Small", | |
| label="Select Size" | |
| ) | |
| price_display = gr.Markdown( | |
| value=f"<div class='popcorn-price'>{item['prices']['Small']}</div>" | |
| ) | |
| size_dropdown.change( | |
| fn=display_price, | |
| inputs=[gr.State(item["prices"]), size_dropdown], | |
| outputs=price_display | |
| ) | |
| demo.launch() |