From 18f63aff6314d46e6fea65f8ce5710a4165411e3 Mon Sep 17 00:00:00 2001 From: zyqunix <117040076+zyqunix@users.noreply.github.com> Date: Sun, 11 May 2025 19:29:11 +0200 Subject: [PATCH] more fixes and code simplifications --- assets/css/style.css | 52 +++++++++++++++++++++++++++++++++++++++++--- assets/js/index.js | 24 +++++++++++++------- index.html | 14 +++++++----- 3 files changed, 74 insertions(+), 16 deletions(-) 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 - +
+ + +
+