From e29200a6c6bd9f2385508f6bc607af87c629fcc8 Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Mon, 29 Jul 2024 00:37:35 +0530
Subject: [PATCH] Updating theme toggle

---
 pages/privacy.html | 26 ++++++++++++--------------
 pages/terms.html   | 24 +++++++++++-------------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/pages/privacy.html b/pages/privacy.html
index b57b99e..b18b6c0 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -146,7 +146,18 @@
           animateCircles();
         });
       </script>
-    <div>
+        <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+        
+        <div id="sun-moon-mode-toggler" class="toggle-container" >
+            <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
+            <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
+                <div class="toggle-button">
+                    <span class="light-mode-icon"><img src="../sun.svg" style = "display: block;"></span>
+                    <span class="dark-mode-icon"><img src="../moon.svg"style = "display: block;"></span>
+                </div>
+            </label>
+        </div>
+        <div>
         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
     </div>
     <div class="snowflakes" style="display: block;">
@@ -288,19 +299,6 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         </div>
     </footer>
 
-    <!-- Mode toggler -->
-    <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
-        top: 30px; 
-        right: 30px; 
-        z-index: 100; 
-        display: flex; 
-        align-items: center; 
-        border: none; 
-        background-color: transparent;">
-        <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-        <span class="slider" style="width: 40px; height: 20px;"></span>
-    </label>
-
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
     <script src="../js/script.js"></script>
diff --git a/pages/terms.html b/pages/terms.html
index 950cba2..bf24699 100644
--- a/pages/terms.html
+++ b/pages/terms.html
@@ -146,6 +146,17 @@
           animateCircles();
         });
       </script>
+       <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+        
+       <div id="sun-moon-mode-toggler" class="toggle-container" >
+           <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
+           <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
+               <div class="toggle-button">
+                   <span class="light-mode-icon"><img src="../sun.svg" style = "display: block;"></span>
+                   <span class="dark-mode-icon"><img src="../moon.svg"style = "display: block;"></span>
+               </div>
+           </label>
+       </div>
     <div>
         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
     </div>
@@ -297,19 +308,6 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         </div>
     </footer>
 
-    <!-- Mode toggler -->
-    <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
-        top: 30px; 
-        right: 30px; 
-        z-index: 100; 
-        display: flex; 
-        align-items: center; 
-        border: none; 
-        background-color: transparent;">
-        <input type="checkbox" id="themeToggle" onclick="toggleTheme()" checked aria-label="Switch theme mode">
-        <span class="slider" style="width: 40px; height: 20px;"></span>
-    </label>
-
 
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>