Created feedback page

Anjaliavv51 · Jan 13, 2025 · a9db06f · a9db06f
1 parent 44b251a
commit a9db06f
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 0 deletions.
diff --git a/Css-files/feedback.css b/Css-files/feedback.css
@@ -0,0 +1,44 @@
+body {
+    background:  #f6c7c3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+  .feedback-form {
+    background: #fff;
+    font-family:Georgia, 'Times New Roman', Times, serif;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: 400px;
+  }
+
+  .rating {
+    display: flex;
+    gap: 5px;
+    cursor: pointer;
+  }
+
+  .rating i {
+    font-size: 1.5rem;
+    color: #ccc;
+  }
+
+  .rating i.active {
+    color: #f39c12;
+  }
+
+  .submit-btn {
+    background-color: rgb(138, 37, 37);
+    color: white;
+    border: none;
+  }
+
+  .submit-btn:hover {
+    background-color:rgb(125, 23, 23);
+    color: white;
+  }
+
+
diff --git a/Html-files/feedback.html b/Html-files/feedback.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Retro</title>
+
+    <style>
+        @media (min-width: 992px) {
+            .navbar-expand-lg .navbar-nav {
+                margin-top: -9px; /* Add this line */
+            }
+        }
+    </style>
+    <link rel="shortcut icon" type="image/x-icon" href="./Favicon image/favicon-32x32.png">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="../Css-files/feedback.css">
+</head>
+<body>
+<header>
+    <div class="container mt-3 mt-700"></div>
+        <a href="../index.html" class="btn btn-secondary" style="position: absolute; top: 50px; left: 10px; background-color: rgb(138, 37, 37)">
+            <i class="bi bi-arrow-left"></i> Back to home
+        </a>
+    </div>
+</header>
+
+    <div class="container mt-5">
+        <div class="row">
+            <div class="col-md-6" style="font-size:xx-large; margin-top: 150px; font-family: Georgia, 'Times New Roman', Times, serif;">
+                Share your thoughts with us. 
+                <br>
+                <span style="font-size: large; color: rgb(71, 78, 84);">would love to hear from you.</span>
+            </div>
+            <div class="col-md-6">
+                <div class="feedback-form">
+                    <h4 class="text-center mb-4">Feedback</h4>
+
+                    <!-- Dropdown for Feedback Type -->
+                    <div class="mb-3">
+                        <label for="feedbackType" class="form-label">Type of Feedback</label>
+                        <select class="form-select" id="feedbackType">
+                            <option value="">Select...</option>
+                            <option value="services">Services</option>
+                            <option value="products">Products</option>
+                            <option value="user-experience">Others</option>
+                        </select>
+                    </div>
+
+                    <!-- Rating System -->
+                    <div class="mb-3">
+                        <label class="form-label">Rating</label>
+                        <div class="rating" id="rating">
+                            <i class="bi bi-star-fill" data-value="1"></i>
+                            <i class="bi bi-star-fill" data-value="2"></i>
+                            <i class="bi bi-star-fill" data-value="3"></i>
+                            <i class="bi bi-star-fill" data-value="4"></i>
+                            <i class="bi bi-star-fill" data-value="5"></i>
+                        </div>
+                    </div>
+
+                    <!-- Comments Section -->
+                    <div class="mb-3">
+                        <label for="comments" class="form-label">Comments</label>
+                        <textarea class="form-control" id="comments" rows="3" placeholder="Share your thoughts..."></textarea>
+                    </div>
+
+                    <!-- File Upload -->
+                    <div class="mb-3">
+                        <label for="fileUpload" class="form-label">Upload Screenshot or File (Optional)</label>
+                        <input class="form-control" type="file" id="fileUpload">
+                    </div>
+
+                    <!-- Submit Button -->
+                    <button class="btn submit-btn w-100" id="submitFeedback">Submit Feedback</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.js"></script>
+    <script src="../script/feedback.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -1137,6 +1137,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>

diff --git a/script/feedback.js b/script/feedback.js
@@ -0,0 +1,42 @@
+const stars = document.querySelectorAll('#rating i');
+    const submitButton = document.getElementById('submitFeedback');
+
+    let selectedRating = 0;
+
+    // Handle star rating click
+    stars.forEach((star, index) => {
+      star.addEventListener('click', () => {
+        selectedRating = index + 1;
+        updateStars(selectedRating);
+      });
+    });
+
+    function updateStars(rating) {
+      stars.forEach((star, index) => {
+        if (index < rating) {
+          star.classList.add('active');
+        } else {
+          star.classList.remove('active');
+        }
+      });
+    }
+
+    // Handle submit button click
+    submitButton.addEventListener('click', () => {
+      const feedbackType = document.getElementById('feedbackType').value;
+      const comments = document.getElementById('comments').value;
+      const fileUpload = document.getElementById('fileUpload').files[0];
+
+      if (!feedbackType || !selectedRating || !comments) {
+        alert('Please fill in all required fields.');
+        return;
+      }
+
+      alert('Feedback submitted successfully!');
+      console.log({
+        feedbackType,
+        selectedRating,
+        comments,
+        file: fileUpload ? fileUpload.name : 'No file uploaded'
+      });
+    });