import streamlit as st
import pandas as pd
st.markdown("""
    <style>
    /* Set a soft background color */
    body {
        background-color: #eef2f7;
    }
    /* 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: #17a2b8;
    }
    /* 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.latex(r'''
\textbf{\Huge Levels of Measurement} \\[15pt]
\text{\huge \(\downarrow\)} \\[10pt]
\begin{array}{l}
\textbf{\Huge Measurement Levels} \\
\quad \text{\huge \(\Downarrow\)} \\[10pt]

\quad \textbf{\underline{1. \Large Nominal Level}} \\
\quad \quad \text{\huge \(\downarrow\)} \\[5pt]
\quad \quad \textbf{Categories} \quad \text{\small (e.g., Gender, Color)} \\[10pt]
\quad \text{\huge \(\Downarrow\)} \\[10pt]

\quad \textbf{\underline{2. \Large Ordinal Level}} \\
\quad \quad \text{\huge \(\downarrow\)} \\[5pt]
\quad \quad \textbf{Rank Order} \quad \text{\small (e.g., Customer Satisfaction, Rankings)} \\[10pt]
\quad \text{\huge \(\Downarrow\)} \\[10pt]

\quad \textbf{\underline{3. \Large Interval Level}} \\
\quad \quad \text{\huge \(\downarrow\)} \\[5pt]
\quad \quad \textbf{Equal Intervals} \quad \text{\small (e.g., Temperature, IQ Scores)} \\[10pt]
\quad \text{\huge \(\Downarrow\)} \\[10pt]

\quad \textbf{\underline{4. \Large Ratio Level}} \\
\quad \quad \text{\huge \(\downarrow\)} \\[5pt]
\quad \quad \textbf{Absolute Zero} \quad \text{\small (e.g., Height, Weight, Age)} \\[5pt]
\end{array}
''')
st.subheader("Nominal Level")
st.markdown("""The **nominal level** of measurement categorizes data without any order or ranking, such as gender or colors.
""",unsafe_allow_html=True)
st.markdown("""
For **nominal data**, only **equality operators** (e.g., `=`, `!=`) can be used. 
This is because nominal data categorizes items without any inherent order or numerical value, 
so you can only check if two values are the same or different.
""",unsafe_allow_html=True)
st.subheader("Ordinal Level")
st.markdown("""
**Ordinal level** represents categories with a meaningful order, but the intervals between values are not consistent or meaningful.
""",unsafe_allow_html=True)
st.markdown("""
**Ordinal data** supports the use of comparison operators (e.g., greater than, less than) to determine the relative ranking or order of categories.
""",unsafe_allow_html=True)
st.subheader("Interval Level")
st.markdown("""
**Interval level** data has ordered categories with equal intervals between values, but lacks a true zero point (e.g., temperature in Celsius).
""",unsafe_allow_html=True)
st.markdown("""
**Interval data** supports arithmetic operators (e.g., addition, subtraction) and comparison operators (e.g., greater than, less than) since it has equal intervals between values but no true zero point.
""",unsafe_allow_html=True)
st.subheader("Ratio Level")
st.markdown("""
**Ratio level** data has ordered categories with equal intervals and a true zero point, allowing for meaningful ratios between values (e.g., height, weight).
""",unsafe_allow_html=True)

st.markdown("""
**Ratio data** supports all arithmetic operators (e.g., addition, subtraction, multiplication, division) and comparison operators (e.g., greater than, less than) due to its true zero point and meaningful ratios.
""",unsafe_allow_html=True)