zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

more fixes and code simplifications

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

52
assets/css/style.css
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;
}

24
assets/js/index.js
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);

14
index.html
View file

@ -121,16 +121,20 @@
<img src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg" id="song-cover">
<span id="song-name">Untitled</span>
</div>
<a title="Open in new tab" id="song-url" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-external-link "><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a>
<div>
<a id="song-url" class="tooltip" data-tooltip="Open in new tab" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-external-link "><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a>
<button id="refresh" class="msb tooltip" data-tooltip="Refresh"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.06189 13C4.02104 12.6724 4 12.3387 4 12C4 7.58172 7.58172 4 12 4C14.5006 4 16.7332 5.14727 18.2002 6.94416M19.9381 11C19.979 11.3276 20 11.6613 20 12C20 16.4183 16.4183 20 12 20C9.61061 20 7.46589 18.9525 6 17.2916M9 17H6V17.2916M18.2002 4V6.94416M18.2002 6.94416V6.99993L15.2002 7M6 20V17.2916" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g></svg></button>
</div>
</div>
</div>
<div id="overlay"></div>
</div>
<footer class="cards">
<p>© 2025 zyqunix. All rights reserved.</p>
<p>❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>.</p>
<p>✨ Inspired by <a href="https://vmohammad.dev" target="_blank">vMohammad's Portfolio</a>.</p>
<p>❤️ Made with love by zyqunix in Germany.</p>
<p>© 2025 zyqunix - all rights reserved</p>
<p>❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a></p>
<p>✨ Inspired by <a href="https://vmohammad.dev" target="_blank">vMohammad's Portfolio</a></p>
<p>❤️ Made with love by zyqunix in Germany</p>
</footer>
<script src="assets/js/index.js"></script>