<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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Avinashullal/pen/WELyRr?depth=everything&order=popularity&page=50&q=chat&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="cp-pen-styles">* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f0f0f0;
line-height: normal;
font-size: 16px;
overflow-Y: scroll;
font-family: 'Roboto Condensed', "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased !important;
}
a, a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
a:active {
color: #fff !important;
}
.sm-img {
height: 30px !important;
width: 30px !important;
}
::-moz-selection {
background: #5af;
color: #fff;
text-shadow: none;
}
::selection {
background: #5af;
color: #fff;
text-shadow: none;
}
.hh-page-title {
margin-bottom: 20px;
text-shadow: 1px 4px 6px #c6c6c6, 0 0 0 #000, 1px 4px 6px #c6c6c6;
}
.hh-page-title span {
font-size: 22px;
font-weight: 500;
display: block;
}
.hh-navigation {
position: fixed;
left: 0;
right: 0;
top: 0;
-webkit-box-shadow: 0 0px 9px 4px rgba(0, 0, 0, 0.1), 0 -5px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0px 9px 4px rgba(0, 0, 0, 0.1), 0 -5px 2px 2px rgba(0, 0, 0, 0.1);
background: white;
z-index: 10000;
text-align: center;
}
.hh-navigation ul {
margin-bottom: 0;
}
.hh-logo-hidden {
line-height: 75px;
font-weight: 900;
text-transform: uppercase;
font-size: 22px;
text-decoration: none;
color: #222533;
opacity: 0;
visibility: hidden;
position: absolute;
left: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.links {
margin-right: 10px;
position: relative;
}
.links > li {
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
.hh-dropmenu-item.active {
display: block;
-webkit-animation: flipInX 1s ease;
}
.lg-text {
font-size: 13px;
font-weight: 600;
color: #333;
}
.sm-text {
font-size: 11px;
color: #c6c6c6;
}
.md-text {
font-size: 12px;
color: #c6c6c6;
}
.hh-notification-item {
width: 100%;
padding: 15px;
border-bottom: 1px solid #EEEEEE;
}
.hh-notification-item:hover {
background: #F5F5F5;
}
.hh-notification-item .hh-notification-content {
color: #404040;
}
.hh-notification-body {
color: black;
vertical-align: middle;
margin-left: 30px;
}
.hh-logo-container {
width: 225px;
text-align: center;
height: 50px;
float: left;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hh-top-nav-container {
float: right;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hh-toggle-btn,
.hh-logo {
text-decoration: none;
position: relative;
height: 50px;
line-height: 50px;
padding: 0 15px;
font-size: 22px;
font-weight: 900;
text-transform: uppercase;
text-decoration: none;
color: #222533;
display: inline-block;
}
.hh-logo i {
padding-top: 2px;
vertical-align: middle;
margin-right: 10px;
}
.hh-toggle-btn:hover {
background: #f9f9f9;
}
.hh-menu-item {
position: relative;
padding: 0 5px;
line-height: 30px;
height: 30px;
color: #89949B;
z-index: 5;
display: inline-block;
}
.hh-badge {
height: 20px;
color: white;
border-radius: 10px;
line-height: 20px;
font-size: 12px;
background: #E94B3B;
-webkit-box-shadow: 0.5px 0.2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0.5px 0.2px 1px rgba(0, 0, 0, 0.5);
display: inline-block;
text-align: center;
}
.hh-menu-badge {
position: absolute;
min-width: 20px;
min-height: 20px;
line-height: 20px;
font-weight: bold;
color: white;
border-radius: 100%;
font-size: 12px;
background: #E94B3B;
-webkit-box-shadow: 0.5px 0.2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0.5px 0.2px 1px rgba(0, 0, 0, 0.5);
display: inline-block;
text-align: center;
top: -10px;
z-index: 1;
}
.sm-menu {
min-width: 150px !important;
}
.sm-menu > li {
padding: 10px;
text-align: left;
}
.sm-menu > li i {
margin: 0 10px 0 0;
}
.sm-menu > li > a {
padding: 10px;
}
.hh-dropmenu-item {
position: absolute;
right: -6px;
top: 45px;
min-width: 250px;
background: white;
border: 1px solid #BDBDBD;
border-top: 5px solid #515d6e;
border-radius: 2px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
.hh-dropmenu-item:before {
content: "";
position: absolute;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: #515d6e transparent;
top: -14px;
right: 8px;
}
.hh-dropmenu-item.hh-settings {
right: 0 !important;
left: auto !important;
}
.hh-dropmenu-item.hh-settings:before {
right: 5px !important;
left: auto !important;
}
.hh-dropmenu-item.hh-settings > .hh-notification-item:hover {
background: #fff !important;
}
.hh-dropmenu-item.hh-settings > .hh-notification-item i {
font-size: 24px;
}
.hh-dropmenu-footer,
.hh-dropmenu-header {
display: block !important;
background: #CFD8DC;
text-transform: uppercase;
font-size: 12px;
margin: 0 !important;
padding: 6px;
text-align: center;
}
.hh-dropmenu-footer > a,
.hh-dropmenu-header > a {
color: white;
line-height: 12px;
text-decoration: none;
}
.hh-dropmenu-header {
border-bottom: 1px solid #CFD8DC;
}
.hh-dropmenu-footer {
border-top: 1px solid #CFD8DC;
}
.hh-chk-pin {
margin: 0 !important;
}
.hh-chk-pin span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
}
.hh-chk-pin span:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
-webkit-box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.hh-chk-pin input {
display: none;
}
.hh-chk-pin input:checked + span {
background: #23AE89;
}
.hh-chk-pin input:checked + span:after {
left: 19px;
}
.hide {
display: none;
}
.hh-option-selected {
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -2px 4px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.hh-color-swatch {
display: table;
width: 90px;
height: 25px;
border-radius: 4px;
}
.hh-color-swatch .colors {
width: 25px;
height: 25px;
display: table-cell;
cursor: pointer;
}
.hh-color-swatch .colors input[type="radio"] {
display: none;
}
.hh-color-swatch .colors:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.hh-color-swatch .colors:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.hh-sidebar {
z-index: 9999;
position: fixed;
font-weight: 600;
background: white !important;
width: 225px;
height: 100vh;
top: 50px;
left: 0;
bottom: 0;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 2px 4px 8px rgba(0, 0, 0, 0.28);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 2px 4px 8px rgba(0, 0, 0, 0.28);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hh-sidebar li {
text-align: left;
height: 45px;
font-size: 14px;
font-weight: 500;
letter-spacing: .025em;
line-height: 1.5;
}
.hh-sidebar li a {
text-decoration: none;
display: block;
color: #515d6e;
}
.hh-sidebar li a i {
position: relative;
width: 45px;
line-height: 45px;
text-align: center;
}
.hh-sidebar li a i:before {
z-index: 10;
position: relative;
}
.hh-sidebar li a > span {
display: inline-block;
visibility: visible;
opacity: 1;
padding-left: 10px;
-webkit-transition: all .2s ease-in-out .2s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
text-transform: uppercase;
font-size: 11px;
}
.hh-sidebar li:hover {
background: #f2f2f2;
}
.hh-sidebar li:hover .icon-bg {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hh-sidebar li:hover a > i {
color: white;
}
.icon-bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
-webkit-transform: translate3d(-43px, 0, 0);
transform: translate3d(-43px, 0, 0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hh-txt-primary {
color: #1C7EBB;
}
.hh-bg-primary {
background: #1C7EBB;
}
.hh-txt-success {
color: #23AE89;
}
.hh-bg-success {
background: #23AE89;
}
.hh-txt-danger {
color: #E94B3B;
}
.hh-bg-danger {
background: #E94B3B;
}
.hh-txt-warning {
color: #F98E33;
}
.hh-bg-warning {
background: #F98E33;
}
.hh-txt-violet {
color: #6A55C2;
}
.hh-bg-violet {
background: #6A55C2;
}
.hh-logo-container.hh-nav-min {
-webkit-transform: translate3d(-180px, 0, 0);
transform: translate3d(-180px, 0, 0);
}
.hh-logo-container.hh-nav-min .hh-logo {
opacity: 0;
}
.hh-logo-container.hh-nav-min + .hh-logo-hidden {
opacity: 1;
visibility: visible;
}
.hh-sidebar.hh-nav-min {
width: 45px !important;
}
.hh-sidebar.hh-nav-min .hh-sidebar-item {
opacity: 0;
visibility: hidden;
-webkit-transition: all .1s linear;
-webkit-transform: translate3d(-200px, 0, 0);
transform: translate3d(-200px, 0, 0);
}
.hh-sidebar.hh-nav-min .icon-bg {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hh-sidebar.hh-nav-min i {
border: 0px;
color: white;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.hh-sidebar.hh-nav-min li:hover .icon-bg {
-webkit-transform: scale(1.2, 1);
transform: scale(1.2, 1);
}
.hh-body-wrapper {
position: absolute;
left: 230px;
top: 75px;
width: auto;
right: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hh-body-wrapper.hh-nav-min {
left: 50px;
}
.hh-chart {
height: 250px;
}
.hh-collapse {
height: 0px;
padding: 0;
opacity: 0;
overflow: hidden;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
}
}
@media screen and (max-width: 450px) {
.hh-info-box i {
opacity: .3;
}
.flat-theme .hh-toggle-btn {
right: 20px !important;
}
.flat-theme .hh-top-nav-container .links:last-child {
display: none;
}
}
@media screen and (min-width: 850px) {
.hh-logo-container {
height: 75px;
}
.hh-logo-container .hh-logo {
line-height: 75px;
}
.hh-logo-container .hh-toggle-btn {
line-height: 75px;
height: auto;
}
.hh-top-nav-container {
padding: 10px;
}
.hh-sidebar {
top: 75px;
}
.hh-body-wrapper {
top: 100px;
}
.flat-theme .hh-toggle-btn {
top: 20px !important;
}
}
@media screen and (max-width: 850px) {
.flat-theme .hh-menu-badge {
top: -3px;
}
.flat-theme .hh-toggle-btn {
right: 20px !important;
}
.flat-theme .hh-body-wrapper {
top: 125px !important;
}
.flat-theme .hh-sidebar {
position: absolute;
}
.flat-theme .hh-navigation {
position: absolute;
}
.flat-theme .hh-navigation .links > li:first-child {
margin-left: 15px !important;
}
.flat-theme.sticky .hh-logo-container {
z-index: 10000;
}
.flat-theme.sticky .hh-logo-container .hh-toggle-btn {
color: #89949B !important;
position: fixed;
right: 120px !important;
background: #f6f6f6;
top: 11px;
}
.flat-theme.sticky .hh-logo-container .hh-toggle-btn:hover {
background: crimson;
color: #fff !important;
}
.flat-theme.sticky .hh-navigation {
height: 50px;
}
.flat-theme.sticky .hh-sidebar {
top: 50px;
position: fixed;
}
.flat-theme.sticky .hh-top-nav-container {
background: #FFF important;
-webkit-box-shadow: 0 0px 9px 4px rgba(0, 0, 0, 0.1), 0 -5px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0px 9px 4px rgba(0, 0, 0, 0.1), 0 -5px 2px 2px rgba(0, 0, 0, 0.1);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 1000;
}
.flat-theme.sticky .links {
margin-left: 50px;
}
.flat-theme.sticky .brand-icon {
margin-left: 0px;
}
.flat-theme.sticky .brand-icon:hover {
color: #fff;
}
.hh-navigation {
height: 100px;
}
.hh-logo-container.hh-nav-min {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
background: transparent;
}
.hh-logo-container.hh-nav-min .hh-logo {
opacity: 1;
}
.hh-logo-container.hh-nav-min + .hh-logo-hidden {
display: none;
}
.hh-logo-container {
display: block;
float: none;
width: 100%;
border-bottom: 1px solid #F2F2F2;
}
.hh-top-nav-container {
display: block;
float: none;
height: 50px;
background: white;
}
.hh-top-nav-container .links > li > a {
font-size: 12px;
}
.hh-menu-badge {
font-size: 10px;
min-width: 15px;
min-height: 15px;
line-height: 15px;
}
.hh-sidebar {
top: 100px;
}
.hh-sidebar.hh-nav-min {
-webkit-transform: translate3d(-200px, 0, 0);
transform: translate3d(-200px, 0, 0);
}
.hh-body-wrapper {
top: 125px;
position: relative;
}
.hh-body-wrapper.hh-nav-min {
left: 0px;
}
}
.panel {
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 0 !important;
position: relative;
-webkit-transition: all .2s linear;
}
.panel-close {
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
}
.panel-body {
position: relative;
-webkit-transition: all .2s linear;
}
.panel-heading {
background: white !important;
border-radius: 0;
padding: 15px;
border-bottom: 0 !important;
}
.panel-heading .panel-title {
text-transform: uppercase;
font-weight: 600;
font-size: 13px;
color: #515d6e;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
background: rgba(255, 255, 255, 0.75);
text-align: center;
}
.overlay:before {
content: "";
height: 100%;
vertical-align: middle;
width: 1px;
display: inline-block;
margin-left: -5px;
}
.overlay .overlay-content {
display: inline-block;
vertical-align: middle;
}
.overlay i {
display: block;
position: inline-block;
vertical-align: middle;
color: black;
}
.hh-panel-action {
list-style: none;
display: inline-block;
float: right;
}
.hh-panel-action li {
display: inline-block;
color: #515d6e;
margin: 0 5px;
cursor: pointer;
}
.hh-info-box {
margin-bottom: 16px;
-webkit-box-shadow: 1px 1px 2px 0 #CCCCCC;
box-shadow: 1px 1px 2px 0 #CCCCCC;
padding: 20px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
background: white !important;
}
.hh-info-box i {
display: block;
background-clip: padding-box;
margin-right: 15px;
height: 60px;
width: 60px;
border-radius: 100%;
line-height: 60px;
text-align: center;
font-size: 4.4em;
position: absolute;
}
.hh-info-box .value,
.hh-info-box .heading {
display: block;
position: relative;
color: #515d6e;
text-align: right;
z-index: 10;
}
.hh-info-box .heading {
font-size: 1.2em;
font-weight: 300;
text-transform: uppercase;
}
.hh-info-box .value {
font-size: 2.1em;
font-weight: 600;
margin-top: 5px;
}
.hh-list-group-item {
margin: 5px 10px 25px 5px;
}
.hh-list-group-item:after {
content: "";
display: table;
}
.hh-chat {
border: 1px solid rgba(198, 198, 198, 0.5);
padding: 0 10px;
border-radius: 2px;
position: relative;
}
.hh-chat-body {
position: relative;
}
.hh-list-group-item.left .hh-chat {
margin-left: 50px;
}
.hh-list-group-item.left .hh-chat .sm-text {
float: right;
}
.hh-list-group-item.left .hh-chat:after {
content: "";
border-top: 1px solid rgba(198, 198, 198, 0.5);
border-left: 1px solid rgba(198, 198, 198, 0.5);
height: 10px;
width: 10px;
background: white;
position: absolute;
left: -6px;
top: 10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hh-chat-msg {
font-size: 14px;
color: #585f69;
}
.hh-list-group-item.right .hh-chat {
margin-right: 50px;
}
.hh-list-group-item.right .hh-chat .lg-text {
float: right;
}
.hh-list-group-item.right .hh-chat:after {
content: "";
border-top: 1px solid rgba(198, 198, 198, 0.5);
border-right: 1px solid rgba(198, 198, 198, 0.5);
height: 10px;
width: 10px;
background: white;
position: absolute;
right: -6px;
top: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.hh-list-icon {
position: relative;
height: 40px;
width: 40px;
border-radius: 100%;
line-height: 40px;
text-align: center;
color: white;
top: -5px;
}
.icon-shadow {
-webkit-box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.26);
box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.26);
}
.hh-list-img {
border-radius: 100%;
width: 32px;
height: 32px;
}
.hh-list-group {
position: relative;
}
.hh-list-group.group:before {
content: "";
position: absolute;
background: rgba(198, 198, 198, 0.3);
top: -20px;
bottom: -20px;
left: 25px;
width: 1px;
}
.hh-list-content {
line-height: 1.3;
margin-left: 50px;
}
.hh-timeline {
padding: 10px 0;
position: relative;
}
.hh-timeline:before {
content: "";
position: absolute;
border: 1px solid #c6c6c6;
left: 50%;
top: 0;
height: 100%;
bottom: 1px;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.hh-timeline .hh-timeline-item {
list-style: none;
padding: 10px;
position: relative;
vertical-align: middle;
margin-bottom: 20px;
font-size: 14px;
}
.hh-timeline .hh-timeline-item .hh-timeline-badge {
position: absolute;
left: 50%;
top: 0;
margin-left: -15px;
color: #FFF;
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 100%;
text-align: center;
line-height: 25px;
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-transition: all .2s easein-out;
transition: all .2s easein-out;
border: 2px solid #fff;
}
.hh-timeline .hh-timeline-item .hh-timeline-badge span {
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
position: absolute;
color: #e6e6e6;
background: Grey;
min-width: 70px;
border-radius: 3px;
}
.hh-timeline .hh-timeline-item .hh-timeline-badge span.pull-right {
right: 35px;
}
.hh-timeline .hh-timeline-item .hh-timeline-badge span.pull-left {
left: 35px;
}
.hh-timeline .hh-timeline-item .hh-timeline-badge:hover span {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.hh-timeline .hh-timeline-item .hh-timeline-panel {
position: relative;
width: 40%;
background: #FFF;
padding: 15px;
top: -20px;
margin-left: 10px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.hh-timeline .hh-timeline-item .hh-timeline-panel:after {
content: "";
width: 15px;
height: 15px;
background: #FFF;
position: absolute;
top: 30px;
right: -8.5px;
margin-top: -10px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.hh-timeline .hh-timeline-item:before {
content: "";
display: table;
}
.hh-timeline .hh-timeline-item:after {
content: "";
clear: both;
display: block;
overflow: hidden;
}
.hh-timeline .hh-timeline-item:first-child {
margin-top: 20px;
}
.hh-timeline .hh-timeline-item .pull-right.hh-timeline-panel {
background: #e6e6e6;
margin-right: 10px;
}
.hh-timeline .hh-timeline-item .pull-right.hh-timeline-panel:after {
content: "";
left: -8.5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background: #e6e6e6;
}
.hh-timeline-footer p {
display: inline-block;
font-weight: 600;
color: #515d6e;
}
.hh-timeline-footer p i {
font-size: 24px;
color: crimson;
}
.hh-chart .morris-hover {
display: none !important;
}
.hh-chart:hover .morris-hover {
display: block !important;
}
.fa-spin {
-webkit-animation: fa-spin .5s infinite linear;
animation: fa-spin .5s infinite linear;
}
.brand-icon {
font-size: 22px;
height: 50px;
display: inline-block;
float: left;
width: 50px;
background-color: crimson;
text-align: center;
line-height: 50px;
color: white;
font-weight: 700;
-webkit-transition: all .2s linear;
transition: all .2s linear;
margin-left: -230px;
display: none;
}
.flat-theme {
background: #f1f2f7;
}
.flat-theme .brand-icon {
display: inline-block;
}
.flat-theme .hh-logo {
color: white;
}
.flat-theme .hh-navigation {
text-align: left;
}
.flat-theme .hh-navigation .hh-top-nav-container {
float: none !important;
}
.flat-theme .hh-navigation .hh-top-nav-container .links:last-child {
float: none !important;
}
.flat-theme .hh-navigation .hh-top-nav-container .links:last-child > li > ul.hh-dropmenu-item {
left: 0;
}
.flat-theme .hh-navigation .hh-top-nav-container .links:last-child > li > ul.hh-dropmenu-item:before {
left: 8px;
right: 100%;
}
.flat-theme .hh-navigation .hh-top-nav-container .links:last-child > li:first-child {
margin-left: 30px;
}
.flat-theme .hh-navigation .hh-top-nav-container .links > li {
text-align: center;
}
.flat-theme .hh-navigation .hh-top-nav-container .links > li > a {
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display: inline-block;
line-height: 32px;
}
.flat-theme .hh-navigation .hh-top-nav-container .links > li:hover > a {
color: white !important;
}
.flat-theme .hh-dropmenu-item {
border-color: crimson !important;
}
.flat-theme .hh-dropmenu-item:before {
border-color: crimson transparent;
}
.flat-theme .hh-logo-container.hh-nav-min {
-webkit-transform: none;
transform: none;
}
.flat-theme .hh-logo-container.hh-nav-min .hh-logo {
opacity: 1;
}
.flat-theme .hh-logo-container.hh-nav-min + .hh-logo-hidden {
opacity: 0;
}
.flat-theme .hh-logo-container {
background: crimson !important;
position: relative;
z-index: 1000;
}
.flat-theme .hh-logo-container .hh-toggle-btn {
color: #fff !important;
font-size: 14px;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
line-height: 30px;
text-align: center;
padding: 0;
border-radius: 50%;
right: -15px;
background: red;
top: 7.5px;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.flat-theme .hh-sidebar {
background: #32323a !important;
}
.flat-theme .hh-sidebar li {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.flat-theme .hh-sidebar li:hover {
background: #28282a !important;
}
.flat-theme .hh-sidebar li:hover span {
color: crimson !important;
}
.flat-theme .hh-sidebar li a i {
color: white;
}
.flat-theme .hh-sidebar li a > span {
color: #aeb2b7 !important;
-webkit-transition: none;
}
.flat-theme .hh-info-box {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 4px;
}
.flat-theme .panel {
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 4px !important;
border: none !important;
}
.flat-theme .panel .panel-heading {
background: #fafafa !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.flat-theme .panel .panel-body {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.flat-theme .panel-default {
border-color: none;
}
.hh-bg-crimson {
background: crimson;
}
.flat-theme.crimson .hh-logo-container {
background: crimson !important;
}
.flat-theme.crimson .hh-toggle-btn {
background: #ad102f !important;
}
.flat-theme.crimson .hh-dropmenu-footer,
.flat-theme.crimson .hh-dropmenu-header {
background: #ad102f !important;
}
.flat-theme.crimson .links > li:not(.no-color):hover > a {
background: #eb1f48 !important;
}
.flat-theme.crimson .hh-dropmenu-item {
border-color: #ad102f !important;
}
.flat-theme.crimson .hh-dropmenu-item:before {
border-color: #ad102f transparent;
}
.flat-theme.crimson .hh-sidebar li:hover a > span {
color: crimson !important;
}
@media screen and (max-width: 850px) {
.flat-theme.crimson.sticky .hh-toggle-btn {
background: #fafafa !important;
color: #89949B !important;
}
}
.flat-theme.crimson.sticky .brand-icon,
.flat-theme.crimson.sticky .hh-toggle-btn:hover {
background: crimson !important;
color: #fff !important;
}
.hh-bg-teal {
background: #1fb5ad;
}
.flat-theme.teal .hh-logo-container {
background: #1fb5ad !important;
}
.flat-theme.teal .hh-toggle-btn {
background: #188983 !important;
}
.flat-theme.teal .hh-dropmenu-footer,
.flat-theme.teal .hh-dropmenu-header {
background: #188983 !important;
}
.flat-theme.teal .links > li:not(.no-color):hover > a {
background: #23cbc2 !important;
}
.flat-theme.teal .hh-dropmenu-item {
border-color: #188983 !important;
}
.flat-theme.teal .hh-dropmenu-item:before {
border-color: #188983 transparent;
}
.flat-theme.teal .hh-sidebar li:hover a > span {
color: #1fb5ad !important;
}
@media screen and (max-width: 850px) {
.flat-theme.teal.sticky .hh-toggle-btn {
background: #fafafa !important;
color: #89949B !important;
}
}
.flat-theme.teal.sticky .brand-icon,
.flat-theme.teal.sticky .hh-toggle-btn:hover {
background: #1fb5ad !important;
color: #fff !important;
}
.hh-bg-orange {
background: #ff503f;
}
.flat-theme.orange .hh-logo-container {
background: #ff503f !important;
}
.flat-theme.orange .hh-toggle-btn {
background: #ff220c !important;
}
.flat-theme.orange .hh-dropmenu-footer,
.flat-theme.orange .hh-dropmenu-header {
background: #ff220c !important;
}
.flat-theme.orange .links > li:not(.no-color):hover > a {
background: #ff6759 !important;
}
.flat-theme.orange .hh-dropmenu-item {
border-color: #ff220c !important;
}
.flat-theme.orange .hh-dropmenu-item:before {
border-color: #ff220c transparent;
}
.flat-theme.orange .hh-sidebar li:hover a > span {
color: #ff503f !important;
}
@media screen and (max-width: 850px) {
.flat-theme.orange.sticky .hh-toggle-btn {
background: #fafafa !important;
color: #89949B !important;
}
}
.flat-theme.orange.sticky .brand-icon,
.flat-theme.orange.sticky .hh-toggle-btn:hover {
background: #ff503f !important;
color: #fff !important;
}
.hh-bg-purple {
background: rebeccapurple;
}
.flat-theme.purple .hh-logo-container {
background: rebeccapurple !important;
}
.flat-theme.purple .hh-toggle-btn {
background: #4d2673 !important;
}
.flat-theme.purple .hh-dropmenu-footer,
.flat-theme.purple .hh-dropmenu-header {
background: #4d2673 !important;
}
.flat-theme.purple .links > li:not(.no-color):hover > a {
background: #7339ac !important;
}
.flat-theme.purple .hh-dropmenu-item {
border-color: #4d2673 !important;
}
.flat-theme.purple .hh-dropmenu-item:before {
border-color: #4d2673 transparent;
}
.flat-theme.purple .hh-sidebar li:hover a > span {
color: rebeccapurple !important;
}
@media screen and (max-width: 850px) {
.flat-theme.purple.sticky .hh-toggle-btn {
background: #fafafa !important;
color: #89949B !important;
}
}
.flat-theme.purple.sticky .brand-icon,
.flat-theme.purple.sticky .hh-toggle-btn:hover {
background: rebeccapurple !important;
color: #fff !important;
}
.hh-bg-twitter {
background: #55acee;
}
.flat-theme.twitter .hh-logo-container {
background: #55acee !important;
}
.flat-theme.twitter .hh-toggle-btn {
background: #2795e9 !important;
}
.flat-theme.twitter .hh-dropmenu-footer,
.flat-theme.twitter .hh-dropmenu-header {
background: #2795e9 !important;
}
.flat-theme.twitter .links > li:not(.no-color):hover > a {
background: #6cb7f0 !important;
}
.flat-theme.twitter .hh-dropmenu-item {
border-color: #2795e9 !important;
}
.flat-theme.twitter .hh-dropmenu-item:before {
border-color: #2795e9 transparent;
}
.flat-theme.twitter .hh-sidebar li:hover a > span {
color: #55acee !important;
}
@media screen and (max-width: 850px) {
.flat-theme.twitter.sticky .hh-toggle-btn {
background: #fafafa !important;
color: #89949B !important;
}
}
.flat-theme.twitter.sticky .brand-icon,
.flat-theme.twitter.sticky .hh-toggle-btn:hover {
background: #55acee !important;
color: #fff !important;
}
</style></head><body>
<div class="flat-theme">
<section>
<header>
<nav class="hh-navigation">
<div class="hh-logo-container">
<a href="#" class="hh-logo"><i class=" fa fa-recycle"></i>Radar</a>
<a href="#" class="hh-toggle-btn pull-right"><i class="fa fa-bars"></i></a>
</div>
<a href="#" class="hh-logo-hidden">Radar</a>
<div class="hh-top-nav-container">
<a href="" class="brand-icon"><i class="fa fa-recycle"></i></a>
<ul class="pull-right links">
<li class="hh-dropdown no-color">
<a class="hh-menu-item" href="#">
<img class="hh-list-img sm-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></a>
<ul class="hh-dropmenu-item sm-menu">
<li class="hh-notification-item">
<a class="hh-notification-content lg-text" href="#"><i class="fa fa-edit"></i>My Profile</a>
</li>
<li class="hh-notification-item">
<a class="hh-notification-content lg-text" href="#"><i class="fa fa-power-off"></i>Sign out</a>
</li>
</ul>
</li>
<li class="hh-dropdown"><a class="hh-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="hh-dropmenu-item hh-settings">
<li class="hh-dropmenu-header"><a href="#">Settings</a></li>
<li class="hh-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="hh-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="hh-notification-body">
<div class="lg-text">Change to Flat Theme</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="hh-color-opts" class="hh-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="hh-color-swatch">
<label class="colors hh-bg-crimson hh-option-selected">
<input type="radio" checked name="color" value="crimson" /></label>
<label class="colors hh-bg-teal">
<input type="radio" name="color" value="teal" /></label>
<label class="colors hh-bg-purple">
<input type="radio" name="color" value="purple"></label>
<label class="colors hh-bg-orange">
<input type="radio" name="color" value="orange" /></label>
<label class="colors hh-bg-twitter">
<input type="radio" name="color" value="twitter" /></label>
</div>
</div>
<div class="hh-notification-body">
<div class="lg-text">Choose a color</div>
<div class="sm-text">Make it colorful</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<a class="hh-menu-item" href="#"><i class="fa fa-comment-o"><span class="hh-menu-badge hh-bg-success">0</span></i></a>
</li>
<li class="hh-dropdown"><a class="hh-menu-item" href="#"><i class="fa fa-envelope-o"><span class="hh-menu-badge hh-bg-primary">23</span></i></a>
<ul class="hh-dropmenu-item">
<li class="hh-dropmenu-header"><a href="#">Your Notifications</a></li>
<li class="hh-notification-item text-left">
<a class="hh-notification-content" href="#">
<div class="pull-left">
<i class="fa fa-html5 fa-2x"></i>
</div>
<div class="hh-notification-body">
<div class="lg-text">Introduction to fetch()</div>
<div class="sm-text">The fetch API</div>
</div>
</a>
</li>
<li class="hh-notification-item text-left">
<a class="hh-notification-content" href="#">
<div class="pull-left">
<i class="fa fa-bitbucket fa-2x"></i>
</div>
<div class="hh-notification-body">
<div class="lg-text">Check your BitBucket</div>
<div class="sm-text">Last Chance</div>
</div>
</a>
</li>
<li class="hh-notification-item text-left">
<a class="hh-notification-content" href="#">
<div class="pull-left">
<i class="fa fa-google fa-2x"></i>
</div>
<div class="hh-notification-body">
<div class="lg-text">Google Account</div>
<div class="sm-text">sathishlxg@gmail.com</div>
</div>
</a>
</li>
<li class="hh-dropmenu-footer"><a href="#">See all notifications</a></li>
</ul>
</li>
<li class="hh-dropdown"><a class="hh-menu-item" href="#"><i class="fa fa-bell-o"><span class="hh-menu-badge">49</span></i></a>
<ul class="hh-dropmenu-item">
<li class="hh-dropmenu-header"><a href="#">Your Alerts</a></li>
<li class="hh-notification-item text-left">
<a class="hh-notification-content" href="#">
<div class="pull-left">
<i class="fa fa-html5 fa-2x"></i>
</div>
<div class="hh-notification-body">
<div class="lg-text">Introduction to fetch()</div>
<div class="sm-text">The fetch API</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i>2 sec ago</em>
</div>
</a>
</li>
<li class="hh-notification-item text-left">
<a class="hh-notification-content" href="#">
<div class="pull-left">
<i class="fa fa-bitbucket fa-2x"></i>
</div>
<div class="hh-notification-body">
<div class="lg-text">Check your BitBucket</div>
<div class="sm-text">Last Chance</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i>49 mins ago</em>
</div>
</a>
</li>
<li class="hh-notification-item text-left">
<a class="hh-notification-content" href="#">
<div class="pull-left">
<i class="fa fa-google fa-2x"></i>
</div>
<div class="hh-notification-body">
<div class="lg-text">Google Account</div>
<div class="sm-text">sathishlxg@gmail.com</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i>2 days ago</em>
</div>
</a>
</li>
<li class="hh-dropmenu-footer"><a href="#">See all alerts</a></li>
</ul>
</li>
<!--<li class="hh-dropdown"><a class="hh-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="hh-dropmenu-item hh-settings">
<li class="hh-dropmenu-header"><a href="#">Settings</a></li>
<li class="hh-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right"><label class="hh-chk-pin pull-right">
<input type="checkbox"/><span></span></label></div>
<div class="hh-notification-body">
<div class="lg-text">Change to Flat Theme</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="hh-color-opts" class="hh-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="hh-color-swatch">
<label class="colors hh-bg-crimson hh-option-selected"><input type="radio" checked name="color" value="crimson"/></label>
<label class="colors hh-bg-teal"><input type="radio" name="color" value="teal"/></label>
<label class="colors hh-bg-orange"><input type="radio" name="color" value="orange"/></label>
</div>
</div>
<div class="hh-notification-body">
<div class="lg-text">Choose a color</div>
<div class="sm-text">Make it colorful</div>
</div>
</li>
</ul>
</li>
<li class="hh-dropdown">
<a class="hh-menu-item" href="#"><img class="hh-list-img sm-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></a>
<ul class="hh-dropmenu-item sm-menu">
<li class="hh-notification-item">
<a class="hh-notification-content lg-text" href="#"><i class="fa fa-edit"></i> My Profile</a>
</li>
<li class="hh-notification-item">
<a class="hh-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Sign out</a>
</li>
</ul>
</li>-->
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="hh-sidebar">
<ul>
<li>
<a href="#" class="inbox">
<i class="fa fa-dashboard"><span class="icon-bg hh-bg-success"></span></i>
<span class="hh-sidebar-item">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o">
<span class="icon-bg hh-bg-danger"></span>
</i>
<span class="hh-sidebar-item">Ticket status</span>
</a>
</li>
<li><a href="#" class="snooz"><i class="fa fa-line-chart"><span class="icon-bg hh-bg-primary"></span></i><span class="hh-sidebar-item">Call trends</span></a></li>
<li><a href="#" class="done"><i class="fa fa-area-chart"><span class="icon-bg hh-bg-warning"></span></i><span class="hh-sidebar-item">Heat maps</span></a></li>
<li>
<a href="#">
<i class="fa fa-wrench"><span class="icon-bg hh-bg-violet"></span></i>
<span class="hh-sidebar-item">Settings</span>
</a>
</li>
</ul>
</nav>
</aside>
<section>
<div class="hh-body-wrapper">
<div class="container-fluid">
<header class="hh-page-title">
<span>Dashboard</span>
<small class="md-txt">Welcome Sathish, <a href="https://www.google.com/maps/place/3720+Emerald+St,+Torrance,+CA+90503/@33.8403836,-118.3543828,17z/data=!4m18!1m15!4m14!1m6!1m2!1s0x80c2b4d407f58b11:0xdedca55964c89054!2s3720+Emerald+St,+Torrance,+CA+90503!2m2!1d-118.3520761!2d33.8403792!1m6!1m2!1s0x80c2b4d407f58b11:0xdedca55964c89054!2s3720+Emerald+St,+Torrance,+CA+90503!2m2!1d-118.3520761!2d33.8403792!3m1!1s0x80c2b4d407f58b11:0xdedca55964c89054" target="_blank"><i class="fa fa-map-marker hh-txt-danger"></i>California</a></small>
</header>
<div class="row">
<div class="col-lg-3 col-xs-6">
<div class="hh-info-box hh-txt-success">
<i class="fa fa-windows"></i>
<span class="heading">Microsoft</span>
<span class="value"><span>4949</span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="hh-info-box hh-txt-primary">
<i class="fa fa-facebook"></i>
<span class="heading">Facebook</span>
<span class="value"><span>23439</span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="hh-info-box hh-txt-danger">
<i class="fa fa-google-plus"></i>
<span class="heading">Google</span>
<span class="value"><span>49</span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="hh-info-box">
<i class="fa fa-apple"></i>
<span class="heading">Apple</span>
<span class="value"><span>1009K</span></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Area Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="areaChart" class="hh-chart"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Area Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="areaChart2" class="hh-chart"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Activity<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div class="hh-list-group group">
<div class="hh-list-group-item">
<div class="hh-list-icon icon-shadow hh-bg-danger pull-left"><i class="fa fa-phone"></i></div>
<div class="hh-list-content">
<strong>Client meeting</strong>
<div class="md-text">Meeting at 10:00 AM</div>
</div>
</div>
<div class="hh-list-group-item">
<div class="hh-list-icon icon-shadow hh-bg-primary pull-left"><i class="fa fa-refresh"></i></div>
<div class="hh-list-content">
<strong>Created ticket</strong>
<div class="md-text">Ticket assigned to Dev team</div>
</div>
</div>
<div class="hh-list-group-item">
<div class="hh-list-icon icon-shadow hh-bg-success pull-left"><i class="fa fa-check"></i></div>
<div class="hh-list-content">
<strong>Activity completed</strong>
<div class="md-text">Completed the dashboard html demo</div>
</div>
</div>
<div class="hh-list-group-item">
<div class="hh-list-icon icon-shadow hh-bg-violet pull-left"><i class="fa fa-envelope"></i></div>
<div class="hh-list-content">
<strong>New Invitation</strong>
<div class="md-text">Max has invited you to join Inbox</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-8 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Donut Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="donutChart" class="hh-chart"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Line Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="lineChart" class="hh-chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="barChart3" class="hh-chart"></div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="barChart2" class="hh-chart"></div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right"></i></li>
<li><i class="fa fa-cog"></i>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div id="barChart" class="hh-chart"></div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Team Chat<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div class="hh-chat-body">
<div class="hh-list-group">
<div class="hh-list-group-item left">
<span class="hh-list-icon pull-left">
<img class="hh-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="hh-list-content hh-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i>11:20 pm</span>
<div class="hh-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
</div>
</div>
<div class="hh-list-group-item right">
<span class="hh-list-icon pull-right">
<img class="hh-list-img" src="https://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
<div class="hh-list-content hh-chat">
<span class="lg-text">Sathish</span>
<span class="sm-text"><i class="fa fa-clock-o"></i>11:30 pm</span>
<div class="hh-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="hh-list-group-item left">
<span class="hh-list-icon pull-left">
<img class="hh-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="hh-list-content hh-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i>11:31 pm</span>
<div class="hh-chat-msg">Checkout my new admin dashboard template in CSS3 <i class="fa fa-smile-o hh-txt-warning"></i></div>
</div>
</div>
<div class="hh-list-group-item left">
<span class="hh-list-icon pull-left">
<img class="hh-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="hh-list-content hh-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i>11:20 pm</span>
<div class="hh-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
</div>
</div>
<div class="hh-list-group-item right">
<span class="hh-list-icon pull-right">
<img class="hh-list-img" src="https://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
<div class="hh-list-content hh-chat">
<span class="lg-text">Sathish</span>
<span class="sm-text"><i class="fa fa-clock-o"></i>11:30 pm</span>
<div class="hh-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="hh-list-group-item left">
<span class="hh-list-icon pull-left">
<img class="hh-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></span>
<div class="hh-list-content hh-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i>11:31 pm</span>
<div class="hh-chat-msg">Checkout my new admin dashboard template in CSS3 <i class="fa fa-smile-o hh-txt-warning"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" id="hh-chat-txt" placeholder="Type a message" class="form-control" /><span class="input-group-btn">
<button id="hh-chat-send" class="btn btn-info">Send</button></span>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Timeline<ul class="hh-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-close"></i>
</li>
</ul>
</h3>
</div>
<div class="panel-body">
<div class="hh-timeline-body">
<ul class="hh-timeline">
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-primary"><i class="fa fa-rss"></i><span class="pull-left"><i class="fa fa-clock-o"></i>49m ago</span></div>
<div class="hh-timeline-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-danger"><i class="fa fa-signal"></i><span class="pull-right"><i class="fa fa-clock-o"></i>28m ago</span></div>
<div class="hh-timeline-panel pull-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
</li>
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-success"><i class="fa fa-rocket"></i><span class="pull-left"><i class="fa fa-clock-o"></i>23m ago</span></div>
<div class="hh-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-warning"><i class="fa fa-linux"></i><span class="pull-right"><i class="fa fa-clock-o"></i>13m ago</span></div>
<div class="hh-timeline-panel pull-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!
</div>
</li>
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-violet"><i class="fa fa-stack-overflow"></i><span class="pull-left"><i class="fa fa-clock-o"></i>13m ago</span></div>
<div class="hh-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
</li>
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-danger"><i class="fa fa-wordpress"></i><span class="pull-right"><i class="fa fa-clock-o"></i>7m ago</span></div>
<div class="hh-timeline-panel pull-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!
</div>
</li>
<li class="hh-timeline-item">
<div class="hh-timeline-badge hh-bg-success"><i class="fa fa-credit-card"></i><span class="pull-left"><i class="fa fa-clock-o"></i>7m ago</span></div>
<div class="hh-timeline-panel ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia, magni voluptatem sapiente amet quidem, nemo aliquid qui minus iusto asperiores dolorem autem placeat iste!</div>
</li>
</ul>
</div>
</div>
<div class="panel-footer">
<div class="hh-timeline-footer">
<p>There are many variations</p>
<p class="pull-right"><i class="fa fa-comments-o"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js'></script>
<script >
$(function () {
$(window).on("scroll", function (e) {
if ($(window).scrollTop() > 50) {
$(".flat-theme").addClass("sticky");
} else {
$(".flat-theme").removeClass("sticky");
}
});
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".hh-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$('.hh-chat-body').slimScroll({
height: '450px',
color: "#c6c6c6"
});
$('.hh-timeline-body').slimScroll({
height: '450px',
color: '#c6c6c6'
});
$(".hh-toggle-btn").on('click', function () {
$(".hh-logo-container").toggleClass("hh-nav-min");
$(".hh-sidebar").toggleClass("hh-nav-min");
$(".hh-body-wrapper").toggleClass("hh-nav-min");
setTimeout(function () {
initializeCharts();
}, 200);
});
$("li.hh-dropdown > a.hh-menu-item").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
$(".hh-dropmenu-item").removeClass("active");
$(this).next(".hh-dropmenu-item").toggleClass("active");
});
$(".fa-chevron-down").on("click", function () {
var $ele = $(this).parents('.panel-heading');
$ele.siblings('.panel-footer').toggleClass("hh-collapse");
$ele.siblings('.panel-body').toggleClass("hh-collapse", function () {
setTimeout(function () {
initializeCharts();
}, 200);
});
});
$(".fa-close").on("click", function () {
var $ele = $(this).parents('.panel');
$ele.addClass('panel-close');
setTimeout(function () {
$ele.parent().remove();
}, 210);
});
$(".fa-rotate-right").on("click", function () {
var $ele = $(this).parents('.panel-heading').siblings('.panel-body');
$ele.append('<div class="overlay"><div class="overlay-content"><i class="fa fa-refresh fa-2x fa-spin"></i></div></div>');
setTimeout(function () {
$ele.find('.overlay').remove();
}, 2000);
});
$("#hh-chat-send").on("click", function () {
var value = $("#hh-chat-txt").val();
var $ele = $(".hh-chat-body");
var img = "https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg";
if (value) {
$("#hh-chat-txt").val('');
$ele.append(getTempl(img, value, 'left'));
setTimeout(function () {
img = "http://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png";
$ele.append(getTempl(img, "Cool!!!", 'right'));
$ele.slimScroll({
scrollTo: $ele[0].scrollHeight
});
}, 2000);
$ele.slimScroll({
scrollTo: $ele[0].scrollHeight
});
}
});
$(".hh-notification-item").on("click", function (e) {
e.stopPropagation();
});
});
//# sourceURL=pen.js
</script>
</body></html>
