Update app.py

app.py

@@ -1,64 +1,75 @@
 import gradio as gr
 from datetime import datetime, timedelta
 
-# --- 1. 主題配色設定 (基底) ---
+# --- 1. 主題配色設定 (強化版) ---
+# 我們在這邊直接設定好 Dropdown 的顏色，這樣就算 CSS 沒吃到，也不會變成白底白字
 theme = gr.themes.Soft(
     primary_hue="amber",
     neutral_hue="zinc",
     font=[gr.themes.GoogleFont("Playfair Display"), "ui-sans-serif", "sans-serif"],
 ).set(
-    body_background_fill="#0F0F0F",         # 極致深黑
-    block_background_fill="#1a1a1a",        # 區塊深灰
-    block_border_width="0px",               # 移除生硬邊框
-    block_shadow="0 4px 6px rgba(0,0,0,0.3)", # 增加立體感陰影
-    input_background_fill="#262626",        # 輸入框背景
-    input_border_color="#444444",           # 輸入框邊框
+    body_background_fill="#0F0F0F",
+    block_background_fill="#1a1a1a",
+    block_border_width="0px",
+    block_shadow="0 4px 6px rgba(0,0,0,0.3)",
+    input_background_fill="#262626",        # 輸入框背景 (包含 Dropdown 未展開時)
+    input_border_color="#444444",
     input_border_width="1px",
-    body_text_color="#E0E0E0",              # 文字顏色
-    block_title_text_color="#d4af37",       # 標題金字
-    button_primary_background_fill="linear-gradient(45deg, #d4af37, #AA8E4A)", # 按鈕漸層金
+    body_text_color="#E0E0E0",
+    block_title_text_color="#d4af37",
+    button_primary_background_fill="linear-gradient(45deg, #d4af37, #AA8E4A)",
     button_primary_text_color="#000000",
+    # 🌟 新增：強制設定 Dropdown 選單展開後的顏色
+    table_row_focus_background_fill="#d4af37", 
 )
 
-# --- 2. 高階 CSS (磨砂玻璃與細節修飾) ---
+# --- 2. 高階 CSS (修正選單不顯示的問題) ---
 custom_css = """
 /* 隱藏 footer */
 footer {visibility: hidden}
 
-/* 整體背景漸層 (營造 Lounge 氛圍) */
+/* 整體背景漸層 */
 .gradio-container {
     background: radial-gradient(circle at 50% 0%, #2a2a2a 0%, #0F0F0F 100%) !important;
 }
 
-/* 區塊磨砂玻璃效果 */
+/* 區塊樣式 (移除了 backdrop-filter，因為它常會導致彈出選單被裁切或消失) */
 .block {
-    background: rgba(30, 30, 30, 0.6) !important; /* 半透明深灰 */
-    backdrop-filter: blur(10px); /* 模糊背景 */
-    border: 1px solid rgba(212, 175, 55, 0.1); /* 極淡的金色邊框 */
+    background: rgba(30, 30, 30, 0.8) !important;
+    border: 1px solid rgba(212, 175, 55, 0.1);
     border-radius: 12px !important;
 }
 
-/* 下拉選單修正 (黑底金字) */
-ul.options {
-    background-color: #1a1a1a !important;
-    border: 1px solid #d4af37 !important;
+/* 🌟 修正重點：Dropdown 選單容器 */
+/* Gradio 4.x 的選單 class 通常是 .options 或 .wrap .options */
+.options {
+    background-color: #262626 !important; /* 深灰背景 */
+    border: 1px solid #d4af37 !important; /* 金色邊框 */
     border-radius: 8px !important;
+    z-index: 9999 !important; /* 🔥 確保浮在最上層 */
+    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
 }
-li.item { color: #E0E0E0 !important; }
-li.item:hover, li.item.selected {
-    background-color: #d4af37 !important;
-    color: #000000 !important;
+
+/* 選單內的選項文字 */
+.item {
+    color: #E0E0E0 !important;
+    padding: 8px 12px !important;
+}
+
+/* 滑鼠滑過選項 */
+.item:hover, .item.selected {
+    background-color: #d4af37 !important; /* 金色背景 */
+    color: #000000 !important; /* 黑色文字 */
 }
 
 /* 輸入框美化 */
 input, textarea, .dropdown-trigger {
     background-color: rgba(0, 0, 0, 0.3) !important;
     border: 1px solid #444 !important;
-    transition: all 0.3s ease;
 }
 input:focus, .dropdown-trigger:focus-within {
-    border-color: #d4af37 !important; /* 選中時變金色 */
-    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important; /* 金色光暈 */
+    border-color: #d4af37 !important;
+    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
 }
 
 /* 按鈕美化 */
@@ -68,7 +79,7 @@ button.primary {
     transition: transform 0.2s;
 }
 button.primary:hover {
-    transform: scale(1.02); /* 滑鼠滑過微微放大 */
+    transform: scale(1.02);
     box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
 }
 
@@ -83,7 +94,7 @@ h3 {
 }
 """
 
-# --- 核心邏輯：產生未來 30 天的日期選項 ---
+# --- 核心邏輯 (保持不變) ---
 def get_date_options():
     options = []
     today = datetime.now()
@@ -94,7 +105,6 @@ def get_date_options():
         options.append(date_str)
     return options
 
-# --- 核心邏輯：動態計算時段 ---
 def update_time_slots(date_str):
     if not date_str:
         return gr.update(choices=[]), "請先選擇日期"
@@ -118,7 +128,6 @@ def update_time_slots(date_str):
         
     return gr.update(choices=slots, value=slots[0] if slots else None), status_msg
 
-# --- 模擬寫入資料 ---
 def handle_booking(name, tel, date_str, time, pax):
     if not name or not tel or not date_str or not time:
         return "⚠️ 請完整填寫所有欄位"
@@ -140,8 +149,6 @@ def handle_booking(name, tel, date_str, time, pax):
 # --- 介面佈局 ---
 with gr.Blocks(theme=theme, css=custom_css, title="Booking") as demo:
     
-    # 這裡不放標題，因為您的 GitHub Pages 已經有標題了
-    
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("### 📅 預約資訊 Booking Info")
@@ -161,7 +168,7 @@ with gr.Blocks(theme=theme, css=custom_css, title="Booking") as demo:
              status_box = gr.Markdown("請先選擇日期...", visible=True)
              time_slot = gr.Dropdown(choices=[], label="可用時段 Available Time", interactive=True)
 
-    gr.HTML("<div style='height: 20px'></div>") # 間距
+    gr.HTML("<div style='height: 20px'></div>") 
 
     gr.Markdown("### 👤 聯絡人資料 Contact")
     with gr.Group():