From f59c74f0c1ac6ec5363aae1c069c9fe5fe68cab7 Mon Sep 17 00:00:00 2001
From: devarsheecodess <devarsheegaunekar29@gmail.com>
Date: Tue, 8 Oct 2024 02:29:44 +0530
Subject: [PATCH 1/3] Added dropdown #368

---
 ambtracker.html      |  27 +++++
 driver.html          |  31 +++++-
 hospital.html        |  27 +++++
 manage.html          |  38 ++++++-
 src/css/driver.css   | 255 ++++++++++++++++++++++---------------------
 src/css/hospital.css |   6 -
 src/css/manage.css   |  84 ++++++++++++++
 7 files changed, 335 insertions(+), 133 deletions(-)

diff --git a/ambtracker.html b/ambtracker.html
index 6613b0a9..b60df009 100644
--- a/ambtracker.html
+++ b/ambtracker.html
@@ -84,9 +84,23 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
             <li><a href="ambtracker.html">Manage Ambulance</a></li>
             <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
         </ul>
+        <div class="resp">
+            <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+            <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+        </div>
     </nav>
 </header>
 
+<!-- Dropdown -->
+<div class="dropdown-menu">
+    <ul class="navbar-links2">
+        <li><a href="hospital.html">Dashboard</a></li>
+        <li><a href="manage.html">Manage Status</a></li>
+        <li><a href="driver.html">Manage Driver</a></li>
+        <li><a href="ambtracker.html">Manage Ambulance</a></li>
+    </ul>
+ </div>
+
   <!-- Map container -->
   <div id="map"></div>
 
@@ -130,6 +144,19 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
     // Initialize the map when the window loads
     window.onload = initMap;
 
+    // Dropdown
+    let flag = false
+    document.getElementById('dropdown').addEventListener('click', () => {
+      const dropdown = document.querySelector('.dropdown-menu');
+      if (flag) {
+        dropdown.style.display = 'none';
+        flag = false;
+      } else {
+          dropdown.style.display = 'block';
+          flag = true;
+      }
+    });
+
     function logout() {
       const confirmLogout = confirm('Are you sure you want to logout?');
         if (confirmLogout) {
diff --git a/driver.html b/driver.html
index 565ac753..dc0fc453 100644
--- a/driver.html
+++ b/driver.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Driver Dashboard</title>
     <link rel="stylesheet" href="src/css/driver.css">
+    <link rel="stylesheet" href="src/css/manage.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -17,7 +18,6 @@
         }
 
         #driverImage {
-            width: 100%;
             height: 320px;
             margin-bottom: 20px;
         }
@@ -47,8 +47,24 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
                 <li><a href="ambtracker.html">Manage Ambulance</a></li>
                 <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
             </ul>
+            <div class="resp" style="margin-right: 50px;">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
         </nav>
     </header>
+    
+    <!-- Dropdown -->
+    <div class="dropdown-menu">
+        <ul class="navbar-links2">
+            <li><a href="hospital.html">Dashboard</a></li>
+            <li><a href="manage.html">Manage Status</a></li>
+            <li><a href="driver.html">Manage Driver</a></li>
+            <li><a href="ambtracker.html">Manage Ambulance</a></li>
+        </ul>
+     </div>
+    
+
     <div class="dashboard-container">
         <h1>Welcome, <span id="driverName">Driver ___</span></h1>
         <p id="status">You are currently: <strong id="availability">OFF DUTY</strong></p>
@@ -142,6 +158,19 @@ <h1>Welcome, <span id="driverName">Driver ___</span></h1>
                 alert("Logged out successfully!");
             }
         }  
+
+        // Dropdown
+        let flag = false
+        document.getElementById('dropdown').addEventListener('click', () => {
+            const dropdown = document.querySelector('.dropdown-menu');
+            if (flag) {
+                dropdown.style.display = 'none';
+                flag = false;
+            } else {
+                dropdown.style.display = 'block';
+                flag = true;
+            }
+        });
     </script>
 </body>
 </html>
diff --git a/hospital.html b/hospital.html
index 8149c8b7..7cf5196a 100644
--- a/hospital.html
+++ b/hospital.html
@@ -24,8 +24,23 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
                 <li><a href="ambtracker.html">Manage Ambulance</a></li>
                 <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
             </ul>
+            <div class="resp">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
         </nav>
     </header>
+
+    <!-- Dropdown -->
+     <div class="dropdown-menu">
+        <ul class="navbar-links2">
+            <li><a href="hospital.html">Dashboard</a></li>
+            <li><a href="manage.html">Manage Status</a></li>
+            <li><a href="driver.html">Manage Driver</a></li>
+            <li><a href="ambtracker.html">Manage Ambulance</a></li>
+        </ul>
+     </div>
+
     <div class="dashboard-container">
         <img src="images/Ambulance Tracker.png" alt="Bobble-AI Logo" style="width: 250px; height: auto; margin-bottom: 10px; margin-left: 30px;";>
     
@@ -39,6 +54,18 @@ <h2 style="font-family: 'Arial', sans-serif; font-size: 17px; color: #666; margi
                 alert('Manage Drivers button clicked!');
                 // Example: window.location.href = 'manage-drivers.html';
             }
+
+            let flag = false
+            document.getElementById('dropdown').addEventListener('click', () => {
+                const dropdown = document.querySelector('.dropdown-menu');
+                if (flag) {
+                    dropdown.style.display = 'none';
+                    flag = false;
+                } else {
+                    dropdown.style.display = 'block';
+                    flag = true;
+                }
+            });
         
             function manageAmbulances() {
                 // Action to manage ambulances, such as opening a page or modal
diff --git a/manage.html b/manage.html
index 660d3e32..90801f1e 100644
--- a/manage.html
+++ b/manage.html
@@ -22,11 +22,25 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
                 <li><a href="manage.html">Manage Status</a></li>
                 <li><a href="driver.html">Manage Driver</a></li>
                 <li><a href="ambtracker.html">Manage Ambulance</a></li>
-                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+                <li id="logout"><a href="#"><i class="fa-solid fa-right-from-bracket"></i></a></li>
             </ul>
+            <div class="resp">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout" onclick="logout1()"><a href="#"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
         </nav>
     </header>
 
+    <!-- Dropdown -->
+    <div class="dropdown-menu">
+        <ul class="navbar-links2">
+            <li><a href="hospital.html">Dashboard</a></li>
+            <li><a href="manage.html">Manage Status</a></li>
+            <li><a href="driver.html">Manage Driver</a></li>
+            <li><a href="ambtracker.html">Manage Ambulance</a></li>
+        </ul>
+     </div>
+
     <main>
         <div class="manage-container">
             <h1>Manage Status</h1>
@@ -123,6 +137,19 @@ <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
             section.classList.add('active');
         }
 
+        // Dropdown
+        let flag = false
+        document.getElementById('dropdown').addEventListener('click', () => {
+            const dropdown = document.querySelector('.dropdown-menu');
+            if (flag) {
+                dropdown.style.display = 'none';
+                flag = false;
+            } else {
+                dropdown.style.display = 'block';
+                flag = true;
+            }
+        });
+
         // Function to hide a section
         function hideSection(section) {
             section.classList.add('hidden');
@@ -303,6 +330,15 @@ <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
             } else return
         });
 
+        // Logout (for small screens)
+        function logout1(){
+            cf = confirm('Are you sure you want to logout?');
+            if (cf) {
+                window.location.href = 'index.html';
+                alert("Logged out successfully!");
+            } else return
+        }
+
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/css/driver.css b/src/css/driver.css
index d234c2ba..d08516e7 100644
--- a/src/css/driver.css
+++ b/src/css/driver.css
@@ -1,196 +1,201 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-
 /* General Reset */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: "Poppins", sans-serif;
+}
+
+header {
+  width: 100%;
 }
 
 /* Navbar Enhancements */
 .navbar {
-    background-color: #34495e;
-    padding: 20px 40px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 1527px;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-    margin-bottom: 20px;
-  }
-  
-  .navbar img {
-    height: 50px;
-    margin-right: 10px;
-  }
-  
-  .navbar-logo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .navbar-logo h2 {
-    color: #ecf0f1;
-    margin: 0;
-    font-size: 24px;
-  }
-  
-  .navbar-links {
-    list-style: none;
-    display: flex;
-    gap: 25px;
-    font-weight: 400;
-  }
-  
-  .navbar-links li {
-    font-weight: 400;
-  }
-  
-  .navbar-links a {
-    color: #ecf0f1;
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 18px;
-    transition: color 0.3s ease;
-  }
-  
-  .navbar-links a:hover {
-    text-decoration: underline;
-    text-underline-offset: 5px;
-    color: #3dbdec;
-    text-decoration-thickness: 3px;
-  }
+  background-color: #34495e;
+  padding: 20px 40px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+.navbar img {
+  height: 50px;
+  margin-right: 10px;
+}
+
+.navbar-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navbar-logo h2 {
+  color: #ecf0f1;
+  margin: 0;
+  font-size: 24px;
+}
+
+.navbar-links {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+  font-weight: 400;
+}
+
+.navbar-links li {
+  font-weight: 400;
+}
+
+.navbar-links li:nth-child(5) {
+  margin-right: 70px;
+}
+
+.navbar-links a {
+  color: #ecf0f1;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 18px;
+  transition: color 0.3s ease;
+}
+
+.navbar-links a:hover {
+  text-decoration: underline;
+  text-underline-offset: 5px;
+  color: #3dbdec;
+  text-decoration-thickness: 3px;
+}
 
 /* Body Styling */
 body {
-    font-family: "Poppins", sans-serif;
-    background: #e8f5e9;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  font-family: "Poppins", sans-serif;
+  background: #e8f5e9;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 html {
-    overflow-y: scroll;
+  overflow-y: scroll;
 }
 
 html::-webkit-scrollbar {
-    width: 9px;
-    transition: width 0.3s ease;
-    margin: 10px;
+  width: 9px;
+  transition: width 0.3s ease;
+  margin: 10px;
 }
 
 html::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(216, 216, 216, 0.74);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  background: rgba(216, 216, 216, 0.74);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
 }
 
 html::-webkit-scrollbar-thumb:window-inactive {
-    background: rgb(156, 156, 156);
+  background: rgb(156, 156, 156);
 }
 
 /* Dashboard Container */
 .dashboard-container {
-    background-color: white;
-    padding: 40px;
-    border-radius: 15px;
-    text-align: center;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    width: 400px;
-    margin-bottom: 14px;
+  background-color: white;
+  padding: 30px;
+  border-radius: 20px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  margin-bottom: 14px;
 }
 
 .dashboard-container h1 {
-    font-size: 28px;
-    color: #388e3c;
-    margin-bottom: 20px;
+  font-size: 28px;
+  color: #388e3c;
+  margin-bottom: 20px;
 }
 
 .dashboard-container p {
-    font-size: 18px;
-    color: #555;
-    margin-bottom: 20px;
+  font-size: 18px;
+  color: #555;
+  margin-bottom: 20px;
 }
 
 #working-status {
-    margin-top: 20px;
-    font-size: 16px;
-    color: #00796b;
+  margin-top: 20px;
+  font-size: 16px;
+  color: #00796b;
 }
 
 /* Availability Toggle */
 .availability-toggle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
 }
 
 /* Toggle Switch Styling */
 .switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
 }
 
 .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
 .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    transition: 0.4s;
-    border-radius: 34px;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
 }
 
 .slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    transition: 0.4s;
-    border-radius: 50%;
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
 }
 
 input:checked + .slider {
-    background-color: #388e3c;
+  background-color: #388e3c;
 }
 
 input:checked + .slider:before {
-    transform: translateX(26px);
+  transform: translateX(26px);
 }
 
 /* Round Toggle */
 .slider.round {
-    border-radius: 34px;
+  border-radius: 34px;
 }
 
 .slider.round:before {
-    border-radius: 50%;
+  border-radius: 50%;
 }
 
 .toggle-container {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
 }
 
 .toggle-container p {
-    margin-left: 10px;
-}
\ No newline at end of file
+  margin-left: 10px;
+}
diff --git a/src/css/hospital.css b/src/css/hospital.css
index da8080aa..a9aa6484 100644
--- a/src/css/hospital.css
+++ b/src/css/hospital.css
@@ -41,12 +41,6 @@ html::-webkit-scrollbar-thumb:window-inactive {
     font-size: 24px;
 }
 
-.navbar-links {
-    list-style: none;
-    display: flex;
-    gap: 25px;
-}
-
 .navbar-links a {
     color: #ecf0f1;
     text-decoration: none;
diff --git a/src/css/manage.css b/src/css/manage.css
index 7332a2ab..3b6d81d6 100644
--- a/src/css/manage.css
+++ b/src/css/manage.css
@@ -245,6 +245,35 @@ select:focus {
   text-decoration-thickness: 3px;
 }
 
+/* Dropdown Menu */
+.navbar-links2 {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 70px;
+  padding: 10px;
+  font-weight: 400;
+}
+
+.navbar-links2 li {
+  font-weight: 400;
+}
+
+.navbar-links2 a {
+  color: #ecf0f1;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 18px;
+  transition: color 0.3s ease;
+}
+
+.navbar-links2 a:hover {
+  text-decoration: underline;
+  text-underline-offset: 5px;
+  color: #3dbdec;
+  text-decoration-thickness: 3px;
+}
+
 /* Enhance Dashboard Layout */
 /* Adjusting body to accommodate dashboard layout */
 body {
@@ -257,3 +286,58 @@ body {
 .manage-container {
   flex: 1;
 }
+
+.resp {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  color: white;
+}
+
+.dropdown-menu {
+  display: none;
+}
+
+.dropdown-menu {
+  display: none;
+  flex-direction: column;
+  background-color: #34495ee7;
+  padding: 10px;
+  color: black;
+  position: absolute;
+  top: 13%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999; /* Ensure it shows above */
+  width: 100%;
+  text-align: center;
+  height: 100%; /* Adjust height automatically */
+  overflow: visible;
+}
+
+/* Responsive Header */
+@media (max-width: 968px) {
+  .navbar-links {
+    display: none;
+  }
+  .resp {
+    display: flex;
+    gap: 10px;
+    font-size: 20px;
+  }
+  #dropdown {
+    background-color: transparent;
+    border: 1px solid transparent;
+    font-size: 20px;
+    color: white;
+  }
+
+  .navbar-logo img {
+    height: 40px;
+  }
+
+  .navbar-logo h2 {
+    font-size: 20px;
+  }
+}

From 0200c3a7fe4274b46b9490855119a970dda3ecf8 Mon Sep 17 00:00:00 2001
From: VivekShahare04 <mastervivek23@gmail.com>
Date: Tue, 8 Oct 2024 07:50:16 +0530
Subject: [PATCH 2/3] index and features file updated with script

---
 features.html | 58 +++++++++++++++++++++++++++++++++++++++++++++------
 index.html    | 44 +++++++++++++++++++++++++-------------
 script.js     |  3 ++-
 3 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/features.html b/features.html
index 7206f1b5..72610615 100644
--- a/features.html
+++ b/features.html
@@ -100,6 +100,13 @@
                 transform: translateY(0);
             }
         }
+        #thankYouMessage {
+    margin-top: 20px;
+    font-size: 18px;
+    color: green;
+    display: none; /* Initially hidden */
+    }
+
     </style>
 </head>
 <body>
@@ -218,12 +225,20 @@ <h3>Follow Us</h3>
             </div>
 
             <!-- Newsletter Subscription -->
-            <div style="flex: 1; min-width: 200px;">
-                <h3>Subscribe to Our Newsletter</h3>
-                <form action="#">
-                    <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%;" required><br><br>
-                    <button type="submit" style="background-color: #ff5733; color: white; padding: 10px 20px; border: none; cursor: pointer;">Subscribe</button>
-                </form>
+            <div class="accordion">
+                <div class="accordion__header">Subscribe to Newsletter</div>
+                <div class="accordion__content">
+                    <!-- Subscription form -->
+                    <form id="subscribeForm">
+                        <input type="email" id="emailInput" placeholder="Your Email" required>
+                        <button type="submit">Subscribe</button>
+                    </form>
+                </div>
+            </div>
+            
+            <!-- Thank You Message (Initially Hidden) -->
+            <div id="thankYouMessage" style="display:none;">
+                <p>Thank you for subscribing!</p>
             </div>
         </div>
 
@@ -235,5 +250,36 @@ <h3>Subscribe to Our Newsletter</h3>
     
 </footer>
 
+<script>
+    // Accordion Functionality
+    const accordionHeader = document.querySelector('.accordion__header');
+    const accordionContent = document.querySelector('.accordion__content');
+
+    accordionHeader.addEventListener('click', function() {
+        if (accordionContent.style.display === 'block') {
+            accordionContent.style.display = 'none';
+        } else {
+            accordionContent.style.display = 'block';
+        }
+    });
+
+    // Form Submission Functionality
+    const form = document.getElementById('subscribeForm');
+    const thankYouMessage = document.getElementById('thankYouMessage');
+
+    form.addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent the default form submission behavior
+
+        // Show the thank you message
+        thankYouMessage.style.display = 'block';
+
+        // Hide the accordion content after submission
+        accordionContent.style.display = 'none';
+
+        // Clear the input field
+        document.getElementById('emailInput').value = '';
+    });
+</script>
+
 </body>
 </html>
diff --git a/index.html b/index.html
index 5e745241..da37da85 100644
--- a/index.html
+++ b/index.html
@@ -319,21 +319,21 @@ <h3>Follow Us</h3>
               </div>
   
               <!-- Newsletter Subscription -->
-        <div style="flex: 1; min-width: 200px">
-          <h3>Subscribe to Our Newsletter</h3>
-          <form action="#">
-            <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%" required /><br /><br />
-            <button type="submit" style="
-                  background-color: #ff5733;
-                  color: white;
-                  padding: 10px 20px;
-                  border: none;
-                  cursor: pointer;
-                ">
-              Subscribe
-            </button>
-          </form>
-        </div>
+              <div style="flex: 1; min-width: 200px">
+                <h3>Subscribe to Our Newsletter</h3>
+                <form id="subscribeForm"> <!-- Added ID subscribeForm -->
+                  <input type="email" id="emailInput" placeholder="Your Email" style="padding: 10px; width: 80%" required /><br /><br />
+                  <button type="submit" style="
+                        background-color: #ff5733;
+                        color: white;
+                        padding: 10px 20px;
+                        border: none;
+                        cursor: pointer;">
+                    Subscribe
+                  </button>
+                </form>
+                <p id="thankYouMessage" style="display:none; color: white;">Thank you for subscribing!</p> <!-- Added ID thankYouMessage -->
+              </div>
       </div>
       </div>
 
@@ -366,6 +366,20 @@ <h3>Subscribe to Our Newsletter</h3>
     window.onload = function () {
       document.getElementById("home-link").classList.add("active");
     };
+
+    const thankYouMessage = document.getElementById("thankYouMessage");
+  const form = document.getElementById("subscribeForm");
+
+  form.addEventListener("submit", function(event) {
+    event.preventDefault(); // Prevent form from refreshing the page
+
+    // Show Thank You Message after subscribing
+    thankYouMessage.style.display = 'block';
+
+    // Optionally clear the input field after subscribing
+    document.getElementById("emailInput").value = '';
+  });
+
   </script>
 </body>
 
diff --git a/script.js b/script.js
index 4f2048b7..df7d7d11 100644
--- a/script.js
+++ b/script.js
@@ -23,4 +23,5 @@ accordions.forEach((accordion, index) => {
             }
         });
     });
-});
\ No newline at end of file
+});
+

From 03f57446b992e6468b9a35e6929834d61ad94c0f Mon Sep 17 00:00:00 2001
From: VivekShahare04 <mastervivek23@gmail.com>
Date: Tue, 8 Oct 2024 08:07:40 +0530
Subject: [PATCH 3/3] changes made in file team

---
 team.html | 164 ++++++++++++++++++++----------------------------------
 1 file changed, 60 insertions(+), 104 deletions(-)

diff --git a/team.html b/team.html
index d99ad5dc..e24352df 100644
--- a/team.html
+++ b/team.html
@@ -5,21 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Team</title>
     <link rel="stylesheet" href="src/css/index.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@500&display=swap" rel="stylesheet">
     <style>
-        /* .logo span {
-            font-size: 28px;
-            font-weight: bold;
-            background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-            -webkit-background-clip: text;
-            color: transparent;
-            letter-spacing: 2px;
-            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-            font-family: 'Arial', sans-serif;
-        } */
-
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Roboto', sans-serif;
             background-color: #f4f4f4;
             margin: 0;
             padding: 0;
@@ -29,29 +19,56 @@
             min-height: 100vh;
         }
 
+        header {
+            background-color: #2980b9;
+            color: white;
+            padding: 20px 0;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+
+        .logo img {
+            width: 50px;
+            height: auto;
+        }
+
+        .menu ul {
+            list-style: none;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            margin: 0;
+        }
+
+        .menu ul li {
+            margin: 0 15px;
+        }
+
         .menu ul li a {
             padding: 10px 15px;
-            color: black;
+            color: white;
             text-decoration: none;
+            transition: background-color 0.3s, transform 0.3s;
         }
-        
-        .menu ul li a.active {
-            color: white;
-            background-color: #000;
+
+        .menu ul li a:hover {
+            background-color: #1c598a;
+            transform: translateY(-2px);
         }
 
         .content {
             margin: 20px;
             padding: 20px;
             background-color: #fff;
-            border-radius: 5px;
+            border-radius: 10px;
             flex-grow: 1;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
 
         h1 {
-            color: #2c3e50;
+            color: #2980b9;
             text-align: center;
             margin-bottom: 20px;
+            font-family: 'Montserrat', sans-serif;
         }
 
         .team-section {
@@ -71,11 +88,8 @@
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
             width: 250px;
             max-width: 100%;
-        }
-
-        .team-member:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+            position: relative;
+            overflow: hidden;
         }
 
         .team-member img {
@@ -85,12 +99,23 @@
             margin-bottom: 10px;
             border-radius: 50%;
             border: 3px solid #2980b9;
+            transition: transform 0.3s;
+        }
+
+        .team-member:hover img {
+            transform: scale(1.1);
+        }
+
+        .team-member:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
         }
 
         .team-member h2 {
             color: #2980b9;
             margin-bottom: 10px;
             font-size: 1.2em;
+            font-family: 'Montserrat', sans-serif;
         }
 
         .team-member p {
@@ -106,9 +131,8 @@
             text-align: left;
             border-radius: 10px;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            margin-top: 30px;
-            margin-bottom: 5px;
-            padding-bottom: 5px;
+            margin: 30px auto;
+            max-width: 900px;
         }
 
         .contact-feature img {
@@ -122,10 +146,9 @@
             background-color: #000;
             color: white;
             text-align: center;
-            padding: 10px 0;
-            position: relative;
-            bottom: 0;
+            padding: 20px 0;
             width: 100%;
+            position: relative;
         }
 
         @keyframes fadeIn {
@@ -142,12 +165,9 @@
 
 <header>
     <div class="container">
-
         <div class="logo">
-            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width:50px; height:auto;">
-           
+            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo">
         </div>
-
         <nav class="menu">
             <ul>
                 <li><a href="index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a></li>
@@ -156,9 +176,9 @@
                 <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li>
             </ul>
         </nav>
-        <div class="buttons">
-            <a href="login.html" class="login">Log in</a>
-            <a href="up.html" class="get-started">Get started</a>
+        <div class="buttons" style="text-align: center; margin-top: 10px;">
+            <a href="login.html" class="login" style="background-color: #2980b9; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; margin-right: 10px;">Log in</a>
+            <a href="up.html" class="get-started" style="background-color: #e81a1a; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;">Get started</a>
         </div>
     </div>
 </header>
@@ -195,78 +215,14 @@ <h2>GPS Technician</h2>
     <div>
         <h2>Contact Us</h2>
         <p>Reach out to us for any inquiries or assistance. We're here to help you 24/7 with our emergency services.</p>
-        <a href="contact.html" class="button">Go to Contact</a>
+        <a href="contact.html" class="button" style="background-color: #2980b9; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;">Go to Contact</a>
     </div>
 </div>
 
-
 <footer>
-
     <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-
-    <div style="background-color: #333; color: white; padding: 20px;">
-        <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
-            <!-- Quick Links Section -->
-            <div style="flex: 1; min-width: 200px;">
-                <h3>Quick Links</h3>
-                <ul style="list-style-type: none; padding: 0;">
-                    <li><a href="about.html" style="color: white; text-decoration: none;">About Us</a></li>
-                    <li><a href="contact.html" style="color: white; text-decoration: none;">Contact Us</a></li>
-                    <li><a href="privacy.html" style="color: white; text-decoration: none;">Privacy Policy</a></li>
-                    <li><a href="terms.html" style="color: white; text-decoration: none;">Terms of Service</a></li>
-                    <li><a href="sitemap.html" style="color: white; text-decoration: none;">Site Map</a></li>
-                </ul>
-            </div>
-
-            <!-- Contact Information Section -->
-            <div style="flex: 1; min-width: 200px;">
-                <h3>Contact Info</h3>
-                <p>123 Emergency Lane, Mumbai, India</p>
-                <p>Email:emergency@ambulanceservice.in</p>
-                <p>Phone: +91-911-1234567</p>
-            </div>
-
-            <!-- Social Media Links -->
-            <div style="flex: 1; min-width: 200px;">
-                <h3>Follow Us</h3>
-                <a href="https://www.facebook.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br>
-                <a href="https://www.twitter.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br>
-                <a href="https://www.instagram.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br>
-                <a href="https://www.linkedin.com" style="color: white; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
-            </div>
-
-            <!-- Newsletter Subscription -->
-            <div style="flex: 1; min-width: 200px;">
-                <h3>Subscribe to Our Newsletter</h3>
-                <form action="#">
-                    <input type="email" placeholder="Your Email" style="padding: 10px; width: 80%;" required><br><br>
-                    <button type="submit" style="background-color: #ff5733; color: white; padding: 10px 20px; border: none; cursor: pointer;">Subscribe</button>
-                </form>
-            </div>
-        </div>
-
-        <!-- Copyright Section -->
-        <div style="text-align: center; margin-top: 20px; border-top: 1px solid white; padding-top: 10px;">
-            <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-        </div>
-    </div>
-    
-    </footer>
-    <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
-
 </footer>
 
-<script>
-    function changeContent(page) {
-        var links = document.querySelectorAll('.menu ul li a');
-        links.forEach(link => link.classList.remove('active'));
-        document.getElementById(page + '-link').classList.add('active');
-    }
-
-    window.onload = function() {
-        document.getElementById('team-link').classList.add('active');
-    };
-</script>
-
+<script src="src/js/index.js"></script>
 </body>
 </html>