Update app.py

app.py

@@ -45,27 +45,27 @@ def login(username, password):
 def main_interface():
     with gr.Blocks() as app:
         # 登錄界面
-        with gr.Row():
-            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)
+        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)
         with main_content:
-            with gr.Row():
-                gr.Markdown("### 點擊按鈕記錄活動")
-            with gr.Row():
-                buttons = ["拉屎", "尿尿", "全吃了", "吃了一半", "沒怎麼吃"]
-                activity_buttons = [
-                    gr.Button(value=btn) for btn in buttons
-                ]
-            with gr.Row():
-                gr.Markdown("### 活動記錄")
-                data_table = gr.Dataframe(headers=["活動", "時間"], datatype=["str", "str"], interactive=False)
+            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("### 活動記錄", elem_id="subheader")
+                data_table = gr.Dataframe(headers=["活動", "時間"], datatype=["str", "str"], interactive=False, height=300)
 
         # 功能邏輯
         def handle_login(username, password):
@@ -90,5 +90,24 @@ def main_interface():
 # 初始化數據文件
 init_data_file()
 
+# 自定義CSS來優化小屏幕顯示
+custom_css = """
+#header, #subheader {
+    text-align: center;
+}
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px;
+    }
+    .gr-button {
+        font-size: 12px;
+        padding: 6px 12px;
+    }
+    .gr-textbox, .gr-dataframe {
+        font-size: 12px;
+    }
+}
+"""
+
 # 運行應用
-main_interface().launch()
+main_interface().launch(share=True, server_name="0.0.0.0", server_port=7860, css=custom_css)