+
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);