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 straight vertical flowchart
+# Inject custom CSS for the vertical flowchart
 st.markdown(
     """
     <style>
@@ -60,18 +60,18 @@ st.markdown(
             align-items: center;
         }
 
-        /* Styling for each phase (circle) */
+        /* Styling for each phase (rectangle) */
         .phase {
             position: relative;
-            width: 130px; /* Circle size */
-            height: 130px;
+            width: 300px; /* Rectangle width */
+            height: 60px; /* Rectangle height */
             background-color: #F8F9FA; /* Light background */
             color: #000000; /* Black text */
-            border-radius: 50%;
+            border-radius: 8px; /* Rounded edges */
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 14px; /* Text size */
+            font-size: 16px; /* Text size */
             font-weight: bold;
             text-align: center;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -89,28 +89,28 @@ st.markdown(
             color: #000000; /* Black arrow */
         }
 
-        /* Custom colors for each phase */
-        .phase-1 { background-color: #4CAF50; } /* Green */
-        .phase-2 { background-color: #03A9F4; } /* Blue */
-        .phase-3 { background-color: #FFC107; } /* Yellow */
-        .phase-4 { background-color: #FF7043; } /* Orange */
-        .phase-5 { background-color: #8BC34A; } /* Light Green */
-        .phase-6 { background-color: #673AB7; } /* Purple */
-        .phase-7 { background-color: #E91E63; } /* Pink */
-        .phase-8 { background-color: #607D8B; } /* Gray-Blue */
-        .phase-9 { background-color: #00BCD4; } /* Cyan */
-        .phase-10 { background-color: #FF9800; } /* Amber */
+        /* Custom light colors for each phase */
+        .phase-1 { background-color: #E6F4EA; } /* Light Green */
+        .phase-2 { background-color: #E0F7FA; } /* Light Blue */
+        .phase-3 { background-color: #FFF9C4; } /* Light Yellow */
+        .phase-4 { background-color: #FFE0B2; } /* Light Orange */
+        .phase-5 { background-color: #DCEDC8; } /* Light Green */
+        .phase-6 { background-color: #D1C4E9; } /* Light Purple */
+        .phase-7 { background-color: #F8BBD0; } /* Light Pink */
+        .phase-8 { background-color: #CFD8DC; } /* Light Gray-Blue */
+        .phase-9 { background-color: #B2EBF2; } /* Light Cyan */
+        .phase-10 { background-color: #FFE082; } /* Light Amber */
 
         .phase:hover {
-            transform: scale(1.1);
-            background-color: #E9ECEF; /* Slightly lighter on hover */
+            transform: scale(1.05);
+            background-color: #F0F0F0; /* Slightly lighter on hover */
         }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# HTML structure for the straight flowchart
+# HTML structure for the vertical flowchart
 st.markdown(
     """
     <div class="vertical-flowchart">