Skip to content

Commit

Permalink
Merge pull request #1624 from Subhajit-2023-44/profile
Browse files Browse the repository at this point in the history 
Add a User Profiles page done ! #1599
  • Loading branch information
@hiteashgupta1
hiteashgupta1 authored Nov 3, 2024
2 parents 52944b9 + d6d619d commit 494779b
Show file tree
Hide file tree
Showing 5 changed files with 441 additions and 6 deletions.
31 changes: 25 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -382,19 +382,38 @@ <h2>WordWise</h2>
<a href="contact_us.html">Contact Us</a>
<a href="give_feedback.html">Give Feedback</a>
</div>

<div class="dropdown">
<!-- Profile Icon -->
<a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
<i class="fas fa-user-circle"></i>
</a>


<a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
<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>

<!-- Dropdown Menu -->
<ul class="dropdown-menu" id="dropdownMenu">
<ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
<li><a href="./profile.html">My Profile</a></li>
<li><a href="#login" onclick="openForm('login')">Login</a></li>
<li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
</ul>
</div>


<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) {
const menu = document.getElementById('profileMenu');
if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
menu.style.display = 'none';
}
}
</script>

<!-- Login Form -->
<div class="form-popup" id="loginForm">
<form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
Expand Down
97 changes: 97 additions & 0 deletions profile.html
View file
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!🙋🏻‍♂️ Join me as we explore the world together—one destination at a time! 😎</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>Address</h3>
<p id="addressText" contenteditable="false">789 Pine Lane, Austin, TX 73301</p>
<a href="#"><button class="edit-profile-btn">Edit</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>
36 changes: 36 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3858,4 +3858,40 @@ h1 + p, p + p {
}
.containerNumbers p {
color: white;
}

.profile-icon {

border-radius: 50%;
position: relative;
margin-left: 20px; /* Adjust space between Login button and Profile icon */

}

.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;

}
Loading

1 comment on commit 494779b

@vercel
Copy link

@vercel vercel bot commented on 494779b Nov 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

word-wise – ./

word-wise-anshikas-projects-45924011.vercel.app
word-wise-pi.vercel.app
word-wise-git-main-anshikas-projects-45924011.vercel.app

Please sign in to comment.