Skip to content
This repository was archived by the owner on Sep 16, 2025. It is now read-only.

notification page #60

Open
navpreetsingh95 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

notification page #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions web-frontend/public/intex.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NutriHelp Notifications</title>
<link rel="stylesheet" href="styles.css" />
<!-- Include your CSS file for styling -->
</head>
<body>
<header>
<h1>NutriHelp</h1>
</header>

<nav>
<ul>
<li><a href="#all">All </a></li>
<li><a href="#unread">Unread </a></li>
<li><a href="#unseen">Unseen </a></li>
</ul>
</nav>

<main>
<section id="all">
<h2>All Notifications</h2>
<ul class="notification-list">
<!-- Populate with notifications using JavaScript -->
</ul>
</section>

<section id="unread">
<h2>Unread Notifications</h2>
<ul class="notification-list">
<!-- Populate with unread notifications using JavaScript -->
</ul>
</section>

<section id="unseen">
<h2>Unseen Notifications</h2>
<ul class="notification-list">
<!-- Populate with unseen notifications using JavaScript -->
</ul>
</section>
</main>

<aside>
<h2>Notification Actions</h2>
<button id="markAsRead">Mark as Read</button>
<button id="delete">Delete</button>
<button id="moreInfo">More Info</button>
</aside>

<footer>
<h2>Settings</h2>
<p>
Notification Preferences:
<input type="checkbox" id="notificationPreferences" />
</p>
<p>
Email Notifications: <input type="checkbox" id="emailNotifications" />
</p>
<p>Notification Sound: <input type="text" id="notificationSound" /></p>
</footer>

<script src="script.js"></script>
<!-- Include your JavaScript file for functionality -->
</body>
</html>
75 changes: 75 additions & 0 deletions web-frontend/public/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
// Sample JavaScript code for populating notifications
document.addEventListener("DOMContentLoaded", function () {
// Simulated data for notifications (replace with actual data from your server)
const notifications = [
{
id: 1,
category: "all",
title: "Notification 1",
message: "HUGE SAVING This week with 50% off Breakfast Deals.",
},
{
id: 2,
category: "unread",
title: "Notification 2",
message:
"Can you say no to a Free Omelette? Today,Buy 1 Mushroom Omelette, Get 1 Free Get the Deal here: LUNCH T&C aplly.",
},
{ id: 3, category: "unseen", title: "Notification 3", message: "N/A" },
// Add more notifications here
];

// Function to populate the notification lists
function populateNotifications(category) {
const list = document.querySelector(`#${category} ul.notification-list`);
list.innerHTML = ""; // Clear existing notifications

const categoryNotifications = notifications.filter(
(n) => n.category === category
);
categoryNotifications.forEach((notification) => {
const li = document.createElement("li");
li.innerHTML = `
<h3>${notification.title}</h3>
<p>${notification.message}</p>
`;
list.appendChild(li);
});
}

// Populate notifications on page load
populateNotifications("all");
populateNotifications("unread");
populateNotifications("unseen");

// Add event listeners for navigation links
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();
const category = this.getAttribute("href").substr(1);
populateNotifications(category);
});
});

// Sample event listener for the "Mark as Read" button (replace with actual functionality)
const markAsReadButton = document.getElementById("markAsRead");
markAsReadButton.addEventListener("click", function () {
// Add your code to mark notifications as read here
alert("Marking notifications as read...");
});

// Sample event listener for the "Delete" button (replace with actual functionality)
const deleteButton = document.getElementById("delete");
deleteButton.addEventListener("click", function () {
// Add your code to delete notifications here
alert("Deleting notifications...");
});

// Sample event listener for the "More Info" button (replace with actual functionality)
const moreInfoButton = document.getElementById("moreInfo");
moreInfoButton.addEventListener("click", function () {
// Add your code to show more info for the selected notification here
alert("Showing more info...");
});
});
98 changes: 98 additions & 0 deletions web-frontend/public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/* Basic page styling */
body {
font-family: Arial, sans-serif;
}

header {
background-color: #9370db;
color: white;
padding: 40px;
border-radius: 60px;
text-align: center;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav a {
text-decoration: none;
color: #9370db;
font-weight: bold;
}

main {
padding: 20px;
}

section h2 {
margin-top: 0;
font-size: 1.2rem;
}

ul.notification-list {
list-style-type: none;
padding: 0;
}

ul.notification-list li {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 10px;
}

aside {
background-color: #f0f0f0;
padding: 20px;
}

button {
display: block;
width: 100%;
margin-bottom: 10px;
}

footer {
background-color: #f0f0f0;
padding: 20px;
}

/* Custom styling for notification actions */
#markAsRead {
background-color: #28a745;
color: white;
border: none;
}

#delete {
background-color: #dc3545;
color: white;
border: none;
}

#moreInfo {
background-color: #007bff;
color: white;
border: none;
}

/* Styling for settings */
footer p {
margin: 0;
}

/* Responsive layout for mobile devices */
@media (max-width: 768px) {
aside {
position: sticky;
top: 0;
background-color: white;
z-index: 1;
}
}