Hugging Face's logo

Spaces:
LakshmiHarika
/
MachineLearning
Sleeping

App Files Community
1
LakshmiHarika commited on
Commit
9f1f083
·
verified ·
1 Parent(s): 0fd39ec

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

Browse files
Files changed (1) hide show
  1. pages/3Life Cycle of Machine Learning Project.py +48 -3
pages/3Life Cycle of Machine Learning Project.py CHANGED
@@ -65,7 +65,7 @@ html_code = """
65
  width: 80%;
66
  max-width: 800px;
67
  }
68
- .circle {
69
  position: relative;
70
  width: 350px;
71
  height: 350px;
@@ -86,7 +86,7 @@ html_code = """
86
  }
87
  .step {
88
  background-color: #007bff;
89
- color: #000; /* Changed text color to black */
90
  padding: 15px 30px;
91
  border-radius: 8px;
92
  cursor: pointer;
@@ -102,7 +102,7 @@ html_code = """
102
  .step:hover {
103
  background-color: #0056b3;
104
  }
105
- /* Different background colors for each step */
106
  #step1 {
107
  background-color: #FFCCCC;
108
  transform: rotate(0deg) translateX(140px) rotate(0deg);
@@ -143,6 +143,45 @@ html_code = """
143
  background-color: #D9CCFF;
144
  transform: rotate(324deg) translateX(140px) rotate(-324deg);
145
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </style>
147
  </head>
148
  <body>
@@ -169,3 +208,9 @@ html_code = """
169
 
170
  # Streamlit: Display the HTML circle with properly spaced steps
171
  st.markdown(html_code, unsafe_allow_html=True)
 
 
 
 
 
 
 
65
  width: 80%;
66
  max-width: 800px;
67
  }
68
+ .circle {
69
  position: relative;
70
  width: 350px;
71
  height: 350px;
 
86
  }
87
  .step {
88
  background-color: #007bff;
89
+ color: white;
90
  padding: 15px 30px;
91
  border-radius: 8px;
92
  cursor: pointer;
 
102
  .step:hover {
103
  background-color: #0056b3;
104
  }
105
+ /* Different background colors for each step */
106
  #step1 {
107
  background-color: #FFCCCC;
108
  transform: rotate(0deg) translateX(140px) rotate(0deg);
 
143
  background-color: #D9CCFF;
144
  transform: rotate(324deg) translateX(140px) rotate(-324deg);
145
  }
146
+ /* Rotate steps to form a circular layout */
147
+ #step4 {
148
+ transform: rotate(0deg) translateX(250px) rotate(0deg);
149
+ }
150
+ #step5 {
151
+ transform: rotate(25deg) translateX(250px) rotate(-25deg);
152
+ }
153
+ #step6 {
154
+ transform: rotate(60deg) translateX(250px) rotate(-60deg);
155
+ }
156
+ #step7 {
157
+ transform: rotate(120deg) translateX(250px) rotate(-120deg);
158
+ }
159
+ #step8 {
160
+ transform: rotate(155deg) translateX(250px) rotate(-155deg);
161
+ }
162
+ #step9 {
163
+ transform: rotate(180deg) translateX(250px) rotate(-180deg);
164
+ }
165
+ #step10 {
166
+ transform: rotate(205deg) translateX(250px) rotate(-205deg);
167
+ }
168
+ #step1 {
169
+ transform: rotate(240deg) translateX(250px) rotate(-240deg);
170
+ }
171
+ #step2 {
172
+ transform: rotate(300deg) translateX(250px) rotate(-300deg);
173
+ }
174
+ #step3 {
175
+ transform: rotate(335deg) translateX(250px) rotate(-335deg);
176
+ }
177
+ a {
178
+ color: white; /* Link color */
179
+ text-decoration: none;
180
+ }
181
+ a:hover {
182
+ color: yellow; /* Color on hover */
183
+ text-decoration: underline; /* Underline on hover */
184
+ }
185
  </style>
186
  </head>
187
  <body>
 
208
 
209
  # Streamlit: Display the HTML circle with properly spaced steps
210
  st.markdown(html_code, unsafe_allow_html=True)
211
+ st.write(' ')
212
+ st.write(' ')
213
+ st.write(' ')
214
+ st.write(' ')
215
+ st.write(' ')
216
+ st.write(' ')