Skip to content

Commit

Permalink
#972 upadtion testp.html and other files
Browse files Browse the repository at this point in the history
  • Loading branch information
@byteom
byteom committed Nov 8, 2024
1 parent 138761a commit 17f4b49
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 57 deletions.
44 changes: 43 additions & 1 deletion testp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
50 changes: 20 additions & 30 deletions testp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,91 +8,81 @@
<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">
<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">
<!-- 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">
<h3 class="profile-name">Skylar Reed</h3>
<p class="profile-email">Email: [email protected]</p>
<p class="profile-phone">Phone: +987 654 3210</p>
<p class="profile-bio">Joined: October 31, 2024</p>
<p class="profile-bio">About Me: Hello!🙋🏻‍♂️ Feel free to reach out to me at [email protected] 😎</p>
<!-- 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>
</a>
<button class="edit-profile-btn edit_profiled">Edit Profile</button>
</div>
</div>

<div class="content-section">

<h2>Account Details</h2>
<div class="profile-details">
<div class="profile-detail-card" id="profileCard">
<div class="profile-detail-card">
<h3>Address</h3>
<p id="addressText" contenteditable="false">789 Pine Lane, Austin, TX 73301</p>
<a href="#"><button class="edit-profile-btn">Edit</button></a>
<p id="addressText" contenteditable="true">789 Pine Lane, Austin, TX 73301</p>
<button class="edit-profile-btn">Edit</button>
</div>

<div class="profile-detail-card">
<h3>Change Password</h3>
<p>*********63</p>
<button class="edit-profile-btn">Change</button></a>
<button class="edit-profile-btn">Change</button>
</div>

<div class="profile-detail-card">
<h3>Privacy Settings</h3>
<p>Visibility Status: Public</p>
<a href="#">
<button class="edit-profile-btn">Edit</button></a>
<p id="visibility">Visibility Status: Public</p>
<button class="edit-profile-btn">Edit</button>
</div>

<div class="profile-detail-card">
<h3>Recent Activity</h3>
<p>Updated profile information</p>
<a href="#">
<button class="edit-profile-btn">View</button></a>
<button class="edit-profile-btn">View</button>
</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>

<button class="edit-profile-btn">View Notification</button>
</div>

</section>

<script src="testp.js"></script> <!-- Link to your JavaScript file -->
</div>
</body>

</html>

172 changes: 146 additions & 26 deletions testp.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
<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);

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!");
});


// 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;
}
});
});
});

0 comments on commit 17f4b49

Please sign in to comment.