<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<title>Chat en Tiempo Real</title>
<link rel="stylesheet" href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css">
<style>
.chat-container {
height: 400px;
overflow-y: auto;
padding: 1rem;
background: var(--bs-dark);
border-radius: 0.375rem;
margin-bottom: 1rem;
}
.message {
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 0.375rem;
background: var(--bs-secondary-bg);
}
.message .username {
font-weight: bold;
color: var(--bs-info);
}
.message .timestamp {
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
</style>
</head>
<body>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="mb-0">Chat</h3>
<input type="text" class="form-control w-25" placeholder="Tu nombre" value="Anónimo">
</div>
<div class="card-body">
<div class="chat-container">
<!-- Los mensajes aparecerán aquí -->
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Escribe tu mensaje...">
<button class="btn btn-primary">Enviar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
const chatMessages = document.getElementById('chat-messages');
const usernameInput = document.getElementById('username');
let messages = [];
function createMessageElement(message) {
const messageDiv = document.createElement('div');
messageDiv.className = 'message';
messageDiv.innerHTML = `
<div class="d-flex justify-content-between">
<span class="username">${escapeHtml(message.username)}</span>
<span class="timestamp">${message.timestamp}</span>
</div>
<div class="content">${escapeHtml(message.message)}</div>
`;
return messageDiv;
}
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function sendMessage() {
const message = messageInput.value.trim();
const username = usernameInput.value.trim() || 'Anónimo';
if (!message) return;
const timestamp = new Date().toLocaleTimeString();
const newMessage = {
username: username,
message: message,
timestamp: timestamp
};
messages.push(newMessage);
chatMessages.appendChild(createMessageElement(newMessage));
messageInput.value = '';
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Event listeners
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
});
</script>
</body>
</html>