ankit071105 · byteom · Nov 8, 2024 · Nov 9, 2024
diff --git a/testp.css b/testp.css
@@ -252,4 +252,46 @@ body {
 
 }
 
-
+
+/* 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
@@ -6,21 +6,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="testp.css"> <!-- Link to your CSS file -->
-    <script src="testp.js" defer></script>
+
     <title>Profile Page</title>
 </head>
 
 <body>
 
     <div class="profile-container">
-
         <div class="content-section">
             <h2>Your Profile</h2> 
             <a href="index.html">
                 <i class="fas fa-home"></i>
             </a>
             <div class="profile-card">
                 <div class="profile-header">
+
+                    <!-- Profile Image with upload functionality -->
+                    <img src="https://i.postimg.cc/tCL5Td4H/gold-membership-icon-default-avatar-profile-icon-membership-icon-social-media-user-image-illustratio.jpg" 
+                         alt="Profile Image" class="profile-image" id="profileImage">
+
+                    <div class="profile-info">
+                        <!-- Editable fields with IDs -->
+                        <h3 id="profile-name" class="profile-name">Skylar Reed</h3>
+                        <p id="profile-email" class="profile-email">Email: [email protected]</p>
+                        <p id="profile-phone" class="profile-phone">Phone: +987 654 3210</p>
+                        <p id="joined" class="profile-bio">Joined: October 31, 2024</p>
+                        <p id="about" class="profile-bio">About Me: Hello!🙋🏻‍♂️ Feel free to reach out to me at [email protected] 😎</p>
+                        <p id="last-active">Last active: 31/10/2024, 11:12 PM</p>
+                    </div>
+                </div>
+                <button class="edit-profile-btn edit_profiled">Edit Profile</button>
+
                     <!-- Profile image will be set dynamically -->
                     <img id="profileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
 
@@ -37,58 +53,86 @@ <h3 id="profileName" class="profile-name">Skylar Reed</h3>
                 <a href="profileedit.html">
                     <button class="edit-profile-btn edit_profiled">Edit Profile</button>
                 </a>
+
             </div>
         </div>
 
         <!-- Account Details and other sections remain the same -->
         <div class="content-section">
             <h2>Account Details</h2>
             <div class="profile-details">
+
+                <div class="profile-detail-card">
+                    <h3>Address</h3>
+                    <p id="addressText" contenteditable="true">789 Pine Lane, Austin, TX 73301</p>
+                    <button class="edit-profile-btn">Edit</button>
+
                 <div class="profile-detail-card" id="profileCard">
                     <h3>Friends List</h3>
                     <p id="addressText" contenteditable="false">27 friends online</p>
                     <a href="#"><button class="edit-profile-btn">View</button></a>
+
                 </div>
 
                 <div class="profile-detail-card">
                     <h3>Change Password</h3>
+
+                    <p>*********63</p>
+
                     <p>*****63</p>
+
                     <button class="edit-profile-btn">Change</button>
                 </div>
 
                 <div class="profile-detail-card">
                     <h3>Privacy Settings</h3>
+
+                    <p id="visibility">Visibility Status: Public</p>
+                    <button class="edit-profile-btn">Edit</button>
+
                     <p>Visibility Status: Public</p>
                     <a href="#">
                         <button class="edit-profile-btn">Edit</button>
                     </a>
+
                 </div>
 
                 <div class="profile-detail-card">
                     <h3>Recent Activity</h3>
                     <p>Updated profile information</p>
+
+                    <button class="edit-profile-btn">View</button>
+
                     <a href="#">
                         <button class="edit-profile-btn">View</button>
                     </a>
+
                 </div>
-
             </div>
 
         </div>
 
         <section class="content-section">
             <h2>Notifications</h2>
+            <!-- Notifications section -->
             <div class="card">
                 <p>Your profile has been updated successfully!</p>
                 <button class="edit-profile-btn">View Notification</button>
             </div>
             <div class="card">
+
+                <p>Your ticket has been successfully booked! Confirmation number: 71381.</p>
+
                 <p>Joshef Roy has sent you a friend request. Accept or decline?</p>
+
                 <button class="edit-profile-btn">View Notification</button>
             </div>
-
         </section>
 
+
+        <script src="testp.js"></script> <!-- Link to your JavaScript file -->
+    </div>
+
     </div>
 
     <script>
@@ -122,7 +166,6 @@ <h2>Notifications</h2>
             }
         });
     </script>
-
+ 
 </body>
-
 </html>
diff --git 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 = `
+          <p>${message}</p>
+          <button class="edit-profile-btn view-notification-btn">View Notification</button>
+      `;
+      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 = `
+          <div class="popup-content">
+              <p>${message}</p>
+              <button class="close-popup">Close</button>
+          </div>
+      `;
+      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);
-
+