more fixes and code simplifications

This commit is contained in:
zyqunix 2025-05-11 19:29:11 +02:00
parent 75a96b576c
commit 18f63aff63
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
3 changed files with 74 additions and 16 deletions

View file

@ -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;
}

View file

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