Update app.py

app.py

@@ -382,6 +382,13 @@ st.markdown("""
         transform: translateY(-5px);
         box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }
+
+    /* Theme button hover effect */
+    div[style*="cursor: pointer"]:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+    }
     
     .stButton > button {
         width: 100%;
@@ -1207,31 +1214,52 @@ def show_theme_selection():
     available_themes = get_available_themes(st.session_state.level)
     
     # แบ่งธีมเป็น rows
-    for row_idx, i in enumerate(range(0, len(available_themes), themes_per_row)):
+    for i in range(0, len(available_themes), themes_per_row):
         row_themes = available_themes[i:i + themes_per_row]
         cols = st.columns(themes_per_row)
         
         # แสดงแต่ละธีมใน column
-        for col_idx, (col, theme) in enumerate(zip(cols, row_themes)):
+        for col, theme in zip(cols, row_themes):
             with col:
-                # สร้าง unique key โดยใช้ row_idx และ col_idx
-                unique_key = f"theme_button_{theme['id']}_{row_idx}_{col_idx}"
+                # สร้าง unique key โดยใช้ timestamp และ theme id
+                unique_key = f"theme_{theme['id']}_{datetime.now().timestamp()}"
                 
-                # สร้าง container สำหรับแต่ละธีม
-                theme_container = st.container()
-                with theme_container:
-                    # ใช้ button แทน div
-                    if st.button(
-                        f"{theme['icon']} {theme['name_th']}",
-                        key=unique_key,
-                        help=theme['description_th'],
-                        use_container_width=True,
-                    ):
-                        # เมื่อกดเลือกธีม
+                # ใช้ container เพื่อจัดการ layout
+                with st.container():
+                    # สร้างปุ่มพร้อมสไตล์
+                    button_html = f"""
+                        <div style="
+                            background: linear-gradient(135deg, {theme['background_color']}, white);
+                            border: 2px solid {theme['accent_color']};
+                            border-radius: 12px;
+                            padding: 15px;
+                            margin: 5px;
+                            text-align: center;
+                            min-height: 150px;">
+                            <div style="font-size: 2em; margin-bottom: 8px;">
+                                {theme['icon']}
+                            </div>
+                            <h4 style="color: {theme['accent_color']}; 
+                                   margin: 5px 0; 
+                                   font-family: 'Sarabun', sans-serif;">
+                                {theme['name_th']}
+                            </h4>
+                            <p style="font-size: 0.85em; 
+                                 color: #666; 
+                                 margin-top: 5px;">
+                                {theme['description_th']}
+                            </p>
+                        </div>
+                    """
+                    
+                    # ใช้ clickable div แทน button
+                    if st.markdown(f"""
+                        <div style="cursor: pointer;" onclick="document.getElementById('{unique_key}').click()">
+                            {button_html}
+                        </div>
+                        """, unsafe_allow_html=True):
                         st.session_state.current_theme = theme['id']
-                        # สร้างจุดเริ่มต้นเรื่อง
                         starter = generate_dynamic_story_starter(theme['id'], st.session_state.level)
-                        # เพิ่มเป็นประโยคแรกในเรื่อง
                         st.session_state.story = [{
                             "role": "AI",
                             "content": starter['en'],
@@ -1240,13 +1268,10 @@ def show_theme_selection():
                         }]
                         st.rerun()
                     
-                    # แสดงคำอธิบายใต้ปุ่ม
-                    st.markdown(
-                        f"""<div style='font-size: 0.85em; color: #666; padding: 5px;'>
-                            {theme['description_th']}
-                        </div>""",
-                        unsafe_allow_html=True
-                    )
+                    # ซ่อนปุ่มจริงไว้
+                    st.button("Select", key=unique_key, help=theme['description_th'], 
+                             on_click=lambda: None, 
+                             style="display: none;")
 
     # เพิ่มช่อ��ว่างด้านล่าง
     st.markdown("<br>", unsafe_allow_html=True)