admin/38428-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2026-02-18T21:43:56.375Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-18 21:43:56 +00:00
parent 730a39f56b
commit efc24289da
1 changed files with 83 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
index.php
View File

@ -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;
}
</style>
</head>
<body>
@ -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 = `
<div style="font-size: 0.7rem; font-weight: bold; color: ${nameColor}; margin-bottom: 2px; display: flex; align-items: center; gap: 4px;">
<div class="chat-msg-header" style="color: ${nameColor};">
${msg.username} ${levelEmoji ? `<span style="font-size: 0.8rem;">${levelEmoji}</span>` : ''}
</div>
${content}
<div style="font-size: 0.6rem; opacity: 0.4; margin-top: 4px; text-align: right;">${new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
<div class="chat-msg-time">${new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
`;
chatMessages.appendChild(div);
});