mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 06:20:30 +02:00
last.fm
This commit is contained in:
zyqunix
parent
e3d1554eed
commit
5fb3d79c70
4 changed files with 134 additions and 4 deletions
|
|
@ -551,3 +551,84 @@ div[class="cards sitemap shadow"] > h3,
|
|||
div[class="cards sitemap shadow"] > h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.banan {
|
||||
position: fixed;
|
||||
left: 30px !important;
|
||||
bottom: 30px !important;
|
||||
width: 64px;
|
||||
cursor: pointer;
|
||||
pointer-events: all !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.music-pop {
|
||||
text-align: left;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #202020ee;
|
||||
width: 600px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top button {
|
||||
padding: 4px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-color: #ac2323;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.top button:hover {
|
||||
background-color: #bc3333;
|
||||
}
|
||||
|
||||
.song {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.song > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#artist {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#song-cover {
|
||||
border-radius: 4px;
|
||||
margin-right: 15px;
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
#song-url {
|
||||
position: relative;
|
||||
background-color: #0778B7;
|
||||
padding: 2px 4px;
|
||||
right: 0 !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#song-url:hover {
|
||||
background-color: #1078C7;
|
||||
}
|
||||
|
||||
#song-url:hover > svg {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
BIN
assets/img/dancing-banan.gif
Normal file
BIN
assets/img/dancing-banan.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -196,8 +196,43 @@ document.querySelectorAll('.tooltip').forEach(elem => {
|
|||
});
|
||||
|
||||
|
||||
const frEl = document.getElementById('fr');
|
||||
let rn = Math.floor(Math.random() * 2) + 1;
|
||||
if (rn == 1) {
|
||||
frEl.innerHTML = "Fr*nch";
|
||||
const LASTFM_API_KEY = "04f747e38bebf69efbbfab7b20612bac";
|
||||
const LASTFM_USERNAME = "zyqunix";
|
||||
|
||||
const params = new URLSearchParams({
|
||||
method: "user.getrecenttracks",
|
||||
user: LASTFM_USERNAME,
|
||||
api_key: LASTFM_API_KEY,
|
||||
format: "json",
|
||||
limit: "1"
|
||||
});
|
||||
|
||||
const url = `http://ws.audioscrobbler.com/2.0/?${params.toString()}`;
|
||||
|
||||
function fetchSong() {
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const track = data?.recenttracks?.track?.[0];
|
||||
if (!track) return;
|
||||
const artist = track.artist["#text"];
|
||||
const title = track.name;
|
||||
const image = track.image.find(img => img.size === "extralarge")?.["#text"] || "";
|
||||
|
||||
document.getElementById("artist").innerText = artist;
|
||||
document.getElementById("song-name").innerText = title;
|
||||
document.getElementById("song-cover").src = !image ? "https://lastfm.freetls.fastly.net/i/u/64s/4128a6eb29f94943c9d206c08e625904.jpg" : image;
|
||||
document.getElementById("song-url").href = track.url;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchSong();
|
||||
|
||||
setInterval(() => {
|
||||
fetchSong();
|
||||
}, 60000)
|
||||
|
||||
|
|
|
|||
14
index.html
14
index.html
|
|
@ -110,6 +110,20 @@
|
|||
<h3>More can be found on the <a href="sitemap">sitemap/sites page</a></h3>
|
||||
<h4>Note: I do forget to add new sites there sometimes. So check the <a href="https://github.com/zyqunix/tools">GitHub</a> if you think there are some missing</h4>
|
||||
</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>
|
||||
<div class="song">
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="cards">
|
||||
<p>© 2025 zyqunix. All rights reserved.</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue