From 5c283fa1dc284d240f88e8c480bde115adf30fb7 Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Mon, 29 Jul 2024 00:24:06 +0530
Subject: [PATCH 1/2] Theme slider

Adjusted slider on 404 page, deleted existing styes, added styles.css, edited the js file to recognize new toggle, solved overwriting issues
---
 404.html      |  17 ++++---
 css/404.css   |  32 +-------------
 css/style.css | 120 ++++++++++++++++++++++++--------------------------
 index.html    | 108 +--------------------------------------------
 js/404.js     |   2 +-
 5 files changed, 72 insertions(+), 207 deletions(-)
diff --git a/404.html b/404.html
index e6bcebe..ae06d92 100644
--- a/404.html
+++ b/404.html
@@ -8,25 +8,30 @@
     <meta name="description" content="Page not found on the Random Disco Light Simulator site. Please check the URL or return to the homepage.">
     <link rel="icon" href="assets/images/favicon/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="./css/404.css">
+    <link rel="stylesheet" href="./css/style.css">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <title>Error - 404</title>
     <script src="./js/404.js" defer></script>
 </head>
 
 <body>
+    <div class="errorpage"></div>
     <div class="stars"></div>
     <div class="container">
         <div class="text1">Oops!</div>
         <div class="text2">404 - Page not Found</div>
         <div class="text3">The page you are looking for might have been removed, had its name changed, or is temporarily
             unavailable.</div>
-        <div class="text4 text3">Redirecting in <strong></strong> seconds</div>
-        <div class="text5"><a href="index.html">Go to HomePage</a></div>
-        <div class="dark-mode-toggle">
-            <input type="checkbox" id="dark-mode-toggle">
-            <label for="dark-mode-toggle">Dark Mode</label>
+            <div class="text4 text3">Redirecting in <strong></strong> seconds</div>
+            <div class="text5"><a href="index.html">Go to HomePage</a></div>
         </div>
-    </div>
+        <div id="sun-moon-mode-toggler" class="toggle-container" >
+            <input type="checkbox" id="themeToggle" class="switch-checkbox">
+            <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>
 </body>
 
 </html>
diff --git a/css/404.css b/css/404.css
index 6f64b8d..1592662 100644
--- a/css/404.css
+++ b/css/404.css
@@ -101,6 +101,7 @@ a {
     border-radius: 50px;
     transition: background-color 0.3s ease;
     animation: slideUp 2s ease-in-out;
+    font-size: 16px;
 }
 
 a:hover {
@@ -192,37 +193,6 @@ a:hover {
     }
 }
 
-/* Dark Mode Toggle */
-
-.dark-mode-toggle {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: white;
-}
-
-.dark-mode-toggle label {
-    margin-left: 5px;
-    cursor: pointer;
-}
-
-.dark-mode-toggle input[type="checkbox"] {
-    display: none;
-}
-
-.dark-mode-toggle input[type="checkbox"] + label:before {
-    content: '\1F31E'; /* Sun emoji for light mode */
-    font-size: 20px;
-}
-
-.dark-mode-toggle input[type="checkbox"]:checked + label:before {
-    content: '\1F30C'; /* Moon emoji for dark mode */
-}
-
 body.dark-mode {
     background: #333; /* Dark background color */
     color: white;
diff --git a/css/style.css b/css/style.css
index 7354ec4..6c7c48d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -939,9 +939,15 @@ nav ul li a:hover {
   text-align: center;
 }
 
-/* Styles for the the theme toggle checkbox */
-
-.theme-toggle {
+/* Styled for the theme toggle */
+.toggle-container {
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 30px 0 0 30px;
+  right: -4px;
+  top: 15px;
   position: fixed;
   top: 30px;
   right: 20px;
@@ -955,88 +961,76 @@ nav ul li a:hover {
   margin: 0 5px;
 }
 
-.theme-toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+/* Hidden Checkbox */
+.switch-checkbox {
+  display: none;
 }
 
-.slider {
+.theme-switch {
+  position: relative;
+  width: 45px;
+  height: 30px;
+  background-color: #ccc;
+  border-radius: 20px;
   cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0.85;
-  background-color: #000000;
-  border-radius: 34px;
-  transition: background-color 0.4s;
-  box-shadow: 0 0 3px #ffffff;
-}
-
-@media screen and (max-width: 425px) {
-  .slider {
-    cursor: pointer;
-    position: absolute;
-    top: -15px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0.85;
-    background-color: #000000;
-    border-radius: 34px;
-    transition: background-color 0.4s;
-    box-shadow: 0 0 3px #ffffff;
-  }
-
-  .input {
-    width: 15px;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.5s ease;
 }
 
-.slider:hover {
-  opacity: 1;
+.theme-switch .light-mode-icon,
+.theme-switch .dark-mode-icon {
+  font-size: 19px;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 0.5s ease, color 0.5s ease;
 }
 
-.light-mode .slider {
-  background-color: #ffffff;
-  box-shadow: 0 0 5px #020202;
+.theme-switch .light-mode-icon {
+  color: #f39c12;
 }
 
-.light-mode .slider:before {
-  height: 16px;
-  width: 16px;
-  left: 2px;
-  bottom: 2px;
-  background-image: linear-gradient(to bottom right, yellow, orange, red);
-  box-shadow: none;
+.theme-switch .dark-mode-icon {
+  color: #bdc3c7;
+  opacity: 0;
 }
 
-.slider:before {
+.toggle-button {
   position: absolute;
-  content: "";
-  height: 14px;
-  width: 14px;
+  top: 3px;
   left: 3px;
-  bottom: 3px;
-  /* background-image: linear-gradient(to bottom right, yellow, orange, red); */
-  background-image: linear-gradient(black, rgb(18, 18, 18));
-  box-shadow: inset -3px -1.4px #ffffff, inset -3.2px -1.4px 0.2px 0.1px rgb(58, 52, 58);
+  width: 25px;
+  height: 25px;
+  background-color: #fff;
   border-radius: 50%;
-  transition: transform 0.4s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  transition: transform 0.5s ease, background-color 0.5s ease;
 }
 
-.dark-mode .slider:before {
-  transition: transform 0.4s;
+/* Checkbox Checked State */
+.switch-checkbox:checked + .theme-switch {
+  background-color: #34495e;
 }
 
-input:checked+.slider:before {
-  transform: translateX(20px);
+.switch-checkbox:checked + .theme-switch .light-mode-icon {
+  opacity: 0;
 }
 
+.switch-checkbox:checked + .theme-switch .dark-mode-icon {
+  opacity: 1;
+}
 
+.switch-checkbox:checked + .theme-switch .toggle-button {
+  transform: translateX(13px);
+  /* background-color: #34495e; */
+}
 
+/* sidebar social icons panel */
 .socialIcons {
 
   position: fixed;
diff --git a/index.html b/index.html
index decf4b3..8898420 100644
--- a/index.html
+++ b/index.html
@@ -416,18 +416,8 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
 
     <!-- <div id="message" aria-live="polite">The timer has ended. The page will reload.</div> -->
 
-    <!-- <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> -->
-          <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+    
+    <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()">
@@ -439,100 +429,6 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
       </label>
   </div>
 
-  <style>
-    .toggle-container {
-      transform: translate(-50%, -50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 30px 0 0 30px;
-      right: -4px;
-      top: 15px;
-      position: fixed;
-      top: 30px;
-      right: 20px;
-      z-index: 100;
-      display: flex;
-      align-items: center;
-      border: none;
-      background-color: transparent;
-      width: 40px;
-      height: 20px;
-      margin: 0 5px;
-    }
-    
-    
-    /* Hidden Checkbox */
-    .switch-checkbox {
-      display: none;
-    }
-    
-    .theme-switch {
-      position: relative;
-      width: 45px;
-      height: 30px;
-      background-color: #ccc;
-      border-radius: 20px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 5px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      transition: background-color 0.5s ease;
-    }
-    
-    .theme-switch .light-mode-icon,
-    .theme-switch .dark-mode-icon {
-      font-size: 19px;
-      position: absolute;
-      cursor: pointer;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: opacity 0.5s ease, color 0.5s ease;
-    }
-    
-    .theme-switch .light-mode-icon {
-      color: #f39c12;
-    }
-    
-    .theme-switch .dark-mode-icon {
-      color: #bdc3c7;
-      opacity: 0;
-    }
-    
-    .toggle-button {
-      position: absolute;
-      top: 3px;
-      left: 3px;
-      width: 25px;
-      height: 25px;
-      background-color: #fff;
-      border-radius: 50%;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      transition: transform 0.5s ease, background-color 0.5s ease;
-    }
-    
-    /* Checkbox Checked State */
-    .switch-checkbox:checked + .theme-switch {
-      background-color: #34495e;
-    }
-    
-    .switch-checkbox:checked + .theme-switch .light-mode-icon {
-      opacity: 0;
-    }
-    
-    .switch-checkbox:checked + .theme-switch .dark-mode-icon {
-      opacity: 1;
-    }
-    
-    .switch-checkbox:checked + .theme-switch .toggle-button {
-      transform: translateX(13px);
-      /* background-color: #34495e; */
-    }
-    
-    </style>
-
 
     <!-- Modal background -->
     <!-- <div id="modalBackground" style="color: #fff;">
diff --git a/js/404.js b/js/404.js
index 98e23bb..3e5cf4e 100644
--- a/js/404.js
+++ b/js/404.js
@@ -9,7 +9,7 @@ document.addEventListener('DOMContentLoaded', function () {
         starsContainer.appendChild(star);
     }
 
-    const darkModeToggle = document.getElementById('dark-mode-toggle');
+    const darkModeToggle = document.getElementById('themeToggle');
     darkModeToggle.addEventListener('change', function () {
         document.body.classList.toggle('dark-mode');
     });

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 2/2] 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>
