From 760481ba367a56c73b9571f63a2a536326988533 Mon Sep 17 00:00:00 2001
From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com>
Date: Sat, 12 Oct 2024 19:09:30 +0530
Subject: [PATCH] Update Feedback.html

---
 Feedback.html | 287 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 187 insertions(+), 100 deletions(-)

diff --git a/Feedback.html b/Feedback.html
index 1119839..3357d93 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -329,6 +329,26 @@
       background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
       transition: transform 0.1s, left 0.1s, top 0.1s;
     }
+
+    #backToTopBtn {
+      display: none; /* Hidden by default */
+      position: fixed;
+      bottom: 20px;
+      right: 30px;
+      z-index: 99;
+      font-size: 18px;
+      border: none;
+      outline: none;
+      background-color: #e81a1a;
+      color: white;
+      cursor: pointer;
+      padding: 15px;
+      border-radius: 4px;
+    }
+
+    #backToTopBtn:hover {
+      background-color: #555;
+    }
   </style>
 </head>
 
@@ -491,116 +511,183 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       ">↑</button>
     </div>
 </footer>
-<script src="preloader.js"></script>
-  <script>
-    // Add event listeners to each star label for toggling the selection
-    const stars = document.querySelectorAll('.star-rating input');
-    stars.forEach(star => {
-      star.addEventListener('change', function () {
-        // Remove the checked state from all stars
-        stars.forEach(s => {
-          const label = document.querySelector(`label[for="${s.id}"]`);
-          label.style.color = '#ddd'; // Reset color for unselected stars
-        });
-        // Highlight the selected star and all previous stars
-        this.checked = true;
-        const currentStarValue = this.value;
-        for (let i = 1; i <= currentStarValue; i++) {
-          const label = document.querySelector(`label[for="star${i}"]`);
-          label.style.color = '#ffdd00'; // Highlight selected stars
-        }
-      });
-    });
-
-    // Handle form submission
-    const form = document.getElementById('feedback-box');
-    const feedbackBox = document.querySelector('.feedback-box');
-    const thankYouMessage = document.getElementById('thank-you-message');
 
-    form.addEventListener('submit', function (event) {
-      event.preventDefault(); // Prevent the default form submission
+<!-- FAQ Popup Button -->
+<button id="faqButton" style="position: fixed; bottom: 20px; right: 80px; z-index: 1000; background-color: #2980b9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; display: none;">FAQ</button>
 
-      // Hide the feedback-box div
-      feedbackBox.style.display = 'none';
-
-      // Show the thank-you message
-      thankYouMessage.style.display = 'flex';
-
-      // Hide the form to avoid further submissions
-      form.style.display = 'none';
+<!-- FAQ Popup -->
+<div id="faqPopup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1001; max-width: 80%; max-height: 80%; overflow-y: auto;">
+  <h2>Frequently Asked Questions</h2>
+  <div class="faq-content">
+    <div class="faq-item">
+      <h3>What is AmbuFlow?</h3>
+      <p>AmbuFlow is an advanced ambulance monitoring system designed to optimize emergency response times and improve patient care.</p>
+    </div>
+    <div class="faq-item">
+      <h3>How does real-time tracking work?</h3>
+      <p>Our system uses GPS technology to track ambulances in real-time, allowing for efficient dispatch and route optimization.</p>
+    </div>
+    <div class="faq-item">
+      <h3>Is the service available 24/7?</h3>
+      <p>Yes, AmbuFlow operates round the clock to ensure emergency services are always available when needed.</p>
+    </div>
+    <div class="faq-item">
+      <h3>How can hospitals benefit from AmbuFlow?</h3>
+      <p>Hospitals can improve resource management, reduce response times, and enhance overall patient care through our integrated system.</p>
+    </div>
+  </div>
+  <button id="closeFaqPopup" style="background-color: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px;">Close</button>
+</div>
 
-      // Redirect to the home page after 2 seconds
-      setTimeout(function () {
-        window.location.href = 'index.html';
-      }, 5000); // Adjust the delay as needed
+<script src="preloader.js"></script>
+<script>
+  // Add event listeners to each star label for toggling the selection
+  const stars = document.querySelectorAll('.star-rating input');
+  stars.forEach(star => {
+    star.addEventListener('change', function () {
+      // Remove the checked state from all stars
+      stars.forEach(s => {
+        const label = document.querySelector(`label[for="${s.id}"]`);
+        label.style.color = '#ddd'; // Reset color for unselected stars
+      });
+      // Highlight the selected star and all previous stars
+      this.checked = true;
+      const currentStarValue = this.value;
+      for (let i = 1; i <= currentStarValue; i++) {
+        const label = document.querySelector(`label[for="star${i}"]`);
+        label.style.color = '#ffdd00'; // Highlight selected stars
+      }
     });
-
-    // Update or add this JavaScript for the cursor effect
-    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"
-    ];
+  });
+
+  // Handle form submission
+  const form = document.getElementById('feedback-box');
+  const feedbackBox = document.querySelector('.feedback-box');
+  const thankYouMessage = document.getElementById('thank-you-message');
+
+  form.addEventListener('submit', function (event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    // Hide the feedback-box div
+    feedbackBox.style.display = 'none';
+
+    // Show the thank-you message
+    thankYouMessage.style.display = 'flex';
+
+    // Hide the form to avoid further submissions
+    form.style.display = 'none';
+
+    // Redirect to the home page after 2 seconds
+    setTimeout(function () {
+      window.location.href = 'index.html';
+    }, 5000); // Adjust the delay as needed
+  });
+
+  // Update or add this JavaScript for the cursor effect
+  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.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
+      circle.style.left = x - 12 + "px";
+      circle.style.top = y - 12 + "px";
 
-    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.style.scale = (circles.length - index) / circles.length;
+      circle.x = x;
+      circle.y = y;
 
-        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>
+      const nextCircle = circles[index + 1] || circles[0];
+      x += (nextCircle.x - x) * 0.3;
+      y += (nextCircle.y - y) * 0.3;
+    });
 
-  <!-- Add this if it's not already present -->
-  <div class="circle"></div>
+    requestAnimationFrame(animateCircles);
+  }
+
+  animateCircles();
+
+  // Add this new code for the Back to Top functionality
+  const backToTopBtn = document.getElementById('backToTopBtn');
+  const faqButton = document.getElementById('faqButton');
+  const faqPopup = document.getElementById('faqPopup');
+  const closeFaqPopup = document.getElementById('closeFaqPopup');
+
+  // Show/hide buttons when user scrolls
+  window.onscroll = function() {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      backToTopBtn.style.display = "block";
+      faqButton.style.display = "block";
+    } else {
+      backToTopBtn.style.display = "none";
+      faqButton.style.display = "none";
+    }
+  };
+
+  // Scroll to top when button is clicked
+  backToTopBtn.addEventListener('click', function() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  });
+
+  // FAQ Popup functionality
+  faqButton.addEventListener('click', () => {
+    faqPopup.style.display = 'block';
+  });
+
+  closeFaqPopup.addEventListener('click', () => {
+    faqPopup.style.display = 'none';
+  });
+
+  // Close popup when clicking outside
+  window.addEventListener('click', (event) => {
+    if (event.target === faqPopup) {
+      faqPopup.style.display = 'none';
+    }
+  });
+</script>
+
+<!-- Add this if it's not already present -->
+<div class="circle"></div>
 </body>
 
 </html>