Update src/streamlit_app.py

src/streamlit_app.py

@@ -10,30 +10,69 @@ st.set_page_config(
 )
 
 # --------------------------------------------------
-# Custom Styling (HF Compatible)
+# Custom CSS (HF Compatible + Visible UI)
 # --------------------------------------------------
 st.markdown("""
 <style>
+
+/* Page background */
 .stApp {
-    background: linear-gradient(135deg, #e3f2fd, #f8fbff);
+    background-color: #f4f7fb;
 }
 
+/* Main container */
 .block-container {
-    background-color: white;
+    background-color: #ffffff;
+    padding: 2.5rem;
+    border-radius: 18px;
+    max-width: 900px;
+}
+
+/* Headings */
+h1, h2, h3 {
+    color: #0f172a !important;
+}
+
+/* Labels */
+label {
+    color: #1e293b !important;
+    font-weight: 600;
+}
+
+/* Inputs */
+input, textarea {
+    background-color: #ffffff !important;
+    color: #0f172a !important;
+    border-radius: 10px !important;
+    border: 1px solid #cbd5e1 !important;
+}
+
+/* Selectbox & Multiselect */
+div[data-baseweb="select"] {
+    background-color: #ffffff !important;
+    border-radius: 10px;
+}
+
+/* Form card */
+div[data-testid="stForm"] {
+    background-color: #f8fafc;
     padding: 2rem;
-    border-radius: 15px;
-    max-width: 850px;
+    border-radius: 14px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
 }
 
+/* Main button */
 .stButton > button {
     width: 100%;
-    height: 3em;
-    border-radius: 8px;
-    background-color: #FF4B4B;
-    color: white;
-    font-size: 16px;
+    height: 3.2em;
+    border-radius: 10px;
+    background: linear-gradient(90deg, #2563eb, #1d4ed8);
+    color: white !important;
+    font-size: 17px;
+    font-weight: 600;
     border: none;
 }
+
 </style>
 """, unsafe_allow_html=True)
 
@@ -42,37 +81,28 @@ st.markdown("""
 # --------------------------------------------------
 st.title("💪 FitPlan AI")
 st.subheader("Milestone 1: Fitness Profile & BMI Analysis")
-st.write("Fill in your details to generate your BMI profile.")
+st.write("Enter your details to calculate BMI and generate your fitness profile.")
 
 # --------------------------------------------------
 # Fitness Profile Form
 # --------------------------------------------------
 with st.form("fitness_form"):
 
-    st.header("1️⃣ Personal Information")
+    # -------- Section 1 --------
+    st.header("🧍‍♂️ 1. Personal Information")
 
     name = st.text_input("Full Name *")
 
     col1, col2 = st.columns(2)
     with col1:
-        height = st.number_input(
-            "Height (cm) *",
-            min_value=0.0,
-            step=0.1,
-            format="%.2f"
-        )
-
+        height = st.number_input("Height (cm) *", min_value=0.0, step=0.1)
     with col2:
-        weight = st.number_input(
-            "Weight (kg) *",
-            min_value=0.0,
-            step=0.1,
-            format="%.2f"
-        )
+        weight = st.number_input("Weight (kg) *", min_value=0.0, step=0.1)
 
     st.divider()
 
-    st.header("2️⃣ Fitness Details")
+    # -------- Section 2 --------
+    st.header("🏋️ 2. Fitness Details")
 
     goal = st.selectbox(
         "Fitness Goal",
@@ -93,136 +123,55 @@ with st.form("fitness_form"):
     submit = st.form_submit_button("Generate Profile")
 
 # --------------------------------------------------
-# Processing Logic
+# Processing & Output
 # --------------------------------------------------
 if submit:
 
-    # -------- Input Validation --------
+    # -------- Validation --------
     if not name.strip():
         st.error("⚠ Please enter your name.")
-    
-    elif height <= 0:
-        st.error("⚠ Height must be greater than 0 cm.")
-    
-    elif weight <= 0:
-        st.error("⚠ Weight must be greater than 0 kg.")
-    
+    elif height <= 0 or weight <= 0:
+        st.error("⚠ Height and weight must be greater than zero.")
     else:
         # -------- BMI Calculation --------
-        height_m = height / 100  # Convert cm to meters
-        bmi = weight / (height_m ** 2)
-        bmi = round(bmi, 2)
+        height_m = height / 100
+        bmi = round(weight / (height_m ** 2), 2)
 
         # -------- BMI Classification --------
         if bmi < 18.5:
             category = "Underweight"
             color = "blue"
+            progress = bmi / 18.5
         elif 18.5 <= bmi < 24.9:
             category = "Normal"
             color = "green"
+            progress = bmi / 24.9
         elif 25 <= bmi < 29.9:
             category = "Overweight"
             color = "orange"
+            progress = bmi / 29.9
         else:
             category = "Obese"
             color = "red"
+            progress = 1.0
 
-        # -------- Display Results --------
-        st.success(f"✅ Profile successfully created for {name}!")
+        # -------- Results Section --------
+        st.success(f"✅ Profile created successfully for **{name}**")
 
         colA, colB = st.columns(2)
-
         with colA:
             st.metric("Your BMI", bmi)
-
         with colB:
             st.markdown(f"**BMI Category:** :{color}[{category}]")
 
+        # -------- BMI Progress Bar --------
+        st.markdown("### 📊 BMI Progress Indicator")
+        st.progress(min(progress, 1.0))
+
+        # -------- Summary --------
         st.info(f"🎯 Goal: {goal} | 📈 Level: {level}")
 
         if equipment:
-            st.write("🏋 Available Equipment:", ", ".join(equipment))
+            st.write("🧰 Equipment:", ", ".join(equipment))
         else:
-            st.write("🏋 Available Equipment: None selected")
-        st.markdown("""
-<style>
-
-/* Full page background */
-.stApp {
-    background-color: #f4f7fb;
-}
-
-/* Main container */
-.block-container {
-    background-color: #ffffff;
-    padding: 2.5rem;
-    border-radius: 16px;
-    max-width: 900px;
-}
-
-/* Headings */
-h1, h2, h3 {
-    color: #0f172a !important;
-}
-
-/* Labels */
-label {
-    color: #1e293b !important;
-    font-weight: 600;
-}
-
-/* Text inputs & number inputs */
-input, textarea {
-    background-color: #ffffff !important;
-    color: #0f172a !important;
-    border-radius: 10px !important;
-    border: 1px solid #cbd5e1 !important;
-}
-
-/* Selectbox & Multiselect */
-div[data-baseweb="select"] {
-    background-color: #ffffff !important;
-    color: #0f172a !important;
-    border-radius: 10px;
-}
-
-/* Dropdown text */
-div[data-baseweb="select"] span {
-    color: #0f172a !important;
-}
-
-/* Number input buttons (+ / -) */
-button[aria-label="Increment"],
-button[aria-label="Decrement"] {
-    color: #0f172a !important;
-}
-
-/* Radio & checkbox text */
-span {
-    color: #0f172a !important;
-}
-
-/* Form card */
-div[data-testid="stForm"] {
-    background-color: #f8fafc;
-    padding: 2rem;
-    border-radius: 14px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
-}
-
-/* Main action button */
-.stButton > button {
-    width: 100%;
-    height: 3.2em;
-    border-radius: 10px;
-    background: linear-gradient(90deg, #2563eb, #1d4ed8);
-    color: white !important;
-    font-size: 17px;
-    font-weight: 600;
-    border: none;
-}
-
-</style>
-""", unsafe_allow_html=True)
-
-
+            st.write("🧰 Equipment: No equipment selected")