WhatsApp Clone

Okay, I can help you set up the basic structure for a WhatsApp-like web application UI using HTML, CSS, and JavaScript. This will be a simplified visual representation. WhatsApp Clone

Alice

Okay, see you then!

10:30 AM

Bob

Sounds good.

Yesterday

Charlie

Photo

Friday

Hey! How are you? 10:28 AM

I'm good, thanks! Ready for the meeting? 10:29 AM

Yep, almost ready. 10:29 AM

Okay, see you then! 10:30 AM

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #e5ddd5; /* WhatsApp background pattern color */ display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; /* Prevent scrolling on body */ } .app-container { display: flex; width: 95%; max-width: 1300px; /* Limit max width */ height: 95vh; /* Limit height */ background-color: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2); overflow: hidden; /* Prevent scrolling on container */ } /* Sidebar */ .sidebar { width: 30%; min-width: 250px; /* Minimum width for sidebar */ border-right: 1px solid #ddd; display: flex; flex-direction: column; background-color: #fff; } .sidebar .header { padding: 10px 15px; background-color: #ededed; display: flex; align-items: center; border-bottom: 1px solid #ddd; } .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; object-fit: cover; /* Ensure avatar images cover the area */ } .search-container { padding: 8px 12px; background-color: #f6f6f6; border-bottom: 1px solid #eee; } .search-container input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 18px; background-color: #fff; box-sizing: border-box; /* Include padding and border in width */ font-size: 14px; } .contact-list { flex-grow: 1; overflow-y: auto; /* Allow scrolling for contacts */ } .contact { display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px solid #f2f2f2; cursor: pointer; position: relative; /* For positioning time */ } .contact:hover { background-color: #f5f5f5; } .contact.active { background-color: #ebebeb; } .contact .avatar { width: 50px; height: 50px; } .contact-info { flex-grow: 1; margin-right: 10px; /* Space before time */ overflow: hidden; /* Prevent text overflow */ } .contact-name { font-weight: 500; margin-bottom: 3px; white-space: nowrap; /* Prevent name wrapping */ overflow: hidden; text-overflow: ellipsis; } .last-message { font-size: 14px; color: #666; white-space: nowrap; /* Prevent message wrapping */ overflow: hidden; text-overflow: ellipsis; } .contact-time { font-size: 12px; color: #999; white-space: nowrap; /* Prevent time wrapping */ position: absolute; top: 12px; right: 15px; } /* Chat Area */ .chat-area { width: 70%; display: flex; flex-direction: column; background-color: #e5ddd5; /* Default chat background */ /* Add a background image like WhatsApp Web */ background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); } .chat-area .header { padding: 10px 15px; background-color: #ededed; display: flex; align-items: center; border-bottom: 1px solid #ddd; } .chat-area .header .contact-name { font-weight: 500; } .message-list { flex-grow: 1; padding: 20px 30px; overflow-y: auto; /* Allow scrolling for messages */ display: flex; flex-direction: column; } .message { max-width: 65%; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; position: relative; /* For timestamp */ word-wrap: break-word; /* Wrap long words */ } .message span { /* Message text */ display: block; /* Ensure timestamp appears below */ margin-bottom: 3px; /* Space between text and timestamp */ } .message .timestamp { font-size: 11px; color: #999; text-align: right; display: block; /* Ensure timestamp is on its own line */ margin-top: 4px; /* Space above timestamp */ } .message.sent { background-color: #dcf8c6; /* WhatsApp sent message color */ align-self: flex-end; margin-left: auto; /* Push to right */ } .message.sent .timestamp { color: #6aa35b; /* Slightly darker green for timestamp */ } .message.received { background-color: #fff; align-self: flex-start; margin-right: auto; /* Push to left */ } .message-input-container { display: flex; padding: 10px 20px; background-color: #f0f0f0; border-top: 1px solid #ddd; align-items: center; } .message-input-container input { flex-grow: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 20px; margin-right: 10px; font-size: 15px; } .message-input-container button { padding: 10px 15px; background-color: #075e54; /* WhatsApp green */ color: white; border: none; border-radius: 20px; cursor: pointer; font-size: 15px; } .message-input-container button:hover { background-color: #128c7e; /* Darker WhatsApp green */ } /* Scrollbar styling (optional, for a better look) */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } // Basic JavaScript for potential future interactions console.log("WhatsApp UI Clone script loaded."); // Example: Add click listeners to contacts (optional) document.querySelectorAll('.contact').forEach(contact => { contact.addEventListener('click', () => { // Remove active class from currently active contact const currentActive = document.querySelector('.contact.active'); if (currentActive) { currentActive.classList.remove('active'); } // Add active class to clicked contact contact.classList.add('active'); // --- Placeholder for loading chat --- // In a real app, you would fetch and display messages for the selected contact. const contactName = contact.querySelector('.contact-name').textContent; const contactAvatarSrc = contact.querySelector('.avatar').src; // Update chat area header const chatHeader = document.querySelector('.chat-area .header'); chatHeader.querySelector('.avatar').src = contactAvatarSrc; chatHeader.querySelector('.contact-name').textContent = contactName; // Clear existing messages (replace with actual message loading) const messageList = document.querySelector('.message-list'); messageList.innerHTML = `

Chat with ${contactName} loaded. Now

`; console.log(`Switched to chat with ${contactName}`); // --- End Placeholder --- }); }); // Example: Handle sending a message (client-side only) const sendButton = document.querySelector('.message-input-container button'); const messageInput = document.querySelector('.message-input-container input'); const messageList = document.querySelector('.message-list'); function sendMessage() { const text = messageInput.value.trim(); if (text) { const newMessage = document.createElement('div'); newMessage.classList.add('message', 'sent'); const textSpan = document.createElement('span'); textSpan.textContent = text; const timestampSpan = document.createElement('span'); timestampSpan.classList.add('timestamp'); const now = new Date(); timestampSpan.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); newMessage.appendChild(textSpan); newMessage.appendChild(timestampSpan); messageList.appendChild(newMessage); messageInput.value = ''; // Clear input messageList.scrollTop = messageList.scrollHeight; // Scroll to bottom } } sendButton.addEventListener('click', sendMessage); // Allow sending with Enter key messageInput.addEventListener('keypress', (event) => { if (event.key === 'Enter') { sendMessage(); } }); This sets up the HTML structure, applies CSS for styling similar to WhatsApp Web, and includes basic JavaScript to handle switching between contacts (visually only) and adding messages to the current chat view (client-side only, messages are not actually sent or stored).