From da1e64ec759acdbec0cfd8edf52578a461fe9924 Mon Sep 17 00:00:00 2001
From: unknown <dindishriya@gmail.com>
Date: Tue, 5 Nov 2024 19:19:47 +0530
Subject: [PATCH] feedback

---
 Feedback.html | 360 ++++++++++++++++++++++++--------------------------
 1 file changed, 176 insertions(+), 184 deletions(-)
diff --git a/Feedback.html b/Feedback.html
index 2728182..9772af1 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -458,10 +458,6 @@
     </nav>
 
     <div class="buttons">
-
-      <a href="login.html" class="login">Log in</a>
-      <a href="up.html" class="get-started">Get started</a>
-
       <button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
         <i class="fa-solid fa-moon"></i>
       </button>
@@ -475,38 +471,169 @@
 <body>
   <header>
 
-    <h1>AmbuFlow Feedback</h1>
+    <h1>Feedback</h1>
 
   </header>
+        <!-- Thank You Message -->
+        <div class="content">
+          <div class="feedback-box">
+              <h2>Feedback Form</h2>
+              
+              <form id="feedback-form">
+                  <!-- Name Input -->
+                  <label for="name">Name:</label>
+                  <input type="text" id="name" name="name" class="input-field" placeholder="Enter your name" required />
+      
+                  <!-- Email Input -->
+                  <label for="email">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>
+                  <textarea id="comments" name="comments" class="feed-msg" rows="5" placeholder="Share your feedback..." required></textarea>
+                  
+                  <!-- Star Rating -->
+                  <h3>Please rate your experience:</h3>
+                  <div class="star-rating">
+                      <input type="radio" id="star5" name="rating" value="5" />
+                      <label for="star5" title="5 stars">★</label>
+                      <input type="radio" id="star4" name="rating" value="4" />
+                      <label for="star4" title="4 stars">★</label>
+                      <input type="radio" id="star3" name="rating" value="3" />
+                      <label for="star3" title="3 stars">★</label>
+                      <input type="radio" id="star2" name="rating" value="2" />
+                      <label for="star2" title="2 stars">★</label>
+                      <input type="radio" id="star1" name="rating" value="1" />
+                      <label for="star1" title="1 star">★</label>
+                  </div>
+      
+                  <!-- Submit Button -->
+                  <div class="feed-btn">
+                      <button type="submit" class="submit-button">Submit Feedback</button>
+                  </div>
+              </form>
+      
+              <!-- Thank You Message Text Only -->
+              <p id="thank-youmessage" style="display: none; color: grey; font-size: medium; margin-top: 10px;">
+                  Thank you for your feedback!
+              </p>
+          </div>
+      </div>
+      <script>
+          // JavaScript to handle form submission and show thank you message
+          document.getElementById('feedback-form').addEventListener('submit', function(event) {
+              event.preventDefault(); // Prevents form from refreshing page
+              document.getElementById('thank-youmessage').style.display = 'block';
+              this.reset(); // Resets the form fields
+          });
+      </script>      
+<style>
+  /* General styling */
+.content {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+
+.feedback-box {
+  width: 100%;
+  max-width: 600px;
+  background-color: #f9f9f9;
+  padding: 25px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.feedback-box h2 {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.feedback-box label {
+  font-weight: bold;
+  margin-top: 15px;
+  display: block;
+  color: #333;
+}
+
+.input-field, .feed-msg {
+  width: 500px;
+  padding: 10px;
+  margin: 8px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.star-rating {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+}
+
+.star-rating input {
+  display: none;
+}
+
+.star-rating label {
+  font-size: 24px;
+  color: #8f8d8a;
+  cursor: pointer;
+}
+
+.star-rating input:checked ~ label,
+.star-rating label:hover,
+.star-rating label:hover ~ label {
+  color: #ffac33;
+}
+
+.feed-btn {
+  text-align: center;
+  margin-top: 15px;
+}
+
+.submit-button {
+  background-color: #333;
+  color: #fff;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submit-button:hover {
+  background-color: #555;
+}
+</style>  
+<script>
+  document.getElementById('feedback-form').addEventListener('submit', function(event) {
+  event.preventDefault();
+  document.getElementById('thank-you-message').style.display = 'block';
+  setTimeout(() => {
+    document.getElementById('thank-you-message').style.display = 'none';
+    document.getElementById('feedback-form').reset();
+  }, 3000);
+});
+</script>
+</a>
 
-  <div class="content">
-      <h1>Feedback</h1>
-      <div class="feedback-box">
-        <h3>Please rate your experience:</h3>
-        <form id="feedback-box">
-          <div class="star-rating">
-            <input type="radio" id="star5" name="rating" value="5" aria-label="5 stars" />
-            <label for="star5" title="5 stars">★</label>
-            <input type="radio" id="star4" name="rating" value="4" aria-label="4 stars" />
-            <label for="star4" title="4 stars">★</label>
-            <input type="radio" id="star3" name="rating" value="3" aria-label="3 stars" />
-            <label for="star3" title="3 stars">★</label>
-            <input type="radio" id="star2" name="rating" value="2" aria-label="2 stars" />
-            <label for="star2" title="2 stars">★</label>
-            <input type="radio" id="star1" name="rating" value="1" aria-label="1 star" />
-            <label for="star1" title="1 star">★</label>
-    <div id="thank-you-message" class="thank-feed">
-      Thank you for your response!
-    </div>
-  </div>
+<script src="preloader.js"></script>
+
+
+<!--  -->
+<script>
+  // Back to top button functionality
+  const backToTopButton = document.getElementById('backToTopBtn');
 
 
+  <script src="preloader.js"></script>
 
-  <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
+      <footer style=" color: #f3f4f6; text-align: center; width: 100%;">
     <div style="background-color: #C4D7FF; color: #f3f4f6; ">
       <div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
-
-        <!-- Quick Links Section -->
         <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
           <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
           <ul style="list-style-type: none; padding: 0;">
@@ -517,22 +644,13 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
             <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
           </ul>
         </div>
-
-        <!-- Contact Information Section -->
         <div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
           <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
-          <p style="color: #333; margin-bottom: 10px;font-size:0.8rem";>
-            Email: 
-            <a href="mailto:emergency@ambulanceservice.in" style="color: #3173f8;">emergency@ambulanceservice.in</a>
-        </p>
-        <p style="color: #333;">
-            Phone: 
-            <a href="tel:+91-911-1234567" style="color: #333; text-decoration: none; transition: color 0.3s;">+91-911-1234567</a>
-        </p>
+          <p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
+          <a href="mailto:emergency@ambulanceservice.in" style="color: #000000;">emergency@ambulanceservice.in</a></p>
+          <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a>
+          </p>
         </div>
-
-        <!-- Modified the looks of the social icons -->
-        <!-- Social Media Links -->
         <div style="text-align: center; min-width: 200px; color: black;">
           <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
           <div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
@@ -544,155 +662,29 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h
               style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
             <a href="https://www.linkedin.com" class="social-icon linkedin"
               style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
-
           </div>
+        </div>
+        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
+          <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
+          <form action="#">
+            <input type="email" placeholder="Your Email"
+              style="padding: 10px; width: 80%; border: none; border-radius: 5px;" 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>
+        </div>
 
-          <h3>Your Comments:</h3>
-          <textarea class="feed-msg" rows="5" style="width:500px; margin:10px;" placeholder="Share your feedback..." required></textarea>
-            <div class="feed-btn">
-            <button type="submit">Submit Feedback</button>
-          </div>
-        </form>
       </div>
-      <div id="thank-you-message">
-        Thank you for your feedback!
-      </div>
-    </div>
-  </div>
-
-</a>
 
-<script src="preloader.js"></script>
-
-
-<!--  -->
-<script>
-  // Back to top button functionality
-  const backToTopButton = document.getElementById('backToTopBtn');
-
-
-  <script src="preloader.js"></script>
-
-  <script>
-
-    document.addEventListener('DOMContentLoaded', function () {
-      const toggleButton = document.getElementById('dark-mode-toggle');
-      const darkModeButton = document.querySelector('.dark-mode-toggle');
-      const logoImage = document.querySelector('.logo img'); // Select the logo image
-      const navbar = document.querySelector('.navbar'); // Select the navbar
-
-      // Reset to light mode for the Contact page
-      document.body.classList.remove("dark-mode");
-      document.body.classList.add("light-mode");
-      darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
-      navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
-
-      // Clear the sessionStorage for theme on this page
-      sessionStorage.removeItem("theme");
-
-
-  <footer>
-    <div>
-      <h3>Connect with us!</h3>
-      <div>
-        <a href="https://facebook.com" class="social-icon" aria-label="Facebook">
-          <i class="fa-brands fa-facebook"></i>
-        </a>
-        <a href="https://twitter.com" class="social-icon" aria-label="Twitter">
-          <i class="fa-brands fa-x-twitter"></i>
-        </a>
-        <a href="https://instagram.com" class="social-icon" aria-label="Instagram">
-          <i class="fa-brands fa-instagram"></i>
-        </a>
-        <a href="https://linkedin.com" class="social-icon" aria-label="LinkedIn">
-          <i class="fa-brands fa-linkedin-in"></i>
-        </a>
-      </div>
     </div>
-    <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+    <hr>
+    <div
+      style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;">
+      <strong>
+        <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+      </strong>
+    </div>
   </footer>
-
-  <script>
-    // Preloader hide on load
-    window.onload = function () {
-      document.getElementById('preloader').style.display = 'none';
-    };
-
-    // Feedback form submission
-    document.getElementById('feedback-box').addEventListener('submit', function (event) {
-      event.preventDefault(); // Prevent the form from actually submitting
-
-      // Hide the feedback box and show the thank you message
-      document.querySelector('.feedback-box').style.display = 'none';
-      document.getElementById('thank-you-message').style.display = 'flex'; // Show the message
-    });
-
-
-    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);
-
-  // Show the button when scrolled down 100px from the top
-  window.onscroll = function () {
-    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-      backToTopButton.style.display = "block";
-    } else {
-      backToTopButton.style.display = "none";
-
-    }
-  };
-
-  // Scroll to top when the button is clicked
-  backToTopButton.addEventListener('click', () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  });
-</script>
-
-
-<script>
-  // Dark mode functionality
-  document.addEventListener('DOMContentLoaded', function () {
-    const toggleButton = document.getElementById('dark-mode-toggle');
-    const darkModeButton = document.querySelector('.dark-mode-toggle');
-    const logoImage = document.querySelector('.logo img'); // Select the logo image
-    const navbar = document.querySelector('.navbar'); // Select the navbar
-
-    // Reset to light mode for the Contact page
-    document.body.classList.remove("dark-mode");
-    document.body.classList.add("light-mode");
-    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon for light mode
-    navbar.classList.remove("dark-mode"); // Ensure navbar is in light mode
-
-    // Clear the sessionStorage for theme on this page
-    sessionStorage.removeItem("theme");
-
-    toggleButton.addEventListener('click', function () {
-
-    // Toggle dark mode functionality
-    const toggleDarkMode = () => {
-
-      document.body.classList.toggle('dark-mode');
-    };
-
-    // Add event listener to a dark mode toggle button (if implemented)
-    document.querySelector('.dark-mode-toggle').addEventListener('click', toggleDarkMode);
-  </script>
 </body>
 
 </html>
