Update app.py

app.py

@@ -1,9 +1,60 @@
 import streamlit as st
+import requests
 
-# Title of the App
-st.title("Temperature Converter")
+# Title of the App with a background image and better UI
+st.set_page_config(page_title="Temperature Converter", page_icon="🌡️", layout="wide")
 
-# Function to convert temperature
+# 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':
@@ -22,15 +73,23 @@ def convert_temperature(value, from_unit, to_unit):
             return (value - 273.15) * 9/5 + 32
     return value
 
-# Input fields for the app
-st.header("Temperature Conversion")
+# 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")
 
-# Taking input from the user
-value = st.number_input("Enter the temperature value:", value=0.0)
-from_unit = st.selectbox("Select the unit to convert from", ['Celsius', 'Fahrenheit', 'Kelvin'])
-to_unit = st.selectbox("Select the unit to convert to", ['Celsius', 'Fahrenheit', 'Kelvin'])
+# 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")
 
-# Perform conversion and display result
-if st.button("Convert"):
+# 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.success(f"{value} {from_unit} is equal to {result} {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)
+