Rathapoom commited on
Commit
969446e
·
verified ·
1 Parent(s): 3fe1236

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +15 -44
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" style="text-align: center; margin-bottom: 30px;">
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
- # Help text
1269
- st.markdown("""
1270
- <div style="text-align: center; margin-top: 30px; padding: 20px;
1271
- background: #f5f5f5; border-radius: 10px;">
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 class="level-badge" style="
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
- """, unsafe_allow_html=True)
 
 
 
1329
 
1330
- # Theme Selection Button
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']}",