Update index.html

Author: Renu-code123

index.html

@@ -1261,15 +1261,20 @@
     }
 
     .success-message {
-      text-align: center;
-      padding: 2rem;
-      background: rgba(76, 175, 80, 0.1);
-      border: 2px solid rgba(76, 175, 80, 0.5);
-      border-radius: 20px;
-      color: #2e7d32;
-      animation: fadeInScale 0.5s ease;
-      margin-top: 1.5rem;
-      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
+      text-align: center !important;
+      padding: 2rem !important;
+      background: #d4edda !important;
+      border: 2px solid #4caf50 !important;
+      border-radius: 20px !important;
+      color: #155724 !important;
+      margin-top: 1.5rem !important;
+      box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3) !important;
+      width: 100% !important;
+      max-width: 600px !important;
+      z-index: 9999 !important;
+      position: relative !important;
+      display: none !important;
+      font-weight: 600 !important;
     }
 
     .success-message i {
@@ -1955,7 +1960,7 @@ <h2 class="about-title mb-2">About Us</h2>
     </div>
   </section>
   <!-- Our Work section ends here -->
-  <!-- Feedback & Reviews section starts here -->
+ <!-- Feedback & Reviews section starts here -->
   <section class="feedback-section py-5" id="feedback">
     <div class="container d-flex flex-column align-items-center">
       <div class="feedback-content">
@@ -1965,7 +1970,7 @@ <h2 class="feedback-title text-center mb-3">Feedback & Reviews</h2>
         </p>
 
         <div class="feedback-form-container">
-          <form id="feedbackForm" class="feedback-form">
+          <form id="feedbackForm" class="feedback-form" onsubmit="return showSuccessMessage(event)">
             <div class="form-row">
               <div class="form-group">
                 <input type="text" id="userName" name="userName" placeholder="Your Name *" required class="form-input">
@@ -1978,20 +1983,20 @@ <h2 class="feedback-title text-center mb-3">Feedback & Reviews</h2>
               <textarea id="userFeedback" name="userFeedback" placeholder="Share your thoughts, suggestions, or experience with us..." rows="4" required class="form-textarea"></textarea>
             </div>
             <div class="form-buttons">
-              <button type="submit" class="btn btn-submit">
+              <button type="submit" class="btn btn-submit" onclick="showSuccessMessage(event)">
                 <i class="fas fa-paper-plane"></i> Submit
               </button>
-              <button type="button" class="btn btn-cancel" id="cancelBtn">
+              <button type="button" class="btn btn-cancel" onclick="clearForm()">
                 <i class="fas fa-times"></i> Cancel
               </button>
             </div>
           </form>
         </div>
 
-        <!-- Success Message -->
-        <div id="successMessage" class="success-message" style="display: none;">
-          <i class="fas fa-check-circle"></i>
-          <p>Submitted successfully! Thank you for your feedback.</p>
+        <!-- Success Message BELOW Form Container -->
+        <div id="successMessage" style="display: none; text-align: center; padding: 20px; margin-top: 20px; background: #d4edda; border: 2px solid #4caf50; border-radius: 10px; color: #155724; font-weight: bold; max-width: 600px;">
+          <i class="fas fa-check-circle" style="color: #4caf50; font-size: 24px; margin-bottom: 10px;"></i>
+          <p style="margin: 0; font-size: 16px;">Thank you for your feedback! Submitted successfully.</p>
         </div>
       </div>
     </div>
@@ -2178,56 +2183,49 @@ <h5 class="footer-title">Get In Touch</h5>
       interval: 4000, // auto-slide time
       wrap: true, // enables infinite loop
     });
-    // Feedback Form Functionality
-    document.addEventListener("DOMContentLoaded", function() {
-      const feedbackForm = document.getElementById('feedbackForm');
-      const successMessage = document.getElementById('successMessage');
-      const cancelBtn = document.getElementById('cancelBtn');
-      const formContainer = document.querySelector('.feedback-form-container');
-
-      // Form submission handler
-      feedbackForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-        
-        // Get form data
-        const formData = {
-          name: document.getElementById('userName').value,
-          email: document.getElementById('userEmail').value,
-          feedback: document.getElementById('userFeedback').value,
-          timestamp: new Date().toISOString(),
-          id: Date.now() // Simple ID generation
-        };
-        
+    // SIMPLE FEEDBACK FUNCTIONS - FORM STAYS VISIBLE
+    function showSuccessMessage(event) {
+      event.preventDefault();
+      
+      // Get form values
+      var name = document.getElementById('userName').value;
+      var email = document.getElementById('userEmail').value;
+      var feedback = document.getElementById('userFeedback').value;
+      
+      // Check if all fields are filled
+      if (name && email && feedback) {
         // Save to localStorage
-        let existingFeedbacks = JSON.parse(localStorage.getItem('growcraft_feedbacks')) || [];
-        existingFeedbacks.push(formData);
-        localStorage.setItem('growcraft_feedbacks', JSON.stringify(existingFeedbacks));
+        var data = {
+          name: name,
+          email: email,
+          feedback: feedback,
+          timestamp: new Date().toISOString()
+        };
 
-        // Hide form container and show success message
-        formContainer.style.display = 'none';
-        successMessage.style.display = 'block';
+        var feedbacks = JSON.parse(localStorage.getItem('growcraft_feedbacks') || '[]');
+        feedbacks.push(data);
+        localStorage.setItem('growcraft_feedbacks', JSON.stringify(feedbacks));
 
-        // Scroll to success message
-        successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // KEEP FORM VISIBLE - Just show success message below
+        document.getElementById('successMessage').style.display = 'block';
 
-        // Auto-reset form after 4 seconds
-        setTimeout(() => {
-          resetFeedbackForm();
+        // Reset form fields and hide success message after 4 seconds
+        setTimeout(function() {
+          document.getElementById('successMessage').style.display = 'none';
+          document.getElementById('feedbackForm').reset();
         }, 4000);
-      });
-      
-      // Cancel button handler
-      cancelBtn.addEventListener('click', function() {
-        resetFeedbackForm();
-      });
-      
-      // Reset form function
-      function resetFeedbackForm() {
-        feedbackForm.reset();
-        formContainer.style.display = 'block';
-        successMessage.style.display = 'none';
+        
+      } else {
+        alert('Please fill all required fields!');
       }
-    });
+      
+      return false;
+    }
+    
+    function clearForm() {
+      document.getElementById('feedbackForm').reset();
+      document.getElementById('successMessage').style.display = 'none';
+    }
   </script>
   <script>
     document.addEventListener("DOMContentLoaded", function () {