<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- BootStrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link href="/chat.css" rel="stylesheet">
<title>Chat App</title>
</head>
<body>
<div class="container">
<!-- Page header start -->
<div class="page-title">
<div class="row">
<div class="column">
<h5 class="title">Chat App</h5>
</div>
<div class="column"> </div>
</div>
</div>
<!-- Page header end -->
<!-- Content wrapper start -->
<div class="content-wrapper">
<!-- Row start -->
<div class="row">
<div class="column">
<div class="card">
<!-- Row start -->
<div class="row no-gutters">
<div class="column">
<div class="users-container">
<div class="chat-search-box">
<div class="input-group">
<input class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="button" class="btn btn-info">
<!-- <i class="fa fa-search"></i> -->
<i class="bi bi-search"></i>
</button>
</div>
</div>
</div>
<ul class="users">
<li class="person" data-chat="person1">
<div class="user">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<span class="status busy"></span>
</div>
<p class="name-time">
<span class="name">Rino Yaseen</span>
<span class="time">24/6/2024</span>
</p>
</li>
<li class="person" data-chat="person1">
<div class="user">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<span class="status offline"></span>
</div>
<p class="name-time">
<span class="name">Rino Yaseen</span>
<span class="time">24/6/2024</span>
</p>
</li>
<li class="person active-user" data-chat="person2">
<div class="user">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="Retail Admin">
<span class="status away"></span>
</div>
<p class="name-time">
<span class="name">CodeZillaYe</span>
<span class="time">20/6/2024</span>
</p>
</li>
<li class="person" data-chat="person3">
<div class="user">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<span class="status busy"></span>
</div>
<p class="name-time">
<span class="name">Nana Haleem</span>
<span class="time">20/6/2024</span>
</p>
</li>
<li class="person" data-chat="person4">
<div class="user">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<span class="status offline"></span>
</div>
<p class="name-time">
<span class="name">Rolla ALsaiq</span>
<span class="time">10/1/2024</span>
</p>
</li>
<li class="person" data-chat="person5">
<div class="user">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<span class="status away"></span>
</div>
<p class="name-time">
<span class="name">Nadeem Bitar</span>
<span class="time">05/5/2024</span>
</p>
</li>
</ul>
</div>
</div>
<div class="column">
<div class="selected-user">
<span>To: <span class="name">CodeZillaYe</span></span>
</div>
<div class="chat-container">
<ul class="chat-box chatContainerScroll">
<li class="chat-left">
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="Retail Admin">
<div class="chat-name">CodeZillaYe</div>
</div>
<div class="chat-text">Hello, I'm CodeZillaYe.
<br>How can I assist you today?</div>
<div class="chat-hour">12:00 AM <span class="fa fa-check-circle"></span></div>
</li>
<li class="chat-right">
<div class="chat-hour">12:01 AM <span class="fa fa-check-circle"></span></div>
<div class="chat-text">Hi, CodeZillaYe.
<br>I need more information about your Developer Plan.</div>
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<div class="chat-name">Rino</div>
</div>
</li>
<li class="chat-left">
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="Retail Admin">
<div class="chat-name">CodeZillaYe</div>
</div>
<div class="chat-text">Sure, the Developer Plan offers advanced features, priority support, and unlimited projects.
<br>Is there a specific feature you're interested in?</div>
<div class="chat-hour">08:57 <span class="fa fa-check-circle"></span></div>
</li>
<li class="chat-right">
<div class="chat-hour">12:30 AM <span class="fa fa-check-circle"></span></div>
<div class="chat-text">That sounds great!
<br>Can you tell me about the pricing and any discounts available?</div>
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<div class="chat-name">Rino</div>
</div>
</li>
<li class="chat-left">
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="Retail Admin">
<div class="chat-name">CodeZillaYe</div>
</div>
<div class="chat-text">The Developer Plan is priced at $49.99 per month.
<br>We also offer a 10% discount for annual subscriptions.</div>
<div class="chat-hour">12:30 PM<span class="fa fa-check-circle"></span></div>
</li>
<li class="chat-right">
<div class="chat-hour">12:31 PM <span class="fa fa-check-circle"></span></div>
<div class="chat-text">That's good to know!
<br>How can I subscribe?</div>
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/avtar.jpg" alt="Retail Admin">
<div class="chat-name">Rino</div>
</div>
</li>
<li class="chat-left">
<div class="chat-avatar">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="Retail Admin">
<div class="chat-name">CodeZillaYe</div>
</div>
<div class="chat-text">You can subscribe directly through our website.
<br>Just go to the Pricing page and select the Developer Plan.</div>
<div class="chat-hour">09:05 <span class="fa fa-check-circle"></span></div>
</li>
</ul>
<div class="form-group mt-3 mb-0">
<textarea class="form-control" rows="3" placeholder="Type your message here..."></textarea>
</div>
</div>
</div>
</div>
<!-- Row end -->
</div>
</div>
</div>
<!-- Row end -->
</div>
<!-- Content wrapper end -->
</div>
</body>
</html>
body {
margin-top: 20px;
font-family: Arial, sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
padding: 15px 0;
}
.page-title .row {
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-size: 24px;
}
.card {
background: #009688b8;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
}
.row {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.row > .column {
flex: 1;
padding: 10px;
}
.no-gutters {
display: flex;
flex-wrap: wrap;
}
.users-container {
width: 100%;
}
.chat-search-box {
padding: 15px;
border-bottom: 1px solid #f7f7f7;
}
.chat-search-box .input-group {
display: flex;
align-items: center;
}
.chat-search-box .input-group input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.chat-search-box .input-group .input-group-btn button {
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px;
margin-left: 5px;
}
.users {
list-style: none;
padding: 0;
margin: 0;
}
.users .person {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #f7f7f7;
cursor: pointer;
}
.users .person .user {
margin-right: 10px;
}
.users .person .user img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.users .person .user .status {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
right: 0;
bottom: 0;
}
.users .person .name-time {
flex: 1;
}
.users .person .name-time .name {
font-weight: bold;
}
.users .person .name-time .time {
color: #f9e007;
font-size: 12px;
}
.users .person.active-user {
background: #f7f7f7;
}
.selected-user {
padding: 15px;
border-bottom: 1px solid #f7f7f7;
}
.selected-user .name {
font-weight: bold;
}
.chat-container {
padding: 20px;
height: 400px;
overflow-y: scroll;
}
.chat-box {
list-style: none;
padding: 0;
margin: 0;
}
.chat-box .chat-left, .chat-box .chat-right {
display: flex;
margin-bottom: 20px;
}
.chat-box .chat-left {
justify-content: flex-start;
}
.chat-box .chat-right {
justify-content: flex-end;
}
.chat-box .chat-left .chat-avatar, .chat-box .chat-right .chat-avatar {
margin-right: 10px;
}
.chat-box .chat-left .chat-avatar img, .chat-box .chat-right .chat-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.chat-box .chat-left .chat-name, .chat-box .chat-right .chat-name {
font-weight: bold;
}
.chat-box .chat-left .chat-text, .chat-box .chat-right .chat-text {
background: #f9e007;
border-radius: 4px;
padding: 10px;
max-width: 70%;
}
.chat-box .chat-right .chat-text {
background: #007bff;
color: #fff;
}
.chat-box .chat-left .chat-hour, .chat-box .chat-right .chat-hour {
font-size: 12px;
color: #999;
margin-top: 5px;
}
.form-group {
padding: 15px;
border-top: 1px solid #f7f7f7;
}
.form-group textarea {
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
}