Update app.py
Browse files
app.py
CHANGED
@@ -1240,7 +1240,7 @@ def show_level_selection():
|
|
1240 |
def show_theme_selection():
|
1241 |
"""Display theme selection interface"""
|
1242 |
st.markdown("""
|
1243 |
-
<div class="theme-header
|
1244 |
<h2 style="color: #1e88e5; font-family: 'Sarabun', sans-serif;">
|
1245 |
🎨 เลือกธีมเรื่องราว | Choose Story Theme
|
1246 |
</h2>
|
@@ -1263,43 +1263,21 @@ def show_theme_selection():
|
|
1263 |
|
1264 |
for col, theme in zip(cols, row_themes):
|
1265 |
with col:
|
1266 |
-
show_theme_card(theme)
|
1267 |
|
1268 |
-
|
1269 |
-
|
1270 |
-
|
1271 |
-
|
1272 |
-
<p style="color: #666; margin-bottom: 10px;">
|
1273 |
-
💡 <strong>เคล็ดลับ:</strong> เลือกธีมที่คุณสนใจและอยากเขียนถึงที่สุด
|
1274 |
-
</p>
|
1275 |
-
<p style="color: #666; font-size: 0.9em;">
|
1276 |
-
แต่ละธีมมีคำศัพท์และแนวเรื่องที่แตกต่างกัน เหมาะสำหรับการฝึกเขียนในบริบทต่างๆ
|
1277 |
-
</p>
|
1278 |
-
</div>
|
1279 |
-
""", unsafe_allow_html=True)
|
1280 |
-
|
1281 |
-
def show_theme_card(theme: Dict):
|
1282 |
-
"""Display individual theme card"""
|
1283 |
-
# Theme Card Container
|
1284 |
-
st.markdown(f"""
|
1285 |
-
<div class="theme-card" style="
|
1286 |
background-color: {theme['background_color']};
|
1287 |
border-radius: 15px;
|
1288 |
padding: 1.5rem;
|
|
|
1289 |
height: 100%;
|
1290 |
position: relative;
|
1291 |
transition: all 0.3s ease;
|
1292 |
">
|
1293 |
-
<div
|
1294 |
-
position: absolute;
|
1295 |
-
top: 1rem;
|
1296 |
-
right: 1rem;
|
1297 |
-
padding: 0.25rem 0.75rem;
|
1298 |
-
border-radius: 999px;
|
1299 |
-
font-size: 0.8rem;
|
1300 |
-
background: #E3F2FD;
|
1301 |
-
color: #1E88E5;
|
1302 |
-
">
|
1303 |
{st.session_state.level}
|
1304 |
</div>
|
1305 |
|
@@ -1307,27 +1285,20 @@ def show_theme_card(theme: Dict):
|
|
1307 |
{theme['icon']}
|
1308 |
</div>
|
1309 |
|
1310 |
-
<div style="
|
1311 |
-
font-size: 1.2rem;
|
1312 |
-
font-weight: 600;
|
1313 |
-
margin-bottom: 0.5rem;
|
1314 |
-
color: {theme['accent_color']};
|
1315 |
-
">
|
1316 |
{theme['name_th']}
|
1317 |
</div>
|
1318 |
|
1319 |
-
<div style="
|
1320 |
-
font-size: 0.9rem;
|
1321 |
-
color: #666;
|
1322 |
-
line-height: 1.4;
|
1323 |
-
margin-bottom: 1rem;
|
1324 |
-
">
|
1325 |
{theme['description_th']}
|
1326 |
</div>
|
1327 |
</div>
|
1328 |
-
"""
|
|
|
|
|
|
|
1329 |
|
1330 |
-
#
|
1331 |
if st.button(
|
1332 |
f"เลือกธีม {theme['name_th']}",
|
1333 |
key=f"theme_{theme['id']}",
|
|
|
1240 |
def show_theme_selection():
|
1241 |
"""Display theme selection interface"""
|
1242 |
st.markdown("""
|
1243 |
+
<div class="theme-header text-center">
|
1244 |
<h2 style="color: #1e88e5; font-family: 'Sarabun', sans-serif;">
|
1245 |
🎨 เลือกธีมเรื่องราว | Choose Story Theme
|
1246 |
</h2>
|
|
|
1263 |
|
1264 |
for col, theme in zip(cols, row_themes):
|
1265 |
with col:
|
1266 |
+
show_theme_card(theme) # เปลี่ยนจาก display_theme_card เป็น show_theme_card
|
1267 |
|
1268 |
+
def show_theme_card(theme: Dict): # เปลี่ยนจาก display_theme_card เป็น show_theme_card
|
1269 |
+
"""Display a single theme card with proper styling"""
|
1270 |
+
card_html = f"""
|
1271 |
+
<div style="
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1272 |
background-color: {theme['background_color']};
|
1273 |
border-radius: 15px;
|
1274 |
padding: 1.5rem;
|
1275 |
+
margin-bottom: 1rem;
|
1276 |
height: 100%;
|
1277 |
position: relative;
|
1278 |
transition: all 0.3s ease;
|
1279 |
">
|
1280 |
+
<div style="position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8rem; background: #E3F2FD; color: #1E88E5;">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1281 |
{st.session_state.level}
|
1282 |
</div>
|
1283 |
|
|
|
1285 |
{theme['icon']}
|
1286 |
</div>
|
1287 |
|
1288 |
+
<div style="font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: {theme['accent_color']};">
|
|
|
|
|
|
|
|
|
|
|
1289 |
{theme['name_th']}
|
1290 |
</div>
|
1291 |
|
1292 |
+
<div style="font-size: 0.9rem; color: #666; line-height: 1.4; margin-bottom: 1rem;">
|
|
|
|
|
|
|
|
|
|
|
1293 |
{theme['description_th']}
|
1294 |
</div>
|
1295 |
</div>
|
1296 |
+
"""
|
1297 |
+
|
1298 |
+
# แสดงการ์ดธีม
|
1299 |
+
st.markdown(card_html, unsafe_allow_html=True)
|
1300 |
|
1301 |
+
# แสดงปุ่มเลือกธีม
|
1302 |
if st.button(
|
1303 |
f"เลือกธีม {theme['name_th']}",
|
1304 |
key=f"theme_{theme['id']}",
|