Pages/Homepage.py

import streamlit as st

# Custom CSS for Styling
st.markdown(
    """
    <style>
        body {
            background-color: #f4f4f4;
        }
        .main-title {
            text-align: center;
            color: #003366;
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        }
        .subtitle {
            text-align: center;
            color: #444;
            font-size: 38px;
            font-style: italic;
        }
        .content-box {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 2px 4px 10px rgba(0,0,0,0.1);
            margin: 20px;
        }
        .list-item {
            color: #003366;
            font-size: 28px;
            padding: 8px;
            transition: transform 0.2s;
        }
        .list-item:hover {
            color: #FF6F61;
            transform: scale(1.05);
        }
    </style>
    """,
    unsafe_allow_html=True
)

# Display Title
st.markdown("<h1 class='main-title'>Welcome to the Time-Wasters on Social Media Analytics</h1>", unsafe_allow_html=True)

st.write("")

# Display Subtitle
st.markdown("<h3 class='subtitle'>Select to go towards the Time-Wasters on Social Media Analytics.</h3>", unsafe_allow_html=True)

st.write("")

# Content Section
st.markdown(
    """
    <div class='content-box'>
        <h4 style='color: #333; font-size: 40px;'>What we will see ahead?</h4>
        <ol>
            <li class='list-item'> Analysis of Users and their activity over Social Media</li>
            <li class='list-item'> Engagement Levels of Users over Social Media</li>
            <li class='list-item'> Addiction Levels of Users over Social Media</li>
        </ol>
    </div>
    """, 
    unsafe_allow_html=True
)

# Optionally, you can add a background image using st.image()
# st.image("your-background-image.jpg", use_column_width=True)




# import streamlit as st

# # Font size for the title
# font_size = 60  # Can be changed to adjust size of text

# # Font size for the subtitle
# font_size_subtitle = 38  # Can be changed to adjust size of text

# # Use the fixed font size in the HTML
# st.markdown(
#     f"<h1 style='text-align: center; color: #003366; font-size: {font_size}px;'>Welcome to the Time-Wasters on Social Media Analytics Dashboard</h1>",
#     unsafe_allow_html=True
# )

# st.write("")


# # Use the fixed font size in the HTML for the subtitle
# st.markdown(
#     f"<h3 style='text-align: center; color: #666666; font-size: {font_size_subtitle}px;'>Select to go towards the Time-Wasters on Social Media Analytics Dashboard.</h3>",
#     unsafe_allow_html=True
# )

# st.write("")
# st.write("")
# st.write("")
# Add a logo to the dashboard
# col1, col2  = st.columns([0.5, 2])

# with col1:
    # st.image("image/Black And White Modern Typographic Simple social Media logo.png", width=300)1

# # with col2:
# st.write("")
# st.write("")
# st.write("")
# # st.write("")
    
# # Define the font sizes for question and answers
# font_size_question = 40  # Larger size for the question
# font_size_answers = 29    # Smaller size for the answers

# # Display the formatted text with sizes applied
# st.markdown(
#     f"""
#     <h4 style='color: #4D4D4D; font-size: {font_size_question}px;'>What we will see ahead ?</h4>
#     <ol>
#         <li style='color: #000080; font-size: {font_size_answers}px;'>Analysis of Users and their activity over Social Media</li>
#         <li style='color: #000080; font-size: {font_size_answers}px;'>Engagement Levels of Users over Social Media</li>
#         <li style='color: #000080; font-size: {font_size_answers}px;'>Addiction Levels of Users over Social Media</li>
#     </ol>
        
#     """, 
#     unsafe_allow_html=True
# )