Added Rate Us feature

index.html

@@ -5377,6 +5377,29 @@ <h1 class="heading">Keep In Touch</h1>
                         <textarea id="message" name="message" placeholder="Leave your message" required></textarea>
                         <button type="submit">SEND</button>
                     </div>
+                    <div class="rate-us-container">
+                        <h2>Rate Us</h2>
+                        <form id="rate-us-form">
+                            <label for="rating">Your Rating:</label>
+                            <select id="rating" name="rating">
+                                <option value="5">5 - Excellent</option>
+                                <option value="4">4 - Good</option>
+                                <option value="3">3 - Average</option>
+                                <option value="2">2 - Poor</option>
+                                <option value="1">1 - Very Poor</option>
+                            </select>
+
+                            <label for="suggestions">Your Suggestions:</label>
+                            <textarea id="suggestions" name="suggestions" rows="4" placeholder="Your suggestions..."></textarea>
+
+                            <button type="submit">Submit</button>
+                        </form>
+                        <div id="thank-you-message" class="hidden">
+                            Thank you for your feedback!
+                        </div>
+                    </div>
+
+
                 </form>
                 <div class="social">
                     <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>

script.js

@@ -300,6 +300,33 @@ if (SpeechRecognition) {
     info.textContent = "Your Browser does not support Speech Recognition";
 }
 
+
+// Wait for the DOM to fully load
+document.addEventListener('DOMContentLoaded', function() {
+    // Select the form element
+    const form = document.getElementById('rate-us-form');
+
+    // Add event listener for form submission
+    form.addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent the default form submission behavior
+
+        // Get the values from the form
+        const rating = document.getElementById('rating').value;
+        const suggestions = document.getElementById('suggestions').value;
+
+        // Log the form values to the console (for demonstration purposes)
+        console.log(`Rating: ${rating}`);
+        console.log(`Suggestions: ${suggestions}`);
+
+        // Display the thank-you message
+        document.getElementById('thank-you-message').classList.remove('hidden');
+
+        // Clear the form fields
+        form.reset();
+    });
+});
+
+
 // Validate input for name fields
 function validateName(inputId) {
     let input = document.getElementById(inputId);

style.css

@@ -1827,6 +1827,40 @@ footer {
     box-shadow: -5px -5px 10px #682572;
 }
 
+
+/* Modal Styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 500px;
+}
+
+.close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.hidden {
+    display: none;
+}
+
 /* Media Queries */
 
 @media (max-width: 1060px) {