<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Веб-Чат</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #e5e5e5; } .chat-container { width: 100%; max-width: 800px; height: 90vh; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; } .chat-header { background-color: #0088cc; color: white; padding: 15px; text-align: center; font-size: 20px; } .chat-messages { flex: 1; padding: 15px; overflow-y: auto; background-color: #f7f7f7; } .chat-message { display: flex; align-items: flex-start; margin-bottom: 15px; } .chat-message .avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px; } .chat-message .avatar img{ width: 100%; height: 100%; object-fit: cover; } .chat-message .message-content { max-width: 70%; background-color: white; padding: 10px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .chat-message .message-content .username { font-weight: bold; margin-bottom: 5px; } .chat-message .message-content .text { word-wrap: break-word; } .chat-footer { display: flex; padding: 15px; padding-left: 50px; border-top: 1px solid #ddd; } .chat-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; margin-right: 10px; outline: none; } .chat-send-button { padding: 10px 20px; border: none; background-color: #0088cc; color: white; border-radius: 20px; cursor: pointer; outline: none; } .chat-send-button:hover { background-color: #007bb5; } </style> </head> <body> <div class="chat-container"> <div class="chat-header"> Веб чат </div> <div class="chat-messages" id="chat-messages"> <!-- Сообщения чата будут здесь --> </div> <div class="chat-footer"> <input type="text" class="chat-input" id="chat-input" placeholder="Введите сообщение..."> <button class="chat-send-button" onclick="sendMessage()">Отправить</button> </div> </div> <script> function sendMessage() { const chatMessages = document.getElementById('chat-messages'); const chatInput = document.getElementById('chat-input'); const message = chatInput.value; if (message.trim() !== '') { const messageElement = document.createElement('div'); messageElement.classList.add('chat-message'); const avatarElement = document.createElement('div'); avatarElement.classList.add('avatar'); const avatarImage = document.createElement('img'); avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album'; avatarElement.appendChild(avatarImage); const messageContentElement = document.createElement('div'); messageContentElement.classList.add('message-content'); const usernameElement = document.createElement('div'); usernameElement.classList.add('username'); usernameElement.textContent = 'Адель'; const textElement = document.createElement('div'); textElement.classList.add('text'); textElement.textContent = message; messageContentElement.appendChild(usernameElement); messageContentElement.appendChild(textElement); messageElement.appendChild(avatarElement); messageElement.appendChild(messageContentElement); chatMessages.appendChild(messageElement); chatInput.value = ''; chatMessages.scrollTop = chatMessages.scrollHeight; } } document.getElementById('chat-input').addEventListener('keydown', function(event) { if (event.key === 'Enter') { sendMessage(); } }); </script> </body> </html>