wrHG

2024-12-02 19:25:15 +02:00 · 2024-12-02 19:25:15 +02:00 · 6cd496ed7a
commit 6cd496ed7a
parent 260e9f8b1f
1 changed files with 161 additions and 0 deletions
--- a/wallpaper.html
+++ b/wallpaper.html
@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Last.fm Now Playing</title>
+  <style>
+    @font-face {
+      font-family: 'CustomFont';
+      src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap') format('woff2');
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100vh;
+      overflow: hidden;
+      background-color: #000;
+      font-family: 'CustomFont', Arial, sans-serif;
+    }
+
+    #background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center;
+      filter: blur(10px);
+      z-index: -1;
+      transition: background-image 1s ease-in-out;
+    }
+
+    #track-info {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      color: white;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    }
+
+    #track-info h1, #track-info p {
+      opacity: 1;
+      transform: translateY(0);
+      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+    }
+
+    #track-info h1 {
+      font-size: 2.5em;
+      margin-bottom: 0.5em;
+    }
+
+    #track-info p {
+      font-size: 1.3em;
+      margin: 0.2em 0;
+    }
+
+    .hidden {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    .fade-in {
+      opacity: 0;
+      animation: fadeIn 0.5s forwards;
+    }
+
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="background"></div>
+  <div id="track-info">
+    <h1 id="track-title"></h1>
+    <p id="track-artist"></p>
+    <p id="track-album"></p>
+  </div>
+
+  <script>
+    const username = localStorage.getItem('lastfmUsername') || 'yetiuard';
+    const url = `https://lastfm-last-played.biancarosa.com.br/${username}/latest-song`;
+    const backgroundElement = document.getElementById('background');
+    const trackTitleElement = document.getElementById('track-title');
+    const trackArtistElement = document.getElementById('track-artist');
+    const trackAlbumElement = document.getElementById('track-album');
+    const placeholderImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+
+    let previousTrack = "", previousAlbumImage = "";
+
+    async function fetchLastPlayedSong() {
+      try {
+        const response = await fetch(url);
+        const { track } = await response.json();
+        if (!track) return;
+
+        const trackName = formatTrackName(track.name);
+        const artistName = track.artist?.['#text'];
+        const albumName = track.album?.['#text'];
+        const albumImage = track.image.find(img => img.size === "large")?.['#text'] || placeholderImage;
+
+        if (trackName !== previousTrack || albumImage !== previousAlbumImage) {
+          updateTrackInfo(trackName, artistName, albumName, albumImage);
+          previousTrack = trackName;
+          previousAlbumImage = albumImage;
+        }
+      } catch (error) {
+        console.error("Error fetching Last.fm data:", error);
+      }
+    }
+
+    function formatTrackName(name) {
+      // Remove "(Album Version (Explicit))" from the track title if it exists
+      return name.replace(/ \(Album Version \(Explicit\)\)/i, '');
+    }
+
+    function updateTrackInfo(trackName, artistName, albumName, albumImage) {
+      preloadImage(albumImage, () => {
+        // Update background and track info
+        backgroundElement.style.backgroundImage = `url(${albumImage})`;
+
+        // Fade out current text
+        trackTitleElement.classList.add('hidden');
+        trackArtistElement.classList.add('hidden');
+        trackAlbumElement.classList.add('hidden');
+
+        setTimeout(() => {
+          // Update track information
+          trackTitleElement.textContent = trackName;
+          trackArtistElement.textContent = artistName || "Unknown Artist";
+          trackAlbumElement.textContent = albumName || "Unknown Album";
+
+          // Apply fade-in animation to new text
+          trackTitleElement.classList.remove('hidden');
+          trackArtistElement.classList.remove('hidden');
+          trackAlbumElement.classList.remove('hidden');
+          trackTitleElement.classList.add('fade-in');
+          trackArtistElement.classList.add('fade-in');
+          trackAlbumElement.classList.add('fade-in');
+        }, 500); // Match transition timing
+      });
+    }
+
+    function preloadImage(src, callback) {
+      const img = new Image();
+      img.src = src;
+      img.onload = callback;
+    }
+
+    fetchLastPlayedSong();
+    setInterval(fetchLastPlayedSong, 100);
+  </script>
+</body>
+</html>