From c84f2e5907ab50ce9e48f788ee1551e9ed8d659b Mon Sep 17 00:00:00 2001
From: unknown <dindishriya@gmail.com>
Date: Sat, 2 Nov 2024 21:42:11 +0530
Subject: [PATCH 1/2] Scroll back button styling

---
 public/index.html | 148 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 146 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index aeba9d5..fc8ec81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -879,9 +879,153 @@ <h2>🎉 Thank You! 👏</h2> <!-- Added emoji here -->
             </div>
         </div>
     </footer>
-    <button id="scrollToTop" title="Back to top" style="bottom: 75px;">
-        <i class="fa-solid fa-arrow-up"></i>
+    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 72px;">
+        <div class="scroll-top-icon">
+            <i class="fa-solid fa-arrow-up"></i>
+        </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>
+    <style>
+        .scroll-top {
+            position: fixed;
+            right: 1.6%;
+            background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
+            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 */
+        }
+
+        .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;
+        }
+
+        .scroll-top:hover .scroll-top-icon {
+            transform: translateY(-3px);
+        }
+
+        /* Progress Ring Styling */
+        .progress-ring {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: rotate(-90deg);
+            /* To start from the top */
+        }
+
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.35s;
+            transform-origin: 50% 50%;
+        }
+
+        /* 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);
+            }
+        }
+
+        .scroll-top:hover {
+            animation: pulse 1.5s infinite;
+        }
+
+        .scroll-top.show {
+            animation: none;
+            /* No animation when showing the button */
+        }
+
+        .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;
+        }
+
+        // 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);
+        });
+
+        // Smooth scroll to top when the button is clicked
+        scrollToTopBtn.addEventListener("click", () => {
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+            });
+        });
+
+    </script>
 
     <script src="script/script.js"></script>
     <script src="script/slider.js"></script>

From 299776c80de79a0245739e5e5893de417b1ffe2f Mon Sep 17 00:00:00 2001
From: unknown <dindishriya@gmail.com>
Date: Sun, 3 Nov 2024 12:37:12 +0530
Subject: [PATCH 2/2] added the styles to the css file

---
 public/css/style.css | 94 +++++++++++++++++++++++++++++++++++++++++++
 public/index.html    | 96 --------------------------------------------
 2 files changed, 94 insertions(+), 96 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index ee6aa72..886fb6f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -128,6 +128,100 @@ nav ul li:first-child:hover {
   );
   border-image-slice: 1;
 }
+.scroll-top {
+  position: fixed;
+  right: 1.6%;
+  background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
+  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 */
+}
+
+.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;
+}
+
+.scroll-top:hover .scroll-top-icon {
+  transform: translateY(-3px);
+}
+
+/* Progress Ring Styling */
+.progress-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  /* To start from the top */
+}
+
+.progress-ring__circle {
+  transition: stroke-dashoffset 0.35s;
+  transform-origin: 50% 50%;
+}
+
+/* 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);
+  }
+}
+
+.scroll-top:hover {
+  animation: pulse 1.5s infinite;
+}
+
+.scroll-top.show {
+  animation: none;
+  /* No animation when showing the button */
+}
+
+.scroll-top.show:hover {
+  animation: pulse 1.5s infinite;
+  /* Pulse on hover */
+}
 
 .HamBurger {
   font-size: 24px;
diff --git a/public/index.html b/public/index.html
index fc8ec81..da9f5a7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -888,102 +888,6 @@ <h2>🎉 Thank You! 👏</h2> <!-- Added emoji here -->
                 cy="30"></circle>
         </svg>
     </button>
-    <style>
-        .scroll-top {
-            position: fixed;
-            right: 1.6%;
-            background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
-            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 */
-        }
-
-        .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;
-        }
-
-        .scroll-top:hover .scroll-top-icon {
-            transform: translateY(-3px);
-        }
-
-        /* Progress Ring Styling */
-        .progress-ring {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            transform: rotate(-90deg);
-            /* To start from the top */
-        }
-
-        .progress-ring__circle {
-            transition: stroke-dashoffset 0.35s;
-            transform-origin: 50% 50%;
-        }
-
-        /* 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);
-            }
-        }
-
-        .scroll-top:hover {
-            animation: pulse 1.5s infinite;
-        }
-
-        .scroll-top.show {
-            animation: none;
-            /* No animation when showing the button */
-        }
-
-        .scroll-top.show:hover {
-            animation: pulse 1.5s infinite;
-            /* Pulse on hover */
-        }
-    </style>
     <script>
         // Get the button
         const scrollToTopBtn = document.getElementById("scrollToTopBtn");