<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- Page header -->
<div class="page-header">
<h2>Transaction <small>Type: Delivery <code>HKG to MNL (09/28/2017 9:00AM to 09/28/2017 11:00AM)</code></small></h2>
</div>
<!-- /Page header -->
<!-- Timeline -->
<div class="timeline">
<!-- Line component -->
<div class="line text-muted"></div>
<!-- Separator -->
<div class="separator text-muted">
<time>September 22, 2017</time>
</div>
<!-- /Separator -->
<!-- Panel -->
<article class="panel panel-success">
<!-- Icon -->
<div class="panel-heading icon">
<i class="glyphicon glyphicon-plus"></i>
</div>
<!-- /Icon -->
<!-- Heading -->
<div class="panel-heading">
<h2 class="panel-title">Reservation Request</h2>
</div>
<!-- /Heading -->
<!-- Body -->
<div class="panel-body">
<code>Sender1234</code> reserved a slot
</div>
<!-- /Body -->
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Weight: 3kg</li>
<li class="list-group-item">Description: Package from Amazon containing 3 shirts and 1 pair of pants</li>
<li class="list-group-item"><img class="img-responsive img-rounded" src="//placehold.it/350x150" /></li>
<li class="list-group-item">Insured: Yes</li>
<li class="list-group-item">Declared Value: 100 USD</li>
<li class="list-group-item"><button type="button" class="btn btn-success">Accept</button><button type="button" class="btn btn-danger">Reject</button></li>
</ul>
</article>
<!-- Panel -->
<article class="panel panel-primary">
<!-- Icon -->
<div class="panel-heading icon">
<i class="glyphicon glyphicon-plus"></i>
</div>
<!-- /Icon -->
<!-- Heading -->
<div class="panel-heading">
<h2 class="panel-title">Communication</h2>
</div>
<!-- /Heading -->
<!-- Body -->
<div class="panel-body-chat">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Traveler4567</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>12 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
<strong class="pull-right primary-font">Sender1234</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Traveler4567</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>14 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
<strong class="pull-right primary-font">Sender1234</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
</ul>
</div>
<!-- /Body -->
<!-- Footer -->
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send</button>
</span>
</div>
</div>
<!-- /Footer -->
</article>
<!-- /Panel -->
<!-- Separator -->
<div class="separator text-muted">
<time>September 23, 2017</time>
</div>
<!-- /Separator -->
<article class="panel panel-warning">
<!-- Icon -->
<div class="panel-heading icon">
<i class="glyphicon glyphicon-plus"></i>
</div>
<!-- /Icon -->
<!-- Heading -->
<div class="panel-heading">
<h2 class="panel-title">Sender to Traveler Confirmation</h2>
</div>
<!-- /Heading -->
<!-- Body -->
<div class="panel-body">
<code>Sender1234</code> sent the package
</div>
<!-- /Body -->
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Weight: 3kg</li>
<li class="list-group-item">Description: Package from Amazon containing 3 shirts and 1 pair of pants</li>
<li class="list-group-item"><img class="img-responsive img-rounded" src="//placehold.it/350x150" /></li>
<li class="list-group-item"><label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea><button type="button" class="btn btn-success">Confirm Package Received by Traveler</button></li>
</ul>
</article>
<!-- Separator -->
<div class="separator text-muted">
<time>September 28, 2017</time>
</div>
<!-- /Separator -->
<!-- Panel -->
<article class="panel panel-info panel-outline">
<!-- Icon -->
<div class="panel-heading icon">
<i class="glyphicon glyphicon-info-sign"></i>
</div>
<!-- /Icon -->
<!-- Body -->
<div class="panel-body">
Flight: <code>HKG to MNL (09/28/2017 9:00AM to 09/28/2017 11:00AM)</code>
</div>
<!-- /Body -->
</article>
<!-- /Panel -->
<!-- Separator -->
<div class="separator text-muted">
<time>September 28, 2017</time>
</div>
<!-- /Separator -->
<article class="panel panel-warning">
<!-- Icon -->
<div class="panel-heading icon">
<i class="glyphicon glyphicon-plus"></i>
</div>
<!-- /Icon -->
<!-- Heading -->
<div class="panel-heading">
<h2 class="panel-title">Traveler to Recipient Confirmation</h2>
</div>
<!-- /Heading -->
<!-- Body -->
<div class="panel-body">
<code>Traveler4567</code> has delivered the package
</div>
<!-- /Body -->
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Weight: 3kg</li>
<li class="list-group-item">Description: Package from Amazon containing 3 shirts and 1 pair of pants</li>
<li class="list-group-item"><img class="img-responsive img-rounded" src="//placehold.it/350x150" /></li>
<li class="list-group-item"><label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea><button type="button" class="btn btn-success">Confirm Package Received by Recipient</button></li>
</ul>
</article>
<!-- Panel -->
<article class="panel panel-info panel-outline">
<!-- Icon -->
<div class="panel-heading icon">
<i class="glyphicon glyphicon-info-sign"></i>
</div>
<!-- /Icon -->
<!-- Body -->
<div class="panel-body">
Payout to Traveler Confirmed! Profit! :)
</div>
<!-- /Body -->
</article>
<!-- /Panel -->
</div>
<!-- /Timeline -->
</div>
</div>
.timeline {
position: relative;
padding: 21px 0px 10px;
margin-top: 4px;
margin-bottom: 30px;
}
.timeline .line {
position: absolute;
width: 4px;
display: block;
background: currentColor;
top: 0px;
bottom: 0px;
margin-left: 30px;
}
.timeline .separator {
border-top: 1px solid currentColor;
padding: 5px;
padding-left: 40px;
font-style: italic;
font-size: .9em;
margin-left: 30px;
}
.timeline .line::before { top: -4px; }
.timeline .line::after { bottom: -4px; }
.timeline .line::before,
.timeline .line::after {
content: '';
position: absolute;
left: -4px;
width: 12px;
height: 12px;
display: block;
border-radius: 50%;
background: currentColor;
}
.timeline .panel {
position: relative;
margin: 10px 0px 21px 70px;
clear: both;
}
.timeline .panel::before {
position: absolute;
display: block;
top: 8px;
left: -24px;
content: '';
width: 0px;
height: 0px;
border: inherit;
border-width: 12px;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
.timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; }
.timeline .panel .panel-heading.icon {
position: absolute;
left: -59px;
display: block;
width: 40px;
height: 40px;
padding: 0px;
border-radius: 50%;
text-align: center;
float: left;
}
.timeline .panel-outline {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.timeline .panel-outline .panel-body {
padding: 10px 0px;
}
.timeline .panel-outline .panel-heading:not(.icon),
.timeline .panel-outline .panel-footer {
display: none;
}
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.panel-body-chat
{
overflow-y: scroll;
height: 250px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
