Update app.py

app.py

@@ -23,45 +23,40 @@ image_data = [
 if 'page' not in st.session_state:
     st.session_state.page = 0
 
-# 使用容器來控制圖片和按鈕的佈局
+# 使用容器來控制圖片和點擊區域的佈局
 with st.container():
     # 顯示當前頁面的圖片，全屏顯示
     st.image(image_data[st.session_state.page]["path"], 
              caption=image_data[st.session_state.page]["caption"], 
              use_container_width=True)
 
-    # 自訂 CSS 樣式，將按鈕浮動在圖片上方
+    # 自訂 CSS 樣式，將點擊區域設為透明並覆蓋圖片左右兩側
     st.markdown("""
     <style>
-    .button-container {
+    .click-area {
         position: absolute;
-        top: 50%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 20px;
-        transform: translateY(-50%);
-    }
-    .stButton > button {
-        background-color: rgba(255, 255, 255, 0.7);
-        border: none;
-        padding: 10px 20px;
-        font-size: 16px;
+        top: 0;
+        height: 100%;
+        width: 30%; /* 左右各占 30% 的點擊區域 */
+        background-color: rgba(0, 0, 0, 0); /* 完全透明 */
         cursor: pointer;
     }
-    .stButton > button:hover {
-        background-color: rgba(255, 255, 255, 1);
+    .left-click {
+        left: 0;
+    }
+    .right-click {
+        right: 0;
     }
     </style>
     """, unsafe_allow_html=True)
 
-    # 在圖片上浮動按鈕
-    col1, col2 = st.columns([1, 1])  # 左右分欄
-    with col1:
-        if st.button("上一頁", key="prev") and st.session_state.page > 0:
+    # 分成左右兩欄作為點擊區域
+    col_left, col_center, col_right = st.columns([1, 2, 1])  # 左右各占 1，中間占 2
+    with col_left:
+        if st.button("", key="prev_area", help="點擊左側回到上一頁") and st.session_state.page > 0:
             st.session_state.page -= 1
-    with col2:
-        if st.button("下一頁", key="next") and st.session_state.page < len(image_data) - 1:
+    with col_right:
+        if st.button("", key="next_area", help="點擊右側前往下一頁") and st.session_state.page < len(image_data) - 1:
             st.session_state.page += 1
 
 # 顯示當前頁數