Slider to all pages

sk66641 · Jul 30, 2024 · ac74836 · ac74836
1 parent e29200a
commit ac74836
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 1 deletion.
diff --git a/pages/about.html b/pages/about.html
@@ -161,6 +161,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>

diff --git a/pages/contributors.html b/pages/contributors.html
@@ -162,6 +162,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>

diff --git a/pages/faq.html b/pages/faq.html
@@ -194,6 +194,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>

diff --git a/pages/features.html b/pages/features.html
@@ -160,6 +160,18 @@
             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>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>

diff --git a/pages/feedback.html b/pages/feedback.html
@@ -123,7 +123,17 @@
         <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;">
         <div id="particles-js"></div>