diff --git a/assets/css/style.css b/assets/css/style.css
index 64f4d11..a0182d0 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -569,6 +569,10 @@ div[class="cards sitemap shadow"] > h4 {
border-radius: 4px;
}
+.banan:hover {
+ scale: 1.04;
+}
+
.music-pop {
text-align: left;
position: fixed;
@@ -584,6 +588,7 @@ div[class="cards sitemap shadow"] > h4 {
border: 2px solid #333;
opacity: 0;
transition: 0.3s;
+ z-index: 9999;
}
.music-pop:hover {
@@ -608,6 +613,11 @@ div[class="cards sitemap shadow"] > h4 {
transition: 0.1s;
}
+
+#refresh:hover {
+ background-color: #67de50;
+}
+
.top button:hover {
background-color: #bc3333;
}
@@ -623,6 +633,10 @@ div[class="cards sitemap shadow"] > h4 {
align-items: center;
}
+.song > div:nth-of-type(2) {
+ width: 52px;
+}
+
#artist {
transition: color 0.1s;
}
@@ -638,11 +652,29 @@ div[class="cards sitemap shadow"] > h4 {
}
#song-url {
- position: relative;
+ display: flex;
background-color: #0778B7;
- padding: 2px 4px;
- right: 0 !important;
+ padding: 4px 4px;
border-radius: 6px;
+ margin-right: 5px;
+ max-width: 24px;
+ max-height: 24px;
+ align-items: center;
+}
+
+#refresh {
+ display: flex;
+ background-color: #57ce40;
+ padding: 4px 4px;
+ border-radius: 6px;
+ max-width: 24px;
+ max-height: 24px;
+ text-align: center;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ cursor: pointer;
+ border: none;
}
#song-url:hover {
@@ -652,3 +684,17 @@ div[class="cards sitemap shadow"] > h4 {
#song-url:hover > svg {
color: #fff;
}
+
+#overlay {
+ z-index: 10;
+ background-color: #101010bb;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ left: 0;
+ top: 0;
+ backdrop-filter: blur(10px);
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.3s;
+}
diff --git a/assets/js/index.js b/assets/js/index.js
index a9a39df..a4e4db2 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -211,7 +211,7 @@ function fetchSong() {
fetch(url)
.then(response => response.json())
.then(data => {
- console.log(data);
+ //console.log(data);
const track = data?.recenttracks?.track?.[0];
if (!track) return;
const artist = track.artist["#text"];
@@ -251,13 +251,21 @@ setInterval(() => {
fetchSong();
}, 60000)
-document.getElementById('banan').addEventListener('click', function() {
- document.getElementById('music-pop').style.visibility = 'visible';
- document.getElementById('music-pop').style.opacity = '1';
-})
-
-document.getElementById('close').addEventListener('click', function() {
+function close() {
document.getElementById('music-pop').style.opacity = '0';
+ document.getElementById('overlay').style.opacity = '0';
document.getElementById('music-pop').style.visibility = 'hidden';
-})
+ document.getElementById('overlay').style.visibility = 'hidden';
+}
+function open() {
+ document.getElementById('music-pop').style.visibility = 'visible';
+ document.getElementById('overlay').style.visibility = 'visible';
+ document.getElementById('music-pop').style.opacity = '1';
+ document.getElementById('overlay').style.opacity = '1';
+}
+
+document.getElementById('banan').addEventListener('click', open);
+document.getElementById('close').addEventListener('click', close);
+document.getElementById('overlay').addEventListener('click', close);
+document.getElementById('refresh').addEventListener('click', fetchSong);
diff --git a/index.html b/index.html
index 0566f4a..dbf8ce1 100644
--- a/index.html
+++ b/index.html
@@ -121,16 +121,20 @@
Untitled
-
+
+