CoderHassan's picture
Update app.py
da8f2a6 verified
Raw
History Blame Contribute Delete
3.91 kB
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.")