diff --git a/testp.css b/testp.css index c4e1357..67b9ebf 100644 --- a/testp.css +++ b/testp.css @@ -252,4 +252,46 @@ body { } - \ No newline at end of file + +/* Popup Styles */ +.popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.popup-content { + background: white; + padding: 20px; + border-radius: 8px; + width: 80%; + max-width: 400px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +.popup-content p { + font-size: 16px; + margin: 20px 0; +} + +.close-popup { + background: #079874; + color: white; + border: none; + padding: 8px 16px; + border-radius: 5px; + cursor: pointer; + font-size: 14px; +} + +.close-popup:hover { + background: #076887; +} diff --git a/testp.html b/testp.html index 357299c..870932c 100644 --- a/testp.html +++ b/testp.html @@ -6,14 +6,13 @@ - + Profile Page
-

Your Profile

@@ -21,6 +20,23 @@

Your Profile
+ + + Profile Image + +
+ +

Skylar Reed

+

Email: skylar.reed@example.com

+

Phone: +987 654 3210

+

Joined: October 31, 2024

+

About Me: Hello!🙋🏻‍♂️ Feel free to reach out to me at skylar.reed@example.com 😎

+

Last active: 31/10/2024, 11:12 PM

+
+
+ + Profile Image @@ -37,6 +53,7 @@

Skylar Reed

+
@@ -44,51 +61,78 @@

Skylar Reed

Account Details

+ +
+

Address

+

789 Pine Lane, Austin, TX 73301

+ +

Friends List

27 friends online

+

Change Password

+ +

*********63

+

*****63

+

Privacy Settings

+ +

Visibility Status: Public

+ +

Visibility Status: Public

+

Recent Activity

Updated profile information

+ + + +
-

Notifications

+

Your profile has been updated successfully!

+ +

Your ticket has been successfully booked! Confirmation number: 71381.

+

Joshef Roy has sent you a friend request. Accept or decline?

+
-
+ + +
+
- + - diff --git a/testp.js b/testp.js index 5d2524f..3b4e5f0 100644 --- a/testp.js +++ b/testp.js @@ -1,3 +1,158 @@ + +document.addEventListener('DOMContentLoaded', () => { + // Elements for profile information + const profileElements = { + name: "profile-name", + email: "profile-email", + phone: "profile-phone", + joined: "joined", + about: "about", + address: "addressText", + visibility: "visibility" + }; + + const profileImage = document.getElementById('profileImage'); + const notificationContainer = document.querySelector('.content-section:last-child'); + const randomNotifications = [ + "Your profile information was successfully updated.", + "You have a new message from a friend.", + "Your subscription will expire in 3 days.", + "Password change was successful.", + "A friend accepted your connection request." + ]; + + // Load saved data from localStorage and make elements editable + for (let key in profileElements) { + const elementId = profileElements[key]; + const element = document.getElementById(elementId); + const savedData = localStorage.getItem(elementId); + + if (savedData) { + element.textContent = savedData; + } + + // Make each field editable + element.setAttribute('contenteditable', 'true'); + element.style.borderBottom = "1px dashed #333"; + + // Save data to localStorage on blur + element.addEventListener('blur', () => { + localStorage.setItem(elementId, element.textContent); + }); + } + + // Load saved profile image + const savedImage = localStorage.getItem('profileImage'); + if (savedImage) { + profileImage.src = savedImage; + } + + // Handle profile image upload + const imageInput = document.createElement('input'); + imageInput.type = 'file'; + imageInput.accept = 'image/*'; + imageInput.style.display = 'none'; + + profileImage.addEventListener('click', () => { + imageInput.click(); + }); + + imageInput.addEventListener('change', () => { + const file = imageInput.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => { + profileImage.src = reader.result; + localStorage.setItem('profileImage', reader.result); + }; + reader.readAsDataURL(file); + } + }); + document.body.appendChild(imageInput); + + // Add notification functionality + const addNotificationButton = document.createElement('button'); + addNotificationButton.className = 'edit-profile-btn'; + addNotificationButton.textContent = 'Add Random Notification'; + notificationContainer.appendChild(addNotificationButton); + + addNotificationButton.addEventListener('click', () => { + const randomMessage = randomNotifications[Math.floor(Math.random() * randomNotifications.length)]; + addNotification(randomMessage); + }); + + function addNotification(message) { + const notification = document.createElement('div'); + notification.className = 'card'; + notification.innerHTML = ` +

${message}

+ + `; + notificationContainer.appendChild(notification); + + // Add event listener to show popup when "View Notification" is clicked + notification.querySelector('.view-notification-btn').addEventListener('click', () => { + showPopup(message); + }); + + saveNotificationsToLocalStorage(); + } + + function saveNotificationsToLocalStorage() { + const notifications = Array.from(notificationContainer.querySelectorAll('.card p')).map(notification => notification.textContent); + localStorage.setItem('notifications', JSON.stringify(notifications)); + } + + function loadNotificationsFromLocalStorage() { + const savedNotifications = JSON.parse(localStorage.getItem('notifications') || '[]'); + savedNotifications.forEach(message => addNotification(message)); + } + loadNotificationsFromLocalStorage(); + + // Show popup for notification messages + function showPopup(message) { + const popup = document.createElement('div'); + popup.className = 'popup'; + popup.innerHTML = ` +
+

${message}

+ +
+ `; + document.body.appendChild(popup); + + // Close the popup on button click + popup.querySelector('.close-popup').addEventListener('click', () => { + document.body.removeChild(popup); + }); + } + + // Handle Edit Profile button + document.querySelector('.edit_profiled').addEventListener('click', () => { + alert("You can now edit the profile details directly. Click on any field to edit and changes are saved automatically!"); + }); + + // Handle Edit, Change, and View buttons + document.querySelectorAll('.profile-detail-card button').forEach(button => { + button.addEventListener('click', (event) => { + const action = event.target.textContent.trim(); + switch (action) { + case "Edit": + alert("Editing enabled. Click on the content to modify."); + break; + case "Change": + alert("Password change functionality is currently a placeholder."); + break; + case "View": + alert("Viewing recent activity."); + break; + default: + break; + } + }); + }); +}); +======= // Get current timestamp const getCurrentTimestamp = () => { return new Date().getTime(); @@ -36,4 +191,4 @@ const displayLastActive = () => { // Display the last active time on page load document.addEventListener('DOMContentLoaded', displayLastActive); - + \ No newline at end of file