-
Notifications
You must be signed in to change notification settings - Fork 317
/
profile.html
145 lines (127 loc) · 5.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<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: skylar.reed@example.com</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 skylar.reed@example.com 😎</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">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>
</div>
</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>
<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}`; // Corrected string interpolation
}
if (savedPhone) {
document.getElementById("profilePhone").textContent = `Phone: ${savedPhone}`; // Corrected string interpolation
}
if (savedBio) {
document.getElementById("profileBio").textContent = `About Me: ${savedBio}`; // Corrected string interpolation
}
if (savedAvatar) {
document.getElementById("profileImage").src = savedAvatar;
}
});
</script>
</body>
</html>