Skip to content

Commit 8aa1c0c

Browse files
sanjay-kvsanjay-kv
authored
Merge branch 'main' into task2
2 parents a5effc3 + ccf96da commit 8aa1c0c

File tree

11 files changed

+681
-79
lines changed

11 files changed

+681
-79
lines changed

‎Website/404.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Page Not Found | ML Repos</title>
8+
<link rel="icon" href="logo-bg.png" type="image/png">
9+
<style>
10+
body {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
margin: 0;
16+
background-color: #f8f8f8;
17+
font-family: Arial, sans-serif;
18+
overflow: hidden;
19+
}
20+
21+
.container {
22+
text-align: center;
23+
padding: 0 20px;
24+
}
25+
26+
.game-container {
27+
position: relative;
28+
width: 80vw;
29+
height: 80vh;
30+
max-width: 600px;
31+
max-height: 400px;
32+
margin-bottom: 20px;
33+
}
34+
35+
.logo {
36+
position: absolute;
37+
width: 80px;
38+
height: 80px;
39+
background-image: url('logo-bg.png');
40+
background-size: contain;
41+
background-repeat: no-repeat;
42+
cursor: pointer;
43+
}
44+
45+
h1 {
46+
font-size: 2.5rem;
47+
color: #333;
48+
padding: 10px;
49+
text-align: center;
50+
}
51+
52+
p {
53+
font-size: 1.2rem;
54+
color: #666;
55+
padding: 5px 20px;
56+
}
57+
58+
.score {
59+
font-size: 1.3rem;
60+
color: #333;
61+
margin-bottom: 20px;
62+
text-align: left;
63+
}
64+
65+
a {
66+
color: #551a8b;
67+
font-size: 1.2rem;
68+
}
69+
70+
a:hover {
71+
color: #72469b;
72+
}
73+
74+
a:active {
75+
color: rgb(47, 47, 247);
76+
}
77+
78+
/* Notification Popup Styles */
79+
.notification {
80+
position: fixed;
81+
top: 20px;
82+
right: 20px;
83+
background-color: #333;
84+
color: #fff;
85+
padding: 15px 25px;
86+
border-radius: 8px;
87+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
88+
opacity: 0;
89+
transform: translateY(-30px);
90+
transition: opacity 0.5s, transform 0.5s;
91+
z-index: 1000;
92+
}
93+
94+
.notification.show {
95+
opacity: 1;
96+
transform: translateY(0);
97+
}
98+
99+
.close-btn {
100+
position: absolute;
101+
top: 10px;
102+
right: 10px;
103+
margin-left: 15px;
104+
color: #ff7373;
105+
cursor: pointer;
106+
background: none;
107+
border: none;
108+
font-size: 1.2rem;
109+
font-weight: bold;
110+
}
111+
112+
/* Media Queries for responsiveness */
113+
@media (max-width: 768px) {
114+
h1 {
115+
font-size: 2rem;
116+
/* Further adjust font size */
117+
}
118+
119+
.score {
120+
font-size: 1rem;
121+
/* Further adjust font size */
122+
}
123+
124+
p {
125+
font-size: 0.9rem;
126+
/* Further adjust font size */
127+
}
128+
}
129+
130+
@media (max-width: 480px) {
131+
.game-container {
132+
width: 100vw;
133+
/* Full width on very small screens */
134+
height: 50vh;
135+
/* Adjust height */
136+
}
137+
138+
.logo {
139+
width: 60px;
140+
/* Smaller logo size */
141+
height: 60px;
142+
}
143+
144+
h1 {
145+
font-size: 1.5rem;
146+
/* Further adjust font size */
147+
}
148+
149+
p {
150+
font-size: 0.8rem;
151+
/* Further adjust font size */
152+
}
153+
154+
.score {
155+
font-size: 0.9rem;
156+
/* Further adjust font size */
157+
}
158+
159+
.notification {
160+
padding: 8px 15px;
161+
/* Adjust padding */
162+
max-width: 70%;
163+
/* Full width on very small screens */
164+
}
165+
166+
.close-btn {
167+
font-size: 0.9rem;
168+
}
169+
}
170+
</style>
171+
</head>
172+
173+
<body>
174+
<!-- <img src="logo-bg.png" alt="RecodeHive logo"> -->
175+
<div class="container">
176+
<div class="score" id="score">Score: 0</div>
177+
<div class="game-container" id="game-container">
178+
<div class="logo" id="logo"></div>
179+
<h1>404 - Page Not Found</h1>
180+
<p>Sorry, the page you're looking for does not exist. Try catching the logo!</p>
181+
<a href="/">Go Back Home</a>
182+
</div>
183+
</div>
184+
<!-- Notification Popup -->
185+
<div class="notification" id="notification">
186+
Oops! Looks like you've wandered off track. While you're here, try catching the logo for some fun.
187+
<button class="close-btn" id="close-btn">&times;</button>
188+
</div>
189+
190+
<!-- // linking script -->
191+
<script src="js/404.js"></script>
192+
</body>
193+
194+
</html>

‎Website/about.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the about page</h1>
11+
</body>
12+
</html>

‎Website/contact.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Contact | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the Contact page</h1>
11+
</body>
12+
</html>

‎Website/faq.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>FAQ | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the FAQ page</h1>
11+
</body>
12+
</html>

‎Website/index.html‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,47 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Machine Learning Repositories</title>
77
<link rel="stylesheet" href="styles.css">
8-
<link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
8+
<link rel="icon" href="logo-bg.png" type="image/png"> <!-- Added favicon -->
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1011
</head>
1112
<body>
13+
<div class="loading-container" id="loading-animation">
14+
<div class="loader"></div>
15+
</div>
1216
<header>
1317
<nav class="navbar">
1418
<div class="logo-container">
1519
<img src="logo-bg.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
1620
<span class="brand-name">RecodeHive</span>
1721
</div>
1822
<ul class="nav-links">
19-
<li><a href="#">Home</a></li>
20-
<li><a href="#">About</a></li>
21-
<li><a href="#">Organization</a></li>
22-
<li><a href="#">FAQ</a></li>
23-
<li><a href="#">Contact</a></li>
23+
<li><a href="/">Home</a></li>
24+
<li><a href="/about">About</a></li>
25+
<li><a href="/organization">Organization</a></li>
26+
<li><a href="/faq">FAQ</a></li>
27+
<li><a href="/contact">Contact</a></li>
2428
<li>
2529
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
2630
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
2731
</a>
2832
</li>
33+
<li>
34+
<button id="toggle-dark-mode">
35+
<i class="fas fa-moon"></i>
36+
</button>
37+
</li>
2938
</ul>
3039
</nav>
3140
</header>
3241

3342
<main>
3443
<section class="welcome-section">
35-
<div class="container">
36-
<div>
37-
<div>
38-
<h1 class="welcome-title">Welcome to <span class="highlight">Machine Learning Repositories</span></h1>
39-
<p class="welcome-description">Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the <span> <a href="https://github.com/recodehive"> RecodeHive </a></span>community.</p>
40-
</div>
41-
</div>
42-
</div>
44+
<h2>Welcome to the Machine Learning Repositories</h2>
45+
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
4346
</section>
4447

48+
4549
<!-- Toggle button for Repository Statistics -->
4650
<section>
4751
<button id="toggle-stats"><span id="display">Show</span> Repository Statistics</button>
@@ -84,11 +88,22 @@ <h3>Most Used Language</h3>
8488
</div>
8589
</section>
8690

87-
<!-- Languages -->
91+
<!-- Languages and Milestone-->
92+
93+
<section class="language-and-milestone">
8894
<section id="languages">
89-
<h2>Languages Used</h2>
95+
<div class="text-base">Languages</div>
9096
<ul id="language-list"></ul>
9197
</section>
98+
<section id="milestone">
99+
<div class="text-base">Milestones Progress</div>
100+
<div class="chart-container">
101+
<canvas id="milestoneChart"></canvas>
102+
<div class="legend">
103+
</div>
104+
</div>
105+
</section>
106+
</section>
92107

93108
<section id="repo-list">
94109
<h2>Repositories</h2>
@@ -176,7 +191,8 @@ <h3>Recommendation Models</h3>
176191

177192
<!-- Chatbot Button -->
178193
<div class="chatbot-button" id="chatbot-button">
179-
<img src="logo-bg.png" height="50px" width="50px">
194+
<!-- <img src="logo-bg.png" height="50px" width="50px"> -->
195+
<svg fill="#444" width="163px" height="163px" viewBox="-0.96 -0.96 25.92 25.92" xmlns="http://www.w3.org/2000/svg" stroke="#444" stroke-width="0.00024000000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#fff" stroke-width="0.096"></g><g id="SVGRepo_iconCarrier"><path d="M21.928 11.607c-.202-.488-.635-.605-.928-.633V8c0-1.103-.897-2-2-2h-6V4.61c.305-.274.5-.668.5-1.11a1.5 1.5 0 0 0-3 0c0 .442.195.836.5 1.11V6H5c-1.103 0-2 .897-2 2v2.997l-.082.006A1 1 0 0 0 1.99 12v2a1 1 0 0 0 1 1H3v5c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5a1 1 0 0 0 1-1v-1.938a1.006 1.006 0 0 0-.072-.455zM5 20V8h14l.001 3.996L19 12v2l.001.005.001 5.995H5z"></path><ellipse cx="8.5" cy="12" rx="1.5" ry="2"></ellipse><ellipse cx="15.5" cy="12" rx="1.5" ry="2"></ellipse><path d="M8 16h8v2H8z"></path></g></svg>
180196
</div>
181197

182198
<!-- Chatbox -->

‎Website/js/404.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const logo = document.getElementById('logo');
2+
const gameContainer = document.getElementById('game-container');
3+
const scoreDisplay = document.getElementById('score');
4+
let score = 0;
5+
6+
function randomPosition() {
7+
const containerWidth = gameContainer.offsetWidth;
8+
const containerHeight = gameContainer.offsetHeight;
9+
const logoWidth = logo.offsetWidth;
10+
const logoHeight = logo.offsetHeight;
11+
12+
// Generatng random positions within the container boundary
13+
const randomX = Math.floor(Math.random() * (containerWidth - logoWidth));
14+
const randomY = Math.floor(Math.random() * (containerHeight - logoHeight));
15+
16+
// random positions to the logo
17+
logo.style.left = `${randomX}px`;
18+
logo.style.top = `${randomY}px`;
19+
}
20+
21+
function randomMovement() {
22+
// Move the logo to a random position every 800 to 1500 milliseconds
23+
setInterval(() => {
24+
randomPosition();
25+
}, Math.floor(Math.random() * (1500 - 800 + 1)) + 800);
26+
}
27+
28+
logo.addEventListener('click', () => {
29+
score++;
30+
scoreDisplay.textContent = `Score: ${score}`;
31+
randomPosition(); // change pos after being catched
32+
});
33+
34+
// trigger the random movement when the page loads
35+
randomMovement();
36+
37+
// Show notification when the page loads
38+
const notification = document.getElementById('notification');
39+
const closeBtn = document.getElementById('close-btn');
40+
41+
function showNotification() {
42+
notification.classList.add('show');
43+
// Auto-hide notification after 5 seconds
44+
setTimeout(() => {
45+
notification.classList.remove('show');
46+
}, 5000);
47+
}
48+
49+
closeBtn.addEventListener('click', () => {
50+
notification.classList.remove('show');
51+
});
52+
53+
// Display the notification when the page loads
54+
window.onload = showNotification;

0 commit comments

Comments
 (0)