welcome css try

phase/welcome.py

@@ -1,154 +1,162 @@
 # phase/Welcome.py
 import streamlit as st
 from PIL import Image
+import base64
+
+def get_base64_img(image_path):
+    with open(image_path, "rb") as f:
+        data = f.read()
+        return base64.b64encode(data).decode()
 
 def show_page():
     st.title("💹 Welcome to $mart Kids App")
+
+    # Display login status if user is logged in
     if st.session_state.user:
         st.success(f"Welcome back, {st.session_state.user['name']}! ✅")
-    st.write(
-        "This app helps you improve your **financial education and numeracy skills**.  \n"
-        "👉 Use the sidebar to **Signup** or **Login** to get started."
-    )
-
-# Load images
-logo = Image.open("assets/logo.png")
-banner = "assets/welcome-banner.png"  # used as CSS background
-
-# Dummy role for now (could be replaced with session state or login)
-role =  st.success(f"Welcome back, {st.session_state.user['name']}! ✅")
-
-# ---------- CSS Styling ----------
-st.markdown("""
-<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 + """");
-    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);
-}
-
-.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;
-}
-
-.card-icon {
-    font-size: 2rem;
-    margin-bottom: 1rem;
-}
-</style>
-""", unsafe_allow_html=True)
-
-# ---------- Hero Section ----------
-st.markdown(f"""
-<div class="hero">
-    <img src="data:image/png;base64,{logo}" width="120" style="margin-bottom:1rem;" />
-    <h1>Welcome to FinanceLearn! 💖</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)
-
-# ---------- What is FinanceLearn ----------
-st.header("✨ What is FinanceLearn? 🎈")
-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! ✨")
-
-# ---------- Demo Video Placeholder ----------
-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)
-
-# ---------- Platform Features ----------
-st.subheader("🚀 Features")
-col1, col2, col3, col4 = st.columns(4)
-
-features = [
-    ("📖", "Interactive Lessons", "Engaging content that makes financial literacy fun and accessible for all ages!"),
-    ("🎮", "Educational 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)
-
-# ---------- Get Started Section ----------
-st.subheader("🎓 Get Started")
-
-left, right = st.columns(2)
+    else:
+        st.write(
+            "This app helps you improve your **financial education and numeracy skills**.  \n"
+            "👉 Use the sidebar to **Signup** or **Login** to get started."
+        )
+
+    # Load logo and banner as base64
+    logo_path = "assets/logo.png"
+    banner_path = "assets/welcome-banner.png"
+    logo_base64 = get_base64_img(logo_path)
+    banner_base64 = get_base64_img(banner_path)
+
+    # ---------- CSS Styling ----------
+    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);
+    }}
+
+    .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;
+    }}
+
+    .card-icon {{
+        font-size: 2rem;
+        margin-bottom: 1rem;
+    }}
+    </style>
+    """, unsafe_allow_html=True)
 
-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>
+    # ---------- Hero Section ----------
+    st.markdown(f"""
+    <div class="hero">
+        <img src="data:image/png;base64,{logo_base64}" width="120" style="margin-bottom:1rem;" />
+        <h1>Welcome to FinanceLearn! 💖</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)
-    if st.button("🚀 Start Learning!"):
-        st.success("Redirecting to Student Dashboard...")
 
-with right:
+    # ---------- What is FinanceLearn ----------
+    st.header("✨ What is FinanceLearn? 🎈")
+    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! ✨")
+
+    # ---------- Demo Video Placeholder ----------
     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 with financial education!</p>
+    <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)
-    if st.button("📊 Teacher Dashboard"):
-        st.success("Redirecting to Teacher Dashboard...")
 
+    # ---------- Platform Features ----------
+    st.subheader("🚀 Features")
+    col1, col2, col3, col4 = st.columns(4)
+
+    features = [
+        ("📖", "Interactive Lessons", "Engaging content that makes financial literacy fun and accessible for all ages!"),
+        ("🎮", "Educational 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)
+
+    # ---------- Get Started Section ----------
+    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 with financial education!</p>
+        </div>
+        """, unsafe_allow_html=True)
+        if st.button("📊 Teacher Dashboard"):
+            st.session_state.current_page = "Teacher Dashboard"
+            st.rerun()