Update app.py

app.py

@@ -39,9 +39,22 @@ st.markdown("""
 # TITLE
 # ---------------------------------------------------------
 st.title("🏖️ Predict Maintenance")
-st.write("The Predict Maintenance app is a tool to predict if an Engine needs any maintenance based on provided operating sensor parameters.")
-st.write("Fill in the details below and click **Check for Maintenance** to see if the Engine needs maintenance to prevent from failure.")
-st.write("Suggested Ranges are based on the Range of Values model trained on.")
+#st.write("The Predict Maintenance app is a tool to predict if an Engine needs any maintenance based on provided operating sensor parameters.")
+#st.write("Fill in the details below and click **Check for Maintenance** to see if the Engine needs maintenance to prevent from failure.")
+#st.write("Suggested Ranges are based on the Range of Values model trained on.")
+st.markdown("""
+<style>
+.intro-text p {
+    margin-bottom: 0.4rem;
+}
+</style>
+
+<div class="intro-text">
+<p>The Predict Maintenance app is a tool to predict if an Engine needs any maintenance based on provided operating sensor parameters.</p>
+<p>Fill in the details below and click <b>Check for Maintenance</b> to see if the Engine needs maintenance.</p>
+<p><i>Suggested ranges are based on the range of values the model was trained on.</i></p>
+</div>
+""", unsafe_allow_html=True)
 
 
 
@@ -74,11 +87,27 @@ def formatted_number_input(title, hint, minval, maxval, defvalue, steps, valform
     return user_input
 
 
+st.markdown("""
+<style>
+.card {
+    background-color: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 12px;
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+}
+.card-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+}
+</style>
+""", unsafe_allow_html=True)
 
 # ====================================
 # Section : Capture Engine Parameters
 # ====================================
-st.subheader ("Engine Parameters")
+#st.subheader ("Engine Parameters")
 
 # divide UI into two column layout by defining two columns 
 # left column is used for input and right for output
@@ -86,7 +115,8 @@ col_inputs, col_output = st.columns([3, 1.5])
 
 # update contnent (input) in left input column
 with col_inputs:
-    
+
+    st.markdown('<div class="card"><div class="card-title">🧩 Engine Parameters</div>', unsafe_allow_html=True)
     col_left, col_right = st.columns([1,1])
 
     # define inputs in left column
@@ -158,6 +188,8 @@ with col_inputs:
             valformat="%.6f"
         )
 
+        st.markdown('</div>', unsafe_allow_html=True)
+
 #st.markdown('</div>', unsafe_allow_html=True)
 
 #st.markdown("---")
@@ -165,11 +197,14 @@ with col_inputs:
 #col_btn1, col_btn2, col_btn3 = st.columns([1,2,1])
 
 with col_output:
-    st.markdown("### 🧠 Prediction Result")
+    st.markdown('<div class="card"><div class="card-title">🧠 Prediction Result</div>', unsafe_allow_html=True)
+    #st.markdown("### 🧠 Prediction Result")
 
     output_placeholder = st.empty()
     details_placeholder = st.empty()
 
+    st.markdown('</div>', unsafe_allow_html=True)
+
 with col_output:
 
         # ==========================