Skip to content

Commit

Permalink
Merge pull request #2814 from samarsajad/profile
Browse files Browse the repository at this point in the history 
added my profile on missing pages
  • Loading branch information
@huamanraj
huamanraj authored Aug 9, 2024
2 parents bd8c993 + ffcde3e commit 05a6f5b
Show file tree
Hide file tree
Showing 10 changed files with 1,059 additions and 1 deletion.
107 changes: 106 additions & 1 deletion Mystical-fantaies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,64 @@
</ul>
</div>
</li>
<div class="action">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
<li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
<li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
<li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
<li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
<li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
<li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
</ul>
</div>
</div>


<script>
document.addEventListener("DOMContentLoaded", () => {
const savedAvatar = localStorage.getItem("selectedAvatar");
if (savedAvatar) {
document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
}
});

function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}

document.addEventListener("click", function(event) {
const profile = document.querySelector(".profile");
const menu = document.querySelector(".menu");

if (!profile.contains(event.target) && !menu.contains(event.target)) {
menu.classList.remove("active");
}
});

let lastScrollTop = 0;
const header = document.querySelector('.header');

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Downscroll
header.style.transform = 'translateY(-120%)';
} else {
// Upscroll
header.style.transform = 'translateY(0)';
}

lastScrollTop = scrollTop;
});
</script>


<!-- Google Translate Element -->
<li class="navbar-item">
Expand Down Expand Up @@ -203,7 +261,54 @@
.hover\:grow:hover {
transform: scale(1.02);
}


.menu {
display: none;
position: absolute;
top: 80px;
right: 0;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 200px;
z-index: 1000;
margin-right:200px;
}

.menu.active {
display: block;
}

.menu h3 {
padding: 10px;
text-align: center;
}

.menu ul {
list-style: none;
padding: 10px 0;
}

.menu ul li {
padding: 10px;
display: flex;
align-items: center;
}

.menu ul li img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.profile img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}



</style>
Expand Down
105 changes: 105 additions & 0 deletions costefficient.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,53 @@
text-align: center; /* Center align the text */
}

.menu {
display: none;
position: absolute;
top: 80px;
right: 0;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 200px;
z-index: 1000;
margin-right:10px;
}

.menu.active {
display: block;
}

.menu h3 {
padding: 10px;
text-align: center;
}

.menu ul {
list-style: none;
padding: 10px 0;
}

.menu ul li {
padding: 10px;
display: flex;
align-items: center;
}

.menu ul li img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.profile img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.accept-cookies,
.reject-cookies {
width: 260px; /* Decrease the button width */
Expand Down Expand Up @@ -797,6 +844,64 @@
</ul>
</div>
</li>
<div class="action">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
<li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
<li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
<li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
<li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
<li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
<li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
</ul>
</div>
</div>


<script>
document.addEventListener("DOMContentLoaded", () => {
const savedAvatar = localStorage.getItem("selectedAvatar");
if (savedAvatar) {
document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
}
});

function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}

document.addEventListener("click", function(event) {
const profile = document.querySelector(".profile");
const menu = document.querySelector(".menu");

if (!profile.contains(event.target) && !menu.contains(event.target)) {
menu.classList.remove("active");
}
});

let lastScrollTop = 0;
const header = document.querySelector('.header');

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Downscroll
header.style.transform = 'translateY(-120%)';
} else {
// Upscroll
header.style.transform = 'translateY(0)';
}

lastScrollTop = scrollTop;
});
</script>



</ul>
Expand Down
105 changes: 105 additions & 0 deletions environmental-impact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,53 @@
color: #A30F17;
}

.menu {
display: none;
position: absolute;
top: 80px;
right: 0;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 200px;
z-index: 1000;
margin-right:10px;
}

.menu.active {
display: block;
}

.menu h3 {
padding: 10px;
text-align: center;
}

.menu ul {
list-style: none;
padding: 10px 0;
}

.menu ul li {
padding: 10px;
display: flex;
align-items: center;
}

.menu ul li img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.profile img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#learn-more-link,
#show-less-link {
color: #A30F17;
Expand Down Expand Up @@ -797,6 +844,64 @@
</ul>
</div>
</li>
<div class="action">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
<li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
<li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
<li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
<li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
<li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
<li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
</ul>
</div>
</div>


<script>
document.addEventListener("DOMContentLoaded", () => {
const savedAvatar = localStorage.getItem("selectedAvatar");
if (savedAvatar) {
document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
}
});

function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}

document.addEventListener("click", function(event) {
const profile = document.querySelector(".profile");
const menu = document.querySelector(".menu");

if (!profile.contains(event.target) && !menu.contains(event.target)) {
menu.classList.remove("active");
}
});

let lastScrollTop = 0;
const header = document.querySelector('.header');

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Downscroll
header.style.transform = 'translateY(-120%)';
} else {
// Upscroll
header.style.transform = 'translateY(0)';
}

lastScrollTop = scrollTop;
});
</script>



</ul>
Expand Down
Loading

0 comments on commit 05a6f5b

Please sign in to comment.