feat: updated website

app.py

@@ -189,24 +189,24 @@ if page == "Summary":
         
         st.markdown('#### Clustering Details')
         
-        # Display metrics in a horizontal layout
+        # Horizontal layout for clustering metrics similar to "General Data Information"
         st.markdown(f"""
-        <div style="display: flex; justify-content: space-between; gap: 10px;">
-            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
-                <h5 style="color:{primary_color}; text-align: center;">Observations</h5>
-                <h3 style="color:{text_color}; text-align: center;">696</h3>
+        <div style="display: flex; justify-content: space-around;">
+            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%; text-align: center;">
+                <h5 style="color:{primary_color};">Observations</h5>
+                <h3 style="color:{text_color};">696</h3>
             </div>
-            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
-                <h5 style="color:{primary_color}; text-align: center;">Silhouette Score</h5>
-                <h3 style="color:{text_color}; text-align: center;">0.57744</h3>
+            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%; text-align: center;">
+                <h5 style="color:{primary_color};">Silhouette Score</h5>
+                <h3 style="color:{text_color};">0.57744</h3>
             </div>
-            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
-                <h5 style="color:{primary_color}; text-align: center;">Calinski-Harabasz</h5>
-                <h3 style="color:{text_color}; text-align: center;">422.98</h3>
+            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%; text-align: center;">
+                <h5 style="color:{primary_color};">Calinski-Harabasz</h5>
+                <h3 style="color:{text_color};">422.98</h3>
             </div>
-            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%;">
-                <h5 style="color:{primary_color}; text-align: center;">Davies-Bouldin</h5>
-                <h3 style="color:{text_color}; text-align: center;">0.63446</h3>
+            <div style="background-color:{metric_box_color}; padding: 15px; border-radius: 8px; width: 20%; text-align: center;">
+                <h5 style="color:{primary_color};">Davies-Bouldin</h5>
+                <h3 style="color:{text_color};">0.63446</h3>
             </div>
         </div>
         """, unsafe_allow_html=True)