Update pages/3Life Cycle of Machine Learning Project.py

pages/3Life Cycle of Machine Learning Project.py

@@ -54,7 +54,7 @@ st.markdown(
         .circular-flowchart {
             position: relative;
             width: 1000px; /* Layout size */
-            height: 1000px;
+            height: 1000px; /* Equal height for a circular layout */
             margin: 0 auto;
             display: flex;
             justify-content: center;
@@ -64,8 +64,8 @@ st.markdown(
         /* Styling for each phase (circle) */
         .phase {
             position: absolute;
-            width: 120px; /* Circle size */
-            height: 120px;
+            width: 130px; /* Circle size */
+            height: 130px;
             background-color: #F8F9FA; /* Light background */
             color: #343A40; /* Dark text */
             border-radius: 50%;
@@ -80,18 +80,18 @@ st.markdown(
             transition: transform 0.3s ease, background 0.3s ease;
         }
 
-        /* Adjusted positions for your custom circular flow */
-        .phase-1 { top: 80px; left: 400px; background-color: #4CAF50; } /* Top-left */
-        .phase-2 { top: 150px; left: 550px; background-color: #03A9F4; } /* Top */
-        .phase-3 { top: 300px; left: 650px; background-color: #FFC107; } /* Upper-right */
-        .phase-4 { top: 450px; left: 620px; background-color: #FF7043; } /* Right */
-        .phase-5 { top: 600px; left: 500px; background-color: #8BC34A; } /* Bottom-right */
-        .phase-6 { top: 620px; left: 320px; background-color: #673AB7; } /* Bottom-center */
-        .phase-7 { top: 500px; left: 200px; background-color: #E91E63; } /* Bottom-left */
-        .phase-8 { top: 350px; left: 180px; background-color: #607D8B; } /* Left */
-        .phase-9 { top: 180px; left: 240px; background-color: #00BCD4; } /* Upper-left */
-        .phase-10 { top: 100px; left: 300px; background-color: #FF9800; } /* Between Upper-left and Top */
-        
+        /* Positions adjusted for equal spacing and flow */
+        .phase-1 { top: 80px; left: 450px; background-color: #4CAF50; } /* Top */
+        .phase-2 { top: 180px; left: 640px; background-color: #03A9F4; } /* Top-right */
+        .phase-3 { top: 350px; left: 760px; background-color: #FFC107; } /* Mid-right */
+        .phase-4 { top: 550px; left: 700px; background-color: #FF7043; } /* Lower-right */
+        .phase-5 { top: 720px; left: 500px; background-color: #8BC34A; } /* Bottom */
+        .phase-6 { top: 550px; left: 300px; background-color: #673AB7; } /* Lower-left */
+        .phase-7 { top: 350px; left: 200px; background-color: #E91E63; } /* Mid-left */
+        .phase-8 { top: 180px; left: 270px; background-color: #607D8B; } /* Top-left */
+        .phase-9 { top: 120px; left: 350px; background-color: #00BCD4; } /* Between Top-left and Top */
+        .phase-10 { top: 120px; left: 550px; background-color: #FF9800; } /* Between Top and Top-right */
+
         .phase:hover {
             transform: scale(1.1);
             background-color: #E9ECEF; /* Slightly lighter on hover */
@@ -120,4 +120,3 @@ st.markdown(
     """,
     unsafe_allow_html=True,
 )
-