lesson css try

phase/Student_view/lesson.py

@@ -260,51 +260,171 @@ def _fallback_text(title: str, module_id: int, topic_ordinal: int) -> str:
 def _render_catalog():
     st.header("Financial Education")
     st.caption("Build your financial knowledge with structured paths for every skill level.")
-
-    level = st.session_state.get("level", _SS_DEFAULTS["level"])
-
-    cols = st.columns(2)  # Two cards side by side like in the image
+    
+    # Custom CSS for card styling
+    st.markdown("""
+    <style>
+    .card {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 12px;
+        border: 1px solid #e1e5e9;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        margin-bottom: 1rem;
+        height: 100%;
+    }
+    
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 1rem;
+    }
+    
+    .level-badge {
+        background: #f8f9fa;
+        color: #6c757d;
+        padding: 0.25rem 0.75rem;
+        border-radius: 20px;
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+    
+    .card-icon {
+        font-size: 1.5rem;
+        color: #28a745;
+    }
+    
+    .card-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #212529;
+        margin: 0.5rem 0;
+    }
+    
+    .card-description {
+        color: #6c757d;
+        font-size: 0.95rem;
+        line-height: 1.4;
+        margin-bottom: 1rem;
+    }
+    
+    .card-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 1rem 0;
+        color: #6c757d;
+        font-size: 0.875rem;
+    }
+    
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+    
+    .learn-section {
+        margin: 1rem 0;
+    }
+    
+    .learn-title {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #6c757d;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 0.5rem;
+    }
+    
+    .learn-item {
+        color: #28a745;
+        font-size: 0.9rem;
+        margin-bottom: 0.25rem;
+    }
+    
+    .primary-button {
+        background: #28a745 !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 6px !important;
+        padding: 0.75rem 1.5rem !important;
+        font-weight: 500 !important;
+        width: 100% !important;
+        margin-top: 1rem !important;
+    }
+    
+    .secondary-button {
+        background: #f8f9fa !important;
+        color: #495057 !important;
+        border: 1px solid #dee2e6 !important;
+        border-radius: 6px !important;
+        padding: 0.75rem 1.5rem !important;
+        font-weight: 500 !important;
+        width: 100% !important;
+        margin-top: 1rem !important;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    level = st.session_state.get("level", "beginner")
+    
+    # Create columns for cards
+    cols = st.columns(2, gap="large")
+    
     for i, mod in enumerate(MODULES_META[level]):
         with cols[i % 2]:
-            completed = "✅" if mod.get("completed") else ""
-            user_count = f"{2500 - i * 400}"  # mock user count for visual
-            duration = mod.get("duration", "—")
-
-            # Inject HTML using markdown
-            st.markdown(f"""
-            <div class="metric-card lesson-card" style="padding: 1.5rem;">
-                <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <span class="badge">Beginner</span>
-                    <span>{completed}</span>
-                </div>
-                <h4 style="margin-top: 0.5rem;">{mod['title']}</h4>
-                <p class="card-subtitle">{mod.get('description')}</p>
-                <p style="color: var(--gray-600); font-size: 0.9rem;">
-                    ⏱ {duration} &nbsp;&nbsp; 👥 {user_count}
-                </p>
-                <ul style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-dark); padding-left: 1.2rem;">
-                    {''.join(f'<li>{t}</li>' for t, _ in _topic_plan(level, mod["id"])[:2])}
-                </ul>
-                <form action="#">
-                    <button class="stButton" type="submit" name="start_{level}_{mod['id']}" style="margin-top: 1rem; width: 100%;">
-                        {'Review Module' if mod.get('completed') else 'Start Learning'}
-                    </button>
-                </form>
-            </div>
-            """, unsafe_allow_html=True)
-
-            # Start learning button logic (outside of form for interaction)
-            if st.button("", key=f"start_{level}_{mod['id']}", help="Hidden button to enable rerun"):
-                st.session_state.topics_cache.pop((level, mod["id"]), None)
-                try:
-                    st.cache_data.clear()
-                except Exception:
-                    pass
-                st.session_state.module_id = mod["id"]
-                st.session_state.topic_idx = 0
-                st.session_state.mode = "lesson"
-                st.rerun()
-
+            # Create card container
+            with st.container():
+                st.markdown(f"""
+                <div class="card">
+                    <div class="card-header">
+                        <span class="level-badge">{mod['difficulty']}</span>
+                        <span class="card-icon">{mod['icon']}</span>
+                    </div>
+                    
+                    <h3 class="card-title">{mod['title']}</h3>
+                    <p class="card-description">{mod['description']}</p>
+                    
+                    <div class="card-meta">
+                        <div class="meta-item">
+                            <span>🕒</span>
+                            <span>{mod['duration']}</span>
+                        </div>
+                
+                    </div>
+                    
+                    <div class="learn-section">
+                        <div class="learn-title">YOU'LL LEARN</div>
+                """, unsafe_allow_html=True)
+                
+                # Add learning objectives
+                for topic in mod['topics']:
+                    st.markdown(f'<div class="learn-item">• {topic}</div>', unsafe_allow_html=True)
+                
+                st.markdown("</div>", unsafe_allow_html=True)
+                
+                # Keep the expander as requested
+                with st.expander("📋 All Topics"):
+                    for topic in mod['topics']:
+                        st.write(f"• {topic}")
+                
+                # Action button
+                button_class = mod.get('button_style', 'primary')
+                button_text = "Start Learning" if button_class == 'primary' else "Review Module"
+                
+                if st.button(
+                    f"{button_text} →", 
+                    key=f"start_{level}_{mod['id']}",
+                    help=f"Begin the {mod['title']} module"
+                ):
+                    # Your existing button logic here
+                    st.session_state.module_id = mod["id"]
+                    st.session_state.topic_idx = 0
+                    st.session_state.mode = "lesson"
+                    st.rerun()
+                
+                st.markdown("</div>", unsafe_allow_html=True)
 
 def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
     """