diff --git a/api/get_online_users.php b/api/get_online_users.php index c00d697..613a75c 100644 --- a/api/get_online_users.php +++ b/api/get_online_users.php @@ -6,18 +6,34 @@ $db = db(); // Active in the last 15 minutes, has username and phone // Use GROUP BY to avoid duplicates if same session/user has multiple entries (though session_id should be unique-ish) $stmt = $db->prepare(" - SELECT username, phone_number, country_code, last_activity - FROM visitor_logs - WHERE last_activity > DATE_SUB(NOW(), INTERVAL 15 MINUTE) - AND username IS NOT NULL - AND phone_number IS NOT NULL - AND username != '' - AND phone_number != '' - GROUP BY username, phone_number - ORDER BY last_activity DESC + SELECT + v.username, + v.phone_number, + v.country_code, + v.last_activity, + f.points, + f.is_fan_of_month + FROM visitor_logs v + LEFT JOIN fans f ON v.username = f.name + WHERE v.last_activity > DATE_SUB(NOW(), INTERVAL 15 MINUTE) + AND v.username IS NOT NULL + AND v.phone_number IS NOT NULL + AND v.username != '' + AND v.phone_number != '' + GROUP BY v.username, v.phone_number + ORDER BY v.last_activity DESC LIMIT 20 "); $stmt->execute(); $users = $stmt->fetchAll(); -echo json_encode(['success' => true, 'users' => $users]); +// Get total active sessions (last 5 minutes) for a live counter +$stmtTotal = $db->prepare("SELECT COUNT(DISTINCT session_id) as total FROM visitor_logs WHERE last_activity > DATE_SUB(NOW(), INTERVAL 5 MINUTE)"); +$stmtTotal->execute(); +$totalActive = $stmtTotal->fetch()['total'] ?? 0; + +echo json_encode([ + 'success' => true, + 'users' => $users, + 'total_active' => $totalActive +]); diff --git a/index.php b/index.php index c3f77e6..f6642e6 100644 --- a/index.php +++ b/index.php @@ -2296,33 +2296,73 @@ $twitter_link = "https://twitter.com/"; }); } + function getUserColor(str) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + const h = Math.abs(hash) % 360; + // Usamos colores vibrantes con buena saturación y luminosidad media + return `hsl(${h}, 65%, 55%)`; + } + + function timeAgo(dateString) { + const now = new Date(); + const past = new Date(dateString); + const diffInSeconds = Math.floor((now - past) / 1000); + + if (diffInSeconds < 60) return 'Hace un momento'; + if (diffInSeconds < 3600) return `Hace ${Math.floor(diffInSeconds / 60)} min`; + return 'Hace más de 1 hora'; + } + async function fetchOnlineUsers() { try { const response = await fetch('api/get_online_users.php'); const data = await response.json(); if (data.success) { const list = document.getElementById('online-users-list'); + const widgetTitle = document.querySelector('#online-users-list').previousElementSibling.previousElementSibling; + + if (widgetTitle && data.total_active !== undefined) { + widgetTitle.innerHTML = ` CLIENTES CONECTADOS ${data.total_active} OYENTES`; + } + if (data.users.length === 0) { list.innerHTML = '
No hay otros usuarios con móvil registrado ahora.
'; return; } - list.innerHTML = data.users.map(user => ` -
+ list.innerHTML = data.users.map(user => { + const isVeryActive = (new Date() - new Date(user.last_activity)) < 60000; + const flagUrl = user.country_code ? `https://flagcdn.com/w20/${user.country_code.toLowerCase()}.png` : null; + const isTopFan = user.points > 10 || user.is_fan_of_month == 1; + const userColor = getUserColor(user.username); + + return ` +
-
+
${user.username.charAt(0).toUpperCase()} + ${isVeryActive ? '' : ''}
-
${user.username}
-
Conectado
+
+ ${user.username} + ${flagUrl ? `` : ''} + ${isTopFan ? `TOP` : ''} +
+
+ ${timeAgo(user.last_activity)} +
- +
- `).join(''); + `; + }).join(''); } } catch (error) { console.error('Error fetching online users:', error); @@ -2454,7 +2494,8 @@ $twitter_link = "https://twitter.com/"; const div = document.createElement('div'); const isLike = msg.message.includes('❤️'); - const nameColor = msg.level_color || (msg.is_fan_of_month ? '#facc15' : 'var(--primary-color)'); + // Si el color es el gris por defecto (#94a3b8) o no tiene, usamos el color dinámico por nombre + const nameColor = (msg.level_color && msg.level_color !== '#94a3b8') ? msg.level_color : getUserColor(msg.username); const levelEmoji = msg.level_emoji || ''; div.style.background = isLike ? 'rgba(255, 68, 68, 0.15)' : 'rgba(255,255,255,0.05)'; @@ -3000,7 +3041,12 @@ $twitter_link = "https://twitter.com/"; container.innerHTML = topFans.map((fan, index) => `
${index + 1}
- ${fan.username} + ${fan.photo ? + `${fan.username}` : + `
+ ${fan.username.charAt(0).toUpperCase()} +
` + }
${fan.username}