Update app.py

app.py

@@ -22,7 +22,6 @@ REAL_ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD") or "2016-11-11"
 supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
 
 def get_bookings():
-    # 這裡抓取所有資料，沒有設限制
     try:
         res = supabase.table("bookings").select("*").order("created_at", desc=True).execute()
         if not res.data: return pd.DataFrame()
@@ -90,35 +89,33 @@ def send_confirmation_hybrid(booking_id):
         return log_msg
     except Exception as e: return f"Error: {e}"
 
-# 🔥🔥🔥 3.1 版卡片：大字體 + 高對比 ID + 標題計數 🔥🔥🔥
+# 🔥🔥🔥 3.2 版卡片：解決截斷問題 + 字體特大號 🔥🔥🔥
 def render_booking_cards():
     df = get_bookings()
     
-    # 在標題顯示總筆數，方便您確認是否抓漏了
-    count_html = f"<div style='color:#888; margin-bottom:10px; text-align:right;'>共找到 {len(df)} 筆訂位資料</div>"
+    count_html = f"<div style='color:#bbb; margin-bottom:15px; text-align:right; font-size:16px;'>📊 共找到 <span style='color:#fff; font-weight:bold;'>{len(df)}</span> 筆資料</div>"
     
     if df.empty:
-        return f"{count_html}<div style='text-align:center; padding:60px; color:#666; font-size:1.2em;'>📭 目前沒有訂位資料</div>"
+        return f"{count_html}<div style='text-align:center; padding:60px; color:#666; font-size:1.5em;'>📭 目前沒有訂位資料</div>"
     
-    cards_html = f"{count_html}<div style='display: flex; flex-direction: column; gap: 20px; padding-bottom: 80px;'>"
+    # 這裡 padding-bottom 設為 120px，確保最後一張卡片不會被捲軸切掉
+    cards_html = f"{count_html}<div style='display: flex; flex-direction: column; gap: 24px; padding-bottom: 150px;'>"
     
     for index, row in df.iterrows():
-        # 狀態邏輯
         status = row.get('status', '待處理')
         status_color = "#ccc"
         border_color = "#444"
         
         if '確認' in status: 
-            status_color = "#2ecc71" # 綠
+            status_color = "#2ecc71"
             border_color = "#2ecc71"
         elif '取消' in status: 
-            status_color = "#e74c3c" # 紅
+            status_color = "#e74c3c"
             border_color = "#e74c3c"
         elif '已發' in status: 
-            status_color = "#f1c40f" # 黃
+            status_color = "#f1c40f"
             border_color = "#f1c40f"
 
-        # 按鈕邏輯
         is_canceled = '取消' in status
         btn_onclick = "" if is_canceled else f"cardAction({row['id']})"
         
@@ -126,89 +123,93 @@ def render_booking_cards():
             btn_style = "background: #333; color: #666; cursor: not-allowed;"
             btn_text = "🚫 已取消"
         elif '已發' in status or '確認' in status:
-            btn_style = "background: #2c3e50; color: #fff; border: 1px solid #555; hover:background:#34495e;"
+            btn_style = "background: #2c3e50; color: #fff; border: 1px solid #555;"
             btn_text = "🔄 重發確認" 
         else:
-            btn_style = "background: #d4af37; color: #000; font-weight:bold; box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);"
+            btn_style = "background: #d4af37; color: #000; font-weight:800; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);"
             btn_text = "🚀 發送確認"
 
         card = f"""
         <div class="booking-card" style="
-            background: #1e1e1e; 
-            border-left: 6px solid {border_color};
+            background: #1a1a1a; 
+            border-left: 8px solid {border_color};
             border-radius: 12px; 
-            padding: 22px; 
-            box-shadow: 0 6px 16px rgba(0,0,0,0.4);
-            font-family: 'Segoe UI', Roboto, sans-serif;
-            position: relative;">
+            padding: 24px; 
+            box-shadow: 0 8px 20px rgba(0,0,0,0.6);
+            font-family: '微軟正黑體', sans-serif;
+            position: relative;
+            margin-bottom: 5px;">
             
-            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; border-bottom:1px solid #333; padding-bottom:12px;">
-                <div style="font-size:1.2em; color:#d4af37; font-weight:600;">
-                    <span style="font-size:0.75em; color:#888; margin-right:5px; font-weight:normal;">📅 日期</span> {row['date']}
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid #333; padding-bottom:15px;">
+                <div style="font-size:1.3em; color:#fff; font-weight:bold;">
+                    <span style="font-size:0.8em; color:#aaa; margin-right:8px; font-weight:normal;">📅 日期</span>{row['date']}
                 </div>
                 <div style="
                     color: {status_color}; 
-                    background: {status_color}1a; 
-                    padding: 6px 14px; 
-                    border-radius: 20px; 
-                    font-size: 0.9em; 
+                    background: {status_color}22; 
+                    padding: 8px 16px; 
+                    border-radius: 30px; 
+                    font-size: 1em; 
                     font-weight: bold;
-                    letter-spacing: 1px;">
+                    letter-spacing: 1px;
+                    border: 1px solid {status_color}44;">
                     {status}
                 </div>
             </div>
 
-            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:15px; margin-bottom:20px;">
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:25px;">
                 <div>
-                    <div style="font-size:0.9em; color:#666; margin-bottom:4px;">⏰ 訂位時間</div>
-                    <div style="font-size:1.8em; color:#fff; font-weight:800; font-family:monospace; letter-spacing:-1px;">{row['time']}</div>
+                    <div style="font-size:1em; color:#aaa; margin-bottom:5px;">⏰ 訂位時間</div>
+                    <div style="font-size:2.2em; color:#d4af37; font-weight:900; letter-spacing:-1px; line-height:1;">{row['time']}</div>
                 </div>
                 <div>
-                    <div style="font-size:0.9em; color:#666; margin-bottom:4px;">👥 人數</div>
-                    <div style="font-size:1.8em; color:#fff; font-weight:800;">{row['pax']} <span style="font-size:0.5em; font-weight:400; color:#888;">位</span></div>
+                    <div style="font-size:1em; color:#aaa; margin-bottom:5px;">👥 人數</div>
+                    <div style="font-size:2.2em; color:#fff; font-weight:900; line-height:1;">{row['pax']} <span style="font-size:0.5em; font-weight:400; color:#888;">位</span></div>
                 </div>
             </div>
             
-            <div style="background:#262626; padding:18px; border-radius:10px; margin-bottom:18px;">
-                <div style="margin-bottom:12px;">
-                    <span style="color:#666; font-size:0.9em; display:block; margin-bottom:2px;">👤 姓名 Name</span>
-                    <span style="color:#eee; font-size:1.3em; font-weight:700;">{row['name']}</span>
+            <div style="background:#222; padding:20px; border-radius:10px; margin-bottom:20px;">
+                <div style="margin-bottom:15px;">
+                    <span style="color:#bbb; font-size:1em; display:block; margin-bottom:4px; font-weight:bold;">👤 姓名 Name</span>
+                    <span style="color:#fff; font-size:1.5em; font-weight:bold;">{row['name']}</span>
                 </div>
-                <div style="margin-bottom:12px;">
-                    <span style="color:#666; font-size:0.9em; display:block; margin-bottom:2px;">📞 電話 Phone</span>
-                    <a href="tel:{row['tel']}" style="color:#4dabf7; text-decoration:none; font-size:1.2em; letter-spacing:0.5px; font-weight:500;">{row['tel']}</a>
+                <div style="margin-bottom:15px;">
+                    <span style="color:#bbb; font-size:1em; display:block; margin-bottom:4px; font-weight:bold;">📞 電話 Phone</span>
+                    <a href="tel:{row['tel']}" style="color:#69c0ff; text-decoration:none; font-size:1.4em; letter-spacing:1px; font-weight:600; border-bottom: 1px dotted #69c0ff;">{row['tel']}</a>
                 </div>
                 <div>
-                    <span style="color:#666; font-size:0.9em; display:block; margin-bottom:2px;">✉️ 信箱 Email</span>
-                    <span style="color:#ccc; font-size:1.1em; word-break:break-all;">{row['email'] or '未提供'}</span>
+                    <span style="color:#bbb; font-size:1em; display:block; margin-bottom:4px; font-weight:bold;">✉️ 信箱 Email</span>
+                    <span style="color:#ddd; font-size:1.1em; word-break:break-all;">{row['email'] or '未提供'}</span>
                 </div>
             </div>
 
-            <div style="margin-bottom:20px;">
-                <div style="font-size:0.9em; color:#888; margin-bottom:6px;">📝 備註事項 Note</div>
-                <div style="color:#d4af37; background:#d4af371a; padding:12px; border-radius:8px; font-size:1.0em; line-height:1.5;">
-                    {row.get('remarks') or '無特別備註'}
+            <div style="margin-bottom:25px;">
+                <div style="font-size:1em; color:#aaa; margin-bottom:8px;">📝 備註 Note</div>
+                <div style="color:#f1c40f; background:#f1c40f11; padding:15px; border-radius:8px; font-size:1.1em; line-height:1.6; border: 1px solid #f1c40f33;">
+                    {row.get('remarks') or '無'}
                 </div>
             </div>
 
-            <div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333; padding-top:18px;">
-                <span style="
-                    font-size: 0.85em; 
-                    color: #aaa; 
-                    font-family: monospace; 
-                    background: #333; 
-                    padding: 4px 8px; 
-                    border-radius: 4px;">
+            <div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333; padding-top:20px;">
+                <div style="
+                    font-size: 1.1em; 
+                    color: #000; 
+                    font-weight: 900;
+                    background: #e0e0e0; 
+                    padding: 6px 12px; 
+                    border-radius: 6px;
+                    font-family: monospace;">
                     ID: {row['id']}
-                </span>
+                </div>
                 
                 <button onclick="{btn_onclick}" style="
                     border: none; 
-                    padding: 12px 28px; 
+                    padding: 14px 30px; 
                     border-radius: 8px; 
-                    font-size: 1em; 
+                    font-size: 1.1em; 
                     transition: all 0.2s;
-                    min-width: 140px;
+                    min-width: 150px;
+                    cursor: pointer;
                     {btn_style}">
                     {btn_text}
                 </button>
@@ -250,26 +251,33 @@ function() {
 }
 """
 
-# --- CSS (樣式全放在這) ---
+# --- CSS (修復捲軸與高度問題) ---
 custom_css = """
 body, .gradio-container { background-color: #0F0F0F; color: #fff; }
 
-/* 捲軸美化 */
+/* 🔥 關鍵修正：給容器一個固定高度 (例如 65vh)，確保它在頁面內捲動 */
+/* 這樣就不會被下方的 Log 區塊擋住，也不會撐開整個網頁 */
 #booking_display { 
-    max-height: 85vh; 
-    overflow-y: auto; 
-    padding-right: 5px;
+    height: 65vh;       /* 固定高度，約佔螢幕 65% */
+    overflow-y: auto;   /* 內容太多時顯示垂直捲軸 */
+    padding-right: 8px; /* 避免文字貼著捲軸 */
+    margin-bottom: 20px;
+    border: 1px solid #333;
+    border-radius: 8px;
+    background-color: #111;
 }
-#booking_display::-webkit-scrollbar { width: 6px; }
-#booking_display::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
+
+/* 捲軸美化 */
+#booking_display::-webkit-scrollbar { width: 8px; }
+#booking_display::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }
 #booking_display::-webkit-scrollbar-track { background: #222; }
 
-button:active { transform: scale(0.98); }
+/* 讓按鈕有點擊感 */
+button:active { transform: scale(0.96); }
 
 /* Header Panel 樣式 */
 #header-panel {
     background: #1a1a1a;
-    border: none;
     padding: 15px;
     margin-bottom: 20px;
     border-radius: 10px;
@@ -302,7 +310,7 @@ with gr.Blocks(title="Admin") as demo:
             hidden_id_input = gr.Number(elem_id="hidden_id_input", precision=0)
             hidden_send_btn = gr.Button("Send", elem_id="hidden_send_btn")
         
-        log_output = gr.Textbox(label="系統日誌", lines=1, interactive=False)
+        log_output = gr.Textbox(label="系統日誌 (System Log)", lines=2, interactive=False)
         
         # 綁定事件
         login_btn.click(check_login, inputs=[username_input, password_input], outputs=[login_row, admin_row, error_msg]).then(