Update app.py

app.py

@@ -1,54 +1,85 @@
 import gradio as gr
 from datetime import datetime, timedelta
 
-# --- 設定主題配色 (維持黑金高級感) ---
+# --- 1. 主題配色設定 (基底) ---
 theme = gr.themes.Soft(
     primary_hue="amber",
     neutral_hue="zinc",
-    font=[gr.themes.GoogleFont("Playfair Display"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font=[gr.themes.GoogleFont("Playfair Display"), "ui-sans-serif", "sans-serif"],
 ).set(
-    body_background_fill="#1c1c1c",        
-    block_background_fill="#262626",       
-    block_border_width="0px",              
-    input_background_fill="#333333",       
-    input_border_color="#444444",          
-    body_text_color="#E0E0E0",             
-    block_title_text_color="#d4af37",      
-    button_primary_background_fill="#d4af37", 
-    button_primary_text_color="#000000",      
+    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",           # 輸入框邊框
+    input_border_width="1px",
+    body_text_color="#E0E0E0",              # 文字顏色
+    block_title_text_color="#d4af37",       # 標題金字
+    button_primary_background_fill="linear-gradient(45deg, #d4af37, #AA8E4A)", # 按鈕漸層金
+    button_primary_text_color="#000000",
 )
 
-# --- 自定義 CSS (修正下拉選單看不見的問題) ---
+# --- 2. 高階 CSS (磨砂玻璃與細節修飾) ---
 custom_css = """
 /* 隱藏 footer */
 footer {visibility: hidden}
 
-/* 針對 Dropdown 下拉選單的 "彈出層" 做強制顏色修正 */
-ul.options {
-    background-color: #262626 !important; /* 選單背景改深灰 */
-    border: 1px solid #d4af37 !important; /* 邊框改金色 */
+/* 整體背景漸層 (營造 Lounge 氛圍) */
+.gradio-container {
+    background: radial-gradient(circle at 50% 0%, #2a2a2a 0%, #0F0F0F 100%) !important;
 }
 
-/* 選單內的每一個選項 */
-li.item {
-    color: #E0E0E0 !important; /* 文字改灰白 */
+/* 區塊磨砂玻璃效果 */
+.block {
+    background: rgba(30, 30, 30, 0.6) !important; /* 半透明深灰 */
+    backdrop-filter: blur(10px); /* 模糊背景 */
+    border: 1px solid rgba(212, 175, 55, 0.1); /* 極淡的金色邊框 */
+    border-radius: 12px !important;
 }
 
-/* 滑鼠滑過選項時的顏色 */
+/* 下拉選單修正 (黑底金字) */
+ul.options {
+    background-color: #1a1a1a !important;
+    border: 1px solid #d4af37 !important;
+    border-radius: 8px !important;
+}
+li.item { color: #E0E0E0 !important; }
 li.item:hover, li.item.selected {
-    background-color: #d4af37 !important; /* 背景變金 */
-    color: #000000 !important; /* 文字變黑 */
+    background-color: #d4af37 !important;
+    color: #000000 !important;
 }
 
-/* 修正輸入框內的文字顏色 */
-.wrap .secondary-wrap input {
-    color: #E0E0E0 !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; /* 金色光暈 */
 }
 
-/* 移除 Gradio 預設的大片留白 */
-.gradio-container {
-    padding-top: 0px !important;
-    margin-top: 0px !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;
 }
 """
 
@@ -57,10 +88,8 @@ def get_date_options():
     options = []
     today = datetime.now()
     weekdays = ["(一)", "(二)", "(三)", "(四)", "(五)", "(六)", "(日)"]
-    
-    for i in range(30): # 開放未來 30 天
+    for i in range(30): 
         current_date = today + timedelta(days=i)
-        # 格式：2026-01-16 (五)
         date_str = f"{current_date.strftime('%Y-%m-%d')} {weekdays[current_date.weekday()]}"
         options.append(date_str)
     return options
@@ -69,7 +98,6 @@ def get_date_options():
 def update_time_slots(date_str):
     if not date_str:
         return gr.update(choices=[]), "請先選擇日期"
-    
     try:
         clean_date_str = date_str.split(" ")[0] 
         date_obj = datetime.strptime(clean_date_str, "%Y-%m-%d")
@@ -82,13 +110,11 @@ def update_time_slots(date_str):
              "00:00", "00:30", "01:00"]
     
     if weekday == 4 or weekday == 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
 
@@ -98,65 +124,59 @@ def handle_booking(name, tel, date_str, time, pax):
         return "⚠️ 請完整填寫所有欄位"
     
     return f"""
-    <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 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>
     """
 
 # --- 介面佈局 ---
-# title 設為 None 可以隱藏瀏覽器分頁標題的預設顯示 (雖然嵌入後看不到)
 with gr.Blocks(theme=theme, css=custom_css, title="Booking") as demo:
     
-    # ⚠️ 這裡已經移除了 header-box (標題區)
+    # 這裡不放標題，因為您的 GitHub Pages 已經有標題了
     
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### 📅 預約資訊")
+            gr.Markdown("### 📅 預約資訊 Booking Info")
             
             date_options = get_date_options()
-            # value 設為 None，讓使用者必須主動選
             booking_date = gr.Dropdown(
                 choices=date_options, 
-                label="選擇日期", 
+                label="選擇日期 Select Date", 
                 value=None, 
                 interactive=True,
-                info="開放未來 30 天預訂"
             )
             
-            pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數")
+            pax_count = gr.Slider(minimum=1, maximum=10, value=2, step=1, label="用餐人數 Guest Count")
 
         with gr.Column(scale=1):
-             gr.Markdown("### 🕰️ 選擇時段")
+             gr.Markdown("### 🕰️ 選擇時段 Time Slot")
              status_box = gr.Markdown("請先選擇日期...", visible=True)
-             time_slot = gr.Dropdown(choices=[], label="可用時段", interactive=True)
+             time_slot = gr.Dropdown(choices=[], label="可用時段 Available Time", interactive=True)
+
+    gr.HTML("<div style='height: 20px'></div>") # 間距
 
-    gr.Markdown("### 👤 聯絡人資料")
+    gr.Markdown("### 👤 聯絡人資料 Contact")
     with gr.Group():
         with gr.Row():
-            cust_name = gr.Textbox(label="訂位姓名", placeholder="ex. 王小明")
-            cust_tel = gr.Textbox(label="手機號碼", placeholder="ex. 0912-xxx-xxx")
+            cust_name = gr.Textbox(label="訂位姓名 Name", placeholder="ex. 王小明")
+            cust_tel = gr.Textbox(label="手機號碼 Phone", placeholder="ex. 0912-xxx-xxx")
+
+    gr.HTML("<div style='height: 20px'></div>")
 
-    # 增加一點間距
-    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]
-    )
-    
-    submit_btn.click(
-        handle_booking,
-        inputs=[cust_name, cust_tel, booking_date, time_slot, pax_count],
-        outputs=output_msg
-    )
+    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)
 
 if __name__ == "__main__":
     demo.launch()