<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body style="background-color: #73264d" >
<div class="container">
<div class="page-header">
<h1 id="timeline" font-family="verdana" style="color:white">Dashboard</h1>
</div>
<ul class="timeline">
<li class="timeline-inverted">
<div class="timeline-badge btn-success">
<span class="timeline-week">Week 1</span>
</div>
<div class="timeline-panel">
<form role="form" class="form-vertical">
<div class="timeline-heading">
<div class="form-group">
<label style="color: blue" for="title">Tasks</label>
<p style="color: red">to be completed by
<small class="text-muted"><i
class=" glyphicon glyphicon-time" ></i> 1/06/2017</small>
</p>
</div>
</div>
<div class="timeline-body ">
<ul style="list-style-type:square">
<li>Connect with batch and send intro mailer</li>
<li>Document verification</li>
<li>Orientation session</li>
</ul>
</div>
<br /> <br />
<div class="timeline-footer">
<div class="panel panel-primary">
<div class="panel-heading" id="accordion">
<span class="label label-danger"></span> <span
class="glyphicon glyphicon-comment"></span> HR Buddy Comments:
<div class="btn-group pull-right">
<a type="button" class="btn btn-default btn-xs"
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne"> <span
class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div>
<label style="color: blue" class="form-group">No. of Floor Walk:</label>
<input type="number" class="mac" min=0></div>
<div ><label class="form-group" style="color: blue">Classes/Sections covered:</label>
<input type="number" class="mac" min=0></div>
<div class="input_label user"><label class="form-group" style="color: blue">No. of Trainees covered:</label>
<input type="number" class="mac" min=0></div><br>
<div class="panel-footer">
<div class="input-group">
<textarea id="btn-input"
class="form-control input-sm"
placeholder="Type your comments here..." ></textarea> <span
class="input-group-btn">
<button class="btn btn-primary" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</li>
<li class="timeline">
<div class="timeline-badge btn-success">
<span class="timeline-week">Week 2</span>
</div>
<div class="timeline-panel">
<form role="form" class="form-vertical">
<div class="timeline-heading">
<div class="form-group">
<label style="color: blue" for="title">Tasks</label>
<p style="color: red">to be completed by
<small class="text-muted"><i
class=" glyphicon glyphicon-time" ></i> 15/07/2017</small>
</p>
</div>
</div>
<div class="timeline-body ">
<ul style="list-style-type:square">
<li>Connect with batch and send intro mailer</li>
<li>Document verification</li>
<li>Orientation session</li>
</ul>
</div>
<br /> <br />
<div class="timeline-footer">
<div class="panel panel-primary">
<div class="panel-heading" id="accordion">
<span class="label label-danger"></span> <span
class="glyphicon glyphicon-comment"></span> HR Buddy Comments:
<div class="btn-group pull-right">
<a type="button" class="btn btn-default btn-xs"
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne"> <span
class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div>
<label style="color: blue" class="form-group">No. of Floor Walk:</label>
<input type="number" class="mac" min=0></div>
<div ><label class="form-group" style="color: blue">Classes/Sections covered:</label>
<input type="number" class="mac" min=0></div>
<div class="input_label user"><label class="form-group" style="color: blue">No. of Trainees covered:</label>
<input type="number" class="mac" min=0></div><br>
<div class="panel-footer">
<div class="input-group">
<textarea id="btn-input"
class="form-control input-sm"
placeholder="Type your comments here..." ></textarea> <span
class="input-group-btn">
<button class="btn btn-primary" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge btn-success">
<span class="timeline-week">Week 3</span>
</div>
<div class="timeline-panel">
<form role="form" class="form-vertical">
<div class="timeline-heading">
<div class="form-group">
<label style="color: blue" for="title">Tasks</label>
<p style="color: red">to be completed by
<small class="text-muted"><i
class=" glyphicon glyphicon-time" ></i> 11/09/2014</small>
</p>
</div>
</div>
<div class="timeline-body ">
<ul style="list-style-type:square">
<li>Connect with batch and send intro mailer</li>
<li>Document verification</li>
<li>Orientation session</li>
</ul>
</div>
<br /> <br />
<div class="timeline-footer">
<div class="panel panel-primary">
<div class="panel-heading" id="accordion">
<span class="label label-danger"></span> <span
class="glyphicon glyphicon-comment"></span> HR Buddy Comments:
<div class="btn-group pull-right">
<a type="button" class="btn btn-default btn-xs"
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne"> <span
class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div>
<label style="color: blue" class="form-group">No. of Floor Walk:</label>
<input type="number" class="mac" min=0></div>
<div ><label class="form-group" style="color: blue">Classes/Sections covered:</label>
<input type="number" class="mac" min=0></div>
<div class="input_label user"><label class="form-group" style="color: blue">No. of Trainees covered:</label>
<input type="number" class="mac" min=0></div><br>
<div class="panel-footer">
<div class="input-group">
<textarea id="btn-input"
class="form-control input-sm"
placeholder="Type your comments here..." ></textarea> <span
class="input-group-btn">
<button class="btn btn-primary" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</li>
<li class="timeline">
<div class="timeline-badge btn-success">
<span class="timeline-week">Week 4</span>
</div>
<div class="timeline-panel">
<form role="form" class="form-vertical">
<div class="timeline-heading">
<div class="form-group">
<label style="color: blue" for="title">Tasks</label>
<p style="color: red">to be completed by
<small class="text-muted"><i
class=" glyphicon glyphicon-time" ></i> 11/09/2014</small>
</p>
</div>
</div>
<div class="timeline-body ">
<ul style="list-style-type:square">
<li>Connect with batch and send intro mailer</li>
<li>Document verification</li>
<li>Orientation session</li>
</ul>
</div>
<br /> <br />
<div class="timeline-footer">
<div class="panel panel-primary">
<div class="panel-heading" id="accordion">
<span class="label label-danger"></span> <span
class="glyphicon glyphicon-comment"></span> HR Buddy Comments:
<div class="btn-group pull-right">
<a type="button" class="btn btn-default btn-xs"
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne"> <span
class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div>
<label style="color: blue" class="form-group">No. of Floor Walk:</label>
<input type="number" class="mac" min=0></div>
<div ><label class="form-group" style="color: blue">Classes/Sections covered:</label>
<input type="number" class="mac" min=0></div>
<div class="input_label user"><label class="form-group" style="color: blue">No. of Trainees covered:</label>
<input type="number" class="mac" min=0></div><br>
<div class="panel-footer">
<div class="input-group">
<textarea id="btn-input"
class="form-control input-sm"
placeholder="Type your comments here..." ></textarea> <span
class="input-group-btn">
<button class="btn btn-primary" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
</body>
</html>
/* ==========================================================================
Author's custom styles
========================================================================== */
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: calc(50% - 50px);
width: -moz-calc(50% - 50px);
width: -webkit-calc(50% - 50px);
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 30px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
background-color: #eeeeee;
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
width: 50px;
height: 50px;
font-size: 1.1em;
text-align: center;
position: absolute;
top: 20px;
left: 50%;
margin-left: -25px;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li > .timeline-icon {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li > .timeline-badge > span.timeline-day {
font-size: 1.4em;
}
.timeline > li > .timeline-badge > span.timeline-month {
font-size: .7em;
position: relative;
top: -10px;
}
.timeline > li > .timeline-badge > span.timeline-week {
font-size:0.84em;
position: relative;
top: 10px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
@media only screen and (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge,
ul.timeline > li > .timeline-icon {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
.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
{
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;
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.mac {
display: block;
border: none;
border-radius: 20px;
padding: 5px 8px;
color: #333;
box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, 0.1);
}
.mac:focus {
outline: none;
box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 5px 1px #51CBEE;
}
