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

pages/3Life Cycle of Machine Learning Project.py

@@ -47,7 +47,7 @@ st.markdown("""
 
 import streamlit as st
 
-# Inject custom CSS for the vertical flowchart
+# Inject custom CSS for the flowchart
 st.markdown(
     """
     <style>
@@ -60,52 +60,48 @@ st.markdown(
             align-items: center;
         }
 
-        /* Styling for each phase (rectangle) */
+        /* Styling for each phase (rectangle button) */
         .phase {
             position: relative;
             width: 300px; /* Rectangle width */
             height: 60px; /* Rectangle height */
-            background-color: #E0E0E0; /* Neutral light background */
-            color: #000000; /* Black text */
+            border: none; /* Remove border */
             border-radius: 8px; /* Rounded edges */
-            display: flex;
-            justify-content: center;
-            align-items: center;
             font-size: 16px; /* Text size */
             font-weight: bold;
             text-align: center;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            cursor: pointer;
             margin-bottom: 10px; /* Space between steps */
             font-family: Arial, sans-serif;
-        }
-
-        /* Arrow styling */
-        .arrow {
-            width: 40px;
-            height: 40px;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 24px; /* Larger arrow size */
-            color: #4F4F4F; /* Neutral dark arrow color */
-            margin: 10px 0; /* Space for arrow */
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease, background-color 0.3s ease;
         }
 
-        /* Custom slightly darker colors for each phase */
-        .phase-1 { background-color: #D4ECDD; } /* Slightly darker green */
-        .phase-2 { background-color: #CDE7F0; } /* Slightly darker blue */
-        .phase-3 { background-color: #FFF4B3; } /* Slightly darker yellow */
-        .phase-4 { background-color: #FFD8A8; } /* Slightly darker orange */
-        .phase-5 { background-color: #CCE1B5; } /* Slightly darker light green */
-        .phase-6 { background-color: #C2B9DA; } /* Slightly darker purple */
-        .phase-7 { background-color: #F2A2B7; } /* Slightly darker pink */
-        .phase-8 { background-color: #BAC6CF; } /* Slightly darker gray-blue */
-        .phase-9 { background-color: #9FD5DC; } /* Slightly darker cyan */
-        .phase-10 { background-color: #FFD572; } /* Slightly darker amber */
+        /* Colors for each phase (original colors) */
+        .phase-1 { background-color: #4CAF50; color: black; } /* Green */
+        .phase-2 { background-color: #03A9F4; color: black; } /* Blue */
+        .phase-3 { background-color: #FFC107; color: black; } /* Yellow */
+        .phase-4 { background-color: #FF7043; color: black; } /* Orange */
+        .phase-5 { background-color: #8BC34A; color: black; } /* Light Green */
+        .phase-6 { background-color: #673AB7; color: black; } /* Purple */
+        .phase-7 { background-color: #E91E63; color: black; } /* Pink */
+        .phase-8 { background-color: #607D8B; color: black; } /* Gray-Blue */
+        .phase-9 { background-color: #00BCD4; color: black; } /* Cyan */
+        .phase-10 { background-color: #FF9800; color: black; } /* Amber */
 
         .phase:hover {
             transform: scale(1.05);
-            background-color: #F0F0F0; /* Slightly lighter on hover */
+            background-color: #E9ECEF; /* Slightly lighter on hover */
+        }
+
+        /* Arrow styling */
+        .arrow {
+            font-size: 24px; /* Arrow size */
+            color: #4F4F4F; /* Dark arrow color */
+            margin: 10px 0; /* Space for arrow */
         }
     </style>
     """,
@@ -116,26 +112,26 @@ st.markdown(
 st.markdown(
     """
     <div class="vertical-flowchart">
-        <!-- Phases -->
-        <div class="phase phase-1">Problem Statement</div>
+        <!-- Buttons for each phase -->
+        <a href="/problem-statement" class="phase phase-1" target="_self">Problem Statement</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-2">Data Collection</div>
+        <a href="/data-collection" class="phase phase-2" target="_self">Data Collection</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-3">Simple EDA</div>
+        <a href="/simple-eda" class="phase phase-3" target="_self">Simple EDA</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-4">Data Preprocessing</div>
+        <a href="/data-preprocessing" class="phase phase-4" target="_self">Data Preprocessing</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-5">EDA</div>
+        <a href="/eda" class="phase phase-5" target="_self">EDA</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-6">Feature Engineering</div>
+        <a href="/feature-engineering" class="phase phase-6" target="_self">Feature Engineering</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-7">Model Training</div>
+        <a href="/model-training" class="phase phase-7" target="_self">Model Training</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-8">Model Testing</div>
+        <a href="/model-testing" class="phase phase-8" target="_self">Model Testing</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-9">Deployment</div>
+        <a href="/deployment" class="phase phase-9" target="_self">Deployment</a>
         <div class="arrow">⬇️</div>
-        <div class="phase phase-10">Monitoring</div>
+        <a href="/monitoring" class="phase phase-10" target="_self">Monitoring</a>
     </div>
     """,
     unsafe_allow_html=True,