diff --git a/web-frontend/public/intex.html b/web-frontend/public/intex.html new file mode 100644 index 000000000..ce4a4e743 --- /dev/null +++ b/web-frontend/public/intex.html @@ -0,0 +1,68 @@ + + + + + + NutriHelp Notifications + + + + +
+

NutriHelp

+
+ + + +
+
+

All Notifications

+ +
+ +
+

Unread Notifications

+ +
+ +
+

Unseen Notifications

+ +
+
+ + + + + + + + + diff --git a/web-frontend/public/script.js b/web-frontend/public/script.js new file mode 100644 index 000000000..bc90e0437 --- /dev/null +++ b/web-frontend/public/script.js @@ -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 = ` +

${notification.title}

+

${notification.message}

+ `; + 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..."); + }); +}); diff --git a/web-frontend/public/style.css b/web-frontend/public/style.css new file mode 100644 index 000000000..90d1c4377 --- /dev/null +++ b/web-frontend/public/style.css @@ -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; + } +}