From 1869b84c6ce5c99e1e2121a48e3dc9d1426676c3 Mon Sep 17 00:00:00 2001
From: lorem ipsum <shalinis19137@gmail.com>
Date: Fri, 11 Oct 2024 15:20:19 +0530
Subject: [PATCH]  Realtime Notification option on home page

---
 public/index.html        |  5 ++--
 public/notification.html | 18 +++++++++++++
 public/notify.css        | 55 ++++++++++++++++++++++++++++++++++++++++
 public/notify.js         | 32 +++++++++++++++++++++++
 4 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 public/notification.html
 create mode 100644 public/notify.css
 create mode 100644 public/notify.js
diff --git a/public/index.html b/public/index.html
index afe9c23..b7e2c74 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,7 @@
                     <ul id="navbar">
                         <li title="Login"><a href="choose-file.html">Login</a></li>
                         <li title="Register" style="border-bottom: 2px solid white;border-radius: 9px;"><a href="./signup.html">Register</a></li>
+                        <li title="notifications"><a href="notification.html"> Notifications</a></li>
                         <li title="Contact Us"><a href="./contact-us.html">Contact Us</a></li>
                         <li title="Our Services"><a href="#services">Services</a></li>
                         <li title="About Us"><a href="#about_show">About</a></li>
@@ -99,7 +100,7 @@ <h2>About Us</h2>
             </div>
             <div class="buttons">
                 <button id="prev">
-                    <</button>
+                    </button>
                         <button id="next">></button>
             </div>
             <ul class="dots">
@@ -458,7 +459,7 @@ <h4 id="custom-follow-heading">Follow Us</h4>
     <button id="scrollToTop" title="Go to top" style="display: none;">
         <i class="fa-solid fa-arrow-up"></i>
     </button>
-
+    <script src="notification.js"></script> 
     <script src="script/script.js"></script>
     <script src="script/slider.js"></script>
 </body>
diff --git a/public/notification.html b/public/notification.html
new file mode 100644
index 0000000..a3da660
--- /dev/null
+++ b/public/notification.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real-Time Notifications</title>
+    <link rel="stylesheet" href="notify.css"> <!-- Link to CSS file -->
+</head>
+<body>
+    <div class="notification-container">
+        <h2>Notifications</h2>
+        <div id="notifications"></div>
+        <button id="clear-notifications">Clear Notifications</button>
+    </div>
+
+    <script src="notify.js"></script> <!-- Link to JavaScript file -->
+</body>
+</html>
diff --git a/public/notify.css b/public/notify.css
new file mode 100644
index 0000000..ec8ef65
--- /dev/null
+++ b/public/notify.css
@@ -0,0 +1,55 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #d4edda; /* Light green background color */
+    margin: 0;
+    padding: 20px;
+}
+
+.notification-container {
+    max-width: 600px;
+    margin: auto;
+    background: #fff; /* White background for notification box */
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+}
+
+h2 {
+    text-align: center;
+}
+
+.notification {
+    padding: 10px;
+    border-bottom: 1px solid #e0e0e0;
+    position: relative;
+}
+
+.notification:last-child {
+    border-bottom: none;
+}
+
+.notification p {
+    margin: 0;
+}
+
+.notification-time {
+    font-size: 0.8em;
+    color: #999;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
diff --git a/public/notify.js b/public/notify.js
new file mode 100644
index 0000000..7644999
--- /dev/null
+++ b/public/notify.js
@@ -0,0 +1,32 @@
+// script.js
+
+// Sample notification data
+const notifications = [
+    { message: "New research paper on AI published.", time: new Date().toLocaleTimeString() },
+    { message: "New comment on your research article.", time: new Date().toLocaleTimeString() },
+    { message: "Your research submission has been reviewed.", time: new Date().toLocaleTimeString() }
+];
+
+// Function to display notifications
+function displayNotification(notification) {
+    const notificationsContainer = document.getElementById('notifications');
+    const notificationDiv = document.createElement('div');
+    notificationDiv.classList.add('notification');
+    notificationDiv.innerHTML = `
+        <p>${notification.message}</p>
+        <span class="notification-time">${notification.time}</span>
+    `;
+    notificationsContainer.prepend(notificationDiv); // Add new notifications to the top
+}
+
+// Simulate receiving notifications every 5 seconds
+setInterval(() => {
+    const randomIndex = Math.floor(Math.random() * notifications.length);
+    displayNotification(notifications[randomIndex]);
+}, 5000);
+
+// Clear notifications
+document.getElementById('clear-notifications').addEventListener('click', () => {
+    const notificationsContainer = document.getElementById('notifications');
+    notificationsContainer.innerHTML = ''; // Clear all notifications
+});
