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

pages/3Life Cycle of Machine Learning Project.py

@@ -32,13 +32,13 @@ st.markdown("""
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-top: 10px;
+        margin-top: 50px;
         position: relative;
     }
     .circle {
         position: relative;
-        width: 1000px;
-        height: 1000px;
+        width: 1100px;
+        height: 1100px;
         border-radius: 50%;
         display: flex;
         justify-content: center;
@@ -67,6 +67,8 @@ st.markdown("""
         transform-origin: 50% 50%;
         font-weight: bold;
         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+        background-color: rgba(255, 255, 255, 0.9);
+        cursor: pointer;
     }
     #step1 { transform: rotate(0deg) translateX(400px) rotate(-0deg); background-color: #FFCCCB; } /* Light Red */
     #step2 { transform: rotate(36deg) translateX(400px) rotate(-36deg); background-color: #FFD700; } /* Gold */
@@ -100,22 +102,22 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# Render the circular layout
+# Render the circular layout with buttons that redirect to different pages
 st.markdown(
     """
     <div class="circle-container">
         <div class="circle">
             <div class="steps">
-                <div class="step" id="step9">1. Problem Statement</div>
-                <div class="step" id="step10">2. Data Collection</div>
-                <div class="step" id="step1">3. Simple EDA</div>
-                <div class="step" id="step2">4. Data Preprocessing</div>
-                <div class="step" id="step3">5. EDA</div>
-                <div class="step" id="step4">6. Feature Engineering</div>
-                <div class="step" id="step5">7. Model Training</div>
-                <div class="step" id="step6">8. Model Testing</div>
-                <div class="step" id="step7">9. Model Deployment</div>
-                <div class="step" id="step8">10. Monitoring</div>
+                <a href="/problem_statement" target="_self" class="step" id="step1">1. Problem Statement</a>
+                <a href="/data_collection" target="_self" class="step" id="step2">2. Data Collection</a>
+                <a href="/simple_eda" target="_self" class="step" id="step3">3. Simple EDA</a>
+                <a href="/data_preprocessing" target="_self" class="step" id="step4">4. Data Preprocessing</a>
+                <a href="/eda" target="_self" class="step" id="step5">5. EDA</a>
+                <a href="/feature_engineering" target="_self" class="step" id="step6">6. Feature Engineering</a>
+                <a href="/model_training" target="_self" class="step" id="step7">7. Model Training</a>
+                <a href="/model_testing" target="_self" class="step" id="step8">8. Model Testing</a>
+                <a href="/model_deployment" target="_self" class="step" id="step9">9. Model Deployment</a>
+                <a href="/monitoring" target="_self" class="step" id="step10">10. Monitoring</a>
             </div>
         </div>
     </div>