From 6c9c96db2078165eea564172020be67a74ec0ab7 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 16 Feb 2026 23:03:14 +0000
Subject: [PATCH] Auto commit: 2026-02-16T23:03:14.086Z

---
 db/migrations/002_create_fans_table.sql |   0
 index.php                               |  30 +++-
 lyrics.php                              | 214 ++++++++++++++++++++++++
 3 files changed, 241 insertions(+), 3 deletions(-)
 create mode 100644 db/migrations/002_create_fans_table.sql
 create mode 100644 lyrics.php

diff --git a/db/migrations/002_create_fans_table.sql b/db/migrations/002_create_fans_table.sql
new file mode 100644
index 0000000..e69de29
diff --git a/index.php b/index.php
index ec06e66..05f83a7 100644
--- a/index.php
+++ b/index.php
@@ -949,8 +949,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                             <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 id="lyrics-link" href="lyrics.php" 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> VER LETRA
                             </a>
                             <div id="share-links-container" style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;">
                                 <a id="whatsapp-share-track" href="#" target="_blank" style="font-size: 0.65rem; background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.3); color: #25D366; text-decoration: none; display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-weight: 700; transition: all 0.3s;" onmouseover="this.style.background='rgba(37, 211, 102, 0.2)';" onmouseout="this.style.background='rgba(37, 211, 102, 0.1)';">
@@ -1036,6 +1036,30 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                         </a>
                     </div>
 
+                    <!-- Fan of the Month Section -->
+                    <div id="fan-of-the-month" style="margin-top: 2rem; background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(0, 200, 83, 0.1)); padding: 1.5rem; border-radius: 24px; border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 1rem; position: relative; overflow: hidden;">
+                        <div style="position: absolute; top: -10px; right: -10px; font-size: 4rem; opacity: 0.05; transform: rotate(15deg); color: var(--accent-color);">
+                            <i class="bi bi-star-fill"></i>
+                        </div>
+                        <?php
+                        require_once __DIR__ . '/db/config.php';
+                        try {
+                            $fan = db()->query("SELECT * FROM fans WHERE is_fan_of_month = 1 LIMIT 1")->fetch();
+                        } catch (Exception $e) {
+                            $fan = null;
+                        }
+                        ?>
+                        <div style="width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--accent-color); padding: 2px; background: var(--glass-bg);">
+                            <img src="<?= $fan['photo'] ?? 'assets/pasted-20260215-163754-def41f49.png' ?>" alt="Fan of the Month" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
+                        </div>
+                        <div style="flex: 1;">
+                            <span style="font-size: 0.65rem; font-weight: 800; color: var(--accent-color); letter-spacing: 2px; text-transform: uppercase;">Fan del Mes</span>
+                            <div style="font-size: 1.1rem; font-weight: 800; color: var(--text-color);"><?= htmlspecialchars($fan['name'] ?? 'Tú puedes ser el próximo') ?></div>
+                            <div style="font-size: 0.75rem; opacity: 0.6;"><?= $fan['points'] ?? 0 ?> puntos de actividad</div>
+                        </div>
+                        <i class="bi bi-trophy-fill" style="font-size: 1.5rem; color: #facc15;"></i>
+                    </div>
+
                     <!-- Espacio para Código QR -->
                     <div class="payment-section">
                         <div class="qr-placeholder" style="padding: 0; overflow: hidden; background: rgba(255,255,255,0.1);" onclick="openQRModal()">
@@ -2006,7 +2030,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
                             }
 
                             if (lyricsLink) {
-                                lyricsLink.href = `https://www.google.com/search?q=${encodeURIComponent(fullDisplay + " letra lyrics")}`;
+                                lyricsLink.href = `lyrics.php?track=${encodeURIComponent(title)}&artist=${encodeURIComponent(artist)}`;
                                 lyricsLink.style.display = 'flex';
                             }
 
diff --git a/lyrics.php b/lyrics.php
new file mode 100644
index 0000000..b0fcdb9
--- /dev/null
+++ b/lyrics.php
@@ -0,0 +1,214 @@
+<?php
+declare(strict_types=1);
+
+$track = $_GET['track'] ?? '';
+$artist = $_GET['artist'] ?? '';
+
+?>
+<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Letras - <?= htmlspecialchars($track) ?> - Lili Records</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <style>
+        :root {
+            --primary-color: #38bdf8;
+            --accent-color: #00c853;
+            --glass-bg: rgba(255, 255, 255, 0.05);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --text-color: #ffffff;
+        }
+
+        [data-theme="light"] {
+            --glass-bg: rgba(255, 255, 255, 0.9);
+            --glass-border: rgba(0, 0, 0, 0.1);
+            --text-color: #1a1a1a;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Inter', sans-serif;
+            color: var(--text-color);
+            background: #000;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            padding: 2rem 1rem;
+        }
+
+        .background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('assets/images/background.jpg') center/cover no-repeat;
+            z-index: -1;
+            filter: blur(20px);
+        }
+
+        .background::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: rgba(0,0,0,0.6);
+        }
+
+        .lyrics-container {
+            width: 100%;
+            max-width: 600px;
+            background: var(--glass-bg);
+            backdrop-filter: blur(15px);
+            border: 1px solid var(--glass-border);
+            border-radius: 32px;
+            padding: 2.5rem;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 2rem;
+            position: relative;
+        }
+
+        .back-btn {
+            position: absolute;
+            left: 0;
+            top: 0;
+            color: var(--text-color);
+            text-decoration: none;
+            font-size: 1.5rem;
+            opacity: 0.7;
+            transition: opacity 0.3s;
+        }
+
+        .back-btn:hover { opacity: 1; }
+
+        h1 { margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--primary-color); }
+        h2 { margin: 0.5rem 0 0; font-size: 1.1rem; opacity: 0.8; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }
+
+        .lyrics-content {
+            font-size: 1.2rem;
+            line-height: 1.8;
+            white-space: pre-wrap;
+            text-align: center;
+            margin-top: 2rem;
+            min-height: 300px;
+        }
+
+        .loading-spinner {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            margin-top: 5rem;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid var(--glass-border);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+        .error-msg { color: #ff4444; text-align: center; margin-top: 5rem; }
+        
+        .search-fallback {
+            margin-top: 2rem;
+            text-align: center;
+        }
+        
+        .btn-search {
+            background: var(--primary-color);
+            color: #000;
+            text-decoration: none;
+            padding: 0.8rem 1.5rem;
+            border-radius: 12px;
+            font-weight: 700;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: transform 0.2s;
+        }
+        
+        .btn-search:hover { transform: translateY(-2px); }
+
+    </style>
+</head>
+<body>
+    <div class="background"></div>
+
+    <div class="lyrics-container">
+        <header>
+            <a href="index.php" class="back-btn"><i class="bi bi-arrow-left"></i></a>
+            <h1><?= htmlspecialchars($track ?: 'Letras') ?></h1>
+            <?php if ($artist): ?><h2><?= htmlspecialchars($artist) ?></h2><?php endif; ?>
+        </header>
+
+        <div id="lyrics-body" class="lyrics-content">
+            <div class="loading-spinner">
+                <div class="spinner"></div>
+                <p>Buscando letra...</p>
+            </div>
+        </div>
+
+        <div id="fallback" class="search-fallback" style="display: none;">
+            <p style="margin-bottom: 1rem; opacity: 0.7;">No pudimos encontrar la letra automáticamente.</p>
+            <a href="https://www.google.com/search?q=<?= urlencode($track . ' ' . $artist . ' letras') ?>" target="_blank" class="btn-search">
+                <i class="bi bi-google"></i> BUSCAR EN GOOGLE
+            </a>
+        </div>
+    </div>
+
+    <script>
+        const theme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', theme);
+
+        const track = "<?= addslashes($track) ?>";
+        const artist = "<?= addslashes($artist) ?>";
+
+        async function fetchLyrics() {
+            if (!track || !artist) {
+                document.getElementById('lyrics-body').innerHTML = '<p class="error-msg">Información de canción insuficiente.</p>';
+                return;
+            }
+
+            try {
+                const response = await fetch(`https://api.lyrics.ovh/v1/${encodeURIComponent(artist)}/${encodeURIComponent(track)}`);
+                const data = await response.json();
+
+                if (data.lyrics) {
+                    document.getElementById('lyrics-body').textContent = data.lyrics;
+                } else {
+                    showFallback();
+                }
+            } catch (error) {
+                console.error('Error fetching lyrics:', error);
+                showFallback();
+            }
+        }
+
+        function showFallback() {
+            document.getElementById('lyrics-body').innerHTML = '<p class="error-msg">Letra no encontrada.</p>';
+            document.getElementById('fallback').style.display = 'block';
+        }
+
+        if (track && artist) {
+            fetchLyrics();
+        } else {
+            document.getElementById('lyrics-body').innerHTML = '<p class="error-msg">No hay ninguna canción reproduciéndose ahora mismo.</p>';
+        }
+    </script>
+</body>
+</html>