Matrix Chat

body { background-color: black; color: #00ff00; font-family: monospace; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .chat-container { width: 80%; max-width: 800px; height: 90vh; border: 1px solid #00ff00; display: flex; flex-direction: column; background-color: rgba(0, 0, 0, 0.8); } .chat-display { flex-grow: 1; padding: 20px; overflow-y: scroll; display: flex; flex-direction: column; justify-content: flex-end; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 5px; background-color: #004400; align-self: flex-start; } .message.sent { background-color: #008800; align-self: flex-end; } .input-area { display: flex; padding: 10px; border-top: 1px solid #00ff00; } .message-input { flex-grow: 1; background-color: black; color: #00ff00; border: 1px solid #00ff00; padding: 8px; margin-right: 10px; border-radius: 5px; } .send-button { background-color: #00ff00; color: black; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; } document.addEventListener('DOMContentLoaded', () => { const sendButton = document.getElementById('send-button'); const messageInput = document.getElementById('message-input'); const chatDisplay = document.getElementById('chat-display'); sendButton.addEventListener('click', sendMessage); messageInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { sendMessage(); } }); function sendMessage() { const messageText = messageInput.value.trim(); if (messageText !== '') { displayMessage(messageText, 'sent'); sendMessageToServer(messageText); messageInput.value = ''; } } function displayMessage(messageText, type) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message'); if (type === 'sent') { messageDiv.classList.add('sent'); } messageDiv.textContent = messageText; chatDisplay.appendChild(messageDiv); chatDisplay.scrollTop = chatDisplay.scrollHeight; } function sendMessageToServer(message) { console.log('Sending message to server:', message); // In a real website, this is where you would send the message to a server // using technologies like WebSocket or HTTP requests (fetch API). // For example, using fetch: // fetch('/send_message', { // method: 'POST', // headers: { // 'Content-Type': 'application/json' // }, // body: JSON.stringify({ message: message }) // }) // .then(response => response.json()) // .then(data => { // console.log('Server response:', data); // }); // The current setup is a simulation. To make it work between different // computers, you would need a server to handle message distribution. // This server would receive messages and then push them to all connected clients. // For now, we are just simulating receiving a message back after a delay. setTimeout(() => { // In a real application, the server would push messages to clients, // and you would handle them here, for example using WebSocket events. // For simulation purposes, we are not displaying any incoming message. }, 1000); } });