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

finish last fm music

Browse source
This commit is contained in:
zyqunix 2025-05-11 14:19:14 +02:00
parent 5fb3d79c70
commit 537161e621
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
3 changed files with 30 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/css/style.css
View file

@ -64,11 +64,17 @@ strong {
.cards {
margin-top: 30px !important;
background-color: #252525;
border: 2px solid #333;
padding: 20px;
border-radius: 10px;
width: 600px !important;
text-align: left;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: border 0.1s;
}
.cards:hover {
border: 2px solid #444;
}
footer {
@ -572,12 +578,21 @@ div[class="cards sitemap shadow"] > h4 {
width: 600px;
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
backdrop-filter: blur(5px);
visibility: hidden;
border: 2px solid #333;
opacity: 0;
transition: 0.3s;
}
.music-pop:hover {
border: 2px solid #444;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
.top button {

10
assets/js/index.js
View file

@ -236,3 +236,13 @@ 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() {
document.getElementById('music-pop').style.opacity = '0';
document.getElementById('music-pop').style.visibility = 'hidden';
})

7
index.html
View file

@ -112,9 +112,10 @@
</div>
<div class="music">
<img src="assets/img/dancing-banan.gif" class="banan">
<div class="music-pop">
<div class="top"><h3>Listening To <a id="artist">No one</a></h3><button><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"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" 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> </g></svg></button></div>
<img src="assets/img/dancing-banan.gif" class="banan" id="banan">
<div class="music-pop shadow" id="music-pop">
<div class="top"><h3>Listening To <a id="artist">No one</a></h3>
<button id="close"><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"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" 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> </g></svg></button></div>
<div class="song">
<div>
<img src="https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg" id="song-cover">