Update app.py

app.py

@@ -1,8 +1,7 @@
 import gradio as gr
 from datetime import datetime, timedelta
 
-# --- 1. 主題配色設定 (強化版) ---
-# 我們在這邊直接設定好 Dropdown 的顏色，這樣就算 CSS 沒吃到，也不會變成白底白字
+# --- 1. 主題配色 (保持黑金風格) ---
 theme = gr.themes.Soft(
     primary_hue="amber",
     neutral_hue="zinc",
@@ -10,87 +9,54 @@ theme = gr.themes.Soft(
 ).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",        # 輸入框背景 (包含 Dropdown 未展開時)
-    input_border_color="#444444",
-    input_border_width="1px",
+    block_border_width="1px",
+    block_border_color="#333",
+    input_background_fill="#262626",
+    input_border_color="#444",
     body_text_color="#E0E0E0",
     block_title_text_color="#d4af37",
-    button_primary_background_fill="linear-gradient(45deg, #d4af37, #AA8E4A)",
+    button_primary_background_fill="#d4af37",
     button_primary_text_color="#000000",
-    # 🌟 新增：強制設定 Dropdown 選單展開後的顏色
-    table_row_focus_background_fill="#d4af37", 
 )
 
-# --- 2. 高階 CSS (修正選單不顯示的問題) ---
+# --- 2. CSS 修復 (解決選單被擋住 + 樣式美化) ---
 custom_css = """
 /* 隱藏 footer */
-footer {visibility: hidden}
+footer {display: none !important;}
 
-/* 整體背景漸層 */
-.gradio-container {
-    background: radial-gradient(circle at 50% 0%, #2a2a2a 0%, #0F0F0F 100%) !important;
+/* 強制讓所有容器允許內容溢出 (解決選單被裁切的關鍵) */
+.gradio-container, .block, .row, .column {
+    overflow: visible !important;
 }
 
-/* 區塊樣式 (移除了 backdrop-filter，因為它常會導致彈出選單被裁切或消失) */
-.block {
-    background: rgba(30, 30, 30, 0.8) !important;
-    border: 1px solid rgba(212, 175, 55, 0.1);
-    border-radius: 12px !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;
+    background-color: #262626 !important;
+    border: 1px solid #d4af37 !important;
+    z-index: 10000 !important; /* 確保在最上層 */
+    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
 }
 
-/* 選單內的選項文字 */
 .item {
     color: #E0E0E0 !important;
-    padding: 8px 12px !important;
 }
 
-/* 滑鼠滑過選項 */
 .item:hover, .item.selected {
-    background-color: #d4af37 !important; /* 金色背景 */
-    color: #000000 !important; /* 黑色文字 */
+    background-color: #d4af37 !important;
+    color: black !important;
 }
 
-/* 輸入框美化 */
-input, textarea, .dropdown-trigger {
-    background-color: rgba(0, 0, 0, 0.3) !important;
-    border: 1px solid #444 !important;
-}
+/* 輸入框聚焦時的金色光暈 */
 input:focus, .dropdown-trigger:focus-within {
     border-color: #d4af37 !important;
-    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
+    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
 }
 
-/* 按鈕美化 */
-button.primary {
-    font-weight: bold !important;
-    letter-spacing: 1px !important;
-    transition: transform 0.2s;
-}
-button.primary:hover {
-    transform: scale(1.02);
-    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
-}
-
-/* 標題美化 */
+/* 標題樣式 */
 h3 {
-    font-family: 'Playfair Display', serif !important;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
-    padding-bottom: 10px;
-    margin-bottom: 15px !important;
+    border-bottom: 1px solid #444; 
+    padding-bottom: 5px;
+    margin-bottom: 10px;
 }
 """
 
@@ -133,42 +99,28 @@ def handle_booking(name, tel, date_str, time, pax):
         return "⚠️ 請完整填寫所有欄位"
     
     return f"""
-    <div style='background: rgba(42, 42, 42, 0.8); padding: 20px; border-radius: 10px; border: 1px solid #d4af37; color: #fff; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5);'>
-        <h2 style='color: #d4af37; margin-bottom: 10px; font-family: Playfair Display;'>Request Confirmed</h2>
-        <p style='font-size: 16px; margin: 10px 0;'>🥂 預約申請已提交</p>
-        <hr style='border: 0; border-top: 1px solid #555; margin: 15px 0;'>
-        <div style='text-align: left; display: inline-block;'>
-            <p><b>👤 貴賓：</b> {name} ({pax}位)</p>
-            <p><b>📅 日期：</b> {date_str}</p>
-            <p><b>🕰️ 時間：</b> {time}</p>
-        </div>
-        <p style='font-size: 12px; color: #aaa; margin-top: 20px;'>系統將發送確認信至您的信箱，請留意查收。</p>
+    <div style='text-align: center; color: #fff; padding: 20px; border: 1px solid #d4af37; border-radius: 8px; background: #222;'>
+        <h2 style='color: #d4af37; margin: 0;'>Request Received</h2>
+        <p style='margin: 10px 0;'>🥂 預約申請已提交</p>
+        <p style='font-size: 0.9em; color: #aaa;'>系統將發送確認信至您的信箱。</p>
     </div>
     """
 
 # --- 介面佈局 ---
 with gr.Blocks(theme=theme, css=custom_css, title="Booking") as demo:
-    
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column():
             gr.Markdown("### 📅 預約資訊 Booking Info")
-            
             date_options = get_date_options()
-            booking_date = gr.Dropdown(
-                choices=date_options, 
-                label="選擇日期 Select Date", 
-                value=None, 
-                interactive=True,
-            )
-            
+            booking_date = gr.Dropdown(choices=date_options, label="選擇日期 Select Date", interactive=True)
             pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數 Guest Count")
 
-        with gr.Column(scale=1):
+        with gr.Column():
              gr.Markdown("### 🕰️ 選擇時段 Time Slot")
              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():
@@ -177,11 +129,9 @@ with gr.Blocks(theme=theme, css=custom_css, title="Booking") as demo:
             cust_tel = gr.Textbox(label="手機號碼 Phone", placeholder="ex. 0912-xxx-xxx")
 
     gr.HTML("<div style='height: 20px'></div>")
-
     submit_btn = gr.Button("確認預約 Request Booking", size="lg", variant="primary")
     output_msg = gr.HTML(label="系統訊息")
 
-    # --- 互動邏輯 ---
     booking_date.change(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], outputs=output_msg)