Merge pull request #535 from Jasleen1210/slider

Theme toggle error
sk66641 · Jul 31, 2024 · 82169f3 · 82169f3
2 parents c6654c5 + 08d87d9
commit 82169f3
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 1 deletion.
diff --git a/pages/about.html b/pages/about.html
@@ -135,6 +135,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" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
   </div>

diff --git a/pages/contributors.html b/pages/contributors.html
@@ -136,6 +136,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" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
   </div>

diff --git a/pages/faq.html b/pages/faq.html
@@ -168,6 +168,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" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
   </div>

diff --git a/pages/features.html b/pages/features.html
@@ -134,7 +134,23 @@
             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>
+
+    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
+
     <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>

diff --git a/pages/feedback.html b/pages/feedback.html
@@ -97,9 +97,24 @@
         <div class="circle"></div>
         <div class="circle"></div>
       </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>
+    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
+    <div class="snowflakes" style="display: block;">
+
       <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
       <div class="snowflakes" style="display: block;">
+
         <div id="particles-js"></div>
     </div>
     <div class="navHeader">