Update src/streamlit_app.py

src/streamlit_app.py

@@ -10,130 +10,168 @@ st.set_page_config(
 )
 
 # --------------------------------------------------
-# Custom CSS (Ensuring High Visibility)
+# Custom CSS (HF Compatible + Visible UI)
 # --------------------------------------------------
 st.markdown("""
 <style>
-    /* Force a clean, light background for the whole app */
-    .stApp {
-        background-color: #F0F2F6;
-    }
-
-    /* Card-style container for the form */
-    div[data-testid="stForm"] {
-        background-color: #FFFFFF !important;
-        padding: 30px !important;
-        border-radius: 15px !important;
-        border: 1px solid #E0E0E0 !important;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-    }
-
-    /* Force all text labels and headers to be Dark Blue/Black */
-    h1, h2, h3, p, label, .stMarkdown {
-        color: #1A1C25 !important;
-    }
-
-    /* Style the Input boxes for clarity */
-    input {
-        color: #1A1C25 !important;
-        background-color: #F8F9FA !important;
-    }
-
-    /* Button styling */
-    .stButton > button {
-        width: 100%;
-        background: linear-gradient(90deg, #2563eb, #1d4ed8);
-        color: white !important;
-        font-weight: bold;
-        border: none;
-        padding: 10px;
-        border-radius: 8px;
-    }
+
+/* Page background */
+.stApp {
+    background-color: #f4f7fb;
+}
+
+/* Main container */
+.block-container {
+    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: 14px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+}
+
+/* Main 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)
 
 # --------------------------------------------------
-# Header
+# Title Section
 # --------------------------------------------------
 st.title("💪 FitPlan AI")
-st.markdown("### Milestone 1: Fitness Profile & BMI Analysis")
-st.write("Complete your profile below to calculate your health metrics.")
+st.subheader("Milestone 1: Fitness Profile & BMI Analysis")
+st.write("Enter your details to calculate BMI and generate your fitness profile.")
 
 # --------------------------------------------------
 # Fitness Profile Form
 # --------------------------------------------------
 with st.form("fitness_form"):
-    st.markdown("#### 🧍‍♂️ 1. Personal Information")
-    
-    name = st.text_input("Full Name *", placeholder="e.g. John Doe")
+
+    # -------- Section 1 --------
+    st.header("🧍‍♂️ 1. Personal Information")
+
+    name = st.text_input("Full Name *")
 
     col1, col2 = st.columns(2)
     with col1:
-        # Added min_value logic to prevent negatives
-        height = st.number_input("Height (cm) *", min_value=0.0, step=1.0, format="%.1f")
+        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="%.1f")
+        weight = st.number_input("Weight (kg) *", min_value=0.0, step=0.1)
+
+    st.divider()
 
-    st.markdown("---")
+    # -------- Section 2 --------
+    st.header("🏋️ 2. Fitness Details")
 
-    st.markdown("#### 🏋️ 2. Fitness Details")
-    
     goal = st.selectbox(
         "Fitness Goal",
         ["Build Muscle", "Weight Loss", "Strength Gain", "Abs Building", "Flexible"]
     )
 
     equipment = st.multiselect(
-        "Available Equipment (Select all that apply)",
-        ["Dumbbells", "Resistance Band", "Yoga Mat", "Kettlebell", "Pull-up Bar", "No Equipment"],
-        default=["No Equipment"]
+        "Available Equipment",
+        ["Dumbbells", "Resistance Band", "Yoga Mat",
+         "Kettlebell", "Pull-up Bar", "No Equipment"]
     )
 
     level = st.radio(
         "Fitness Level",
-        ["Beginner", "Intermediate", "Advanced"],
-        horizontal=True
+        ["Beginner", "Intermediate", "Advanced"]
     )
 
     submit = st.form_submit_button("Generate Profile")
 
 # --------------------------------------------------
-# Logic & Output
+# Processing & Output
 # --------------------------------------------------
 if submit:
-    # Validation checks
+
+    # -------- Validation --------
     if not name.strip():
-        st.error("🚨 Name is required.")
-    elif height <= 50 or weight <= 10: # Realistic safety checks
-        st.error("🚨 Please enter valid height and weight values.")
+        st.error("⚠ Please enter your name.")
+    elif height <= 0 or weight <= 0:
+        st.error("⚠ Height and weight must be greater than zero.")
     else:
-        # BMI Calculation
+        # -------- BMI Calculation --------
         height_m = height / 100
-        bmi = weight / (height_m ** 2)
-        bmi_display = round(bmi, 2)
+        bmi = round(weight / (height_m ** 2), 2)
 
-        # Precise BMI Classification
+        # -------- BMI Classification --------
         if bmi < 18.5:
-            category, color, progress = "Underweight", "blue", 0.25
-        elif 18.5 <= bmi < 25.0:
-            category, color, progress = "Normal", "green", 0.50
-        elif 25.0 <= bmi < 30.0:
-            category, color, progress = "Overweight", "orange", 0.75
+            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
+
+        # -------- 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("🧰 Equipment:", ", ".join(equipment))
         else:
-            category, color, progress = "Obese", "red", 1.0
-
-        # Results Display
-        st.success(f"✅ Profile generated for {name}")
-        
-        m_col1, m_col2 = st.columns(2)
-        with m_col1:
-            st.metric("Your BMI", f"{bmi_display}")
-        with m_col2:
-            # Using bold colored markdown for high visibility
-            st.markdown(f"**Status:** :{color}[{category}]")
-
-        st.markdown("### 📊 BMI Visual Indicator")
-        st.progress(progress)
-        
-        # Summary Box
-        st.info(f"**Profile Summary:**\n\n* **Goal:** {goal}\n* **Experience:** {level}\n* **Equipment:** {', '.join(equipment) if equipment else 'None'}")
+            st.write("🧰 Equipment: No equipment selected")