RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

adjusting size of boxes

pull/143/head
Francesca Sperati 7 years ago
parent
6b90799b4e
commit
bb758ed116
9 changed files with 1327 additions and 369 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -6
      src/assets/scripts/charts/chartJS/index.js
  2. +4
    -0
      src/assets/scripts/charts/easyPieChart/index.js
  3. +4
    -4
      src/assets/scripts/charts/sparkline/index.js
  4. +1
    -1
      src/assets/scripts/vectorMaps/index.js
  5. +244
    -317
      src/charts.html
  6. +651
    -0
      src/charts_.html
  7. +47
    -41
      src/index.html
  8. +123
    -0
      src/sidebar.html
  9. +247
    -0
      src/topbar.html

+ 6
- 6
src/assets/scripts/charts/chartJS/index.js View File

@ -15,19 +15,19 @@ export default (function () {
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label : 'Series A',
backgroundColor : 'rgba(237, 231, 246, 0.5)',
borderColor : COLORS['deep-purple-500'],
pointBackgroundColor : COLORS['deep-purple-700'],
pointBackgroundColor : COLORS['white'],
borderWidth : 2,
data : [60, 50, 70, 60, 50, 70, 60],
data : [60, 50, 70, 85, 50, 70, 60],
}, {
label : 'Series B',
backgroundColor : 'rgba(232, 245, 233, 0.5)',
borderColor : COLORS['blue-500'],
pointBackgroundColor : COLORS['blue-700'],
backgroundColor : 'rgba(189, 225, 242, 0.5)',
borderColor : COLORS['cyan-200'],
pointBackgroundColor : COLORS['white'],
borderWidth : 2,
data : [70, 75, 85, 70, 75, 85, 70],
}],


+ 4
- 0
src/assets/scripts/charts/easyPieChart/index.js View File

@ -4,6 +4,10 @@ import 'easy-pie-chart/dist/jquery.easypiechart.min.js';
export default (function () {
if ($('.easy-pie-chart').length > 0) {
$('.easy-pie-chart').easyPieChart({
lineWidth:7,
lineCap:"square",
scaleColor:false,
animate: 2500,
onStep(from, to, percent) {
this.el.children[0].innerHTML = `${Math.round(percent)} %`;
},


+ 4
- 4
src/assets/scripts/charts/sparkline/index.js View File

@ -10,7 +10,7 @@ export default (function () {
const drawSparklines = () => {
if ($('#sparklinedash').length > 0) {
$('#sparklinedash').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
$('#sparklinedash').sparkline([0, 55, 45, 54, 29, 33, 32, 57, 33, 69, 35], {
type: 'bar',
height: '20',
barWidth: '3',
@ -21,7 +21,7 @@ export default (function () {
}
if ($('#sparklinedash2').length > 0) {
$('#sparklinedash2').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
$('#sparklinedash2').sparkline([0, 55, 45, 54, 29, 33, 32, 57, 33, 69, 35], {
type: 'bar',
height: '20',
barWidth: '3',
@ -32,7 +32,7 @@ export default (function () {
}
if ($('#sparklinedash3').length > 0) {
$('#sparklinedash3').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
$('#sparklinedash3').sparkline([0, 55, 45, 54, 29, 33, 32, 57, 33, 69, 35], {
type: 'bar',
height: '20',
barWidth: '3',
@ -43,7 +43,7 @@ export default (function () {
}
if ($('#sparklinedash4').length > 0) {
$('#sparklinedash4').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
$('#sparklinedash4').sparkline([0, 5, 15, 10, 9, 1, 4, 9, 3, 12, 7,3, 9, 5], {
type: 'bar',
height: '20',
barWidth: '3',


+ 1
- 1
src/assets/scripts/vectorMaps/index.js View File

@ -15,7 +15,7 @@ export default (function () {
<div
id="vmap"
style="
height: 490px;
height: 300px;
position: relative;
overflow: hidden;
background-color: transparent;


+ 244
- 317
src/charts.html View File

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Charts</title>
<title>Dashboard</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
@ -21,8 +22,6 @@
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
@ -55,6 +54,11 @@
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
@ -88,7 +92,20 @@
<!-- @App Content -->
<!-- =================================================== -->
<div>
<!-- #Left Sidebar ==================== -->
<!-- # Sidebar ==================== -->
<div class="sidebar">
<div class="sidebar-inner">
<!-- ### $Sidebar Header ### -->
@ -99,12 +116,9 @@
<div class="peers ai-c fxw-nw">
<div class="peer">
<div class="logo">
<img src="assets/static/images/logo.png" alt="">
<img src="assets/static/images/wisp_logo_white_vertical.svg" alt="">
</div>
</div>
<div class="peer peer-greed">
<h5 class="lh-1 mB-0 logo-text">Adminator</h5>
</div>
</div>
</a>
</div>
@ -120,179 +134,103 @@
<!-- ### $Sidebar Menu ### -->
<ul class="sidebar-menu scrollable pos-r">
<li class="nav-item mT-30 active">
<li class="nav-item mT-30">
<a class="sidebar-link" href="index.html">
<span class="icon-holder">
<i class="c-blue-500 ti-home"></i>
<i class="c-white-500 ti-bar-chart"></i>
</span>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="email.html">
<li class="nav-item active">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-brown-500 ti-email"></i>
<i class="c-white-500 ti-receipt"></i>
</span>
<span class="title">Email</span>
<span class="title">Ads</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="compose.html">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-blue-500 ti-share"></i>
<i class="c-white-500 ti-home"></i>
</span>
<span class="title">Compose</span>
<span class="title">Profile</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="calendar.html">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-deep-orange-500 ti-calendar"></i>
<i class="c-white-500 fa fa-users"></i>
</span>
<span class="title">Calendar</span>
<span class="title">Users</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="chat.html">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-deep-purple-500 ti-comment-alt"></i>
<i class="c-white-500 fa fa-building"></i>
</span>
<span class="title">Chat</span>
<span class="title">Companies</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-indigo-500 ti-bar-chart"></i>
<i class="c-white-500 fa fa-crosshairs"></i>
</span>
<span class="title">Charts</span>
<span class="title">Referees</span>
</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class='sidebar-link' href="forms.html">
<span class="icon-holder">
<i class="c-light-blue-500 ti-pencil"></i>
<i class="c-white-500 ti-comments"></i>
</span>
<span class="title">Forms</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="sidebar-link" href="ui.html">
<span class="icon-holder">
<i class="c-pink-500 ti-palette"></i>
</span>
<span class="title">UI Elements</span>
<span class="title">Reviews</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-orange-500 ti-layout-list-thumb"></i>
</span>
<span class="title">Tables</span>
<span class="arrow">
<i class="ti-angle-right"></i>
<i class="c-white-500 ti-calendar"></i>
</span>
<span class="title">Reports</span>
</a>
<ul class="dropdown-menu">
<li>
<a class='sidebar-link' href="basic-table.html">Basic Table</a>
</li>
<li>
<a class='sidebar-link' href="datatable.html">Data Table</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<li class="nav-item">
<a class='sidebar-link' href="calendar.html" >
<span class="icon-holder">
<i class="c-purple-500 ti-map"></i>
</span>
<span class="title">Maps</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
<i class="c-white-500 fa fa-history"></i>
</span>
<span class="title">History</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="google-maps.html">Google Map</a>
</li>
<li>
<a href="vector-maps.html">Vector Map</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<li class="nav-item">
<a class="sidebar-link" href="ui.html">
<span class="icon-holder">
<i class="c-red-500 ti-files"></i>
</span>
<span class="title">Pages</span>
<span class="arrow">
<i class="ti-angle-right"></i>
<i class="c-white-500 fa fa-cogs"></i>
</span>
<span class="title">Settings</span>
</a>
<ul class="dropdown-menu">
<li>
<a class='sidebar-link' href="blank.html">Blank</a>
</li>
<li>
<a class='sidebar-link' href="404.html">404</a>
</li>
<li>
<a class='sidebar-link' href="500.html">500</a>
</li>
<li>
<a class='sidebar-link' href="signin.html">Sign In</a>
</li>
<li>
<a class='sidebar-link' href="signup.html">Sign Up</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-teal-500 ti-view-list-alt"></i>
</span>
<span class="title">Multiple Levels</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a href="javascript:void(0);">
<span>Menu Item</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0);">
<span>Menu Item</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0);">Menu Item</a>
</li>
<li>
<a href="javascript:void(0);">Menu Item</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- #Main ============================ -->
<div class="page-container">
<!-- ### $Topbar ### -->
<div class="header navbar">
<div class="header-container">
<!-- #LEFT ============================ -->
<ul class="nav-left">
<li>
<a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
@ -306,20 +244,28 @@
</a>
</li>
<li class="search-input">
<input class="form-control" type="text" placeholder="Search...">
<input class="form-control" type="text" placeholder="Search users, companies, or anything..">
</li>
<li class="">
<button type="button" class="btn btn-gradient ">
<i class="fa fa-plus pdd-right-5"></i>
Add new user
</button>
</li>
</ul>
<ul class="nav-right">
<!-- #RIGHT ============================ -->
<!-- #email ============================ -->
<li class="notifications dropdown">
<span class="counter bgc-red">3</span>
<span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<i class="ti-bell"></i>
<i class="ti-email top-notification"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span>
<i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Emails</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
@ -329,14 +275,19 @@
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">John Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">post</span>
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">John Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">5 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</span>
<p class="m-0">
<small class="fsz-xs">5 mins ago</small>
</p>
</div>
</div>
</a>
</li>
@ -346,14 +297,19 @@
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Moo Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">cover image</span>
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Moo Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">15 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</span>
<p class="m-0">
<small class="fsz-xs">7 mins ago</small>
</p>
</div>
</div>
</a>
</li>
@ -363,14 +319,19 @@
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Lee Doe</span>
<span class="c-grey-600">commented on your <span class="text-dark">video</span>
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Lee Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">25 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</span>
<p class="m-0">
<small class="fsz-xs">10 mins ago</small>
</p>
</div>
</div>
</a>
</li>
@ -378,21 +339,21 @@
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
</span>
</li>
</ul>
</li>
<!-- #notifications bell ============================ -->
<li class="notifications dropdown">
<span class="counter bgc-blue">3</span>
<span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<i class="ti-email"></i>
<i class="ti-bell"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Emails</span>
<i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
@ -402,19 +363,14 @@
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">John Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">5 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
<span>
<span class="fw-500">John Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">post</span>
</span>
</div>
</span>
<p class="m-0">
<small class="fsz-xs">5 mins ago</small>
</p>
</div>
</a>
</li>
@ -424,19 +380,14 @@
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Moo Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">15 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
<span>
<span class="fw-500">Moo Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">cover image</span>
</span>
</div>
</span>
<p class="m-0">
<small class="fsz-xs">7 mins ago</small>
</p>
</div>
</a>
</li>
@ -446,19 +397,14 @@
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Lee Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">25 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
<span>
<span class="fw-500">Lee Doe</span>
<span class="c-grey-600">commented on your <span class="text-dark">video</span>
</span>
</div>
</span>
<p class="m-0">
<small class="fsz-xs">10 mins ago</small>
</p>
</div>
</a>
</li>
@ -466,19 +412,26 @@
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
</span>
</li>
</ul>
</li>
<li>
<!-- #vertical line ============================ -->
<div class="verticalLine"> </div>
</li>
<!-- #account ============================ -->
<li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div>
<div class="peer">
<span class="fsz-sm c-grey-900">John Doe</span>
<span class="fsz-sm c-grey-900">Nomit Admin</span>
</div>
<div class="peer mR-10">
<img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/nomit-logo.png" alt="">
</div>
</a>
<ul class="dropdown-menu fsz-sm">
<li>
@ -508,144 +461,118 @@
</li>
</ul>
</li>
<li>
<!-- #vertical line ============================ -->
<div class="verticalLine"> </div>
</li>
<li>
<!-- #logo wisp ============================ -->
<div class="peer logo-top-bar">
<img class="" src="assets/static/images/wisp_logo_horizontal.svg" alt="">
</div>
</li>
</ul>
</div>
</div>
</div> <!--topbar-->
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="row gap-20 masonry pos-r">
<div class="masonry-sizer col-md-6 pos-a"></div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Line Chart</h6>
<div class="mT-30">
<canvas id="line-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Area Chart</h6>
<div class="mT-30">
<canvas id="area-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Scatter Chart</h6>
<div class="mT-30">
<canvas id="scatter-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Bar Chart</h6>
<div class="mT-30">
<canvas id="bar-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">jQuery Sparkline</h6>
<div class="mT-30">
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Line</span>
</div>
<div class="peer">
<span class="sparkline">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Bar</span>
</div>
<div class="peer">
<span class="sparkbar">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Tristate</span>
</div>
<div class="peer">
<span class="sparktri">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Discrete</span>
</div>
<div class="peer">
<span class="sparkdisc">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Bullet</span>
</div>
<div class="peer">
<span class="sparkbull">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw pT-15">
<div class="peer">
<span>Spark Box</span>
<main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
<div id='mainContent row'>
<div class="row content-title mT-60">
<div class="col-8 ml-1 mb-3">
Dashboard
</div>
</div>
<div class=" gap-20 masonry pos-r"> <!-- #content container ===== -->
<div class="masonry-sizer col-md-6"></div>
<div class="masonry-item w-100"> <!-- #First line ========= -->
<div class="row gap-20">
<!-- #Total Ads Views ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Total Ads Views</h6>
</div>
<div class="peer">
<span class="sparkbox">&nbsp;</span>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
<div class="peer peer-greed">
<span id="sparklinedash"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">24K</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Easy Pie Charts</h6>
<div class="mT-30">
<div class="peers mT-20 fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
<span></span>
</div>
<h6 class="fsz-sm">New Users </h6>
<!-- #Successful Matches ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Matches</h6>
</div>
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
<span></span>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
<div class="peer peer-greed">
<span id="sparklinedash2"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">127</span>
</div>
</div>
<h6 class="fsz-sm">New Purchases</h6>
</div>
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="65" data-bar-color='#f44336'>
<span></span>
</div>
<h6 class="fsz-sm">New Customers</h6>
</div>
</div>
<!-- #New Ads ==================== -->
<div class='col-md-4'>
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">New Ads (last month)</h6>
</div>
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
<span></span>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
<div class="peer peer-greed">
<span id="sparklinedash3"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">79</span>
</div>
</div>
<h6 class="fsz-sm">Bounce Rate</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div><!--content container-->
</div><!--page container-->
</main>
</div><!-- page-container -->
</div> <!-- App Content -->
<!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer>
</div>
</div>
</body>
</html>

+ 651
- 0
src/charts_.html View File

@ -0,0 +1,651 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Charts</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
<!-- #Left Sidebar ==================== -->
<div class="sidebar">
<div class="sidebar-inner">
<!-- ### $Sidebar Header ### -->
<div class="sidebar-logo">
<div class="peers ai-c fxw-nw">
<div class="peer peer-greed">
<a class="sidebar-link td-n" href="index.html">
<div class="peers ai-c fxw-nw">
<div class="peer">
<div class="logo">
<img src="assets/static/images/logo.png" alt="">
</div>
</div>
<div class="peer peer-greed">
<h5 class="lh-1 mB-0 logo-text">Adminator</h5>
</div>
</div>
</a>
</div>
<div class="peer">
<div class="mobile-toggle sidebar-toggle">
<a href="" class="td-n">
<i class="ti-arrow-circle-left"></i>
</a>
</div>
</div>
</div>
</div>
<!-- ### $Sidebar Menu ### -->
<ul class="sidebar-menu scrollable pos-r">
<li class="nav-item mT-30 active">
<a class="sidebar-link" href="index.html">
<span class="icon-holder">
<i class="c-blue-500 ti-home"></i>
</span>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="email.html">
<span class="icon-holder">
<i class="c-brown-500 ti-email"></i>
</span>
<span class="title">Email</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="compose.html">
<span class="icon-holder">
<i class="c-blue-500 ti-share"></i>
</span>
<span class="title">Compose</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="calendar.html">
<span class="icon-holder">
<i class="c-deep-orange-500 ti-calendar"></i>
</span>
<span class="title">Calendar</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="chat.html">
<span class="icon-holder">
<i class="c-deep-purple-500 ti-comment-alt"></i>
</span>
<span class="title">Chat</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-indigo-500 ti-bar-chart"></i>
</span>
<span class="title">Charts</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="forms.html">
<span class="icon-holder">
<i class="c-light-blue-500 ti-pencil"></i>
</span>
<span class="title">Forms</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="sidebar-link" href="ui.html">
<span class="icon-holder">
<i class="c-pink-500 ti-palette"></i>
</span>
<span class="title">UI Elements</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-orange-500 ti-layout-list-thumb"></i>
</span>
<span class="title">Tables</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li>
<a class='sidebar-link' href="basic-table.html">Basic Table</a>
</li>
<li>
<a class='sidebar-link' href="datatable.html">Data Table</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-purple-500 ti-map"></i>
</span>
<span class="title">Maps</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="google-maps.html">Google Map</a>
</li>
<li>
<a href="vector-maps.html">Vector Map</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-red-500 ti-files"></i>
</span>
<span class="title">Pages</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li>
<a class='sidebar-link' href="blank.html">Blank</a>
</li>
<li>
<a class='sidebar-link' href="404.html">404</a>
</li>
<li>
<a class='sidebar-link' href="500.html">500</a>
</li>
<li>
<a class='sidebar-link' href="signin.html">Sign In</a>
</li>
<li>
<a class='sidebar-link' href="signup.html">Sign Up</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-teal-500 ti-view-list-alt"></i>
</span>
<span class="title">Multiple Levels</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a href="javascript:void(0);">
<span>Menu Item</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0);">
<span>Menu Item</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0);">Menu Item</a>
</li>
<li>
<a href="javascript:void(0);">Menu Item</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- #Main ============================ -->
<div class="page-container">
<!-- ### $Topbar ### -->
<div class="header navbar">
<div class="header-container">
<ul class="nav-left">
<li>
<a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
<i class="ti-menu"></i>
</a>
</li>
<li class="search-box">
<a class="search-toggle no-pdd-right" href="javascript:void(0);">
<i class="search-icon ti-search pdd-right-10"></i>
<i class="search-icon-close ti-close pdd-right-10"></i>
</a>
</li>
<li class="search-input">
<input class="form-control" type="text" placeholder="Search...">
</li>
</ul>
<ul class="nav-right">
<li class="notifications dropdown">
<span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<i class="ti-bell"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">John Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">post</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">5 mins ago</small>
</p>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Moo Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">cover image</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">7 mins ago</small>
</p>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Lee Doe</span>
<span class="c-grey-600">commented on your <span class="text-dark">video</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">10 mins ago</small>
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
</span>
</li>
</ul>
</li>
<li class="notifications dropdown">
<span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<i class="ti-email"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Emails</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">John Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">5 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Moo Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">15 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Lee Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">25 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
</span>
</li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div>
<div class="peer">
<span class="fsz-sm c-grey-900">John Doe</span>
</div>
</a>
<ul class="dropdown-menu fsz-sm">
<li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-settings mR-10"></i>
<span>Setting</span>
</a>
</li>
<li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-user mR-10"></i>
<span>Profile</span>
</a>
</li>
<li>
<a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-email mR-10"></i>
<span>Messages</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-power-off mR-10"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="row gap-20 masonry pos-r">
<div class="masonry-sizer col-md-6 pos-a"></div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Line Chart</h6>
<div class="mT-30">
<canvas id="line-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Area Chart</h6>
<div class="mT-30">
<canvas id="area-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Scatter Chart</h6>
<div class="mT-30">
<canvas id="scatter-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Bar Chart</h6>
<div class="mT-30">
<canvas id="bar-chart" height="220"></canvas>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">jQuery Sparkline</h6>
<div class="mT-30">
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Line</span>
</div>
<div class="peer">
<span class="sparkline">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Bar</span>
</div>
<div class="peer">
<span class="sparkbar">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Tristate</span>
</div>
<div class="peer">
<span class="sparktri">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Discrete</span>
</div>
<div class="peer">
<span class="sparkdisc">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Bullet</span>
</div>
<div class="peer">
<span class="sparkbull">&nbsp;</span>
</div>
</div>
<div class="peers ai-c jc-sb fxw-nw pT-15">
<div class="peer">
<span>Spark Box</span>
</div>
<div class="peer">
<span class="sparkbox">&nbsp;</span>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Easy Pie Charts</h6>
<div class="mT-30">
<div class="peers mT-20 fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
<span></span>
</div>
<h6 class="fsz-sm">New Users </h6>
</div>
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
<span></span>
</div>
<h6 class="fsz-sm">New Purchases</h6>
</div>
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="65" data-bar-color='#f44336'>
<span></span>
</div>
<h6 class="fsz-sm">New Customers</h6>
</div>
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
<span></span>
</div>
<h6 class="fsz-sm">Bounce Rate</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer>
</div>
</div>
</body>
</html>

+ 47
- 41
src/index.html View File

@ -500,10 +500,10 @@
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-300'>
<main class='main-content bgc-grey-300' style="padding-left: 80px; padding-right: 80px;">
<div id='mainContent row'>
<div class="row content-title">
<div class="col-8 ml-1 mt-7 mb-3">
<div class="row content-title mT-60">
<div class="col-8 ml-1 mb-3">
Dashboard
</div>
</div>
@ -519,11 +519,11 @@
</div>
<div class="layer w-100">
<div class="peers ai-sb fxw-nw">
<div class="peer peer-greed">
<span id="sparklinedash"></span>
</div>
<div class="peer peer-greed">
<span id="sparklinedash"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">24K</span>
</div>
</div>
</div>
@ -542,7 +542,7 @@
<span id="sparklinedash2"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">127</span>
</div>
</div>
</div>
@ -561,7 +561,7 @@
<span id="sparklinedash3"></span>
</div>
<div class="peer">
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">79</span>
</div>
</div>
</div>
@ -605,17 +605,17 @@
<div class="masonry-item w-100">
<div class="row gap-20">
<div class="col-4">
<div class="col-3">
<!-- #Successful Mathches ==================== -->
<div class="bd bgc-white p-20 peer peer-greed">
<div class="bd bgc-white p-20 peer peer-greed" style="height: 400px">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Mathches</h6>
</div>
<!-- Pie Charts -->
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peers pT-50 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#a19ff8'>
<div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
@ -624,9 +624,9 @@
</div>
</div>
</div>
<div class="col-8">
<div class="col-9" >
<!-- #Nationality ==================== -->
<div class="bd bgc-white">
<div class="bd bgc-white" style="height: 400px">
<div class="peers fxw-nw@lg+ ai-s">
<div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
<div class="layers">
@ -685,40 +685,46 @@
</div>
</div>
<!-- #Visitors ==================== -->
<div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Visitors</h6>
<div class="mT-30">
<canvas id="bar-chart" height="120"></canvas>
</div>
<div class="masonry-item w-100">
<div class="row gap-20">
<!-- #Visitors ==================== -->
<div class="col-9">
<div class="bgc-white p-20 bd" style="height: 350px">
<h6 class="c-grey-900">Visitors</h6>
<div class="mT-30">
<canvas id="bar-chart" height="90"></canvas>
</div>
</div>
</div>
</div>
<div class="masonry-item col-4">
<!-- #Visa Types ==================== -->
<div class="bd bgc-white p-20 peer peer-greed">
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Visa Types</h6>
</div>
<!-- Pie Chart -->
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
<div class="col-3">
<!-- #Visa Types ==================== -->
<div class="bd bgc-white p-20 peer peer-greed" style="height: 350px" >
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Visa Types</h6>
</div>
<!-- Pie Chart -->
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<div class="easy-pie-chart" data-size='130' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>


+ 123
- 0
src/sidebar.html View File

@ -0,0 +1,123 @@
<!-- #Left Sidebar ==================== -->
<div class="sidebar">
<div class="sidebar-inner">
<!-- ### $Sidebar Header ### -->
<div class="sidebar-logo">
<div class="peers ai-c fxw-nw">
<div class="peer peer-greed">
<a class="sidebar-link td-n" href="index.html">
<div class="peers ai-c fxw-nw">
<div class="peer">
<div class="logo">
<img src="assets/static/images/wisp_logo_white_vertical.svg" alt="">
</div>
</div>
</div>
</a>
</div>
<div class="peer">
<div class="mobile-toggle sidebar-toggle">
<a href="" class="td-n">
<i class="ti-arrow-circle-left"></i>
</a>
</div>
</div>
</div>
</div>
<!-- ### $Sidebar Menu ### -->
<ul class="sidebar-menu scrollable pos-r">
<li class="nav-item mT-30 active">
<a class="sidebar-link" href="index.html">
<span class="icon-holder">
<i class="c-white-500 ti-bar-chart"></i>
</span>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-white-500 ti-receipt"></i>
</span>
<span class="title">Ads</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-white-500 ti-home"></i>
</span>
<span class="title">Profile</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-users"></i>
</span>
<span class="title">Users</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-building"></i>
</span>
<span class="title">Companies</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-crosshairs"></i>
</span>
<span class="title">Referees</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="forms.html">
<span class="icon-holder">
<i class="c-white-500 ti-comments"></i>
</span>
<span class="title">Reviews</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<span class="icon-holder">
<i class="c-white-500 ti-calendar"></i>
</span>
<span class="title">Reports</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="calendar.html" >
<span class="icon-holder">
<i class="c-white-500 fa fa-history"></i>
</span>
<span class="title">History</span>
</a>
</li>
<li class="nav-item">
<a class="sidebar-link" href="ui.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-cogs"></i>
</span>
<span class="title">Settings</span>
</a>
</li>
</ul>
</div>
</div>

+ 247
- 0
src/topbar.html View File

@ -0,0 +1,247 @@
<!-- ### $Topbar ### -->
<div class="header navbar">
<div class="header-container">
<!-- #LEFT ============================ -->
<ul class="nav-left">
<li>
<a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
<i class="ti-menu"></i>
</a>
</li>
<li class="search-box">
<a class="search-toggle no-pdd-right" href="javascript:void(0);">
<i class="search-icon ti-search pdd-right-10"></i>
<i class="search-icon-close ti-close pdd-right-10"></i>
</a>
</li>
<li class="search-input">
<input class="form-control" type="text" placeholder="Search users, companies, or anything..">
</li>
<li class="">
<button type="button" class="btn btn-gradient ">
<i class="fa fa-plus pdd-right-5"></i>
Add new user
</button>
</li>
</ul>
<ul class="nav-right">
<!-- #RIGHT ============================ -->
<!-- #email ============================ -->
<li class="notifications dropdown">
<span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<i class="ti-email top-notification"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Emails</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">John Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">5 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Moo Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">15 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Lee Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">25 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
</span>
</li>
</ul>
</li>
<!-- #notifications bell ============================ -->
<li class="notifications dropdown">
<span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<i class="ti-bell"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">John Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">post</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">5 mins ago</small>
</p>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Moo Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">cover image</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">7 mins ago</small>
</p>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Lee Doe</span>
<span class="c-grey-600">commented on your <span class="text-dark">video</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">10 mins ago</small>
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
</span>
</li>
</ul>
</li>
<li>
<!-- #vertical line ============================ -->
<div class="verticalLine"> </div>
</li>
<!-- #account ============================ -->
<li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer">
<span class="fsz-sm c-grey-900">Nomit Admin</span>
</div>
<div class="peer mR-10">
<img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/nomit-logo.png" alt="">
</div>
</a>
<ul class="dropdown-menu fsz-sm">
<li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-settings mR-10"></i>
<span>Setting</span>
</a>
</li>
<li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-user mR-10"></i>
<span>Profile</span>
</a>
</li>
<li>
<a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-email mR-10"></i>
<span>Messages</span>
</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-power-off mR-10"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
<li>
<!-- #vertical line ============================ -->
<div class="verticalLine"> </div>
</li>
<li>
<!-- #logo wisp ============================ -->
<div class="peer logo-top-bar">
<img class="" src="assets/static/images/wisp_logo_horizontal.svg" alt="">
</div>
</li>
</ul>
</div>
</div>

Write Preview
Loading…
Cancel
Save