lesson css try

phase/Student_view/lesson.py

@@ -18,6 +18,13 @@ USE_LOCAL_DB = os.getenv("DISABLE_DB", "1") != "1"
 
 FALLBACK_TAG = "<!--fallback-->"
 
+# --- Load external CSS (optional) ---
+def load_css(file_name: str):
+    try:
+        with open(file_name, "r", encoding="utf-8") as f:
+            st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+    except FileNotFoundError:
+        st.warning("⚠️ Stylesheet not found. Please ensure 'assets/styles.css' exists.")
 # ---------------------------------------------
 # Page state helpers
 # ---------------------------------------------
@@ -256,18 +263,38 @@ def _render_catalog():
 
     level = st.session_state.get("level", _SS_DEFAULTS["level"])
 
-    cols = st.columns(3)
+    cols = st.columns(2)  # Two cards side by side like in the image
     for i, mod in enumerate(MODULES_META[level]):
-        with cols[i % 3]:
-            st.subheader(mod["title"])
-            if mod.get("description"):
-                st.caption(mod["description"])
-            st.caption(f"Duration: {mod.get('duration','—')} · Difficulty: {mod.get('difficulty','—')}")
-            with st.expander("Topics include"):
-                for t, _ord in _topic_plan(level, mod["id"]):
-                    st.write("• ", t)
-            if st.button("Start Learning", key=f"start_{level}_{mod['id']}"):
-                # clear topic cache and cached fetches for a fresh run
+        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()
@@ -278,6 +305,7 @@ def _render_catalog():
                 st.session_state.mode = "lesson"
                 st.rerun()
 
+
 def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
     """
     Build the six-topic plan from metadata titles, try backend for each,
@@ -512,6 +540,7 @@ def _render_assigned_lesson(lesson_id: int, assignment_id: Optional[int] = None)
                 st.rerun()
 
 def render():
+    load_css(os.path.join("assets", "styles.css"))
     _ensure_state()
     ensure_quiz_state()  # ensure quiz keys whenever the page renders
     route = st.session_state.get("lesson_route")