Spaces:
Running
Running
| import gradio as gr | |
| import datetime | |
| # 自定義 CSS：打造高級黑金風格 | |
| custom_css = """ | |
| .gradio-container { background-color: #0c0c0c !important; color: #d4af37 !important; } | |
| .gr-button-primary { background: linear-gradient(45deg, #af8f2c, #d4af37) !important; border: none !important; color: black !important; font-weight: bold !important; } | |
| .gr-input, .gr-dropdown, .gr-number { background-color: #1a1a1a !important; border: 1px solid #333 !important; color: white !important; } | |
| h1 { font-family: 'Playfair Display', serif; letter-spacing: 2px; } | |
| .availability-box { padding: 10px; border: 1px solid #d4af37; border-radius: 5px; text-align: center; margin-bottom: 20px; } | |
| """ | |
| def get_available_slots(date_str): | |
| # 這裡未來會接 Supabase 查詢 | |
| # 範例邏輯：如果是假日就剩比較少位子 | |
| return [("18:00", "剩 4 位"), ("19:30", "剩 2 位"), ("21:00", "已客滿")] | |
| def handle_booking(name, tel, pax, date, time): | |
| if not name or not tel: | |
| return "⚠️ 請完整填寫姓名與聯絡電話。" | |
| # 這裡執行寫入 Supabase 的邏輯 | |
| return f"### 🥂 預約申請已提交！\n**{name}** 您好，我們已收到您的申請。請留意 Email 並於 24 小時內點擊「確認出席」以保留您的座位。" | |
| with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo: | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 20px;"> | |
| <h1 style="font-size: 36px;">Cié Cié Taipei</h1> | |
| <p style="color: #888;">品味精緻時光，期待您的蒞臨</p> | |
| </div> | |
| """) | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| booking_date = gr.DateTime(label="1. 選擇日期", type="string") | |
| pax_count = gr.Slider(minimum=1, maximum=8, value=2, step=1, label="2. 用餐人數") | |
| with gr.Column(scale=1): | |
| # 這裡顯示即時剩餘座位狀態 | |
| availability_display = gr.HTML("<div class='availability-box'>請先選擇日期以查看剩餘座位</div>") | |
| time_slot = gr.Dropdown(choices=["18:00", "19:30", "21:00"], label="3. 選擇時段") | |
| with gr.Group(): | |
| gr.Markdown("### 4. 聯絡資訊") | |
| with gr.Row(): | |
| cust_name = gr.Textbox(label="姓名", placeholder="請輸入訂位人姓名") | |
| cust_tel = gr.Textbox(label="電話", placeholder="請輸入手機號碼") | |
| confirm_btn = gr.Button("探索味蕾之旅 (提交預約)", variant="primary") | |
| result_output = gr.Markdown() | |
| # 當日期或人數改變時，動態更新顯示（互動性體驗） | |
| booking_date.change(lambda: "<div class='availability-box'>🔍 查詢中...</div>", outputs=availability_display) | |
| confirm_btn.click( | |
| handle_booking, | |
| inputs=[cust_name, cust_tel, pax_count, booking_date, time_slot], | |
| outputs=result_output | |
| ) | |
| demo.launch() |