import streamlit as st

# -----------------------------
# PAGE CONFIG
# -----------------------------
st.set_page_config(
    page_title="Temperature Converter",
    page_icon="🌡️",
    layout="centered"
)
# -----------------------------
# NEON + ANIMATED UI (ONLY ADDITION)
# -----------------------------
st.markdown("""
<style>

/* ---------------- BACKGROUND ---------------- */
.stApp {
    background: linear-gradient(-45deg, #0f172a, #1e293b, #0b1220, #1e3a8a);
    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;
    color: white;
    text-align: center;   /* ✅ CENTER EVERYTHING */
}

@keyframes gradientMove {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/* ---------------- TITLE ---------------- */
h1 {
    text-align: center;
    color: white;
    text-shadow:
        0 0 10px #38bdf8,
        0 0 20px #0ea5e9,
        0 0 40px #3b82f6;
}

/* ---------------- INPUT BOXES ---------------- */
div[data-testid="stNumberInput"],
div[data-testid="stRadio"] {
    background: rgba(255,255,255,0.06);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(59,130,246,0.25);
}

/* ---------------- BUTTON ---------------- */
.stButton>button {
    width: 100%;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    color: white;
    border-radius: 12px;
    height: 3em;
    font-size: 16px;
    border: none;
    box-shadow: 0 0 15px rgba(59,130,246,0.6);
    transition: 0.3s;
}

.stButton>button:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(59,130,246,0.9);
}

/* ---------------- SUCCESS / OUTPUT BOX ---------------- */
div[data-testid="stSuccess"] {
    background: rgba(0, 255, 120, 0.08);   /* light green glow */
    border: 2px solid white;               /* white border */
    border-radius: 15px;
    padding: 20px;
    color: #00ff99 !important;             /* GREEN TEXT */
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(255,255,255,0.6);
    text-align: center;
}

/* Make success text green */
div[data-testid="stSuccess"] * {
    color: #00ff99 !important;
}

</style>
""", unsafe_allow_html=True)

# -----------------------------
# YOUR ORIGINAL CODE (UNCHANGED)
# -----------------------------

# Title and Description
st.title("Temperature Conversion App")
st.markdown("Convert temperatures between Celsius, Fahrenheit, and Kelvin.")

# Input Temperature
temp_input = st.number_input("Enter the temperature to convert:", format="%.2f")

# Conversion Option
conversion_type = st.radio(
    "Select conversion type:",
    (
        "Celsius to Fahrenheit",
        "Fahrenheit to Celsius",
        "Celsius to Kelvin",
        "Kelvin to Celsius",
        "Fahrenheit to Kelvin",
        "Kelvin to Fahrenheit",
    ),
)

# Conversion Logic
if conversion_type == "Celsius to Fahrenheit":
    converted_temp = (temp_input * 9/5) + 32
    st.write(f"{temp_input:.2f}°C is equal to {converted_temp:.2f}°F.")
elif conversion_type == "Fahrenheit to Celsius":
    converted_temp = (temp_input - 32) * 5/9
    st.write(f"{temp_input:.2f}°F is equal to {converted_temp:.2f}°C.")
elif conversion_type == "Celsius to Kelvin":
    converted_temp = temp_input + 273.15
    st.write(f"{temp_input:.2f}°C is equal to {converted_temp:.2f} K.")
elif conversion_type == "Kelvin to Celsius":
    converted_temp = temp_input - 273.15
    st.write(f"{temp_input:.2f} K is equal to {converted_temp:.2f}°C.")
elif conversion_type == "Fahrenheit to Kelvin":
    converted_temp = (temp_input - 32) * 5/9 + 273.15
    st.write(f"{temp_input:.2f}°F is equal to {converted_temp:.2f} K.")
elif conversion_type == "Kelvin to Fahrenheit":
    converted_temp = (temp_input - 273.15) * 9/5 + 32
    st.write(f"{temp_input:.2f} K is equal to {converted_temp:.2f}°F.")