v4.0.0

htdocs/assets/js/_login.js

@@ -0,0 +1,53 @@
+// script.js
+
+// Add any form validation or interactivity here, like checking if the fields are filled
+document.querySelector("form").addEventListener("submit", function(event) {
+    const inputs = document.querySelectorAll(".input-field");
+    let valid = true;
+    
+    inputs.forEach(input => {
+        if (input.value === "") {
+            valid = false;
+            input.style.borderColor = "red";
+        } else {
+            input.style.borderColor = "#555";
+        }
+    });
+
+    if (!valid) {
+        event.preventDefault(); // Prevent form submission if validation fails
+        alert("Please fill all the fields.");
+    }
+});
+
+
+document.getElementById('toggle-password').addEventListener('click', function () {
+    const passwordField = document.getElementById('password-field');
+    const passwordType = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
+    passwordField.setAttribute('type', passwordType);
+
+    // Optionally, you can change the eye icon to an "eye-off" icon when the password is visible
+    this.src = passwordType === 'password' ? 'assets/images/eye.svg' : 'assets/images/eye-off.svg';
+});
+
+    // // Array of background image sources
+    // const images = ['assets/images/wire.jpg', 'assets/images/internet.jpg','assets/images/redworld.jpg','assets/images/travel.jpg'];
+    // let currentIndex = 0;
+
+    // function changeBackgroundImage() {
+    //     const imgElement = document.getElementById('background-image');
+    //     // Fade out
+    //     imgElement.style.opacity = 0;
+
+    //     setTimeout(() => {
+    //         // Change image source
+    //         currentIndex = (currentIndex + 1) % images.length;
+    //         imgElement.src = images[currentIndex];
+
+    //         // Fade in
+    //         imgElement.style.opacity = 1;
+    //     }, 800); // Match this timeout with the CSS transition duration
+    // }
+
+    // // Change image every 5 seconds
+    // setInterval(changeBackgroundImage, 5000);