Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a User Profiles page done ! #620 #634

Merged
merged 1 commit into from
Nov 2, 2024
Merged

Add a User Profiles page done ! #620 #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -577,6 +577,69 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
</div>
<div id="liveScore ">LIVE SCORE: <span id="score">0</span></div>
<div id="liveLife">LIVE LIFE: <span id="lives">3</span></div>

<a href="./profile.html" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;">
<img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
</a>
</li>

<style>

.profile-icon {

border-radius: 50%;
margin-left: 230px;
margin-top: -35px;

}

.dropdown-menu {

display: none;
position: absolute;
top: 35px; /* Adjust based on the height of your navbar */
right: 0;
background-color: white;
color: black;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 1;

}

.dropdown-menu a {

display: block;
padding: 10px 15px;
text-decoration: none;

}

.dropdown-menu a:hover {

background-color: #f1f1f1;

}
</style>

<script>
function toggleMenu() {
const menu = document.getElementById('profileMenu');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.profile-icon img')) {
const menu = document.getElementById('profileMenu');
if (menu.style.display === 'block') {
menu.style.display = 'none';
}
}
}
</script>

</script>
<div id="gameInfo">
<i class="fas fa-star"></i> <span id="score">0</span> |
<i class="fas fa-level-up-alt"></i> <span id="level">1</span> |
Expand Down
97 changes: 97 additions & 0 deletions profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!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">
<img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">

<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!🙋🏻‍♂️ my current Goals is Unlock all Achievements. 😎</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>
</div>
</div>

<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">16 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></a>
</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>

</body>

</html>
Loading