Merge branch 'main' of https://github.com/Alalalallalalalalalalalal/Frontend

phase/Student_view/lesson.py

@@ -37,6 +37,8 @@ _SS_DEFAULTS = {
 
 }
 
+
+
 def _ensure_state():
     for k, v in _SS_DEFAULTS.items():
         if k not in st.session_state:
@@ -273,14 +275,12 @@ def _render_catalog():
         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;
@@ -289,26 +289,18 @@ def _render_catalog():
         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;
@@ -317,17 +309,14 @@ def _render_catalog():
         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;
@@ -336,80 +325,58 @@ def _render_catalog():
         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;
+    .primary-button, .secondary-button {
+        width: 100% !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;
     }
-    
+    .primary-button {
+        background: #28a745 !important;
+        color: white !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]:
-            # 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 class="meta-item">🕒 {mod['duration']}</div>
+                        <div class="meta-item">👥 {2500 - i * 350}</div>
                     </div>
-                    
                     <div class="learn-section">
-                        <div class="learn-title">YOU'LL LEARN</div>
+                        <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"
                 
@@ -418,7 +385,6 @@ def _render_catalog():
                     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"
@@ -426,6 +392,9 @@ def _render_catalog():
                 
                 st.markdown("</div>", unsafe_allow_html=True)
 
+                st.markdown("</div>", unsafe_allow_html=True)
+
+
 def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
     """
     Build the six-topic plan from metadata titles, try backend for each,
@@ -449,97 +418,275 @@ def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
 
 
 def _render_lesson():
-    ensure_quiz_state()  # make sure quiz keys exist
-
-    level = st.session_state.level
-    module_id = st.session_state.module_id
+    """Render the lesson interface"""
+    level = st.session_state.get("level", "beginner")
+    module_id = st.session_state.get("module_id")
+    
     if module_id is None:
         st.session_state.mode = "catalog"
         st.rerun()
 
     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);
+        min-height: 400px;
+    }
+    .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)
+    topic_idx = st.session_state.get("topic_idx", 0)
 
     if not topics:
-        plan = _topic_plan(level, module_id)
-        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]
+        st.error("No lesson content available for this module.")
+        return
 
-    # 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[topic_idx]
+
+        st.markdown(f"""
+        <div class="lesson-card">
+            <div class="unit-header">
+                <span class="unit-info">Unit {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:
+            st.markdown(t_text.strip(), unsafe_allow_html=True)
         else:
-            st.error("Quiz could not be generated. Please try again or skip.")
-        return
+            st.info("Content coming soon.")
+
+        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.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></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.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:
+                if st.button("Complete Module →", key="complete_btn"):
+                    st.session_state.mode = "catalog"
+                    st.session_state.module_id = None
+                    st.session_state.topic_idx = 0
+                    st.success("Module completed! 🎉")
                     st.rerun()
-                else:
-                    st.error("Quiz could not be generated. Please try again.")
             else:
-                if st.button("Take Lesson 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.")
-        else:
-            if st.button("Next →"):
-                st.session_state.topic_idx += 1
-                st.rerun()
-
-    with st.expander("Module Units", expanded=False):
+                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" style="min-height: 120px;">
+            <h4>Module Progress</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):
-            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 == 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 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.session_state.topic_idx = 0
+            st.rerun()
 
 
 def _render_results():