Update app.py

app.py

@@ -43,23 +43,32 @@ def send_confirmation_hybrid(booking_id):
         if email and "@" in email and GAS_MAIL_URL:
             try:
                 html = f"""
-                <div style="background:#111; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif;">
-                    <h2 style="border-bottom:1px solid #333; padding-bottom:10px;">Cié Cié Taipei 訂位確認</h2>
-                    <p style="color:#eee; font-size:16px;">{booking['name']} 您好，已為您保留座位：</p>
-                    <div style="background:#222; padding:15px; border-radius:6px; margin:15px 0;">
-                        <ul style="color:#ddd; padding-left:20px; line-height:1.8;">
-                            <li>📅 日期：<strong style="color:#fff;">{booking['date']}</strong></li>
-                            <li>⏰ 時間：<strong style="color:#fff;">{booking['time']}</strong></li>
-                            <li>👥 人數：<strong style="color:#fff;">{booking['pax']} 位</strong></li>
-                        </ul>
+                <div style="background:#1a1a1a; color:#d4af37; padding:20px; border-radius:8px; font-family:sans-serif; border:1px solid #333;">
+                    <div style="text-align:center; border-bottom:1px solid #333; padding-bottom:15px; margin-bottom:15px;">
+                        <h2 style="margin:0; font-size:24px; letter-spacing:2px;">Cié Cié Taipei</h2>
+                        <p style="color:#888; margin:5px 0 0 0; font-size:14px;">Reservation Confirmation</p>
                     </div>
-                    <div style="margin-top:20px;">
-                        <a href="{confirm_link}" style="background:#d4af37; color:#000; padding:10px 20px; text-decoration:none; border-radius:4px; font-weight:bold; margin-right:10px;">✅ 確認出席</a>
-                        <a href="{cancel_link}" style="border:1px solid #ff5252; color:#ff5252; padding:9px 19px; text-decoration:none; border-radius:4px;">🚫 取消</a>
+                    
+                    <p style="color:#eee; font-size:16px;"><strong>{booking['name']}</strong> 您好，我們期待您的光臨！<br>已為您保留座位資訊如下：</p>
+                    
+                    <div style="background:#2a2a2a; padding:20px; border-radius:8px; margin:20px 0; border-left:4px solid #d4af37;">
+                        <table style="width:100%; border-collapse:collapse; color:#ddd;">
+                            <tr><td style="padding:5px 0; color:#888;">日期 Date</td><td style="padding:5px 0; font-weight:bold; color:#fff;">{booking['date']}</td></tr>
+                            <tr><td style="padding:5px 0; color:#888;">時間 Time</td><td style="padding:5px 0; font-weight:bold; color:#fff;">{booking['time']}</td></tr>
+                            <tr><td style="padding:5px 0; color:#888;">人數 Guest</td><td style="padding:5px 0; font-weight:bold; color:#fff;">{booking['pax']} 位</td></tr>
+                             <tr><td style="padding:5px 0; color:#888;">備註 Note</td><td style="padding:5px 0;">{booking.get('remarks') or '無'}</td></tr>
+                        </table>
                     </div>
+                    
+                    <div style="text-align:center; margin-top:30px;">
+                        <a href="{confirm_link}" style="display:inline-block; background:#d4af37; color:#000; padding:12px 30px; text-decoration:none; border-radius:50px; font-weight:bold; margin-right:10px; box-shadow:0 4px 10px rgba(212, 175, 55, 0.3);">✅ 確認出席</a>
+                        <a href="{cancel_link}" style="display:inline-block; border:1px solid #555; color:#aaa; padding:11px 29px; text-decoration:none; border-radius:50px; font-size:14px;">🚫 取消訂位</a>
+                    </div>
+                    
+                    <p style="text-align:center; color:#666; font-size:12px; margin-top:30px;">若按鈕無法點擊，請直接回覆此信件。</p>
                 </div>
                 """
-                requests.post(GAS_MAIL_URL, json={"to": email, "subject": "訂位確認 - Cié Cié Taipei", "htmlBody": html, "name": "Cié Cié Taipei"})
+                requests.post(GAS_MAIL_URL, json={"to": email, "subject": f"訂位確認: {booking['date']} - Cié Cié Taipei", "htmlBody": html, "name": "Cié Cié Taipei"})
                 log_msg += "✅ Mail "
             except: log_msg += "❌ MailErr "
         
@@ -68,7 +77,7 @@ def send_confirmation_hybrid(booking_id):
             try:
                 requests.post("https://api.line.me/v2/bot/message/push", 
                               headers={"Authorization": f"Bearer {LINE_ACCESS_TOKEN}"}, 
-                              json={"to": user_id, "messages": [{"type": "text", "text": f"✅ 訂位確認\n{booking['date']} {booking['time']}\n請回覆確認，謝謝！"}]})
+                              json={"to": user_id, "messages": [{"type": "text", "text": f"✅ 訂位確認\n日期：{booking['date']}\n時間：{booking['time']}\n人數：{booking['pax']}位\n\n請查收 Email 確認信並點擊確認��鈕，謝謝！"}]})
                 log_msg += "✅ LINE "
             except: log_msg += "❌ LINEErr"
 
@@ -77,88 +86,115 @@ def send_confirmation_hybrid(booking_id):
         return log_msg
     except Exception as e: return f"Error: {e}"
 
-# 🔥🔥🔥 2.0 版卡片渲染：設計感 + 操作按鈕 🔥🔥🔥
+# 🔥🔥🔥 3.0 版卡片：標籤化 + 大字體 + 重發功能 🔥🔥🔥
 def render_booking_cards():
     df = get_bookings()
     if df.empty:
-        return "<div style='text-align:center; padding:40px; color:#666; font-size:1.2em;'>📭 目前沒有訂位資料</div>"
+        return "<div style='text-align:center; padding:60px; color:#666; font-size:1.2em;'>📭 目前沒有訂位資料</div>"
     
-    cards_html = "<div style='display: flex; flex-direction: column; gap: 16px; padding-bottom: 60px;'>"
+    cards_html = "<div style='display: flex; flex-direction: column; gap: 20px; padding-bottom: 80px;'>"
     
     for index, row in df.iterrows():
-        # 狀態樣式邏輯
+        # 狀態邏輯
         status = row.get('status', '待處理')
-        status_bg = "#333"
         status_color = "#ccc"
+        border_color = "#444"
         
         if '確認' in status: 
-            status_bg = "rgba(46, 204, 113, 0.2)"; status_color = "#2ecc71" # 綠
+            status_color = "#2ecc71" # 綠
+            border_color = "#2ecc71"
         elif '取消' in status: 
-            status_bg = "rgba(231, 76, 60, 0.2)"; status_color = "#e74c3c" # 紅
+            status_color = "#e74c3c" # 紅
+            border_color = "#e74c3c"
         elif '已發' in status: 
-            status_bg = "rgba(241, 196, 15, 0.2)"; status_color = "#f1c40f" # 黃
+            status_color = "#f1c40f" # 黃
+            border_color = "#f1c40f"
 
-        # 動作按鈕：如果是「已取消」或「已確認」，按鈕就反灰，避免誤按
-        is_disabled = '取消' in status or '確認' in status
-        btn_style = "opacity: 0.5; cursor: not-allowed;" if is_disabled else "cursor: pointer; hover:brightness(1.2);"
-        btn_onclick = "" if is_disabled else f"cardAction({row['id']})"
-        btn_text = "已處理" if is_disabled else "🚀 發送確認"
+        # 按鈕邏輯
+        # 只有「顧客已取消」才鎖定，其他狀態 (包含已確認、已發送) 都允許重發
+        is_canceled = '取消' in status
+        btn_onclick = "" if is_canceled else f"cardAction({row['id']})"
+        
+        # 按鈕樣式與文字
+        if is_canceled:
+            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_text = "🔄 重發確認" # 允許重發
+        else:
+            btn_style = "background: #d4af37; color: #000; font-weight:bold; box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);"
+            btn_text = "🚀 發送確認"
 
         card = f"""
         <div class="booking-card" style="
-            background: linear-gradient(145deg, #2a2a2a, #222); 
-            border: 1px solid #333; 
-            border-radius: 12px; 
-            padding: 16px; 
-            position: relative;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-            transition: transform 0.2s;
-            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
+            background: #1e1e1e; 
+            border-left: 6px solid {border_color};
+            border-radius: 10px; 
+            padding: 20px; 
+            box-shadow: 0 6px 16px rgba(0,0,0,0.4);
+            font-family: 'Segoe UI', Roboto, sans-serif;
+            position: relative;">
             
-            <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:12px;">
-                <div>
-                    <div style="color:#d4af37; font-size:1.4em; font-weight:800; letter-spacing:0.5px; line-height:1.2;">
-                        {row['time']} <span style="font-size:0.6em; color:#888; font-weight:400;">{row['date'][5:]}</span>
-                    </div>
-                    <div style="color:#fff; font-size:1.1em; font-weight:600; margin-top:4px;">
-                        {row['name']} <span style="font-size:0.8em; color:#aaa; font-weight:400;">({row['pax']}位)</span>
-                    </div>
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid #333; padding-bottom:10px;">
+                <div style="font-size:1.1em; color:#d4af37; font-weight:600;">
+                    <span style="font-size:0.8em; color:#888; margin-right:5px;">📅 日期</span> {row['date']}
                 </div>
-                
                 <div style="
-                    background: {status_bg}; 
                     color: {status_color}; 
-                    padding: 4px 10px; 
+                    background: {status_color}1a; 
+                    padding: 4px 12px; 
                     border-radius: 20px; 
-                    font-size: 0.75em; 
-                    font-weight: 600;
-                    border: 1px solid {status_color}44;">
+                    font-size: 0.85em; 
+                    font-weight: bold;
+                    letter-spacing: 1px;">
                     {status}
                 </div>
             </div>
+
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:15px; margin-bottom:15px;">
+                <div>
+                    <div style="font-size:0.8em; color:#666; margin-bottom:2px;">⏰ 訂位時間</div>
+                    <div style="font-size:1.6em; color:#fff; font-weight:800; font-family:monospace;">{row['time']}</div>
+                </div>
+                <div>
+                    <div style="font-size:0.8em; color:#666; margin-bottom:2px;">👥 人數</div>
+                    <div style="font-size:1.6em; color:#fff; font-weight:800;">{row['pax']} <span style="font-size:0.5em; font-weight:400; color:#888;">位</span></div>
+                </div>
+            </div>
             
-            <div style="background:rgba(0,0,0,0.2); border-radius:8px; padding:10px; font-size:0.85em; color:#aaa; line-height:1.6;">
-                <div style="display:flex; gap:10px; margin-bottom:4px;">
-                    <span>📞 <a href="tel:{row['tel']}" style="color:#aaa; text-decoration:none; border-bottom:1px dotted #666;">{row['tel']}</a></span>
+            <div style="background:#262626; padding:15px; border-radius:8px; margin-bottom:15px;">
+                <div style="margin-bottom:8px;">
+                    <span style="color:#888; font-size:0.85em; display:inline-block; width:40px;">姓名</span>
+                    <span style="color:#eee; font-size:1.1em; font-weight:600;">{row['name']}</span>
+                </div>
+                <div style="margin-bottom:8px;">
+                    <span style="color:#888; font-size:0.85em; display:inline-block; width:40px;">電話</span>
+                    <a href="tel:{row['tel']}" style="color:#4dabf7; text-decoration:none; font-size:1.05em; letter-spacing:0.5px;">{row['tel']}</a>
+                </div>
+                <div>
+                    <span style="color:#888; font-size:0.85em; display:inline-block; width:40px;">信箱</span>
+                    <span style="color:#aaa; font-size:0.95em;">{row['email'] or '未提供'}</span>
                 </div>
-                <div style="color:#666; font-size:0.8em; margin-bottom:4px;">✉️ {row['email'] or '無 Email'}</div>
-                <div style="color:#ccc; border-top:1px solid #333; margin-top:6px; padding-top:6px;">
-                    📝 {row.get('remarks') or '<span style="color:#555">無備註</span>'}
+            </div>
+
+            <div style="margin-bottom:20px;">
+                <div style="font-size:0.8em; color:#888; margin-bottom:4px;">📝 備註事項</div>
+                <div style="color:#d4af37; background:#d4af371a; padding:10px; border-radius:6px; font-size:0.95em; line-height:1.5;">
+                    {row.get('remarks') or '無特別備註'}
                 </div>
             </div>
 
-            <div style="margin-top:15px; display:flex; justify-content:space-between; align-items:center;">
-                <span style="font-size:0.7em; color:#444; font-family:monospace;">ID: {row['id']}</span>
+            <div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333; padding-top:15px;">
+                <span style="font-size:0.75em; color:#444; font-family:monospace;">ID: {row['id']}</span>
                 
                 <button onclick="{btn_onclick}" style="
-                    background: #d4af37; 
-                    color: #000; 
                     border: none; 
-                    padding: 8px 16px; 
+                    padding: 10px 24px; 
                     border-radius: 6px; 
-                    font-weight: bold; 
-                    font-size: 0.85em; 
+                    font-size: 0.95em; 
                     transition: all 0.2s;
+                    width: 140px;
                     {btn_style}">
                     {btn_text}
                 </button>
@@ -183,20 +219,15 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🟢 [JS] 讓卡片按鈕能觸發 Python 事件 ---
+# --- JS 邏輯 (負責點擊卡片按鈕) ---
 js_logic = """
 function() {
-    // 定義全局函數，讓 HTML 中的 onclick 可以呼叫
     window.cardAction = function(id) {
-        // 1. 找到隱藏的 ID 輸入框
         const idInput = document.querySelector('#hidden_id_input input');
         if (idInput) {
-            // 設定值並觸發 input 事件 (讓 Gradio 知道值變了)
             idInput.value = id;
             idInput.dispatchEvent(new Event('input', { bubbles: true }));
         }
-        
-        // 2. 找到隱藏的發送按鈕並點擊
         setTimeout(() => {
             const sendBtn = document.querySelector('#hidden_send_btn');
             if (sendBtn) sendBtn.click();
@@ -208,20 +239,21 @@ function() {
 # --- CSS 優化 ---
 custom_css = """
 body, .gradio-container { background-color: #0F0F0F; color: #fff; }
-/* 讓卡片容器可以滾動但隱藏捲軸 */
+/* 隱藏捲軸但保留捲動功能 */
 #booking_display { 
     max-height: 85vh; 
     overflow-y: auto; 
     padding-right: 5px;
 }
-#booking_display::-webkit-scrollbar { width: 5px; }
-#booking_display::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
+#booking_display::-webkit-scrollbar { width: 4px; }
+#booking_display::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
+button:active { transform: scale(0.98); }
 """
 
 # --- 介面 ---
 with gr.Blocks(title="Admin", css=custom_css) as demo:
     
-    # 1. 登入層
+    # 1. 登入
     with gr.Group(visible=True) as login_row:
         gr.Markdown("# 🔒 Login")
         with gr.Row():
@@ -230,30 +262,30 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
         login_btn = gr.Button("Enter", variant="primary")
         error_msg = gr.Markdown("")
         
-    # 2. 後台層
+    # 2. 後台
     with gr.Group(visible=False) as admin_row:
-        with gr.Row(variant="panel"):
-            gr.Markdown("## 🍷 Dashboard")
-            refresh_btn = gr.Button("🔄", size="sm") # 簡化按鈕
+        with gr.Row(variant="panel", elem_style="background:#1a1a1a; border:none; padding:10px; margin-bottom:20px;"):
+            gr.Markdown("### 🍷 Cié Cié Dashboard")
+            refresh_btn = gr.Button("🔄 刷新列表", size="sm", variant="secondary")
         
-        # 🔥 卡片顯示區
+        # 卡片顯示區
         booking_display = gr.HTML(elem_id="booking_display")
         
-        # 🟢 隱藏的操作區 (由 JS 自動控制)
+        # 隱藏的操作區
         with gr.Column(visible=False):
             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)
+        log_output = gr.Textbox(label="系統日誌", lines=1, interactive=False)
         
-        # 事件綁定
+        # 綁定事件
         login_btn.click(check_login, inputs=[username_input, password_input], outputs=[login_row, admin_row, error_msg]).then(
             render_booking_cards, outputs=booking_display
         )
         
         refresh_btn.click(render_booking_cards, outputs=booking_display)
         
-        # 🔥 隱藏按鈕被 JS 點擊後 -> 執行發送 -> 更新 Log -> 重新渲染卡片
+        # 點擊卡片 -> 發送 -> 刷新卡片
         hidden_send_btn.click(
             send_confirmation_hybrid, 
             inputs=hidden_id_input,