Galaxy Stars - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galaxy Stars</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #fff;
  }
  .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: #1e90ff;
    margin: 0 0.2rem;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .star:hover,
  .star.active {
    color: #ff6347;
    transform: scale(1.2);
  }
  .galaxy {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .galaxy.visible {
    opacity: 1;
  }
  @keyframes shimmer {
    0%, 100% {
      color: #1e90ff;
    }
    50% {
      color: #ff6347;
    }
  }
  .star.shimmer {
    animation: shimmer 1.5s infinite;
  }
</style>
</head>
<body>
  <div class="rating-container">
    <div class="stars">
      <span class="star shimmer" data-rating="1">🌟</span>
      <span class="star shimmer" data-rating="2">🌟</span>
      <span class="star shimmer" data-rating="3">🌟</span>
      <span class="star shimmer" data-rating="4">🌟</span>
      <span class="star shimmer" data-rating="5">🌟</span>
    </div>
    <div class="galaxy">🌌</div>
  </div>
  <script>
    const stars = document.querySelectorAll('.star');
    const galaxy = document.querySelector('.galaxy');
    const galaxies = ["🌒", "🌓", "🌔", "🌕", "🌌"];
    stars.forEach(star => {
      star.addEventListener('mouseover', () => {
        const rating = star.getAttribute('data-rating');
        updateStars(rating);
        updateGalaxy(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 updateGalaxy(rating) {
      galaxy.textContent = galaxies[rating - 1];
      galaxy.classList.add('visible');
    }
    function lockStars(rating) {
      stars.forEach(star => {
        star.removeEventListener('mouseover', updateStars);
        star.removeEventListener('click', lockStars);
      });
    }
  </script>
</body>
</html>