Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 from datetime import datetime, timedelta
 
-# --- 設定主題配色 (維持之前的黑金高級感) ---
+# --- 設定主題配色 (維持黑金高級感) ---
 theme = gr.themes.Soft(
     primary_hue="amber",
     neutral_hue="zinc",
@@ -18,14 +18,38 @@ theme = gr.themes.Soft(
     button_primary_text_color="#000000",      
 )
 
-# --- 自定義 CSS ---
+# --- 自定義 CSS (修正下拉選單看不見的問題) ---
 custom_css = """
+/* 隱藏 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; }
-/* 強制讓下拉選單的選項背景也是深色 (避免展開時變白) */
-.wrap { background-color: #262626 !important; }
+
+/* 針對 Dropdown 下拉選單的 "彈出層" 做強制顏色修正 */
+ul.options {
+    background-color: #262626 !important; /* 選單背景改深灰 */
+    border: 1px solid #d4af37 !important; /* 邊框改金色 */
+}
+
+/* 選單內的每一個選項 */
+li.item {
+    color: #E0E0E0 !important; /* 文字改灰白 */
+}
+
+/* 滑鼠滑過選項時的顏色 */
+li.item:hover, li.item.selected {
+    background-color: #d4af37 !important; /* 背景變金 */
+    color: #000000 !important; /* 文字變黑 */
+}
+
+/* 修正輸入框內的文字顏色 */
+.wrap .secondary-wrap input {
+    color: #E0E0E0 !important;
+}
+
+/* 移除 Gradio 預設的大片留白 */
+.gradio-container {
+    padding-top: 0px !important;
+    margin-top: 0px !important;
+}
 """
 
 # --- 核心邏輯：產生未來 30 天的日期選項 ---
@@ -46,29 +70,25 @@ def update_time_slots(date_str):
     if not date_str:
         return gr.update(choices=[]), "請先選擇日期"
     
-    # 解析日期字串，例如 "2026-01-16 (五)" -> 找出星期幾
-    # 我們可以直接看括號裡的字，或是重新 parse 日期，這裡用 parse 比較穩
     try:
-        clean_date_str = date_str.split(" ")[0] # 拿掉後面的 (五)
+        clean_date_str = date_str.split(" ")[0] 
         date_obj = datetime.strptime(clean_date_str, "%Y-%m-%d")
-        weekday = date_obj.weekday() # 0=週一, ... 4=週五, 5=週六
+        weekday = date_obj.weekday() 
     except:
         return gr.update(choices=[]), "日期格式錯誤"
 
-    # 基礎時段 (每天都有)
     slots = ["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"]
     
-    # 判斷營業時間
     if weekday == 4 or weekday == 5: 
-        # --- 週五 (4) 與 週六 (5) ---
+        # 週五、六
         slots.extend(["01:30", "02:00", "02:30"])
-        status_msg = f"📅 選擇了 {date_str} (週末時段 營業至 03:00)"
+        status_msg = f"已選擇 {date_str} (週末營業至 03:00)"
     else:
-        # --- 週日 到 週四 ---
+        # 平日
         slots.extend(["01:30"])
-        status_msg = f"📅 選擇了 {date_str} (平日時段 營業至 02:00)"
+        status_msg = f"已選擇 {date_str} (平日營業至 02:00)"
         
     return gr.update(choices=slots, value=slots[0] if slots else None), status_msg
 
@@ -78,69 +98,60 @@ def handle_booking(name, tel, date_str, time, pax):
         return "⚠️ 請完整填寫所有欄位"
     
     return f"""
-    <div style='background: #2a2a2a; padding: 20px; border-left: 3px solid #d4af37; color: #fff;'>
-        <h3 style='color: #d4af37; margin:0;'>🥂 預約申請已提交</h3>
-        <ul style='color: #ccc; list-style: none; padding: 0;'>
-            <li>日期：{date_str}</li>
-            <li>時間：{time}</li>
-            <li>人數：{pax} 位</li>
-            <li>貴賓：{name} ({tel})</li>
-        </ul>
-        <p style='font-size: 0.9em; color: #888;'>系統將發送確認信至您的信箱，請留意查收。</p>
+    <div style='background: #2a2a2a; padding: 15px; border-radius: 5px; border: 1px solid #d4af37; color: #fff; text-align: center;'>
+        <h3 style='color: #d4af37; margin-bottom: 10px;'>🥂 預約申請已提交</h3>
+        <p style='font-size: 14px;'>{name} 貴賓 ({pax}位)<br>
+        {date_str} {time}</p>
+        <p style='font-size: 12px; color: #aaa; margin-top: 10px;'>確認信已發送至您的信箱</p>
     </div>
     """
 
 # --- 介面佈局 ---
-with gr.Blocks(theme=theme, css=custom_css, title="Cié Cié Taipei") as demo:
+# title 設為 None 可以隱藏瀏覽器分頁標題的預設顯示 (雖然嵌入後看不到)
+with gr.Blocks(theme=theme, css=custom_css, title="Booking") as demo:
+    
+    # ⚠️ 這裡已經移除了 header-box (標題區)
     
-    gr.HTML("""
-        <div class="header-box">
-            <h1 class="header-title">Cié Cié Taipei</h1>
-            <p class="header-subtitle">URBAN LOUNGE & DINING</p>
-        </div>
-    """)
-
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("### 📅 預約資訊")
             
-            # 🌟 修正重點：改用 Dropdown，並預先填入未來 30 天的選項
             date_options = get_date_options()
+            # value 設為 None，讓使用者必須主動選
             booking_date = gr.Dropdown(
                 choices=date_options, 
-                label="選擇日期 (未來 30 天)", 
-                value=date_options[0] if date_options else None,
-                interactive=True
+                label="選擇日期", 
+                value=None, 
+                interactive=True,
+                info="開放未來 30 天預訂"
             )
             
-            pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數", 
-                                  info="超過 10 人請直接來電")
+            pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數")
 
         with gr.Column(scale=1):
              gr.Markdown("### 🕰️ 選擇時段")
-             status_box = gr.Markdown("請選擇日期以查看剩餘座位")
+             status_box = gr.Markdown("請先選擇日期...", visible=True)
              time_slot = gr.Dropdown(choices=[], label="可用時段", interactive=True)
 
     gr.Markdown("### 👤 聯絡人資料")
     with gr.Group():
         with gr.Row():
             cust_name = gr.Textbox(label="訂位姓名", placeholder="ex. 王小明")
-            cust_tel = gr.Textbox(label="手機號碼", placeholder="ex. 0912-345-678")
+            cust_tel = gr.Textbox(label="手機號碼", placeholder="ex. 0912-xxx-xxx")
 
+    # 增加一點間距
+    gr.HTML("<div style='height: 10px'></div>")
+    
     submit_btn = gr.Button("確認預約 Request Booking", size="lg", variant="primary")
     output_msg = gr.HTML(label="系統訊息")
 
     # --- 互動邏輯 ---
-    # 當「日期選單」改變時，觸發更新
     booking_date.change(
         fn=update_time_slots,
         inputs=booking_date,
         outputs=[time_slot, status_box]
     )
     
-    # 頁面載入時，自動觸發一次 (讓時段選單有預設值)
-    demo.load(fn=update_time_slots, inputs=booking_date, outputs=[time_slot, status_box])
-
     submit_btn.click(
         handle_booking,
         inputs=[cust_name, cust_tel, booking_date, time_slot, pax_count],