Retro Arcade Stars - MeggiTools
Run
Toggle Theme
Share Link
<!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>