From 1b88b620ff4cd47a705cc8cc4d880a52f334a3dd Mon Sep 17 00:00:00 2001
From: Aditi Jain <aditijain132005@gmail.com>
Date: Mon, 7 Oct 2024 16:49:11 +0530
Subject: [PATCH] added feedbackback

---
 Feedback.html | 264 ++++++++++++++++++++++++++++++++++++++++++++++++++
 about.html    |   3 +
 contact.html  |   1 +
 features.html |   3 +-
 index.html    |   3 +
 team.html     |   1 +
 6 files changed, 274 insertions(+), 1 deletion(-)
 create mode 100644 Feedback.html
diff --git a/Feedback.html b/Feedback.html
new file mode 100644
index 00000000..411fd70e
--- /dev/null
+++ b/Feedback.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Feedback - AmbuFlow</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">
+
+  <style>
+    body {
+      font-family: "Poppins", sans-serif;
+      background-color: #f4f4f4;
+      margin: 0;
+      padding: 0;
+      color: #333;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    .content {
+      margin: 20px;
+      padding: 20px;
+      background-color: #fff;
+      border-radius: 5px;
+      flex-grow: 1;
+    }
+
+    h1 {
+      text-align: center;
+      color: #2c3e50;
+    }
+
+    .feedback-form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      
+    }
+
+    .star-rating {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+
+    .star-rating input {
+      display: none; /* Hide radio inputs */
+    }
+
+    .star-rating label {
+      font-size: 40px; /* Increased size for better visibility */
+      color: #ddd;
+      cursor: pointer;
+      transition: color 0.2s;
+    }
+
+    /* Color the stars based on the selected rating */
+    .star-rating input:checked ~ label {
+      color: #ffdd00; /* Color for selected stars */
+    }
+
+    /* Color on hover */
+    .star-rating label:hover,
+    .star-rating label:hover ~ label {
+      color: #ffdd00; /* Color on hover */
+    }
+
+    button {
+      padding: 10px 20px;
+      background-color: #ff5733;
+      color: white;
+      border: none;
+      cursor: pointer;
+      font-size: 16px;
+      transition: background-color 0.3s; /* Smooth transition */
+    }
+
+    button:hover {
+      background-color: #e64a19;
+    }
+
+    textarea {
+      width: 100%; /* Full width for better usability */
+      max-width: 500px; /* Limiting max width */
+      padding: 10px;
+      margin-top: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+
+    }
+
+    @keyframes logoAnimation {
+      0% {
+      opacity: 0;
+      transform: translateX(-100px); /* Start from the left */
+      }
+      50% {
+      transform: translateX(10px); /* Move slightly to the right */
+      }
+      100% {
+      opacity: 1;
+      transform: translateX(0); /* End at original position */
+      }
+  }
+
+  /* Letter Drop Animation */
+  @keyframes letterDrop {
+      0% {
+      transform: translateY(-100%);
+      opacity: 0;
+      }
+      50% {
+      transform: translateY(10px); /* Slight bounce */
+      opacity: 1;
+      }
+      100% {
+      transform: translateY(0);
+      }
+  }
+
+  .logo {
+      display: flex;
+      align-items: center;
+      animation: logoAnimation 1s ease forwards;
+  }
+
+  .brand-name {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-right: 10px; /* Space between the text and the logo image */
+  }
+
+  .letter {
+      display: inline-block;
+      font-size: 2rem;
+      animation: letterDrop 0.5s ease forwards;
+      animation-delay: calc(var(--letter-index) * 0.1s);
+  }
+
+  .red {
+      color: red; 
+  }
+  </style>
+</head>
+
+
+
+<header>
+    <div class="container">
+        <div class="logo">
+            <div class="brand-name">
+                <span class="letter red" style="--letter-index: 1;">A</span>
+                <span class="letter red" style="--letter-index: 2;">m</span>
+                <span class="letter red" style="--letter-index: 3;">b</span>
+                <span class="letter red" style="--letter-index: 4;">u</span>
+                <span class="letter" style="--letter-index: 5;">F</span>
+                <span class="letter" style="--letter-index: 6;">l</span>
+                <span class="letter" style="--letter-index: 7;">o</span>
+                <span class="letter" style="--letter-index: 8;">w</span>
+            </div>
+            <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
+          </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>
+                <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a></li>
+                <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li>
+                <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li>
+                <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</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>
+    </div>
+</header>
+
+
+<body>
+  <header>
+    <a href="index.html">
+      <h1>AmbuFlow Feedback</h1>
+    </a>
+  </header>
+
+  <div class="content">
+    <h1>We Value Your Feedback</h1>
+    <div class="feedback-form">
+      <form id="feedback-form" action="#" method="post">
+        <div class="star-rating" aria-label="Rating" role="radiogroup">
+          <input type="radio" id="star1" name="rating" value="1" />
+          <label for="star1" title="1 star">★</label>
+          <input type="radio" id="star2" name="rating" value="2" />
+          <label for="star2" title="2 stars">★</label>
+          <input type="radio" id="star3" name="rating" value="3" />
+          <label for="star3" title="3 stars">★</label>
+          <input type="radio" id="star4" name="rating" value="4" />
+          <label for="star4" title="4 stars">★</label>
+          <input type="radio" id="star5" name="rating" value="5" />
+          <label for="star5" title="5 stars">★</label>
+        </div>
+        <textarea rows="4" placeholder="Your comments..." required></textarea><br />
+        <div style="text-align: center; margin-top: 20px;"><button type="submit">Submit Feedback</button></div>
+      </form>
+    </div>
+    <div id="thank-you-message" style="display: none; text-align: center; margin-top: 20px; font-size: 18px; color: green;">
+      Thank you for your response!
+    </div>
+  </div>
+  
+
+  <footer>
+    <div style="text-align: center; margin-top: 20px;">
+      <p>&copy; 2024 AmbuFlow. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <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-form');
+    const thankYouMessage = document.getElementById('thank-you-message');
+
+    form.addEventListener('submit', function (event) {
+      event.preventDefault(); // Prevent the default form submission
+
+      // Show the thank-you message
+      thankYouMessage.style.display = 'block';
+
+      // 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';
+      }, 2000); // Adjust the delay as needed
+    });
+  </script>
+
+</body>
+</html>
diff --git a/about.html b/about.html
index a96d1dfb..2305e48f 100644
--- a/about.html
+++ b/about.html
@@ -179,6 +179,9 @@
               <li>
                 <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
               </li>
+              <li>
+                <a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
+              </li>
             </ul>
           </nav>
           <div class="buttons">
diff --git a/contact.html b/contact.html
index 20843114..2bf004c7 100644
--- a/contact.html
+++ b/contact.html
@@ -186,6 +186,7 @@
                 <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a></li>
                 <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li>
                 <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li>
+                <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li>
             </ul>
         </nav>
         <div class="buttons">
diff --git a/features.html b/features.html
index bd16cbb7..72040798 100644
--- a/features.html
+++ b/features.html
@@ -168,7 +168,8 @@
                 <li><a href="index.html" id="home-link"><i class="fa-solid fa-house"></i> Home</a></li>
                 <li><a href="features.html" id="features-link" class="active"><i class="fa-solid fa-file"></i> Features</a></li>
                 <li><a href="team.html" id="team-link"><i class="fa-solid fa-user-group"></i> Team</a></li>
-                <li><a href="contact.html" id="contact-link"><i class="fa-solid fa-phone"></i> Contact</a></li>
+                <li><a href="contact.html" id="contact-link"><i class="fa-solid fa-clipboard"></i> Contact</a></li>
+                <li><a href="Feedback.html" id="team-link"><i class="fa-solid fa-user-group"></i> Feedback</a></li>
             </ul>
         </nav>
         <div class="buttons">
diff --git a/index.html b/index.html
index dc46cfa2..a96f64b2 100644
--- a/index.html
+++ b/index.html
@@ -217,6 +217,9 @@
           <li>
             <a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a>
           </li>
+          <li>
+            <a href="Feedback.html" id="contact-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a>
+          </li>
         </ul>
       </nav>
       <div class="buttons">
diff --git a/team.html b/team.html
index e5bc07e7..7024256c 100644
--- a/team.html
+++ b/team.html
@@ -203,6 +203,7 @@
                 <li><a href="features.html" id="features-link" onclick="changeContent('features')"><i class="fa-solid fa-file"></i> Features</a></li>
                 <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li>
                 <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li>
+                <li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li>
             </ul>
         </nav>
         <div class="buttons">
