import streamlit as st

# Inject custom CSS for background and animations
st.markdown(
    f"""
    <style>
    /* General background with gradient and image overlay */
    html, body, [data-testid="stAppViewContainer"] {{
        background-image: 
            linear-gradient(
                to bottom right, 
                rgba(135, 206, 250, 0.5),  /* Light Sky Blue */
                rgba(255, 223, 186, 0.5),  /* Soft Peach */
                rgba(192, 192, 192, 0.5),  /* Bright Silver */
                rgba(169, 169, 169, 0.5),  /* Gray */
                rgba(240, 248, 255, 0.5),  /* Alice Blue */
                rgba(173, 216, 230, 0.5)   /* Light Blue */
            ),
            url("https://huggingface.co/spaces/tahirsher/wellbeing_GenAI/blob/main/1.png");
        background-size: cover;
        background-blend-mode: overlay;
        font-family: 'Arial', sans-serif;
    }}
    /* Header slide-right animation */
    @keyframes slide-right {{
        0% {{
            transform: translateX(-100%); /* Start off-screen to the left */
        }}
        100% {{
            transform: translateX(0); /* End at the normal position */
        }}
    }}
    /* Header slide-left animation */
    @keyframes slide-left {{
        0% {{
            transform: translateX(100%); /* Start off-screen to the right */
        }}
        100% {{
            transform: translateX(0); /* End at the normal position */
        }}
    }}
    /* Header slide-right animation for the title */
    .header-slide-right {{
        display: inline-block;
        animation: slide-right 2s ease-out;
    }}
    /* Subtitle slide-left animation */
    .header_description {{
        display: inline-block;
        animation: slide-left 2s ease-out;
    }}
    /* Button styles */
    .stButton button {{
        background-color: #333333;
        color: white;
        border: 2px solid black;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }}
    .stButton button:hover {{
        background-color: #555555;
    }}
    .stSelectbox select {{
        background-color: #333333;
        color: white;
        border: 2px solid black;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }}
    .stSelectbox select:hover {{
        background-color: #555555;
    }}
    </style>
    """,
    unsafe_allow_html=True
)

# Streamlit UI elements
st.title("Word Cloud Application", anchor=None)
st.markdown(
    '<div class="header-slide-right">Welcome to the Word Cloud Application</div>',
    unsafe_allow_html=True,
)
st.markdown(
    '<div class="header_description">This app provides a beautiful interface to display word clouds.</div>',
    unsafe_allow_html=True,
)

# Add some interactivity
if st.button("Click Me"):
    st.write("You clicked the button!")

# Add a select box
option = st.selectbox(
    "Choose an option:",
    ["Option 1", "Option 2", "Option 3"]
)

st.write(f"You selected: {option}")