andlt;!DOCTYPE htmlandgt;
andlt;html lang=andquot;enandquot;andgt;
andlt;headandgt;
andlt;meta charset=andquot;UTF-8andquot;andgt;
andlt;meta name=andquot;viewportandquot; content=andquot;width=device-width, initial-scale=1.0andquot;andgt;
andlt;titleandgt;WhatsApp UIandlt;/titleandgt;
andlt;!-- Bootstrap CSS --andgt;
andlt;link href=andquot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.cssandquot; rel=andquot;stylesheetandquot;andgt;
andlt;styleandgt;
andnbsp; andnbsp; /* Custom styles */
andnbsp; andnbsp; .chat-container {
andnbsp; andnbsp; andnbsp; andnbsp; display: flex;
andnbsp; andnbsp; andnbsp; andnbsp; height: 100vh;
andnbsp; andnbsp; }
andnbsp; andnbsp; .sidebar {
andnbsp; andnbsp; andnbsp; andnbsp; width: 250px;
andnbsp; andnbsp; andnbsp; andnbsp; background-color: #f8f9fa;
andnbsp; andnbsp; andnbsp; andnbsp; border-right: 1px solid #ccc;
andnbsp; andnbsp; }
andnbsp; andnbsp; .chat-area {
andnbsp; andnbsp; andnbsp; andnbsp; flex: 1;
andnbsp; andnbsp; andnbsp; andnbsp; padding: 20px;
andnbsp; andnbsp; }
andnbsp; andnbsp; .message-input {
andnbsp; andnbsp; andnbsp; andnbsp; position: fixed;
andnbsp; andnbsp; andnbsp; andnbsp; bottom: 0;
andnbsp; andnbsp; andnbsp; andnbsp; left: 0;
andnbsp; andnbsp; andnbsp; andnbsp; width: 100%;
andnbsp; andnbsp; andnbsp; andnbsp; background-color: #fff;
andnbsp; andnbsp; andnbsp; andnbsp; border-top: 1px solid #ccc;
andnbsp; andnbsp; andnbsp; andnbsp; padding: 10px 20px;
andnbsp; andnbsp; }
andlt;/styleandgt;
andlt;/headandgt;
andlt;bodyandgt;
andlt;div class=andquot;container-fluidandquot;andgt;
andnbsp; andnbsp; andlt;div class=andquot;row chat-containerandquot;andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;!-- Sidebar --andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;div class=andquot;col-3 sidebarandquot;andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andlt;h4andgt;Chatsandlt;/h4andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andlt;!-- Sidebar content --andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;/divandgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;!-- Chat Area --andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;div class=andquot;col-9 chat-areaandquot;andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andnbsp; andlt;!-- Chat messages --andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;/divandgt;
andnbsp; andnbsp; andlt;/divandgt;
andnbsp; andnbsp; andlt;!-- Message Input --andgt;
andnbsp; andnbsp; andlt;div class=andquot;message-inputandquot;andgt;
andnbsp; andnbsp; andnbsp; andnbsp; andlt;input type=andquot;textandquot; class=andquot;form-controlandquot; placeholder=andquot;Type your message...andquot;andgt;
andnbsp; andnbsp; andlt;/divandgt;
andlt;/divandgt;
andlt;!-- Bootstrap JS and dependencies --andgt;
andlt;script src=andquot;https://code.jquery.com/jquery-3.5.1.slim.min.jsandquot;andgt;andlt;/scriptandgt;
andlt;script src=andquot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.jsandquot;andgt;andlt;/scriptandgt;
andlt;script src=andquot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.jsandquot;andgt;andlt;/scriptandgt;
andlt;/bodyandgt;
andlt;/htmlandgt;
