Professional Social Media Messenger - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Social Media Messenger</title> <style> body, html { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background-color: #f0f2f5; height: 100%; display: flex; justify-content: center; align-items: center; } .messenger-container { width: 100%; max-width: 500px; height: 80vh; background: #fff; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); overflow: hidden; display: flex; flex-direction: column; } .messenger-header { background: linear-gradient(45deg, #6a11cb, #2575fc); color: #fff; padding: 20px; text-align: center; font-size: 1.5em; } .messenger-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; background: #f0f2f5; } .message { display: flex; align-items: center; margin-bottom: 20px; animation: fadeIn 0.5s; } .message.sent { justify-content: flex-end; } .message .avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .message.sent .avatar { margin-left: 10px; margin-right: 0; } .message .content { max-width: 70%; background: #e4e6eb; padding: 10px 15px; border-radius: 20px; position: relative; font-size: 0.9em; } .message.sent .content { background: #2575fc; color: #fff; } .messenger-footer { padding: 10px; display: flex; align-items: center; background: #fff; border-top: 1px solid #e0e0e0; } .messenger-footer input { flex: 1; border: none; padding: 10px; border-radius: 20px; margin-right: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .messenger-footer button { background: linear-gradient(45deg, #6a11cb, #2575fc); border: none; padding: 10px 20px; color: #fff; border-radius: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; } .messenger-footer button:hover { background: linear-gradient(45deg, #2575fc, #6a11cb); } .messenger-footer button i { margin-left: 5px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body> <div class="messenger-container"> <div class="messenger-header"> My Messenger </div> <div class="messenger-body" id="messageList"> <!-- Messages will be appended here dynamically --> </div> <div class="messenger-footer"> <input type="text" id="messageInput" placeholder="Type a message..."> <button onclick="sendMessage()"> Send <i class="fas fa-paper-plane"></i> </button> </div> </div> <script> const messageList = document.getElementById('messageList'); const messageInput = document.getElementById('messageInput'); function sendMessage() { const messageText = messageInput.value.trim(); if (messageText) { const messageElement = document.createElement('div'); messageElement.classList.add('message', 'sent'); messageElement.innerHTML = ` <div class="avatar"><img src="https://via.placeholder.com/40" alt="User Avatar"></div> <div class="content">${messageText}</div> `; messageList.appendChild(messageElement); messageInput.value = ''; messageList.scrollTop = messageList.scrollHeight; } } // Initialize FontAwesome const fontAwesome = document.createElement('script'); fontAwesome.src = 'https://kit.fontawesome.com/a076d05399.js'; fontAwesome.crossOrigin = 'anonymous'; document.head.appendChild(fontAwesome); </script> </body> </html>