<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Narrow Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../css/editor.css" rel="stylesheet">
<script>
///Last modified 02/11/2019 codepen ref-https://codepen.io/anon/pen/NoYOJm
//Added theming
$(function() {
var mapSeries = {
"AF": 16.63,
"AL": 11.58,
"DZ": 158.97,
"AO": 85.81,
"AG": 1.1,
"AR": 351.02,
"AM": 8.83,
"AU": 1219.72,
"AT": 366.26,
"AZ": 52.17,
"BS": 7.54,
"IN": 4949,
"US": 852
};
var settings = {
map: 'world_mill_en',
container: $('#world-map'),
backgroundColor: 'transparent',
colors: '#3377CC',
zoomOnScroll: false,
regionStyle: {
initial: {
fill: "#c6c6c6"
}
},
series: {
regions: [{
values: mapSeries,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
}
};
var world;
$(window).on("scroll", function(e) {
if ($(window).scrollTop() > 50) {
$("body").addClass("sticky");
} else {
$("body").removeClass("sticky");
}
});
$(document).on("click", function(e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$('.rad-sidebar a').on("click", function(e) {
e.stopPropagation();
});
$(".rad-toggle-btn").on('click', function() {
$(".rad-logo-container").toggleClass("rad-nav-min");
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
setTimeout(function() {
initializeCharts();
}, 200);
});
$("li.rad-dropdown > a.rad-menu-item").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
$(".fa-chevron-down").on("click", function() {
var $ele = $(this).parents('.panel-heading');
$ele.siblings('.panel-footer').toggleClass("rad-collapse");
$ele.siblings('.panel-body').toggleClass("rad-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);
});
$('.rad-chk-pin input[type=checkbox]').change(function(e) {
$('body').toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
});
var colorMap = {
crimson: "crimson",
teal: "#1fb5ad",
orange: "#ff503f",
purple: "rebeccapurple",
twitter: "#55acee"
};
$('.rad-color-swatch input[type=radio]').change(function(e) {
if ($('.rad-chk-pin input[type=checkbox]').is(":checked")) {
$('body').removeClass().addClass("flat-theme").addClass(this.value);
$('.rad-color-swatch label').removeClass("rad-option-selected");
$(this).parent().addClass("rad-option-selected");
$(window).scrollTop(0);
// world.remove();
settings.regionStyle.initial.fill = colorMap[this.value];
settings.series.regions[0].scale = ['#A8ECFF', '#FA71D4'];
// world = new jvm.Map(settings);
} else {
return false;
}
});
$(".rad-notification-item").on("click", function(e) {
e.stopPropagation();
});
$(window).resize(function() {
setTimeout(function() {
initializeCharts();
}, 200);
});
var colors = [
'#E94B3B',
'#39C7AA',
'#1C7EBB',
'#F98E33'
],
data = [{
y: 'Jan',
a: 50,
b: 90
}, {
y: 'Feb',
a: 75,
b: 65
}, {
y: 'Mar',
a: 50,
b: 40
}, {
y: 'Apr',
a: 10,
b: 20
}, {
y: 'May',
a: 95,
b: 65
}, {
y: 'Jun',
a: 50,
b: 40
}, {
y: 'Jul',
a: 75,
b: 65
}, {
y: 'Aug',
a: 100,
b: 90
}, {
y: 'Sep',
a: 15,
b: 65
}, {
y: 'Oct',
a: 75,
b: 65
}, {
y: 'Nov',
a: 15,
b: 65
}, {
y: 'Dec',
a: 95,
b: 65
}, ];
function initializeCharts() {
$(".rad-chart").empty();
$(".d3-*").empty();
Morris.Line({
lineColors: ['#E67A77', '#D9DD81', '#79D1CF', '#95D7BB'],
element: 'lineChart',
data: [{
year: '2008',
value: 45,
value2: 15,
value3: 95
}, {
year: '2009',
value: 10,
value2: 40,
value3: 80
}, {
year: '2010',
value: 45,
value2: 95,
value3: 5
}, {
year: '2011',
value: 20,
value2: 60,
value3: 40
}, {
year: '2012',
value: 45,
value2: 0,
value3: 90
}],
xkey: 'year',
ykeys: ['value', 'value2', 'value3'],
labels: ['Value', 'value2', 'value3'],
pointSize: 0,
hideHover: 'auto'
});
Morris.Donut({
element: 'donutChart',
data: getDonutData("Sector", "Country"),
labelColor: '#23AE89',
colors: ['#E67A77', '#D9DD81', '#79D1CF', '#95D7BB']
});
Morris.Bar({
element: 'barChart',
data: data,
xkey: 'y',
ykeys: ['a', 'b'],
barColors: ['#95D7BB', '#79D1CF'],
labels: ['Series A', 'Series B']
});
Morris.Bar({
element: 'barChart2',
data: getDonutData("Sector", "Volume"),
xkey: 'label',
ykeys: ['value'],
barColors: ['#D9DD81', '#79D1CF', '#95D7BB'],
labels: ['Sector by Volume']
});
Morris.Bar({
element: 'barChart3',
data: data,
xkey: 'y',
ykeys: ['a', 'b'],
barColors: ['#E67A77', '#79D1CF'],
labels: ['Series A', 'Series B']
});
Morris.Area({
element: 'areaChart2',
behaveLikeLine: true,
padding: 10,
fillOpacity: .7,
lineColors: ['#ED5D5D', '#D6D23A'],
gridEnabled: false,
gridLineColor: '#dddddd',
axes: true,
data: [{
y: '2006',
a: 0,
c: 0
}, {
y: '2007',
a: 75,
c: 112
}, {
y: '2008',
a: 50,
c: 72
}, {
y: '2009',
a: 75,
c: 2
}, {
y: '2010',
a: 150,
c: 92
}, {
y: '2011',
a: 75,
c: 22
}, {
y: '2012',
a: 3,
c: 0
}],
xkey: 'y',
ykeys: ['a', 'c'],
labels: ['Open', 'Closed'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto'
});
Morris.Area({
element: 'areaChart',
padding: 10,
behaveLikeLine: true,
gridEnabled: false,
gridLineColor: '#dddddd',
axes: true,
fillOpacity: .7,
data: [{
period: '2010 Q1',
iphone: 10,
ipad: 10,
itouch: 10
}, {
period: '2010 Q2',
iphone: 1778,
ipad: 7294,
itouch: 18441
}, {
period: '2010 Q3',
iphone: 4912,
ipad: 12969,
itouch: 3501
}, {
period: '2010 Q4',
iphone: 3767,
ipad: 3597,
itouch: 5689
}, {
period: '2011 Q1',
iphone: 6810,
ipad: 1914,
itouch: 2293
}, {
period: '2011 Q2',
iphone: 5670,
ipad: 4293,
itouch: 1881
}, {
period: '2011 Q3',
iphone: 4820,
ipad: 3795,
itouch: 1588
}, {
period: '2011 Q4',
iphone: 25073,
ipad: 5967,
itouch: 5175
}, {
period: '2012 Q1',
iphone: 10687,
ipad: 34460,
itouch: 22028
}, {
period: '2012 Q2',
iphone: 1000,
ipad: 5713,
itouch: 1791
}],
lineColors: ['#ED5D5D', '#D6D23A', '#32D2C9'],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto'
});
}
function getTempl(img, text, position) {
return '<div class="rad-list-group-item ' + position + '"><span class="rad-list-icon pull-' + position + '"><img class="rad-list-img" src=' + img + ' alt="me" /></span><div class="rad-list-content rad-chat"><span class="lg-text">Me</span><span class="sm-text"><i class="fa fa-clock-o"></i> ' + formatTime(new Date()) + '</span><div class="rad-chat-msg">' + text + '</div>';
}
function formatTime(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours + ':' + minutes + ' ' + ampm;
}
//initializeCharts();
// world = new jvm.Map(settings);
//$('#world-map').vectorMap(settings);
});
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
],
data = [{
"label": "Technology",
"value": 20
}, {
"label": "Financial",
"value": 45
}, {
"label": "Industrial Goods",
"value": 30
}, {
"label": "Consumer Goods",
"value": 10
}, {
"label": "Basic Materials",
"value": 5
}];
function getDonutData(group, column) {
function sum(numbers) {
return _.reduce(numbers, function(result, current) {
return result + 1;
}, 0);
}
var result = _.chain(getChartData())
.groupBy(group)
.map(function(value, key) {
return {
label: key,
value: sum(_.pluck(value, column))
}
})
.value();
return result;
}
</script>
<!-- Custom styles for this template -->
<link href="narrow-jumbotron.css" rel="stylesheet">
<style>
//Vendor prefixes not added
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
$logo-color:#222533;
$base-color: white;
$text-color: #515d6e;
$font-size:13px;
*{
box-sizing:border-box;
}
body{
background:#f0f0f0;
overflow:hidden!important;
line-height:normal;
font-size: $font-size + 3;
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;
}
.rad-info-box .value {
font-size: 1.3em!important;
font-weight: 700!important;
margin-top: 5px;
}
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
.rad-page-title{
margin-bottom:20px;
text-shadow: 1px 4px 6px #c6c6c6, 0 0 0 #000, 1px 4px 6px #c6c6c6;
span{
font-size:22px;
font-weight:500;
display:block;
}
}
.rad-navigation{
position:fixed;
left:0;right:0;top:0;
box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
background:$base-color;
z-index:10000;
text-align:center;
ul{
margin-bottom:0;
}
}
.rad-logo-hidden{
line-height: 75px;
font-weight: 900;
text-transform: uppercase;
font-size: 22px;
text-decoration:none;
color: $logo-color;
opacity:0;
visibility:hidden;
position:absolute;
left:50%;
transition:all .2s ease-in-out;
}
.links{
margin-right: 10px;
position:relative;
>li{
list-style:none;
position:relative;
margin:10px;
display:inline-block;
}
}
.rad-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;
}
.rad-notification-item{
width:100%;
padding:15px;
border-bottom:1px solid #EEEEEE;
&:hover{
background:#F5F5F5;
}
.rad-notification-content{
color: lighten(#333,5);
}
}
.rad-notification-body{
color:black;
vertical-align:middle;
margin-left:30px;
}
.rad-logo-container{
width:225px;
text-align:center;
height:50px;
float:left;
transition:all .2s ease-in-out;
}
.row, .container-fluid{background-color:white!important;}
.rad-top-nav-container{
float:right;
transition:all .2s ease-in-out;
}
.rad-toggle-btn,
.rad-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: $logo-color;
display:inline-block;
}
.rad-logo i {
padding-top: 2px;
vertical-align: middle;
margin-right: 10px;
}
.rad-toggle-btn:hover{
background:lighten(#c6c6c6,20);
}
.rad-menu-item{
position:relative;
padding:0 5px;
line-height:30px;
height:30px;
color:#89949B;
z-index:5;
display:inline-block;
}
.rad-badge{
height:20px;
color: $base-color;
border-radius:10px;
line-height:20px;
font-size:12px;
background:#E94B3B;
box-shadow:.5px .2px 1px rgba(#000,.5);
display:inline-block;
text-align:center;
}
.rad-menu-badge{
position:absolute;
min-width:20px;
min-height:20px;
line-height:20px;
font-weight:bold;
color: $base-color;
border-radius:100%;
font-size:12px;
background:#E94B3B;
box-shadow:.5px .2px 1px rgba(#000,.5);
display:inline-block;
text-align:center;
top:-10px;
z-index:1;
}
.sm-menu{
min-width:150px !important;
>li{
padding:10px;
text-align:left;
i{
margin:0 10px 0 0;
}
>a{
padding:10px;
}
}
}
.rad-dropmenu-item{
position:absolute;
right:-6px;
top:45px;
min-width:250px;
background: $base-color;
border:1px solid #BDBDBD;
border-top:5px solid $text-color;
border-radius:2px;
box-shadow:0 0 5px rgba(#000, .15);
display:none;
&:before{
content:"";
position: absolute;
border-width:0 10px 10px 10px;
border-style:solid;
border-color: $text-color transparent;
top:-14px;
right:8px;
}
}
.rad-dropmenu-item.rad-settings{
right: 0 !important;
left: auto !important;
&:before{
right: 5px !important;
left: auto !important;
}
>.rad-notification-item {
&:hover{
background: #fff !important;
}
i{
font-size:24px;
}
}
}
.rad-dropmenu-footer,
.rad-dropmenu-header{
display:block !important;
background:#CFD8DC;
text-transform:uppercase;
font-size:12px;
margin:0 !important;
padding:6px;
text-align:center;
>a{
color: white;//#98A0A3;
line-height:12px;
text-decoration:none;
}
}
.rad-dropmenu-header{
border-bottom:1px solid #CFD8DC;
}
.rad-dropmenu-footer{
border-top:1px solid #CFD8DC;
}
.rad-chk-pin {
margin:0 !important;
span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
&:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 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;
}
}
input {
display: none;
&:checked + span {
background: #23AE89;
&:after {
left: 19px;
}
}
}
}
.hide{
display:none;
}
.rad-option-selected{
box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 -2px 4px rgba(0,0,0,.2);
transform: scale(1.1);
transition: all .2s linear;
}
.rad-color-swatch{
display:table;
width: 90px;
height:25px;
border-radius:4px;
.colors{
width:25px;
height:25px;
display:table-cell;
cursor:pointer;
input[type="radio"]{
display:none;
}
}
.colors:first-child{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.colors:last-child{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
}
.rad-sidebar{
z-index:9999;
position:fixed;
font-weight:600;
background: $base-color !important;
width:225px;
height:100vh;
top:50px;
left:0;
bottom:0;
box-shadow: 0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);
transition:all .2s ease-in-out;
li{
text-align:left;
height:45px;
font-size: 14px;
font-weight:500;
letter-spacing:.025em;
line-height:1.5;
a{
text-decoration:none;
display:block;
color:$text-color;
i{
position:relative;
width:45px;
line-height:45px;
text-align:center;
&:before{
z-index:10;
position:relative;
}
}
>span{
display: inline-block;
visibility:visible;
opacity:1;
padding-left:10px;
-webkit-transition:all .2s ease-in-out .2s;
transform:translate3d(0,0,0);
text-transform: uppercase;
font-size: 11px;
}
}
&:hover{
background: darken($base-color,5);
.icon-bg{
transform:translate3d(0,0,0);
}
a>i{
color: white;
}
}
}
}
.icon-bg{
position:absolute;
left:0;top:0;bottom:0;
z-index:1;
width:100%;
transform:translate3d(-43px,0,0);
transition: all .2s ease-in-out;
}
.rad-txt-primary{
color:#1C7EBB;
}
.rad-bg-primary{
background:#1C7EBB;
}
.rad-txt-success{
color:#23AE89;
}
.rad-bg-success{
background:#23AE89;
}
.rad-txt-danger{
color:#E94B3B;
}
.rad-bg-danger{
background:#E94B3B;
}
.rad-txt-warning{
color:#F98E33;
}
.rad-bg-warning{
background:#F98E33;
}
.rad-txt-violet{
color:#6A55C2;
}
.rad-bg-violet{
background:#6A55C2;
}
.rad-logo-container.rad-nav-min{
transform:translate3d(-180px,0,0);
.rad-logo{
opacity:0;
}
&+.rad-logo-hidden{
opacity:1;
visibility:visible;
}
}
.rad-sidebar.rad-nav-min{
width:45px !important;
.rad-sidebar-item{
opacity:0;
visibility:hidden;
-webkit-transition:all .1s linear;
transform:translate3d(-200px,0,0);
}
.icon-bg{
transform:translate3d(0,0,0);
}
i{
border:0px;
color:white;
transition:all .2s linear;
}
li:hover{
.icon-bg{
transform:scale(1.2,1);
}
}
}
.rad-body-wrapper{
left:230px;
top:0px;
width:auto;
right:0;
transition: all .2s ease-in-out;
}
.rad-body-wrapper.rad-nav-min{
left:50px;
}
.rad-chart{
height:250px;
}
.rad-map{
width: 100%;
height:100%;
}
.rad-map-container{
height: 400px;
position: relative;
}
.rad-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){
.rad-info-box i{
opacity:.3;
}
.flat-theme{
.rad-toggle-btn{
right:20px !important;
}
.rad-top-nav-container{
.links:last-child{
display:none;
}
}
}
}
@media screen and (min-width: 850px){
.rad-logo-container{
height:75px;
.rad-logo{
line-height:75px;
}
.rad-toggle-btn{
line-height:75px;
height:auto;
}
}
.rad-top-nav-container{
padding:10px;
}
.rad-sidebar{
top:75px;
}
.rad-body-wrapper{
top:100px;
}
.flat-theme{
.rad-toggle-btn{
top:20px !important;
}
}
}
@media screen and (max-width: 850px){
.flat-theme{
.rad-menu-badge{
top:-3px;
}
.rad-toggle-btn{
right:20px !important;
}
.rad-body-wrapper{
top:125px !important;
}
.rad-sidebar{
position: absolute;
}
.rad-navigation{
position:absolute;
.links > li:first-child {
margin-left:15px !important;
}
}
&.sticky{
.rad-logo-container {
z-index:10000;
.rad-toggle-btn{
color: #89949B!important;
position: fixed;
right: 120px !important;
background: #f6f6f6;
top: 11px;
&:hover{
background: crimson;
color:#fff !important;
}
}
}
.rad-navigation{
height:50px;
}
.rad-sidebar{
top:50px;
position:fixed;
//transition: none;
}
.rad-top-nav-container{
background:#FFF important;
box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
position:fixed;
left:0;
top:0;
width:100%;
z-index:1000;
}
.links{
margin-left:50px;
}
.brand-icon{
margin-left: 0px;
&:hover{
color:#fff;
}
}
}
}
.rad-navigation{
height:100px;
}
.rad-logo-container.rad-nav-min{
transform:translate3d(0,0,0);
background:transparent;
.rad-logo{
opacity:1;
}
&+.rad-logo-hidden{
display: none;
}
}
.rad-logo-container{
display:block;
float:none;
width:100%;
border-bottom:1px solid #F2F2F2;
}
.rad-top-nav-container{
display:block;
float:none;
height:50px;
background: $base-color;
.links>li>a{
font-size:12px;
}
}
.rad-menu-badge{
font-size:10px;
min-width:15px;
min-height:15px;
line-height:15px;
}
.rad-sidebar{
top:100px;
}
.rad-sidebar.rad-nav-min{
transform:translate3d(-200px,0,0);
}
.rad-body-wrapper{
top:125px;
position:relative;
}
.rad-body-wrapper.rad-nav-min{
left:0px;
}
}
//---------------------------------------------------------
//Bootstrap Override
//---------------------------------------------------------
.panel{
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius:0 !important;
position:relative;
-webkit-transition:all .2s linear;
}
.panel-close{
transform:scale3d(0,0,0);
}
.panel-body{
position:relative;
-webkit-transition:all .2s linear;
}
.panel-heading{
background: $base-color !important;
border-radius:0;
padding:15px;
border-bottom:0 !important;
}
.panel-heading .panel-title{
text-transform:uppercase;
font-weight:600;
font-size:$font-size;
color:$text-color;
}
.overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1001;
background: rgba(255,255,255,0.75);
text-align:center;
&:before{
content:"";
height:100%;
vertical-align: middle;
width:1px;
display:inline-block;
margin-left:-5px;
}
.overlay-content{
display:inline-block;
vertical-align:middle;
}
i{
display:block;
position:inline-block;
vertical-align:middle;
color:black;
}
}
.rad-panel-action {
list-style: none;
display: inline-block;
float: right;
}
.rad-panel-action li {
display: inline-block;
color: $text-color;
margin: 0 5px;
cursor: pointer;
}
.rad-info-box{
margin-bottom:16px;
box-shadow:1px 1px 2px 0 #CCCCCC;
padding:20px;
height:90px!important
box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
background:$base-color !important;
}
.rad-info-box i{
display:block;
background-clip:padding-box;
margin-right:15px;
height:60px;
border-radius:100%;
line-height:60px;
text-align:center;
font-size:4.4em;
position:absolute;
}
.rad-info-box .value,
.rad-info-box .heading{
display:block;
position:relative;
color: $text-color;
text-align:right;
z-index:10;
}
.rad-info-box .heading{
font-size:1.2em;
font-weight:300;
text-transform:uppercase;
}
.rad-info-box .value{
font-size:2.1em;
font-weight:600;
margin-top:5px;
}
.rad-list-group-item{
margin:5px 10px 25px 5px;
&:after{
content:"";
display:table;
}
}
.rad-chat{
border:1px solid rgba(#c6c6c6,.5);
padding:0 10px;
border-radius:2px;
position:relative;
}
.rad-chat-body{
position:relative;
}
.rad-list-group-item.left{
.rad-chat{
margin-left:50px;
.sm-text{
float:right;
}
&:after{
content:"";
border-top:1px solid rgba(#c6c6c6,.5);
border-left:1px solid rgba(#c6c6c6,.5);
height:10px;
width:10px;
background:$base-color;
position:absolute;
left:-6px;
top:10px;
transform:rotate(-45deg);
}
}
}
.rad-chat-msg {
font-size:14px;
color:#585f69;
}
.rad-list-group-item.right{
.rad-chat{
margin-right:50px;
.lg-text{
float:right;
}
&:after{
content:"";
border-top:1px solid rgba(#c6c6c6,.5);
border-right:1px solid rgba(#c6c6c6,.5);
height:10px;
width:10px;
background:$base-color;
position:absolute;
right:-6px;
top:10px;
transform:rotate(45deg);
}
}
}
.rad-list-icon{
position:relative;
height:40px;
width:40px;
border-radius:100%;
line-height:40px;
text-align:center;
color: white;
top:-5px;
}
.icon-shadow{
box-shadow: 0 0px 3px 1px rgba(0,0,0,.26);
}
.rad-list-img{
border-radius:100%;
width:32px;
height:32px;
}
.rad-list-group{
position:relative;
}
.rad-list-group.group{
&:before{
content:"";
position:absolute;
background:rgba(#c6c6c6,.3);
top:-20px;
bottom:-20px;
left:25px;
width:1px;
}
}
.rad-list-content{
line-height:1.3;
margin-left:50px;
}
.rad-timeline {
padding: 10px 0;
position: relative;
&:before {
content: "";
position: absolute;
border: 1px solid #c6c6c6;
left: 50%;
top: 0;
height: 100%;
bottom: 1px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.rad-timeline-item {
list-style: none;
padding: 10px;
position: relative;
vertical-align: middle;
margin-bottom: 20px;
font-size: 14px;
.rad-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;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all .2s easein-out;
border: 2px solid #fff;
span {
transition: all 200ms linear;
transform: scale(0);
opacity: 0;
position: absolute;
color: #e6e6e6;
background: Grey;
min-width: 70px;
border-radius: 3px;
&.pull-right {
right: 35px;
}
&.pull-left {
left: 35px;
}
}
&:hover span {
opacity: 1;
transform: scale(1);
}
}
.rad-timeline-panel {
position: relative;
width: 40%;
background: #FFF;
padding: 15px;
//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
top: -20px;
margin-left: 10px;
border-radius: 6px;
border:1px solid rgba(0, 0, 0, 0.2);
&:after {
content: "";
width: 15px;
height: 15px;
background: #FFF;
position: absolute;
top: 30px;
right: -8.5px;
margin-top: -10px;
transform: rotate(135deg);
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
}
&:before {
content: "";
display: table;
}
&:after {
content: "";
clear: both;
display: block;
overflow: hidden;
}
&:first-child {
margin-top: 20px;
}
.pull-right.rad-timeline-panel {
background: #e6e6e6;
margin-right: 10px;
&:after {
content: "";
left: -8.5px;
transform: rotate(-45deg);
background: #e6e6e6;
}
}
}
}
.rad-timeline-footer {
p {
display: inline-block;
font-weight: 600;
color: #515d6e;
i {
font-size: 24px;
color: crimson;
}
}
}
//-----------------------------
//Morris style overrides
//-----------------------------
.rad-chart {
.morris-hover{
display:none !important;
}
}
.rad-chart:hover{
.morris-hover{
display:block !important;
}
}
//**********************
// override fa
//**********************
.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;
transition: all .2s linear;
margin-left: -230px;
display:none;
}
.flat-theme{
body{
background: #f1f2f7;
}
.brand-icon{
display:inline-block;
}
.rad-logo{
color:white;
}
.rad-navigation{
text-align: left;
.rad-top-nav-container{
float: none !important;
.links:last-child{
float:none !important;
& > li{
& > ul.rad-dropmenu-item{
left:0;
&:before{
left:8px;
right:100%;
}
}
}
& > li:first-child{
margin-left:30px;
}
}
.links > li{
text-align: center;
& >a{
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display:inline-block;
line-height:32px;
}
&:hover{
>a{
color:white !important;
}
}
}
}
}
.rad-dropmenu-item{
border-color:crimson !important;
&:before{
border-color: crimson transparent;
}
}
.rad-logo-container.rad-nav-min{
transform: none;
.rad-logo{
opacity:1;
}
& + .rad-logo-hidden{
opacity:0;
}
}
.rad-logo-container{
background: crimson !important;
position:relative;
z-index:1000;
.rad-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;
transition: all .2s linear;
}
}
.rad-sidebar{
background: #32323a !important;
li{
border-bottom:1px solid rgba(255,255,255,.05);
&:hover{
background: #28282a !important;
span{
color:crimson !important;
}
}
& a {
i{
color: white;
}
>span{
color: #aeb2b7 !important;
-webkit-transition: none;
}
}
}
}
.rad-info-box{
box-shadow: none !important;
border-radius:4px;
}
.panel{
box-shadow: none !important;
border-radius: 4px !important;
border:none !important;
.panel-heading{
background: #fafafa !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.panel-body{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.panel-default{
border-color: none;
}
}
@each $key, $value in (crimson: crimson, teal: #1fb5ad, orange: #ff503f, purple: rebeccapurple, twitter: #55acee){
.rad-bg-#{$key}{
background: $value;
}
.flat-theme.#{$key}{
.rad-logo-container{
background: $value !important;
}
.rad-toggle-btn{
background: darken($value,10) !important;
}
.rad-dropmenu-footer,
.rad-dropmenu-header{
background: darken($value,10) !important;
}
.links{
& > li:not(.no-color){
&:hover{
>a{
background: lighten($value,5) !important;
}
}
}
}
.rad-dropmenu-item{
border-color: darken($value,10) !important;
&:before{
border-color: darken($value,10) transparent;
}
}
.rad-sidebar{
li:hover a>span{
color: $value !important;
}
}
&.sticky {
@media screen and (max-width: 850px){
.rad-toggle-btn{
background: #fafafa !important;
color:#89949B !important;
}
}
.brand-icon,
.rad-toggle-btn:hover{
background: $value !important;
color: #fff !important;
}
}
}
}
</style>
</head>
<body>
<div class="rad-body-wrapper rad-nav-min">
<div class="container-fluid">
<header class="rad-page-title">
<span>Dashboard</span>
<small class="md-txt">Welcome <<LoggedInUser.FirstName>></small> </header>
<!--<small class="md-txt">Welcome <<LoggedInUser.FirstName>>, <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 rad-txt-danger"></i> California</a></small> </header>
-->
<div class="row">
<div class="col-lg-3 col-xs-6" style="
background-color: #f2f2f2;
">
<div class="rad-info-box rad-txt-success" style="
background-color: #f2f2f2;
">
<i class="fa fa-windows"></i>
<span class="heading">My User Profile Group</span>
<span class="value"><span><<LoggedInUser.AccessLevel>> </span><span> </span> </span>
</div>
</div>
<div class="col-lg-3 col-xs-6" style="
background-color: #f2f2f2;
">
<div class="rad-info-box rad-txt-primary">
<i class="fa fa-facebook"></i>
<span class="heading">Products Purchased</span>
<span class="value"><span><<COUNT UserPurchasedProductsList WHERE(UserPurchasedProductsList.ob_User=LoggedInUser)>> </span><span> </span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6" style="
background-color: #f2f2f2;
">
<div class="rad-info-box rad-txt-danger">
<i class="fa fa-google-plus"></i>
<span class="heading">My Credit Balance</span>
<span class="value"><span>PD7 TOKEN:</span><br><span> <<LoggedInUser.AccountBalance>></span><span> </span></span>
</div>
</div>
<div class="col-lg-3 col-xs-6" style="
background-color: #f2f2f2;
">
<div class="rad-info-box">
<i class="fa fa-apple"></i>
<span class="heading">My Team</span>
<span class="value"><span>Direct <<COUNT User WHERE(User.SponserCode=LoggedInUser.UserReferralCode)>> </span><span>InDirect <<COUNT User WHERE(User.SponsersSponserCode=LoggedInUser.UserReferralCode)>></span><span>Total <<COUNT User WHERE(User.SponserCode=LoggedInUser.UserReferralCode OR User.SponsersSponserCode=LoggedInUser.UserReferralCode)>></span></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Intro<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body rad-map-container">
<div id="world-map" class="rad-map"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6" style="display:none">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Area Chart<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="areaChart" class="rad-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">My Activity<ul class="rad-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="rad-activity-body">
<div class="rad-list-group group">
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-danger pull-left"><i class="fa fa-phone"></i></div>
<div class="rad-list-content"><strong>Client meeting</strong>
<div class="md-text">Coming Soon...</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-primary pull-left"><i class="fa fa-refresh"></i></div>
<div class="rad-list-content"><strong>Coming Soon...</strong>
<div class="md-text">Coming Soon...</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-success pull-left"><i class="fa fa-check"></i></div>
<div class="rad-list-content"><strong>Coming Soon...</strong>
<div class="md-text">Coming Soon...</div>
</div>
</div>
<div class="rad-list-group-item">
<div class="rad-list-icon icon-shadow rad-bg-violet pull-left"><i class="fa fa-envelope"></i></div>
<div class="rad-list-content"><strong>Coming Soon...</strong>
<div class="md-text">Coming Soon...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-8 col-xs-12" style="display:none">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Donut Chart<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="donutChart" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-xs-12" style="display:none">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Line Chart<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="lineChart" class="rad-chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-12" style="display:none">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="barChart3" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6" style="display:none">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="barChart2" class="rad-chart"></div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6" style="display:none">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bar Chart<ul class="rad-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><li><i class="fa fa-close"></i>
</li>
</ul></h3>
</div>
<div class="panel-body">
<div id="barChart" class="rad-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">My Chat<ul class="rad-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="rad-chat-body">
<div class="rad-list-group">
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:20 pm</span>
<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
</div>
</div>
<div class="rad-list-group-item right">
<span class="rad-list-icon pull-right"><img class="rad-list-img" src="https://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="user"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">User</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:30 pm</span>
<div class="rad-chat-msg">Coming Soon...Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:31 pm</span>
<div class="rad-chat-msg">Coming Soon...<i class="fa fa-smile-o rad-txt-warning"></i></div>
</div>
</div>
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:20 pm</span>
<div class="rad-chat-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at.</div>
</div>
</div>
<div class="rad-list-group-item right">
<span class="rad-list-icon pull-right"><img class="rad-list-img" src="https://www.gravatar.com/avatar/9099c2946891970eb4739e6455400913.png" alt="sathish"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">User</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:30 pm</span>
<div class="rad-chat-msg">Coming Soon...Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="rad-list-group-item left">
<span class="rad-list-icon pull-left"><img class="rad-list-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me"></span>
<div class="rad-list-content rad-chat">
<span class="lg-text">Me</span>
<span class="sm-text"><i class="fa fa-clock-o"></i> 11:31 pm</span>
<div class="rad-chat-msg">Coming Soon... <i class="fa fa-smile-o rad-txt-warning"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" id="rad-chat-txt" placeholder="Type a message" class="form-control"><span class="input-group-btn"><button id="rad-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">My Timeline<ul class="rad-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="rad-timeline-body">
<ul class="rad-timeline">
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-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="rad-timeline-panel">Coming Soon...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="rad-timeline-item">
<div class="rad-timeline-badge rad-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="rad-timeline-panel pull-right">Coming Soon...Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-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="rad-timeline-panel ">Coming Soon...Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa veniam delectus, ea voluptatum vero mollitia</div>
</li>
<li class="rad-timeline-item">
<div class="rad-timeline-badge rad-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="rad-timeline-panel pull-right">Coming Soon...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="rad-timeline-item">
<div class="rad-timeline-badge rad-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="rad-timeline-panel ">Coming Soon...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="rad-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>
</body>
</html>
