From 17f4b49a23f4f02d68099cf41d70944b8d180b1b Mon Sep 17 00:00:00 2001 From: byteom <123omsinghpipariya@gmail.com> Date: Fri, 8 Nov 2024 13:52:24 +0530 Subject: [PATCH] #972 upadtion testp.html and other files --- testp.css | 44 +++++++++++++- testp.html | 50 +++++++--------- testp.js | 172 +++++++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 209 insertions(+), 57 deletions(-) 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 397e983..fc35cb6 100644 --- a/testp.html +++ b/testp.html @@ -8,8 +8,6 @@ - - Profile Page @@ -17,7 +15,6 @@
-

Your Profile

@@ -25,74 +22,67 @@

Your Profile
- Profile Image + + 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 😎

+ +

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

-
-
- - +
-

Account Details

-
+

Address

-

789 Pine Lane, Austin, TX 73301

- +

789 Pine Lane, Austin, TX 73301

+

Change Password

*********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.

-
-
+ +
- - diff --git a/testp.js b/testp.js index a95bf93..accf8f3 100644 --- a/testp.js +++ b/testp.js @@ -1,33 +1,153 @@ -// Get current timestamp -const getCurrentTimestamp = () => { - return new Date().getTime(); +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" }; - // Store last active timestamp in LocalStorage - const storeLastActive = () => { - const lastActive = getCurrentTimestamp(); - localStorage.setItem('lastActive', lastActive); - }; + 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." + ]; - // Get last active timestamp from LocalStorage - const getLastActive = () => { - return localStorage.getItem('lastActive'); - }; + // 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); - // Update last active timestamp on page load and interaction - document.addEventListener('DOMContentLoaded', storeLastActive); - document.addEventListener('click', storeLastActive); - document.addEventListener('scroll', storeLastActive); - document.addEventListener('keydown', storeLastActive); - - // Example usage: - const displayLastActive = () => { - const lastActive = getLastActive(); - const formattedTime = new Date(parseInt(lastActive)).toLocaleString(); - document.getElementById('last-active').innerHTML = Last active: ${formattedTime}; - }; + 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); - displayLastActive(); + // 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!"); + }); - \ No newline at end of file + // 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; + } + }); + }); +});