Cyber Stars - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyber Stars</title>
<style>
  body {
    font-family: 'Courier New', monospace;
    background: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #00ff00;
  }
  .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: #00ff00;
    margin: 0 0.2rem;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .star:hover,
  .star.active {
    color: #ff4500;
    transform: scale(1.2);
  }
  .rating {
    font-size: 2rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .rating.visible {
    opacity: 1;
  }
  @keyframes glitch {
    0%, 100% {
      transform: skew(0deg);
    }
    50% {
      transform: skew(10deg);
    }
  }
  .star.glitch {
    animation: glitch 0.5s infinite;
  }
</style>
</head>
<body>
  <div class="rating-container">
    <div class="stars">
      <span class="star glitch" data-rating="1">★</span>
      <span class="star glitch" data-rating="2">★</span>
      <span class="star glitch" data-rating="3">★</span>
      <span class="star glitch" data-rating="4">★</span>
      <span class="star glitch" data-rating="5">★</span>
    </div>
    <div class="rating">0</div>
  </div>
  <script>
    const stars = document.querySelectorAll('.star');
    const rating = document.querySelector('.rating');
    stars.forEach(star => {
      star.addEventListener('mouseover', () => {
        const ratingValue = star.getAttribute('data-rating');
        updateStars(ratingValue);
        updateRating(ratingValue);
      });
      star.addEventListener('click', () => {
        const ratingValue = star.getAttribute('data-rating');
        lockStars(ratingValue);
      });
    });
    function updateStars(rating) {
      stars.forEach(star => {
        star.classList.remove('active');
        if (star.getAttribute('data-rating') <= rating) {
          star.classList.add('active');
        }
      });
    }
    function updateRating(rating) {
      rating.textContent = rating;
      rating.classList.add('visible');
    }
    function lockStars(rating) {
      stars.forEach(star => {
        star.removeEventListener('mouseover', updateStars);
        star.removeEventListener('click', lockStars);
      });
    }
  </script>
</body>
</html>