<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">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
background-color: white;
}
.topbar {
background: #2A3F54;
border-color: #2A3F54;
border-radius: 0px;
}
.topbar .navbar-header a {
color: #ffffff;
}
.wrapper {
padding-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar {
z-index: 1000;
position: fixed;
top: 50px;
left: -50px;
width: 50px;
height: 100%;
overflow-y: auto;
background: black;
color: #ffffff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.main {
width: 100%;
position: relative;
padding-bottom:20px;
}
.wrapper.toggled {
padding-left: 50px;
}
.wrapper.toggled .sidebar {
left: 0;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 52px;
width: 50px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #e8e8e8;
padding: 0;
text-align:center;
}
.sidebar-nav li a:hover, .sidebar-nav li.active a {
text-decoration: none;
color: #fff;
background: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav li span, .subbar li span {
display : none;
}
nav.subbar {
position: relative;
width: 100%;
border-radius: 0px;
background: #fff;
margin: 50px 0 -50px 0;
padding: 10px 0 0 0;
z-index: 2;
}
nav.subbar > ul.nav.nav-tabs {
padding: 0 5px;
}
nav.subbar > ul.nav.nav-tabs > li.active > a {
background: #dedede;
border-top: 1px solid #a6a6a6;
border-left: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
border-radius: 0px;
}
.content {
margin-top: 70px;
padding: 0 30px;
}
@media(min-width:768px){
.subbar li span {
display: inline;
}
}
@media(min-width:992px) {
.wrapper {
padding-left: 50px;
}
.sidebar {
left: 0;
width: 50px;
}
.wrapper.toggled {
padding-left: 200px;
}
.wrapper.toggled .sidebar, .wrapper.toggled .sidebar-nav {
width: 200px;
}
.wrapper.toggled .sidebar-nav li a {
text-align: left;
padding: 0 0 0 10px;
}
.wrapper.toggled .sidebar-nav li span {
display: inline;
}
}
.navbar-btn {
background: none;
border: none;
height: 35px;
min-width: 35px;
color: #fff;
}
.navbar-text {
margin-top: 14px;
margin-bottom: 14px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-left: 15px;
margin-right: 15px;
}
}
.panel-actions {
margin-top: -20px;
margin-bottom: 0;
text-align: right;
}
.panel-actions a {
color:#333;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.shape{
border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
-ms-transform:rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
transform:rotate(360deg);
}
.offer{
background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden;
}
.offer:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform:rotate scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.shape {
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-radius{
border-radius:7px;
}
.offer-danger { border-color: #d9534f; }
.offer-danger .shape{
border-color: transparent #d9534f transparent transparent;
}
.offer-success { border-color: #5cb85c; }
.offer-success .shape{
border-color: transparent #5cb85c transparent transparent;
}
.offer-default { border-color: #999999; }
.offer-default .shape{
border-color: transparent #999999 transparent transparent;
}
.offer-primary { border-color: #428bca; }
.offer-primary .shape{
border-color: transparent #428bca transparent transparent;
}
.offer-info { border-color: #5bc0de; }
.offer-info .shape{
border-color: transparent #5bc0de transparent transparent;
}
.offer-warning { border-color: #f0ad4e; }
.offer-warning .shape{
border-color: transparent #f0ad4e transparent transparent;
}
.shape-text{
color:#fff; font-size:12px; font-weight:bold; position:relative; right:-40px; top:2px; white-space: nowrap;
-ms-transform:rotate(30deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
transform:rotate(30deg);
}
.offer-content{
padding:0 20px 10px;
}
@media (min-width: 487px) {
.container {
max-width: 750px;
}
.col-sm-6 {
width: 50%;
}
}
@media (min-width: 900px) {
.container {
max-width: 970px;
}
.col-md-4 {
width: 33.33333333333333%;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
.col-lg-3 {
width: 25%;
}
}
.panel.work-progress-table > .panel-heading {
background: none repeat scroll 0 0 #efefef;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
color: #333333;
float: left;
font-family: roboto;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.3px;
padding: 17px 30px 11px;
width: 100%;
}
.work-progress-table > .panel-heading > i {
color: #888888;
float: left;
font-family: Lato;
font-size: 11px;
font-style: normal;
letter-spacing: 0.3px;
line-height: 10px;
margin-bottom: 10px;
margin-top: 7px;
width: 100%;
}
.panel-default > .panel-heading > .dropdown {
float: right;
margin-top: -42px;
}
/* Work Progress table */
.panel.work-progress-table {
border: medium none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
box-shadow: none;
float: left;
margin: 0;
width: 100%;
}
.panel.work-progress-table > .panel-heading {
background: none repeat scroll 0 0 #efefef;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
color: #333333;
float: left;
font-family: roboto;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.3px;
padding: 17px 30px 11px;
width: 100%;
}
.work-progress-table > .panel-heading > i {
color: #888888;
float: left;
font-family: Lato;
font-size: 11px;
font-style: normal;
letter-spacing: 0.3px;
line-height: 10px;
margin-bottom: 10px;
margin-top: 7px;
width: 100%;
}
.panel-default > .panel-heading > .dropdown {
float: right;
margin-top: -42px;
}
.work-progress-table td .progress {
background: none repeat scroll 0 0 #f3f3f3;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
height: 6px;
margin: 7px 0 0;
overflow: visible;
}
.work-progress-table td .progress > .progress-bar {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
position: relative;
}
.work-progress-table td .progress > .progress-bar > span {
background: none repeat scroll 0 0 #8d8d8d;
font-family: Roboto;
font-size: 10px;
height: 18px;
line-height: 18px;
margin-top: -9px;
position: absolute;
right: 0;
top: 50%;
width: 31px;
}
.work-progress-table .table td {
padding: 15px 10px;
}
.work-progress-table .table td {
font-family: Lato;
font-size: 13px;
letter-spacing: 0.3px;
padding: 15px 10px;
}
.red, .support-ticket .removed, .edit-remove > li > .remove, .friend-list li > span.offline:before {
background: -moz-linear-gradient(top, #ff5959 0%, #ff3b3b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b3b), color-stop(100%,#f9f9f9));
background: -webkit-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: -o-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: -ms-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: linear-gradient(to bottom, #ff5959 0%,#ff3b3b 100%);
color: #fff;
}
</style>
<script>
$(document).ready(function () {
//Toggle fullscreen
$("#panel-fullscreen").click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.children('i').hasClass('glyphicon-resize-full'))
{
$this.children('i').removeClass('glyphicon-resize-full');
$this.children('i').addClass('glyphicon-resize-small');
}
else if ($this.children('i').hasClass('glyphicon-resize-small'))
{
$this.children('i').removeClass('glyphicon-resize-small');
$this.children('i').addClass('glyphicon-resize-full');
}
$(this).closest('.panel').toggleClass('panel-fullscreen');
});
});
</script>
<link id="themecss" rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
var performanceData = [
{ quarter: 0, min: 3, max: 9, values: [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67] },
{ quarter: 1, min: 12, max: 23, values: [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7] },
{ quarter: 2, min: 1, max: 17, values: [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57] },
{ quarter: 3, min: -3, max: 12, values: [13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7] }
];
$(function () {
$("#quarterChart").shieldChart({
exportOptions: {
image: false,
print: false
},
seriesSettings: {
rangebar: {
enablePointSelection: true
}
},
tooltipSettings: {
customPointText: "Low Value: <b>{point.low}</b><br />High Value:<b>{point.high}</b>"
},
axisY: {
title: {
text: "Quarter Overview"
}
},
axisX: {
categoricalValues: ["Q1", "Q2", "Q3", "Q4"]
},
primaryHeader: {
text: "Quarterly Performance"
},
dataSeries: [{
seriesType: "rangebar",
collectionAlias: "Low/High",
data: $.map(performanceData, function (item, index) {
return [[item.min, item.max]];
})
}],
events: {
pointSelect: function (args) {
var detailData = performanceData[args.point.x].values,
detailChartElement = $("#detailChart"),
detailChart = detailChartElement.swidget(),
initialOptions = detailChart.initialOptions,
headerText = args.point.name + " Performance";
detailChart.destroy();
detailChartElement.shieldChart($.extend(initialOptions, {
primaryHeader: {
text: headerText
},
dataSeries: [{
seriesType: "line",
collectionAlias: "Q Data",
data: detailData
}]
}));
}
}
});
$("#detailChart").shieldChart({
exportOptions: {
image: false,
print: false
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
primaryHeader: {
text: "Q1 Performance"
},
dataSeries: [{
seriesType: "line",
collectionAlias: "Q Data",
data: performanceData[0].values
}]
});
});
});
</script>
<script type="text/javascript">
jQuery(function ($) {
var data1 = [12, 3, 4, 2];
var data2 = [3, 9, 12, 14];
$(function () {
$("#chart1").shieldChart({
exportOptions: {
image: false,
print: false
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
dataSeries: [{
seriesType: "pie",
enablePointSelection: true,
data: data1
}]
});
$("#chart2").shieldChart({
exportOptions: {
image: false,
print: false
},
seriesSettings: {
pie: {
enablePointSelection: true,
borderColor: 'black',
borderWidth: 3,
dataPointText:
{
style: {
fontWeight: 'bold'
}
}
}
},
axisY: {
title: {
text: "Break-Down for selected quarter"
}
},
dataSeries: [{
seriesType: "pie",
data: data2
}]
});
});
});
</script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<nav class="navbar navbar-default navbar-fixed-top topbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<span class="visible-xs">KL</span>
<span class="hidden-xs">Dashboard</span>
</a>
<p class="navbar-text">
<a href="#" class="sidebar-toggle">
<i class="fa fa-bars"></i>
</a>
</p>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">
<li>
<button class="navbar-btn">
<i class="fa fa-bell"></i>
</button>
</li>
<li class="dropdown">
<button class="navbar-btn" data-toggle="dropdown">
<img src="http://lorempixel.com/30/30/people" class="img-circle">
</button>
<ul class="dropdown-menu">
<li><a href="#">Account</a></li>
<li><a href="#">Dashboard</a></li>
<li class="nav-divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<article class="wrapper">
<aside class="sidebar">
<ul class="sidebar-nav">
<li class="active"><a href="#dashboard" data-toggle="tab"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
<li><a href="#configuration" data-toggle="tab"><i class="fa fa-cogs"></i> <span>Configuration</span></a></li>
<li><a href="#users" data-toggle="tab"><i class="fa fa-users"></i> <span>Users</span></a></li>
<li><a href="#mail" data-toggle="tab"><i class="fa fa-envelope"></i> <span>Mail</span></a></li>
<li data-toggle="collapse" data-target="#manage" class="collapsed">
<a href="#"><i class="fa fa-puzzle-piece fa-lg fa-fw sidebar-icon"></i> <span class="arrow">Manage</span></a>
</li>
<ul class="sub-menu collapse" id="manage">
<li><a href="#"><i class="fa fa-angle-double-right"></i> Devices</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Groups</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SIM Cards</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> Users</a></li>
</ul>
</ul>
</aside>
<section class="main">
<section class="tab-content">
<section class="tab-pane active fade in content" id="dashboard">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
Facility map
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
</div>
<div class="panel-body">
<div id="map" style="width:100%;height:550px"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(39.5, -98.35),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh_Q9KeqT2LhhwI5NEg7W94AyseAZNEOE&callback=myMap"></script>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Project Details</h3>
</div>
<div class="panel-body">
<table id="mytable" class="table" style="overflow-x:auto;">
<thead>
<tr>
<th> Project Name</th>
<th>Phone Number</th>
<th>Email</th>
<th style="width:25%">Progress</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hussain</td>
<td>+92-333-5586757</td>
<td>hussain@gmail.com</td>
<td>
<div class="progress">
<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="purple progress-bar">
<span>40%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
<tr>
<td>Noman</td>
<td>+92-333-5586757</td>
<td>noman@gmail.com</td>
<td>
<div class="progress">
<div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="purple progress-bar">
<span>90%</span>
</div>
</div>
</td>
<td><span class="label label-success">Due</span></td>
</tr>
<tr>
<td>Ubaid</td>
<td>+92-333-5586757</td>
<td>ubaid@gmail.com</td>
<td>
<div class="progress">
<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="red progress-bar">
<span>60%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
<tr>
<td>Adnan</td>
<td>+92-333-5586757</td>
<td>adnan@gmail.com</td>
<td>
<div class="progress">
<div style="width: 45%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="red progress-bar">
<span>45%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
<tr>
<td>Saboor</td>
<td>+92-333-5586757</td>
<td>saboor@gmail.com</td>
<td>
<div class="progress">
<div style="width: 89%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="89" role="progressbar" class="green progress-bar">
<span>89%</span>
</div>
</div>
</td>
<td><span class="label label-warning">Suspended</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Project
</div>
<div class="panel-body" >
<div id="chart_wrap" style="overflow:hidden; ">
<div class="table-responsive bs-example widget-shadow">
<div class="col-md-8">
<div class="widget blank no-padding">
<div class="panel panel-default work-progress-table">
<!-- Default panel contents -->
<!-- Table -->
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<div id="chart_wrap" style=" position: relative;
padding-bottom: 100%;
height: 100%;
overflow:hidden;">
<div id="chart" style=" position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;"></div></div>
<script type="text/javascript">
$(function () {
$("#chart").shieldChart({
theme: "light",
isInverted: true,
axisX: {
categoricalValues: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
},
axisY: {
title: {
text: "Visitor statistics"
}
},
primaryHeader: {
text: "Internet usage statistics"
},
dataSeries: [{
seriesType: "bar",
collectionAlias: "Total Visits",
data: [565000, 630400, 743000, 910200, 1170200, 1383000]
}, {
seriesType: "bar",
collectionAlias: "Unique Visits",
data: [152000, 234000, 123000, 348000, 167000, 283000]
}]
});
});
</script>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content
</div>
</div>
</div>
</div>
</div>
</section>
<section class="tab-pane fade" id="configuration">
<nav class="subbar">
<ul class="nav nav-tabs">
<li class="active"><a href="#access" data-toggle="tab"><i class="fa fa-code"></i> <span>System</span></a></li>
<li><a href="#roles" data-toggle="tab"><i class="fa fa-user"></i> <span>Roles</span></a></li>
</ul>
</nav>
<section class="tab-content content">
<section class="tab-pane active fade in" id="access">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/><br/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/><br/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/><br/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/><br/>
</div>
</div>
</div>
</div>
</section>
<section class="tab-pane fade" id="roles">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</div>
<div class="hidden-xs col-sm-4 col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Something
</div>
<div class="panel-body">
<br/><br/><br/>
</div>
</div>
</div>
</div>
</section>
</section>
</section>
<section class="tab-pane fade" id="users">
</section>
<section class="tab-pane fade" id="mail">
</section>
</section>
</section>
</article>
<script type="text/javascript">
$(document).on("click",".sidebar-toggle",function(){
$(".wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
