Skip to content

Commit a0be4f0

Browse files
Fixed Darkmode and Milestone Section
Co-authored-by: shreyash3087 <[email protected]> Co-authored-by: sanjay-kv <[email protected]>
1 parent 9b6e672 commit a0be4f0

File tree

2 files changed

+79
-62
lines changed

2 files changed

+79
-62
lines changed

Website/index.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
1010
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1111
</head>
12-
<body>
12+
<body class="dark-mode">
1313
<div class="loading-container" id="loading-animation">
1414
<div class="loader"></div>
1515
</div>
@@ -41,7 +41,7 @@
4141

4242
<main>
4343
<section class="welcome-section">
44-
<h2>Welcome to the Machine Learning Repositories</h2>
44+
<h2>Welcome to the <span>Machine Learning Repositories</span></h2>
4545
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
4646
</section>
4747

@@ -123,63 +123,63 @@ <h2>Milestones Progress</h2>
123123
<div class="milestone-card">
124124
<h3>Algorithms and Deep Learning Models</h3>
125125
<p>This milestone enhances the website's performance and design by integrating advanced algorithms and Deep Learning models.</p>
126-
<div class="progress-bar">
126+
<div class="milestone-progress-bar">
127127
<div class="progress" style="width: 100%;"></div>
128128
</div>
129129
<p>34 closed / 34 total</p>
130130
</div>
131131
<div class="milestone-card">
132132
<h3>Classification Models</h3>
133133
<p>This Milestone focuses on improving the website's performance and design by implementing and optimizing various classification models.</p>
134-
<div class="progress-bar">
134+
<div class="milestone-progress-bar">
135135
<div class="progress" style="width: 100%;"></div>
136136
</div>
137137
<p>23 closed / 23 total</p>
138138
</div>
139139
<div class="milestone-card">
140140
<h3>Data Analysis</h3>
141141
<p>This milestone is dedicated to enhancing the website's performance and design through the integration and application of data analysis techniques.</p>
142-
<div class="progress-bar">
142+
<div class="milestone-progress-bar">
143143
<div class="progress" style="width: 100%;"></div>
144144
</div>
145145
<p>20 closed / 20 total</p>
146146
</div>
147147
<div class="milestone-card">
148148
<h3>NLP Models</h3>
149149
<p>This milestone focuses on integrating NLP models to enhance website functionality and user interaction, improving performance and design through advanced natural language processing techniques.</p>
150-
<div class="progress-bar">
150+
<div class="milestone-progress-bar">
151151
<div class="progress" style="width: 50%;"></div>
152152
</div>
153153
<p>5 closed / 10 total</p>
154154
</div>
155155
<div class="milestone-card">
156156
<h3>Computer Vision Models</h3>
157157
<p>This milestone focuses on integrating computer vision models to improve website performance and design by enabling advanced image and video analysis capabilities.</p>
158-
<div class="progress-bar">
158+
<div class="milestone-progress-bar">
159159
<div class="progress" style="width: 50%;"></div>
160160
</div>
161161
<p>10 closed / 20 total</p>
162162
</div>
163163
<div class="milestone-card">
164164
<h3>Detection Models</h3>
165165
<p>This milestone involves improving the website's performance and design by implementing advanced detection models to enhance functionality and accuracy.</p>
166-
<div class="progress-bar">
166+
<div class="milestone-progress-bar">
167167
<div class="progress" style="width: 100%;"></div>
168168
</div>
169169
<p>34 closed / 34 total</p>
170170
</div>
171171
<div class="milestone-card">
172172
<h3>Prediction Models</h3>
173173
<p>This milestone aims to integrate advanced prediction models to boost website performance and user experience with cutting-edge algorithms and machine learning techniques.</p>
174-
<div class="progress-bar">
174+
<div class="milestone-progress-bar">
175175
<div class="progress" style="width: 100%;"></div>
176176
</div>
177177
<p>60 closed / 60 total</p>
178178
</div>
179179
<div class="milestone-card">
180180
<h3>Recommendation Models</h3>
181181
<p>This milestone focuses on integrating advanced recommendation models to improve website performance and deliver personalized user experiences.</p>
182-
<div class="progress-bar">
182+
<div class="milestone-progress-bar">
183183
<div class="progress" style="width: 100%;"></div>
184184
</div>
185185
<p>4 closed / 4 total</p>
@@ -215,7 +215,7 @@ <h3>Recommendation Models</h3>
215215
</div>
216216
<button id="go-to-top">TOP▶️</button> <!-- Go to top button -->
217217
<footer class="footer">
218-
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</p>
218+
<div>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</div>
219219
</footer>
220220
<script src="js/script.js"></script>
221221
</body>

Website/styles.css

Lines changed: 68 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,8 @@ body {
4242
background-color: #0a0a2e;
4343
font-family: 'Arial', sans-serif;
4444
display: flex;
45-
flex-direction: column;
46-
color:white;
47-
45+
flex-direction: column;
4846
}
49-
5047
header {
5148
background-color: #121245;
5249
padding: 10px 20px;
@@ -140,11 +137,13 @@ h2 {
140137
font-size: 2em;
141138
margin-bottom: 20px;
142139
animation: slideInRight 1s ease-in-out;
140+
color:white;
143141
}
144142

145143
p {
146144
font-size: 1.2em;
147145
line-height: 1.6;
146+
color:white;
148147
}
149148

150149
button#toggle-stats {
@@ -411,7 +410,9 @@ button#toggle-languages:hover {
411410
transition: transform 0.3s ease, box-shadow 0.3s ease;
412411
animation: fadeIn 1s ease-in-out;
413412
}
414-
413+
.card h3{
414+
color:white;
415+
}
415416
.card-languages{
416417
background: #fff;
417418
border: 1px solid #ddd;
@@ -751,25 +752,24 @@ button#toggle-languages:hover {
751752
#milestones-progress {
752753
margin: 50px 0;
753754
padding: 20px;
754-
background-color: #f9f9f9;
755755
}
756756

757757
#milestones-progress h2 {
758758
text-align: center;
759759
font-size: 2em;
760760
margin-bottom: 20px;
761-
color: #333;
761+
color: white;
762762
animation: slideInRight 1s ease-in-out;
763763
}
764764

765765
.milestones-grid {
766766
display: grid;
767-
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
767+
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
768768
gap: 20px;
769769
}
770770

771771
.milestone-card {
772-
background-color: rgb(87, 251, 248);
772+
background-color: #121245;
773773
padding: 20px;
774774
border-radius: 10px;
775775
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -783,19 +783,19 @@ button#toggle-languages:hover {
783783
}
784784

785785
.milestone-card h3 {
786-
color: #333;
786+
color: white;
787787
font-size: 1.25em;
788788
margin-bottom: 10px;
789789
}
790790

791791
.milestone-card p {
792-
color: #666;
792+
color: white;
793793
font-size: 0.9em;
794794
margin-bottom: 15px;
795795
line-height: 1.5;
796796
}
797797

798-
.progress-bar {
798+
.milestone-progress-bar {
799799
background-color: rgb(116, 243, 209);
800800
border-radius: 5px;
801801
overflow: hidden;
@@ -820,48 +820,34 @@ button#toggle-languages:hover {
820820

821821
/* Dark Mode Styles */
822822
body.dark-mode {
823-
background-color: #121245;
824-
color: #f1f1f1;
825-
}
826-
827-
.dark-mode .navbar {
828-
background-color: #000;
823+
background-color:#f4f4f4;
829824
}
830825

831826
.dark-mode .nav-links a {
832-
color: #fff;
827+
color:#fff;
833828
}
834829

835-
.dark-mode .welcome-title {
836-
color: #fff;
830+
.dark-mode h2{
831+
color:black;
837832
}
838-
839-
.dark-mode .highlight {
840-
color: #fff;
833+
.dark-mode .card h3{
834+
color:black;
841835
}
842-
843-
.dark-mode .stat-card {
844-
background-color: #212148;
845-
}
846-
847-
.dark-mode .stat-card h3 {
848-
color: #fff;
836+
.dark-mode .welcome-section span{
837+
color:rgb(3, 3, 122);
849838
}
850-
851-
.dark-mode .stat-card p {
852-
color: rgb(255, 213, 98);
839+
.dark-mode .welcome-section p{
840+
color:black;
853841
}
854-
855-
.dark-mode .stat-icon {
856-
color: #fff;
842+
.dark-mode .highlight {
843+
color: black;
857844
}
858845

859-
.dark-mode .stat-card:hover {
860-
background-color: #151537;
846+
.dark-mode .stat-card {
847+
background-color: #050066;
861848
}
862-
863-
.dark-mode .stat-card:hover .stat-icon{
864-
color: #fff;
849+
.dark-mode .contri-heading{
850+
color:black;
865851
}
866852

867853

@@ -873,18 +859,49 @@ body.dark-mode {
873859
font-size: 1.2em;
874860
transition: color 0.3s ease;
875861
}
876-
877-
.dark-mode .welcome-section a{
878-
color: #cfd9e5;
862+
.dark-mode #languages{
863+
background-color: #fff;
864+
color: black;
879865
}
880-
881-
#toggle-dark-mode i {
882-
font-size: 1.5em;
866+
.dark-mode #milestone{
867+
background-color: #fff;
868+
color:black;
883869
}
884-
885-
#toggle-dark-mode:hover {
886-
color: #fff;
870+
.dark-mode .card{
871+
background-color: #fff;
872+
}
873+
.dark-mode #milestone{
874+
background-color: #fff;
875+
color:black;
876+
}
877+
.dark-mode #contributors{
878+
background-color: #f9f9f9;
879+
}
880+
.dark-mode #contributors h2{
881+
color: #333;
882+
}
883+
.dark-mode #contributors-grid{
884+
background: linear-gradient(135deg, #f0f4f8, #cfd9e5);
887885
}
888886

887+
.dark-mode .contributor-github {
888+
background: linear-gradient(135deg, #f0f4f8, #cfd9e5);
889+
color: #0366d6;
890+
}
891+
.dark-mode .contributor{
892+
background: #ffffff;
893+
}
889894

895+
.dark-mode #milestones-progress h2 {
896+
color: black;
897+
}
890898

899+
.dark-mode .milestone-card {
900+
background-color: white;
901+
}
902+
.dark-mode .milestone-card h3{
903+
color:black;
904+
}
905+
.dark-mode .milestone-card p{
906+
color:black;
907+
}

0 commit comments

Comments
 (0)