Skip to content

Commit

Permalink
Merge pull request #415 from saadgibawa/bugfix
Browse files Browse the repository at this point in the history 
Bugs fixed
  • Loading branch information
@aslams2020
aslams2020 authored Nov 9, 2024
2 parents a7d5ab7 + 9343d55 commit 033dc31
Show file tree
Hide file tree
Showing 16 changed files with 528 additions and 1,644 deletions.
241 changes: 88 additions & 153 deletions Achievements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<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.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Tony Stark's Remarkable Achievements</title>
<link rel="website icon" href="/assets/logo/icon.png">
<style>
Expand Down Expand Up @@ -84,178 +85,112 @@
color: #d3d1d1;
font-family: Arial, Helvetica, sans-serif;
}
.go-top-btn {
position: fixed;
bottom: 35px;
right: 35px;
cursor: pointer;
border-radius: 50%;
height: 60px;
width: 60px;
background: #ff0015;
border: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.go-top-btn:hover {
background-color: #ac0000;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}

</style>
</head>
<body>

<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 25px;">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
<button id="BacktoTop">
<div class="circle1">
<svg
id="back-to-top"
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-arrow-up-circle-fill"
viewBox="0 0 16 16"
>
<path
d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"
></path>
</svg>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
</button>
<style>
.scroll-top {
position: fixed;
right: 1.6%;
background: linear-gradient(100deg, #b33535, #ff903c, #ff6905);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
overflow: visible;
z-index: 10;
/* Ensure button is on top */
}

.scroll-top.show {
opacity: 1;
visibility: visible;
}

.scroll-top:hover {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
#BacktoTop {
display: block;
/* Ensure the button is part of the layout */
position: fixed;
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
background-color: rgb(170, 5, 5);
border-radius: 50%;
border: none;
cursor: pointer;
text-align: center;
line-height: 50px;
font-size: 24px;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: opacity 1.5s, visibility 1.5s, box-shadow 0.3s ease;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626,
0 0 6px 2px rgba(255, 255, 255, 0.2);
/* Adjusted outer rings */
overflow: hidden;
}

.scroll-top:active {
transform: scale(1.05);
/* Minor scale reduction on click */
}

.scroll-top-icon {
position: relative;
z-index: 2;
transition: transform 0.3s ease;

.circle1 {
display: flex;
align-items: center;
justify-content: center;
}

.scroll-top:hover .scroll-top-icon {
transform: translateY(-3px);

#BacktoTop:hover {
background-color: rgb(106, 12, 11);
/* Darker shade on hover */
transform: scale(1.1);
/* Slight zoom effect on hover */
}

/* Progress Ring Styling */
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
/* To start from the top */

#BacktoTop svg {
fill: #b4a933;
transition: fill 0.3s ease-in-out;
}

.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform-origin: 50% 50%;

#BacktoTop:hover svg {
fill: #ffd700;
}

/* Pulse Animation */
@keyframes pulse {
0% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}

50% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
}

100% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}
#BacktoTop{
animation: glow 5s infinite alternate;
}

.scroll-top:hover {
animation: pulse 1.5s infinite;
@keyframes glow {
from {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 5px -8px #6a0a0a;
}

.scroll-top.show {
animation: none;
/* No animation when showing the button */
to {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2), 0 0 10px 8px #7b0a0a;
}

.scroll-top.show:hover {
animation: pulse 1.5s infinite;
/* Pulse on hover */
}
</style>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
/* Back to Top Button */
const scrollToTopBtn = document.getElementById("BacktoTop");
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (
document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50
) {
scrollToTopBtn.style.visibility = "visible";
scrollToTopBtn.style.opacity = "1";
} else {
scrollToTopBtn.style.visibility = "hidden";
scrollToTopBtn.style.opacity = "0";
}
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);

scrollToTopBtn.addEventListener("click", function () {
// Smooth scroll back to top
window.scrollTo({ top: 0, behavior: "smooth" });
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>
</script>

<h1>Tony Stark's Remarkable Achievements</h1>

Expand Down
Loading

0 comments on commit 033dc31

Please sign in to comment.