pages/introds.py

import streamlit as st

# Static background image URL
background_url = "https://cdn.pixabay.com/photo/2023/11/23/17/47/sunset-7704533_1280.jpg"

# Dynamic CSS
custom_css = f"""
<style>
    html, body, [data-testid="stAppViewContainer"] {{
        background: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url("{background_url}") no-repeat center center fixed;
        background-size: cover;
        font-family: Arial, sans-serif;
        color: #ffffff;
    }}
    h1 {{
        color: #ffffff;
        text-align: center;
        font-size: 2rem; 
        margin-top: 2px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
    }}
    .division {{
        margin: 20px auto;
        padding: 20px;
        background: rgba(255, 255, 255, 0.1); 
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }}
    .division h2 {{
        color: #ffffff;
        margin-bottom: 10px;
        font-size: 2rem; 
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    }}
    .division p, .division ul li {{
        font-size: 1.2rem; 
        line-height: 1.7; 
    }}
</style>
"""

# Inject CSS into Streamlit app
st.markdown(custom_css, unsafe_allow_html=True)

# Header section
st.markdown("<h1>Welcome to Data Science Introduction</h1>", unsafe_allow_html=True)

# Main content
st.markdown(
    """
    <div class="division">
        <h2>What is Data Science?</h2>
        <p>
            Data science combines techniques from statistics, computer science, mathematics, and domain expertise 
            to analyze and interpret data effectively. It transforms raw data into actionable insights, driving smarter 
            decisions across industries.
        </p>
        <ul>
            <li>Analyzing customer reviews to identify product sentiment</li>
            <li>Techniques Used: Natural Language Processing (NLP), sentiment analysis</li>
            <li>Optimizing delivery routes for logistics companies</li>
            <li>Techniques Used: Graph algorithms, optimization techniques</li>
        </ul>
    </div>
    <div class="division">
        <h2>Key Steps in Data Science</h2>
        <p>Data Science involves several steps, such as:</p>
        <ul>
            <li><strong>Understanding the Problem:</strong> Grasp the problem's nature and define clear objectives.</li>
            <li><strong>Data Collection:</strong> Gather relevant data from multiple sources.</li>
            <li><strong>Data Cleaning:</strong> Handle inconsistencies, missing values, and prepare data for analysis.</li>
            <li><strong>Exploratory Data Analysis (EDA):</strong> Use visualization and summary statistics to understand data.</li>
            <li><strong>Model Deployment:</strong> Implement models in a production environment for real-time decision-making.</li>
        </ul>
    </div>
    """,
    unsafe_allow_html=True
)

# Header section for Deep Learning
st.markdown("<h1>Welcome to Deep Learning</h1>", unsafe_allow_html=True)

# Main content for Deep Learning
st.markdown(
    """
    <p>
        Deep learning is an artificial intelligence (AI) method that teaches computers to process data in a way inspired by the human brain. 
        Deep learning models can recognize complex patterns in images, text, sounds, and other data to produce accurate insights and predictions. 
        You can use deep learning methods to automate tasks that typically require human intelligence, 
        such as describing images or transcribing a sound file into text.
    </p>
    """,
    unsafe_allow_html=True
)