From 0ce027f74e9a56da02df224e77da86113e25f961 Mon Sep 17 00:00:00 2001
From: 4F24L <afzalmir2003@gmail.com>
Date: Mon, 7 Oct 2024 12:38:23 +0530
Subject: [PATCH 1/2] faq section added

---
 index.html        | 175 ++++++++++++++++++++++++++++++++++++++++++++++
 src/css/index.css |   4 ++
 2 files changed, 179 insertions(+)

diff --git a/index.html b/index.html
index dc46cfa2..13f3a4b8 100644
--- a/index.html
+++ b/index.html
@@ -182,6 +182,92 @@
     .red {
       color: red; /* Change the color of letters in this class to red */
     }
+
+
+    /* faq section styles */
+    .faq-section{
+      background-color: #e7f3fe;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      
+    }
+
+    
+
+    .faq-h2{
+      margin-bottom: 1.5rem;
+      font-size: 2.5rem;
+      font-weight: 600;
+    }
+
+    .faqs{
+      width: 100%;
+    }
+
+    .faq {
+    margin-bottom: 15px;
+    width: 100%; /* Full width by default */
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    overflow: hidden;
+    }
+
+   .faq-question {
+    background-color: #e7ffe7;
+    color: #333;
+    padding: 10px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    }
+
+    .faq-question::after {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #333; /* Downward pointing wide "V" */
+    transition: transform 0.3s ease;
+
+    margin-right: 10px;
+    }
+
+    .faq.active .faq-question::after {
+    border-top: none;
+    border-bottom: 8px solid #333; /* Upward pointing wide "V" */
+    }
+
+    .faq-answer {
+    max-height: 0; /* Initially hidden */
+    overflow: hidden; /* Hide content when not visible */
+    padding: 0 10px;
+    background-color: #fff;
+    transition: max-height 0.3s ease; /* Smooth transition */
+    border-top: 1px solid #ccc;
+    }
+
+    .faq-answer p {
+    margin-bottom: 10px;
+    }
+
+   .faq.active .faq-answer {
+    max-height: 200px; /* Set to a sufficient height to display content */
+    padding: 10px; /* Adds padding when expanded */
+   }
   </style>
 </head>
 
@@ -295,6 +381,71 @@ <h2>Contact Us</h2>
           <a href="contact.html" class="button">Go to Contact</a>
         </div>
       </div>
+
+      <!-- FAQ Section in Full Row -->
+
+      <div class="contact-feature faq-section">
+        <div class="faq-hd">
+          <div class="faq-h2">FAQ</div>
+          <!-- <div>Frequently Asked Questions</div> -->
+        </div>
+        <div class="faqs">
+
+          <div class="faq">
+            <button class="faq-question">What should I do while waiting for the ambulance?</button>
+            <div class="faq-answer">
+                <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">How do I track an ambulance in real-time?</button>
+            <div class="faq-answer">
+                <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the live map feature.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
+            <div class="faq-answer">
+                <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay, please contact emergency services for further instructions.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">Can I provide medical information for the patient in advance?</button>
+            <div class="faq-answer">
+                <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for the situation.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
+            <div class="faq-answer">
+                <p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending on the provider.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">How can I request special medical equipment or personnel on the ambulance?</button>
+            <div class="faq-answer">
+                <p>During your request, you can specify if the patient needs specific medical equipment or personnel, such as a ventilator or a specialized doctor.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
+            <div class="faq-answer">
+                <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a technical issue through the system or contact support.</p>
+            </div>
+         </div>
+          <div class="faq">
+            <button class="faq-question">Can I schedule an ambulance in advance?</button>
+            <div class="faq-answer">
+                <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
+            </div>
+         </div>
+         
+
+        </div>
+      </div>
+
+      <!-- FAQ section ends here -->
+
     </div>
   </div>
   <footer>
@@ -367,5 +518,29 @@ <h3>Subscribe to Our Newsletter</h3>
       });
     };
   </script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+    const faqButtons = document.querySelectorAll('.faq-question');
+
+    faqButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const faq = button.parentElement;
+            const answer = faq.querySelector('.faq-answer');
+
+            // Toggle active class
+            faq.classList.toggle('active');
+
+            // Control the max-height for slide effect
+            if (faq.classList.contains('active')) {
+                answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
+            } else {
+                answer.style.maxHeight = null; // Remove max-height to hide
+            }
+        });
+    });
+    });
+
+
+  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/css/index.css b/src/css/index.css
index 0c1c1e8f..dffd992f 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -471,3 +471,7 @@ header {
 }
 
 /* Preloader Css Ends */
+
+/* faq section */
+
+

From da8f2886f6738c1cf7c96e21d3a0ac3b75bb6004 Mon Sep 17 00:00:00 2001
From: 4F24L <afzalmir2003@gmail.com>
Date: Mon, 7 Oct 2024 12:46:05 +0530
Subject: [PATCH 2/2] Small Headline Change

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 13f3a4b8..e33abb34 100644
--- a/index.html
+++ b/index.html
@@ -386,7 +386,7 @@ <h2>Contact Us</h2>
 
       <div class="contact-feature faq-section">
         <div class="faq-hd">
-          <div class="faq-h2">FAQ</div>
+          <div class="faq-h2">Frequently Asked Questions [ FAQs ]</div>
           <!-- <div>Frequently Asked Questions</div> -->
         </div>
         <div class="faqs">