Skip to content

Commit ccf96da

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1176 from vansh-codes/main
Added routes and 404 not found page with a mini game for user interaction
2 parents 35f7bd9 + 86ff925 commit ccf96da

File tree

9 files changed

+345
-10
lines changed

9 files changed

+345
-10
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: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
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">
1010
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1111
</head>
@@ -20,11 +20,11 @@
2020
<span class="brand-name">RecodeHive</span>
2121
</div>
2222
<ul class="nav-links">
23-
<li><a href="#">Home</a></li>
24-
<li><a href="#">About</a></li>
25-
<li><a href="#">Organization</a></li>
26-
<li><a href="#">FAQ</a></li>
27-
<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>
2828
<li>
2929
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
3030
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
@@ -123,7 +123,8 @@ <h1 class="contri-heading">Our Contributors</h1>
123123

124124
<!-- Chatbot Button -->
125125
<div class="chatbot-button" id="chatbot-button">
126-
<img src="logo-bg.png" height="50px" width="50px">
126+
<!-- <img src="logo-bg.png" height="50px" width="50px"> -->
127+
<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>
127128
</div>
128129

129130
<!-- 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;

‎Website/organization.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>Organization | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the Organization page</h1>
11+
</body>
12+
</html>

‎Website/server/route.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import express from 'express';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const router = express.Router();
6+
const __filename = fileURLToPath(import.meta.url);
7+
const __dirname = path.dirname(__filename);
8+
9+
router.get('/', (req, res) => { // root path
10+
res.sendFile(path.resolve(__dirname, '../index.html'));
11+
});
12+
13+
router.get('/about', (req, res) => {
14+
res.sendFile(path.resolve(__dirname, '../about.html'));
15+
});
16+
17+
router.get('/organization', (req, res) => {
18+
res.sendFile(path.resolve(__dirname, '../organization.html'));
19+
});
20+
21+
router.get('/faq', (req, res) => {
22+
res.sendFile(path.resolve(__dirname, '../faq.html'));
23+
});
24+
25+
router.get('/contact', (req, res) => {
26+
res.sendFile(path.resolve(__dirname, '../contact.html'));
27+
});
28+
29+
router.get('*',(req, res) => { // routes to handle invalid url path
30+
res.status(404).sendFile(path.resolve(__dirname, '../404.html'));
31+
})
32+
33+
34+
export default router;

0 commit comments

Comments
 (0)