Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,177 +1,119 @@
 import streamlit as st
 
-# --------------------------------------------------
-# Page Configuration
-# --------------------------------------------------
-st.set_page_config(
-    page_title="FitPlan AI",
-    page_icon="💪",
-    layout="centered"
-)
+# 1. Basic Configuration
+st.set_page_config(page_title="FitPlan AI", page_icon="💪")
 
-# --------------------------------------------------
-# Custom CSS (HF Compatible + Visible UI)
-# --------------------------------------------------
+# 2. CSS with High-Priority Selectors
+# This forces the background image and ensures font visibility
 st.markdown("""
 <style>
-
-/* 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;
-}
-
+    /* Full Page Background */
+    [data-testid="stAppViewContainer"] {
+        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
+                    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);
+    }
+
+    /* Making the Form readable against the dark background */
+    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;
+    }
+
+    /* --- FONT COLORS (FORCED VISIBILITY) --- */
+    /* Main Title White (Outside Form) */
+    .title-text {
+        color: #FFFFFF !important;
+        text-shadow: 2px 2px 4px #000000;
+        font-size: 3rem;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    /* Form Labels (Dark Blue) */
+    label, p, .stMarkdown {
+        color: #1e293b !important;
+        font-weight: 600 !important;
+    }
+
+    /* Section Headers inside form (Orange) */
+    .form-header {
+        color: #f97316 !important;
+        font-weight: 800;
+        margin-bottom: 0px;
+    }
+
+    /* Force metric values to be visible */
+    [data-testid="stMetricValue"] {
+        color: #2563eb !important;
+    }
 </style>
 """, unsafe_allow_html=True)
 
 # --------------------------------------------------
-# Title Section
+# UI Elements
 # --------------------------------------------------
-st.title("💪 FitPlan AI")
-st.subheader("Milestone 1: Fitness Profile & BMI Analysis")
-st.write("Enter your details to calculate BMI and generate your fitness profile.")
+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)
 
-# --------------------------------------------------
-# Fitness Profile Form
-# --------------------------------------------------
 with st.form("fitness_form"):
-
-    # -------- Section 1 --------
-    st.header("🧍‍♂️ 1. Personal Information")
-
-    name = st.text_input("Full Name *")
+    st.markdown('<p class="form-header">🧍‍♂️ 1. PERSONAL INFORMATION</p>', unsafe_allow_html=True)
+    
+    name = st.text_input("Full Name *", placeholder="Enter your name")
 
     col1, col2 = st.columns(2)
     with col1:
-        height = st.number_input("Height (cm) *", min_value=0.0, step=0.1)
+        height = st.number_input("Height (cm) *", min_value=0.0, step=1.0)
     with col2:
         weight = st.number_input("Weight (kg) *", min_value=0.0, step=0.1)
 
-    st.divider()
-
-    # -------- Section 2 --------
-    st.header("🏋️ 2. Fitness Details")
+    st.markdown("---")
+    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"],
+                               default=["No Equipment"])
+    
+    level = st.radio("Fitness Level", ["Beginner", "Intermediate", "Advanced"], horizontal=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", "Pull-up Bar", "No Equipment"]
-    )
-
-    level = st.radio(
-        "Fitness Level",
-        ["Beginner", "Intermediate", "Advanced"]
-    )
-
-    submit = st.form_submit_button("Generate Profile")
+    submit = st.form_submit_button("GENERATE MY PLAN")
 
 # --------------------------------------------------
-# Processing & Output
+# Calculations & Logic
 # --------------------------------------------------
 if submit:
-
-    # -------- Validation --------
-    if not name.strip():
-        st.error("⚠ Please enter your name.")
-    elif height <= 0 or weight <= 0:
-        st.error("⚠ Height and weight must be greater than zero.")
+    if not name.strip() or height <= 0 or weight <= 0:
+        st.error("🚨 Please fill in all required fields accurately.")
     else:
-        # -------- BMI Calculation --------
-        height_m = height / 100
-        bmi = round(weight / (height_m ** 2), 2)
+        # BMI Logic
+        h_m = height / 100
+        bmi = round(weight / (h_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
-
-        # -------- 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))
+            cat, color = "Underweight", "blue"
+        elif 18.5 <= bmi < 25:
+            cat, color = "Normal", "green"
+        elif 25 <= bmi < 30:
+            cat, color = "Overweight", "orange"
         else:
-            st.write("🧰 Equipment: No equipment selected")
+            cat, color = "Obese", "red"
+
+        # Result Display
+        st.success(f"✅ Success! Data processed for {name}.")
+        
+        res1, res2 = st.columns(2)
+        res1.metric("BMI Score", bmi)
+        res2.markdown(f"### Status: :{color}[{cat}]")
+        
+        st.info(f"**Goal:** {goal} | **Level:** {level}")