File: /var/www/selfanalyse/counselor/index_demo.html
<!DOCTYPE html>
<html>
<head>
<!-- Title -->
<title>Modern | Admin Dashboard Template</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta charset="UTF-8">
<meta name="description" content="Admin Dashboard Template" />
<meta name="keywords" content="admin,dashboard" />
<meta name="author" content="Steelcoders" />
<!-- Styles -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href="assets/plugins/pace-master/themes/blue/pace-theme-flash.css" rel="stylesheet"/>
<link href="assets/plugins/uniform/css/uniform.default.min.css" rel="stylesheet"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/line-icons/simple-line-icons.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/offcanvasmenueffects/css/menu_cornerbox.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/waves/waves.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/3d-bold-navigation/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/slidepushmenus/css/component.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/weather-icons-master/css/weather-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/metrojs/MetroJs.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/toastr/toastr.min.css" rel="stylesheet" type="text/css"/>
<!-- Theme Styles -->
<link href="assets/css/modern.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/white.css" class="theme-color" rel="stylesheet" type="text/css"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/3d-bold-navigation/js/modernizr.js"></script>
<script src="assets/plugins/offcanvasmenueffects/js/snap.svg-min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="page-header-fixed">
<div class="overlay"></div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s1">
<h3><span class="pull-left">Chat</span><a href="javascript:void(0);" class="pull-right" id="closeRight"><i class="fa fa-times"></i></a></h3>
<div class="slimscroll">
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar2.png" alt=""><span>Sandra smith<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar3.png" alt=""><span>Amily Lee<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar4.png" alt=""><span>Christopher Palmer<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar5.png" alt=""><span>Nick Doe<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar2.png" alt=""><span>Sandra smith<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar3.png" alt=""><span>Amily Lee<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar4.png" alt=""><span>Christopher Palmer<small>Hi! How're you?</small></span></a>
<a href="javascript:void(0);" class="showRight2"><img src="assets/images/avatar5.png" alt=""><span>Nick Doe<small>Hi! How're you?</small></span></a>
</div>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3><span class="pull-left">Sandra Smith</span> <a href="javascript:void(0);" class="pull-right" id="closeRight2"><i class="fa fa-angle-right"></i></a></h3>
<div class="slimscroll chat">
<div class="chat-item chat-item-left">
<div class="chat-image">
<img src="assets/images/avatar2.png" alt="">
</div>
<div class="chat-message">
Hi There!
</div>
</div>
<div class="chat-item chat-item-right">
<div class="chat-message">
Hi! How are you?
</div>
</div>
<div class="chat-item chat-item-left">
<div class="chat-image">
<img src="assets/images/avatar2.png" alt="">
</div>
<div class="chat-message">
Fine! do you like my project?
</div>
</div>
<div class="chat-item chat-item-right">
<div class="chat-message">
Yes, It's clean and creative, good job!
</div>
</div>
<div class="chat-item chat-item-left">
<div class="chat-image">
<img src="assets/images/avatar2.png" alt="">
</div>
<div class="chat-message">
Thanks, I tried!
</div>
</div>
<div class="chat-item chat-item-right">
<div class="chat-message">
Good luck with your sales!
</div>
</div>
</div>
<div class="chat-write">
<form class="form-horizontal" action="javascript:void(0);">
<input type="text" class="form-control" placeholder="Say something">
</form>
</div>
</nav>
<div class="menu-wrap">
<nav class="profile-menu">
<div class="profile"><img src="assets/images/avatar1.png" width="52" alt="David Green"/><span>David Green</span></div>
<div class="profile-menu-list">
<a href="#"><i class="fa fa-star"></i><span>Favorites</span></a>
<a href="#"><i class="fa fa-bell"></i><span>Alerts</span></a>
<a href="#"><i class="fa fa-envelope"></i><span>Messages</span></a>
<a href="#"><i class="fa fa-comment"></i><span>Comments</span></a>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
</div>
<form class="search-form" action="#" method="GET">
<div class="input-group">
<input type="text" name="search" class="form-control search-input" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default close-search waves-effect waves-button waves-classic" type="button"><i class="fa fa-times"></i></button>
</span>
</div><!-- Input Group -->
</form><!-- Search Form -->
<main class="page-content content-wrap">
<div class="navbar">
<div class="navbar-inner">
<div class="sidebar-pusher">
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic push-sidebar">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo-box">
<a href="index.html" class="logo-text"><span>Modern</span></a>
</div><!-- Logo Box -->
<div class="search-button">
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic show-search"><i class="fa fa-search"></i></a>
</div>
<div class="topmenu-outer">
<div class="top-menu">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic sidebar-toggle"><i class="fa fa-bars"></i></a>
</li>
<li>
<a href="#cd-nav" class="waves-effect waves-button waves-classic cd-nav-trigger"><i class="fa fa-diamond"></i></a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic toggle-fullscreen"><i class="fa fa-expand"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<i class="fa fa-cogs"></i>
</a>
<ul class="dropdown-menu dropdown-md dropdown-list theme-settings" role="menu">
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Fixed Header
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</li>
</ul>
</li>
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Fixed Sidebar
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-sidebar-check">
</div>
</li>
<li class="no-link" role="presentation">
Horizontal bar
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right horizontal-bar-check">
</div>
</li>
<li class="no-link" role="presentation">
Toggle Sidebar
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right toggle-sidebar-check">
</div>
</li>
<li class="no-link" role="presentation">
Compact Menu
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right compact-menu-check">
</div>
</li>
<li class="no-link" role="presentation">
Hover Menu
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right hover-menu-check">
</div>
</li>
</ul>
</li>
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Boxed Layout
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right boxed-layout-check">
</div>
</li>
</ul>
</li>
<li class="li-group">
<ul class="list-unstyled">
<li class="no-link" role="presentation">
Choose Theme Color
<div class="color-switcher">
<a class="colorbox color-blue" href="?theme=blue" title="Blue Theme" data-css="blue"></a>
<a class="colorbox color-green" href="?theme=green" title="Green Theme" data-css="green"></a>
<a class="colorbox color-red" href="?theme=red" title="Red Theme" data-css="red"></a>
<a class="colorbox color-white" href="?theme=white" title="White Theme" data-css="white"></a>
<a class="colorbox color-purple" href="?theme=purple" title="purple Theme" data-css="purple"></a>
<a class="colorbox color-dark" href="?theme=dark" title="Dark Theme" data-css="dark"></a>
</div>
</li>
</ul>
</li>
<li class="no-link"><button class="btn btn-default reset-options">Reset Options</button></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic show-search"><i class="fa fa-search"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="badge badge-success pull-right">4</span></a>
<ul class="dropdown-menu title-caret dropdown-lg" role="menu">
<li><p class="drop-title">You have 4 new messages !</p></li>
<li class="dropdown-menu-list slimscroll messages">
<ul class="list-unstyled">
<li>
<a href="#">
<div class="msg-img"><div class="online on"></div><img class="img-circle" src="assets/images/avatar2.png" alt=""></div>
<p class="msg-name">Sandra Smith</p>
<p class="msg-text">Hey ! I'm working on your project</p>
<p class="msg-time">3 minutes ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online off"></div><img class="img-circle" src="assets/images/avatar4.png" alt=""></div>
<p class="msg-name">Amily Lee</p>
<p class="msg-text">Hi David !</p>
<p class="msg-time">8 minutes ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online off"></div><img class="img-circle" src="assets/images/avatar3.png" alt=""></div>
<p class="msg-name">Christopher Palmer</p>
<p class="msg-text">See you soon !</p>
<p class="msg-time">56 minutes ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online on"></div><img class="img-circle" src="assets/images/avatar5.png" alt=""></div>
<p class="msg-name">Nick Doe</p>
<p class="msg-text">Nice to meet you</p>
<p class="msg-time">2 hours ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online on"></div><img class="img-circle" src="assets/images/avatar2.png" alt=""></div>
<p class="msg-name">Sandra Smith</p>
<p class="msg-text">Hey ! I'm working on your project</p>
<p class="msg-time">5 hours ago</p>
</a>
</li>
<li>
<a href="#">
<div class="msg-img"><div class="online off"></div><img class="img-circle" src="assets/images/avatar4.png" alt=""></div>
<p class="msg-name">Amily Lee</p>
<p class="msg-text">Hi David !</p>
<p class="msg-time">9 hours ago</p>
</a>
</li>
</ul>
</li>
<li class="drop-all"><a href="#" class="text-center">All Messages</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"><i class="fa fa-bell"></i><span class="badge badge-success pull-right">3</span></a>
<ul class="dropdown-menu title-caret dropdown-lg" role="menu">
<li><p class="drop-title">You have 3 pending tasks !</p></li>
<li class="dropdown-menu-list slimscroll tasks">
<ul class="list-unstyled">
<li>
<a href="#">
<div class="task-icon badge badge-success"><i class="icon-user"></i></div>
<span class="badge badge-roundless badge-default pull-right">1min ago</span>
<p class="task-details">New user registered.</p>
</a>
</li>
<li>
<a href="#">
<div class="task-icon badge badge-danger"><i class="icon-energy"></i></div>
<span class="badge badge-roundless badge-default pull-right">24min ago</span>
<p class="task-details">Database error.</p>
</a>
</li>
<li>
<a href="#">
<div class="task-icon badge badge-info"><i class="icon-heart"></i></div>
<span class="badge badge-roundless badge-default pull-right">1h ago</span>
<p class="task-details">Reached 24k likes</p>
</a>
</li>
</ul>
</li>
<li class="drop-all"><a href="#" class="text-center">All Tasks</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<span class="user-name">David<i class="fa fa-angle-down"></i></span>
<img class="img-circle avatar" src="assets/images/avatar1.png" width="40" height="40" alt="">
</a>
<ul class="dropdown-menu dropdown-list" role="menu">
<li role="presentation"><a href="profile.html"><i class="fa fa-user"></i>Profile</a></li>
<li role="presentation"><a href="calendar.html"><i class="fa fa-calendar"></i>Calendar</a></li>
<li role="presentation"><a href="inbox.html"><i class="fa fa-envelope"></i>Inbox<span class="badge badge-success pull-right">4</span></a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="lock-screen.html"><i class="fa fa-lock"></i>Lock screen</a></li>
<li role="presentation"><a href="login.html"><i class="fa fa-sign-out m-r-xs"></i>Log out</a></li>
</ul>
</li>
<li>
<a href="login.html" class="log-out waves-effect waves-button waves-classic">
<span><i class="fa fa-sign-out m-r-xs"></i>Log out</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect waves-button waves-classic" id="showRight">
<i class="fa fa-comments"></i>
</a>
</li>
</ul><!-- Nav -->
</div><!-- Top Menu -->
</div>
</div>
</div><!-- Navbar -->
<div class="page-sidebar sidebar">
<div class="page-sidebar-inner slimscroll">
<div class="sidebar-header">
<div class="sidebar-profile">
<a href="javascript:void(0);" id="profile-menu-link">
<div class="sidebar-profile-image">
<img src="assets/images/avatar1.png" class="img-circle img-responsive" alt="">
</div>
<div class="sidebar-profile-details">
<span>David Green<br><small>Art Director</small></span>
</div>
</a>
</div>
</div>
<ul class="menu accordion-menu">
<li class="active"><a href="index.html" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-home"></span><p>Dashboard</p></a></li>
<li><a href="profile.html" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-user"></span><p>Profile</p></a></li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-envelope"></span><p>Mailbox</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="inbox.html">Inbox</a></li>
<li><a href="message-view.html">View Message</a></li>
<li><a href="compose.html">Compose</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-briefcase"></span><p>UI Kits</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-icons.html">Icons</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-notifications.html">Notifications</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-panels.html">Panels</a></li>
<li><a href="ui-progress.html">Progress Bars</a></li>
<li><a href="ui-nestable.html">Nestable</a></li>
<li><a href="ui-tree-view.html">Tree View</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-th"></span><p>Layouts</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="layout-blank.html">Blank Page</a></li>
<li><a href="layout-boxed.html">Boxed Page</a></li>
<li><a href="layout-horizontal-menu.html">Horizontal Menu</a></li>
<li><a href="layout-horizontal-menu-boxed.html">Boxed & Horizontal Menu</a></li>
<li><a href="layout-horizontal-menu-minimal.html">Horizontal Menu Minimal</a></li>
<li><a href="layout-fixed-sidebar.html">Fixed Sidebar</a></li>
<li><a href="layout-static-header.html">Static Header</a></li>
<li><a href="layout-collapsed-sidebar.html">Collapsed Sidebar</a></li>
<li><a href="layout-compact-menu.html">Compact Menu</a></li>
<li><a href="layout-hover-menu.html">Hover Menu</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-list"></span><p>Tables</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="table-static.html">Static Tables</a></li>
<li><a href="table-responsive.html">Responsive Tables</a></li>
<li><a href="table-data.html">Data Tables</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-edit"></span><p>Forms</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-upload.html">File Upload</a></li>
<li><a href="form-image-crop.html">Image Crop</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-x-editable.html">X-editable</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-stats"></span><p>Charts</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="charts-sparkline.html">Sparkline</a></li>
<li><a href="charts-rickshaw.html">Rickshaw</a></li>
<li><a href="charts-morris.html">Morris</a></li>
<li><a href="charts-flotchart.html">Flotchart</a></li>
<li><a href="charts-chartjs.html">Chart.js</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-log-in"></span><p>Login</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="login.html">Login Form</a></li>
<li><a href="register.html">Register Form</a></li>
<li><a href="forgot.html">Forgot Password</a></li>
<li><a href="lock-screen.html">Lock Screen</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-map-marker"></span><p>Maps</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="maps-google.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-gift"></span><p>Extra</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="404.html">404 Page</a></li>
<li><a href="500.html">500 Page</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="search.html">Search Results</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li class="droplink"><a href="#" class="waves-effect waves-button"><span class="menu-icon glyphicon glyphicon-flash"></span><p>Levels</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li class="droplink"><a href="#"><p>Level 1.1</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li class="droplink"><a href="#"><p>Level 2.1</p><span class="arrow"></span></a>
<ul class="sub-menu">
<li><a href="#">Level 3.1</a></li>
</ul>
</li>
<li><a href="#">Level 2.2</a></li>
</ul>
</li>
<li><a href="#">Level 1.2</a></li>
</ul>
</li>
</ul>
</div><!-- Page Sidebar Inner -->
</div><!-- Page Sidebar -->
<div class="page-inner">
<div class="page-title">
<h3>Dashboard</h3>
<div class="page-breadcrumb">
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li class="active">Dashboard</li>
</ol>
</div>
</div>
<div id="main-wrapper">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel info-box panel-white">
<div class="panel-body">
<div class="info-box-stats">
<p class="counter">107,200</p>
<span class="info-box-title">User activity this month</span>
</div>
<div class="info-box-icon">
<i class="icon-users"></i>
</div>
<div class="info-box-progress">
<div class="progress progress-xs progress-squared bs-n">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel info-box panel-white">
<div class="panel-body">
<div class="info-box-stats">
<p class="counter">340,230</p>
<span class="info-box-title">Page views</span>
</div>
<div class="info-box-icon">
<i class="icon-eye"></i>
</div>
<div class="info-box-progress">
<div class="progress progress-xs progress-squared bs-n">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel info-box panel-white">
<div class="panel-body">
<div class="info-box-stats">
<p>$<span class="counter">653,000</span></p>
<span class="info-box-title">Monthly revenue goal</span>
</div>
<div class="info-box-icon">
<i class="icon-basket"></i>
</div>
<div class="info-box-progress">
<div class="progress progress-xs progress-squared bs-n">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel info-box panel-white">
<div class="panel-body">
<div class="info-box-stats">
<p class="counter">47,500</p>
<span class="info-box-title">New emails recieved</span>
</div>
<div class="info-box-icon">
<i class="icon-envelope"></i>
</div>
<div class="info-box-progress">
<div class="progress progress-xs progress-squared bs-n">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Row -->
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="panel panel-white">
<div class="row">
<div class="col-sm-8">
<div class="visitors-chart">
<div class="panel-heading">
<h4 class="panel-title">Visitors</h4>
</div>
<div class="panel-body">
<div id="flotchart1"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="stats-info">
<div class="panel-heading">
<h4 class="panel-title">Browser Stats</h4>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Google Chrome<div class="text-success pull-right">32%<i class="fa fa-level-up"></i></div></li>
<li>Firefox<div class="text-success pull-right">25%<i class="fa fa-level-up"></i></div></li>
<li>Internet Explorer<div class="text-success pull-right">16%<i class="fa fa-level-up"></i></div></li>
<li>Safari<div class="text-danger pull-right">13%<i class="fa fa-level-down"></i></div></li>
<li>Opera<div class="text-danger pull-right">7%<i class="fa fa-level-down"></i></div></li>
<li>Mobile & tablet<div class="text-success pull-right">4%<i class="fa fa-level-up"></i></div></li>
<li>Others<div class="text-success pull-right">3%<i class="fa fa-level-up"></i></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-white" style="height: 100%;">
<div class="panel-heading">
<h4 class="panel-title">Server Load</h4>
<div class="panel-control">
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Expand/Collapse" class="panel-collapse"><i class="icon-arrow-down"></i></a>
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Reload" class="panel-reload"><i class="icon-reload"></i></a>
</div>
</div>
<div class="panel-body">
<div class="server-load">
<div class="server-stat">
<span>Total Usage</span>
<p>67GB</p>
</div>
<div class="server-stat">
<span>Total Space</span>
<p>320GB</p>
</div>
<div class="server-stat">
<span>CPU</span>
<p>57%</p>
</div>
</div>
<div id="flotchart2"></div>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6">
<div class="panel panel-white">
<div class="panel-heading">
<h4 class="panel-title">Weather</h4>
<div class="panel-control">
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Reload" class="panel-reload"><i class="icon-reload"></i></a>
</div>
</div>
<div class="panel-body">
<div class="weather-widget">
<div class="row">
<div class="col-md-12">
<div class="weather-top">
<div class="weather-current pull-left">
<i class="wi wi-day-cloudy weather-icon"></i>
<p><span>83<sup>°F</sup></span></p>
</div>
<h2 class="weather-day pull-right">Miami, FL<br><small><b>13th April, 2015</b></small></h2>
</div>
</div>
<div class="col-md-6">
<ul class="list-unstyled weather-info">
<li>Wind <span class="pull-right"><b>ESE 16 mph</b></span></li>
<li>Humidity <span class="pull-right"><b>64%</b></span></li>
<li>Pressure <span class="pull-right"><b>30.15 in</b></span></li>
<li>UV Index <span class="pull-right"><b>6</b></span></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled weather-info">
<li>Cloud Cover <span class="pull-right"><b>60%</b></span></li>
<li>Ceiling <span class="pull-right"><b>17800 ft</b></span></li>
<li>Dew Point <span class="pull-right"><b>70° F</b></span></li>
<li>Visibility <span class="pull-right"><b>10 mi</b></span></li>
</ul>
</div>
<div class="col-md-12">
<ul class="list-unstyled weather-days row">
<li class="col-xs-4 col-sm-2"><span>12:00</span><i class="wi wi-day-cloudy"></i><span>82<sup>°F</sup></span></li>
<li class="col-xs-4 col-sm-2"><span>13:00</span><i class="wi wi-day-cloudy"></i><span>82<sup>°F</sup></span></li>
<li class="col-xs-4 col-sm-2"><span>14:00</span><i class="wi wi-day-cloudy"></i><span>82<sup>°F</sup></span></li>
<li class="col-xs-4 col-sm-2"><span>15:00</span><i class="wi wi-day-cloudy"></i><span>83<sup>°F</sup></span></li>
<li class="col-xs-4 col-sm-2"><span>16:00</span><i class="wi wi-day-cloudy"></i><span>82<sup>°F</sup></span></li>
<li class="col-xs-4 col-sm-2"><span>17:00</span><i class="wi wi-day-sunny-overcast"></i><span>82<sup>°F</sup></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-white">
<div class="panel-heading">
<h4 class="panel-title">Inbox</h4>
<div class="panel-control">
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Reload" class="panel-reload"><i class="icon-reload"></i></a>
</div>
</div>
<div class="panel-body">
<div class="inbox-widget slimscroll">
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/avatar2.png" class="img-circle" alt=""></div>
<p class="inbox-item-author">Sandra Smith</p>
<p class="inbox-item-text">Hey! I'm working on your...</p>
<p class="inbox-item-date">13:40 PM</p>
</div>
</a>
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/avatar3.png" class="img-circle" alt=""></div>
<p class="inbox-item-author">Christopher</p>
<p class="inbox-item-text">I've finished it! See you so...</p>
<p class="inbox-item-date">13:34 PM</p>
</div>
</a>
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/avatar4.png" class="img-circle" alt=""></div>
<p class="inbox-item-author">Amily Lee</p>
<p class="inbox-item-text">This theme is awesome!</p>
<p class="inbox-item-date">13:17 PM</p>
</div>
</a>
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/avatar5.png" class="img-circle" alt=""></div>
<p class="inbox-item-author">Nick Doe</p>
<p class="inbox-item-text">Nice to meet you</p>
<p class="inbox-item-date">12:20 PM</p>
</div>
</a>
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/avatar2.png" class="img-circle" alt=""></div>
<p class="inbox-item-author">Sandra Smith</p>
<p class="inbox-item-text">Hey! I'm working on your...</p>
<p class="inbox-item-date">10:15 AM</p>
</div>
</a>
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/images/avatar4.png" class="img-circle" alt=""></div>
<p class="inbox-item-author">Amily Lee</p>
<p class="inbox-item-text">This theme is awesome!</p>
<p class="inbox-item-date">9:56 AM</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel twitter-box">
<div class="panel-body">
<div class="live-tile" data-mode="flip" data-speed="750" data-delay="3000">
<span class="tile-title pull-right">New Tweets</span>
<i class="fa fa-twitter"></i>
<div><h2 class="no-m">It’s kind of fun to do the impossible...</h2><span class="tile-date">10 April, 2015</span></div>
<div><h2 class="no-m">Sometimes by losing a battle you find a new way to win the war...</h2><span class="tile-date">6 April, 2015</span></div>
</div>
</div>
</div>
<div class="panel facebook-box">
<div class="panel-body">
<div class="live-tile" data-mode="carousel" data-direction="horizontal" data-speed="750" data-delay="4500">
<span class="tile-title pull-right">Facebook Feed</span>
<i class="fa fa-facebook"></i>
<div><h2 class="no-m">If you're going through hell, keep going...</h2><span class="tile-date">23 March, 2015</span></div>
<div><h2 class="no-m">To improve is to change; to be perfect is to change often...</h2><span class="tile-date">15 March, 2015</span></div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12">
<div class="panel panel-white">
<div class="panel-heading">
<h4 class="panel-title">Project Stats</h4>
</div>
<div class="panel-body">
<div class="table-responsive project-stats">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Project</th>
<th>Status</th>
<th>Manager</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">452</th>
<td>Mailbox Template</td>
<td><span class="label label-info">Pending</span></td>
<td>David Green</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">327</th>
<td>Wordpress Theme</td>
<td><span class="label label-primary">In Progress</span></td>
<td>Sandra Smith</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">226</th>
<td>Modern Admin Template</td>
<td><span class="label label-success">Finished</span></td>
<td>Chritopher Palmer</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">178</th>
<td>eCommerce template</td>
<td><span class="label label-danger">Canceled</span></td>
<td>Amily Lee</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">157</th>
<td>Website PSD</td>
<td><span class="label label-info">Testing</span></td>
<td>Nick Doe</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">157</th>
<td>Fronted Theme</td>
<td><span class="label label-warning">Waiting</span></td>
<td>David Green</td>
<td>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div><!-- Main Wrapper -->
<div class="page-footer">
<p class="no-s">2015 © Modern by Steelcoders.</p>
</div>
</div><!-- Page Inner -->
</main><!-- Page Content -->
<nav class="cd-nav-container" id="cd-nav">
<header>
<h3>Navigation</h3>
<a href="#0" class="cd-close-nav">Close</a>
</header>
<ul class="cd-nav list-unstyled">
<li class="cd-selected" data-menu="index">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-home"></i>
</span>
<p>Dashboard</p>
</a>
</li>
<li data-menu="profile">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-user"></i>
</span>
<p>Profile</p>
</a>
</li>
<li data-menu="inbox">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-envelope"></i>
</span>
<p>Mailbox</p>
</a>
</li>
<li data-menu="#">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-tasks"></i>
</span>
<p>Tasks</p>
</a>
</li>
<li data-menu="#">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-cog"></i>
</span>
<p>Settings</p>
</a>
</li>
<li data-menu="calendar">
<a href="javsacript:void(0);">
<span>
<i class="glyphicon glyphicon-calendar"></i>
</span>
<p>Calendar</p>
</a>
</li>
</ul>
</nav>
<div class="cd-overlay"></div>
<!-- Javascripts -->
<script src="assets/plugins/jquery/jquery-2.1.3.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/plugins/pace-master/pace.min.js"></script>
<script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/switchery/switchery.min.js"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js"></script>
<script src="assets/plugins/offcanvasmenueffects/js/classie.js"></script>
<script src="assets/plugins/offcanvasmenueffects/js/main.js"></script>
<script src="assets/plugins/waves/waves.min.js"></script>
<script src="assets/plugins/3d-bold-navigation/js/main.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/jquery-counterup/jquery.counterup.min.js"></script>
<script src="assets/plugins/toastr/toastr.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.symbol.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="assets/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="assets/plugins/curvedlines/curvedLines.js"></script>
<script src="assets/plugins/metrojs/MetroJs.min.js"></script>
<script src="assets/js/modern.js"></script>
<script src="assets/js/pages/dashboard.js"></script>
</body>
</html>