pages/RoadMap.py

import streamlit as st

# Custom CSS to style the page with 3D features
st.markdown("""
    <style>
    .main {
        background-color: #ffffff;
    }
    .center-image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        margin-top: 20px;
    }
    .content {
        color: #333333;
        padding: 20px;
        font-size: 18px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        background: #f8f9fa;
        margin-left: 20px;
        margin-top: 20px;
    }
    .button {
        font-size: 20px;
        margin-bottom: 20px;
        padding: 15px;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #007bff;
        color: white;
        transition: transform 0.2s, background 0.2s;
        border: none;
        width: 100%;
        text-align: left;
    }
    .button:hover {
        box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
        cursor: pointer;
        background: #0056b3;
    }
    .button:focus {
        outline: none;
        box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
        background: linear-gradient(to bottom, #003580, #002060);
    }
    </style>
    """, unsafe_allow_html=True)

# Page title
st.title("Data Analysis Roadmap")

# Center image at the top
st.image("images/data_analysis.png", use_column_width='always')

# Two-column layout
col1, col2 = st.columns([1, 2])

# Left column with the buttons
with col1:
    st.header("Topics")
    
    selection = None
    if st.button("Basic Python", key="basic_python"):
        selection = "Basic Python"
    if st.button("Intermediate Python", key="intermediate_python"):
        selection = "Intermediate Python"
    if st.button("Descriptive Statistics", key="descriptive_statistics"):
        selection = "Descriptive Statistics"
    if st.button("NumPy", key="numpy"):
        selection = "NumPy"
    if st.button("Pandas", key="pandas"):
        selection = "Pandas"
    if st.button("Matplotlib", key="matplotlib"):
        selection = "Matplotlib"
    if st.button("Seaborn", key="seaborn"):
        selection = "Seaborn"
    if st.button("Inferential Statistics", key="inferential_statistics"):
        selection = "Inferential Statistics"

# Right column with the topic description
with col2:
    if selection:
        if selection == "Basic Python":
            st.image("images/python_logo.png", width=50)
            st.markdown("""
            <div class='content'>
            <b>Basic Python:</b>
            <p>Basic Python covers the fundamental aspects of the Python programming language.</p>
            
            <b>Subtopics:</b>
            <ul>
            <li>Syntax: Understanding the basic syntax and structure of Python code.</li>
            <li>Data Types: Working with strings, lists, dictionaries, and tuples.</li>
            <li>Control Flow: Using loops, conditionals, and functions.</li>
            <li>File Handling: Reading from and writing to files.</li>
            </ul>

            <b>Example:</b>
            <p>Writing simple programs to automate repetitive tasks, such as renaming files in bulk.</p>
            </div>
            """, unsafe_allow_html=True)
            
        elif selection == "Intermediate Python":
            st.image("images/python_logo.png", width=50)
            st.markdown("""
            <div class='content'>
            <b>Intermediate Python:</b>
            <p>Intermediate Python includes more advanced features of Python programming.</p>

            <b>Subtopics:</b>
            <ul>
            <li>Modules and Packages: Importing and organizing code into modules.</li>
            <li>List Comprehensions: Creating lists in a more readable way.</li>
            <li>Error Handling: Using try, except blocks to handle errors.</li>
            <li>Classes and Objects: Understanding object-oriented programming concepts.</li>
            </ul>

            <b>Example:</b>
            <p>Building reusable code modules and handling exceptions in data processing scripts.</p>
            </div>
            """, unsafe_allow_html=True)
    
        elif selection == "Descriptive Statistics":
            st.image("images/statistics_logo.png", width=50)
            st.markdown("""
            <div class='content'>
            <b>Descriptive Statistics:</b>
            <p>Descriptive statistics summarize and describe the main features of a dataset.</p>

            <b>Subtopics:</b>
            <ul>
            <li>Central Tendency: Mean, median, mode.</li>
            <li>Dispersion: Variance, standard deviation, range.</li>
            <li>Distribution: Quartiles, percentiles, histograms.</li>
            </ul>

            <b>Example:</b>
            <p>Summarizing sales data to understand the average sales per month and the variability in sales.</p>
            </div>
            """, unsafe_allow_html=True)
            
        elif selection == "NumPy":
            st.image("images/numpy_logo.png", width=50)
            st.markdown("""
            <div class='content'>
            <b>NumPy:</b>
            <p>NumPy is a fundamental package for numerical computing in Python.</p>

            <b>Subtopics:</b>
            <ul>
            <li>Arrays: Creating and manipulating arrays.</li>
            <li>Mathematical Operations: Performing element-wise and matrix operations.</li>
            <li>Statistical Functions: Using built-in functions for analysis.</li>
            <li>Data Transformation: Reshaping and slicing arrays.</li>
            </ul>

            <b>Example:</b>
            <p>Performing fast and efficient calculations on large datasets, such as computing the sum of all elements in an array.</p>
            </div>
            """, unsafe_allow_html=True)
            
        elif selection == "Pandas":
            st.image("images/pandas_logo.png", width=100)
            st.markdown("""
            <div class='content'>
            <b>Pandas:</b>
            <p>Pandas is a powerful library for data manipulation and analysis in Python.</p>

            <b>Subtopics:</b>
            <ul>
            <li>DataFrames: Creating and manipulating DataFrames.</li>
            <li>Data Cleaning: Handling missing values and duplicates.</li>
            <li>Data Transformation: Merging, joining, and concatenating DataFrames.</li>
            <li>Data Analysis: Grouping and aggregating data.</li>
            </ul>

            <b>Example:</b>
            <p>Cleaning and analyzing sales data from different regions to find total sales per product category.</p>
            </div>
            """, unsafe_allow_html=True)
            
        elif selection == "Matplotlib":
            st.image("images/matplotlib_logo.png", width=100)
            st.markdown("""
            <div class='content'>
            <b>Matplotlib:</b>
            <p>Matplotlib is a plotting library for creating static, interactive, and animated visualizations in Python.</p>

            <b>Subtopics:</b>
            <ul>
            <li>Basic Plots: Creating line, bar, and scatter plots.</li>
            <li>Customization: Customizing plots with titles, labels, and legends.</li>
            <li>Subplots: Creating multiple plots in a single figure.</li>
            </ul>

            <b>Example:</b>
            <p>Visualizing sales trends over time with a line chart and customizing it to include titles and labels.</p>
            </div>
            """, unsafe_allow_html=True)
            
        elif selection == "Seaborn":
            st.image("images/seaborn_logo.png", width=100)
            st.markdown("""
            <div class='content'>
            <b>Seaborn:</b>
            <p>Seaborn is a data visualization library based on Matplotlib that provides a high-level interface for drawing attractive statistical graphics.</p>

            <b>Subtopics:</b>
            <ul>
            <li>Statistical Plots: Creating plots like histograms, box plots, and violin plots.</li>
            <li>Customization: Advanced customization of plots.</li>
            <li>Integration: Seamless integration with pandas DataFrames.</li>
            </ul>

            <b>Example:</b>
            <p>Creating a box plot to visualize the distribution of exam scores across different classes.</p>
            </div>
            """, unsafe_allow_html=True)
            
        elif selection == "Inferential Statistics":
            st.image("images/statistics_logo.png", width=50)
            st.markdown("""
            <div class='content'>
            <b>Inferential Statistics:</b>
            <p>Inferential statistics allow us to make predictions or inferences about a population based on a sample of data.</p>

            <b>Subtopics:</b>
            <ul>
            <li>Hypothesis Testing: Determining the validity of assumptions.</li>
            <li>Confidence Intervals: Estimating population parameters.</li>
            <li>Regression Analysis: Modeling relationships between variables.</li>
            <li>ANOVA and Chi-Square Tests: Comparing group means and categorical variables.</li>
            </ul>

            <b>Example:</b>
            <p>Using regression analysis to predict future sales based on past data trends and conducting hypothesis tests to determine if a new marketing strategy significantly impacts sales.</p>
            </div>
            """, unsafe_allow_html=True)