Update app.py

app.py

@@ -1,60 +1,127 @@
 import gradio as gr
-import datetime
 
-# 自定義 CSS：打造高級黑金風格
+# --- 設定主題配色 (使用 Gradio 原生 Theme Builder) ---
+# 我們選用 "Zinc" (冷灰) 作為基底，"Gold" (金) 作為強調色
+theme = gr.themes.Soft(
+    primary_hue="amber",  # 按鈕、強調色用琥珀金
+    neutral_hue="zinc",   # 背景、邊框用鋅灰色 (比純黑更有質感)
+    font=[gr.themes.GoogleFont("Playfair Display"), "ui-sans-serif", "system-ui", "sans-serif"],
+).set(
+    # 這裡微調細節，讓它看起來更像 "暗色模式"
+    body_background_fill="#1c1c1c",        # 整體背景：深炭灰 (非純黑)
+    block_background_fill="#262626",       # 區塊背景：稍亮一點的灰
+    block_border_width="0px",              # 去掉生硬的邊框
+    input_background_fill="#333333",       # 輸入框背景：深灰
+    input_border_color="#444444",          # 輸入框邊框
+    text_color="#E0E0E0",                  # 一般文字：灰白 (不刺眼)
+    block_title_text_color="#d4af37",      # 標題文字：香檳金
+    button_primary_background_fill="#d4af37", # 主按鈕背景：香檳金
+    button_primary_text_color="#000000",      # 主按鈕文字：黑色
+)
+
+# --- 自定義 CSS (只處理 Logo 和特殊排版) ---
 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; }
+/* 隱藏 Gradio 預設的 footer */
+footer {visibility: hidden}
+
+/* 標題區域美化 */
+.header-box {
+    text-align: center;
+    padding: 30px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #d4af37;
+}
+.header-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 42px;
+    color: #d4af37; /* 香檳金 */
+    letter-spacing: 3px;
+    margin: 0;
+}
+.header-subtitle {
+    font-family: sans-serif;
+    color: #888;
+    font-size: 14px;
+    margin-top: 10px;
+    letter-spacing: 1px;
+}
+/* 讓日曆選單不要太亮 */
+input[type="datetime-local"] {
+    color-scheme: dark;
+}
 """
 
+# --- 模擬資料與邏輯 ---
 def get_available_slots(date_str):
-    # 這裡未來會接 Supabase 查詢
-    # 範例邏輯：如果是假日就剩比較少位子
-    return [("18:00", "剩 4 位"), ("19:30", "剩 2 位"), ("21:00", "已客滿")]
+    # 這裡未來接 Supabase
+    return ["18:00 (剩 4 位)", "19:30 (剩 2 位)", "21:00 (已客滿)"]
 
-def handle_booking(name, tel, pax, date, time):
+def handle_booking(name, tel, date, time, pax):
     if not name or not tel:
-        return "⚠️ 請完整填寫姓名與聯絡電話。"
-    # 這裡執行寫入 Supabase 的邏輯
-    return f"### 🥂 預約申請已提交！\n**{name}** 您好，我們已收到您的申請。請留意 Email 並於 24 小時內點擊「確認出席」以保留您的座位。"
+        return "⚠️ 請完整填寫資料"
+    return f"""
+    <div style='background: #2a2a2a; padding: 20px; border-left: 3px solid #d4af37; color: #fff;'>
+        <h3 style='color: #d4af37; margin:0;'>🥂 預約申請已提交</h3>
+        <p>親愛的 <b>{name}</b>，我們已收到您的資訊。<br>
+        系統將發送確認信至您的信箱，請留意查收。</p>
+    </div>
+    """
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+# --- 介面佈局 ---
+with gr.Blocks(theme=theme, css=custom_css, title="Cié Cié Taipei") as demo:
+    
+    # 1. 頂部 Logo 區
     gr.HTML("""
-        <div style="text-align: center; padding: 20px;">
-            <h1 style="font-size: 36px;">Cié Cié Taipei</h1>
-            <p style="color: #888;">品味精緻時光，期待您的蒞臨</p>
+        <div class="header-box">
+            <h1 class="header-title">Cié Cié Taipei</h1>
+            <p class="header-subtitle">URBAN LOUNGE & DINING</p>
         </div>
     """)
-    
+
+    # 2. 主要操作區 (分左右兩欄)
     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. 用餐人數")
+            gr.Markdown("### 📅 預約資訊")
+            # 日期改用 Textbox + type='date' 比較穩定，或者用 Dropdown
+            # 這裡暫用 Calendar，但在暗色模式下有些瀏覽器會顯示白色，這是瀏覽器限制
+            # 建議實務上也可以用 Dropdown 選「今天/明天/後天」
+            booking_date = gr.DateTime(label="日期與時間", include_time=False) 
             
+            pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數", 
+                                  info="超過 10 人請直接來電")
+
+        # 右側：時段與狀態
         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. 選擇時段")
-            
+             gr.Markdown("### 🕰️ 選擇時段")
+             # 這裡用一個明顯的狀態顯示區
+             status_box = gr.Markdown("請選擇日期以查看剩餘座位", visible=True)
+             time_slot = gr.Dropdown(choices=[], label="可用時段", interactive=True)
+
+    # 3. 個人資料區
+    gr.Markdown("### 👤 聯絡人資料")
     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()
+            cust_name = gr.Textbox(label="訂位姓名", placeholder="ex. 王小明")
+            cust_tel = gr.Textbox(label="手機號碼", placeholder="ex. 0912-345-678")
 
-    # 當日期或人數改變時，動態更新顯示（互動性體驗）
-    booking_date.change(lambda: "<div class='availability-box'>🔍 查詢中...</div>", outputs=availability_display)
+    # 4. 送出按鈕與結果
+    submit_btn = gr.Button("確認預約 Request Booking", size="lg", variant="primary")
+    output_msg = gr.HTML(label="系統訊息")
+
+    # --- 互動邏輯 ---
+    # 當日期改變，去查時段
+    booking_date.change(
+        fn=lambda d: (gr.update(choices=["18:00","18:30", "19:00","19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", "00:00", "00:30", "01:00", "01:30", "02:00",]), "✅ 已更新時段"),
+        inputs=booking_date,
+        outputs=[time_slot, status_box]
+    )
     
-    confirm_btn.click(
-        handle_booking, 
-        inputs=[cust_name, cust_tel, pax_count, booking_date, time_slot], 
-        outputs=result_output
+    submit_btn.click(
+        handle_booking,
+        inputs=[cust_name, cust_tel, booking_date, time_slot, pax_count],
+        outputs=output_msg
     )
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()