From c5b4d5c3e08b6fb367ceaea04225dd94be312245 Mon Sep 17 00:00:00 2001
From: Swapnil Srivastava <142904704+Swapnilden@users.noreply.github.com>
Date: Sun, 28 Jul 2024 23:24:12 +0530
Subject: [PATCH 01/12] Update script1.js

---
 Login/script1.js | 117 ++++++++++++++++++++++++++---------------------
 1 file changed, 64 insertions(+), 53 deletions(-)

diff --git a/Login/script1.js b/Login/script1.js
index 3c3983a..6ebf6a2 100644
--- a/Login/script1.js
+++ b/Login/script1.js
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const container = document.getElementById('container');
     const registerBtn = document.getElementById('register');
     const loginBtn = document.getElementById('login');
-    
+
     const createPasswordInput = document.getElementById('passwordSignUp');
     const confirmPasswordInput = document.getElementById('confirmPasswordSignUp');
     const createPasswordToggle = document.querySelector('.password-toggle[data-target="passwordSignUp"]');
@@ -11,73 +11,84 @@ document.addEventListener('DOMContentLoaded', function() {
     const signInPasswordInput = document.getElementById('passwordSignIn');
     const signInPasswordToggle = document.getElementById('togglePasswordSignIn');
 
-    registerBtn.addEventListener('click', () => {
-        container.classList.add("active");
-    });
+    if (registerBtn) {
+        registerBtn.addEventListener('click', () => {
+            container.classList.add("active");
+        });
+    }
 
-    loginBtn.addEventListener('click', () => {
-        container.classList.remove("active");
-    });
+    if (loginBtn) {
+        loginBtn.addEventListener('click', () => {
+            container.classList.remove("active");
+        });
+    }
 
     // Function to toggle password visibility for Create Account
     function togglePasswordVisibility(input, toggle) {
-        const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
-        input.setAttribute('type', type);
+        if (input && toggle) {
+            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
+            input.setAttribute('type', type);
 
-        // Toggle eye icon class
-        if (type === 'password') {
-            toggle.querySelector('i').classList.remove('fa-eye-slash');
-            toggle.querySelector('i').classList.add('fa-eye');
-        } else {
-            toggle.querySelector('i').classList.remove('fa-eye');
-            toggle.querySelector('i').classList.add('fa-eye-slash');
+            const icon = toggle.querySelector('i');
+            if (icon) {
+                icon.classList.toggle('fa-eye');
+                icon.classList.toggle('fa-eye-slash');
+            }
         }
     }
 
-    // Event listener for Create Account password toggle button
-    createPasswordToggle.addEventListener('click', function(event) {
-        event.preventDefault();
-        togglePasswordVisibility(createPasswordInput, createPasswordToggle);
-    });
-
-    // Event listener for Confirm Password toggle button
-    confirmPasswordToggle.addEventListener('click', function(event) {
-        event.preventDefault();
-        togglePasswordVisibility(confirmPasswordInput, confirmPasswordToggle);
-    });
+    // Event listeners for password toggle buttons
+    if (createPasswordToggle) {
+        createPasswordToggle.addEventListener('click', function(event) {
+            event.preventDefault();
+            togglePasswordVisibility(createPasswordInput, createPasswordToggle);
+        });
+    }
 
-    // Event listener for Sign In password toggle button
-    signInPasswordToggle.addEventListener('click', function(event) {
-        event.preventDefault();
-        togglePasswordVisibility(signInPasswordInput, signInPasswordToggle);
-    });
+    if (confirmPasswordToggle) {
+        confirmPasswordToggle.addEventListener('click', function(event) {
+            event.preventDefault();
+            togglePasswordVisibility(confirmPasswordInput, confirmPasswordToggle);
+        });
+    }
 
+    if (signInPasswordToggle) {
+        signInPasswordToggle.addEventListener('click', function(event) {
+            event.preventDefault();
+            togglePasswordVisibility(signInPasswordInput, signInPasswordToggle);
+        });
+    }
 
     const signInForm = document.querySelector('.form-container.sign-in form');
 
-    signInForm.addEventListener('submit', function(event) {
-        const email = signInForm.querySelector('input[type="email"]').value;
-        const password = signInForm.querySelector('input[type="password"]').value;
+    if (signInForm) {
+        signInForm.addEventListener('submit', function(event) {
+            const email = signInForm.querySelector('input[type="email"]').value;
+            const password = signInForm.querySelector('input[type="password"]').value;
 
-        if (!email || !password) {
-            event.preventDefault();
-            alert('Required fields were not filled.');
-        }
-    });
+            if (!email || !password) {
+                event.preventDefault();
+                alert('Required fields were not filled.');
+            }
+        });
+    }
 
     const signUpForm = document.querySelector('.form-container.sign-up form');
-    signUpForm.addEventListener('submit', function(event) {
-        const name = signUpForm.querySelector('input[type="text"]').value;
-        const email = signUpForm.querySelector('input[type="email"]').value;
-        const password = signUpForm.querySelector('#passwordSignUp').value;
-        const confirmPassword = signUpForm.querySelector('#confirmPasswordSignUp').value;
 
-        if (password !== confirmPassword) {
-            event.preventDefault();
-            alert('Passwords do not match!');
-        } else if (!name || !email || !password || !confirmPassword) {
-            event.preventDefault();
-            alert('Required fields were not filled.');
-        }
-    });
+    if (signUpForm) {
+        signUpForm.addEventListener('submit', function(event) {
+            const name = signUpForm.querySelector('input[type="text"]').value;
+            const email = signUpForm.querySelector('input[type="email"]').value;
+            const password = signUpForm.querySelector('#passwordSignUp').value;
+            const confirmPassword = signUpForm.querySelector('#confirmPasswordSignUp').value;
+
+            if (password !== confirmPassword) {
+                event.preventDefault();
+                alert('Passwords do not match!');
+            } else if (!name || !email || !password || !confirmPassword) {
+                event.preventDefault();
+                alert('Required fields were not filled.');
+            }
+        });
+    }
 });

From 6a97d87502ec01019695842e6c4f69f0c4aa3dbc Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Mon, 29 Jul 2024 01:13:20 +0530
Subject: [PATCH 02/12] Issue #517

Applied conditions for values in fields for preset to be saved successfully
---
 js/script.js | 71 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 21 deletions(-)

diff --git a/js/script.js b/js/script.js
index be1e7d3..c58a5c6 100644
--- a/js/script.js
+++ b/js/script.js
@@ -703,7 +703,7 @@ window.onload = function () {
     const closeModal = document.getElementById("closeModal");
     const proceedButton = document.getElementById("proceed");
 
-    modal.style.display = "block";
+    modal.style.display = "none";
 
     closeModal.onclick = function () {
         modal.style.display = "none";
@@ -888,7 +888,7 @@ var loader = document.querySelector(".loader");
 window.addEventListener('load', () => {
     var backToTopBtn = document.getElementById("backToTopBtn");
     backToTopBtn.style.display = "none";
-    setTimeout(effect, 4000);
+    setTimeout(effect, 100);
 })
 
 function changeColor() {
@@ -969,28 +969,57 @@ document.addEventListener('DOMContentLoaded', () => {
 
 //  new functionality for saving and loading presets
 function savePreset() {
-    const presetName = prompt("Enter a name for your preset:");
-    if (!presetName) {
-        alert('Please enter a valid name for your preset.');
+    //get all field values in input during preset saving
+    let toggler = document.getElementById("sun-moon-mode-toggler")
+    let countdownValue = document.getElementById('countdown').value;
+    let n = document.getElementById("color").value;
+    let set_time = document.getElementById("time").value;
+    let unit = document.getElementById("unit").value;
+    let view = document.getElementById("view").value;
+    let soundEffect = document.getElementById("sound").value;
+    let color1 = document.getElementById('color1').value;
+    let color2 = document.getElementById('color2').value;
+
+    // Get selected audio file or URL
+    let selectedFile = document.getElementById("music-file").files[0];
+    let selectedUrl = document.getElementById("music-url").value;
+    let youtubeUrl = document.getElementById("youtubeUrlInput").value.trim();
+
+    
+    if (countdownValue && countdownValue > 0 && Number(n) > 0 && Number.isInteger(Number(n)) && n !== "" && unit !== "unit" && view !== "select" && !(soundEffect !== 'none' && selectedFile) && !(soundEffect !== 'none' && selectedUrl) && !(selectedFile && selectedUrl) &&
+            !(selectedFile && youtubeUrl) &&
+            !(selectedUrl && youtubeUrl) && 
+            !(soundEffect !== 'none' && youtubeUrl)){
+                //conditions for valid execution of simulation
+                const presetName = prompt("Enter a name for your preset:");
+                if (!presetName) {
+                    alert('Please enter a valid name for your preset.');
+                    return;
+                }
+                const presetData = {
+                    color: document.getElementById('color').value,
+                    color1: document.getElementById('color1').value,
+                    color2: document.getElementById('color2').value,
+                    time: document.getElementById('time').value,
+                    unit: document.getElementById('unit').value,
+                    view: document.getElementById('view').value,
+                    countdown: document.getElementById('countdown').value,
+                    sound: document.getElementById('sound').value,
+                    youtubeUrlInput: document.getElementById('youtubeUrlInput').value,
+            
+                };
+            
+                // Save to localStorage
+                localStorage.setItem(`preset-${presetName}`, JSON.stringify(presetData));
+                alert('Preset saved!');
+            }
+    else {
+        // after unsuccessful saving of preset 
+        alert("Please fill all required fields properly");
         return;
     }
 
-    const presetData = {
-        color: document.getElementById('color').value,
-        color1: document.getElementById('color1').value,
-        color2: document.getElementById('color2').value,
-        time: document.getElementById('time').value,
-        unit: document.getElementById('unit').value,
-        view: document.getElementById('view').value,
-        countdown: document.getElementById('countdown').value,
-        sound: document.getElementById('sound').value,
-        youtubeUrlInput: document.getElementById('youtubeUrlInput').value,
-
-    };
-
-    // Save to localStorage
-    localStorage.setItem(`preset-${presetName}`, JSON.stringify(presetData));
-    alert('Preset saved!');
+    
 }
 
 

From 2d6e45934a9753049acb7f83ba7f22c3a435cdbe Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Mon, 29 Jul 2024 01:17:17 +0530
Subject: [PATCH 03/12] removing test changes

removed some changes i made to the project for trial and forgot to remove
---
 js/script.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/js/script.js b/js/script.js
index c58a5c6..098eb68 100644
--- a/js/script.js
+++ b/js/script.js
@@ -703,7 +703,7 @@ window.onload = function () {
     const closeModal = document.getElementById("closeModal");
     const proceedButton = document.getElementById("proceed");
 
-    modal.style.display = "none";
+    modal.style.display = "block";
 
     closeModal.onclick = function () {
         modal.style.display = "none";
@@ -888,7 +888,7 @@ var loader = document.querySelector(".loader");
 window.addEventListener('load', () => {
     var backToTopBtn = document.getElementById("backToTopBtn");
     backToTopBtn.style.display = "none";
-    setTimeout(effect, 100);
+    setTimeout(effect, 4000);
 })
 
 function changeColor() {
@@ -970,15 +970,12 @@ document.addEventListener('DOMContentLoaded', () => {
 //  new functionality for saving and loading presets
 function savePreset() {
     //get all field values in input during preset saving
-    let toggler = document.getElementById("sun-moon-mode-toggler")
+
     let countdownValue = document.getElementById('countdown').value;
     let n = document.getElementById("color").value;
-    let set_time = document.getElementById("time").value;
     let unit = document.getElementById("unit").value;
     let view = document.getElementById("view").value;
     let soundEffect = document.getElementById("sound").value;
-    let color1 = document.getElementById('color1').value;
-    let color2 = document.getElementById('color2').value;
 
     // Get selected audio file or URL
     let selectedFile = document.getElementById("music-file").files[0];

From 9ac51d8c85c0e6be8111b8f5d86dcdbebf2760e2 Mon Sep 17 00:00:00 2001
From: meetarora <meet.arora2403@gmail.com>
Date: Mon, 29 Jul 2024 14:10:04 +0530
Subject: [PATCH 04/12] toggle-commit

---
 index.html              |   2 +-
 pages/about.html        | 105 ++++++++++++++++++++++++++++++++++++++++
 pages/contributors.html | 101 ++++++++++++++++++++++++++++++++++++++
 pages/faq.html          | 105 ++++++++++++++++++++++++++++++++++++++++
 pages/features.html     | 101 ++++++++++++++++++++++++++++++++++++++
 pages/feedback.html     | 102 +++++++++++++++++++++++++++++++++++++-
 pages/privacy.html      | 105 +++++++++++++++++++++++++++++++++++++++-
 pages/terms.html        | 105 +++++++++++++++++++++++++++++++++++++++-
 8 files changed, 720 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index decf4b3..29c6bee 100644
--- a/index.html
+++ b/index.html
@@ -437,7 +437,7 @@ <h1 id="changingHeading">Random Disco <span id="changing">Light Simulator</span>
           <span class="dark-mode-icon"><img src="moon.svg"style = "display: block;"></span>
       </div>
       </label>
-  </div>
+    </div>
 
   <style>
     .toggle-container {
diff --git a/pages/about.html b/pages/about.html
index 2241e7e..124adfa 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -17,6 +17,102 @@
         <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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .dark-mode .desc {
+  color: white !important;
+}
+    .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; */
+    }
+    
     .circle {
         position: absolute;
         width: 20px;
@@ -281,6 +377,15 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
                 reserved.
             </p>
         </div>
+        <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>
     </footer>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
diff --git a/pages/contributors.html b/pages/contributors.html
index 483d125..b41b48b 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -19,6 +19,98 @@
 </head>
 <body>
     <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;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .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; */
+    }
         .circle {
             position: absolute;
             width: 20px;
@@ -244,6 +336,15 @@ <h1 class="text-center text-3xl font-semibold mb-8">🤝Our Contributors</h1>
                 reserved.
             </p>
         </div>
+        <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>
     </footer>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
diff --git a/pages/faq.html b/pages/faq.html
index 0de6356..2fb945c 100644
--- a/pages/faq.html
+++ b/pages/faq.html
@@ -17,6 +17,102 @@
         <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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
+    }
+    .dark-mode-icon img{
+        position: relative;
+        bottom: 23px;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .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; */
+    }
         .faqBox {
             border: 1px solid #ddd;
             margin: 10px 0;
@@ -296,6 +392,15 @@
                 reserved.
             </p>
         </div>
+        <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>
     </footer>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
diff --git a/pages/features.html b/pages/features.html
index 84ff815..b880c29 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -17,6 +17,98 @@
         <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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .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; */
+    }
         .circle {
             position: absolute;
             width: 20px;
@@ -334,6 +426,15 @@ <h4 class="settings-text" style="text-align: center;">Play with our Disco Light
                 reserved.
             </p>
         </div>
+        <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>
     </footer>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
diff --git a/pages/feedback.html b/pages/feedback.html
index 65f478e..f153404 100644
--- a/pages/feedback.html
+++ b/pages/feedback.html
@@ -19,6 +19,98 @@
         <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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .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; */
+    }
         .circle {
             position: absolute;
             width: 20px;
@@ -267,7 +359,15 @@ <h2>Thank You for your Feedback!</h2>
                 reserved.
             </p>
         </div>
-       
+        <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>
     </footer>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
diff --git a/pages/privacy.html b/pages/privacy.html
index b57b99e..2157527 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -16,6 +16,98 @@
         <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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .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; */
+    }
         .circle {
       position: absolute;
       width: 20px;
@@ -286,10 +378,19 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
                 reserved.
             </p>
         </div>
+        <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>
     </footer>
 
     <!-- Mode toggler -->
-    <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
+    <!-- <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
         top: 30px; 
         right: 30px; 
         z-index: 100; 
@@ -299,7 +400,7 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         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>
+    </label> -->
 
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
diff --git a/pages/terms.html b/pages/terms.html
index 950cba2..81de1af 100644
--- a/pages/terms.html
+++ b/pages/terms.html
@@ -16,6 +16,98 @@
         <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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
+    }
+    .light-mode .desc {
+        color: black !important;
+    }
+    .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; */
+    }
         .circle {
       position: absolute;
       width: 20px;
@@ -295,10 +387,19 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
                 reserved.
             </p>
         </div>
+        <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>
     </footer>
 
     <!-- Mode toggler -->
-    <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
+    <!-- <label id="themeChangeToggle" class="theme-toggle" for="themeToggle" style="position: fixed; 
         top: 30px; 
         right: 30px; 
         z-index: 100; 
@@ -309,7 +410,7 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         <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>

From 6ea94a0c775de93db2f90a2f5db49bc902a5b7d1 Mon Sep 17 00:00:00 2001
From: meetarora <meet.arora2403@gmail.com>
Date: Mon, 29 Jul 2024 20:19:53 +0530
Subject: [PATCH 05/12] second

---
 css/mode_toggler.css    | 96 ++++++++++++++++++++++++++++++++++++++++
 pages/about.html        | 97 +----------------------------------------
 pages/contributors.html | 93 +--------------------------------------
 pages/faq.html          | 97 +----------------------------------------
 pages/features.html     | 93 +--------------------------------------
 pages/feedback.html     | 93 +--------------------------------------
 pages/privacy.html      | 93 +--------------------------------------
 pages/terms.html        | 93 +--------------------------------------
 8 files changed, 103 insertions(+), 652 deletions(-)
 create mode 100644 css/mode_toggler.css

diff --git a/css/mode_toggler.css b/css/mode_toggler.css
new file mode 100644
index 0000000..d3a2842
--- /dev/null
+++ b/css/mode_toggler.css
@@ -0,0 +1,96 @@
+.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;
+}
+.dark-mode-icon img{
+    position: relative;
+    bottom: 23px;
+}
+.light-mode .desc {
+    color: black !important;
+}
+.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; */
+}
\ No newline at end of file
diff --git a/pages/about.html b/pages/about.html
index 124adfa..d96549e 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -15,104 +15,9 @@
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
         <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">
+        <link rel="stylesheet" href="../css/mode_toggler.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .dark-mode .desc {
-  color: white !important;
-}
-    .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; */
-    }
-    
     .circle {
         position: absolute;
         width: 20px;
diff --git a/pages/contributors.html b/pages/contributors.html
index b41b48b..25540e9 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -14,103 +14,12 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="../css/mode_toggler.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&display=swap" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
     <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;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .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; */
-    }
         .circle {
             position: absolute;
             width: 20px;
diff --git a/pages/faq.html b/pages/faq.html
index 2fb945c..9c852c7 100644
--- a/pages/faq.html
+++ b/pages/faq.html
@@ -14,105 +14,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="../css/mode_toggler.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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
-    }
-    .dark-mode-icon img{
-        position: relative;
-        bottom: 23px;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .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; */
-    }
         .faqBox {
             border: 1px solid #ddd;
             margin: 10px 0;
diff --git a/pages/features.html b/pages/features.html
index b880c29..1b240c2 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -14,101 +14,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="../css/mode_toggler.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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .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; */
-    }
         .circle {
             position: absolute;
             width: 20px;
diff --git a/pages/feedback.html b/pages/feedback.html
index f153404..94f05e6 100644
--- a/pages/feedback.html
+++ b/pages/feedback.html
@@ -16,101 +16,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="../css/mode_toggler.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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .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; */
-    }
         .circle {
             position: absolute;
             width: 20px;
diff --git a/pages/privacy.html b/pages/privacy.html
index 2157527..28f85e3 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -13,101 +13,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="../css/mode_toggler.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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .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; */
-    }
         .circle {
       position: absolute;
       width: 20px;
diff --git a/pages/terms.html b/pages/terms.html
index 81de1af..8c55944 100644
--- a/pages/terms.html
+++ b/pages/terms.html
@@ -13,101 +13,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="../css/mode_toggler.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">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <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;
-    }
-    .light-mode .desc {
-        color: black !important;
-    }
-    .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; */
-    }
         .circle {
       position: absolute;
       width: 20px;

From ea6ed43cfdf911076b34dad2c94eac9a14aca4e9 Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Tue, 30 Jul 2024 10:58:17 +0530
Subject: [PATCH 06/12] Preset Modal

Made modals for both saving and loading preset prompts
issue #516
---
 index.html   |  29 +++++++++++++++
 js/script.js | 101 ++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 104 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 066e211..472dde0 100644
--- a/index.html
+++ b/index.html
@@ -548,6 +548,35 @@ <h2>Add time (in seconds)</h2>
 
     </div>
   </div>
+
+  <div id="addPresetModal" class="modal">
+    <div class="modal-content">
+      <span class="close" id="closeAddPresetModal">&times;</span>
+      <h2>Save Preset</h2>
+      <p>
+        Add a suitable name for your preset
+      </p>
+      <input id="presetNameInput" placeholder="Enter preset name"
+        style="background-color: rgb(237, 234, 228); color: black;" required>
+
+      <button id="namePresetButton" aria-label="Save preset">Save</button>
+    </div>
+  </div>
+
+  <div id="loadPresetModal" class="modal">
+    <div class="modal-content">
+      <span class="close" id="closeLoadPresetModal">&times;</span>
+      <h2>Load Preset</h2>
+      <p>
+        Enter the name of the preset you wish to play
+      </p>
+      <input id="presetNameLoadInput" placeholder="Enter preset name"
+        style="background-color: rgb(237, 234, 228); color: black;" required>
+
+      <button id="loadButton" aria-label="Load preset">Load</button>
+    </div>
+  </div>
+
   <button class="notification" id="failnotification" style="display:none;">
     <span class="message">Please enter a valid number</span>
     <span class="closenotif" id="closeFailNotification">✖</span>
diff --git a/js/script.js b/js/script.js
index 098eb68..86564cd 100644
--- a/js/script.js
+++ b/js/script.js
@@ -888,7 +888,7 @@ var loader = document.querySelector(".loader");
 window.addEventListener('load', () => {
     var backToTopBtn = document.getElementById("backToTopBtn");
     backToTopBtn.style.display = "none";
-    setTimeout(effect, 4000);
+    setTimeout(effect, 100);
 })
 
 function changeColor() {
@@ -967,32 +967,59 @@ document.addEventListener('DOMContentLoaded', () => {
     }, 4000);
 })
 
-//  new functionality for saving and loading presets
+// Preset saving and loading : 
+
+document.getElementById('savePresetButton').addEventListener('click', namePreset);
+document.getElementById('loadPresetButton').addEventListener('click', findPreset);
+
+//saving
+const savePresetModal= document.getElementById('addPresetModal'); 
+const closeAddPresetModal= document.getElementById('closeAddPresetModal');
+const presetName_input= document.getElementById('presetNameInput');
+let presetName;
+
+closeAddPresetModal.onclick = function () {
+    savePresetModal.style.display = 'none';
+}
+
+//load modal on click
+function namePreset(){
+    savePresetModal.style.display='block';
+    document.getElementById('namePresetButton').addEventListener('click', ()=>{
+        presetName= presetName_input.value.trim();
+        if (!presetName) {
+            console.log('invalid name entered');
+            }
+        else{
+            //go to save preset when valid name is entered
+            savePreset();
+        }
+        savePresetModal.style.display='none';
+    });
+}
+
+
 function savePreset() {
-    //get all field values in input during preset saving
 
+    //get all field values in input during preset saving
     let countdownValue = document.getElementById('countdown').value;
     let n = document.getElementById("color").value;
     let unit = document.getElementById("unit").value;
     let view = document.getElementById("view").value;
     let soundEffect = document.getElementById("sound").value;
-
+    
     // Get selected audio file or URL
     let selectedFile = document.getElementById("music-file").files[0];
     let selectedUrl = document.getElementById("music-url").value;
     let youtubeUrl = document.getElementById("youtubeUrlInput").value.trim();
-
+    
     
     if (countdownValue && countdownValue > 0 && Number(n) > 0 && Number.isInteger(Number(n)) && n !== "" && unit !== "unit" && view !== "select" && !(soundEffect !== 'none' && selectedFile) && !(soundEffect !== 'none' && selectedUrl) && !(selectedFile && selectedUrl) &&
             !(selectedFile && youtubeUrl) &&
             !(selectedUrl && youtubeUrl) && 
             !(soundEffect !== 'none' && youtubeUrl)){
                 //conditions for valid execution of simulation
-                const presetName = prompt("Enter a name for your preset:");
-                if (!presetName) {
-                    alert('Please enter a valid name for your preset.');
-                    return;
-                }
+
                 const presetData = {
                     color: document.getElementById('color').value,
                     color1: document.getElementById('color1').value,
@@ -1006,30 +1033,53 @@ function savePreset() {
             
                 };
             
-                // Save to localStorage
+                // Save data to localStorage
                 localStorage.setItem(`preset-${presetName}`, JSON.stringify(presetData));
-                alert('Preset saved!');
+
+                console.log('Saved successfully')
+                //showSucess()
             }
     else {
         // after unsuccessful saving of preset 
-        alert("Please fill all required fields properly");
+
+        console.log("Please fill all required fields properly");
+        //showfailed();
         return;
     }
-
-    
 }
 
+//loading
+const loadPresetModal= document.getElementById('loadPresetModal'); 
+const closeLoadPresetModal= document.getElementById('closeLoadPresetModal');
+const load_input= document.getElementById('presetNameLoadInput');
+let loadName;
 
-function loadPreset() {
-    const presetName = prompt("Enter the name of the preset you'd like to load:");
-    if (!presetName) {
-        alert('Please enter the name of the preset.');
-        return;
-    }
+closeLoadPresetModal.onclick = function () {
+    loadPresetModal.style.display = 'none';
+}
+//show modal for loading
+function findPreset(){
+    loadPresetModal.style.display='block';
+    document.getElementById('loadButton').addEventListener('click', ()=>{
+        loadName= load_input.value.trim();
+        if (!loadName) {
+            console.log('invalid name entered');
+            //showfailed
+            }
+        else{
+            //go to load preset when entry is valid
+            loadPreset();
+        }
+        loadPresetModal.style.display='none';
+    });
+}
 
-    const presetData = JSON.parse(localStorage.getItem(`preset-${presetName}`));
+function loadPreset() {
+    const presetData = JSON.parse(localStorage.getItem(`preset-${loadName}`));
     if (!presetData) {
-        alert('Preset not found!');
+        //not in memory or not created 
+        console.log('Preset not found!');
+        //showfailed
         return;
     }
     document.getElementById('color').value = presetData.color;
@@ -1043,10 +1093,9 @@ function loadPreset() {
     document.getElementById('music-url').value = presetData.musicUrl || '';
     // document.getElementById('music-file') cannot be set due to security reasons
 
-    alert('Preset loaded!');
+    console.log('Preset loaded!');
+    //showsuccess()
 }
-document.getElementById('savePresetButton').addEventListener('click', savePreset);
-document.getElementById('loadPresetButton').addEventListener('click', loadPreset);
 
 // const cursor = document.querySelector(".cursor");
 // var timeout;

From 8fcf61b40fa3c9b6590e0259dee6a9988d6b82d6 Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Tue, 30 Jul 2024 11:12:59 +0530
Subject: [PATCH 07/12] Issue #518

Added success and failed notifications by editing the existing function to take message as input
---
 index.html   |  4 +--
 js/script.js | 88 ++++++++++++++++++++++++++--------------------------
 2 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index 472dde0..ab80793 100644
--- a/index.html
+++ b/index.html
@@ -578,13 +578,13 @@ <h2>Load Preset</h2>
   </div>
 
   <button class="notification" id="failnotification" style="display:none;">
-    <span class="message">Please enter a valid number</span>
+    <span class="message" id="failmsg">Failed</span>
     <span class="closenotif" id="closeFailNotification">✖</span>
     <div class="timerline" id="timerline"></div>
   </button>
 
   <button class="notification" id="successnotification" style="display:none;">
-    <span class="message">Added Successfully!</span>
+    <span class="message" id="successmsg">Success</span>
     <span class="closenotif" id="closeSuccessNotification">✖</span>
     <div class="timerline" id="timerline"></div>
   </button>
diff --git a/js/script.js b/js/script.js
index 86564cd..703e7da 100644
--- a/js/script.js
+++ b/js/script.js
@@ -77,46 +77,17 @@ document.addEventListener('DOMContentLoaded', () => {
             resumeSimulation();
         }
     }
-
-    //the success and failure wale pop ups 
-    const failNotif = document.getElementById('failnotification');
-    const successNotif = document.getElementById('successnotification');
-    const closeSuccess = document.getElementById('closeSuccessNotification');
-    const closeFail = document.getElementById('closeFailNotification');
-
-    closeFail.addEventListener('click', () => {
-        failNotif.style.display = 'none';
-    })
-    closeSuccess.addEventListener('click', () => {
-        successNotif.style.display = 'none';
-    })
-
-    //in order to add these popups somewhere else please just use these call these two functions
-    function showSuccess() {
-        successNotif.style.display = 'flex';
-        setTimeout(() => {
-            successNotif.style.display = 'none';
-        }, 2000);//current timer is 2 secs. If you want to change please also change the css animation 'timerline' duration accordingly
-    }
-
-    function showFailed() {
-        failNotif.style.display = 'flex';
-        setTimeout(() => {
-            failNotif.style.display = 'none';
-        }, 2000);
-    }
-
-
+    
     // Add the event listener for timesubmitBtn outside
     timesubmitBtn.addEventListener('click', () => {
         const time = addtime_input.value; // Ensure you get the input value correctly
         if (time == 0) {
-            showFailed(); //modal remains open for another entry 
+            showFailed("Please enter a valid number"); //modal remains open for another entry 
         }
         else {
             addTime(time);
             addtimePrompt.style.display = 'none';
-            showSuccess();
+            showSuccess("Added Successfully!");
             if (rememberState == false) {//if it was paused before we let it be 
                 resumeSimulation();
             }
@@ -764,6 +735,41 @@ window.onload = function () {
     }
 };
 
+
+    //the success and failure wale pop ups 
+    const failNotif = document.getElementById('failnotification');
+    const successNotif = document.getElementById('successnotification');
+    const closeSuccess = document.getElementById('closeSuccessNotification');
+    const closeFail = document.getElementById('closeFailNotification');
+
+    const successMessage = document.getElementById('successmsg');
+    const failMessage = document.getElementById('failmsg');   
+
+    closeFail.addEventListener('click', () => {
+        failNotif.style.display = 'none';
+    })
+    closeSuccess.addEventListener('click', () => {
+        successNotif.style.display = 'none';
+    })
+    
+    //in order to add these popups somewhere else please just use these call these two functions
+    function showSuccess(message = 'Added Successfully!') {
+        console.log('here')
+        successNotif.style.display = 'flex';
+        successMessage.textContent = message;
+        setTimeout(() => {
+            successNotif.style.display = 'none';
+        }, 2000); // current timer is 2 secs. If you want to change, please also change the CSS animation 'timerline' duration accordingly
+    }
+  
+    function showFailed(message = 'Failed!') {
+        failNotif.style.display = 'flex';
+        failMessage.textContent = message;
+        setTimeout(() => {
+            failNotif.style.display = 'none';
+        }, 2000);
+    }
+
 /* function showAboutPopup() {
     document.getElementById("aboutPopup").style.display = "block";
 }
@@ -988,7 +994,7 @@ function namePreset(){
     document.getElementById('namePresetButton').addEventListener('click', ()=>{
         presetName= presetName_input.value.trim();
         if (!presetName) {
-            console.log('invalid name entered');
+            showFailed('Invalid name entered');
             }
         else{
             //go to save preset when valid name is entered
@@ -1036,14 +1042,11 @@ function savePreset() {
                 // Save data to localStorage
                 localStorage.setItem(`preset-${presetName}`, JSON.stringify(presetData));
 
-                console.log('Saved successfully')
-                //showSucess()
+                showSuccess('Saved successfully')
             }
     else {
         // after unsuccessful saving of preset 
-
-        console.log("Please fill all required fields properly");
-        //showfailed();
+        showFailed("Please fill all required fields");
         return;
     }
 }
@@ -1063,8 +1066,7 @@ function findPreset(){
     document.getElementById('loadButton').addEventListener('click', ()=>{
         loadName= load_input.value.trim();
         if (!loadName) {
-            console.log('invalid name entered');
-            //showfailed
+            showFailed('Invalid name entered');
             }
         else{
             //go to load preset when entry is valid
@@ -1078,8 +1080,7 @@ function loadPreset() {
     const presetData = JSON.parse(localStorage.getItem(`preset-${loadName}`));
     if (!presetData) {
         //not in memory or not created 
-        console.log('Preset not found!');
-        //showfailed
+        showFailed('Preset not found');
         return;
     }
     document.getElementById('color').value = presetData.color;
@@ -1093,8 +1094,7 @@ function loadPreset() {
     document.getElementById('music-url').value = presetData.musicUrl || '';
     // document.getElementById('music-file') cannot be set due to security reasons
 
-    console.log('Preset loaded!');
-    //showsuccess()
+    showSuccess('Preset loaded!');
 }
 
 // const cursor = document.querySelector(".cursor");

From d72ca80895fb867682ef002e1001bdb870c7ddab Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Tue, 30 Jul 2024 11:13:30 +0530
Subject: [PATCH 08/12] Update script.js

---
 js/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/script.js b/js/script.js
index 703e7da..ed84f78 100644
--- a/js/script.js
+++ b/js/script.js
@@ -894,7 +894,7 @@ var loader = document.querySelector(".loader");
 window.addEventListener('load', () => {
     var backToTopBtn = document.getElementById("backToTopBtn");
     backToTopBtn.style.display = "none";
-    setTimeout(effect, 100);
+    setTimeout(effect, 4000);
 })
 
 function changeColor() {

From 76101203f76a3cdb45cfbc0ef1c23049f4e47dc0 Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Tue, 30 Jul 2024 18:10:46 +0530
Subject: [PATCH 09/12] Update script.js

---
 js/script.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/script.js b/js/script.js
index 098eb68..8754f57 100644
--- a/js/script.js
+++ b/js/script.js
@@ -749,6 +749,7 @@ window.onload = function () {
         }, interval);
     }
     animateText();
+    
     // Snowflakes animation logic
     const snowflakesContainer = document.querySelector(".snowflakes");
     const numberOfSnowflakes = 300;

From f94b02dca39419a17bb4b8a3ab8d7bc89705f0b2 Mon Sep 17 00:00:00 2001
From: Vivek Vardhan <91594529+vivekvardhan2810@users.noreply.github.com>
Date: Tue, 30 Jul 2024 22:43:40 +0530
Subject: [PATCH 10/12] Update about.html

---
 pages/about.html | 56 ++++++++++++++++++------------------------------
 1 file changed, 21 insertions(+), 35 deletions(-)

diff --git a/pages/about.html b/pages/about.html
index d96549e..80b5692 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -215,45 +215,32 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         </h1>
         <div class="aboutBox">
             <div class="heading">The Random Disco-Light Simulator</div>
-            <div class="desc">It is a fun and interactive project that brings the excitement of a disco dance floor to
-                your screen. Whether you're a developer, a party enthusiast, or just someone who loves vibrant colors,
-                this simulator is designed to brighten up your day!</div>
+            <div class="desc">Welcome to the Random Disco-Light Simulator, a captivating and interactive project designed to bring the dynamic energy of a disco dance floor right to your screen. Whether you're a developer looking to explore creative coding, a party enthusiast eager to recreate the vibe of a disco, or simply someone who loves the burst of vibrant colors, this simulator is sure to add some excitement to your day.</div>
         </div>
         <div class="aboutBox">
             <div class="heading">Inputs</div>
             <div class="desc">
-                <div class="points"><strong>1. Number of Colors :</strong> Specify how many random colors you want to be
-                    shown.</div>
-                <div class="points"><strong>2. Time Interval :</strong> Set the interval (in milliseconds) at which the
-                    colors should change.</div>
-                <div class="points"><strong>3. View Type :</strong> Choose from conic, linear, or radial views to
-                    customize the visual effect.</div>
-                <div class="points"><strong>4. Countdown Timer :</strong> Set a timer (in seconds) for how long the
-                    simulation should run.</div>
-                <div class="points"><strong>5. Sound Effect :</strong> Optionally, add a sound effect to enhance the
-                    disco experience.</div>
+                <div class="points" style="margin-bottom: 10px;"><strong>1. Number of Colors :</strong> Choose the total number of random colors that will be displayed in the simulation. You can opt for a few colors for a subtle effect or go all out with hundreds of colors for a truly dazzling display.</div>
+                <div class="points" style="margin-bottom: 10px;"><strong>2. Time Interval :</strong> Set the interval in milliseconds at which the colors will change. A smaller interval will create a rapid, strobe-like effect, while a larger interval will provide a more relaxed, flowing transition of colors.</div>
+                <div class="points" style="margin-bottom: 10px;"><strong>3. View Type :</strong> Customize the visual effect by selecting from three distinct view types: conic, linear, or radial. Each view type offers a unique pattern and movement for the colors, allowing you to tailor the simulation to your preferences.</div>
+                <div class="points" style="margin-bottom: 10px;"><strong>4. Countdown Timer :</strong> Decide the duration of the simulation by setting a countdown timer in seconds. The simulation will run for the specified time before automatically stopping, letting you enjoy the show without needing to manually end it.</div>
+                <div class="points" style="margin-bottom: 10px;"><strong>5. Sound Effect :</strong> Enhance the visual experience with an optional sound effect. Choose a funky beat, a classic disco tune, or any sound that complements the vibrant visuals, adding an auditory dimension to your light show.</div>
             </div>
         </div>
         <div class="aboutBox">
             <div class="heading">Output</div>
-            <div class="desc">
-                Based on the inputs you provide, the simulator will display a dynamic and colorful light show in the
-                selected view, changing colors at the specified intervals. The simulation will continue until the
-                countdown timer expires.
-            </div>
+            <div class="desc">Based on the inputs you provide, the simulator generates a dynamic and colorful light show that transforms your screen into a lively disco dance floor. The colors will change according to your specified interval and view type, creating a mesmerizing visual experience. The simulation continues until the countdown timer expires, offering a seamless and immersive disco ambiance.</div>
         </div>
         <div class="aboutBox">
             <div class="heading">Examples</div>
             <div class="desc">
-                Try these input combinations and see the magic unfold!
-                <div class="points" style="margin-top: 20px;">1. 1000 colors, 1 millisecond interval, conic view, 60
-                    seconds timer.</div>
-                <div class="points">2. 1000 colors, 1 millisecond interval, radial view, 60 seconds timer.</div>
-                <div class="points">3. 1000 colors, 1 millisecond interval, linear view, 60 seconds timer.</div>
+                Here are some fun combinations to try out:
+                <div class="points" style="margin-top: 20px; margin-bottom: 10px;">1. <strong>1000 Colors, 1 Millisecond Interval, Conic View, 60 Seconds Timer:</strong> Experience an intense and fast-paced color explosion with this high-energy setup.</div>
+                <div class="points" style="margin-bottom: 10px;">2. <strong>500 Colors, 500 Milliseconds Interval, Radial View, 120 Seconds Timer:</strong> Enjoy a more laid-back, hypnotic light show with slower transitions and a radial pattern.</div>
+                <div class="points" style="margin-bottom: 10px;">3. <strong>300 Colors, 100 Milliseconds Interval, Linear View, 90 Seconds Timer:</strong> Create a balanced and rhythmic visual effect with this intermediate setting, perfect for a relaxed yet dynamic display.</div>
             </div>
         </div>
-        <div class="desc" style="text-align: center; color: chocolate; font-weight: bold;">Experiment with different
-            settings and have fun creating your own disco light show! 😄</div>
+        <div class="desc" style="text-align: center; color: chocolate; font-weight: bold;">Experiment with different settings to craft your own unique disco light show and enjoy the colorful spectacle! 😄</div>
     </div>
     <footer class="footer" style="width: 100%;height: 2px;">
         <div class="socialIcons">
@@ -278,17 +265,16 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
         <div class="copyright">
             <p class="copyright" style="text-align: center">
                 &copy;
-                <script>document.write(new Date().getFullYear())</script> Random-Disco-Light-Simulator. All rights
-                reserved.
+                <script>document.write(new Date().getFullYear())</script> Random-Disco-Light-Simulator. All rights reserved.
             </p>
         </div>
-        <div id="sun-moon-mode-toggler" class="toggle-container" >
+        <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 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>
     </footer>
@@ -303,8 +289,8 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
             <h2>Account Not Available</h2>
             <p>We apologize for the inconvenience, but our social media accounts are currently unavailable. We are working diligently to bring them online as soon as possible.</p>
             <p>In the meantime, if you have any questions or need assistance, please feel free to reach out to us through our website's feedback form. We appreciate your understanding and patience during this time.</p>
-            <p>Thank you for your continued support! </p>
+            <p>Thank you for your continued support!</p>
         </div>
-    </div>
+    </div>    
 </body>
 </html>

From 784a2ba03d00486e77638635f7b37051cc787f6e Mon Sep 17 00:00:00 2001
From: Bhavy_Zala <zalabhavy2004@gmail.com>
Date: Tue, 30 Jul 2024 22:44:31 +0530
Subject: [PATCH 11/12] Fix Feedback message image

---
 pages/feedback.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/feedback.html b/pages/feedback.html
index 94f05e6..9074e22 100644
--- a/pages/feedback.html
+++ b/pages/feedback.html
@@ -234,7 +234,7 @@ <h1 id="changingHeading" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana,
     <div id="feedbackPopup" class="popup">
         <div class="popup-content">
             <h2>Thank You for your Feedback!</h2>
-            <img src="/assets/images/Feed-purple-tick-unscreen.gif" alt="✅" width="160" height="140">
+            <img src="../assets/images/Feed-purple-tick-unscreen.gif" alt="✅" width="160" height="140">
             <p>Your feedback has been submitted successfully.</p>
             <button id="backToHomeBtn">Back to Home</button>
         </div>

From cf6d1e51da8a2b77da66082274e2cfbf95ca732a Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Tue, 30 Jul 2024 23:27:09 +0530
Subject: [PATCH 12/12] Back to top button

Pointless css was added in each of the side pages for a minor thing (bottom spacing) so improved it by adding a separate div name on main page
Updates the backtotop js file completely and added code to and listeners that do not cause issues in the console and get executed smoothly without fail
tested on all pages and ensured that button is hidden during loading and simulation
---
 css/style.css           |  8 ++++---
 index.html              |  4 +++-
 js/backToTopBtn.js      | 34 +++++++++++++++--------------
 js/script.js            | 48 ++++++++++++++++++++---------------------
 pages/about.html        | 33 +++-------------------------
 pages/contributors.html | 31 ++------------------------
 pages/faq.html          | 31 ++------------------------
 pages/features.html     | 29 +------------------------
 pages/feedback.html     | 31 ++------------------------
 pages/privacy.html      | 31 ++------------------------
 pages/terms.html        | 31 ++------------------------
 11 files changed, 64 insertions(+), 247 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6c7c48d..eefa658 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1956,7 +1956,7 @@ button:hover {
 
 #backToTopBtn {
   position: fixed;
-  bottom: 130px;
+  bottom: 50px;
   right: 31px;
   height: 50px;
   width: 50px;
@@ -1969,7 +1969,7 @@ button:hover {
   border-radius: 50%;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: 500ms;
-  display: none; /* Initially hide the button */
+  display: none;
   justify-content: center;
   align-items: center;
   z-index: 9999;
@@ -1981,7 +1981,9 @@ button:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
 }
-
+.indexpage #backToTopBtn {
+  bottom: 130px;  
+}
 
 .header {
   margin-top: 100px;
diff --git a/index.html b/index.html
index ab80793..2b344f2 100644
--- a/index.html
+++ b/index.html
@@ -156,7 +156,9 @@
       </lottie-player>
     </div>
   </div>
-  <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
+  <div class="indexpage">
+    <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
   <!-- Generate snowflakes dynamically with JavaScript -->
   <div class="snowflakes">
     <div id="particles-js"></div>
diff --git a/js/backToTopBtn.js b/js/backToTopBtn.js
index 707d924..ead20cd 100644
--- a/js/backToTopBtn.js
+++ b/js/backToTopBtn.js
@@ -1,22 +1,24 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const backToTopButton = document.getElementById('backToTopBtn');
 
-let backToTopBtn = document.getElementById("backToTopBtn");
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
 
-window.onscroll = function() {
-    scrollFunction();
-};
-
-function scrollFunction() {
-    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
-        backToTopBtn.style.display = "block";
-    } else {
-        backToTopBtn.style.display = "none";
+    function handleScroll() {
+        if (window.scrollY === 0) {
+            backToTopButton.classList.add('disabled');
+            backToTopButton.style.display = 'none'; // Hide button at top
+        } else {
+            backToTopButton.classList.remove('disabled');
+            backToTopButton.style.display = 'block'; // Show button when scrolling
+        }
     }
-}
 
+    window.startSimulation = function() {
+        backToTopButton.style.display = 'none';
+    }
 
-backToTopBtn.addEventListener("click", function() {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-    });
+    window.backToTop = function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
 });
diff --git a/js/script.js b/js/script.js
index e760e58..d65d91a 100644
--- a/js/script.js
+++ b/js/script.js
@@ -885,16 +885,16 @@ function effect() {
     loader.style.display = "none";
     document.querySelector(".unload").style.display = "block";
     document.querySelector(".snowflakes").style.display = "block";
-    var backToTopBtn = document.getElementById("backToTopBtn");
-    backToTopBtn.style.display = "block";
+    // var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "block";
 }
 
 
 
 var loader = document.querySelector(".loader");
 window.addEventListener('load', () => {
-    var backToTopBtn = document.getElementById("backToTopBtn");
-    backToTopBtn.style.display = "none";
+    // var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "none";
     setTimeout(effect, 4000);
 })
 
@@ -904,26 +904,26 @@ function changeColor() {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-    var backToTopBtn = document.getElementById("backToTopBtn");
-    backToTopBtn.style.display = "block";
-    backToTopBtn.addEventListener("click", function () {
-        scrollToTop();
-        scrollToForm();
-    });
-
-    function scrollToTop() {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    }
-    function scrollToForm() {
-        const formElement = document.getElementById("box");
-        formElement.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        });
-    }
+    // var backToTopBtn = document.getElementById("backToTopBtn");
+    // backToTopBtn.style.display = "block";
+    // backToTopBtn.addEventListener("click", function () {
+    //     scrollToTop();
+    //     scrollToForm();
+    // });
+
+    // function scrollToTop() {
+    //     window.scrollTo({
+    //         top: 0,
+    //         behavior: "smooth"
+    //     });
+    // }
+    // function scrollToForm() {
+    //     const formElement = document.getElementById("box");
+    //     formElement.scrollTo({
+    //         top: 0,
+    //         behavior: "smooth"
+    //     });
+    // }
 
     document.querySelector("#reload").addEventListener("click", () => {
         window.location.reload();
diff --git a/pages/about.html b/pages/about.html
index d96549e..ce60862 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -58,33 +58,6 @@
     }
   
   }
-  #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
 
     </style>
   
@@ -130,7 +103,7 @@
         const circles = document.querySelectorAll(".circle");
   
         circles.forEach(function (circle) {
-          circle.x = 0;
+          circle.x = 0; 
           circle.y = 0;
         });
   
@@ -163,8 +136,8 @@
       });
     </script>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/contributors.html b/pages/contributors.html
index 25540e9..3b8ad23 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -60,33 +60,6 @@
         }
 
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
         </style>
 
 
@@ -164,8 +137,8 @@
           });
         </script>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/faq.html b/pages/faq.html
index 9c852c7..d7d517a 100644
--- a/pages/faq.html
+++ b/pages/faq.html
@@ -92,33 +92,6 @@
         }
       
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
         </style>
       
       
@@ -196,8 +169,8 @@
           });
         </script>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/features.html b/pages/features.html
index 1b240c2..c2885f7 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -58,33 +58,6 @@
         }
       
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
         </style>
       
       
@@ -161,7 +134,7 @@
             animateCircles();
           });
         </script>
-    <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
index 94f05e6..7e64c9e 100644
--- a/pages/feedback.html
+++ b/pages/feedback.html
@@ -60,33 +60,6 @@
         }
 
       }
-      #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
       
     </style>
 </head>
@@ -125,8 +98,8 @@
         <div class="circle"></div>
       </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">
diff --git a/pages/privacy.html b/pages/privacy.html
index 8be6db9..e518762 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -47,33 +47,6 @@
         display: none;
       }
     }
-    #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
     </style>
 </head>
 <body>
@@ -159,8 +132,8 @@
             </label>
         </div>
         <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+        </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>
diff --git a/pages/terms.html b/pages/terms.html
index 1bad001..40d085d 100644
--- a/pages/terms.html
+++ b/pages/terms.html
@@ -47,33 +47,6 @@
         display: none;
       }
     }
-    #backToTopBtn {
-  position: fixed;
-  bottom: 50px;
-  right: 31px;
-  height: 50px;
-  width: 50px;
-  padding: 10px 15px;
-  font-size: 20px;
-  cursor: pointer;
-  border: none;
-  background: linear-gradient(#1845ad, #23a2f6);
-  color: white;
-  border-radius: 50%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: 500ms;
-  display: none; /* Initially hide the button */
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-#backToTopBtn:hover {
-  background: linear-gradient(to right, #ff512f, #f09819);
-  opacity: 1;
-  transform: scale(1.05);
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-}
     </style>
 </head>
 <body>
@@ -159,8 +132,8 @@
            </label>
        </div>
     <div>
-        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
-    </div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top" onclick="backToTop()"><i class="fas fa-arrow-up"></i></button>
+  </div>
     <div class="snowflakes" style="display: block;">
         <div id="particles-js"></div>
     </div>