pages/0_Problem Statement.py

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

st.markdown("<h1 style='text-align:center; color:#00FFFF;'>Problem Statement</h1>",unsafe_allow_html=True)

# CSS styles
st.markdown(
    """
    <style>
    body {
        background-color: black; /* Set background color to black */
    }
    .header {
        color: #FFD700; /* Gold for the header */
        font-size: 48px; /* Larger font size for the header */
        font-weight: bold;
        text-align: center; /* Center-align the header */
    }
    .subheader {
        color: #D3D3D3; /* Light Gray for the subheader */
        font-size: 32px; /* Slightly smaller font size for the subheader */
        font-weight: normal;
        text-align: center; /* Center-align the subheader */
    }
    </style>
    """,
    unsafe_allow_html=True,
)



# Title of the Streamlit app
st.header("Predicting Agoda Room Categories Using Machine Learning")


# Problem statement section
st.subheader("Problem Statement")
st.write("Here, describe the problem statement and the objectives of the project.")
st.markdown("""
**Title:** Predicting Agoda Room Categories Using Machine Learning

**Context:**  
Agoda, a leading online travel booking platform, offers a variety of accommodation options. Each room is categorized based on various features like customer ratings, reviews, cashback offers, discounts, state, and price. Accurately predicting the room category can enhance user experience by recommending relevant options and improving operational efficiency.

**Problem Statement:**  
The goal is to build a predictive model that can classify room listings into predefined categories (e.g., budget, standard, premium, luxury) using the provided features. The challenge lies in choosing the best machine learning model and its hyperparameters to minimize classification error, particularly focusing on log-loss as the evaluation metric.
""")

st.markdown("![Problem_Statement-768x432.jpg](https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/4WmVeJ5lMh1PoSlCYWKp9.jpeg)")
# Define the URL of the background image (use your own image URL)
background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/vulm4WwHmmA14tsVXYaTM.jpeg"

# Apply custom CSS for the background image and overlay
st.markdown(
    f"""
    <style>
        .stApp {{
            background-image: url("{background_image_url}");
            background-size: auto;
            background-position: repeat;
            height: 100vh;
        }}
        
        /* Semi-transparent overlay */
        .stApp::before {{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);  /* Adjust transparency here (0.4 for 40% transparency) */
            z-index: -1;
        }}

         /* Styling the content to ensure text visibility */
        .stMarkdown {{
            color: white;  /* White text to ensure visibility */
            font-size: 30px;  /* Adjust font size for better readability */
        }}
    </style>
    """, 
    unsafe_allow_html=True
) 
st.markdown(
    """
    <style>
    .custom-button {
        display: inline-block;
        padding: 5px 10px;
        font-size: 14px;
        color: #ffffff;
        background-color: #4CAF50;
        border: none;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.3s ease, transform 0.2s ease;
        cursor: pointer;
    }
    .custom-button:hover {
        background-color: #45a049;
        transform: scale(1.05);
    }
    .button-container {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    </style>
    """,
    unsafe_allow_html=True,
)


st.write("Here, describe the problem statement and the objectives of the project.")

# Navigation Buttons
st.markdown(
    """
    <div class="button-container">
        <a href="pages/1_Hotel_Data" target="_self" class="custom-button">Next ⏭️</a>
    </div>
    """,
    unsafe_allow_html=True,
)