Create app.py

app.py

@@ -0,0 +1,60 @@
+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()