From 2db30a5925717ac2bf281ce22a4da632ad7305b4 Mon Sep 17 00:00:00 2001
From: adityadhiman0 <adityadhiman5960@gmail.com>
Date: Sun, 10 Nov 2024 21:13:21 +0530
Subject: [PATCH 1/2] Fixed issue #1227

---
 Feedback.html | 14 +++++++++-----
 contact.html  | 13 +++++++++----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/Feedback.html b/Feedback.html
index de86fb6..d7fa2f2 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -546,17 +546,21 @@ <h1>Feedback</h1>
           <div class="feedback-box">
               <h2>Feedback Form</h2>
               
-              <form id="feedback-form">
+              <form id="feedback-form" >
                   <!-- Name Input -->
-                  <label for="name">Name:</label>
+                  <i class="fas fa-user" style="position: relative; top: 2.4rem; left: 3px; font-size: 14px"></i>
+                  <label for="name" style="padding-left: 22px;">Name:</label>
                   <input type="text" id="name" name="name" class="input-field" placeholder="Enter your name" required />
       
                   <!-- Email Input -->
-                  <label for="email">Email:</label>
+                  
+                  <i class="fas fa-envelope" style="position: relative; top: 3.7rem; left:-31.3rem; font-size: 14px"></i>
+                  <label for="email" style="padding-left: 22px;">Email:</label>
                   <input type="email" id="email" name="email" class="input-field" placeholder="Enter your email" required />
       
                   <!-- Comments Section -->
-                  <label for="comments">Your Comments:</label>
+                  <i class="fas fa-comment" style="position: relative; top: 3.7rem; left: -31.3rem; font-size: 14px"></i>
+                  <label for="comments" style="padding-left: 22px;">Your Comments:</label>
                   <textarea id="comments" name="comments" class="feed-msg" rows="5" placeholder="Share your feedback..." required></textarea>
                   
                   <!-- Star Rating -->
@@ -695,7 +699,7 @@ <h3>Please rate your experience:</h3>
   // Back to top button functionality
   const backToTopButton = document.getElementById('backToTopBtn');
 
-
+</script>
   <script src="preloader.js"></script>
 
       <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
diff --git a/contact.html b/contact.html
index e44f69b..a14ca49 100644
--- a/contact.html
+++ b/contact.html
@@ -333,12 +333,12 @@ <h2>Emergency Care</h2>
             </div>
         </div>
         <!-- adding map -->
-        <div class="map">
+       <div class="map">
             <iframe
                 src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d241294.64898498365!2d72.79635424219836!3d19.09761203283721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1s123%20Emergency%20Lane%2C%20Mumbai%2C%20India!5e0!3m2!1sen!2sin!4v1728732339444!5m2!1sen!2sin"
-                width=860px height="400" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade"
-                overflow="hidden" style="border :10" object-fit="cover" ;></iframe>
-            <!--  ;"  loading="lazy" margin-top="50%"  ></iframe> -->
+                width=860px height="400" allowfullscreen referrerpolicy="no-referrer-when-downgrade"
+                overflow="hidden" style="border :10" object-fit="cover";  margin-top="50%"  >
+            </iframe>
         </div>
     </div>
 
@@ -443,6 +443,11 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
             </div>
         </div>
         <hr>
+
+
+
+
+
     </footer>
     <!-- Copyright Section -->
     <div

From 3af88afbe5c159bc982f92feb799b1965baf6238 Mon Sep 17 00:00:00 2001
From: adityadhiman0 <adityadhiman5960@gmail.com>
Date: Sun, 10 Nov 2024 22:08:32 +0530
Subject: [PATCH 2/2] Fix#1227

---
 login.html  | 396 ++--------------------------------------------------
 nearby.html | 311 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 325 insertions(+), 382 deletions(-)

diff --git a/login.html b/login.html
index 8260029..8f06dc7 100644
--- a/login.html
+++ b/login.html
@@ -6,13 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Register & Login</title>
   <link rel="stylesheet" href="preloaderStyle.css">
-  <link rel="stylesheet" href="src\css/login.css" />
+  <link rel="stylesheet" href="src/css/login.css" />
   <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
 </head>
-<div class="gtranslate_wrapper"></div>
-<script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
-<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
 <body>
   <!-- preloader -->
@@ -28,27 +25,7 @@
       </div>
     </div>
   </div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
-  <div class="circle"></div>
+
   <div class="container">
     <div class="forms-container">
       <div class="signin-signup">
@@ -56,17 +33,16 @@
           <h2 class="title">Sign in</h2>
           <div class="input-field">
             <i class="fas fa-user"></i>
-            <input type="text" id="username" placeholder="Username" />
+            <input type="text" id="username" placeholder="Username" aria-label="Username" required />
           </div>
           <div class="input-field">
             <i class="fas fa-lock" id="toggle-password"></i>
-            <input type="password" placeholder="Password" id="password-input" />
+            <input type="password" placeholder="Password" id="password-input" aria-label="Password" required />
           </div>
           <div class="form-check d-flex">
             <input type="checkbox" class="form-check-input" id="remember-me" />
-            <label class="form-check-label">Remember me</label>
+            <label class="form-check-label" for="remember-me">Remember me</label>
           </div>
-
           <input type="submit" value="Login" class="btn solid" />
           <p class="social-text">Or Sign in with social platforms</p>
           <div class="social-media">
@@ -80,67 +56,22 @@ <h2 class="title">Sign in</h2>
               <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
             </a>
           </div>
+          <div id="login-error" style="color: red; display: none;"></div> <!-- Error message -->
         </form>
-       <script>
-       function validateSignInForm() {
-                const username = document.querySelector('.sign-in-form input[type="text"]').value;
-                const password = document.querySelector('.sign-in-form input[type="password"]').value;
-        
-                // Sign-in validation logic
-                if (username.trim() === "") {
-                    alert("Please enter your username.");
-                    return false;
-                }
-        
-                if (password.trim() === "") {
-                    alert("Please enter your password.");
-                    return false;
-                }
-        
-                // Simulate successful login 
-                alert("You have successfully logged in to the website!");
-        
-                // Redirect to the home screen after a short delay
-                setTimeout(function() {
-                    window.location.href = "index.html"; 
-                }, 2000); // Redirect after 2 seconds
-        
-                // If all validations pass, return true to allow form submission
-                return false; // Prevent form submission since we are handling the redirect
-            };
-          </script>
-        <form action="#" class="sign-up-form"
-          style="background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
+
+        <form action="#" class="sign-up-form" onsubmit="return validateSignUpForm()">
           <h2 class="title">Sign up</h2>
           <div class="input-field">
             <i class="fas fa-user"></i>
-            <input type="text" placeholder="Username" />
+            <input type="text" placeholder="Username" aria-label="Username" required />
           </div>
           <div class="input-field">
             <i class="fas fa-envelope"></i>
-            <input type="email" placeholder="Email" />
+            <input type="email" placeholder="Email" aria-label="Email" required />
           </div>
           <div class="input-field">
-
             <i class="fas fa-lock" id="toggle-password-signup"></i>
-            <input type="password" placeholder="Password" id="password-input-signup" />
-          </div>
-
-          <!-- Password strength meter starts here (initially hidden) -->
-          <div id="password-strength-section" style="display: none;">
-            <label for="password-input-signup">Password Strength:</label>
-            <div class="strength-meter"
-              style="width: 100%; max-width: 300px; height: 10px; background-color: #e0e0e0; border-radius: 5px; margin: 10px auto;">
-              <div id="strength-bar-signup"
-                style="height: 100%; width: 1%; background-color: #d73f40; border-radius: 5px; transition: width 0.5s, background-color 0.5s;">
-              </div>
-            </div>
-            <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div>
-          </div>
-          <!-- Password strength meter ends here -->
-          <div class="form-check d-flex">
-            <input type="checkbox" class="form-check-input" id="login-remember" />
-            <label class="form-check-label">Remember me</label>
+            <input type="password" placeholder="Password" id="password-input-signup" aria-label="Password" required />
           </div>
           <input type="submit" class="btn" value="Sign up" />
           <p class="social-text">Or Sign up with social platforms</p>
@@ -149,316 +80,17 @@ <h2 class="title">Sign up</h2>
               <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
             </div>
             <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
-              <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267B2;"></i>
+              <i class="fab fa-facebook-f" style="font-size: 24px; color: #4267b2"></i>
             </a>
             <a href="https://github.com/YourGitHubProfile" target="_blank" class="social-icon">
-              <i class="fab fa-github" style="font-size: 24px; color: #333;"></i>
+              <i class="fab fa-github" style="font-size: 24px; color: #333"></i>
             </a>
           </div>
         </form>
-
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
-        <script>
-          let passwordSignup = document.getElementById("password-input-signup");
-          let strengthBarSignup = document.getElementById("strength-bar-signup");
-          let strengthLabelSignup = document.getElementById("strength-label-signup");
-          let passwordStrengthSection = document.getElementById("password-strength-section");
-
-          passwordSignup.oninput = function () {
-            let value = passwordSignup.value;
-
-            // Show the strength meter when the user starts typing
-            if (value.length > 0) {
-              passwordStrengthSection.style.display = "block";
-            } else {
-              passwordStrengthSection.style.display = "none";
-            }
-
-            let result = zxcvbn(value);
-            let score = result.score; // Score is between 0 and 4
-            let widths = ["1%", "25%", "50%", "75%", "100%"];
-            let colors = ["#d73f40", "#dc6551", "#f2b84f", "#bde952", "#3ba62f"];
-            let labels = ["Very Weak", "Weak", "Fair", "Good", "Strong"];
-
-            strengthBarSignup.style.width = widths[score];
-            strengthBarSignup.style.backgroundColor = colors[score];
-            strengthLabelSignup.textContent = labels[score];
-          };
-        </script>
-
-      </div>
-    </div>
-
-    <div class="panels-container">
-      <a href="index.html" class="homeBtn">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
-          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-        </svg>
-      </a>
-      <div class="panel left-panel">
-        <div class="content">
-          <h3>New here ?</h3>
-          <p>
-            Discover new experiences with AmbuFlow! <br />Get access to
-            exclusive content and features. <br />
-            Create your account.
-          </p>
-          <a href="index.html" class="homeBtn">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 24 20" width="30" height="30">
-              <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-            </svg>
-          </a>
-          <button class="btn transparent" id="sign-up-btn">Sign up</button>
-        </div>
-        <img src="img/log.svg" class="image" alt="" />
-      </div>
-      <div class="panel right-panel">
-        <div class="content">
-          <h3>One of us ?</h3>
-          <p>Welcome to our community</p>
-          <button class="btn transparent" id="sign-in-btn">Sign in</button>
-        </div>
-        <img src="img/register.svg" class="image" alt="" />
       </div>
     </div>
   </div>
-  <script src="preloader.js"></script>
-  <script>
-    const sign_in_btn = document.querySelector("#sign-in-btn");
-    const sign_up_btn = document.querySelector("#sign-up-btn");
-    const container = document.querySelector(".container");
-
-    sign_up_btn.addEventListener("click", () => {
-      container.classList.add("sign-up-mode");
-    });
-
-    sign_in_btn.addEventListener("click", () => {
-      container.classList.remove("sign-up-mode");
-    });
-
-    // Sign in form submission
-    document.querySelector(".sign-in-form").addEventListener("submit", async function (event) {
-      event.preventDefault();
-
-      const username = document.querySelector(".sign-in-form input[type='text']").value;
-      const password = document.querySelector(".sign-in-form input[type='password']").value;
-
-      // Remove the below block of code when the server is ready (Written just for testing)
-      if (username === "username" && password === "123456") {
-        console.log("Login successful!");
-        localStorage.setItem("userID", "7887892rdwed3")
-        localStorage.setItem("JWTtoken", "dummyToken123"); // Example token
-        localStorage.setItem("login", "success");
-        window.location.href = "hospital.html";
-      }
-      // Testing block ends here, proceed with actual request once the server is ready
-
-      const data = JSON.stringify({ username, password });
-      console.log(data);
-
-      // Uncomment the below code when MongoDB is ready
-      /*
-      try {
-          const response = await fetch("http://localhost:3000/login", {
-              method: "POST",
-              headers: {
-                  "Content-Type": "application/json",
-              },
-              body: data,
-          });
-
-          if (!response.ok) {
-              throw new Error("Login failed: " + response.statusText);
-          }
-
-          const result = await response.json();
-          console.log("Server response:", result);
-          localStorage.setItem("token", result.token);
-          localStorage.setItem("userID", result.id);
-          console.log('Login successful!');
-          window.location.href = "hospital.html";
-      } catch (error) {
-          alert("Invalid username or password");
-          console.error("Error during login:", error);
-      }
-      */
-    });
-
 
-
-    // Uncomment the below code when MongoDB is ready
-    /*
-    try {
-      const response = await fetch("http://localhost:3000/signup", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: data,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || "Signup failed");
-      }
-
-      const result = await response.json();
-      console.log("Server response:", result);
-
-      alert("Signup successful!");
-      window.location.href = "login.html";
-    } catch (error) {
-      alert(error.message);
-      console.error("Error during signup:", error);
-    }
-    */
-
-    // Toggle password visibility
-    function togglePassword(fieldId, icon) {
-      const field = document.getElementById(fieldId);
-      const isPassword = field.type === "password";
-
-      // Toggle between 'password' and 'text'
-      field.type = isPassword ? "text" : "password";
-
-      // Change the icon class between eye and eye-slash
-      icon.classList.toggle("fa-lock-open", isPassword);
-      icon.classList.toggle("fa-lock", !isPassword);
-    }
-
-    document
-      .getElementById("toggle-password")
-      .addEventListener("click", function () {
-        togglePassword("password-input", this);
-      });
-
-    document
-      .getElementById("toggle-password-signup")
-      .addEventListener("click", function () {
-        togglePassword("password-input-signup", this);
-      });
-
-    // 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");
-
-      let strength = 0;
-
-      if (password.length >= 8) strength++;
-      if (password.match(/[A-Z]/)) strength++;
-      if (password.match(/[a-z]/)) strength++;
-      if (password.match(/[0-9]/)) strength++;
-      if (password.match(/[^a-zA-Z0-9]/)) strength++;
-
-      strengthWeak.className = "";
-      strengthMedium.className = "";
-      strengthStrong.className = "";
-
-      if (strength >= 1) strengthWeak.className = "weak";
-      if (strength >= 3) strengthMedium.className = "medium";
-      if (strength >= 5) strengthStrong.className = "strong";
-    }
-
-    document
-      .querySelector(".sign-up-form input[type='password']")
-      .addEventListener("input", checkPasswordStrength);
-  </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
-  <script>
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#ffb56b",
-      "#fdaf69",
-      "#f89d63",
-      "#f59761",
-      "#ef865e",
-      "#ec805d",
-      "#e36e5c",
-      "#df685c",
-      "#d5585c",
-      "#d1525c",
-      "#c5415d",
-      "#c03b5d",
-      "#b22c5e",
-      "#ac265e",
-      "#9c155f",
-      "#950f5f",
-      "#830060",
-      "#7c0060",
-      "#680060",
-      "#60005f",
-      "#48005f",
-      "#3d005e",
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-
-        circle.style.scale = (circles.length - index) / circles.length;
-
-        circle.x = x;
-        circle.y = y;
-
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-
-      requestAnimationFrame(animateCircles);
-    }
-
-    animateCircles();
-  </script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const rememberMeCheckbox = document.getElementById("remember-me");
-      const usernameInput = document.getElementById("username");
-
-      // Load saved username if it exists
-      if (localStorage.getItem("rememberedUsername")) {
-        usernameInput.value = localStorage.getItem("rememberedUsername");
-        rememberMeCheckbox.checked = true;
-      }
-
-      // When the form is submitted, save the username if "Remember Me" is checked
-      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
-        e.preventDefault(); // Prevent default form submission
-
-        if (rememberMeCheckbox.checked) {
-          localStorage.setItem("rememberedUsername", usernameInput.value);
-        } else {
-          localStorage.removeItem("rememberedUsername");
-        }
-        // Add form submission logic here
-      });
-    });
-
-  </script>
-  <script src="https://apis.google.com/js/platform.js" async defer></script>
-  <!-- <script src="Firebase.js" type="module"></script> -->
+  <script src="script.js"></script>
 </body>
-
 </html>
\ No newline at end of file
diff --git a/nearby.html b/nearby.html
index cf27f98..dd1a551 100644
--- a/nearby.html
+++ b/nearby.html
@@ -108,6 +108,124 @@
         .dark-mode h2 {
             color: #e7f3fe;
         }
+        footer {
+      background-color: #C4D7FF;
+      color: #f3f4f6;
+      text-align: center;
+      padding: 15px 0;
+      width: 100%;
+    }
+    footer a{
+      text-decoration: none;
+      color: #f3f4f6;
+    }
+
+    .checkbtn {
+      font-size: 30px;
+      color: #333;
+      float: right;
+      line-height: 80px;
+      margin-right: 40px;
+      cursor: pointer;
+      display: none;
+
+    }
+
+    #check {
+      display: none;
+    }
+
+    /* Added the hover animation on the footer social icons */
+    .social-icon {
+      transition: transform 0.3s ease;
+      /* Smooth transition effect */
+    }
+
+    .social-icon:hover {
+      transform: scale(1.3);
+      /* Scale the element to 1.3 times its size */
+    }
+
+    .fa-facebook:hover {
+      color: blue;
+      /* Icon color change to blue on hover */
+    }
+
+    .fa-x-twitter:hover {
+      color: black;
+      /* Icon color change to black on hover */
+    }
+
+    .fa-instagram:hover {
+      color: orangered;
+      /* Icon color change to orangered on hover */
+    }
+
+    .fa-linkedin-in:hover {
+      color: rgb(16, 13, 195);
+      /* Icon color change to rgb(16, 13, 195) on hover */
+    }
+
+    .feature p {
+      color: #555;
+    }
+
+    .team-feature {
+      background-color: #e7ffe7;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      grid-column: 1 / -1;
+    }
+
+    .team-feature img {
+      width: 150px;
+      height: auto;
+      margin-right: 20px;
+      border-radius: 10px;
+    }
+
+    .contact-feature {
+      background-color: #f2e4aa;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+      grid-column: 1 / -1;
+    }
+
+    .contact-feature img {
+      width: 150px;
+      height: auto;
+      margin-right: 20px;
+      border-radius: 10px;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+
+
+    .container {
+      width: 98vw;
+    }
+
+    #contact-hvr:hover {
+      background: none;
+    }
+
     </style>
 </head>
 
@@ -353,6 +471,198 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
         // Initial render
         renderHospitals(hospitals);
     </script>
+
+     <!-- footer start here -->
+  <footer class="fot">
+
+
+    <div class="l1">
+      <h2>About</h2>
+      <p>AmbuFlow is ambulance tracking site which helps you to find the nearest hospitals and get access to nearest
+        ambulances and save lives</p>
+    </div>
+
+
+    <div class="l2">
+      <div>
+        <h2 style="margin-left: 1vw;">Useful link</h2>
+        <p><a href="index.html">Home</a></p>
+        <p style="margin-left: 1.3vw;"><a href="features.html">Features</a></p>
+        <p><a href="team.html">Team</a></p>
+        <p style="margin-left: 3.5vw;"><a href="privacy.html">Privacy Policy</a></p>
+        <p style="margin-left: 4.5vw;"><a href="terms.html">Terms of Service</a></p>
+      </div>
+      <div class="l21">
+        <h2>Help Desk</h2>
+        <p><a href="contact.html">Support</a></p>
+        <p><a href="Contactus.html">Contact Us</a></p>
+        <p><a href="#faq-section">FAQ</a></p>
+        <p><a href="nearby.html">Near by</a></p>
+        <p><a href="contact.html">Phone</a></p>
+      </div>
+    </div>
+
+      <!-- Newsletter Subscription -->
+      <div style="min-width: 200px; margin-bottom: 20px;">
+        <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: darkorange;">
+          Subscribe to Our Newsletter</h3>
+        <form id="newsletter-form" novalidate>
+          <i class="fas fa-envelope" style="position: absolute; bottom: -142.6rem; right: 18.3rem; color: rgb(129, 128, 128); font-size: 13px;"></i>
+          <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%; border: none; border-radius: 7px; padding-left: 27px;"
+            required><br><br>
+          <button type="submit"
+            style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
+        </form>
+        <!-- Toast Notification -->
+        <div id="toast"
+          style="display: none; position: fixed; bottom: 20px; right: 60px; background-color: #333; color: white; padding: 10px; border-radius: 5px; z-index: 1000;">
+        </div>
+      </div>
+    </div>
+  <script>
+    function showToast(message,type) {
+      const toast = document.getElementById('toast');
+      toast.textContent = message;
+      toast.style.display = "block"; // Show the toast
+      toast.style.backgroundColor = type==='success' ? 'green':'red'
+      toast.style.color = 'white';
+      setTimeout(() => {
+        toast.style.display = "none"; // Hide after 3 seconds
+      }, 3000);
+    }
+
+    document.getElementById('newsletter-form').addEventListener('submit', function (event) {
+      event.preventDefault(); // Prevent form submission
+      const emailInput = this.querySelector('input[type="email"]');
+      const email = emailInput.value;
+
+      // Basic email validation
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+      if (emailPattern.test(email)) {
+        showToast("Thank you for subscribing!",'success'); // Show success message
+        emailInput.value = ""; // Clear the input field
+      } else {
+        showToast("Please enter a valid email address.",'error'); // Show error message
+      }
+    });
+  </script>
+  </footer>
+  <style>
+    .fot {
+      display: flex;
+      height: 40vh;
+      width: 100%;
+      background-color: #25242a;
+    }
+
+    .l1 {
+      width: 30vw;
+    }
+
+    .l2 {
+      display: flex;
+      width: 40vw;
+      margin-left: 8vw;
+    }
+
+    .l21 {
+      margin-left: 9vw;
+    }
+
+    h2 {
+      color: darkorange;
+    }
+
+    .l1 p {
+      font-size: 1vw;
+      padding: 1vw;
+      color: white;
+    }
+
+    .l2 p {
+      font-size: 1vw;
+      padding: .5vw;
+      color: white;
+      justify-content: first baseline;
+      margin-top: -1vw;
+    }
+
+    .con {
+      margin-left: .9vw;
+    }
+
+    .l21 p {
+      font-size: 1vw;
+      padding: .5vw;
+      color: white;
+      justify-content: first baseline;
+      margin-top: -1vw;
+    }
+
+    .social-icons a {
+
+      background: darkorange;
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      margin-right: 4px;
+
+    }
+
+    .social-icons a i {
+      color: #e7f2f4;
+      padding: 13px 12px;
+      height: 20px;
+    }
+
+
+    @media (max-width: 768px) {
+      .fot {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        margin-right: 12vw;
+      }
+
+      .l1 h2 {
+        font-size: 10vw;
+        margin-left: 33vw;
+        margin-top: -1vw;
+      }
+
+      .l1 p {
+        font-size: 4vw;
+        width: 90vw;
+        padding: 5vw;
+        margin-right: 5vw;
+        margin-top: -8vw;
+      }
+
+      .l2 {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .l2 h2 {
+        font-size: 5vw;
+        width: 30vw;
+      }
+
+      .l2 p {
+        font-size: 3vw;
+      }
+
+      .l21 {
+        margin-left: 19vw;
+      }
+
+      .l3 {
+        margin-left: -17vw;
+      }
+    }
+  </style>
+
     <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
         <div class="scroll-top-icon">
             <i class="fa-solid fa-arrow-up"></i>
@@ -500,6 +810,7 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
             });
         });
       </script>
+
 </body>
 
 </html>
\ No newline at end of file