| import streamlit as st |
| from PIL import Image |
| import base64 |
| import os |
|
|
| |
| def load_css(file_name: str): |
| try: |
| with open(file_name, "r", encoding="utf-8") as f: |
| st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True) |
| except FileNotFoundError: |
| st.warning("⚠️ Stylesheet not found. Please ensure 'assets/styles.css' exists.") |
|
|
| @st.cache_data |
| def get_base64_img(image_path): |
| if not os.path.exists(image_path): |
| return "" |
| with open(image_path, "rb") as f: |
| return base64.b64encode(f.read()).decode() |
|
|
| logo_base64 = get_base64_img("assets/logo.png") |
| banner_base64 = get_base64_img("assets/welcome-banner.png") |
|
|
| def welcomeui(): |
| |
| st.markdown(f""" |
| <style> |
| body {{ |
| font-family: 'Segoe UI', sans-serif; |
| background: #f9f9fb; |
| }} |
| |
| .hero {{ |
| position: relative; |
| padding: 4rem 2rem; |
| text-align: center; |
| background: linear-gradient(to right, #8EC5FC, #E0C3FC); |
| color: white; |
| }} |
| |
| .hero::before {{ |
| content: ""; |
| background-image: url("data:image/png;base64,{banner_base64}"); |
| position: absolute; |
| opacity: 0.1; |
| inset: 0; |
| background-size: cover; |
| background-position: center; |
| }} |
| |
| .badge {{ |
| display: inline-block; |
| padding: 0.5rem 1rem; |
| background: white; |
| color: #333; |
| margin: 0.25rem; |
| border-radius: 10px; |
| font-weight: 600; |
| box-shadow: 2px 2px 8px rgba(0,0,0,0.1); |
| transition: all 0.3s ease; |
| }} |
| |
| .badge:hover {{ |
| background-color: #f0f0ff; |
| transform: scale(1.05); |
| box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2); |
| cursor: pointer; |
| }} |
| |
| .card {{ |
| background: white; |
| border-radius: 12px; |
| padding: 2rem; |
| margin-bottom: 2rem; |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| text-align: center; |
| transition: all 0.3s ease; |
| }} |
| |
| .card:hover {{ |
| transform: scale(1.02); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); |
| cursor: default; |
| }} |
| |
| .card-icon {{ |
| font-size: 2rem; |
| margin-bottom: 1rem; |
| }} |
| </style> |
| """, unsafe_allow_html=True) |
|
|
| |
| st.markdown(f""" |
| <div class="hero"> |
| <img src="data:image/png;base64,{logo_base64}" width="120" style="margin-bottom:1rem;" /> |
| <h1>Welcome to $martKid 💖</h1> |
| <p style="font-size: 1.2rem; max-width: 700px; margin: auto;"> |
| The fun and engaging platform that makes financial literacy accessible for students and easy to teach! ✨🌟 |
| </p> |
| <div style="margin-top:2rem;"> |
| <div class="badge">❤️ Made with love for young learners</div> |
| <div class="badge">👨🏫 Perfect for classrooms and individuals</div> |
| <div class="badge">📚 Curriculum-aligned content</div> |
| </div> |
| </div> |
| """, unsafe_allow_html=True) |
|
|
| |
| st.header("✨ What is $mart Kids App?") |
| st.write("FinanceLearn is an interactive educational platform designed to teach financial literacy through fun, engaging activities. Perfect for both classroom learning and individual exploration! ✨") |
|
|
| |
| st.markdown(""" |
| <div class="card"> |
| <div class="card-icon">🎬</div> |
| <h3>See How It Works! 🌈</h3> |
| <div style="padding: 2rem; background: #f1f1f1; border-radius: 10px;"> |
| <div class="card-icon">▶️</div> |
| <p><strong>Demo Video Coming Soon! 🎥✨</strong></p> |
| <p>Watch students learn and teachers teach with FinanceLearn</p> |
| </div> |
| </div> |
| """, unsafe_allow_html=True) |
|
|
| |
| st.subheader("🚀 Features") |
| col1, col2, col3, col4 = st.columns(4) |
|
|
| features = [ |
| ("📖", "Lessons", "Engaging content that makes financial literacy fun and accessible for all ages!"), |
| ("🎮", "Games", "Learn through play with our collection of money management games and challenges!"), |
| ("🏆", "Progress Tracking", "Monitor learning progress with quizzes, achievements, and detailed analytics!"), |
| ("🤖", "AI Assistant", "Get instant help and personalized guidance from our friendly chatbot!") |
| ] |
|
|
| for col, (icon, title, desc) in zip([col1, col2, col3, col4], features): |
| with col: |
| st.markdown(f""" |
| <div class="card"> |
| <div class="card-icon">{icon}</div> |
| <h4>{title}</h4> |
| <p style="font-size:0.9rem;">{desc}</p> |
| </div> |
| """, unsafe_allow_html=True) |
|
|
| |
| st.subheader("🎓 Get Started") |
| left, right = st.columns(2) |
|
|
| with left: |
| st.markdown(""" |
| <div class="card" style="background: linear-gradient(to right, #D3CCE3, #E9E4F0); color: #333;"> |
| <div class="card-icon">👦👧</div> |
| <h3>For Students</h3> |
| <p>Start your financial learning journey with games, lessons, and fun challenges!</p> |
| </div> |
| """, unsafe_allow_html=True) |
| if st.button("🚀 Start Learning!"): |
| st.session_state.current_page = "Student Dashboard" |
| st.rerun() |
|
|
| with right: |
| st.markdown(""" |
| <div class="card" style="background: linear-gradient(to right, #30E8BF, #FF8235); color: #fff;"> |
| <div class="card-icon">👩🏫</div> |
| <h3>For Teachers</h3> |
| <p>Manage your classroom, track progress, and engage your students!</p> |
| </div> |
| """, unsafe_allow_html=True) |
| if st.button("📊 Teacher Dashboard"): |
| st.session_state.current_page = "Teacher Dashboard" |
| st.rerun() |
|
|
| def show_page(): |
| load_css(os.path.join("assets", "styles.css")) |
|
|
|
|
| |
| if "user" in st.session_state and st.session_state.user: |
| st.success(f"Welcome back, {st.session_state.user['name']}! ✅") |
| else: |
| welcomeui() |
