Dual Mobile Chat Interface

A responsive single-page application that simulates two mobile chat screens side by side, perfect for demonstrating real-time messaging functionality.

Features

🎨 Modern Chat UI

• Two mobile-style chat interfaces side by side
• WhatsApp/Messenger-inspired design
• Beautiful gradient backgrounds and rounded corners
• Custom avatars for Alice (blue) and Bob (red)
• Professional typography and spacing

💬 Real-time Messaging

• Messages sent from one screen instantly appear on the other
• Automatic message type detection (sent vs received)
• Realistic message delivery delays (500-1500ms)
• Message delivery status indicators (✓✓)

⚡ Interactive Features

• Typing Indicators: See when the other person is typing
• Timestamps: Every message shows the current time
• Smooth Animations: Messages appear with subtle slide-in effects
• Auto-scroll: Chat automatically scrolls to show new messages
• Enter to Send: Press Enter or click the send button

📱 Responsive Design

• Works perfectly on desktop/tablet for demos
• Adapts to mobile screens with stacked layout
• Touch-friendly interface elements
• Optimized for various screen sizes

🎯 Smart Interface

• Send buttons become active when text is entered
• Welcome messages disappear after first interaction
• Input validation and HTML escaping for security
• Keyboard shortcuts (Ctrl/Cmd + 1/2 to focus chats)

How to Use

1. Open index.html in any modern web browser
2. Type a message in either Alice's or Bob's chat input
3. Press Enter or click the send button
4. Watch the magic as your message appears as "sent" on one side and "received" on the other
5. Try typing to see the typing indicator in action

Demo Scenario

The interface includes an automatic demo that starts 3 seconds after loading:

• Alice sends: "Hey Bob! 👋"
• Bob responds: "Hi Alice! How are you?"

Technical Details

Built With

• HTML5 - Semantic structure with accessibility features
• CSS3 - Modern styling with Flexbox, animations, and gradients
• Vanilla JavaScript - No frameworks, pure ES6+ functionality

Key Components

• Responsive Flexbox layout
• CSS animations and transitions
• Real-time DOM manipulation
• Event handling for keyboard and mouse
• Realistic timing simulation

Browser Support

• Chrome/Edge 70+
• Firefox 65+
• Safari 12+
• Mobile browsers (iOS Safari, Chrome Mobile)

Customization

You can easily customize:

• Colors: Modify the CSS gradient variables
• Avatars: Replace the SVG data URIs with your own images
• Names: Change "Alice" and "Bob" in the HTML and JavaScript
• Timing: Adjust delays in the sendMessage() function
• Sounds: Uncomment the playMessageSound() calls for audio feedback

File Structure

├── index.html          # Main HTML structure
├── style.css           # Complete styling and animations
├── script.js           # Chat functionality and interactions
└── README.md           # This file

Perfect For

• Product Demos: Showcase chat functionality
• Prototyping: Test chat UI/UX concepts
• Education: Learn real-time messaging concepts
• Portfolio: Demonstrate front-end skills

---

Start chatting and experience the smooth, realistic messaging simulation! 🚀