Spaces:
Sleeping
Sleeping
| import time | |
| import streamlit as st | |
| import pandas as pd | |
| from content_generator import generate_content | |
| from quiz_generator import generate_quiz | |
| from evaluation import evaluate_answers | |
| from flashcard_generator import generate_flashcards | |
| from tutor import get_tutor_reply | |
| from pdf_export import export_study_notes_pdf, export_quiz_results_pdf | |
| from gamification import ( | |
| load_gamification, save_gamification, | |
| update_streak, award_xp, check_and_award_badges, | |
| get_level, get_xp_for_quiz, record_quiz, | |
| BADGES, XP_STUDY_SESSION, XP_FLASHCARD_DECK, | |
| ) | |
| from utils import ( | |
| get_topics, save_progress, load_progress, | |
| get_weak_topics, get_learning_path, | |
| load_notes, save_note, delete_note, | |
| ) | |
| # ── Page config ────────────────────────────────────────────────────────────── | |
| st.set_page_config( | |
| page_title="LearnCraft – Personalized Learning", | |
| page_icon="🎓", | |
| layout="wide", | |
| initial_sidebar_state="expanded", | |
| ) | |
| # ── Light Theme CSS ────────────────────────────────────────────────────────── | |
| st.markdown(""" | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --bg: #f7f4ef; | |
| --surface: #ffffff; | |
| --sidebar: #1e1b4b; | |
| --accent: #6c47ff; | |
| --accent2: #f97316; | |
| --accent3: #10b981; | |
| --text: #1a1523; | |
| --muted: #6b6880; | |
| --card: #ffffff; | |
| --border: #e2ddf5; | |
| --tag-bg: #ede9fe; | |
| --tag-color: #6c47ff; | |
| --shadow: 0 2px 16px rgba(108,71,255,0.08); | |
| --shadow-lg: 0 8px 40px rgba(108,71,255,0.13); | |
| } | |
| html, body, [class*="css"] { | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| } | |
| .stApp { background: var(--bg) !important; } | |
| /* Sidebar */ | |
| [data-testid="stSidebar"] { | |
| background: var(--sidebar) !important; | |
| border-right: none !important; | |
| } | |
| [data-testid="stSidebar"] * { color: #e2e0f5 !important; } | |
| [data-testid="stSidebar"] h1, | |
| [data-testid="stSidebar"] h2, | |
| [data-testid="stSidebar"] h3 { color: #fff !important; } | |
| /* Headings */ | |
| h1, h2, h3 { | |
| font-family: 'Fraunces', serif !important; | |
| color: var(--text) !important; | |
| letter-spacing: -0.02em; | |
| } | |
| /* Cards */ | |
| .learn-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 18px; | |
| padding: 1.6rem; | |
| margin: 0.75rem 0; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.18s, box-shadow 0.18s; | |
| } | |
| .learn-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--accent); | |
| } | |
| /* Hero */ | |
| .hero { | |
| background: linear-gradient(135deg, #6c47ff 0%, #a78bfa 55%, #f97316 100%); | |
| border-radius: 24px; | |
| padding: 3.5rem 2.5rem; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; top:-60%; left:-30%; | |
| width: 200%; height: 200%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 55%); | |
| pointer-events: none; | |
| } | |
| .hero h1 { | |
| font-family: 'Fraunces', serif !important; | |
| font-size: 3.2rem !important; | |
| color: #fff !important; | |
| margin-bottom: 0.4rem !important; | |
| text-shadow: 0 2px 12px rgba(0,0,0,0.15); | |
| } | |
| .hero p { color: rgba(255,255,255,0.88) !important; font-size: 1.1rem; font-weight: 400; } | |
| /* Tag pill */ | |
| .tag { | |
| display: inline-block; | |
| background: rgba(255,255,255,0.22); | |
| color: #fff !important; | |
| border: 1px solid rgba(255,255,255,0.35); | |
| border-radius: 100px; | |
| padding: 0.28rem 0.9rem; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| margin-bottom: 1rem; | |
| } | |
| /* Content blocks */ | |
| .content-block { | |
| background: var(--card); | |
| border-left: 4px solid var(--accent); | |
| border-radius: 0 14px 14px 0; | |
| padding: 1.5rem 2rem; | |
| margin: 0.9rem 0; | |
| box-shadow: var(--shadow); | |
| line-height: 1.8; | |
| } | |
| .content-block h3 { | |
| color: var(--accent) !important; | |
| font-size: 1.15rem !important; | |
| margin-bottom: 0.6rem !important; | |
| } | |
| /* Score badge */ | |
| .score-badge { | |
| font-size: 4.5rem; | |
| font-family: 'Fraunces', serif; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, #6c47ff, #f97316); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Progress bar */ | |
| .stProgress > div > div { | |
| background: linear-gradient(90deg, var(--accent), var(--accent2)) !important; | |
| border-radius: 99px !important; | |
| } | |
| /* Buttons */ | |
| .stButton > button { | |
| background: linear-gradient(135deg, #6c47ff, #8b6eff) !important; | |
| color: #fff !important; | |
| font-weight: 600 !important; | |
| border: none !important; | |
| border-radius: 12px !important; | |
| padding: 0.62rem 2rem !important; | |
| font-family: 'Plus Jakarta Sans', sans-serif !important; | |
| box-shadow: 0 4px 14px rgba(108,71,255,0.25) !important; | |
| transition: opacity 0.18s, transform 0.18s !important; | |
| } | |
| .stButton > button:hover { | |
| opacity: 0.9 !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| /* Inputs */ | |
| .stSelectbox > div > div, | |
| .stTextInput > div > div, | |
| .stTextArea > div > div, | |
| .stNumberInput > div > div { | |
| background: var(--card) !important; | |
| border-color: var(--border) !important; | |
| color: var(--text) !important; | |
| border-radius: 12px !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| /* Radio */ | |
| .stRadio > div { gap: 0.5rem; } | |
| .stRadio label { | |
| background: var(--card) !important; | |
| border: 1.5px solid var(--border) !important; | |
| border-radius: 12px !important; | |
| padding: 0.65rem 1.1rem !important; | |
| transition: border-color 0.18s !important; | |
| } | |
| .stRadio label:hover { border-color: var(--accent) !important; } | |
| /* Metrics */ | |
| [data-testid="stMetricValue"] { | |
| color: var(--accent) !important; | |
| font-family: 'Fraunces', serif !important; | |
| font-size: 2rem !important; | |
| } | |
| [data-testid="stMetricLabel"] { color: var(--muted) !important; font-size: 0.82rem !important; } | |
| /* Tabs */ | |
| .stTabs [data-baseweb="tab"] { color: var(--muted) !important; font-weight: 600 !important; } | |
| .stTabs [aria-selected="true"] { color: var(--accent) !important; } | |
| .stTabs [data-baseweb="tab-highlight"] { background: var(--accent) !important; } | |
| .stTabs [data-baseweb="tab-border"] { background: var(--border) !important; } | |
| /* Dividers */ | |
| hr { border-color: var(--border) !important; } | |
| /* Alerts */ | |
| .stSuccess, .stWarning, .stError, .stInfo { border-radius: 12px !important; } | |
| /* Dataframe */ | |
| [data-testid="stDataFrame"] { border-radius: 14px !important; overflow: hidden; box-shadow: var(--shadow); } | |
| /* Flashcard flip */ | |
| .flip-card { | |
| perspective: 900px; | |
| height: 190px; | |
| cursor: pointer; | |
| margin: 0.5rem 0; | |
| } | |
| .flip-inner { | |
| position: relative; width: 100%; height: 100%; | |
| transition: transform 0.55s cubic-bezier(.4,2,.55,.44); | |
| transform-style: preserve-3d; | |
| } | |
| .flip-card.flipped .flip-inner { transform: rotateY(180deg); } | |
| .flip-front, .flip-back { | |
| position: absolute; width: 100%; height: 100%; | |
| backface-visibility: hidden; | |
| border-radius: 16px; | |
| display: flex; align-items: center; justify-content: center; | |
| padding: 1.2rem; | |
| text-align: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .flip-front { | |
| background: var(--card); | |
| border: 2px solid var(--border); | |
| color: var(--text); | |
| font-weight: 600; font-size: 1rem; | |
| } | |
| .flip-back { | |
| background: linear-gradient(135deg, #6c47ff, #8b6eff); | |
| border: 2px solid transparent; | |
| color: #fff; | |
| font-size: 0.92rem; | |
| transform: rotateY(180deg); | |
| } | |
| /* Sidebar nav buttons */ | |
| [data-testid="stSidebar"] .stButton > button { | |
| background: rgba(255,255,255,0.08) !important; | |
| color: #e2e0f5 !important; | |
| border: 1px solid rgba(255,255,255,0.12) !important; | |
| text-align: left !important; | |
| box-shadow: none !important; | |
| border-radius: 10px !important; | |
| } | |
| [data-testid="stSidebar"] .stButton > button:hover { | |
| background: rgba(255,255,255,0.18) !important; | |
| transform: none !important; | |
| } | |
| /* Chat bubbles */ | |
| .chat-user { | |
| background: linear-gradient(135deg, #6c47ff, #8b6eff); | |
| color: #fff; | |
| border-radius: 18px 18px 4px 18px; | |
| padding: 0.75rem 1.1rem; | |
| margin: 0.4rem 0 0.4rem 20%; | |
| font-size: 0.95rem; | |
| line-height: 1.55; | |
| box-shadow: 0 2px 8px rgba(108,71,255,0.18); | |
| } | |
| .chat-ai { | |
| background: #fff; | |
| color: #1a1523; | |
| border: 1.5px solid #e2ddf5; | |
| border-radius: 18px 18px 18px 4px; | |
| padding: 0.75rem 1.1rem; | |
| margin: 0.4rem 20% 0.4rem 0; | |
| font-size: 0.95rem; | |
| line-height: 1.6; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.04); | |
| } | |
| .chat-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.15rem; } | |
| .badge-card { background:#fff; border:1.5px solid #e2ddf5; border-radius:14px; padding:1rem 0.8rem; text-align:center; box-shadow:0 2px 10px rgba(108,71,255,0.07); transition:transform 0.18s; } | |
| .badge-card:hover { transform:translateY(-3px); } | |
| .badge-card.earned { border-color:#6c47ff; background:#ede9fe; } | |
| .badge-card.locked { opacity:0.45; filter:grayscale(0.6); } | |
| .toast { background:linear-gradient(135deg,#6c47ff,#8b6eff); color:#fff; border-radius:14px; padding:0.9rem 1.3rem; margin:0.4rem 0; display:flex; align-items:center; gap:0.75rem; box-shadow:0 4px 18px rgba(108,71,255,0.25); } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # ── Session state init ──────────────────────────────────────────────────────── | |
| defaults = { | |
| "page": "home", | |
| "content": None, | |
| "quiz": None, | |
| "answers": {}, | |
| "submitted": False, | |
| "progress": load_progress(), | |
| "quiz_start_time": None, | |
| "quiz_elapsed": None, | |
| "flashcards": [], | |
| "fc_index": 0, | |
| "fc_flipped": False, | |
| "daily_goal": 3, | |
| "sessions_today": 0, | |
| # Gamification | |
| "gami": load_gamification(), | |
| "new_badges": [], | |
| "xp_gained": 0, | |
| "level_up_msg": None, | |
| # Tutor chat | |
| "tutor_messages": [], | |
| "tutor_topic": "", | |
| } | |
| for k, v in defaults.items(): | |
| if k not in st.session_state: | |
| st.session_state[k] = v | |
| # ── Sidebar ─────────────────────────────────────────────────────────────────── | |
| with st.sidebar: | |
| st.markdown(""" | |
| <div style='padding:1.2rem 0 2rem 0;'> | |
| <div style='font-size:2.4rem; margin-bottom:0.25rem;'>🎓</div> | |
| <div style='font-family: Fraunces, serif; font-size:1.5rem; font-weight:700; color:#fff;'>LearnCraft</div> | |
| <div style='color:rgba(226,224,245,0.6); font-size:0.82rem;'>Personalized Learning Platform</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| pages = { | |
| "🏠 Home": "home", | |
| "📚 Study Content": "study", | |
| "🃏 Flashcards": "flashcards", | |
| "🧩 Take Quiz": "quiz", | |
| "🤖 AI Tutor": "tutor", | |
| "🏅 Achievements": "achievements", | |
| "📊 My Progress": "progress", | |
| "📝 My Notes": "notes", | |
| } | |
| for label, key in pages.items(): | |
| is_active = st.session_state.page == key | |
| btn_label = f"▶ {label}" if is_active else label | |
| if st.button(btn_label, key=f"nav_{key}", use_container_width=True): | |
| st.session_state.page = key | |
| st.session_state.submitted = False | |
| st.rerun() | |
| st.markdown("---") | |
| # XP & Level display | |
| gami = st.session_state.gami | |
| xp = gami.get("xp", 0) | |
| streak = gami.get("streak", 0) | |
| level_name, next_level_name, xp_to_next, level_pct = get_level(xp) | |
| badges_earned = len(gami.get("badges", [])) | |
| st.markdown(f""" | |
| <div style='margin-bottom:0.6rem;'> | |
| <div style='color:rgba(226,224,245,0.55); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.3rem;'>Your Level</div> | |
| <div style='color:#fff; font-size:1.15rem; font-weight:700;'>{level_name}</div> | |
| <div style='color:#a78bfa; font-size:0.8rem; margin-top:0.1rem;'>{xp} XP {f"· {xp_to_next} to {next_level_name}" if next_level_name else "· MAX LEVEL"}</div> | |
| <div style='background:rgba(255,255,255,0.12); border-radius:99px; height:6px; margin-top:6px; overflow:hidden;'> | |
| <div style='height:100%; width:{level_pct}%; background:linear-gradient(90deg,#a78bfa,#f97316); border-radius:99px;'></div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Daily goal tracker | |
| progress = st.session_state.progress | |
| sessions_today = sum( | |
| 1 for s in progress.get("sessions", []) | |
| if s.get("date") == str(__import__("datetime").date.today()) | |
| ) | |
| goal = st.session_state.daily_goal | |
| goal_pct = min(sessions_today / goal, 1.0) | |
| st.markdown(f""" | |
| <div style='margin-bottom:0.3rem;'> | |
| <div style='color:rgba(226,224,245,0.55); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em;'>Today's Goal</div> | |
| <div style='color:#fff; font-size:1.3rem; font-weight:700; margin:0.15rem 0;'>{sessions_today} / {goal} sessions</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.progress(goal_pct) | |
| st.markdown("<div style='height:0.4rem'></div>", unsafe_allow_html=True) | |
| topics_count = len(set(progress.get("topics_studied", []))) | |
| best_score = progress.get("best_score", 0) | |
| scores = progress.get("scores", []) | |
| avg_score = round(sum(scores)/len(scores), 1) if scores else 0 | |
| st.markdown(f""" | |
| <div style='display:flex; gap:0.4rem; margin-top:0.5rem; flex-wrap:wrap;'> | |
| <div style='flex:1; min-width:48px; background:rgba(255,255,255,0.07); border-radius:10px; padding:0.5rem 0.4rem; text-align:center;'> | |
| <div style='font-size:1.1rem; font-weight:700; color:#f97316;'>🔥{streak}</div> | |
| <div style='font-size:0.63rem; color:rgba(226,224,245,0.55);'>Streak</div> | |
| </div> | |
| <div style='flex:1; min-width:48px; background:rgba(255,255,255,0.07); border-radius:10px; padding:0.5rem 0.4rem; text-align:center;'> | |
| <div style='font-size:1.1rem; font-weight:700; color:#a78bfa;'>{topics_count}</div> | |
| <div style='font-size:0.63rem; color:rgba(226,224,245,0.55);'>Topics</div> | |
| </div> | |
| <div style='flex:1; min-width:48px; background:rgba(255,255,255,0.07); border-radius:10px; padding:0.5rem 0.4rem; text-align:center;'> | |
| <div style='font-size:1.1rem; font-weight:700; color:#fbbf24;'>🏅{badges_earned}</div> | |
| <div style='font-size:0.63rem; color:rgba(226,224,245,0.55);'>Badges</div> | |
| </div> | |
| <div style='flex:1; min-width:48px; background:rgba(255,255,255,0.07); border-radius:10px; padding:0.5rem 0.4rem; text-align:center;'> | |
| <div style='font-size:1.1rem; font-weight:700; color:#10b981;'>{best_score}%</div> | |
| <div style='font-size:0.63rem; color:rgba(226,224,245,0.55);'>Best</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ── Page routing ────────────────────────────────────────────────────────────── | |
| page = st.session_state.page | |
| # ══════════════════════ HOME ══════════════════════════════════════════════════ | |
| if page == "home": | |
| st.markdown(""" | |
| <div class='hero'> | |
| <div class='tag'>AI-Powered Learning</div> | |
| <h1>LearnCraft</h1> | |
| <p>Generate personalized study material, flashcards & quizzes<br>tailored exactly to your level and learning goals.</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| weak = get_weak_topics(st.session_state.progress) | |
| if weak: | |
| st.warning(f"📌 **Recommended Review:** You scored below 60% on: {', '.join(weak)}. Consider revisiting these topics!") | |
| c1, c2, c3, c4 = st.columns(4) | |
| features = [ | |
| ("📖", "Smart Content", "AI-generated study notes adapted to Beginner, Intermediate, or Advanced levels in multiple styles."), | |
| ("🃏", "Flashcards", "Flip-card revision sessions with auto-generated front/back cards. Perfect for memorisation."), | |
| ("🧩", "Custom Quizzes", "MCQ, True/False, Fill-in-the-Blank and Short Answer quizzes with timed mode."), | |
| ("📊", "Analytics", "Score history charts, per-topic bests, streak tracking and weak-topic detection."), | |
| ] | |
| for col, (icon, title, desc) in zip([c1, c2, c3, c4], features): | |
| with col: | |
| st.markdown(f""" | |
| <div class='learn-card'> | |
| <div style='font-size:2rem; margin-bottom:0.5rem;'>{icon}</div> | |
| <h3 style='font-size:1.1rem !important; margin-bottom:0.4rem;'>{title}</h3> | |
| <p style='color:#6b6880; font-size:0.87rem; line-height:1.6; margin:0;'>{desc}</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("---") | |
| st.markdown("### 🚀 Quick Start") | |
| qa, qb, qc = st.columns(3) | |
| with qa: | |
| if st.button("📚 Generate Study Notes", use_container_width=True): | |
| st.session_state.page = "study"; st.rerun() | |
| with qb: | |
| if st.button("🃏 Practice Flashcards", use_container_width=True): | |
| st.session_state.page = "flashcards"; st.rerun() | |
| with qc: | |
| if st.button("🧩 Start a Quiz", use_container_width=True): | |
| st.session_state.page = "quiz"; st.rerun() | |
| # Recent activity | |
| sessions = st.session_state.progress.get("sessions", []) | |
| if sessions: | |
| st.markdown("---") | |
| st.markdown("### 🕐 Recent Activity") | |
| recent = sessions[-5:][::-1] | |
| for s in recent: | |
| score = s.get("score", 0) | |
| color = "#10b981" if score >= 80 else "#f97316" if score >= 60 else "#ef4444" | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid #e2ddf5; border-radius:12px; padding:0.75rem 1.2rem; margin:0.3rem 0; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(108,71,255,0.06);'> | |
| <div> | |
| <span style='font-weight:600; color:#1a1523;'>{s.get("topic","Unknown")}</span> | |
| <span style='color:#6b6880; font-size:0.82rem; margin-left:0.5rem;'>{s.get("date","")}</span> | |
| </div> | |
| <div style='font-weight:700; color:{color}; font-family:Fraunces,serif; font-size:1.1rem;'>{score}%</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ══════════════════════ STUDY ════════════════════════════════════════════════ | |
| elif page == "study": | |
| st.markdown("## 📚 Study Content Generator") | |
| st.markdown("<div style='color:#6b6880; margin-bottom:1rem;'>Choose a topic and level to get personalized AI-generated study notes.</div>", unsafe_allow_html=True) | |
| col1, col2 = st.columns([2, 1]) | |
| with col1: | |
| topic = st.text_input("📌 Topic", placeholder="e.g. Photosynthesis, World War II, Python Functions…") | |
| custom_focus = st.text_area("🎯 Focus area (optional)", placeholder="e.g. focus on the Calvin cycle, or key dates and battles…", height=75) | |
| with col2: | |
| level = st.selectbox("🎓 Your Level", ["Beginner", "Intermediate", "Advanced"]) | |
| content_type = st.selectbox("📄 Content Style", ["Summary Notes", "Detailed Explanation", "Bullet Points", "Concept Map"]) | |
| if topic: | |
| path = get_learning_path(topic) | |
| if path: | |
| path_html = " → ".join( | |
| f"<span style='color:#6c47ff; font-weight:700;'>{s}</span>" if s.lower() == topic.lower() | |
| else f"<span style='color:#6b6880;'>{s}</span>" | |
| for s in path | |
| ) | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid #e2ddf5; border-radius:12px; padding:0.8rem 1.3rem; margin-bottom:1rem; box-shadow:0 2px 8px rgba(108,71,255,0.06);'> | |
| 🗺️ <strong style='color:#1a1523;'>Suggested Path:</strong> {path_html} | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if st.button("✨ Generate Content", use_container_width=True): | |
| if not topic.strip(): | |
| st.warning("Please enter a topic first.") | |
| else: | |
| with st.spinner("Crafting your personalized content…"): | |
| content = generate_content(topic, level, content_type, custom_focus) | |
| st.session_state.content = content | |
| save_progress(st.session_state.progress, topic=topic.title()) | |
| # Gamification: award XP for study session | |
| gami = update_streak(st.session_state.gami) | |
| gami, xp_amt, lvl_up = award_xp(gami, XP_STUDY_SESSION, "study_session") | |
| topics_count = len(set(st.session_state.progress.get("topics_studied", []))) | |
| new_b = check_and_award_badges(gami, {"topics_count": topics_count, "event": ""}) | |
| save_gamification(gami) | |
| st.session_state.gami = gami | |
| if new_b: | |
| st.session_state.new_badges = new_b | |
| if lvl_up: | |
| st.session_state.level_up_msg = lvl_up | |
| if st.session_state.content: | |
| st.markdown("---") | |
| data = st.session_state.content | |
| m1, m2, m3 = st.columns(3) | |
| m1.metric("Topic", data["topic"]) | |
| m2.metric("Level", data["level"]) | |
| m3.metric("Est. Read Time", data["read_time"]) | |
| if data.get("ai_generated"): | |
| st.info("✨ Content is AI-generated and tailored to your topic and level.") | |
| for section in data["sections"]: | |
| st.markdown(f""" | |
| <div class='content-block'> | |
| <h3>📌 {section['title']}</h3> | |
| <div>{section['content']}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if data.get("key_terms"): | |
| st.markdown("### 🔑 Key Terms") | |
| cols = st.columns(3) | |
| for i, term in enumerate(data["key_terms"]): | |
| with cols[i % 3]: | |
| st.markdown(f""" | |
| <div style='background:#f7f4ef; border:1px solid #e2ddf5; border-radius:10px; padding:0.7rem 1rem; margin:0.3rem 0;'> | |
| <div style='color:#6c47ff; font-weight:700; font-size:0.9rem;'>{term['term']}</div> | |
| <div style='color:#6b6880; font-size:0.82rem; margin-top:0.2rem;'>{term['definition']}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if data.get("summary"): | |
| st.markdown("### 💡 Quick Summary") | |
| st.info(data["summary"]) | |
| st.markdown("---") | |
| col_note, col_quiz, col_flash = st.columns(3) | |
| with col_note: | |
| st.markdown("##### 📝 Save a Note") | |
| note_text = st.text_area("Note", placeholder="Something to remember…", height=75, label_visibility="collapsed") | |
| if st.button("💾 Save Note"): | |
| if note_text.strip(): | |
| save_note(note_text, data["topic"]) | |
| # Badge for first note | |
| gami = st.session_state.gami | |
| new_b = check_and_award_badges(gami, {"event": "note_saved"}) | |
| if new_b: | |
| save_gamification(gami) | |
| st.session_state.gami = gami | |
| st.session_state.new_badges = new_b | |
| st.success("Note saved!") | |
| else: | |
| st.warning("Write something first.") | |
| with col_quiz: | |
| st.markdown("##### 🧩 Test Yourself") | |
| st.markdown("<div style='color:#6b6880; font-size:0.88rem; margin-bottom:0.6rem;'>Take a quiz on this exact topic.</div>", unsafe_allow_html=True) | |
| if st.button("🧩 Start Quiz on This Topic", use_container_width=True): | |
| st.session_state.page = "quiz" | |
| st.session_state.quiz_topic = data["topic"] | |
| st.session_state.quiz_level = data["level"] | |
| st.session_state.submitted = False | |
| st.rerun() | |
| with col_flash: | |
| st.markdown("##### 🃏 Flashcard Mode") | |
| st.markdown("<div style='color:#6b6880; font-size:0.88rem; margin-bottom:0.6rem;'>Generate flip-cards for quick revision.</div>", unsafe_allow_html=True) | |
| if st.button("🃏 Generate Flashcards", use_container_width=True): | |
| st.session_state.fc_topic = data["topic"] | |
| st.session_state.fc_level = data["level"] | |
| st.session_state.page = "flashcards" | |
| st.rerun() | |
| # PDF Export | |
| st.markdown("---") | |
| st.markdown("##### 📄 Export as PDF") | |
| if st.button("⬇️ Download Study Notes PDF", use_container_width=True): | |
| with st.spinner("Generating PDF…"): | |
| pdf_bytes = export_study_notes_pdf(data) | |
| st.download_button( | |
| label="📥 Click to Download PDF", | |
| data=pdf_bytes, | |
| file_name=f"LearnCraft_{data['topic'].replace(' ','_')}_Notes.pdf", | |
| mime="application/pdf", | |
| use_container_width=True, | |
| ) | |
| # ══════════════════════ FLASHCARDS ══════════════════════════════════════════ | |
| elif page == "flashcards": | |
| st.markdown("## 🃏 Flashcard Studio") | |
| st.markdown("<div style='color:#6b6880; margin-bottom:1rem;'>Click any card to flip it and reveal the answer.</div>", unsafe_allow_html=True) | |
| col1, col2 = st.columns([2, 1]) | |
| with col1: | |
| default_topic = getattr(st.session_state, "fc_topic", "") | |
| fc_topic = st.text_input("📌 Topic", value=default_topic, placeholder="e.g. Quantum Mechanics, World War II…") | |
| with col2: | |
| default_level = getattr(st.session_state, "fc_level", "Intermediate") | |
| fc_level = st.selectbox("🎓 Level", ["Beginner", "Intermediate", "Advanced"], | |
| index=["Beginner", "Intermediate", "Advanced"].index(default_level)) | |
| num_cards = st.slider("Number of Cards", min_value=5, max_value=20, value=10) | |
| if st.button("🃏 Generate Flashcards", use_container_width=True): | |
| if not fc_topic.strip(): | |
| st.warning("Please enter a topic.") | |
| else: | |
| with st.spinner("Creating your flashcard set…"): | |
| cards = generate_flashcards(fc_topic, fc_level, num_cards) | |
| st.session_state.flashcards = cards | |
| st.session_state.fc_index = 0 | |
| st.session_state.fc_flipped = False | |
| # Gamification: XP for flashcard deck | |
| gami = update_streak(st.session_state.gami) | |
| gami, xp_amt, lvl_up = award_xp(gami, XP_FLASHCARD_DECK, "flashcard_deck") | |
| new_b = check_and_award_badges(gami, {"event": "flashcards"}) | |
| save_gamification(gami) | |
| st.session_state.gami = gami | |
| if new_b: | |
| st.session_state.new_badges = new_b | |
| if lvl_up: | |
| st.session_state.level_up_msg = lvl_up | |
| cards = st.session_state.flashcards | |
| if cards: | |
| st.markdown("---") | |
| idx = st.session_state.fc_index | |
| total_fc = len(cards) | |
| card = cards[idx] | |
| flipped = st.session_state.fc_flipped | |
| # Progress | |
| st.markdown(f""" | |
| <div style='display:flex; justify-content:space-between; align-items:center; margin-bottom:0.8rem;'> | |
| <div style='color:#6b6880; font-size:0.88rem; font-weight:600;'>Card {idx+1} of {total_fc}</div> | |
| <div style='color:#6c47ff; font-size:0.88rem; font-weight:600;'>{round((idx+1)/total_fc*100)}% through deck</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.progress((idx + 1) / total_fc) | |
| # Flip card (CSS-based) | |
| flipped_class = "flipped" if flipped else "" | |
| st.markdown(f""" | |
| <div class="flip-card {flipped_class}" id="fc-main" onclick="this.classList.toggle('flipped')"> | |
| <div class="flip-inner"> | |
| <div class="flip-front"> | |
| <div> | |
| <div style='font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#6b6880; margin-bottom:0.5rem;'>QUESTION</div> | |
| <div style='font-size:1.05rem; font-weight:600; color:#1a1523;'>{card['front']}</div> | |
| </div> | |
| </div> | |
| <div class="flip-back"> | |
| <div> | |
| <div style='font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.7); margin-bottom:0.5rem;'>ANSWER</div> | |
| <div style='font-size:0.95rem;'>{card['back']}</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("") | |
| nav1, nav2, nav3 = st.columns([1, 2, 1]) | |
| with nav1: | |
| if st.button("⬅ Previous", use_container_width=True, disabled=(idx == 0)): | |
| st.session_state.fc_index = idx - 1 | |
| st.session_state.fc_flipped = False | |
| st.rerun() | |
| with nav2: | |
| if st.button("🔄 Flip Card", use_container_width=True): | |
| st.session_state.fc_flipped = not st.session_state.fc_flipped | |
| st.rerun() | |
| with nav3: | |
| if st.button("Next ➡", use_container_width=True, disabled=(idx == total_fc - 1)): | |
| st.session_state.fc_index = idx + 1 | |
| st.session_state.fc_flipped = False | |
| st.rerun() | |
| # Mini deck overview | |
| st.markdown("---") | |
| st.markdown("### 📋 All Cards in This Deck") | |
| for i, c in enumerate(cards): | |
| bg = "#ede9fe" if i == idx else "#fff" | |
| bd = "#6c47ff" if i == idx else "#e2ddf5" | |
| st.markdown(f""" | |
| <div style='background:{bg}; border:1.5px solid {bd}; border-radius:10px; padding:0.6rem 1rem; margin:0.3rem 0; display:flex; justify-content:space-between;'> | |
| <div style='color:#1a1523; font-size:0.88rem; font-weight:600;'>{i+1}. {c['front']}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ══════════════════════ QUIZ ════════════════════════════════════════════════ | |
| elif page == "quiz": | |
| st.markdown("## 🧩 Quiz Generator") | |
| if not st.session_state.submitted: | |
| st.markdown("<div style='color:#6b6880; margin-bottom:1rem;'>Configure your quiz, then test your knowledge!</div>", unsafe_allow_html=True) | |
| col1, col2 = st.columns([2, 1]) | |
| with col1: | |
| default_topic = getattr(st.session_state, "quiz_topic", "") | |
| topic = st.text_input("📌 Topic", value=default_topic, placeholder="e.g. Machine Learning, Calculus…") | |
| with col2: | |
| default_level = getattr(st.session_state, "quiz_level", "Intermediate") | |
| level = st.selectbox("🎓 Difficulty", ["Beginner", "Intermediate", "Advanced"], | |
| index=["Beginner", "Intermediate", "Advanced"].index(default_level)) | |
| col3, col4, col5 = st.columns(3) | |
| with col3: | |
| num_q = st.number_input("Number of Questions", min_value=3, max_value=15, value=5) | |
| with col4: | |
| q_type = st.selectbox("Question Type", ["Mixed", "Multiple Choice", "True/False", "Short Answer", "Fill in the Blank"]) | |
| with col5: | |
| time_limit = st.selectbox("⏱️ Time Limit", ["No limit", "5 minutes", "10 minutes", "15 minutes"]) | |
| if st.button("🎲 Generate Quiz", use_container_width=True): | |
| if not topic.strip(): | |
| st.warning("Please enter a topic.") | |
| else: | |
| with st.spinner("Building your quiz…"): | |
| quiz = generate_quiz(topic, level, num_q, q_type) | |
| st.session_state.quiz = quiz | |
| st.session_state.answers = {} | |
| st.session_state.submitted = False | |
| st.session_state.quiz_start_time = time.time() | |
| st.session_state.time_limit = time_limit | |
| st.session_state.quiz_elapsed = None | |
| if st.session_state.quiz and not st.session_state.submitted: | |
| quiz = st.session_state.quiz | |
| if st.session_state.quiz_start_time: | |
| elapsed = int(time.time() - st.session_state.quiz_start_time) | |
| limit = st.session_state.get("time_limit", "No limit") | |
| if limit != "No limit": | |
| limit_secs = int(limit.split()[0]) * 60 | |
| remaining = limit_secs - elapsed | |
| if remaining <= 0: | |
| st.error("⏱️ Time's up! Submitting…") | |
| st.session_state.quiz_elapsed = elapsed | |
| st.session_state.submitted = True | |
| st.rerun() | |
| else: | |
| r_m, r_s = divmod(remaining, 60) | |
| st.info(f"⏱️ Time remaining: {r_m}m {r_s}s") | |
| else: | |
| m, s = divmod(elapsed, 60) | |
| st.info(f"⏱️ Elapsed: {m}m {s}s") | |
| st.markdown("---") | |
| st.markdown(f"### 📝 {quiz['title']}") | |
| st.markdown(f"<div style='color:#6b6880; margin-bottom:1.5rem;'>{len(quiz['questions'])} questions · {quiz['difficulty']} · {quiz['topic']}</div>", unsafe_allow_html=True) | |
| for i, q in enumerate(quiz["questions"]): | |
| st.markdown(f""" | |
| <div class='learn-card'> | |
| <div style='color:#6b6880; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.5rem;'>Question {i+1} · {q['type']}</div> | |
| <div style='font-size:1.02rem; font-weight:600; color:#1a1523; margin-bottom:1rem;'>{q['question']}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if q["type"] in ("Multiple Choice", "True/False"): | |
| ans = st.radio(f"Answer Q{i+1}", q["options"], key=f"q_{i}", label_visibility="collapsed") | |
| st.session_state.answers[i] = ans | |
| elif q["type"] == "Fill in the Blank": | |
| ans = st.text_input(f"Blank Q{i+1}", key=f"q_{i}", label_visibility="collapsed", placeholder="Type the missing word…") | |
| st.session_state.answers[i] = ans | |
| else: | |
| ans = st.text_input(f"Answer Q{i+1}", key=f"q_{i}", label_visibility="collapsed", placeholder="Type your answer…") | |
| st.session_state.answers[i] = ans | |
| st.markdown("") | |
| if st.button("✅ Submit Quiz", use_container_width=True): | |
| st.session_state.quiz_elapsed = int(time.time() - st.session_state.quiz_start_time) | |
| st.session_state.submitted = True | |
| st.rerun() | |
| else: | |
| # ── Results ────────────────────────────────────────────────────────── | |
| quiz = st.session_state.quiz | |
| results = evaluate_answers(quiz, st.session_state.answers) | |
| score = results["score_percent"] | |
| elapsed = st.session_state.get("quiz_elapsed", 0) or 0 | |
| em, es = divmod(elapsed, 60) | |
| st.markdown(f""" | |
| <div class='hero'> | |
| <div class='tag'>Quiz Complete</div> | |
| <div class='score-badge'>{score}%</div> | |
| <div style='color:rgba(255,255,255,0.85); margin-top:0.4rem;'>{results['correct']} / {results['total']} correct</div> | |
| <div style='color:rgba(255,255,255,0.7); font-size:0.9rem; margin-top:0.3rem;'>⏱️ Completed in {em}m {es}s</div> | |
| <div style='margin-top:1rem; font-size:1.1rem; color:#fff;'>{results['feedback']}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| save_progress(st.session_state.progress, score=score, topic=quiz["topic"]) | |
| # Gamification: award XP for quiz | |
| gami = update_streak(st.session_state.gami) | |
| xp_for_quiz = get_xp_for_quiz(score) | |
| gami, xp_amt, lvl_up = award_xp(gami, xp_for_quiz) | |
| gami = record_quiz(gami, score, len(set(st.session_state.progress.get("topics_studied", [])))) | |
| topics_count = len(set(st.session_state.progress.get("topics_studied", []))) | |
| quizzes_count = gami.get("total_quizzes", 0) | |
| new_b = check_and_award_badges(gami, { | |
| "score": score, "topics_count": topics_count, | |
| "quizzes_count": quizzes_count, "event": "quiz", | |
| }) | |
| save_gamification(gami) | |
| st.session_state.gami = gami | |
| if new_b: | |
| st.session_state.new_badges = new_b | |
| if lvl_up: | |
| st.session_state.level_up_msg = lvl_up | |
| # Show XP toast | |
| st.markdown(f""" | |
| <div class='toast'> | |
| <div style='font-size:1.5rem;'>⚡</div> | |
| <div> | |
| <div style='font-weight:700; font-size:0.95rem;'>+{xp_for_quiz} XP earned!</div> | |
| <div style='font-size:0.82rem; opacity:0.85;'>Total: {gami.get("xp",0)} XP · {get_level(gami.get("xp",0))[0]}</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Show new badges | |
| if st.session_state.new_badges: | |
| for bk in st.session_state.new_badges: | |
| b = BADGES.get(bk, {}) | |
| st.markdown(f""" | |
| <div class='toast' style='background:linear-gradient(135deg,#f97316,#fbbf24);'> | |
| <div style='font-size:1.5rem;'>{b.get("icon","🏅")}</div> | |
| <div> | |
| <div style='font-weight:700; font-size:0.95rem;'>Badge Unlocked: {b.get("name","")}</div> | |
| <div style='font-size:0.82rem; opacity:0.85;'>{b.get("desc","")}</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.session_state.new_badges = [] | |
| if lvl_up: | |
| st.balloons() | |
| st.success(f"🚀 Level Up! You reached **{lvl_up}**!") | |
| st.session_state.level_up_msg = None | |
| if score < 60: | |
| st.warning(f"📌 Score below 60%. We recommend revisiting **{quiz['topic']}**.") | |
| # Score meter | |
| col_meter = st.columns([1, 2, 1])[1] | |
| with col_meter: | |
| level_label = "Excellent 🌟" if score == 100 else "Great 🎉" if score >= 80 else "Good 👍" if score >= 60 else "Fair 📖" if score >= 40 else "Keep Going 💪" | |
| st.markdown(f"<div style='text-align:center; color:#6c47ff; font-weight:700; margin-bottom:0.3rem;'>{level_label}</div>", unsafe_allow_html=True) | |
| st.progress(score / 100) | |
| st.markdown("### 📋 Answer Review") | |
| for i, q in enumerate(quiz["questions"]): | |
| correct = results["details"][i]["correct"] | |
| user_ans = st.session_state.answers.get(i, "") | |
| color = "#10b981" if correct else "#ef4444" | |
| icon = "✅" if correct else "❌" | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid {color}33; border-left:4px solid {color}; border-radius:0 14px 14px 0; padding:1.2rem 1.5rem; margin:0.6rem 0; box-shadow:0 2px 8px rgba(0,0,0,0.04);'> | |
| <div style='font-weight:700; margin-bottom:0.5rem; color:#1a1523;'>{icon} Q{i+1}: {q['question']}</div> | |
| <div style='font-size:0.88rem; color:#6b6880;'>Your answer: <span style='color:{color}; font-weight:600;'>{user_ans if user_ans else "No answer"}</span></div> | |
| <div style='font-size:0.88rem; color:#6b6880;'>Correct: <span style='color:#10b981; font-weight:600;'>{results["details"][i]["correct_answer"]}</span></div> | |
| {f'<div style="font-size:0.82rem; color:#6b6880; margin-top:0.35rem; font-style:italic;">{results["details"][i]["explanation"]}</div>' if results["details"][i].get("explanation") else ""} | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("") | |
| c1, c2, c3 = st.columns(3) | |
| with c1: | |
| if st.button("🔁 Retake Quiz", use_container_width=True): | |
| st.session_state.submitted = False | |
| st.session_state.answers = {} | |
| st.session_state.quiz_start_time = time.time() | |
| st.rerun() | |
| with c2: | |
| if st.button("📚 Study This Topic", use_container_width=True): | |
| st.session_state.page = "study" | |
| st.session_state.submitted = False | |
| st.rerun() | |
| with c3: | |
| if st.button("🃏 Flashcard Revision", use_container_width=True): | |
| st.session_state.fc_topic = quiz["topic"] | |
| st.session_state.fc_level = quiz["difficulty"] | |
| st.session_state.page = "flashcards" | |
| st.session_state.submitted = False | |
| st.rerun() | |
| # PDF Export for quiz results | |
| st.markdown("---") | |
| if st.button("⬇️ Download Quiz Results PDF", use_container_width=True): | |
| with st.spinner("Generating PDF…"): | |
| pdf_bytes = export_quiz_results_pdf(quiz, results, st.session_state.answers) | |
| st.download_button( | |
| label="📥 Click to Download Results PDF", | |
| data=pdf_bytes, | |
| file_name=f"LearnCraft_{quiz['topic'].replace(' ','_')}_Results.pdf", | |
| mime="application/pdf", | |
| use_container_width=True, | |
| ) | |
| # ══════════════════════ PROGRESS ════════════════════════════════════════════ | |
| elif page == "progress": | |
| st.markdown("## 📊 My Learning Progress") | |
| progress = st.session_state.progress | |
| scores = progress.get("scores", []) | |
| sessions = progress.get("sessions", []) | |
| c1, c2, c3, c4 = st.columns(4) | |
| topics_list = list(set(progress.get("topics_studied", []))) | |
| avg = round(sum(scores)/len(scores), 1) if scores else 0 | |
| c1.metric("📚 Topics Studied", len(topics_list)) | |
| c2.metric("🏆 Best Score", f"{progress.get('best_score', 0)}%") | |
| c3.metric("📈 Avg Score", f"{avg}%") | |
| c4.metric("🎯 Total Quizzes", len(scores)) | |
| st.markdown("---") | |
| if sessions: | |
| st.markdown("### 📈 Score History") | |
| df = pd.DataFrame(sessions) | |
| df.index = range(1, len(df) + 1) | |
| df.index.name = "Quiz #" | |
| st.line_chart(df[["score"]].rename(columns={"score": "Score (%)"}), color="#6c47ff") | |
| topic_scores = progress.get("topic_scores", {}) | |
| if topic_scores: | |
| st.markdown("### 🏅 Best Score Per Topic") | |
| ts_df = pd.DataFrame([ | |
| {"Topic": t, "Best Score (%)": s, "Status": "✅ Passing" if s >= 60 else "⚠️ Needs Review"} | |
| for t, s in sorted(topic_scores.items(), key=lambda x: -x[1]) | |
| ]) | |
| st.dataframe(ts_df, use_container_width=True, hide_index=True) | |
| weak = get_weak_topics(progress) | |
| if weak: | |
| st.markdown("### ⚠️ Topics to Improve") | |
| for t in weak: | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid #ef444433; border-left:4px solid #ef4444; border-radius:0 12px 12px 0; padding:0.65rem 1.1rem; margin:0.35rem 0; color:#ef4444; font-weight:600;'> | |
| ⚠️ {t} — below 60% | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if topics_list: | |
| st.markdown("### 🗂️ Topics Covered") | |
| cols = st.columns(3) | |
| for i, t in enumerate(topics_list): | |
| with cols[i % 3]: | |
| best = topic_scores.get(t, 0) | |
| color = "#10b981" if best >= 80 else "#f97316" if best >= 60 else "#ef4444" | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid #e2ddf5; border-radius:10px; padding:0.7rem 1rem; margin:0.3rem 0; display:flex; justify-content:space-between; align-items:center;'> | |
| <div style='color:#1a1523; font-weight:600; font-size:0.9rem;'>📌 {t}</div> | |
| <div style='color:{color}; font-weight:700; font-size:0.9rem;'>{best}%</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if not topics_list and not scores: | |
| st.markdown(""" | |
| <div style='text-align:center; padding:4rem 2rem; color:#6b6880;'> | |
| <div style='font-size:3rem; margin-bottom:1rem;'>🌱</div> | |
| <div style='font-size:1.2rem;'>No activity yet. Start learning to see your progress!</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if st.button("📚 Start Learning Now", use_container_width=True): | |
| st.session_state.page = "study"; st.rerun() | |
| st.markdown("") | |
| if st.button("🗑️ Reset All Progress", type="secondary"): | |
| st.session_state.progress = {"topics_studied": [], "scores": [], "best_score": 0, "sessions": [], "topic_scores": {}} | |
| save_progress(st.session_state.progress) | |
| st.success("Progress reset.") | |
| st.rerun() | |
| # ══════════════════════ NOTES ═══════════════════════════════════════════════ | |
| elif page == "notes": | |
| st.markdown("## 📝 My Notes") | |
| st.markdown("<div style='color:#6b6880; margin-bottom:1rem;'>Notes you've saved while studying.</div>", unsafe_allow_html=True) | |
| notes = load_notes() | |
| if not notes: | |
| st.markdown(""" | |
| <div style='text-align:center; padding:4rem 2rem; color:#6b6880;'> | |
| <div style='font-size:3rem; margin-bottom:1rem;'>📭</div> | |
| <div style='font-size:1.2rem;'>No notes yet. Save notes from the Study page!</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if st.button("📚 Go to Study", use_container_width=True): | |
| st.session_state.page = "study"; st.rerun() | |
| else: | |
| # Search filter | |
| search = st.text_input("🔍 Search notes", placeholder="Filter by keyword…") | |
| filtered = [n for n in reversed(notes) if not search or search.lower() in n.get("note","").lower() or search.lower() in n.get("topic","").lower()] | |
| st.markdown(f"**{len(filtered)} note(s)**") | |
| for i, note in enumerate(filtered): | |
| actual_index = notes.index(note) if note in notes else -1 | |
| col_note, col_del = st.columns([11, 1]) | |
| with col_note: | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid #e2ddf5; border-left:4px solid #6c47ff; border-radius:0 14px 14px 0; padding:1rem 1.5rem; margin:0.5rem 0; box-shadow:0 2px 8px rgba(108,71,255,0.06);'> | |
| <div style='color:#6c47ff; font-size:0.78rem; font-weight:700; margin-bottom:0.4rem;'>📌 {note.get("topic","Unknown")} · {note.get("date","")}</div> | |
| <div style='color:#1a1523; font-size:0.95rem; line-height:1.65;'>{note.get("note","")}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col_del: | |
| if st.button("🗑️", key=f"del_{i}", help="Delete note"): | |
| if actual_index >= 0: | |
| delete_note(actual_index) | |
| st.rerun() | |
| # ══════════════════════ AI TUTOR ═════════════════════════════════════════════ | |
| elif page == "tutor": | |
| st.markdown("## 🤖 AI Tutor") | |
| st.markdown("<div style='color:#6b6880; margin-bottom:1rem;'>Ask anything about any topic. Your tutor remembers the full conversation.</div>", unsafe_allow_html=True) | |
| # Topic context selector | |
| col_t, col_c = st.columns([3, 1]) | |
| with col_t: | |
| tutor_topic = st.text_input( | |
| "📌 Topic context (optional)", | |
| value=st.session_state.tutor_topic, | |
| placeholder="e.g. Quantum Mechanics — helps the tutor stay focused", | |
| ) | |
| st.session_state.tutor_topic = tutor_topic | |
| with col_c: | |
| st.markdown("<div style='height:1.85rem'></div>", unsafe_allow_html=True) | |
| if st.button("🗑️ Clear Chat", use_container_width=True): | |
| st.session_state.tutor_messages = [] | |
| st.rerun() | |
| st.markdown("---") | |
| # Render conversation history | |
| msgs = st.session_state.tutor_messages | |
| if not msgs: | |
| st.markdown(""" | |
| <div style='text-align:center; padding:3rem 2rem; color:#6b6880;'> | |
| <div style='font-size:3rem; margin-bottom:0.75rem;'>🤖</div> | |
| <div style='font-size:1.1rem; font-weight:600; color:#1a1523; margin-bottom:0.4rem;'>Hi! I'm your LearnCraft Tutor.</div> | |
| <div style='font-size:0.95rem;'>Ask me anything about your topic — concepts, examples, quick tests, or explanations.</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Quick-start prompts | |
| st.markdown("#### 💡 Try asking:") | |
| prompts = [ | |
| "Explain this topic like I'm 10 years old", | |
| "Give me 3 real-world examples", | |
| "What are the most common mistakes beginners make?", | |
| "Quiz me with one question", | |
| ] | |
| p_cols = st.columns(2) | |
| for i, prompt in enumerate(prompts): | |
| with p_cols[i % 2]: | |
| if st.button(f'"{prompt}"', key=f"prompt_{i}", use_container_width=True): | |
| full_prompt = prompt + (f" about {tutor_topic}" if tutor_topic else "") | |
| st.session_state.tutor_messages.append({"role": "user", "content": full_prompt}) | |
| with st.spinner("Thinking…"): | |
| reply = get_tutor_reply(st.session_state.tutor_messages, tutor_topic) | |
| st.session_state.tutor_messages.append({"role": "assistant", "content": reply}) | |
| st.rerun() | |
| else: | |
| for msg in msgs: | |
| if msg["role"] == "user": | |
| st.markdown(f""" | |
| <div style='text-align:right; margin-bottom:0.15rem;'> | |
| <span style='font-size:0.72rem; font-weight:700; color:#6b6880; text-transform:uppercase; letter-spacing:0.05em;'>You</span> | |
| </div> | |
| <div class='chat-user'>{msg['content']}</div> | |
| """, unsafe_allow_html=True) | |
| else: | |
| st.markdown(f""" | |
| <div style='margin-bottom:0.15rem;'> | |
| <span style='font-size:0.72rem; font-weight:700; color:#6c47ff; text-transform:uppercase; letter-spacing:0.05em;'>🤖 Tutor</span> | |
| </div> | |
| <div class='chat-ai'>{msg['content']}</div> | |
| """, unsafe_allow_html=True) | |
| # Input box | |
| st.markdown("<div style='height:1rem'></div>", unsafe_allow_html=True) | |
| with st.form("chat_form", clear_on_submit=True): | |
| user_input = st.text_input( | |
| "Your question", | |
| placeholder="Ask your tutor anything…", | |
| label_visibility="collapsed", | |
| ) | |
| submitted = st.form_submit_button("Send ➤", use_container_width=True) | |
| if submitted and user_input.strip(): | |
| st.session_state.tutor_messages.append({"role": "user", "content": user_input.strip()}) | |
| with st.spinner("Tutor is thinking…"): | |
| reply = get_tutor_reply(st.session_state.tutor_messages, tutor_topic) | |
| st.session_state.tutor_messages.append({"role": "assistant", "content": reply}) | |
| st.rerun() | |
| # ══════════════════════ ACHIEVEMENTS ════════════════════════════════════════ | |
| elif page == "achievements": | |
| gami = st.session_state.gami | |
| xp = gami.get("xp", 0) | |
| streak = gami.get("streak", 0) | |
| earned = set(gami.get("badges", [])) | |
| level_name, next_level_name, xp_to_next, level_pct = get_level(xp) | |
| st.markdown("## 🏅 Achievements") | |
| st.markdown("<div style='color:#6b6880; margin-bottom:1rem;'>Your XP, level, streak and badges.</div>", unsafe_allow_html=True) | |
| # XP / Level hero card | |
| st.markdown(f""" | |
| <div style='background:linear-gradient(135deg,#6c47ff,#a78bfa,#f97316); border-radius:22px; padding:2.5rem 2rem; text-align:center; margin-bottom:1.5rem; box-shadow:0 8px 40px rgba(108,71,255,0.18);'> | |
| <div style='font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.7); margin-bottom:0.5rem;'>Current Level</div> | |
| <div style='font-family:Fraunces,serif; font-size:2.8rem; font-weight:900; color:#fff; margin-bottom:0.2rem;'>{level_name}</div> | |
| <div style='color:rgba(255,255,255,0.85); font-size:1.1rem; font-weight:600;'>{xp} XP total</div> | |
| {"<div style='color:rgba(255,255,255,0.65); font-size:0.88rem; margin-top:0.3rem;'>" + str(xp_to_next) + " XP to " + str(next_level_name) + "</div>" if next_level_name else "<div style='color:rgba(255,255,255,0.65); font-size:0.88rem; margin-top:0.3rem;'>Maximum level reached! 🚀</div>"} | |
| <div style='background:rgba(255,255,255,0.2); border-radius:99px; height:8px; margin:1rem auto 0; max-width:320px; overflow:hidden;'> | |
| <div style='height:100%; width:{level_pct}%; background:#fff; border-radius:99px;'></div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Stats row | |
| total_quizzes = gami.get("total_quizzes", 0) | |
| badges_count = len(earned) | |
| s1, s2, s3, s4 = st.columns(4) | |
| for col, icon, val, label in [ | |
| (s1, "🔥", f"{streak} days", "Current Streak"), | |
| (s2, "⚡", f"{xp} XP", "Total XP"), | |
| (s3, "🧩", str(total_quizzes), "Quizzes Done"), | |
| (s4, "🏅", f"{badges_count}/{len(BADGES)}", "Badges Earned"), | |
| ]: | |
| with col: | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1.5px solid #e2ddf5; border-radius:16px; padding:1.2rem 0.8rem; text-align:center; box-shadow:0 2px 10px rgba(108,71,255,0.07);'> | |
| <div style='font-size:1.6rem; margin-bottom:0.3rem;'>{icon}</div> | |
| <div style='font-family:Fraunces,serif; font-size:1.4rem; font-weight:700; color:#1a1523;'>{val}</div> | |
| <div style='font-size:0.75rem; color:#6b6880; font-weight:600;'>{label}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("---") | |
| st.markdown("### 🏅 Badge Collection") | |
| # Filter tabs | |
| filter_tab1, filter_tab2 = st.tabs(["All Badges", "Earned Only"]) | |
| def render_badges(badge_list): | |
| cols = st.columns(4) | |
| for i, (key, badge) in enumerate(badge_list): | |
| is_earned = key in earned | |
| card_class = "badge-card earned" if is_earned else "badge-card locked" | |
| lock_icon = badge["icon"] if is_earned else "🔒" | |
| opacity = "1" if is_earned else "0.5" | |
| with cols[i % 4]: | |
| st.markdown(f""" | |
| <div class='{card_class}' style='opacity:{opacity};'> | |
| <div style='font-size:2rem; margin-bottom:0.4rem;'>{lock_icon}</div> | |
| <div style='font-weight:700; font-size:0.88rem; color:#1a1523; margin-bottom:0.2rem;'>{badge["name"]}</div> | |
| <div style='font-size:0.76rem; color:#6b6880; line-height:1.4;'>{badge["desc"]}</div> | |
| {"<div style='margin-top:0.4rem; font-size:0.7rem; font-weight:700; color:#6c47ff; text-transform:uppercase; letter-spacing:0.05em;'>✓ Earned</div>" if is_earned else ""} | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with filter_tab1: | |
| render_badges(list(BADGES.items())) | |
| with filter_tab2: | |
| earned_list = [(k, v) for k, v in BADGES.items() if k in earned] | |
| if earned_list: | |
| render_badges(earned_list) | |
| else: | |
| st.markdown(""" | |
| <div style='text-align:center; padding:3rem; color:#6b6880;'> | |
| <div style='font-size:2.5rem; margin-bottom:0.75rem;'>🔒</div> | |
| <div>No badges yet — complete quizzes and study sessions to earn them!</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # How to earn XP guide | |
| st.markdown("---") | |
| st.markdown("### ⚡ How to Earn XP") | |
| xp_guide = [ | |
| ("📚", "Study session", "+10 XP"), | |
| ("🃏", "Flashcard deck", "+10 XP"), | |
| ("🧩", "Complete a quiz", "+20 XP"), | |
| ("🎯", "Score ≥ 60%", "+15 XP"), | |
| ("🎉", "Score ≥ 80%", "+30 XP"), | |
| ("💯", "Perfect score 100%","+50 XP"), | |
| ] | |
| xp_cols = st.columns(3) | |
| for i, (icon, action, xp_val) in enumerate(xp_guide): | |
| with xp_cols[i % 3]: | |
| st.markdown(f""" | |
| <div style='background:#fff; border:1px solid #e2ddf5; border-radius:12px; padding:0.8rem 1rem; margin:0.3rem 0; display:flex; justify-content:space-between; align-items:center; box-shadow:0 1px 6px rgba(108,71,255,0.05);'> | |
| <div style='font-size:0.9rem; color:#1a1523;'>{icon} {action}</div> | |
| <div style='font-weight:700; color:#6c47ff; font-size:0.9rem;'>{xp_val}</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |