<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel chat-module">
<div class="panel-heading">
<ul>
<li>
<a>
<img src="https://tinyurl.com/y7jhrjx8" class="media-object" alt="...">
<span>Rizwan Akram<span>
</a>
</li>
<li>
<a><i class="fa fa-windows"></i></a>
</li>
<li>
<a><i class="fa fa-chrome"></i></a>
</li>
<li>
<a></a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-grey btn-sm active">Currents Chat</button>
<button type="button" class="btn btn-grey btn-sm">Past Chats (10)</button>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-8 leftSide">
<div class="white-card">
<div class="chat">
<ul>
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="https://tinyurl.com/y8jgcoyh" class="img-circle" alt="" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</li>
<li class="right clearfix">
<span class="chat-img pull-right">
<img src="https://tinyurl.com/y7jhrjx8" class="img-circle" alt="" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
<small class="pull-left text-muted"><i class="fa fa-clock-o fa-fw"></i>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</li>
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="https://tinyurl.com/y8jgcoyh" class="img-circle" alt="" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
<small class="pull-right text-muted"><i class="fa fa-clock-o fa-fw"></i>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</li>
<li class="right clearfix">
<span class="chat-img pull-right">
<img src="https://tinyurl.com/y7jhrjx8" class="img-circle" alt="" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
<small class="pull-left text-muted"><i class="fa fa-clock-o fa-fw"></i>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</li>
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="https://tinyurl.com/y8jgcoyh" class="img-circle" alt="" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</li>
<li class="right clearfix">
<span class="chat-img pull-right">
<img src="https://tinyurl.com/y7jhrjx8" class="img-circle" alt="" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jack Sparrow</strong>
<small class="pull-left text-muted"><i class="fa fa-clock-o fa-fw"></i>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="white-card _m-0">
<div class="chat-typing-box">
<textarea class="form-control" rows="9"></textarea>
</div>
</div>
</div>
<div class="col-xs-4 rightSide">
<div class="sidebar-scroll">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img src="https://tinyurl.com/y7jhrjx8" class="media-object" alt="...">
</a>
</div>
<div class="media-body">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Username" value="Rizwan Akram"></textarea>
</div>
<div>
<input type="text" class="form-control input-sm" placeholder="Email" Value="riz@email.com"></textarea>
</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Add phone number"></textarea>
</div>
<div class="form-group">
<textarea class="form-control input-sm" rows="5" placeholder="Add visitor notes"></textarea>
</div>
<div class="form-group">
<label>Tags</label>
<ul class="tags">
<li>
<a>Tag</a>
<i class="fa fa-close"></i>
</li>
<li>
<a>Tag</a>
<i class="fa fa-close"></i>
</li>
<li>
<a>Tag</a>
<i class="fa fa-close"></i>
</li>
<li>
<a>Tag</a>
<i class="fa fa-close"></i>
</li>
</ul>
</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-grey">Past visits</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-grey"><b>10</b> chats</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-grey">Time on site</button>
</div>
</div>
<div class="white-card">
<div class="form-group">
<div>Zendesk Support <small>(Set ticket assignee)</small></div>
</div>
<div class="form-group">
<label>Current ticket</label>
<div>-</div>
</div>
<hr>
<div class="form-group">
<label>Previous tickets</label>
<div>-</div>
</div>
<button class="btn btn-grey btn-sm">Create Ticket</button>
</div>
<div class="white-card">
<div class="form-group">
<label>Location</label>
<div>Pakistan</div>
</div>
<div class="form-group">
<label>Browser</label>
<div>Chrome 71.0.3578.98</div>
</div>
<div class="form-group">
<label>Platform</label>
<div>Windows 10</div>
</div>
<div class="form-group">
<label>Device</label>
<div>-</div>
</div>
<div class="form-group">
<label>IP Address</label>
<div>39.63.157.104</div>
</div>
<div class="form-group">
<label>Hostname</label>
<div>-</div>
</div>
<div class="form-group">
<label>User Agent</label>
<div>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
ul {
margin: 0;
padding: 0;
list-style: none;
}
a,a:hover,a:focus,a:active {
text-decoration: none;
}
._m-0 {
margin-bottom: 0 !important;
}
body {
padding: 2em;
height: 100%;
}
.chat-module .row {
margin: 0 -5px;
}
.chat-module .row [class*="col-"] {
padding: 0 5px;
}
.chat-module .white-card {
background: #FFF;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 10px;
border-radius: 3px;
}
.chat-module .btn,
.chat-module .form-control {
box-shadow: none !important;
}
.chat-module .form-control {
border-color: rgba(0, 0, 0, 0.1);
}
.chat-module .btn-sm {
font-size: 12px;
font-weight: 600;
}
.chat-module .btn-grey {
background: #f0f0f0;
color: #555;
border: 1px solid #e6e6e6;
}
.chat-module .btn-grey:hover,
.chat-module .btn-grey:focus {
background: #f8f9f9;
}
.chat-module .btn-grey:active,
.chat-module .btn-grey.active {
background: #e9ebed;
}
.chat-module .form-group {
margin-bottom: 10px;
}
.chat-module .btn-group {
margin-bottom: 10px;
}
.chat-module label {
font-size: 12px;
}
.chat-module.panel>.panel-heading {
color: #fff;
border-color: #03363d;
padding: 20px;
position: relative;
background: #03363d;
}
.chat-module.panel>.panel-heading ul img {
width: 25px;
height: 25px;
margin-right: 3px;
}
.chat-module.panel>.panel-heading ul li {
display: inline-block;
margin-right: 10px;
}
.chat-module.panel>.panel-heading ul li a {
color: #fff;
font-weight: 600;
font-size: 12px;
display: block;
cursor: pointer;
line-height: 25px;
}
.chat-module {
border: 0;
margin: auto;
background: #f0f0f0;
height: 100%;
}
.chat-module .panel .panel-body {
padding: 20px;
}
.chat-module .leftSide .chat {
overflow-y: scroll;
height: 100%;
max-height: 50%;
}
.chat-module .leftSide .chat ul {
margin-left: 10px;
margin-right: 25px;
}
.chat-module .leftSide .chat ul li {
display: block;
max-width: 100%;
width: auto;
padding: 10px;
margin-bottom: 25px;
font-size: 12px;
border-radius: 15px;
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.03), 0 3px 14px 2px rgba(0,0,0,0.03), 0 5px 5px -3px rgba(0,0,0,0.03);
}
.chat-module .leftSide .chat li:last-child {
border: 0;
}
.chat-module .leftSide .chat .chat-img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.chat-module .leftSide .chat .chat-img img {
width: 100%;
}
.chat-module .leftSide .chat .chat-body p {
margin: 0;
color: #777;
}
.chat-module .leftSide .chat li .text-muted {
position: relative;
top: -5px;
color: rgba(0, 0, 0, 0.3);
font-style: italic;
}
.chat-module .leftSide .chat li.left {
background: #fdfbf9;
}
.chat-module .leftSide .chat li.left .chat-body {
margin-left: 45px;
}
.chat-module .leftSide .chat li.left .chat-body p {
text-align: left;
}
.chat-module .leftSide .chat li.right {
background: #ebf9ef;
}
.chat-module .leftSide .chat li.right .chat-body {
margin-right: 45px;
}
.chat-module .leftSide .chat li.right .chat-body {
text-align: right;
}
.chat-module .leftSide .chat-typing-box .form-control {
border: 0;
box-shadow: none !important;
}
.sidebar-scroll {
max-height: 50%;
height: 100%;
overflow: scroll;
}
.chat-module .rightSide,
.chat-module .rightSide .btn {
font-size: 12px;
}
.chat-module .rightSide .media {
margin-bottom: 15px;
}
.chat-module .rightSide .media .media-left>a {
width: 65px;
height: 65px;
border: 1px solid rgba(0, 0, 0, 0.1);
display: block;
padding: 8px;
background: #fff;
border-radius: 3px;
}
.chat-module .rightSide .media .media-left>a img {
width: 100%;
}
.chat-module .rightSide .media .media-body {
width: 100%;
}
.chat-module .rightSide .media .form-group {
margin-bottom: 5px;
}
.chat-module .rightSide .tags li {
display: inline-block;
}
.chat-module .rightSide .tags li {
padding: 5px 8px;
background: #f7f7f7;
font-size: 11px;
border-radius: 3px;
font-weight: 600;
margin-bottom: 5px;
}
.chat-module .rightSide .tags li a {
color: rgba(0, 0, 0, 0.5);
cursor: default;
}
.chat-module .rightSide .tags li i {
color: #555;
font-size: 10px;
cursor: pointer;
}
.chat-module .rightSide .tags i:hover {
color: rgba(0, 0, 0, 1);
}
.chat-module .rightSide .btn-group .btn {
background: #fff;
padding: 1em 15px;
}
