diff --git a/api/chat.php b/api/chat.php index 1b9b389..5f9f542 100644 --- a/api/chat.php +++ b/api/chat.php @@ -7,7 +7,7 @@ $method = $_SERVER['REQUEST_METHOD']; if ($method === 'GET') { try { - $stmt = db()->prepare("SELECT * FROM messages ORDER BY created_at DESC LIMIT 50"); + $stmt = db()->prepare("SELECT m.*, ul.custom_color FROM messages m LEFT JOIN user_likes ul ON m.username = ul.username ORDER BY m.created_at DESC LIMIT 50"); $stmt->execute(); $messages = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode(array_reverse($messages)); diff --git a/api/get_top_fans.php b/api/get_top_fans.php index 7f187cb..56409bf 100644 --- a/api/get_top_fans.php +++ b/api/get_top_fans.php @@ -5,7 +5,7 @@ header('Content-Type: application/json'); try { $pdo = db(); - $stmt = $pdo->query("SELECT username, total_likes FROM user_likes ORDER BY total_likes DESC LIMIT 5"); + $stmt = $pdo->query("SELECT username, total_likes, custom_color FROM user_likes ORDER BY total_likes DESC LIMIT 5"); $fans = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode(['success' => true, 'fans' => $fans]); diff --git a/api/update_fan_color.php b/api/update_fan_color.php new file mode 100644 index 0000000..086d124 --- /dev/null +++ b/api/update_fan_color.php @@ -0,0 +1,33 @@ + false, "error" => "Method not allowed"]); + exit; +} + +$input = json_decode(file_get_contents("php://input"), true); +$userName = $input["username"] ?? ""; +$color = $input["color"] ?? ""; + +if (empty($userName) || !preg_match("/^#[a-fA-F0-9]{6}$/", $color)) { + echo json_encode(["success" => false, "error" => "Invalid input"]); + exit; +} + +try { + $pdo = db(); + // We only allow top 3 fans to change color, but we'll enforce that in the UI. + // Here we just update it if they exist in user_likes. + $stmt = $pdo->prepare("UPDATE user_likes SET custom_color = ? WHERE username = ?"); + $stmt->execute([$color, $userName]); + + if ($stmt->rowCount() > 0) { + echo json_encode(["success" => true]); + } else { + echo json_encode(["success" => false, "error" => "User not found or color already set"]); + } +} catch (PDOException $e) { + echo json_encode(["success" => false, "error" => $e->getMessage()]); +} diff --git a/index.php b/index.php index 4574749..274f24e 100644 --- a/index.php +++ b/index.php @@ -588,6 +588,32 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; .fan-2 { color: #cbd5e1 !important; font-weight: 700 !important; } .fan-3 { color: #fb923c !important; font-weight: 700 !important; } + .vip-badge { + background: linear-gradient(45deg, #facc15, #fbbf24); + color: #000; + padding: 2px 6px; + border-radius: 4px; + font-size: 0.6rem; + font-weight: 800; + text-transform: uppercase; + margin-left: 5px; + box-shadow: 0 0 10px rgba(250, 204, 21, 0.5); + display: inline-block; + vertical-align: middle; + line-height: 1; + } + + .color-picker-container { + background: rgba(255, 255, 255, 0.1); + padding: 10px; + border-radius: 12px; + margin-bottom: 1rem; + display: none; /* Hidden by default */ + align-items: center; + gap: 10px; + border: 1px solid rgba(250, 204, 21, 0.3); + } + @keyframes fan-entry { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); } @@ -743,6 +769,13 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";

TOP FANS

+ +
+ 🎨 COLOR VIP: + + Elige tu color personalizado +
+
Calculando ranking...
@@ -976,11 +1009,13 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; const response = await fetch('api/get_top_fans.php'); const data = await response.json(); if (data.success) { - topFans = data.fans.map(f => f.username); + topFans = data.fans; const list = document.getElementById('top-fans-list'); list.innerHTML = ''; const currentUserName = document.getElementById('user-name').value.trim(); + const customizationBox = document.getElementById('fan-customization'); + let isTop3 = false; data.fans.forEach((fan, index) => { const div = document.createElement('div'); @@ -988,6 +1023,14 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; const scale = index === 0 ? '1.1' : '1'; const opacity = 1 - (index * 0.1); + // Check if current user is in Top 3 + if (index < 3 && fan.username === currentUserName && currentUserName !== "") { + isTop3 = true; + if (fan.custom_color) { + document.getElementById('vip-color-input').value = fan.custom_color; + } + } + // Welcome sound for #1 fan if (index === 0 && fan.username === currentUserName && !welcomeSoundPlayed && currentUserName !== "") { document.getElementById('welcome-sound').play().catch(e => console.log("Audio play blocked")); @@ -1005,21 +1048,46 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; div.style.border = index === 0 ? '1px solid #facc15' : '1px solid transparent'; div.style.animation = fan.username === currentUserName ? 'fan-entry 0.5s ease-out' : 'none'; + const vipBadge = index === 0 ? 'VIP' : ''; + const customColorStyle = fan.custom_color ? `color: ${fan.custom_color} !important;` : ''; + div.innerHTML = `
${medal}
-
${fan.username}
+
${fan.username}${vipBadge}
${fan.total_likes} Corazones repartidos
`; list.appendChild(div); }); + + customizationBox.style.display = isTop3 ? 'flex' : 'none'; } } catch (error) { console.error('Ranking error:', error); } } + async function updateCustomColor(color) { + const userName = document.getElementById('user-name').value.trim(); + if (!userName) return; + + try { + const response = await fetch('api/update_fan_color.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ username: userName, color: color }) + }); + const result = await response.json(); + if (result.success) { + fetchTopFans(); + fetchMessages(); + } + } catch (e) { + console.error('Error updating color:', e); + } + } + async function fetchMessages() { try { const response = await fetch('api/chat.php'); @@ -1031,21 +1099,24 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; const div = document.createElement('div'); const isLike = msg.message.includes('❤️'); - // Determine fan class + // Determine fan class and VIP status let fanClass = ''; - const fanIndex = topFans.indexOf(msg.username); + const fanIndex = topFans.findIndex(f => f.username === msg.username); if (fanIndex === 0) fanClass = 'fan-1'; else if (fanIndex === 1) fanClass = 'fan-2'; else if (fanIndex === 2) fanClass = 'fan-3'; + const vipBadge = fanIndex === 0 ? 'VIP' : ''; + const customColor = msg.custom_color ? `color: ${msg.custom_color} !important;` : ''; + div.style.background = isLike ? 'rgba(255, 68, 68, 0.15)' : 'rgba(255,255,255,0.05)'; div.style.padding = '0.8rem'; div.style.borderRadius = '12px'; div.style.borderLeft = `4px solid ${isLike ? '#ff4444' : (msg.username === currentUserName ? 'var(--primary-color)' : 'rgba(255,255,255,0.2)')}`; div.innerHTML = ` -
- ${fanIndex === 0 ? '👑 ' : ''}${msg.username} +
+ ${fanIndex === 0 ? '👑 ' : ''}${msg.username}${vipBadge}
${msg.message}
${new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}