Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| # Page Configuration | |
| st.set_page_config( | |
| page_title="Bloomsphere - Cognitive Learning Platform", | |
| page_icon="🌱", | |
| layout="wide", | |
| initial_sidebar_state="collapsed" | |
| ) | |
| st.markdown(""" | |
| <style> | |
| .stMainBlockContainer { | |
| padding: 32px 50px; | |
| } | |
| .stAppHeader { | |
| position: relative; | |
| height: 0; | |
| } | |
| .st-emotion-cache-oj1fi { | |
| display: flex | |
| ; | |
| justify-content: center; | |
| align-items: center; | |
| margin-top: 0px; | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # Custom CSS with Enhanced Spacing and Animations | |
| st.markdown(""" | |
| <style> | |
| :root { | |
| --primary: #2E7D32; | |
| --secondary: #388E3C; | |
| --accent: #81C784; | |
| --light: #E8F5E9; | |
| --dark: #1B5E20; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .main { | |
| background: linear-gradient(135deg, var(--light) 0%, var(--accent) 100%); | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .header-container { | |
| text-align: center; | |
| padding: 4rem 0 8rem 0; | |
| margin-bottom: 10rem; | |
| } | |
| .main-title { | |
| color: var(--dark); | |
| font-size: 3.5rem; | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| } | |
| .tagline { | |
| color: var(--secondary); | |
| font-size: 1.5rem; | |
| margin-bottom: 3rem; | |
| } | |
| .comparison-section { | |
| background: rgba(255,255,255,0.9); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| margin: 2rem 0; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.05); | |
| } | |
| .bloom-card { | |
| padding: 1rem; | |
| margin: 1rem 0; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 6px 20px rgba(0,0,0,0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .bloom-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| } | |
| .feature-card { | |
| padding: 0.5rem; | |
| background: white; | |
| border-radius: 20px; | |
| height: 100%; | |
| box-shadow: 0 6px 20px rgba(0,0,0,0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| } | |
| .footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 2rem; | |
| margin-top: 4rem; | |
| margin-bottom: 0; | |
| border-radius: 20px 20px 0 0; | |
| } | |
| .problem-column { | |
| padding: 1.5rem; | |
| border-right: 2px solid var(--light); | |
| } | |
| .solution-column { | |
| padding: 1.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| .problem-column { | |
| border-right: none; | |
| border-bottom: 2px solid var(--light); | |
| padding-bottom: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # App Header | |
| st.markdown(""" | |
| <div class="header-container"> | |
| <div class="main-title">🌿 Bloomsphere</div> | |
| <div class="tagline">Next-Gen Cognitive Learning Platform</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Educational Landscape Comparison | |
| with st.container(): | |
| st.markdown(""" | |
| <style> | |
| .comparison-section { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .problem-column, .solution-column { | |
| padding: 1rem; | |
| border-radius: 8px; | |
| } | |
| .problem-column { | |
| background-color: #ffe5e5; | |
| } | |
| .solution-column { | |
| background-color: #e5f5e5; | |
| } | |
| h3 { | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .problem-column p, .solution-column p { | |
| color: #444; | |
| line-height: 1.8; | |
| } | |
| </style> | |
| <div class="comparison-section"> | |
| <h2 style="color: #333;">Transforming Educational Assessment</h2> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| st.markdown(""" | |
| <div class="problem-column"> | |
| <h3 style="color: #d32f2f;">❌ Current Challenges</h3> | |
| <p>• One-size-fits-all assessments</p> | |
| <p>• Subjective difficulty evaluation</p> | |
| <p>• Limited cognitive level tracking</p> | |
| <p>• Manual paper creation processes</p> | |
| <p>• No standardized quality metrics</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col2: | |
| st.markdown(""" | |
| <div class="solution-column"> | |
| <h3 style="color: #007BFF;">✅ Bloomsphere Solution</h3> | |
| <p>• AI-powered cognitive alignment</p> | |
| <p>• Real-time Bloom's Taxonomy analysis</p> | |
| <p>• Detailed skill matrix visualization</p> | |
| <p>• Automated quality assurance</p> | |
| <p>• Data-driven insights & reporting</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Bloom's Taxonomy Section | |
| st.markdown(""" | |
| <h1 style="color: var(--dark); text-align: center; margin: 4rem 0 2rem 0;"> | |
| 🧠 Powered by Bloom's Taxonomy Framework | |
| </h1> | |
| """, unsafe_allow_html=True) | |
| cols = st.columns(3, gap="large") | |
| with cols[0]: | |
| st.markdown(""" | |
| <div class="bloom-card"> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem;">📚 Remember</h3> | |
| <p style="color: #666; font-size: 0.95rem; margin-bottom: 1rem;">Foundation of knowledge retention and recall</p> | |
| <div style="color: #666; font-size: 0.9rem; line-height: 1.6;"> | |
| <div style="margin-bottom: 0.5rem;">• Fact retention</div> | |
| <div style="margin-bottom: 0.5rem;">• Concept identification</div> | |
| <div>• Basic comprehension</div> | |
| </div> | |
| </div> | |
| <div class="bloom-card"> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem;">🔍 Analyze</h3> | |
| <p style="color: #666; font-size: 0.95rem; margin-bottom: 1rem;">Critical examination of information structures</p> | |
| <div style="color: #666; font-size: 0.9rem; line-height: 1.6;"> | |
| <div style="margin-bottom: 0.5rem;">• Pattern recognition</div> | |
| <div style="margin-bottom: 0.5rem;">• Relationship mapping</div> | |
| <div>• Error detection</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with cols[1]: | |
| st.markdown(""" | |
| <div class="bloom-card"> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem;">💡 Understand</h3> | |
| <p style="color: #666; font-size: 0.95rem; margin-bottom: 1rem;">Meaning construction and interpretation</p> | |
| <div style="color: #666; font-size: 0.9rem; line-height: 1.6;"> | |
| <div style="margin-bottom: 0.5rem;">• Concept explanation</div> | |
| <div style="margin-bottom: 0.5rem;">• Information categorization</div> | |
| <div>• Knowledge translation</div> | |
| </div> | |
| </div> | |
| <div class="bloom-card"> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem;">📈 Evaluate</h3> | |
| <p style="color: #666; font-size: 0.95rem; margin-bottom: 1rem;">Strategic judgment and decision making</p> | |
| <div style="color: #666; font-size: 0.9rem; line-height: 1.6;"> | |
| <div style="margin-bottom: 0.5rem;">• Quality assessment</div> | |
| <div style="margin-bottom: 0.5rem;">• Argument validation</div> | |
| <div>• Solution critique</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with cols[2]: | |
| st.markdown(""" | |
| <div class="bloom-card"> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem;">🛠️ Apply</h3> | |
| <p style="color: #666; font-size: 0.95rem; margin-bottom: 1rem;">Practical implementation of knowledge</p> | |
| <div style="color: #666; font-size: 0.9rem; line-height: 1.6;"> | |
| <div style="margin-bottom: 0.5rem;">• Problem solving</div> | |
| <div style="margin-bottom: 0.5rem;">• Procedure execution</div> | |
| <div>• Scenario simulation</div> | |
| </div> | |
| </div> | |
| <div class="bloom-card"> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.3rem;">🚀 Create</h3> | |
| <p style="color: #666; font-size: 0.95rem; margin-bottom: 1rem;">Original synthesis and innovation</p> | |
| <div style="color: #666; font-size: 0.9rem; line-height: 1.6;"> | |
| <div style="margin-bottom: 0.5rem;">• Conceptual design</div> | |
| <div style="margin-bottom: 0.5rem;">• Hypothesis formulation</div> | |
| <div>• System development</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Features Section | |
| st.markdown(""" | |
| <h1 style="color: var(--dark); text-align: center; margin: 4rem 0 3rem 0;"> | |
| ✨ Key Features | |
| </h1> | |
| """, unsafe_allow_html=True) | |
| # Feature Cards | |
| feat_col1, feat_col2, feat_col3 = st.columns(3, gap="large") | |
| with feat_col1: | |
| st.markdown(""" | |
| <div class="feature-card"> | |
| <div style="font-size: 2rem; margin-bottom: 1rem; color: var(--primary);">📝</div> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.2rem;"> | |
| Smart Paper Generation | |
| </h3> | |
| <p style="color: #666; font-size: 0.95rem; line-height: 1.6;display:flex; text-align: center;"> | |
| Create Bloom's-aligned question papers with defined difficulty balancing | |
| and cognitive levels. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with feat_col2: | |
| st.markdown(""" | |
| <div class="feature-card"> | |
| <div style="font-size: 2rem; margin-bottom: 1rem; color: var(--primary);">🔍</div> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.2rem;"> | |
| Cognitive Analysis | |
| </h3> | |
| <p style="color: #666; font-size: 0.95rem; line-height: 1.6; display:flex; text-align: center;"> | |
| Get instant Bloom's Taxonomy breakdowns with complexity scores. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with feat_col3: | |
| st.markdown(""" | |
| <div class="feature-card"> | |
| <div style="font-size: 2rem; margin-bottom: 1rem; color: var(--primary);">📊</div> | |
| <h3 style="color: var(--primary); margin-bottom: 1rem; font-size: 1.2rem;"> | |
| Learning Analytics | |
| </h3> | |
| <p style="color: #666; font-size: 0.95rem; line-height: 1.6; display:flex; text-align: center;"> | |
| Track performance by comparing answers with standard rubrics. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Action Buttons | |
| st.markdown("<div style='height: 2rem'></div>", unsafe_allow_html=True) | |
| btn_col1, btn_col2, btn_col3 = st.columns(3, gap="large") | |
| with btn_col1: | |
| if st.button("Try Question Generator →", key="generator", | |
| help="Create customized question papers using AI"): | |
| st.switch_page("pages/question_paper.py") | |
| with btn_col2: | |
| if st.button("Analyze Papers Now →", key="analyzer", | |
| help="Get detailed paper quality analysis"): | |
| st.switch_page("pages/judge_paper.py") | |
| with btn_col3: | |
| if st.button("View Analytics →", key="analytics", | |
| help="Explore learning analytics dashboard"): | |
| st.switch_page("pages/learning_analytics.py") | |
| # Footer | |
| st.markdown(""" | |
| <div class='footer'> | |
| <div style='text-align: center;'> | |
| <h3 style='color: white; margin-bottom: 1rem;'>🌐 Bloomsphere Ecosystem</h3> | |
| <p style='color: var(--light); margin-bottom: 0.5rem;'>© 2025 Bloomsphere</p> | |
| <small style='color: var(--accent);'>Cultivating Growth Through Cognitive Science</small> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) |