forked from YadavAkhileshh/Alien-Invasion-Defense
-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile.html
125 lines (106 loc) · 4.85 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
<!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>
<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">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}`;
}
if (savedPhone) {
document.getElementById("profilePhone").textContent = `Phone: ${savedPhone}`;
}
if (savedBio) {
document.getElementById("profileBio").textContent = `About Me: ${savedBio}`;
}
if (savedAvatar) {
document.getElementById("profileImage").src = savedAvatar;
}
});
</script>
</body>
</html>