Update app.py

app.py

@@ -4,51 +4,66 @@ from emails_utils import send_otp_email
 
 st.set_page_config(page_title="FitPlan AI", layout="centered")
 
-# ------------------ CUSTOM CSS ------------------
+# ------------------ CSS DESIGN ------------------
 
 st.markdown("""
 <style>
 
 .stApp{
-background: linear-gradient(135deg,#0f172a,#020617);
-color:white;
+background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85)),
+url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48");
+background-size: cover;
+background-position: center;
+background-attachment: fixed;
 }
 
 .login-card{
-background: rgba(0,0,0,0.65);
+background: rgba(255,255,255,0.08);
+backdrop-filter: blur(10px);
 padding:40px;
 border-radius:20px;
-width:400px;
+width:420px;
 margin:auto;
-box-shadow:0 10px 30px rgba(0,0,0,0.6);
+margin-top:120px;
+box-shadow:0 10px 35px rgba(0,0,0,0.6);
 }
 
 .title{
 text-align:center;
 font-size:34px;
 font-weight:700;
+color:white;
+margin-bottom:25px;
+}
+
+.subtitle{
+text-align:center;
+color:#cbd5f5;
 margin-bottom:25px;
 }
 
+div[data-baseweb="input"]{
+background:#0f172a;
+border-radius:10px;
+}
+
 .stTextInput input{
-background:#111827;
 color:white;
-border-radius:10px;
 }
 
 .stButton>button{
 width:100%;
-background:linear-gradient(90deg,#2563eb,#6366f1);
-color:white;
+height:48px;
 border-radius:12px;
-font-weight:bold;
-height:45px;
+border:none;
+font-size:16px;
+font-weight:600;
+color:white;
+background:linear-gradient(90deg,#3b82f6,#6366f1);
 }
 
-.otp-box{
-text-align:center;
-letter-spacing:10px;
-font-size:20px;
+.stButton>button:hover{
+background:linear-gradient(90deg,#2563eb,#4f46e5);
 }
 
 </style>
@@ -62,20 +77,20 @@ if "logged_in" not in st.session_state:
 if "otp" not in st.session_state:
     st.session_state.otp = None
 
-# ------------------ LOGIN SCREEN ------------------
+# ------------------ LOGIN PAGE ------------------
 
 if not st.session_state.logged_in:
 
     st.markdown('<div class="login-card">', unsafe_allow_html=True)
 
-    st.markdown('<div class="title">🔐 Login To Your Account</div>', unsafe_allow_html=True)
+    st.markdown('<div class="title">💪 FitPlan AI</div>', unsafe_allow_html=True)
+    st.markdown('<div class="subtitle">Login to your account</div>', unsafe_allow_html=True)
 
-    email = st.text_input("Email")
+    email = st.text_input("📧 Enter Email")
 
     if st.button("Send OTP"):
 
         if email:
-
             otp = generate_otp()
             st.session_state.otp = otp
 
@@ -84,9 +99,9 @@ if not st.session_state.logged_in:
             st.success("OTP sent to your email")
 
         else:
-            st.warning("Enter email first")
+            st.warning("Please enter email")
 
-    user_otp = st.text_input("Enter OTP", max_chars=6)
+    user_otp = st.text_input("🔐 Enter OTP")
 
     if st.button("Verify OTP"):
 
@@ -97,7 +112,7 @@ if not st.session_state.logged_in:
             st.session_state.logged_in = True
             st.session_state.token = token
 
-            st.success("Login Successful")
+            st.success("Login Successful 🎉")
             st.rerun()
 
         else:
@@ -110,5 +125,4 @@ if not st.session_state.logged_in:
 # ------------------ AFTER LOGIN ------------------
 
 st.title("🏋️ AI Personalized 5-Day Workout Planner")
-
-st.success("Login successful! Now generate your workout plan.")
+st.success("You are logged in successfully! Now generate your workout plan.")