From efc24289da31f833fc4ca94a4f2e2fa626c155b7 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Wed, 18 Feb 2026 21:43:56 +0000 Subject: [PATCH] Auto commit: 2026-02-18T21:43:56.375Z --- index.php | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 83 insertions(+), 7 deletions(-) diff --git a/index.php b/index.php index f6642e6..c63097e 100644 --- a/index.php +++ b/index.php @@ -1515,6 +1515,68 @@ $twitter_link = "https://twitter.com/"; height: 100%; pointer-events: none; } + + /* Chat Message Styles */ + @keyframes messageBubble { + 0% { transform: scale(0.5); opacity: 0; transform-origin: left bottom; } + 70% { transform: scale(1.05); transform-origin: left bottom; } + 100% { transform: scale(1); opacity: 1; transform-origin: left bottom; } + } + + @keyframes messageBubbleMe { + 0% { transform: scale(0.5); opacity: 0; transform-origin: right bottom; } + 70% { transform: scale(1.05); transform-origin: right bottom; } + 100% { transform: scale(1); opacity: 1; transform-origin: right bottom; } + } + + .chat-msg-item { + max-width: 85%; + padding: 0.8rem; + border-radius: 18px; + transition: all 0.3s ease; + position: relative; + animation: messageBubble 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; + align-self: flex-start; + background: rgba(255,255,255,0.05); + border-bottom-left-radius: 4px; + margin-bottom: 0.5rem; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + } + + .chat-msg-item.is-me { + align-self: flex-end; + background: rgba(56, 189, 248, 0.15) !important; + border-left: none !important; + border-right: 4px solid var(--primary-color); + text-align: right; + border-bottom-left-radius: 18px; + border-bottom-right-radius: 4px; + animation: messageBubbleMe 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; + } + + .chat-msg-header { + display: flex; + align-items: center; + gap: 4px; + font-size: 0.7rem; + font-weight: bold; + margin-bottom: 2px; + } + + .chat-msg-item.is-me .chat-msg-header { + flex-direction: row-reverse; + } + + .chat-msg-time { + font-size: 0.6rem; + opacity: 0.4; + margin-top: 4px; + text-align: right; + } + + .chat-msg-item.is-me .chat-msg-time { + text-align: left; + } @@ -2488,20 +2550,34 @@ $twitter_link = "https://twitter.com/"; const response = await fetch('api/chat.php'); const messages = await response.json(); + if (messages.length === lastMessageCount) return; + const currentUserName = document.getElementById('user-name').value.trim() || 'Anónimo'; chatMessages.innerHTML = ''; - messages.forEach(msg => { + messages.forEach((msg, index) => { const div = document.createElement('div'); const isLike = msg.message.includes('❤️'); + const isMe = msg.username.toLowerCase() === currentUserName.toLowerCase(); + + div.className = 'chat-msg-item' + (isMe ? ' is-me' : ''); + + // Only animate truly new messages to avoid visual fatigue + if (index < lastMessageCount && lastMessageCount > 0) { + div.style.animation = 'none'; + div.style.opacity = '1'; + } // 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)'; - 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)')}`; + if (isLike) { + div.style.background = isMe ? 'rgba(255, 68, 68, 0.25)' : 'rgba(255, 68, 68, 0.15)'; + div.style.borderLeft = isMe ? 'none' : '4px solid #ff4444'; + if (isMe) div.style.borderRight = '4px solid #ff4444'; + } else if (!isMe) { + div.style.borderLeft = `4px solid ${msg.username === currentUserName ? 'var(--primary-color)' : 'rgba(255,255,255,0.2)'}`; + } let content = ''; if (msg.type === 'image') { @@ -2516,11 +2592,11 @@ $twitter_link = "https://twitter.com/"; } div.innerHTML = ` -
+
${msg.username} ${levelEmoji ? `${levelEmoji}` : ''}
${content} -
${new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+
${new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
`; chatMessages.appendChild(div); });