lesson css try

phase/Student_view/lesson.py

@@ -370,10 +370,6 @@ def _render_catalog():
                         <div class="learn-title">You'll Learn</div>
                 """, unsafe_allow_html=True)
 
-                for topic in mod['topics'][:2]:
-                    st.markdown(f'<div class="learn-item">• {topic}</div>', unsafe_allow_html=True)
-
-                st.markdown("</div>", unsafe_allow_html=True)
 
                 with st.expander("📋 All Topics"):
                     for topic in mod['topics']:
@@ -395,7 +391,7 @@ def _render_catalog():
                 """, unsafe_allow_html=True)
 
                 # Actual hidden Streamlit button to handle clicks
-                if st.button("", key=btn_key, help=f"Go to {mod['title']}"):
+                if st.button("Start Learning", key=btn_key, help=f"start_{level}_{mod['id']}"):
                     st.session_state.topics_cache.pop((level, mod["id"]), None)
                     try:
                         st.cache_data.clear()
@@ -442,9 +438,134 @@ def _render_lesson():
 
     mod = next(m for m in MODULES_META[level] if m["id"] == module_id)
 
-    st.markdown(f"### {mod['title']}")
-    if mod.get("description"):
-        st.caption(mod["description"])
+    st.markdown("""
+    <style>
+    .lesson-header {
+        font-size: 2rem;
+        font-weight: 600;
+        color: #1f2937;
+        margin-bottom: 2rem;
+    }
+    .lesson-card {
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 2rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    .unit-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid #f3f4f6;
+    }
+    .unit-info {
+        font-size: 0.875rem;
+        color: #6b7280;
+        font-weight: 500;
+    }
+    .read-time {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        color: #6b7280;
+    }
+    .lesson-content {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #374151;
+        margin-bottom: 2rem;
+    }
+    .takeaways-section {
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        padding: 1.5rem;
+        margin-top: 2rem;
+    }
+    .takeaways-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #1f2937;
+        margin-bottom: 1rem;
+    }
+    .takeaway-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+        font-size: 0.95rem;
+        color: #374151;
+    }
+    .takeaway-check {
+        color: #10b981;
+        font-size: 1.1rem;
+        margin-top: 0.1rem;
+    }
+    .sidebar-card {
+        background: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin-bottom: 1rem;
+    }
+    .progress-section h4 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #1f2937;
+        margin-bottom: 1rem;
+    }
+    .unit-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem 0;
+        font-size: 0.9rem;
+    }
+    .unit-active {
+        background: #10b981;
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 20px;
+        font-weight: 500;
+    }
+    .unit-inactive {
+        color: #6b7280;
+    }
+    .nav-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 2rem;
+        gap: 1rem;
+    }
+    .btn-secondary {
+        background: #f3f4f6;
+        color: #374151;
+        border: 1px solid #d1d5db;
+        padding: 0.75rem 1.5rem;
+        border-radius: 8px;
+        font-weight: 500;
+        text-decoration: none;
+    }
+    .btn-primary {
+        background: #10b981;
+        color: white;
+        border: none;
+        padding: 0.75rem 1.5rem;
+        border-radius: 8px;
+        font-weight: 500;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    st.markdown(f'<div class="lesson-header">{mod["title"]}</div>', unsafe_allow_html=True)
 
     topics = _get_topics(level, module_id)
 
@@ -453,76 +574,150 @@ def _render_lesson():
         topics = [(title, _fallback_text(title, module_id, i + 1)) for i, (title, _) in enumerate(plan)]
         st.session_state.topics_cache[(level, module_id)] = topics
 
-    with st.container(border=True):
-        progress = (st.session_state.topic_idx + 1) / max(1, len(topics))
-        st.progress(progress, text=f"Unit {st.session_state.topic_idx + 1} of {len(topics)}")
-
-    t_title, t_text = topics[st.session_state.topic_idx]
-
-    # Special Quiz placeholder
-    if t_title.strip().lower() == "quiz":
-        with st.spinner("Generating quiz…"):
-            ok = start_quiz(level, module_id, mod["title"])
-        if ok:
-            st.rerun()
+    col_main, col_sidebar = st.columns([2, 1])
+    
+    with col_main:
+        t_title, t_text = topics[st.session_state.topic_idx]
+
+        # Special Quiz placeholder
+        if t_title.strip().lower() == "quiz":
+            with st.spinner("Generating quiz…"):
+                ok = start_quiz(level, module_id, mod["title"])
+            if ok:
+                st.rerun()
+            else:
+                st.error("Quiz could not be generated. Please try again or skip.")
+            return
+
+        st.markdown(f"""
+        <div class="lesson-card">
+            <div class="unit-header">
+                <span class="unit-info">Unit {st.session_state.topic_idx + 1} of {len(topics)}</span>
+                <div class="read-time">
+                    <span>🕐</span>
+                    <span>5-8 min read</span>
+                </div>
+            </div>
+            <div class="lesson-content">
+        """, unsafe_allow_html=True)
+
+        if t_text:
+            cleaned = t_text.replace(FALLBACK_TAG, "")
+            st.markdown(cleaned, unsafe_allow_html=True)
         else:
-            st.error("Quiz could not be generated. Please try again or skip.")
-        return
+            st.info("Content coming soon.")
+
+        st.markdown("</div>", unsafe_allow_html=True)
+
+        if t_text:
+            takeaways = _extract_takeaways(cleaned)
+            if takeaways:
+                st.markdown("""
+                <div class="takeaways-section">
+                    <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.subheader(t_title)
-    source_note = "Default" if FALLBACK_TAG in t_text else "Backend"
-    st.caption(f"Source: {source_note}")
-    if t_text:
-        cleaned = t_text.replace(FALLBACK_TAG, "")
-        st.markdown(cleaned, unsafe_allow_html=True)
-
-        takeaways = _extract_takeaways(cleaned)
-        if takeaways:
-            st.markdown("#### Key Takeaways")
-            for it in takeaways:
-                st.write("✅ ", it)
-    else:
-        st.info("Content coming soon.")
+        st.markdown("</div>", unsafe_allow_html=True)
 
-    col1, col2, col3 = st.columns([1, 1, 1])
-    with col1:
-        if st.button("← Previous", disabled=st.session_state.topic_idx == 0):
-            st.session_state.topic_idx -= 1
-            st.rerun()
-    with col2:
-        if st.button("Back to Modules"):
-            st.session_state.mode = "catalog"
-            st.session_state.module_id = None
-            st.rerun()
-    with col3:
-        is_last = st.session_state.topic_idx >= len(topics) - 1
-        if is_last:
-            if not st.session_state.get("_auto_quiz_started", False):
-                st.session_state["_auto_quiz_started"] = True
-                with st.spinner("Generating quiz…"):
-                    ok = start_quiz(level, module_id, mod["title"])
-                if ok:
-                    st.rerun()
-                else:
-                    st.error("Quiz could not be generated. Please try again.")
-            else:
-                if st.button("Take Lesson Quiz →"):
+        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=st.session_state.topic_idx == 0, key="prev_btn"):
+                st.session_state.topic_idx -= 1
+                st.rerun()
+        
+        with col3:
+            is_last = st.session_state.topic_idx >= len(topics) - 1
+            if is_last:
+                if not st.session_state.get("_auto_quiz_started", False):
+                    st.session_state["_auto_quiz_started"] = True
                     with st.spinner("Generating quiz…"):
                         ok = start_quiz(level, module_id, mod["title"])
                     if ok:
                         st.rerun()
                     else:
                         st.error("Quiz could not be generated. Please try again.")
-        else:
-            if st.button("Next →"):
-                st.session_state.topic_idx += 1
-                st.rerun()
-
-    with st.expander("Module Units", expanded=False):
+                else:
+                    if st.button("Take Lesson Quiz →", key="quiz_btn"):
+                        with st.spinner("Generating quiz…"):
+                            ok = start_quiz(level, module_id, mod["title"])
+                        if ok:
+                            st.rerun()
+                        else:
+                            st.error("Quiz could not be generated. Please try again.")
+            else:
+                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:
+        # Module Progress Card
+        st.markdown("""
+        <div class="sidebar-card">
+            <h4>Module Progress</h4>
+        """, unsafe_allow_html=True)
+        
+        progress = (st.session_state.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 {st.session_state.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">
+            <h4>Module Units</h4>
+        """, unsafe_allow_html=True)
+        
         for i, (tt, _) in enumerate(topics):
-            label = f"{i+1}. {tt}"
-            st.button(label, key=f"jump_{i}", on_click=lambda j=i: st.session_state.update({"topic_idx": j}) or st.rerun())
+            is_current = i == st.session_state.topic_idx
+            is_completed = i < st.session_state.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 class="unit-active">{tt}</span>
+                </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>
+                """, unsafe_allow_html=True)
+            else:
+                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 class="unit-inactive">{tt}</span>
+                </div>
+                """, unsafe_allow_html=True)
+        
+        st.markdown("</div>", unsafe_allow_html=True)
 
+        # Back to modules button
+        if st.button("← Back to Modules", key="back_modules"):
+            st.session_state.mode = "catalog"
+            st.session_state.module_id = None
+            st.rerun()
 
 
 def _render_results():