ClimGuide/app.py at main · shiv3679/ClimGuide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import streamlit as st

# Page Config
st.set_page_config(page_title="Climate Learning Platform", page_icon="🌍", layout="wide")


from sections.home import show_home
from sections.python_basics import show_python_basics
from sections.netcdf_intro import show_netcdf_intro
from sections.visualization import show_visualization
from sections.playground import show_playground


# Custom CSS for Styling & Animations
st.markdown("""
    <style>
        /* Sidebar Styling */
        [data-testid="stSidebar"] {
            background-color: #002B5B;
        }

        /* Sidebar Titles */
        .sidebar-title {
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }

        /* Fade-in effect */
        .fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Button Styling */
        .start-button {
            background-color: #0077b6;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 8px;
            text-align: center;
            font-size: 18px;
            display: block;
            margin: auto;
            transition: 0.3s ease-in-out;
        }

        .start-button:hover {
            background-color: #0096c7;
        }

    </style>
""", unsafe_allow_html=True)

# Sidebar Navigation
st.sidebar.markdown('<p class="sidebar-title">📚 Climate Learning Chapters</p>', unsafe_allow_html=True)
chapters = {
    "🏠 Home": show_home,
    "🐍 Python Basics": show_python_basics,
    "📂 Understanding NetCDF": show_netcdf_intro,
    "📊 Visualizing Climate Data": show_visualization,
    "🛠 Playground": show_playground
}

# Sidebar Chapter Selection
selected_chapter = st.sidebar.radio("📖 Select a chapter:", list(chapters.keys()))

# Load the selected chapter
st.markdown('<div class="fade-in">', unsafe_allow_html=True)
chapters[selected_chapter]()
st.markdown('</div>', unsafe_allow_html=True)

# Footer
st.sidebar.markdown("<hr>", unsafe_allow_html=True)
st.sidebar.markdown("**Developed by Shiv Shankar Singh**", unsafe_allow_html=True)