| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Music Stream</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| margin: 0; |
| background-color: #121212; |
| color: #B2B2B2; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| height: 100vh; |
| overflow: hidden; |
| } |
| header { |
| width: 100%; |
| background-color: #1DB954; |
| padding: 10px 10px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| box-sizing: border-box; |
| } |
| header h1 { |
| margin: 0; |
| font-size: 24px; |
| text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); |
| } |
| .stop-button { |
| background-color: #4A4A4A; |
| color: #B3B3B3; |
| border: none; |
| padding: 10px 20px; |
| border-radius: 5px; |
| cursor: pointer; |
| font-size: 16px; |
| } |
| .stop-button:hover { |
| background-color: #C5303A; |
| } |
| .genre-container { |
| margin: 20px; |
| padding: 20px; |
| background-color: #282828; |
| border-radius: 10px; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); |
| width: 90%; |
| max-width: 600px; |
| } |
| .genre-title { |
| font-size: 20px; |
| margin-bottom: 10px; |
| } |
| .track-list { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| .track-list li { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 10px; |
| background-color: #333; |
| margin-bottom: 10px; |
| border-radius: 5px; |
| transition: all 0.3s ease; |
| } |
| .track-list li:last-child { |
| margin-bottom: 0; |
| } |
| .track-list li:hover { |
| background-color: #444; |
| transform: scale(1.05); |
| } |
| .track-list button { |
| background-color: #1DB954; |
| color: #FFF; |
| border: none; |
| padding: 5px 10px; |
| border-radius: 3px; |
| cursor: pointer; |
| font-size: 14px; |
| transition: background-color 0.3s ease; |
| } |
| .track-list button:hover { |
| background-color: #1AA34A; |
| } |
| .playing { |
| background-color: #555; |
| cursor: not-allowed; |
| } |
| footer { |
| margin-top: auto; |
| padding: 10px; |
| text-align: center; |
| font-size: 14px; |
| background-color: #1E1E1E; |
| width: 100%; |
| color: #B3B3B3; |
| } |
| .firework { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| animation: explode 2s ease-out forwards; |
| } |
| @keyframes explode { |
| 0% { |
| transform: translateY(0) scale(1); |
| opacity: 1; |
| } |
| 50% { |
| transform: translateY(-300px) scale(1.5); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-400px) scale(0); |
| opacity: 0; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>Stream</h1> |
| <div> |
| <button class="stop-button" onclick="playRandom()">Random</button> |
| <button class="stop-button" onclick="stopMusic()">Stop</button> |
| </div> |
| </header> |
|
|
| <div class="genre-container"> |
| <div class="genre-title"></div> |
| <ul class="track-list"> |
| <li class="lo-fi"> |
| Lo-Fi |
| <button class="play-button" onclick="playMusic('jfKfPfyJRdk', this)">Play</button> |
| </li> |
| <li class="rock"> |
| Rock |
| <button class="play-button" onclick="playMusic('Nt27aBceerI', this)">Play</button> |
| </li> |
| <li class="dubstep"> |
| Dubstep |
| <button class="play-button" onclick="playMusic('sR-sbG98ldM', this)">Play</button> |
| </li> |
| </ul> |
| </div> |
|
|
| <div id="player" style="display:none;"></div> |
|
|
| <footer> |
| <div>© 2025 Music Stream | Made with ❤️</div> |
| <div id="current-time"></div> |
| </footer> |
|
|
| <script> |
| var tag = document.createElement('script'); |
| tag.src = "https://www.youtube.com/iframe_api"; |
| var firstScriptTag = document.getElementsByTagName('script')[0]; |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); |
| var player; |
| var fireworkInterval; |
| |
| function onYouTubeIframeAPIReady() { |
| player = new YT.Player('player', { |
| height: '0', |
| width: '0', |
| events: { |
| 'onStateChange': onPlayerStateChange |
| } |
| }); |
| } |
| |
| function createFirework() { |
| const firework = document.createElement('div'); |
| firework.className = 'firework'; |
| firework.style.left = `${Math.random() * window.innerWidth}px`; |
| firework.style.bottom = '0'; |
| firework.style.backgroundColor = Math.random() < 0.2 ? '#FF0000' : '#FFD700'; |
| document.body.appendChild(firework); |
| setTimeout(() => { |
| document.body.removeChild(firework); |
| }, 2000); |
| } |
| |
| function onPlayerStateChange(event) { |
| if (event.data === YT.PlayerState.PLAYING) { |
| fireworkInterval = setInterval(createFirework, 500); |
| } else { |
| clearInterval(fireworkInterval); |
| } |
| } |
| |
| function playMusic(videoId, button) { |
| if (player) { |
| stopMusic(); |
| player.loadVideoById(videoId); |
| player.playVideo(); |
| button.classList.add('playing'); |
| button.textContent = "Playing..."; |
| } |
| } |
| |
| function stopMusic() { |
| if (player) { |
| player.stopVideo(); |
| } |
| clearInterval(fireworkInterval); |
| document.querySelectorAll('.play-button').forEach(button => { |
| button.classList.remove('playing'); |
| button.textContent = "Play"; |
| }); |
| } |
| |
| function playRandom() { |
| const tracks = document.querySelectorAll('.track-list li'); |
| const randomIndex = Math.floor(Math.random() * tracks.length); |
| const randomTrack = tracks[randomIndex]; |
| const button = randomTrack.querySelector('.play-button'); |
| const videoId = button.getAttribute('onclick').match(/'(.*?)'/)[1]; |
| playMusic(videoId, button); |
| } |
| |
| function updateTime() { |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString(); |
| document.getElementById('current-time').textContent = `${timeString}`; |
| } |
| |
| setInterval(updateTime, 1000); |
| updateTime(); |
| </script> |
| </body> |
| </html> |
|
|
