import streamlit as st
import pandas as pd
import numpy as np

# Custom CSS for styling
custom_css = """
<style>
    html, body, [data-testid="stAppViewContainer"] {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.6), 
            rgba(0, 0, 0, 0.6)
        ), 
        url("https://www.istockphoto.com/photo/tech-or-space-background-abstract-3d-illustration-gm1367865109-437999705?utm_source=pixabay&utm_medium=affiliate&utm_campaign=SRP_photo_sponsored&utm_content=https%3A%2F%2Fpixabay.com%2Fphotos%2Fsearch%2Fbackground%2520datascience%2F&utm_term=background+datascience.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        color: white;  /* Ensures all text is readable */
    }
    h2, h3 {
        color: #FFD700; /* Gold color for headings */
    }
    p {
        color: #FFFFFF; /* White text for paragraphs */
    }
    a {
        color: #FFD700; /* Gold color for links */
        text-decoration: none;
        font-weight: bold;
    }
    a:hover {
        text-decoration: underline;
    }
</style>
"""

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

# Content
st.markdown("<h2 style='text-align: left; color: Black;'>📈What is CSV </h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "A CSV (Comma-Separated Values) file is a simple file format used to store tabular data, such as a spreadsheet or database. Each row in the file corresponds to a record, and each column is separated by a delimiter, typically a comma (,). CSV files are widely used because they are easy to create, parse, and manipulate."
    "</p>", 
    unsafe_allow_html=True
)

st.markdown("<h2 style='text-align: left; color: Black;'>📈How to read CSV files</h2>", unsafe_allow_html=True)
st.markdown(
    "<p style='font-size: 16px; color: White; font-style: italic;'>"
    "CSV files can be read in various programming languages pandas in python, and Microsoft Excel application."
    "</p>", 
    unsafe_allow_html=True
)

# Adding the Jupyter Notebook links
colab_link = "https://colab.research.google.com/drive/1Q8YudbojYI_m1ObYII4UYh9MGLyS42QT?usp=sharing"
st.markdown(
    f"<a href='{colab_link}' target='_blank' style='font-size: 16px;'>Open Colab Notebook</a>", 
    unsafe_allow_html=True
)