Retro Arcade Stars - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro Arcade Stars</title>
<style>
  body {
    font-family: 'Courier New', monospace;
    background: #282c34;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #61dafb;
  }
  .rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stars {
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  .star {
    font-size: 3rem;
    color: #f0e68c;
    margin: 0 0.2rem;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .star:hover,
  .star.active {
    color: #ff4500;
    transform: scale(1.2);
  }
  .score {
    font-size: 2rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .score.visible {
    opacity: 1;
  }
  @keyframes blink {
    0%, 100% {
      color: #f0e68c;
    }
    50% {
      color: #ff4500;
    }
  }
  .star.blink {
    animation: blink 1.5s infinite;
  }
</style>
</head>
<body>
  <div class="rating-container">
    <div class="stars">
      <span class="star blink" data-rating="1">🕹️</span>
      <span class="star blink" data-rating="2">🕹️</span>
      <span class="star blink" data-rating="3">🕹️</span>
      <span class="star blink" data-rating="4">🕹️</span>
      <span class="star blink" data-rating="5">🕹️</span>
    </div>
    <div class="score">0</div>
  </div>
  <script>
    const stars = document.querySelectorAll('.star');
    const score = document.querySelector('.score');
    stars.forEach(star => {
      star.addEventListener('mouseover', () => {
        const rating = star.getAttribute('data-rating');
        updateStars(rating);
        updateScore(rating);
      });
      star.addEventListener('click', () => {
        const rating = star.getAttribute('data-rating');
        lockStars(rating);
      });
    });
    function updateStars(rating) {
      stars.forEach(star => {
        star.classList.remove('active');
        if (star.getAttribute('data-rating') <= rating) {
          star.classList.add('active');
        }
      });
    }
    function updateScore(rating) {
      score.textContent = rating;
      score.classList.add('visible');
    }
    function lockStars(rating) {
      stars.forEach(star => {
        star.removeEventListener('mouseover', updateStars);
        star.removeEventListener('click', lockStars);
      });
    }
  </script>
</body>
</html>