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

pages/3Life Cycle of Machine Learning Project.py

@@ -23,18 +23,18 @@ st.markdown("""
         margin-bottom: 10px;
     }
     .description {
-        margin: 0px; /* Removed all margins for tighter spacing */
+        margin: 0px;
         text-align: center;
     }
     .circle-container {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin: 0px; /* Removed extra space above the circle */
+        margin: 0px;
     }
     .circle {
         position: relative;
-        width: 1100px; /* Adjusted circle size */
+        width: 1100px;
         height: 1100px;
         border-radius: 50%;
         display: flex;
@@ -54,8 +54,7 @@ st.markdown("""
         width: 170px;
         height: 60px;
         font-size: 16px;
-        background-color: #f0f8ff; /* Light background color */
-        color: black; /* Black text */
+        font-weight: bold;
         border-radius: 30px;
         display: flex;
         justify-content: center;
@@ -65,11 +64,18 @@ st.markdown("""
         transform-origin: 50% 50%;
         transition: transform 0.3s ease, background-color 0.3s ease;
         text-decoration: none;
-        font-weight: bold;
-    }
-    .step:hover {
-        background-color: #e6e6fa;
+        color: black; /* Black text */
     }
+    .step1 { background-color: #FFDDC1; } /* Light Orange */
+    .step2 { background-color: #D4F1F4; } /* Light Blue */
+    .step3 { background-color: #D5ECC2; } /* Light Green */
+    .step4 { background-color: #F8C3DF; } /* Light Pink */
+    .step5 { background-color: #FFF7C0; } /* Light Yellow */
+    .step6 { background-color: #CDE7FF; } /* Sky Blue */
+    .step7 { background-color: #FEE9B2; } /* Light Peach */
+    .step8 { background-color: #FFCBCB; } /* Light Red */
+    .step9 { background-color: #E4F9F5; } /* Mint Green */
+    .step10 { background-color: #FFD9E8; } /* Soft Pink */
     #step1 { transform: rotate(0deg) translateX(320px) rotate(-0deg); }
     #step2 { transform: rotate(36deg) translateX(320px) rotate(-36deg); }
     #step3 { transform: rotate(72deg) translateX(320px) rotate(-72deg); }
@@ -105,16 +111,16 @@ html_code = """
 <div class="circle-container">
     <div class="circle">
         <div class="steps">
-            <div class="step" id="step1"><a href="/?page=ProblemStatement" class="step">Problem Statement</a></div>
-            <div class="step" id="step2"><a href="/?page=DataCollection" class="step">Data Collection</a></div>
-            <div class="step" id="step3"><a href="/?page=SimpleEDA" class="step">Simple EDA</a></div>
-            <div class="step" id="step4"><a href="/?page=DataPreprocessing" class="step">Data Preprocessing</a></div>
-            <div class="step" id="step5"><a href="/?page=EDA" class="step">EDA</a></div>
-            <div class="step" id="step6"><a href="/?page=FeatureEngineering" class="step">Feature Engineering</a></div>
-            <div class="step" id="step7"><a href="/?page=ModelTraining" class="step">Model Training</a></div>
-            <div class="step" id="step8"><a href="/?page=ModelTesting" class="step">Model Testing</a></div>
-            <div class="step" id="step9"><a href="/?page=ModelDeployment" class="step">Model Deployment</a></div>
-            <div class="step" id="step10"><a href="/?page=Monitoring" class="step">Monitoring</a></div>
+            <div class="step step1" id="step1"><a href="/?page=ProblemStatement" style="color:black;">Problem Statement</a></div>
+            <div class="step step2" id="step2"><a href="/?page=DataCollection" style="color:black;">Data Collection</a></div>
+            <div class="step step3" id="step3"><a href="/?page=SimpleEDA" style="color:black;">Simple EDA</a></div>
+            <div class="step step4" id="step4"><a href="/?page=DataPreprocessing" style="color:black;">Data Preprocessing</a></div>
+            <div class="step step5" id="step5"><a href="/?page=EDA" style="color:black;">EDA</a></div>
+            <div class="step step6" id="step6"><a href="/?page=FeatureEngineering" style="color:black;">Feature Engineering</a></div>
+            <div class="step step7" id="step7"><a href="/?page=ModelTraining" style="color:black;">Model Training</a></div>
+            <div class="step step8" id="step8"><a href="/?page=ModelTesting" style="color:black;">Model Testing</a></div>
+            <div class="step step9" id="step9"><a href="/?page=ModelDeployment" style="color:black;">Model Deployment</a></div>
+            <div class="step step10" id="step10"><a href="/?page=Monitoring" style="color:black;">Monitoring</a></div>
         </div>
     </div>
 </div>
@@ -122,4 +128,3 @@ html_code = """
 
 # Render the circular layout
 st.markdown(html_code, unsafe_allow_html=True)
-