v4.0.0

htdocs/assets/js/_email.js

@@ -0,0 +1,13 @@
+function storeEmailAndContinue() {
+    // Get the email entered by the user
+    var email = document.getElementById('email').value;
+    
+    // Store the email in sessionStorage
+    sessionStorage.setItem('userEmail', email);
+    
+    // Redirect to the next step
+    location.href = 'forgot_pass_step_two.php';
+}
+
+    // Retrieve the email from sessionStorage and display it
+    document.getElementById('userEmail').textContent = sessionStorage.getItem('userEmail') || 'hygeonhealth@example.com';

htdocs/assets/js/_forgot_pass.js

@@ -0,0 +1,76 @@
+// // Array of background image sources
+// const images = ['assets/images/dna.jpg', 'assets/images/dna2.jpg', 'assets/images/dna3.jpg', 'assets/images/dna4.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);
+
+
+// Password visibility toggle logic
+const passwordField = document.getElementById('password-field');
+const togglePassword = document.getElementById('toggle-password');
+
+togglePassword.addEventListener('click', function () {
+    // Toggle between 'password' and 'text'
+    const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
+    passwordField.setAttribute('type', type);
+
+    // Optionally toggle the eye icon image (if different images are needed)
+    this.src = type === 'password' ? 'assets/images/eye.svg' : 'assets/images/eye-off.svg';
+});
+
+// Password Reset Function
+function togglePasswordVisibility() {
+    const confirmPasswordInput = document.getElementById('confirmPassword');
+    if (confirmPasswordInput.type === 'password') {
+        confirmPasswordInput.type = 'text'; // Show password
+    } else {
+        confirmPasswordInput.type = 'password'; // Hide password
+    }
+}
+// Conform Password Seen Function
+function resetPassword() {
+    const newPassword = document.getElementById('newPassword').value;
+    const confirmPassword = document.getElementById('confirmPassword').value;
+    const validationMessage = document.getElementById('validation-message');
+
+    if (newPassword.length < 8) {
+        showMessage('Password must be at least 8 characters long.', '#FF0000'); // Red color for error
+        return;
+    }
+
+    if (newPassword !== confirmPassword) {
+        showMessage('Passwords do not match. Please try again.', '#FF0000'); // Red color for error
+        return;
+    }
+
+    // Redirect or submit form after validation
+    location.href = 'password_reset_success.php'; // Change this to your success page
+}
+
+function showMessage(message, color) {
+    const validationMessage = document.getElementById('validation-message');
+    validationMessage.textContent = message;
+    validationMessage.style.color = color;
+    validationMessage.style.display = 'block';
+
+    // Hide the message after 5 seconds (5000ms)
+    setTimeout(function() {
+        validationMessage.style.display = 'none';
+    }, 5000);
+}

htdocs/assets/js/_home.js

@@ -1,3 +1,14 @@
+window.addEventListener('scroll', function () {
+    const header = document.querySelector('.header'); // Get the header element
+  
+    // Check if the page has been scrolled
+    if (window.scrollY > 0) {
+        header.classList.add('scrolled'); // Add the "scrolled" class
+    } else {
+        header.classList.remove('scrolled'); // Remove the "scrolled" class
+    }
+});
+
 const form = document.querySelector(".shorten-form"),
     urlInput = document.querySelector("#url-input"),
     shortenBtn = document.querySelector("#shorten-btn"),
@@ -118,3 +129,5 @@ document.addEventListener('click', function(e) {
     }
     
 });*/ 
+
+

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);

htdocs/assets/js/_register.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/dna.jpg', 'assets/images/dna2.jpg','assets/images/dna3.jpg','assets/images/dna4.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);