Update app.py

app.py

@@ -3,7 +3,7 @@ import datetime
 import pandas as pd
 import json
 
-# 模擬數據存儲（可以換成 Firebase 或雲端數據庫）
+# 模擬數據存儲
 data_file = "dog_activity_data.json"
 users = {"admin": "password"}  # 模擬用戶數據
 
@@ -32,7 +32,7 @@ def get_activity_data():
     with open(data_file, "r") as file:
         data = json.load(file)
     df = pd.DataFrame(data)
-    return df if not df.empty else "目前沒有數據。"
+    return df if not df.empty else pd.DataFrame(columns=["活動", "時間"])
 
 # 驗證用戶登錄
 def login(username, password):
@@ -43,29 +43,26 @@ def login(username, password):
 
 # 主界面
 def main_interface():
-    with gr.Blocks() as app:
+    with gr.Blocks(css=custom_css) as app:
         # 登錄界面
-        with gr.Container():
-            gr.Markdown("## 狗狗活動記錄器 - 登錄", elem_id="header")
-            with gr.Row():
-                username = gr.Textbox(label="用戶名", placeholder="輸入用戶名", scale=1)
-                password = gr.Textbox(label="密碼", type="password", placeholder="輸入密碼", scale=1)
-            with gr.Row():
-                login_btn = gr.Button(value="登錄", scale=1)
-                login_msg = gr.Textbox(label="登錄消息", interactive=False)
-
-        # 隱藏的主界面
-        main_content = gr.Group(visible=False)
+        gr.Markdown("## 🐾 狗狗活動記錄器 - 登錄")
+        with gr.Row():
+            username = gr.Textbox(label="用戶名", placeholder="輸入用戶名")
+            password = gr.Textbox(label="密碼", type="password", placeholder="輸入密碼")
+        login_btn = gr.Button(value="登錄")
+        login_msg = gr.Textbox(label="消息", interactive=False, visible=True)
+
+        # 主內容（隱藏直到登錄成功）
+        main_content = gr.Column(visible=False)
         with main_content:
-            with gr.Container():
-                gr.Markdown("### 點擊按鈕記錄活動", elem_id="subheader")
-                # 使用 Row 使按钮自动适应屏幕宽度
-                with gr.Row(equal_height=True):
-                    buttons = ["拉屎", "尿尿", "全吃了", "吃了一半", "沒怎麼吃"]
-                    activity_buttons = [gr.Button(value=btn, scale=1) for btn in buttons]
+            gr.Markdown("### 🚀 點擊按鈕記錄活動")
+            # 活動按鈕區域
+            buttons = ["拉屎", "尿尿", "全吃了", "吃了一半", "沒怎麼吃"]
+            with gr.Row():
+                activity_buttons = [gr.Button(value=btn) for btn in buttons]
 
-                gr.Markdown("### 活動記錄", elem_id="subheader")
-                data_table = gr.Dataframe(headers=["活動", "時間"], datatype=["str", "str"], interactive=False, height=300)
+            gr.Markdown("### 📊 活動記錄")
+            data_table = gr.Dataframe(headers=["活動", "時間"], datatype=["str", "str"], interactive=False, height=300)
 
         # 功能邏輯
         def handle_login(username, password):
@@ -74,15 +71,17 @@ def main_interface():
 
         def handle_activity(activity):
             save_activity(activity)
-            return get_activity_data(), f"記錄成功：{activity}"
+            return get_activity_data()
 
+        # 綁定登錄按鈕事件
         login_btn.click(handle_login, inputs=[username, password], outputs=[main_content, login_msg])
 
+        # 綁定活動按鈕事件
         for btn, activity in zip(activity_buttons, buttons):
             btn.click(
                 lambda a=activity: handle_activity(a),
                 inputs=[],
-                outputs=[data_table, gr.Textbox(interactive=False, visible=False)]
+                outputs=[data_table]
             )
 
     return app
@@ -92,7 +91,7 @@ init_data_file()
 
 # 自定義CSS來優化小屏幕顯示
 custom_css = """
-#header, #subheader {
+h1, h2, h3 {
     text-align: center;
 }
 @media (max-width: 768px) {
@@ -101,13 +100,13 @@ custom_css = """
     }
     .gr-button {
         font-size: 12px;
-        padding: 6px 12px;
+        padding: 8px;
     }
-    .gr-textbox, .gr-dataframe {
+    input, textarea {
         font-size: 12px;
     }
 }
 """
 
-# 運行應用
-main_interface().launch(share=True, server_name="0.0.0.0", server_port=7860, css=custom_css)
+# 啟動應用
+main_interface().launch(share=True, server_name="0.0.0.0", server_port=7860)