From c4c712a98061661f7656aa7dd08d9029ef1a4b68 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 16 Feb 2026 22:38:48 +0000
Subject: [PATCH] Auto commit: 2026-02-16T22:38:48.047Z

---
 index.php | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 86 insertions(+), 3 deletions(-)

diff --git a/index.php b/index.php
index 281bf1b..5d62603 100644
--- a/index.php
+++ b/index.php
@@ -59,8 +59,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
             height: 100%;
             background: url('assets/images/background.jpg') center/cover no-repeat;
             z-index: -1;
-            transition: filter 0.05s ease-out, transform 0.05s ease-out;
-            will-change: filter, transform;
+            transition: filter 0.05s ease-out, transform 0.05s ease-out, background-image 1.5s ease-in-out;
+            will-change: filter, transform, background-image;
         }
 
         .background::after {
@@ -855,16 +855,23 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                     <div class="now-playing">
                         <div class="track-cover-container">
                             <i id="cover-placeholder" class="bi bi-broadcast"></i>
-                            <img id="track-cover" src="./assets/pasted-20260215-163754-def41f49.png" alt="Cover" onerror="this.style.display='none'; document.getElementById('cover-placeholder').style.display='block';">
+                            <img id="track-cover" src="./assets/pasted-20260215-163754-def41f49.png" alt="Cover" crossorigin="anonymous" onerror="this.style.display='none'; document.getElementById('cover-placeholder').style.display='block';">
                         </div>
                         <div class="track-info">
                             <span class="track-label">ESTÁS ESCUCHANDO:</span>
                             <div id="track-title" class="track-title">Cargando stream...</div>
                             <div id="track-artist" class="track-artist" style="font-size: 0.95rem; font-weight: 600; opacity: 0.8; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px;">Lili Records Radio</div>
+                            <div id="track-album" style="font-size: 0.8rem; opacity: 0.6; color: #fff; margin-top: 2px; display: none; font-style: italic;"></div>
                             <div class="track-status" style="margin-top: 5px; display: flex; align-items: center; gap: 5px; font-size: 0.75rem;">
                                 <span style="width: 8px; height: 8px; background: #ff4444; border-radius: 50%; display: inline-block; animation: pulse 1.5s infinite;"></span>
                                 EN VIVO
                             </div>
+                            <div id="track-progress-container" style="width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 10px; display: none; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);">
+                                <div id="track-progress-bar" style="height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); width: 0%; transition: width 1s linear;"></div>
+                            </div>
+                            <a id="lyrics-link" href="#" target="_blank" style="font-size: 0.7rem; color: var(--primary-color); text-decoration: none; margin-top: 8px; display: none; align-items: center; gap: 4px; opacity: 0.8; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
+                                <i class="bi bi-music-note-list"></i> BUSCAR LETRA
+                            </a>
                         </div>
                         <button id="like-song-btn" onclick="likeSong()" style="background: none; border: none; color: #ff4444; font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; gap: 5px;">
                             <i class="bi bi-heart"></i>
@@ -1006,6 +1013,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
         const playIcon = document.getElementById('play-icon');
         const trackTitle = document.getElementById('track-title');
         const trackArtist = document.getElementById('track-artist');
+        const trackAlbum = document.getElementById('track-album');
+        const lyricsLink = document.getElementById('lyrics-link');
         const trackCover = document.getElementById('track-cover');
         const coverPlaceholder = document.getElementById('cover-placeholder');
         const visualizerContainer = document.getElementById('audio-visualizer');
@@ -1613,6 +1622,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
         }
 
         // Fetch Now Playing Metadata from RadioKing
+        let progressInterval = null;
+
         async function updateMetadata() {
             try {
                 const response = await fetch('https://www.radioking.com/widgets/api/v1/radio/828046/track/current');
@@ -1621,11 +1632,15 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                 if (data && data.title) {
                     const title = data.title;
                     const artist = data.artist || 'Lili Records';
+                    const album = data.album || '';
                     const coverUrl = data.cover || './assets/pasted-20260215-163754-def41f49.png';
                     
                     const fullDisplay = title.includes(artist) ? title : `${artist} - ${title}`;
                     
                     if (trackTitle.textContent !== title || (trackArtist && trackArtist.textContent !== artist)) {
+                        // Clear existing progress interval
+                        if (progressInterval) clearInterval(progressInterval);
+
                         // Add previous song to history before changing
                         if (trackTitle.textContent !== "Cargando stream..." && trackTitle.textContent !== "Lili Records Radio - En Vivo") {
                             const prevTrack = {
@@ -1643,6 +1658,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
 
                         trackTitle.style.opacity = '0';
                         if (trackArtist) trackArtist.style.opacity = '0';
+                        if (trackAlbum) trackAlbum.style.opacity = '0';
                         if (trackCover) trackCover.style.opacity = '0';
                         
                         // Reset Like Button
@@ -1659,6 +1675,21 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                             trackTitle.textContent = title;
                             if (trackArtist) trackArtist.textContent = artist;
                             
+                            if (trackAlbum) {
+                                if (album) {
+                                    trackAlbum.textContent = album;
+                                    trackAlbum.style.display = 'block';
+                                    trackAlbum.style.opacity = '0.6';
+                                } else {
+                                    trackAlbum.style.display = 'none';
+                                }
+                            }
+
+                            if (lyricsLink) {
+                                lyricsLink.href = `https://www.google.com/search?q=${encodeURIComponent(fullDisplay + " letra lyrics")}`;
+                                lyricsLink.style.display = 'flex';
+                            }
+                            
                             trackTitle.style.opacity = '1';
                             if (trackArtist) trackArtist.style.opacity = '0.8';
                             
@@ -1667,6 +1698,58 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                                 trackCover.style.display = 'block';
                                 if (coverPlaceholder) coverPlaceholder.style.display = 'none';
                                 trackCover.style.opacity = '1';
+                                
+                                // Dynamic Color Extraction
+                                trackCover.onload = function() {
+                                    try {
+                                        const canvas = document.createElement('canvas');
+                                        const ctx = canvas.getContext('2d');
+                                        canvas.width = 1;
+                                        canvas.height = 1;
+                                        ctx.drawImage(trackCover, 0, 0, 1, 1);
+                                        const rgb = ctx.getImageData(0, 0, 1, 1).data;
+                                        if (rgb[0] + rgb[1] + rgb[2] > 30) {
+                                            const color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+                                            document.documentElement.style.setProperty('--primary-color', color);
+                                            document.documentElement.style.setProperty('--dynamic-glow', `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.7)`);
+                                        }
+                                    } catch(e) {}
+                                };
+                            }
+
+                            // Dynamic Background Update
+                            fetch(`api/pexels.php?query=${encodeURIComponent(artist + " " + title + " music background")}`)
+                                .then(res => res.json())
+                                .then(pData => {
+                                    if (pData.success && pData.url && bg) {
+                                        bg.style.backgroundImage = `url('${pData.url}')`;
+                                    }
+                                }).catch(() => {});
+
+                            // Progress Bar Logic
+                            const progContainer = document.getElementById('track-progress-container');
+                            const progBar = document.getElementById('track-progress-bar');
+                            
+                            if (data.started_at && data.end_at && progContainer && progBar) {
+                                progContainer.style.display = 'block';
+                                const start = new Date(data.started_at).getTime();
+                                const end = new Date(data.end_at).getTime();
+                                const duration = end - start;
+
+                                function updateProgressBar() {
+                                    const now = new Date().getTime();
+                                    const elapsed = now - start;
+                                    let percent = (elapsed / duration) * 100;
+                                    if (percent > 100) percent = 100;
+                                    if (percent < 0) percent = 0;
+                                    progBar.style.width = percent + '%';
+                                    if (percent >= 100) clearInterval(progressInterval);
+                                }
+                                
+                                updateProgressBar();
+                                progressInterval = setInterval(updateProgressBar, 1000);
+                            } else if (progContainer) {
+                                progContainer.style.display = 'none';
                             }
 
                             // Fetch likes for this song