Elegant Hearts - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elegant Hearts</title>
<style>
  body {
    font-family: 'Georgia', serif;
    background: #ffecd2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #e57373;
  }
  .rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hearts {
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  .heart {
    font-size: 3rem;
    color: #ff6347;
    margin: 0 0.2rem;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .heart:hover,
  .heart.active {
    color: #d32f2f;
    transform: scale(1.2);
  }
  .message {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .message.visible {
    opacity: 1;
  }
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  .heart.pulse {
    animation: pulse 1s infinite;
  }
</style>
</head>
<body>
  <div class="rating-container">
    <div class="hearts">
      <span class="heart pulse" data-rating="1">❤️</span>
      <span class="heart pulse" data-rating="2">❤️</span>
      <span class="heart pulse" data-rating="3">❤️</span>
      <span class="heart pulse" data-rating="4">❤️</span>
      <span class="heart pulse" data-rating="5">❤️</span>
    </div>
    <div class="message">Love it!</div>
  </div>
  <script>
    const hearts = document.querySelectorAll('.heart');
    const message = document.querySelector('.message');
    const messages = ["Not great", "It's okay", "Good", "Really good", "Love it!"];
    hearts.forEach(heart => {
      heart.addEventListener('mouseover', () => {
        const rating = heart.getAttribute('data-rating');
        updateHearts(rating);
        updateMessage(rating);
      });
      heart.addEventListener('click', () => {
        const rating = heart.getAttribute('data-rating');
        lockHearts(rating);
      });
    });
    function updateHearts(rating) {
      hearts.forEach(heart => {
        heart.classList.remove('active');
        if (heart.getAttribute('data-rating') <= rating) {
          heart.classList.add('active');
        }
      });
    }
    function updateMessage(rating) {
      message.textContent = messages[rating - 1];
      message.classList.add('visible');
    }
    function lockHearts(rating) {
      hearts.forEach(heart => {
        heart.removeEventListener('mouseover', updateHearts);
        heart.removeEventListener('click', lockHearts);
      });
    }
  </script>
</body>
</html>