From a88cccc651006c4de2fcedb2e1d35eb5787e879b Mon Sep 17 00:00:00 2001
From: Mayukh-Mandal2005 <135952646+Mayukh-Mandal2005@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:26:31 +0530
Subject: [PATCH 1/2] dark-mode-toggle-button improved

---
 index.html | 58 +++++++++++++++++++++++++++++++++--
 style.css  | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 145 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 650f7c40..9eaf75d4 100644
--- a/index.html
+++ b/index.html
@@ -50,10 +50,45 @@
                     <li><a href="#others">Others</a></li>
 
                     <li class="login"><a href="login/login.html">Login</a></li>
-                    <li><label class="switch">
+                    <!-- <li><label class="switch">
                             <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
                             <span class="slider"></span>
                         </label></li>
+                    -->
+                        
+                    <!--Dark and Light Mode Toggle Button-->
+                    <li>
+                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()" />
+                        <label for="theme-toggle">
+                            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+                            <svg class="sun" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+                                <g id="SVGRepo_bgCarrier" stroke-width="0" />
+
+                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
+
+                                <g id="SVGRepo_iconCarrier">
+                                    <circle cx="12" cy="12" r="6" stroke="#000000" stroke-width="1.5" />
+                                    <path d="M12 2V3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M12 21V22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M22 12L21 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M3 12L2 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M19.0708 4.92969L18.678 5.32252" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M5.32178 18.6777L4.92894 19.0706" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M19.0708 19.0703L18.678 18.6775" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                    <path d="M5.32178 5.32227L4.92894 4.92943" stroke="#000000" stroke-width="1.5" stroke-linecap="round" />
+                                </g>
+
+                            </svg>
+                            <?xml version="1.0" encoding="utf-8"?>
+                            <svg class="moon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
+                                    stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </label>
+                    </li>
+
                     <!-- Inside the navbar ul -->
                     <a href="#" class="cart-button">
                         <img src="images/cart.png" alt="Cart Icon">
@@ -759,9 +794,28 @@ <h2>Feedback Form</h2>
     <div class="gtranslate_wrapper"></div>
     <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+    <script>
+        function toggleTheme() {
+            const body = document.body;
+            body.classList.toggle('dark-mode');
+            if (body.classList.contains('dark-mode')) {
+                localStorage.setItem('theme', 'dark');
+            } else {
+                localStorage.setItem('theme', 'light');
+            }
+        }
+
+        window.onload = function () {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme === 'dark') {
+                document.body.classList.add('dark-mode');
+                document.getElementById('theme-toggle').checked = true;
+            }
+        }
+    </script>
 
 
 </body>
 
 
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index 8890a47c..ed9f69cf 100644
--- a/style.css
+++ b/style.css
@@ -46,6 +46,94 @@ html::-webkit-scrollbar-thumb:window-inactive {
   background: rgb(156, 156, 156);
 }
 
+/*dark and light mode toggle button*/
+label {
+    width: 75px;
+    height: 30px;
+    position: relative;
+    display: block;
+    background: #ebebeb;
+    border-radius: 30px;
+    box-shadow: inset 0px 3.75px 11.25px rgba(0, 0, 0, 0.4), inset 0px -3.75px 11.25px rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transform: 0.3s;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    margin: 0 auto; /* Center align the toggle switch */
+}
+
+label:after {
+    content: "";
+    width: 27px;
+    height: 27px;
+    position: absolute;
+    top: 1.5px;
+    left: 2.25px;
+    background: linear-gradient(180deg, #ffcc89, #d88606);
+    border-radius: 135px;
+    box-shadow: 0px 3.75px 7.5px rgba(0, 0, 0, 0.2);
+    transform: 0.3s;
+}
+
+input {
+    width: 0;
+    height: 0;
+    visibility: hidden;
+}
+
+input:checked+label {
+    background: #d3d3d3;
+}
+
+input:checked+label:after {
+    left: 73px;
+    transform: translateX(-100%);
+    background: linear-gradient(180deg, #777, #3a3a3a);
+}
+
+label:active:after {
+    width: 37.5px;
+}
+
+.background {
+    width: 100vw;
+    height: 100vh;
+    background: #fff;
+    z-index: -1;
+    position: absolute;
+    transition: 0.3s;
+}
+
+input:checked+label+.background {
+    background: #242424;
+}
+
+label svg {
+    position: absolute;
+    width: 22.5px;
+    top: 3.75px;
+    z-index: 100;
+}
+
+label svg.sun {
+    left: 3.75px;
+    fill: #fff;
+    transition: 0.3s;
+}
+
+label svg.moon {
+    left: 48.75px;
+    fill: #7e7e7e;
+    transition: 0.3s;
+}
+
+input:checked+label svg.sun {
+    fill: #7e7e7e;
+}
+
+input:checked+label svg.moon {
+    fill: #fff;
+}
+
 .card {
   width: 50%; /* Set a specific width */
   margin: 10px auto; /* Center horizontally with automatic margins */
@@ -137,7 +225,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
 
 label {
   display: block;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 
 input,

From 8fdee3a1649d72550f3112de5ee20454be4cbb7d Mon Sep 17 00:00:00 2001
From: Mayukh-Mandal2005 <135952646+Mayukh-Mandal2005@users.noreply.github.com>
Date: Fri, 18 Oct 2024 23:26:45 +0530
Subject: [PATCH 2/2] made necessary changes as asked

---
 index.html | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 style.css  | 31 +++++++++++---------
 2 files changed, 96 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 9eaf75d4..f4afcd81 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,19 @@
         <div id="progressBar"></div>
     </div>
 
+    <script>
+        window.onscroll = function () {
+            updateProgressBar();
+        };
+
+        function updateProgressBar() {
+            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            var scrollPercent = (scrollTop / scrollHeight) * 100;
+            document.getElementById("progressBar").style.width = scrollPercent + "%";
+        }
+    </script>
+
     <div class="container">
 
         <div class="navbar">
@@ -55,11 +68,11 @@
                             <span class="slider"></span>
                         </label></li>
                     -->
-                        
+
                     <!--Dark and Light Mode Toggle Button-->
                     <li>
-                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()" />
-                        <label for="theme-toggle">
+                        <input class="toggle-input" type="checkbox" id="theme-toggle" onchange="toggleTheme()" />
+                        <label class="toggle-label" for="theme-toggle">
                             <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                             <svg class="sun" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
@@ -590,15 +603,15 @@ <h2>Contact Our Customer Support Team</h2>
                 <div class="form-section">
                     <form id="contactForm">
                         <div class="form-group">
-                            <label for="name"><i class="fas fa-user"></i> Name</label>
+                            <label class="contact-label" for="name"><i class="fas fa-user"></i> Name</label>
                             <input type="text" id="name" name="name" placeholder="Your name">
                         </div>
                         <div class="form-group">
-                            <label for="email"><i class="fas fa-envelope"></i> Email</label>
+                            <label class="contact-label" for="email"><i class="fas fa-envelope"></i> Email</label>
                             <input type="email" id="email" name="email" placeholder="Your email">
                         </div>
                         <div class="form-group">
-                            <label for="message"><i class="fas fa-comment"></i> Message</label>
+                            <label class="contact-label" for="message"><i class="fas fa-comment"></i> Message</label>
                             <textarea id="message" name="message" placeholder="Your message"></textarea>
                         </div>
                         <button type="submit">Send</button>
@@ -735,6 +748,65 @@ <h2>Feedback Form</h2>
         </svg>
     </button>
 
+    <script>
+        // Show or hide the scroll-top button based on scroll position
+            window.addEventListener('scroll', function () {
+                const scrollTopButton = document.querySelector('.scroll-top');
+                if (window.pageYOffset > 300) {
+                    scrollTopButton.style.display = 'block';
+                } else {
+                    scrollTopButton.style.display = 'none';
+                }
+            });
+
+            document.addEventListener('DOMContentLoaded', function () {
+                const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+                const progressRing = scrollToTopBtn.querySelector('circle');
+                const rootElement = document.documentElement;
+
+                const radius = progressRing.r.baseVal.value;
+                const circumference = radius * 2 * Math.PI;
+
+                progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
+                progressRing.style.strokeDashoffset = circumference;
+
+                function setProgress(percent) {
+                    const offset = circumference - percent / 100 * circumference;
+                    progressRing.style.strokeDashoffset = offset;
+                }
+
+                function handleScroll() {
+                    const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
+                    const scrolled = (rootElement.scrollTop / scrollTotal) * 100;
+
+                    // Show or hide the scroll-to-top button based on scroll position
+                    if (window.pageYOffset > 300) {
+                        scrollToTopBtn.classList.add('show');
+                    } else {
+                        scrollToTopBtn.classList.remove('show');
+                    }
+
+                    // Update progress circle
+                    requestAnimationFrame(() => {
+                        setProgress(scrolled);
+                    });
+                }
+
+                function scrollToTop() {
+                    rootElement.scrollTo({
+                        top: 0,
+                        behavior: 'smooth'
+                    });
+                }
+
+                scrollToTopBtn.addEventListener('click', scrollToTop);
+                window.addEventListener('scroll', handleScroll);
+
+                // Initial check in case the page is already scrolled on load
+                handleScroll();
+            });
+    </script>
+
     <script>
         let cartItemCount = 0;
 
diff --git a/style.css b/style.css
index ed9f69cf..f1726969 100644
--- a/style.css
+++ b/style.css
@@ -47,7 +47,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
 }
 
 /*dark and light mode toggle button*/
-label {
+.toggle-label {
     width: 75px;
     height: 30px;
     position: relative;
@@ -61,7 +61,7 @@ label {
     margin: 0 auto; /* Center align the toggle switch */
 }
 
-label:after {
+.toggle-label:after {
     content: "";
     width: 27px;
     height: 27px;
@@ -74,23 +74,23 @@ label:after {
     transform: 0.3s;
 }
 
-input {
+.toggle-input {
     width: 0;
     height: 0;
     visibility: hidden;
 }
 
-input:checked+label {
+.toggle-input:checked+ .toggle-label {
     background: #d3d3d3;
 }
 
-input:checked+label:after {
+.toggle-input:checked+ .toggle-label:after {
     left: 73px;
     transform: translateX(-100%);
     background: linear-gradient(180deg, #777, #3a3a3a);
 }
 
-label:active:after {
+.toggle-label:active:after {
     width: 37.5px;
 }
 
@@ -103,34 +103,34 @@ label:active:after {
     transition: 0.3s;
 }
 
-input:checked+label+.background {
+.toggle-input:checked+.toggle-label+.background {
     background: #242424;
 }
 
-label svg {
+.toggle-label svg {
     position: absolute;
     width: 22.5px;
     top: 3.75px;
     z-index: 100;
 }
 
-label svg.sun {
+.toggle-label svg.sun {
     left: 3.75px;
     fill: #fff;
     transition: 0.3s;
 }
 
-label svg.moon {
+.toggle-label svg.moon {
     left: 48.75px;
     fill: #7e7e7e;
     transition: 0.3s;
 }
 
-input:checked+label svg.sun {
+.toggle-input:checked+label svg.sun {
     fill: #7e7e7e;
 }
 
-input:checked+label svg.moon {
+.toggle-input:checked+label svg.moon {
     fill: #fff;
 }
 
@@ -223,11 +223,16 @@ input:checked+label svg.moon {
   margin-bottom: 20px;
 }
 
-label {
+.toggle-label {
   display: block;
   margin-bottom: 15px;
 }
 
+label{
+    display: block;
+    margin-bottom: 15px;
+}
+
 input,
 textarea {
   width: 100%; /* Adjust width for better alignment */