Merge branch 'main' into slider

sk66641 · Jul 31, 2024 · 08d87d9 · 08d87d9
2 parents ac74836 + c6654c5
commit 08d87d9
Show file tree

Hide file tree

Showing 13 changed files with 488 additions and 398 deletions.
diff --git 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.');
+            }
+        });
+    }
 });
diff --git a/css/mode_toggler.css 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; */
+}
diff --git 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
@@ -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>
@@ -427,7 +429,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>
 
 
     <!-- Modal background -->
@@ -548,14 +550,43 @@ <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="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/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' });
+    }
 });