lesson css try

phase/Student_view/lesson.py

@@ -18,72 +18,6 @@ USE_LOCAL_DB = os.getenv("DISABLE_DB", "1") != "1"
 
 FALLBACK_TAG = "<!--fallback-->"
 
-
-# ---- NEW: minimal Markdown -> HTML helper (keeps cards as single HTML blocks)
-def _md_to_html(text: str) -> str:
-    """
-    Best-effort conversion so markdown-like lesson text can live *inside* a single HTML block.
-    Uses python-markdown if available; otherwise a tiny fallback that handles paragraphs + bullets.
-    """
-    if not text:
-        return ""
-    try:
-        # If python-markdown is available, use it for better fidelity.
-        from markdown import markdown as _mk
-        return _mk(text, extensions=["extra", "sane_lists"])
-    except Exception:
-        # Fallback: paragraphs + simple lists
-        lines = text.strip().splitlines()
-        html_parts = []
-        in_ul = False
-
-        def close_ul():
-            nonlocal in_ul
-            if in_ul:
-                html_parts.append("</ul>")
-                in_ul = False
-
-        for ln in lines:
-            s = ln.rstrip()
-            if not s:
-                close_ul()
-                html_parts.append("<p></p>")
-                continue
-
-            # Headings (#, ##, ###) basic support
-            if s.startswith("### "):
-                close_ul()
-                html_parts.append(f"<h3>{s[4:].strip()}</h3>")
-                continue
-            if s.startswith("## "):
-                close_ul()
-                html_parts.append(f"<h2>{s[3:].strip()}</h2>")
-                continue
-            if s.startswith("# "):
-                close_ul()
-                html_parts.append(f"<h1>{s[2:].strip()}</h1>")
-                continue
-
-            # Bullet lines
-            bullet_prefixes = ("- ", "* ", "• ", "– ")
-            if s.startswith(bullet_prefixes):
-                if not in_ul:
-                    html_parts.append("<ul>")
-                    in_ul = True
-                html_parts.append(f"<li>{s[2:].strip()}</li>")
-                continue
-
-            # Regular paragraph
-            close_ul()
-            # light bold/italic
-            p = re.sub(r"\*\*(.+?)\*\*", r"<strong>\1</strong>", s)
-            p = re.sub(r"\*(.+?)\*", r"<em>\1</em>", p)
-            html_parts.append(f"<p>{p}</p>")
-
-        close_ul()
-        return "\n".join(html_parts)
-
-
 # --- Load external CSS (optional) ---
 def load_css(file_name: str):
     try:
@@ -483,9 +417,6 @@ def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
 
 
 def _render_lesson():
-    ensure_quiz_state()
-    # make sure quiz keys exist
-    
     """Render the lesson interface"""
     level = st.session_state.get("level", "beginner")
     module_id = st.session_state.get("module_id")
@@ -638,27 +569,7 @@ def _render_lesson():
     with col_main:
         t_title, t_text = topics[topic_idx]
 
-        # ---- CHANGED: Build the entire lesson card in ONE HTML render
-        lesson_html_text = _md_to_html((t_text or "").strip())
-
-        takeaways_html = ""
-        if t_text:
-            takeaways = _extract_takeaways(t_text)
-            if takeaways:
-                takeaways_html = (
-                    '<div class="takeaways-section" style="min-height: 150px;">'
-                    '  <div class="takeaways-header">'
-                    '    <span style="color: #10b981;">●</span>'
-                    '    <span>Key Takeaways</span>'
-                    '  </div>'
-                    + "".join(
-                        f'<div class="takeaway-item"><span class="takeaway-check">✓</span><span>{st.escape_markdown(x)}</span></div>'
-                        for x in takeaways
-                    )
-                    + "</div>"
-                )
-
-        card_html = f"""
+        st.markdown(f"""
         <div class="lesson-card">
             <div class="unit-header">
                 <span class="unit-info">Unit {topic_idx + 1} of {len(topics)}</span>
@@ -668,20 +579,46 @@ def _render_lesson():
                 </div>
             </div>
             <div class="lesson-content">
-                {lesson_html_text}
-            </div>
-            {takeaways_html}
-        </div>
-        """
-        st.markdown(card_html, unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
+
+        if t_text:
+            st.markdown(t_text.strip(), unsafe_allow_html=True)
+        else:
+            st.info("Content coming soon.")
+
+        st.markdown("</div>", unsafe_allow_html=True)
+
+        if t_text:
+            takeaways = _extract_takeaways(t_text)
+            if takeaways:
+                st.markdown("""
+                <div class="takeaways-section" style="min-height: 150px;">
+                    <div class="takeaways-header">
+                        <span style="color: #10b981;">●</span>
+                        <span>Key Takeaways</span>
+                    </div>
+                """, unsafe_allow_html=True)
+                
+                for takeaway in takeaways:
+                    st.markdown(f"""
+                    <div class="takeaway-item">
+                        <span class="takeaway-check">✓</span>
+                        <span>{takeaway}</span>
+                    </div>
+                    """, unsafe_allow_html=True)
+                
+                st.markdown("</div>", unsafe_allow_html=True)
+
+        st.markdown("</div>", unsafe_allow_html=True)
 
-        # Navigation buttons (stay as Streamlit widgets)
         st.markdown('<div class="nav-buttons">', unsafe_allow_html=True)
+        
         col1, col2, col3 = st.columns([1, 1, 1])
         with col1:
             if st.button("← Previous", disabled=topic_idx == 0, key="prev_btn"):
                 st.session_state.topic_idx -= 1
                 st.rerun()
+        
         with col3:
             is_last = topic_idx >= len(topics) - 1
             if is_last:
@@ -695,53 +632,57 @@ def _render_lesson():
                 if st.button("Next Unit →", key="next_btn"):
                     st.session_state.topic_idx += 1
                     st.rerun()
+        
         st.markdown('</div>', unsafe_allow_html=True)
 
     with col_sidebar:
-        # ---- CHANGED: Render sidebar progress as a single HTML block (so it's inside the card)
-        progress = (topic_idx + 1) / max(1, len(topics))
-        progress_pct = int(progress * 100)
-
-        progress_html = f"""
+        # Module Progress Card
+        st.markdown("""
         <div class="sidebar-card" style="min-height: 120px;">
             <h4>Module Progress</h4>
-            <div style="width:100%;height:10px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
-                <div style="height:10px;width:{progress_pct}%;background:#10b981;"></div>
-            </div>
-            <p style="color:#6b7280;font-size:0.875rem;margin-top:0.5rem;">
-                Unit {topic_idx + 1} of {len(topics)}
-            </p>
-        </div>
-        """
-        st.markdown(progress_html, unsafe_allow_html=True)
-
-        # ---- CHANGED: Render the "Module Units" list as one HTML block too
-        units_html = '<div class="sidebar-card" style="min-height: 300px;"><h4>Module Units</h4>'
+        """, unsafe_allow_html=True)
+        
+        progress = (topic_idx + 1) / max(1, len(topics))
+        st.progress(progress)
+        st.markdown(f"<p style='color: #6b7280; font-size: 0.875rem; margin-top: 0.5rem;'>Unit {topic_idx + 1} of {len(topics)}</p>", unsafe_allow_html=True)
+        
+        st.markdown("</div>", unsafe_allow_html=True)
+
+        # Module Units Card
+        st.markdown("""
+        <div class="sidebar-card" style="min-height: 300px;">
+            <h4>Module Units</h4>
+        """, unsafe_allow_html=True)
+        
         for i, (tt, _) in enumerate(topics):
-            if i == topic_idx:
-                units_html += f"""
+            is_current = i == topic_idx
+            is_completed = i < topic_idx
+            
+            if is_current:
+                st.markdown(f"""
                 <div class="unit-item">
-                    <span style="background:#10b981;color:white;width:20px;height:20px;border-radius:50%;
-                                 display:flex;align-items:center;justify-content:center;font-size:0.75rem;">●</span>
+                    <span style="background: #10b981; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;">●</span>
                     <span class="unit-active">{tt}</span>
-                </div>"""
-            elif i < topic_idx:
-                units_html += f"""
+                </div>
+                """, unsafe_allow_html=True)
+            elif is_completed:
+                st.markdown(f"""
                 <div class="unit-item">
-                    <span style="color:#10b981;font-size:1.1rem;">✓</span>
-                    <span style="color:#374151;">{tt}</span>
-                </div>"""
+                    <span style="color: #10b981; font-size: 1.1rem;">✓</span>
+                    <span style="color: #374151;">{tt}</span>
+                </div>
+                """, unsafe_allow_html=True)
             else:
-                units_html += f"""
+                st.markdown(f"""
                 <div class="unit-item">
-                    <span style="background:#e5e7eb;color:#9ca3af;width:20px;height:20px;border-radius:50%;
-                                 display:flex;align-items:center;justify-content:center;font-size:0.75rem;">○</span>
+                    <span style="background: #e5e7eb; color: #9ca3af; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;">○</span>
                     <span class="unit-inactive">{tt}</span>
-                </div>"""
-        units_html += "</div>"
-        st.markdown(units_html, unsafe_allow_html=True)
+                </div>
+                """, unsafe_allow_html=True)
+        
+        st.markdown("</div>", unsafe_allow_html=True)
 
-        # Back to modules button (Streamlit widget outside HTML block)
+        # Back to modules button
         if st.button("← Back to Modules", key="back_modules"):
             st.session_state.mode = "catalog"
             st.session_state.module_id = None