Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,104 +1,132 @@
 import streamlit as st
 
 # 1. Basic Configuration
-st.set_page_config(page_title="FitPlan AI", page_icon="💪")
+st.set_page_config(page_title="FitPlan AI", page_icon="💪", layout="centered")
 
-# 2. CSS with High-Priority Selectors
-# This forces the background image and ensures font visibility
+# 2. Enhanced CSS
 st.markdown("""
 <style>
     /* Full Page Background */
     [data-testid="stAppViewContainer"] {
-        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
+        background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                     url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=2070&auto=format&fit=crop");
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
     }
 
-    /* Transparent Header */
-    [data-testid="stHeader"] {
-        background: rgba(0,0,0,0);
+    /* Hide the "Press Enter to submit form" hint globally */
+    [data-testid="InputInstructions"] {
+        display: none !important;
     }
 
-    /* Making the Form readable against the dark background */
+    /* Form Container Polish */
     div[data-testid="stForm"] {
-        background-color: rgba(255, 255, 255, 0.95) !important;
-        padding: 2rem !important;
-        border-radius: 15px !important;
-        border: 2px solid #3b82f6 !important;
+        background-color: rgba(255, 255, 255, 0.98) !important;
+        padding: 3rem !important;
+        border-radius: 20px !important;
+        border: none !important;
+        box-shadow: 0 15px 35px rgba(0,0,0,0.5);
     }
 
-    /* --- FONT COLORS (FORCED VISIBILITY) --- */
-    /* Main Title White (Outside Form) */
-    .title-text {
+    /* --- FONT SIZE UPDATES --- */
+    /* Main Title (FitPlan AI) */
+    .main-title {
         color: #FFFFFF !important;
-        text-shadow: 2px 2px 4px #000000;
-        font-size: 3rem;
-        font-weight: bold;
+        font-size: 60px !important;
+        font-weight: 850 !important;
         text-align: center;
+        margin-bottom: 0px;
+        text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
+        font-family: 'Helvetica Neue', sans-serif;
     }
 
-    /* Form Labels (Dark Blue) */
-    label, p, .stMarkdown {
-        color: #1e293b !important;
-        font-weight: 600 !important;
+    /* Subtitle (Your personalized gym companion) */
+    .sub-title {
+        color: #E0E0E0 !important;
+        font-size: 24px !important;
+        text-align: center;
+        margin-top: -10px;
+        margin-bottom: 40px;
+        font-style: italic;
+        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
     }
 
-    /* Section Headers inside form (Orange) */
+    /* Form Section Headers (Orange) */
     .form-header {
         color: #f97316 !important;
-        font-weight: 800;
-        margin-bottom: 0px;
+        font-size: 22px !important;
+        font-weight: bold !important;
+        text-transform: uppercase;
+        letter-spacing: 1px;
     }
 
-    /* Force metric values to be visible */
-    [data-testid="stMetricValue"] {
-        color: #2563eb !important;
+    /* Labels for inputs */
+    label p {
+        font-size: 18px !important;
+        color: #1e293b !important;
+        font-weight: 600 !important;
+    }
+
+    /* Button Styling */
+    .stButton > button {
+        width: 100%;
+        background: linear-gradient(90deg, #f97316, #ea580c) !important;
+        color: white !important;
+        font-size: 20px !important;
+        font-weight: bold !important;
+        height: 3.5rem !important;
+        border-radius: 12px !important;
+        border: none !important;
+        margin-top: 20px;
     }
 </style>
 """, unsafe_allow_html=True)
 
 # --------------------------------------------------
-# UI Elements
+# UI Header Section
 # --------------------------------------------------
-st.markdown('<p class="title-text">💪 FitPlan AI</p>', unsafe_allow_html=True)
-st.markdown("<p style='text-align:center; color:white;'>Your personalized gym companion.</p>", unsafe_allow_html=True)
+st.markdown('<p class="main-title">💪 FitPlan AI</p>', unsafe_allow_html=True)
+st.markdown('<p class="sub-title">Your personalized gym companion</p>', unsafe_allow_html=True)
 
-with st.form("fitness_form"):
+# --------------------------------------------------
+# Fitness Profile Form
+# --------------------------------------------------
+with st.form("fitness_form", clear_on_submit=False):
     st.markdown('<p class="form-header">🧍‍♂️ 1. PERSONAL INFORMATION</p>', unsafe_allow_html=True)
     
-    name = st.text_input("Full Name *", placeholder="Enter your name")
+    name = st.text_input("Full Name *", placeholder="Enter your full name")
 
     col1, col2 = st.columns(2)
     with col1:
-        height = st.number_input("Height (cm) *", min_value=0.0, step=1.0)
+        height = st.number_input("Height (cm) *", min_value=0.0, step=1.0, value=0.0)
     with col2:
-        weight = st.number_input("Weight (kg) *", min_value=0.0, step=0.1)
+        weight = st.number_input("Weight (kg) *", min_value=0.0, step=0.1, value=0.0)
 
-    st.markdown("---")
+    st.markdown("<br>", unsafe_allow_html=True)
     st.markdown('<p class="form-header">🏋️ 2. FITNESS DETAILS</p>', unsafe_allow_html=True)
     
     goal = st.selectbox("Fitness Goal", ["Build Muscle", "Weight Loss", "Strength Gain", "Abs Building", "Flexible"])
     
     equipment = st.multiselect("Available Equipment", 
-                               ["Dumbbells", "Resistance Band", "Yoga Mat", "Kettlebell", "No Equipment"],
+                               ["Dumbbells", "Resistance Band", "Yoga Mat", "Kettlebell", "Pull-up Bar", "No Equipment"],
                                default=["No Equipment"])
     
     level = st.radio("Fitness Level", ["Beginner", "Intermediate", "Advanced"], horizontal=True)
 
+    # Submission Button
     submit = st.form_submit_button("GENERATE MY PLAN")
 
 # --------------------------------------------------
-# Calculations & Logic
+# Logic & Calculation
 # --------------------------------------------------
 if submit:
-    if not name.strip() or height <= 0 or weight <= 0:
-        st.error("🚨 Please fill in all required fields accurately.")
+    if not name.strip() or height <= 50 or weight <= 10:
+        st.error("🚨 Please provide a valid name, height, and weight.")
     else:
-        # BMI Logic
-        h_m = height / 100
-        bmi = round(weight / (h_m ** 2), 2)
+        # BMI Calculation
+        height_m = height / 100
+        bmi = round(weight / (height_m ** 2), 2)
 
         if bmi < 18.5:
             cat, color = "Underweight", "blue"
@@ -109,11 +137,14 @@ if submit:
         else:
             cat, color = "Obese", "red"
 
-        # Result Display
-        st.success(f"✅ Success! Data processed for {name}.")
+        # Results Display
+        st.balloons()
+        st.success(f"✅ Profile created for {name}")
         
-        res1, res2 = st.columns(2)
-        res1.metric("BMI Score", bmi)
-        res2.markdown(f"### Status: :{color}[{cat}]")
+        c1, c2 = st.columns(2)
+        with c1:
+            st.metric("Calculated BMI", bmi)
+        with c2:
+            st.markdown(f"### Status: :{color}[{cat}]")
         
-        st.info(f"**Goal:** {goal} | **Level:** {level}")
+        st.info(f"**Goal:** {goal} | **Experience:** {level}")