last.fm

assets/css/style.css

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

assets/js/index.js

@@ -196,8 +196,43 @@ document.querySelectorAll('.tooltip').forEach(elem => {
 });
 
 
-const frEl = document.getElementById('fr');
+const LASTFM_API_KEY = "04f747e38bebf69efbbfab7b20612bac";
-let rn = Math.floor(Math.random() * 2) + 1;
+const LASTFM_USERNAME = "zyqunix";
-if (rn == 1) {
+
-	frEl.innerHTML = "Fr*nch";
+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)
+

index.html

@@ -111,6 +111,20 @@
 			<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>
 			<p>❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>.</p>