diff --git a/assets/css/style.css b/assets/css/style.css
index 1a5fbad..4b761eb 100644
--- a/assets/css/style.css
+++ b/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;
+}
diff --git a/assets/img/dancing-banan.gif b/assets/img/dancing-banan.gif
new file mode 100644
index 0000000..82e9bb9
Binary files /dev/null and b/assets/img/dancing-banan.gif differ
diff --git a/assets/js/index.js b/assets/js/index.js
index f819e55..91820b2 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -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)
+
diff --git a/index.html b/index.html
index 2221442..57c2f23 100644
--- a/index.html
+++ b/index.html
@@ -110,6 +110,20 @@
Note: I do forget to add new sites there sometimes. So check the GitHub if you think there are some missing
+
+
+
+
+
+
+
+
+
Untitled
+
+
+
+
+