Update app.py

app.py

@@ -369,6 +369,35 @@ st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap');
     
+    /* Theme Layout Styles - ส่วนที่เพิ่มใหม่ */
+    div[data-testid="stHorizontalBlock"] > div {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 10px;
+        margin: 5px;
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+    
+    div[data-testid="stHorizontalBlock"] > div:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    }
+    
+    .stButton > button {
+        width: 100%;
+        height: auto;
+        padding: 15px;
+        background: linear-gradient(135deg, var(--background-color, #f0f2f6), white);
+        border: 2px solid var(--accent-color, #1e88e5);
+        color: var(--accent-color, #1e88e5);
+    }
+    
+    .stButton > button:hover {
+        border-color: var(--accent-color, #1e88e5);
+        transform: translateY(-2px);
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+    
     /* ส่วน CSS เดิม */
     .thai-eng {
         font-size: 1.1em;
@@ -1177,113 +1206,44 @@ def show_theme_selection():
     themes_per_row = 4
     available_themes = get_available_themes(st.session_state.level)
     
-    # แบ่งธีมเป็น 2 rows
+    # แบ่งธีมเป็น rows
     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, theme in zip(cols, row_themes):
             with col:
-                # สร้าง theme card แบบ interactive
-                theme_card = f"""
-                <div class="theme-card" 
-                     onclick="this.classList.toggle('selected')"
-                     style="background: linear-gradient(135deg, {theme['background_color']}, white);
-                            border: 2px solid {theme['accent_color']};
-                            border-radius: 12px;
-                            padding: 15px;
-                            margin: 5px;
-                            cursor: pointer;
-                            transition: all 0.3s ease;
-                            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-                            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;
-                             display: -webkit-box;
-                             -webkit-line-clamp: 2;
-                             -webkit-box-orient: vertical;
-                             overflow: hidden;">
-                        {theme['description_th']}
-                    </p>
-                </div>
-                """
-                
-                if st.markdown(theme_card, 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.theme_story_starter = starter
-                    st.rerun()
-
-# เพิ่ม CSS สำหรับ theme cards
-st.markdown("""
-    <style>
-    .theme-header {
-        text-align: center;
-        margin-bottom: 20px;
-    }
-    
-    .theme-header h3 {
-        color: #1e88e5;
-        font-family: 'Sarabun', sans-serif;
-    }
-    
-    .theme-card {
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .theme-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-    }
-    
-    .theme-card:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    }
-    
-    .theme-card:hover:before {
-        opacity: 1;
-    }
-    
-    .theme-card.selected {
-        transform: scale(0.98);
-        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    }
-    
-    /* Responsive adjustments */
-    @media (max-width: 768px) {
-        .theme-card {
-            min-height: 120px;
-        }
-        
-        .theme-card h4 {
-            font-size: 0.9em;
-        }
-        
-        .theme-card p {
-            font-size: 0.8em;
-        }
-    }
-    </style>
-""", unsafe_allow_html=True)
+                # สร้าง container สำหรับแต่ละธีม
+                theme_container = st.container()
+                with theme_container:
+                    # ใช้ button แทน div
+                    if st.button(
+                        f"{theme['icon']} {theme['name_th']}",
+                        key=f"theme_button_{theme['id']}",
+                        help=theme['description_th'],
+                        use_container_width=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'],
+                            "thai_content": starter['th'],
+                            "is_starter": True
+                        }]
+                        st.rerun()
+                    
+                    # แสดงคำอธิบายใต้ปุ่ม
+                    st.markdown(
+                        f"""<div style='font-size: 0.85em; color: #666; padding: 5px;'>
+                            {theme['description_th']}
+                        </div>""",
+                        unsafe_allow_html=True
+                    )
 
 
 # Add theme-specific CSS