Merge branch 'main' into main

vimistify · Oct 8, 2024 · da00807 · da00807
2 parents e91ca45 + de8e76c
commit da00807
Show file tree

Hide file tree

Showing 4 changed files with 410 additions and 84 deletions.
diff --git a/contact.html b/contact.html
@@ -82,14 +82,34 @@
 
         .social-icon {
             font-size: 24px;
-            color: #2980b9;
-            transition: color 0.3s;
+            color: #000000;
+            transition: transform 0.9s ease, color 0.9s ease;
+            /* Smooth transition */
         }
 
-        .social-icon:hover {
-            color: #ff5733;
+        #facebook:hover {
+            color: #1877F2;
+            transform: scale(1.5);
         }
 
+        #twitter:hover {
+            color: #1da1f2;
+            transform: scale(1.5);
+        }
+
+        #instagram:hover {
+            background: linear-gradient(45deg, #FF0080, #FF8C00, #FFD700);
+            color: transparent;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transform: scale(1.5);
+        }
+        #linkedin:hover {
+            color: #0077B5;
+            transform: scale(1.5);
+        }
+
+
         footer {
             background-color: #C4D7FF;
             color: white;
@@ -250,10 +270,10 @@ <h2>Emergency Care</h2>
 
     <!-- Social Media Section -->
     <div class="social-media">
-        <a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
-        <a href="#" class="social-icon"><i class="fa-brands fa-x-twitter"></i></a>  <!--Updated icon-->
-        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
-        <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+        <a href="#" class="social-icon"><i class="fab fa-facebook" id="facebook"></i></a>
+        <a href="#" class="social-icon"><i class="fa-brands fa-x-twitter" id="twitter"></i></a>  <!--Updated icon-->
+        <a href="#" class="social-icon"><i class="fab fa-instagram" id="instagram"></i></a>
+        <a href="#" class="social-icon"><i class="fab fa-linkedin" id="linkedin"></i></a>
     </div>
 </div>
 

diff --git a/login.js b/login.js
@@ -11,67 +11,82 @@ sign_in_btn.addEventListener("click", () => {
 });
 
 // Sign in form submission
-document.querySelector(".sign-in-form").addEventListener('submit', function(event) {
-  event.preventDefault();
-
-  // Get the input values
-  const username = document.querySelector(".sign-in-form input[type='text']").value;
-  const password = document.querySelector(".sign-in-form input[type='password']").value;
-
-  // Dummy login logic for demo purposes
-  if (username === 'admin' && password === 'password') {
-    alert('Login successful!');
-    // Redirect to dashboard page
-    window.location.href = 'index.html';
-  } else {
-    alert('Invalid username or password');
-  }
-});
+document
+  .querySelector(".sign-in-form")
+  .addEventListener("submit", function (event) {
+    event.preventDefault();
+    // Get the input values
+    const username = document.querySelector(
+      ".sign-in-form input[type='text']"
+    ).value;
+    const password = document.querySelector(
+      ".sign-in-form input[type='password']"
+    ).value;
+
+    // Dummy login logic for demo purposes
+    if (username === "admin" && password === "password") {
+      alert("Login successful!");
+      // Redirect to dashboard page
+      window.location.href = "index.html";
+    } else {
+      alert("Invalid username or password");
+    }
+  });
 
 // Sign up form submission
-document.querySelector(".sign-up-form").addEventListener('submit', function(event) {
-  event.preventDefault();
-
-  // Get the input values
-  const username = document.querySelector(".sign-up-form input[type='text']").value;
-  const email = document.querySelector(".sign-up-form input[type='email']").value;
-  const password = document.querySelector(".sign-up-form input[type='password']").value;
-
-  if (username === '' || email === '' || password === '') {
-    alert('Please fill in all fields');
-    return;
-  }
-
-  // Dummy signup logic for demo purposes
-  localStorage.setItem('username', username);
-  localStorage.setItem('email', email);
-  localStorage.setItem('password', password);
-  localStorage.setItem('isLoggedIn', 'true');
-
-  alert('Signup successful!');
-  // Redirect to dashboard page
-  window.location.href = 'index.html';
-});
+document
+  .querySelector(".sign-up-form")
+  .addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    // Get the input values
+    const username = document.querySelector(
+      ".sign-up-form input[type='text']"
+    ).value;
+    const email = document.querySelector(
+      ".sign-up-form input[type='email']"
+    ).value;
+    const password = document.querySelector(
+      ".sign-up-form input[type='password']"
+    ).value;
+
+    if (username === "" || email === "" || password === "") {
+      alert("Please fill in all fields");
+      return;
+    }
+
+    // Dummy signup logic for demo purposes
+    localStorage.setItem("username", username);
+    localStorage.setItem("email", email);
+    localStorage.setItem("password", password);
+    localStorage.setItem("isLoggedIn", "true");
+
+    alert("Signup successful!");
+    // Redirect to dashboard page
+    window.location.href = "index.html";
+  });
 
 // Toggle password visibility
 function togglePassword(fieldId, icon) {
   const field = document.getElementById(fieldId);
-  const isPassword = field.type === 'password';
+  const isPassword = field.type === "password";
 
   // Toggle between 'password' and 'text'
-  field.type = isPassword ? 'text' : 'password';
+  field.type = isPassword ? "text" : "password";
 
   // Change the icon class between eye and eye-slash
-  icon.classList.toggle('fa-eye-slash', isPassword);
-  icon.classList.toggle('fa-eye', !isPassword);
+  icon.classList.toggle("fa-eye-slash", isPassword);
+  icon.classList.toggle("fa-eye", !isPassword);
 }
 
 // Check password strength
 function checkPasswordStrength() {
-  const password = document.querySelector(".sign-up-form input[type='password']").value;
-  const strengthWeak = document.getElementById('strength-weak');
-  const strengthMedium = document.getElementById('strength-medium');
-  const strengthStrong = document.getElementById('strength-strong');
+  const password = document.querySelector(
+    ".sign-up-form input[type='password']"
+  ).value;
+  const strengthWeak = document.getElementById("strength-weak");
+  const strengthMedium = document.getElementById("strength-medium");
+  const strengthStrong = document.getElementById("strength-strong");
 
   let strength = 0;
 
@@ -81,14 +96,16 @@ function checkPasswordStrength() {
   if (password.match(/[0-9]/)) strength++;
   if (password.match(/[^a-zA-Z0-9]/)) strength++;
 
-  strengthWeak.className = '';
-  strengthMedium.className = '';
-  strengthStrong.className = '';
+  strengthWeak.className = "";
+  strengthMedium.className = "";
+  strengthStrong.className = "";
 
-  if (strength >= 1) strengthWeak.className = 'weak';
-  if (strength >= 3) strengthMedium.className = 'medium';
-  if (strength >= 5) strengthStrong.className = 'strong';
+  if (strength >= 1) strengthWeak.className = "weak";
+  if (strength >= 3) strengthMedium.className = "medium";
+  if (strength >= 5) strengthStrong.className = "strong";
 }
 
 // Call the checkPasswordStrength function on password input
-document.querySelector(".sign-up-form input[type='password']").addEventListener('input', checkPasswordStrength);
+document
+  .querySelector(".sign-up-form input[type='password']")
+  .addEventListener("input", checkPasswordStrength);