Added Feedback Form

Css-files/feedback.css

@@ -0,0 +1,194 @@
+body {
+  font-family: "Arial", sans-serif;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+  background-size: cover;
+  background-attachment: fixed;
+  color: white;
+  margin: 0;
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  overflow: hidden;
+}
+.HomeBtn {
+  color: rgb(250, 220, 220);
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 2rem;
+  font-size: 2rem;
+}
+.HomeBtn i {
+  text-decoration: none;
+  color: white;
+}
+.HomeBtn i:hover {
+  color: red;
+  cursor: pointer;
+}
+.feedback-container {
+  background: rgba(249, 241, 241, 0.8);
+  padding: 40px;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 400px;
+  max-height: 500px; /* Reduce the height */
+  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+  animation: fadeIn 2s ease-in-out;
+  border: 2px solid rgb(52, 51, 51);
+}
+
+.feedback-container h2 {
+  text-align: center;
+  margin-bottom: 15px;
+  color: #780303;
+  font-size: 1.5rem;
+  animation: floatingText 2s infinite;
+}
+
+.feedback-container label {
+  display: block;
+  margin: 8px 0 4px;
+  font-size: 0.9rem;
+  animation: floatingText 2s infinite;
+  color: black;
+}
+
+.feedback-container input,
+.feedback-container textarea,
+.feedback-container select {
+  width: 96%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid black;
+  margin-bottom: 8px;
+  background: rgb(242, 240, 236);
+  color: rgb(11, 11, 11);
+  font-size: 0.9rem;
+  animation: floatingText 2s infinite;
+}
+
+.feedback-container textarea {
+  resize: none;
+  height: 80px;
+}
+
+.star-rating {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+  gap: 4px;
+}
+
+.star-rating input[type="radio"] {
+  display: none;
+}
+
+.star-rating label {
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.star-rating input[type="radio"]:checked ~ label {
+  color: #ed0735;
+}
+
+.star-rating label:hover,
+.star-rating label:hover ~ label {
+  color: #f85757;
+}
+
+.feedback-container button {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 5px;
+  background-color: #bf0f0f;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.feedback-container button:hover {
+  background-color: #f5caca;
+  color: black;
+  border: 1px solid black;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes floatingText {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+.feedback-container .back-button {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.feedback-container .back-button a {
+  color: #ff5c5c;
+  text-decoration: none;
+  font-size: 0.9rem;
+  animation: floatingText 2s infinite;
+}
+
+.feedback-container .back-button a:hover {
+  text-decoration: underline;
+}
+
+option {
+  background: rgb(234, 230, 230);
+  color: #780303;
+}
+
+/* SweetAlert2 custom styles */
+.swal-popup {
+  background: #f7f5f5;
+  color: rgb(2, 2, 2);
+  border-radius: 10px;
+  border: 2px solid #ff5c5c;
+}
+
+.swal-title {
+  font-size: 1.5rem;
+  color: #ff5c5c;
+}
+
+.swal-content {
+  font-size: 1rem;
+}
+
+.swal-confirm-button {
+  background-color: #ff5c5c;
+  color: white;
+  border-radius: 5px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  border: none;
+  cursor: pointer;
+}
+
+.swal-confirm-button:hover {
+  background-color: #ff3333;
+}

Html-files/feedback.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Feedback Form</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="/Css-files/feedback.css" />
+  </head>
+  <body>
+    <div class="HomeBtn">
+      <a href="/index.html"><i class="fa-solid fa-house"></i> </a>
+    </div>
+    <div class="feedback-container">
+      <h2>Help Us Improve!</h2>
+      <form id="feedback-form" onsubmit="submitFeedback(event)">
+        <label for="name" class="starArea">Name:</label>
+        <input type="text" id="name" name="name" required />
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required />
+
+        <label for="rating">Rating:</label>
+        <div class="star-rating">
+          <input type="radio" id="star5" name="rating" value="5" />
+          <label for="star5" title="5 stars">&#9733;</label>
+          <input type="radio" id="star4" name="rating" value="4" />
+          <label for="star4" title="4 stars">&#9733;</label>
+          <input type="radio" id="star3" name="rating" value="3" />
+          <label for="star3" title="3 stars">&#9733;</label>
+          <input type="radio" id="star2" name="rating" value="2" />
+          <label for="star2" title="2 stars">&#9733;</label>
+          <input type="radio" id="star1" name="rating" value="1" />
+          <label for="star1" title="1 star">&#9733;</label>
+        </div>
+
+        <label for="issue">Issue Type:</label>
+        <select id="issue" name="issue">
+          <option value="bug">Bug</option>
+          <option value="suggestion">Suggestion</option>
+          <option value="other">Other</option>
+        </select>
+
+        <label for="comments">Comments:</label>
+        <textarea id="comments" name="comments"></textarea>
+
+        <button type="submit">Submit Feedback</button>
+      </form>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="/script/feedback.js"></script>
+  </body>
+</html>

index.html

@@ -1122,6 +1122,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
                     <a href="Html-files/cart.html" >Cart</a>
                     <a href="Html-files/museums.html" >Museums</a>
                     <a href="Html-files/reviews.html">Share Experience</a>
+                    <a href="Html-files/feedback.html">Feedback</a>
                 </ul>
                 <ul>
                     <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>

script/feedback.js

@@ -0,0 +1,61 @@
+function submitFeedback(event) {
+  event.preventDefault(); // Prevent default form submission
+
+  // Get form elements
+  var name = document.getElementById("name").value.trim();
+  var email = document.getElementById("email").value.trim();
+  var comments = document.getElementById("comments").value.trim();
+  var rating = document.querySelector('input[name="rating"]:checked');
+  var issue = document.getElementById("issue").value;
+
+  // Check if the feedback is empty
+  if (comments === "") {
+    // Show a SweetAlert error modal
+    Swal.fire({
+      icon: "error",
+      title: "Oops...",
+      text: "Please enter your feedback before submitting.",
+      customClass: {
+        popup: "swal-popup",
+        title: "swal-title",
+        content: "swal-content",
+        confirmButton: "swal-confirm-button",
+      },
+    });
+    return; // Exit the function if feedback is empty
+  }
+
+  // Check if a rating is selected
+  if (!rating) {
+    Swal.fire({
+      icon: "error",
+      title: "Oops...",
+      text: "Please select a rating before submitting.",
+      customClass: {
+        popup: "swal-popup",
+        title: "swal-title",
+        content: "swal-content",
+        confirmButton: "swal-confirm-button",
+      },
+    });
+    return;
+  }
+
+  // Show a success message
+  Swal.fire({
+    icon: "success",
+    title: "Success!",
+    text: "Your response has been recorded.",
+    customClass: {
+      popup: "swal-popup",
+      title: "swal-title",
+      content: "swal-content",
+      confirmButton: "swal-confirm-button",
+    },
+  }).then((result) => {
+    // Clear the feedback form after the user acknowledges the success modal
+    if (result.isConfirmed || result.isDismissed) {
+      document.getElementById("feedback-form").reset();
+    }
+  });
+}