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

pages/3Life Cycle of Machine Learning Project.py

@@ -29,21 +29,25 @@ st.markdown("""
 # Title of the page
 st.markdown("""<div style="text-align: center; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
 
-# Inject custom CSS for the flowchart layout
+# Inject custom CSS for the circular flowchart layout
 st.markdown(
     """
     <style>
         .flowchart-container {
+            position: relative;
+            width: 500px; /* Container width */
+            height: 500px; /* Container height */
+            margin: 0 auto;
             display: flex;
             flex-direction: column;
+            justify-content: center;
             align-items: center;
-            gap: 20px;
-            margin-top: 50px;
         }
 
-        /* Styling for each phase (rectangle button) */
+        /* Circle arrangement for the phases */
         .phase {
-            width: 300px; /* Rectangle width */
+            position: absolute;
+            width: 250px; /* Rectangle width */
             height: 60px; /* Rectangle height */
             border-radius: 8px; /* Rounded edges */
             font-size: 16px; /* Text size */
@@ -58,17 +62,17 @@ st.markdown(
             color: black; /* Text color */
         }
 
-        /* Colors for each phase */
-        .phase-1 { background-color: #FF7043; } /* Red */
-        .phase-2 { background-color: #42A5F5; } /* Blue */
-        .phase-3 { background-color: #66BB6A; } /* Green */
-        .phase-4 { background-color: #FFEB3B; } /* Yellow */
-        .phase-5 { background-color: #F06292; } /* Pink */
-        .phase-6 { background-color: #42A5F5; } /* Blue */
-        .phase-7 { background-color: #FF7043; } /* Red */
-        .phase-8 { background-color: #66BB6A; } /* Green */
-        .phase-9 { background-color: #FFEB3B; } /* Yellow */
-        .phase-10 { background-color: #F06292; } /* Pink */
+        /* Color for each phase */
+        .phase-1 { background-color: #FF7043; top: 0%; left: 50%; transform: translateX(-50%); } /* Red */
+        .phase-2 { background-color: #42A5F5; top: 25%; left: 90%; transform: translate(-50%, -50%); } /* Blue */
+        .phase-3 { background-color: #66BB6A; top: 50%; left: 100%; transform: translate(-50%, -50%); } /* Green */
+        .phase-4 { background-color: #FFEB3B; top: 75%; left: 90%; transform: translate(-50%, -50%); } /* Yellow */
+        .phase-5 { background-color: #F06292; top: 100%; left: 50%; transform: translateX(-50%); } /* Pink */
+        .phase-6 { background-color: #42A5F5; top: 75%; left: 10%; transform: translate(-50%, -50%); } /* Blue */
+        .phase-7 { background-color: #FF7043; top: 50%; left: 0%; transform: translate(-50%, -50%); } /* Red */
+        .phase-8 { background-color: #66BB6A; top: 25%; left: 10%; transform: translate(-50%, -50%); } /* Green */
+        .phase-9 { background-color: #FFEB3B; top: 0%; left: 50%; transform: translateX(-50%); } /* Yellow */
+        .phase-10 { background-color: #F06292; top: 50%; left: 10%; transform: translate(-50%, -50%); } /* Pink */
 
         .phase:hover {
             transform: scale(1.05);
@@ -78,25 +82,20 @@ st.markdown(
         .arrow {
             font-size: 24px;
             color: #4F4F4F;
-        }
-
-        .description {
-            font-size: 14px;
-            color: #4F4F4F;
-            margin-top: -5px;
+            margin: 20px 0;
         }
     </style>
     """, unsafe_allow_html=True
 )
 
-# HTML structure for the flowchart
+# HTML structure for the circular flowchart
 st.markdown(
     """
     <div class="flowchart-container">
         <!-- Problem Statement -->
         <a href="/problem-statement" class="phase phase-1" target="_self">1. Problem Statement</a>
         <div class="arrow">⬇️</div>
-
+        
         <!-- Data Collection -->
         <a href="/data-collection" class="phase phase-2" target="_self">2. Data Collection</a>
         <div class="arrow">⬇️</div>