feat: updated website

app.py

@@ -189,38 +189,38 @@ if page == "Summary":
         
         st.markdown('#### Clustering Details')
         
-        # Create a grid layout for the metrics
-        col_metric1, col_metric2 = st.columns(2)
-        with col_metric1:
+        # Create a row layout for all metrics to reduce vertical space
+        col1_metric1, col1_metric2, col1_metric3, col1_metric4 = st.columns(4)
+        
+        with col1_metric1:
             st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 20px; border-radius: 10px;">
-                <h4 style="color:{primary_color}; text-align: center;">Observations</h4>
-                <h2 style="color:{text_color}; text-align: center;">696</h2>
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+                <h5 style="color:{primary_color}; text-align: center; margin: 0;">Observations</h5>
+                <h3 style="color:{text_color}; text-align: center; margin: 0;">696</h3>
             </div>
             """, unsafe_allow_html=True)
 
-        with col_metric2:
+        with col1_metric2:
             st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 20px; border-radius: 10px;">
-                <h4 style="color:{primary_color}; text-align: center;">Silhouette Score</h4>
-                <h2 style="color:{text_color}; text-align: center;">0.57744</h2>
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+                <h5 style="color:{primary_color}; text-align: center; margin: 0;">Silhouette Score</h5>
+                <h3 style="color:{text_color}; text-align: center; margin: 0;">0.57744</h3>
             </div>
             """, unsafe_allow_html=True)
 
-        col_metric3, col_metric4 = st.columns(2)
-        with col_metric3:
+        with col1_metric3:
             st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 20px; border-radius: 10px;">
-                <h4 style="color:{primary_color}; text-align: center;">Calinski-Harabasz Score</h4>
-                <h2 style="color:{text_color}; text-align: center;">422.98</h2>
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+                <h5 style="color:{primary_color}; text-align: center; margin: 0;">Calinski-Harabasz</h5>
+                <h3 style="color:{text_color}; text-align: center; margin: 0;">422.98</h3>
             </div>
             """, unsafe_allow_html=True)
 
-        with col_metric4:
+        with col1_metric4:
             st.markdown(f"""
-            <div style="background-color:{metric_box_color}; padding: 20px; border-radius: 10px;">
-                <h4 style="color:{primary_color}; text-align: center;">Davies-Bouldin Score</h4>
-                <h2 style="color:{text_color}; text-align: center;">0.63446</h2>
+            <div style="background-color:{metric_box_color}; padding: 10px; border-radius: 8px;">
+                <h5 style="color:{primary_color}; text-align: center; margin: 0;">Davies-Bouldin</h5>
+                <h3 style="color:{text_color}; text-align: center; margin: 0;">0.63446</h3>
             </div>
             """, unsafe_allow_html=True)
     # Middle Column (White): 3D Cluster Model and Bar Chart