-
Notifications
You must be signed in to change notification settings - Fork 322
/
profile.html
173 lines (155 loc) · 7.39 KB
/
profile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
edit
<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>
main
</head>
<body>
edit
<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 will be set dynamically -->
<img id="profileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
<div class="profile-info">
<!-- Profile info will be set dynamically -->
<h3 id="profileName" class="profile-name">Skylar Reed</h3>
<p id="profileEmail" class="profile-email">Email: [email protected]</p>
<p id="profilePhone" class="profile-phone">Phone: +987 654 3210</p>
<p id="profileBio" class="profile-bio">About Me: Hello!🙋🏻♂️ Feel free to reach out to me at [email protected] 😎</p>
<p id="aboutMe" class="profile-bio">Joined: October 31, 2024</p>
<p id="last-active" class="profile-bio">Last active: </p>
</div>
</div>
<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" 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>
<button class="edit-profile-btn" id="changePasswordBtn">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>
</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>
</div>
</form>
</div>
<div class="button-container">
<button type="submit" id="saveButton">Save</button>
<button type="button" id="cancelButton">Cancel</button>
</div>
<section class="content-section">
<h2>Notifications</h2>
<div class="card">
<p>Your profile has been updated successfully!</p>
<button class="edit-profile-btn">View Notification</button>
</div>
<div class="card">
<p>Joshef Roy has sent you a friend request. Accept or decline?</p>
<button class="edit-profile-btn">View Notification</button>
</div>
</section>
</div>
<!-- Change Password Modal -->
<div id="changePasswordModal" class="modal">
<div class="modal-content">
<span class="close-btn" id="closeChangePasswordModal">×</span>
<h2>Change Password</h2>
<form id="changePasswordForm">
<label for="currentPassword">Current Password:</label>
<input type="text" id="currentPassword" required><br>
<label for="newPassword">New Password:</label>
<input type="password" id="newPassword" required><br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" required><br>
<button type="submit">Update Password</button>
</form>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Load saved profile information from localStorage
const savedName = localStorage.getItem("profileName");
const savedEmail = localStorage.getItem("profileEmail");
const savedPhone = localStorage.getItem("profilePhone");
const savedBio = localStorage.getItem("profileBio");
const savedAvatar = localStorage.getItem("selectedAvatar");
// Update profile information if it exists in localStorage
if (savedName) {
document.getElementById("profileName").textContent = savedName;
}
if (savedEmail) {
document.getElementById("profileEmail").textContent = `Email: ${savedEmail}`;
}
if (savedPhone) {
document.getElementById("profilePhone").textContent = `Phone: ${savedPhone}`;
}
if (savedBio) {
document.getElementById("profileBio").textContent = `About Me: ${savedBio}`;
}
if (savedAvatar) {
document.getElementById("profileImage").src = savedAvatar;
}
// Open Change Password Modal
document.getElementById("changePasswordBtn").addEventListener("click", function() {
console.log("Opening Change Password Modal");
document.getElementById("changePasswordModal").style.display = "block";
});
// Close Change Password Modal
document.getElementById("closeChangePasswordModal").addEventListener("click", function() {
document.getElementById("changePasswordModal").style.display = "none";
});
// Handle Change Password Form Submission
document.getElementById("changePasswordForm").addEventListener("submit", function(e) {
e.preventDefault();
const currentPassword = document.getElementById("currentPassword").value;
const newPassword = document.getElementById("newPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;
if (newPassword === confirmPassword) {
// Save the new password in sessionStorage (for now)
sessionStorage.setItem("userPassword", newPassword);
alert("Password updated successfully!");
document.getElementById("changePasswordModal").style.display = "none";
} else {
alert("Passwords do not match!");
}
});
});
</script>
<script src="profile.js"></script>
main
</body>
</html>