Skip to content

Commit

Permalink
Merge pull request Akshat111111#91 from Subhajit-2023-44/profile
Browse files Browse the repository at this point in the history 
Add a User Profiles page done ! Akshat111111#85
  • Loading branch information
@Akshat111111
Akshat111111 authored Nov 4, 2024
2 parents 74df076 + 4e50005 commit d358fcd
Show file tree
Hide file tree
Showing 4 changed files with 475 additions and 1 deletion.
93 changes: 92 additions & 1 deletion templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,27 @@
font_size:0,
};
</script>
profile

<script
src="https://cdn.gtranslate.net/widgets/latest/popup.js"
defer
></script>


<style>
#toggleBtn {
background-color: #f0f0f0;
border: none;
border-radius: 30px;
padding: 5px;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
</style>
main
<script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>

<button id="toggleBtn">
Expand Down Expand Up @@ -358,6 +379,75 @@ <h2>Buy Stock</h2>


<div class="side-icons">
<!-- Profile Icon -->

<a href="./profile.html" class="profile-link" 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>
/* Override the existing hover styles */
.navbar-nav .nav-item .profile-link:hover {
background-color: transparent !important; /* Remove background color */
border-radius: 0 !important; /* Reset border radius */
transform: none !important; /* Prevent scaling */
}
</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>

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

}
</style>
<div class="icon-content">
<a href="https://github.com" target="_blank" aria-label="GitHub" data-social="github">
<i class="fab fa-github"></i>
Expand Down Expand Up @@ -390,11 +480,12 @@ <h2>Buy Stock</h2>
</a>
</div>


<style>
.side-icons {
position: fixed;
right: 20px;
top: 30%;
top: 20%;
display: flex;
flex-direction: column;
gap: 25px;
Expand Down
97 changes: 97 additions & 0 deletions templates/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!🙋🏻‍♂️ Feel free to reach out to me at [email protected] 😎</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>
Loading

0 comments on commit d358fcd

Please sign in to comment.