Spaces:
Sleeping
Sleeping
| 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) | |