# app.py
import streamlit as st

st.set_page_config(page_title="Temperature Converter", page_icon=":thermometer:", layout="wide")

# Custom CSS for styling
st.markdown(
    """
    <style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
    }
    .converter-container {
        border: 1px solid #ddd;
        padding: 30px; /* Increased padding */
        border-radius: 10px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
        background-color: white;
        max-width: 700px; /* Increased container width */
        margin: 20px auto; /* Added margin top/bottom */
    }
    .input-group {
        margin-bottom: 20px; /* Increased margin */
    }
    .input-group label {
        font-weight: bold;
        margin-bottom: 8px;
    }
    .stButton>button {
        background-color: #007bff;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
    }
    .stButton>button:hover {
        background-color: #0056b3;
    }
    .result-area {
        margin-top: 25px; /* Increased margin */
        padding: 18px;  /* Increased padding */
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
        font-size: 1.2em;
        font-weight: bold;
        text-align: center; /* Center the result */
    }
    .quote {
        font-style: italic;
        color: #777;
        margin-top: 20px;
        text-align: center;
    }
    .image-container {
        text-align: center; /* Center the image */
        margin-bottom: 20px;
    }
    </style>
    """,
    unsafe_allow_html=True,
)

st.title("Temperature Converter")

with st.container() as converter_container:

    # Image (replace with your image URL or upload)
    st.markdown("<div class='image-container'><img src='data:image/png;base64,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' width='200'></div>", unsafe_allow_html=True)


    col1, col2 = st.columns([1, 1])

    with col1:
        st.subheader("Input")
        temperature = st.number_input("Temperature", value=0.0)
        unit_from = st.selectbox("From", ["Celsius", "Fahrenheit", "Kelvin"])

    with col2:
        st.subheader("Output")
        unit_to = st.selectbox("To", ["Celsius", "Fahrenheit", "Kelvin"])

    if st.button("Convert"):
        # ... (Conversion logic remains the same)
        if unit_from == unit_to:
            result = temperature
        elif unit_from == "Celsius" and unit_to == "Fahrenheit":
            result = (temperature * 9/5) + 32
        elif unit_from == "Celsius" and unit_to == "Kelvin":
            result = temperature + 273.15
        elif unit_from == "Fahrenheit" and unit_to == "Celsius":
            result = (temperature - 32) * 5/9
        elif unit_from == "Fahrenheit" and unit_to == "Kelvin":
            result = (temperature - 32) * 5/9 + 273.15
        elif unit_from == "Kelvin" and unit_to == "Celsius":
            result = temperature - 273.15
        elif unit_from == "Kelvin" and unit_to == "Fahrenheit":
            result = (temperature - 273.15) * 9/5 + 32

        st.markdown(f"<div class='result-area'>Result: {result:.2f} {unit_to}</div>", unsafe_allow_html=True)


    # Quote
    st.markdown("<p class='quote'>\"The only way to do great work is to love what you do.\" - Steve Jobs</p>", unsafe_allow_html=True)

st.markdown("---")
st.write("Made with Streamlit")