import streamlit as st
import requests

# Title of the App with a background image and better UI
st.set_page_config(page_title="Temperature Converter", page_icon="🌡️", layout="wide")

# Custom CSS for improved UI
st.markdown("""
    <style>
        .main {
            background-color: #F0F8FF;
        }
        .title {
            color: #0044cc;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
        }
        .input-field {
            background-color: #ffffff;
            border: 2px solid #0044cc;
            border-radius: 8px;
            padding: 10px;
            font-size: 18px;
        }
        .convert-btn {
            background-color: #0044cc;
            color: white;
            font-size: 18px;
            padding: 10px 20px;
            border-radius: 5px;
        }
        .result-text {
            font-size: 22px;
            font-weight: bold;
            color: #2e8b57;
            text-align: center;
        }
        .footer {
            text-align: center;
            margin-top: 20px;
            color: #888888;
            font-size: 14px;
        }
    </style>
""", unsafe_allow_html=True)

# Display the title with temperature-themed animation
st.markdown('<div class="title">Temperature Converter App 🌡️</div>', unsafe_allow_html=True)

# 3D Animated Visualization - Embedding a rotating globe with temperature visuals
st.markdown("""
    <h3 style="text-align:center;">Temperature across the globe 🌍</h3>
    <iframe src="https://www.meteomatics.com/en/weather-forecast-3d-globe/" width="100%" height="500px"></iframe>
""", unsafe_allow_html=True)

# Conversion Logic for the temperature
def convert_temperature(value, from_unit, to_unit):
    if from_unit == 'Celsius':
        if to_unit == 'Fahrenheit':
            return (value * 9/5) + 32
        elif to_unit == 'Kelvin':
            return value + 273.15
    elif from_unit == 'Fahrenheit':
        if to_unit == 'Celsius':
            return (value - 32) * 5/9
        elif to_unit == 'Kelvin':
            return (value - 32) * 5/9 + 273.15
    elif from_unit == 'Kelvin':
        if to_unit == 'Celsius':
            return value - 273.15
        elif to_unit == 'Fahrenheit':
            return (value - 273.15) * 9/5 + 32
    return value

# Temperature input fields
st.header("Enter the values for conversion")
value = st.number_input("Enter temperature value:", value=0.0, step=0.1, format="%.1f", className="input-field")

# Selectboxes for units
from_unit = st.selectbox("Select the unit to convert from", ['Celsius', 'Fahrenheit', 'Kelvin'], key="from_unit")
to_unit = st.selectbox("Select the unit to convert to", ['Celsius', 'Fahrenheit', 'Kelvin'], key="to_unit")

# Submit button to perform conversion
if st.button("Convert", key="convert_btn", help="Click to convert the temperature", use_container_width=True):
    result = convert_temperature(value, from_unit, to_unit)
    st.markdown(f'<div class="result-text">{value} {from_unit} is equal to {result} {to_unit}</div>', unsafe_allow_html=True)

# Footer - A simple message
st.markdown("""
    <div class="footer">
        Made with ❤️ by [Your Name]. Temperature converter app.
    </div>
""", unsafe_allow_html=True)