import streamlit as st
import pandas as pd
st.markdown("""
    <style>
    /* Set a soft background color */
    body {
        background-color: #070109;
    }
    /* Style for main title */
    h1 {
        color: #00FFFF;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        text-align: center;
        margin-bottom: 25px;
    }
    /* Style for headers */
    h2 {
        color: #FFFACD;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-top: 30px;
    }
    
    /* Style for subheaders */
     h3 {
        color: #ba95b0;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        margin-top: 20px;
    }
    .custom-subheader {
        color: #00FFFF;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        margin-bottom: 15px;
    }
    /* Paragraph styling */
    p {
        font-family: 'Georgia', serif;
        line-height: 1.8;
        color: #FFFFFF; /* Darker text color for better visibility */
        margin-bottom: 20px;
    }
    /* List styling with checkmark bullets */
    .icon-bullet {
        list-style-type: none;
        padding-left: 20px;
    }
    .icon-bullet li {
        font-family: 'Georgia', serif;
        font-size: 1.1em;
        margin-bottom: 10px;
        color: #FFFFF0; /* Darker text color for better visibility */
    }
    .icon-bullet li::before {
        content: "✔️";
        padding-right: 10px;
        color: #b3b3ff;
    }
    /* Sidebar styling */
    .sidebar .sidebar-content {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 15px;
    }
    .sidebar h2 {
        color: #495057;
    }
     /* Mobile specific styles */
    @media only screen and (max-width: 600px) {
        .stApp {
            background-color: #070109;
        }
        h1, h2 {
            font-size: 18px;  /* Adjust font size for mobile devices */
        }
    }
    </style>
    """, unsafe_allow_html=True)
st.title("DATA")
st.header("What does the term data refers to?")
st.subheader("Data")
st.markdown("""
    Data refers to a collection of information gathered from various sources. Here are a few examples:
""", unsafe_allow_html=True)
st.markdown("""
<ul class="icon-bullet">
<li>Images</li>
<li>Text</li>
<li>Videos</li>
<li>Audio recordings</li>
</ul>
""",unsafe_allow_html=True)
st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/qpmLGi47ucDCWYEi8eZhE.png",caption="An Example of Data",width=400)
st.header("Data Classification")
st.subheader("Structured Data")
st.markdown("""
    Structured data is organized and formatted, making it easy to search, analyze, and store in databases. Common examples include:
    <ul class="icon-bullet">
        <li>Excel Documents</li>
        <li>SQL Databases</li>
    </ul>
""", unsafe_allow_html=True)
st.image('https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/dSbyOXaQ6N_Kg2TLxgEyt.png', width=400)
st.subheader("Unstructured Data")
st.markdown("""
    Unstructured data doesn't follow a specific format and is often difficult to organize. Examples include:
    <ul class="icon-bullet">
        <li>Images</li>
        <li>Videos</li>
        <li>Text documents</li>
        <li>Social Media Feeds</li>
        <li>Audio</li>
    </ul>
""", unsafe_allow_html=True)

st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/xhaNBRanDaj8esumqo9hl.png", width=400)
st.subheader("Semi-Structured Data")
st.markdown("""
    Semi-structured data contains elements of both structured and unstructured data. Examples include:
    <ul class="icon-bullet">
        <li>CSV Files</li>
        <li>JSON Files</li>
        <li>Emails</li>
        <li>HTML Documents</li>
        <li>XML</li>
    </ul>
""", unsafe_allow_html=True)

st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/Nupc6BePInRVo9gJwLfWH.png", width=400)