recodehive · sanjay-kv · Aug 25, 2024 · Aug 24, 2024 · Aug 24, 2024
diff --git a/Website/404.html b/Website/404.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page Not Found | ML Repos</title>
+    <link rel="icon" href="logo-bg.png" type="image/png">
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f8f8f8;
+            font-family: Arial, sans-serif;
+            overflow: hidden;
+        }
+
+        .container {
+            text-align: center;
+            padding: 0 20px;
+        }
+
+        .game-container {
+            position: relative;
+            width: 80vw;
+            height: 80vh;
+            max-width: 600px;
+            max-height: 400px;
+            margin-bottom: 20px;
+        }
+
+        .logo {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            background-image: url('logo-bg.png');
+            background-size: contain;
+            background-repeat: no-repeat;
+            cursor: pointer;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            color: #333;
+            padding: 10px;
+            text-align: center;
+        }
+
+        p {
+            font-size: 1.2rem;
+            color: #666;
+            padding: 5px 20px;
+        }
+
+        .score {
+            font-size: 1.3rem;
+            color: #333;
+            margin-bottom: 20px;
+            text-align: left;
+        }
+
+        a {
+            color: #551a8b;
+            font-size: 1.2rem;
+        }
+
+        a:hover {
+            color: #72469b;
+        }
+
+        a:active {
+            color: rgb(47, 47, 247);
+        }
+
+        /* Notification Popup Styles */
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background-color: #333;
+            color: #fff;
+            padding: 15px 25px;
+            border-radius: 8px;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+            opacity: 0;
+            transform: translateY(-30px);
+            transition: opacity 0.5s, transform 0.5s;
+            z-index: 1000;
+        }
+
+        .notification.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            margin-left: 15px;
+            color: #ff7373;
+            cursor: pointer;
+            background: none;
+            border: none;
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+
+        /* Media Queries for responsiveness */
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+                /* Further adjust font size */
+            }
+
+            .score {
+                font-size: 1rem;
+                /* Further adjust font size */
+            }
+
+            p {
+                font-size: 0.9rem;
+                /* Further adjust font size */
+            }
+        }
+
+        @media (max-width: 480px) {
+            .game-container {
+                width: 100vw;
+                /* Full width on very small screens */
+                height: 50vh;
+                /* Adjust height */
+            }
+
+            .logo {
+                width: 60px;
+                /* Smaller logo size */
+                height: 60px;
+            }
+
+            h1 {
+                font-size: 1.5rem;
+                /* Further adjust font size */
+            }
+
+            p {
+                font-size: 0.8rem;
+                /* Further adjust font size */
+            }
+
+            .score {
+                font-size: 0.9rem;
+                /* Further adjust font size */
+            }
+
+            .notification {
+                padding: 8px 15px;
+                /* Adjust padding */
+                max-width: 70%;
+                /* Full width on very small screens */
+            }
+
+            .close-btn {
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <!-- <img src="logo-bg.png" alt="RecodeHive logo"> -->
+    <div class="container">
+        <div class="score" id="score">Score: 0</div>
+        <div class="game-container" id="game-container">
+            <div class="logo" id="logo"></div>
+            <h1>404 - Page Not Found</h1>
+            <p>Sorry, the page you're looking for does not exist. Try catching the logo!</p>
+            <a href="/">Go Back Home</a>
+        </div>
+    </div>
+    <!-- Notification Popup -->
+    <div class="notification" id="notification">
+        Oops! Looks like you've wandered off track. While you're here, try catching the logo for some fun.
+        <button class="close-btn" id="close-btn">&times;</button>
+    </div>
+
+    <!-- // linking script -->
+    <script src="js/404.js"></script>
+</body>
+
+</html>
diff --git a/Website/about.html b/Website/about.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About | ML Repos</title>
+    <link rel="icon" href="logo-bg.png" type="image/png">
+</head>
+<body>
+    <h1>This is the about page</h1>
+</body>
+</html>
diff --git a/Website/contact.html b/Website/contact.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact | ML Repos</title>
+    <link rel="icon" href="logo-bg.png" type="image/png">
+</head>
+<body>
+    <h1>This is the Contact page</h1>
+</body>
+</html>
diff --git a/Website/faq.html b/Website/faq.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FAQ | ML Repos</title>
+    <link rel="icon" href="logo-bg.png" type="image/png">
+</head>
+<body>
+    <h1>This is the FAQ page</h1>
+</body>
+</html>
diff --git a/Website/index.html b/Website/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Machine Learning Repositories</title>
     <link rel="stylesheet" href="styles.css">
-    <link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
+    <link rel="icon" href="logo-bg.png" type="image/png"> <!-- Added favicon -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 <body>
@@ -16,11 +16,11 @@
                 <span class="brand-name">RecodeHive</span>
             </div>
             <ul class="nav-links">
-                <li><a href="#">Home</a></li>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Organization</a></li>
-                <li><a href="#">FAQ</a></li>
-                <li><a href="#">Contact</a></li>
+                <li><a href="/">Home</a></li>
+                <li><a href="/about">About</a></li>
+                <li><a href="/organization">Organization</a></li>
+                <li><a href="/faq">FAQ</a></li>
+                <li><a href="/contact">Contact</a></li>
                 <li>
                     <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
                         <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
@@ -108,7 +108,8 @@ <h1 class="contri-heading">Our Contributors</h1>
 
     <!-- Chatbot Button -->
     <div class="chatbot-button" id="chatbot-button">
-        <img src="logo-bg.png" height="50px" width="50px">
+        <!-- <img src="logo-bg.png" height="50px" width="50px"> -->
+        <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>
     </div>
 
      <!-- Chatbox -->

diff --git a/Website/js/404.js b/Website/js/404.js
@@ -0,0 +1,54 @@
+const logo = document.getElementById('logo');
+        const gameContainer = document.getElementById('game-container');
+        const scoreDisplay = document.getElementById('score');
+        let score = 0;
+
+        function randomPosition() {
+            const containerWidth = gameContainer.offsetWidth;
+            const containerHeight = gameContainer.offsetHeight;
+            const logoWidth = logo.offsetWidth;
+            const logoHeight = logo.offsetHeight;
+
+            // Generatng random positions within the container boundary
+            const randomX = Math.floor(Math.random() * (containerWidth - logoWidth));
+            const randomY = Math.floor(Math.random() * (containerHeight - logoHeight));
+
+            // random positions to the logo
+            logo.style.left = `${randomX}px`;
+            logo.style.top = `${randomY}px`;
+        }
+
+        function randomMovement() {
+            // Move the logo to a random position every 800 to 1500 milliseconds
+            setInterval(() => {
+                randomPosition();
+            }, Math.floor(Math.random() * (1500 - 800 + 1)) + 800);
+        }
+
+        logo.addEventListener('click', () => {
+            score++;
+            scoreDisplay.textContent = `Score: ${score}`;
+            randomPosition();  // change pos after being catched
+        });
+
+        // trigger the random movement when the page loads
+        randomMovement();
+
+        // Show notification when the page loads
+        const notification = document.getElementById('notification');
+        const closeBtn = document.getElementById('close-btn');
+
+        function showNotification() {
+            notification.classList.add('show');
+            // Auto-hide notification after 5 seconds
+            setTimeout(() => {
+                notification.classList.remove('show');
+            }, 5000);
+        }
+
+        closeBtn.addEventListener('click', () => {
+            notification.classList.remove('show');
+        });
+
+        // Display the notification when the page loads
+        window.onload = showNotification;
diff --git a/Website/organization.html b/Website/organization.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Organization | ML Repos</title>
+    <link rel="icon" href="logo-bg.png" type="image/png">
+</head>
+<body>
+    <h1>This is the Organization page</h1>
+</body>
+</html>
diff --git a/Website/server/route.js b/Website/server/route.js
@@ -0,0 +1,34 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const router = express.Router();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+router.get('/', (req, res) => {     // root path
+    res.sendFile(path.resolve(__dirname, '../index.html'));
+});
+
+router.get('/about', (req, res) => {
+    res.sendFile(path.resolve(__dirname, '../about.html'));
+});
+
+router.get('/organization', (req, res) => {
+    res.sendFile(path.resolve(__dirname, '../organization.html'));
+});
+
+router.get('/faq', (req, res) => {
+    res.sendFile(path.resolve(__dirname, '../faq.html'));
+});
+
+router.get('/contact', (req, res) => {
+    res.sendFile(path.resolve(__dirname, '../contact.html'));
+});
+
+router.get('*',(req, res) => {      // routes to handle invalid url path
+    res.status(404).sendFile(path.resolve(__dirname, '../404.html'));
+})
+
+
+export default router;