diff --git a/19_javascript_music_player/index.html b/19_javascript_music_player/index.html index 62f43c9..dc8c919 100644 --- a/19_javascript_music_player/index.html +++ b/19_javascript_music_player/index.html @@ -16,7 +16,7 @@
- +
@@ -26,13 +26,11 @@
- - -
+ bgimg
diff --git a/19_javascript_music_player/player.css b/19_javascript_music_player/player.css index e7b48fa..66930f7 100644 --- a/19_javascript_music_player/player.css +++ b/19_javascript_music_player/player.css @@ -362,22 +362,22 @@ nav .circle { padding: 1rem 2rem; border-radius: 8px; overflow: hidden; - background-image: url('./media/bg/background-image.jpg'); /* Replace with your background image path */ + + backdrop-filter: blur(20px); background-size: cover; background-position: center; - background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent background color for contrast */ + } -.imgCont::before { - content: ''; + + +#bgImg { position: absolute; - top: -10%; - left: -10%; - right: -10%; - bottom: -10%; - background-image: inherit; - background-size: cover; - background-position: center; - filter: blur(10px); /* Adjust blur intensity as needed */ + filter: blur(1px); z-index: -1; + user-select: none; + left: 0; + top: 0; + width: 100%; + height: 100%; } diff --git a/19_javascript_music_player/player.js b/19_javascript_music_player/player.js index e65494f..79bc77a 100644 --- a/19_javascript_music_player/player.js +++ b/19_javascript_music_player/player.js @@ -185,8 +185,12 @@ function prevSong() { // Function to set blurred background image function setBlurBackground(imageUrl) { - const imgBlur = document.querySelector(".imgCont"); - imgBlur.style.backgroundImage = `url(${imageUrl})`; + // const imgBlur = document.querySelector(".imgCont"); + // imgBlur.style.background = `url(${imageUrl})`; + + const bgImg = document.getElementById('bgImg'); + bgImg.src = imageUrl; + } // For rendering playlist @@ -218,6 +222,17 @@ renderPlaylist(playlist, 'playlist-container'); function togglePlaylist() { playlistContainer.classList.toggle('visible'); + + let listIcon = document.getElementById('listOption'); + + + if(playlistContainer.classList.contains('visible')) { + listIcon.classList.remove('fa-bars'); + listIcon.classList.add('fa-x'); + } else { + listIcon.classList.remove('fa-x'); + listIcon.classList.add('fa-bars'); + } } playlistIcon.addEventListener('click', togglePlaylist);