f.html

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

  body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: white;
    min-height: 100vh;
  }

  .feedback-section {
    max-width: 700px;
    margin: 80px auto;
    background: linear-gradient(145deg, 
      rgba(255,255,255,0.1), 
      rgba(255,255,255,0.05));
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out;
  }

  .feedback-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
      transparent 20%,
      rgba(255,203,5,0.1) 45%,
      transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
  }

  .feedback-section h2 {
    text-align: center;
    color: #ffcb05;
    margin-bottom: 40px;
    font-size: 2.5rem;
    text-shadow: 0 0 20px rgba(255,203,5,0.5);
    position: relative;
    animation: float 3s ease-in-out infinite;
  }

  .form-group {
    position: relative;
    margin: 25px 0;
  }

  .feedback-section input,
  .feedback-section textarea {
    width: 100%;
    padding: 18px 25px;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.95);
    color: #2c3e50;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  .feedback-section input:focus,
  .feedback-section textarea:focus {
    outline: none;
    box-shadow: 0 0 20px rgba(255,203,5,0.4);
    transform: translateY(-2px);
  }

  .feedback-section textarea {
    resize: vertical;
    min-height: 150px;
  }

  .feedback-section button {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #ffcb05, #ffd700);
    color: #2c3e50;
    font-weight: 700;
    font-size: 1.2rem;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(255,203,5,0.3);
  }

  .feedback-section button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255,203,5,0.5);
  }

  .feedback-section button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
      transparent 20%,
      rgba(255,255,255,0.2) 50%,
      transparent 80%);
    animation: rotate 4s linear infinite;
  }

  .success-message {
    display: none;
    color: #4CAF50;
    text-align: center;
    margin-top: 25px;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 15px;
    border-radius: 10px;
    background: rgba(76,175,80,0.1);
    animation: glowSuccess 1.5s ease-in-out infinite alternate;
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes glowSuccess {
    from { box-shadow: 0 0 10px rgba(76,175,80,0.2); }
    to { box-shadow: 0 0 20px rgba(76,175,80,0.4); }
  }

  @media (max-width: 768px) {
    .feedback-section {
      margin: 40px 20px;
      padding: 30px;
    }
    
    .feedback-section h2 {
      font-size: 2rem;
    }
  }
</style>

<div class="feedback-section">
  <h2>🌟 Temple Experience Feedback 🌟</h2>
  <form id="feedbackForm" action="https://formspree.io/f/mldjalla" method="POST">
    <div class="form-group">
      <input type="text" name="name" placeholder="Your Name" required>
    </div>
    <div class="form-group">
      <input type="email" name="email" placeholder="Your Email" required>
    </div>
    <div class="form-group">
      <textarea name="message" placeholder="Share your divine experience..." required></textarea>
    </div>
    <button type="submit">
      <span class="button-text">Submit Feedback</span>
    </button>
  </form>
  <div class="success-message">
    🕉️ Thank you! Your feedback has been received with gratitude 🙏
  </div>
</div>

<script>
  document.getElementById('feedbackForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitButton = this.querySelector('button');
    const buttonText = submitButton.querySelector('.button-text');
    submitButton.disabled = true;
    buttonText.innerHTML = 'Sending...<div class="spinner"></div>';

    fetch(this.action, {
      method: 'POST',
      body: new FormData(this),
      headers: { 'Accept': 'application/json' }
    })
    .then(response => {
      if (response.ok) {
        document.querySelector('.success-message').style.display = 'block';
        this.reset();
        setTimeout(() => {
          document.querySelector('.success-message').style.display = 'none';
        }, 5000);
      }
    })
    .catch(error => {
      alert('Divine intervention needed! Please try again.');
    })
    .finally(() => {
      submitButton.disabled = false;
      buttonText.innerHTML = 'Submit Feedback';
    });
  });
</script>