Update app.py

app.py

@@ -1,11 +1,67 @@
 import streamlit as st
 
-st.set_page_config(page_title="Text Case Converter", layout="centered")
+st.set_page_config(
+    page_title="Text Case Converter",
+    layout="centered",
+    page_icon="🔤"
+)
 
-st.title("🔤 Text Case Converter App")
-st.write("Convert your text into different cases instantly.")
+# ---------- Glassmorphism + Gradient UI ----------
+st.markdown("""
+<style>
+body {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+}
+.main {
+    background: transparent;
+}
+.card {
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-radius: 20px;
+    padding: 25px;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+    max-width: 720px;
+    margin: auto;
+}
+h1, p, label, h3 {
+    color: #ffffff !important;
+    text-align: center;
+}
+textarea {
+    border-radius: 14px !important;
+}
+.stButton>button {
+    width: 100%;
+    height: 45px;
+    border-radius: 12px;
+    border: none;
+    background: linear-gradient(90deg, #ff758c, #ff7eb3);
+    color: white;
+    font-weight: bold;
+    transition: 0.3s ease;
+}
+.stButton>button:hover {
+    transform: scale(1.05);
+    background: linear-gradient(90deg, #ff5f7e, #ff6fae);
+}
+.footer {
+    text-align: center;
+    color: #eee;
+    margin-top: 15px;
+    font-size: 13px;
+}
+</style>
+""", unsafe_allow_html=True)
 
-text = st.text_area("Enter your text here:", height=200)
+# ---------- UI ----------
+st.markdown("<div class='card'>", unsafe_allow_html=True)
+
+st.markdown("<h1>🔤 Text Case Converter</h1>", unsafe_allow_html=True)
+st.markdown("<p>Transform your text in one click</p>", unsafe_allow_html=True)
+
+text = st.text_area("", placeholder="Type or paste your text here...", height=180)
 
 st.markdown("### Choose Conversion")
 
@@ -13,21 +69,23 @@ col1, col2, col3 = st.columns(3)
 
 with col1:
     if st.button("UPPERCASE"):
-        st.success(text.upper())
-
+        st.session_state["out"] = text.upper()
     if st.button("lowercase"):
-        st.success(text.lower())
+        st.session_state["out"] = text.lower()
 
 with col2:
     if st.button("Title Case"):
-        st.success(text.title())
-
+        st.session_state["out"] = text.title()
     if st.button("Sentence Case"):
-        st.success(text.capitalize())
+        st.session_state["out"] = text.capitalize()
 
 with col3:
     if st.button("Toggle Case"):
-        st.success(text.swapcase())
+        st.session_state["out"] = text.swapcase()
+
+if "out" in st.session_state:
+    st.markdown("### Output")
+    st.text_area("", st.session_state["out"], height=150)
 
-st.markdown("---")
-st.caption("Made with ❤️ using Streamlit")
+st.markdown("</div>", unsafe_allow_html=True)
+st.markdown("<div class='footer'>Made with ❤️ using Streamlit</div>", unsafe_allow_html=True)