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

Merge pull request #4 from ExtProjNomit/ui-parts-and-page_ads 

split the top and side bars into files (html _loadert), start ads.htm…
pull/144/head
francesca6431 7 years ago
committed by GitHub
parent
aac1c6c91c 7ae73f1683
commit
7a3319aa0e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 1330 additions and 1518 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      package.json
  2. +235
    -0
      src/_sidebar.html
  3. +367
    -0
      src/_topbar.html
  4. +176
    -0
      src/ads.html
  5. +317
    -244
      src/charts.html
  6. +0
    -651
      src/charts_.html
  7. +232
    -623
      src/index.html
  8. +1
    -0
      webpack/plugins/htmlPlugin.js

+ 2
- 0
package.json View File

@ -33,6 +33,8 @@
"eslint-plugin-import": "2.7.0",
"extract-text-webpack-plugin": "^3.0.1",
"html-webpack-plugin": "^2.30.1",
"html-includes": "^4.0.0",
"html-loader": "^0.5.5",
"imagemin-webpack-plugin": "^1.5.2",
"node-sass": "^4.5.3",
"postcss-cssnext": "^3.0.2",


+ 235
- 0
src/_sidebar.html View File

@ -0,0 +1,235 @@
<!-- #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">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 105.6869278 99.4877319" style="enable-background:new 0 0 105.6869278 99.4877319;" xml:space="preserve">
<style type="text/css">
.logost0{fill:url(#LOGOSVGID_1_);}
.logost1{fill:url(#LOGOSVGID_2_);}
.logost2{fill:url(#LOGOSVGID_3_);}
.logost3{fill:url(#LOGOSVGID_4_);}
.logost4{fill:url(#LOGOSVGID_5_);}
.logost5{fill:url(#LOGOSVGID_6_);}
.logost6{fill:url(#LOGOSVGID_7_);}
.logost7{fill:url(#LOGOSVGID_8_);}
.logost8{fill:url(#LOGOSVGID_9_);}
.logost9{fill:url(#LOGOSVGID_10_);}
.logost10{fill:url(#LOGOSVGID_11_);}
.logost11{fill:#FFFFFF;}
.logost12{fill:url(#LOGOSVGID_12_);}
.logost13{fill:url(#LOGOSVGID_13_);}
.logost14{fill:url(#LOGOSVGID_14_);}
.logost15{fill:url(#LOGOSVGID_15_);}
.logost16{fill:url(#LOGOSVGID_16_);}
.logost17{fill:url(#LOGOSVGID_17_);}
.logost18{fill:url(#LOGOSVGID_18_);}
.logost19{fill:url(#LOGOSVGID_19_);}
</style>
<g>
<g>
<linearGradient id="LOGOSVGID_1_" gradientUnits="userSpaceOnUse" x1="14.6859789" y1="5.9550242" x2="40.6093216" y2="50.8555679">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.3073062" style="stop-color:#FDFDFD"/>
<stop offset="0.4651366" style="stop-color:#F5F5F5"/>
<stop offset="0.5889232" style="stop-color:#E8E8E8"/>
<stop offset="0.6943781" style="stop-color:#D5D5D5"/>
<stop offset="0.7869266" style="stop-color:#BDBDBD"/>
<stop offset="0.8250626" style="stop-color:#BABABA"/>
<stop offset="1" style="stop-color:#B8B8B8"/>
</linearGradient>
<path class="logost0" d="M34.0411263,51.2930908l-0.000946,0.000946c0.133606-0.133606,0.2475319-0.267025,0.3764076-0.400631
l-6.2885551-6.2883644l-1.0298615-1.0298615L11.6509991,28.1280079l4.1192579-4.119257l12.3577757-12.3577757l4.1192589,4.1192579
l10.4199219,10.4199238l5.6803284-5.6805153l-5.6803284,5.6805153l0,0l7.8507576-7.8509464l0.3875732-0.3875694
L36.3665504,3.4125531c-4.5501671-4.5500708-11.9270592-4.5500708-16.4770355,0L3.412482,19.889492
c-4.5499759,4.5499763-4.5499759,11.9269619,0,16.4770317l16.4770336,16.4769402
c4.5499763,4.549881,11.9268684,4.549881,16.4770355,0v-0.0000954l-1.937851-1.937851L34.0411263,51.2930908z"/>
<path class="logost11" d="M102.2743073,19.889492L85.7972717,3.4125531l-8.238327,8.2384224l12.3577728,12.3577757l4.119072,4.119257
L81.6781998,40.4857826l-4.1192551,4.1192589L63.3077888,30.3538876l-0.3875694,0.3875713l-7.8507576,7.8509445
l14.2509651,14.2509651v0.0000954c4.5499725,4.549881,11.9270554,4.549881,16.4768448,0l16.4770355-16.4769402
C106.8244705,31.8164539,106.8244705,24.4394684,102.2743073,19.889492z"/>
<g>
<linearGradient id="LOGOSVGID_2_" gradientUnits="userSpaceOnUse" x1="24.0086803" y1="56.9627228" x2="81.6780624" y2="-0.7066581">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.3235791" style="stop-color:#FDFDFD"/>
<stop offset="0.5064212" style="stop-color:#F4F4F4"/>
<stop offset="0.6542051" style="stop-color:#E7E7E7"/>
<stop offset="0.7824864" style="stop-color:#D3D3D3"/>
<stop offset="0.885314" style="stop-color:#BDBDBD"/>
<stop offset="0.9058406" style="stop-color:#BABABA"/>
<stop offset="1" style="stop-color:#B8B8B8"/>
</linearGradient>
<path class="logost1" d="M69.3204269,3.4125531L52.8433952,19.889492l-8.2383308,8.2385159l-1.0298615,1.0298634
L28.1280327,44.6050415l-8.2385178,8.2385178c4.5497875,4.5495033,11.9257336,4.5496902,16.4760895,0.0007553l0.000946-0.000946
l24.7153587-24.7153606l15.4471741-15.4471712l1.0298615-1.0298615l8.238327-8.2384224
C81.2474823-1.1375177,73.8703995-1.1375177,69.3204269,3.4125531z"/>
<linearGradient id="LOGOSVGID_3_" gradientUnits="userSpaceOnUse" x1="44.6050186" y1="28.1279621" x2="50.673008" y2="22.0599709">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.3235791" style="stop-color:#FDFDFD"/>
<stop offset="0.5064212" style="stop-color:#F4F4F4"/>
<stop offset="0.6542051" style="stop-color:#E7E7E7"/>
<stop offset="0.7824864" style="stop-color:#D3D3D3"/>
<stop offset="0.885314" style="stop-color:#BDBDBD"/>
<stop offset="0.9058406" style="stop-color:#BABABA"/>
<stop offset="1" style="stop-color:#B8B8B8"/>
</linearGradient>
<polygon class="logost2" points="44.6050644,28.1279144 44.6050644,28.1280079 50.6729622,22.0599232 "/>
</g>
</g>
<g>
<path class="logost11" d="M39.1436119,81.5978546c0,1.7324905-0.7470245,3.3397293-2.2410698,4.8207779
c-1.4940453,1.4819946-3.1073112,2.2220459-4.839798,2.2220459h-1.7324848c-0.9543877,0-2.0590687-0.3452988-3.314043-1.0361938
c-0.2764874-0.1534653-0.6785355-0.4737091-1.2055092-0.9597778h-0.1128788
c-0.3766823,0.460701-1.0672665,0.9087296-2.0717525,1.3434296c-1.0044861,0.4356613-1.820631,0.6525421-2.4478016,0.6525421
h-1.6950703c-1.7324848,0-3.3394089-0.741951-4.8207722-2.2274399c-1.4819975-1.4845352-2.2220449-3.0952606-2.2220449-4.831871
v-6.7580872c0.3259506-1.3589706,1.1420956-2.0387726,2.4484348-2.0387726c1.3799009,0,2.2087278,0.7188034,2.4852152,2.1545105
v6.5380325c0,0.428688,0.2454147,0.9074631,0.7349739,1.4366608c0.4895611,0.5288773,0.9474144,0.7933121,1.3741932,0.7933121
h1.6950703c0.3766823,0,0.8218536-0.2571411,1.3367786-0.7720718c0.5149269-0.5142899,0.7723885-0.9604111,0.7723885-1.3370972
v-6.7419128c0.3513165-1.3805313,1.1795101-2.071434,2.4858513-2.071434c1.2549725,0,2.0711174,0.6909027,2.4477997,2.071434
v6.7419128c0,0.3766861,0.2587318,0.8228073,0.7768288,1.3370972c0.5180969,0.5149307,0.9670715,0.7720718,1.3462906,0.7720718
h1.74263c0.3792191,0,0.8275604-0.2571411,1.3456573-0.7720718c0.5174637-0.5142899,0.777462-0.9604111,0.777462-1.3370972
v-6.7419128c0.372879-1.3805313,1.2086792-2.071434,2.5042381-2.071434c1.2448273,0,2.0552673,0.6909027,2.4294128,2.071434
V81.5978546z"/>
<path class="logost11" d="M50.1029091,86.4887009c-0.2764854,1.4347534-1.1046791,2.1519775-2.4852142,2.1519775
c-1.305706,0-2.1224823-0.6788559-2.4484329-2.0384598V74.8232803c0.3259506-1.3589706,1.1427269-2.0387726,2.4484329-2.0387726
c1.3805351,0,2.2087288,0.7175369,2.4852142,2.1522903V86.4887009z"/>
<path class="logost11" d="M72.098877,87.6992874c0,1.2559204-0.6087799,2.4858475-1.8263397,3.69104
c-1.2188263,1.2051926-2.4547806,1.8076324-3.7097473,1.8076324h-2.7496567
c-1.3558044-0.3519516-2.0343399-1.1798248-2.0343399-2.4855347c0-1.2552872,0.6734619-2.0717468,2.0203896-2.4481125h2.2816505
c0.7222977-0.2260742,1.0843887-0.6902695,1.0843887-1.3935394c0-0.7279968-0.3633652-1.2051926-1.088829-1.4312668h-4.2411613
c-1.2511673,0-2.4839478-0.6103592-3.6970673-1.8320389c-1.2131195-1.2210541-1.8199959-2.4617538-1.8199959-3.7208481v-1.6243668
c0-1.2841415,0.6214638-2.531189,1.8643875-3.7398682c1.2422905-1.2086868,2.5042381-1.8130264,3.7852135-1.8130264h2.5987282
c1.4052658,0.2742691,2.109169,1.1091232,2.109169,2.5045547c0,1.2711487-0.6607819,2.0809479-1.982338,2.4294128h-2.3564873
c-0.7235603,0.2064133-1.085022,0.683609-1.085022,1.430954c0,0.72229,0.3627319,1.1994858,1.088829,1.4312592H66.58181
c1.2505341,0,2.4833145,0.6091003,3.696434,1.8266602c1.2131195,1.2181931,1.8206329,2.4544601,1.8206329,3.7097473V87.6992874z"
/>
<path class="logost11" d="M93.2653732,81.5642471c0,1.7407303-0.7432175,3.3555832-2.2296524,4.8439178
c-1.4864349,1.4886551-3.0997009,2.2325134-4.8385239,2.2325134h-1.7007828c-0.5035095,0-1.1966324-0.1880264-2.0787277-0.5647125
v9.2651825c-0.2764893,1.4309464-1.1046829,2.1465836-2.4852142,2.1465836c-1.3057022,0-2.1224823-0.6791687-2.4484329-2.0365601
V74.7836456c0-0.175972,0.0875092-0.4147263,0.2638016-0.7165833c0.5517044-0.9052429,1.2809753-1.3577042,2.1846313-1.3577042
c0.6525345,0,1.2549744,0.2764893,1.8079453,0.8285141c1.1300507-0.5520248,2.0584412-0.8285141,2.786438-0.8285141h1.6957016
c1.7324905,0,3.3387756,0.7444916,4.8207779,2.2325134c1.4813614,1.4889679,2.2220383,3.1031876,2.2220383,4.8439178V81.5642471z
M88.3317261,81.5579071v-1.8038254c0-0.4350281-0.2638016-0.8957291-0.7914124-1.3818054
c-0.5276108-0.4860687-1.0044861-0.7289505-1.4312668-0.7289505h-1.4686813c-0.4274139,0-0.903656,0.2492218-1.4312668,0.748291
c-0.5276108,0.4990768-0.7914124,0.9658051-0.7914124,1.4008255v1.7654648c0,0.3836594,0.2574615,0.8380203,0.7723923,1.3621445
c0.5149231,0.5250702,0.9607315,0.786972,1.3367767,0.786972h1.6957016c0.3766861,0,0.8218536-0.2619019,1.3367767-0.786972
C88.0736313,82.3959274,88.3317261,81.9415665,88.3317261,81.5579071z"/>
</g>
</g>
</svg>
</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="ads.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="ads.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="ads.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="ads.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="ads.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="ads.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>

+ 367
- 0
src/_topbar.html View File

@ -0,0 +1,367 @@
<!-- ### $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">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 138.8360748 39.8824463" style="enable-background:new 0 0 138.8360748 39.8824463;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:url(#SVGID_6_);}
.st6{fill:url(#SVGID_7_);}
.st7{fill:url(#SVGID_8_);}
.st8{fill:url(#SVGID_9_);}
.st9{fill:url(#SVGID_10_);}
.st10{fill:url(#SVGID_11_);}
.st11{fill:#FFFFFF;}
.st12{fill:url(#SVGID_12_);}
.st13{fill:url(#SVGID_13_);}
.st14{fill:url(#SVGID_14_);}
.st15{fill:url(#SVGID_15_);}
.st16{fill:url(#SVGID_16_);}
.st17{fill:url(#SVGID_17_);}
.st18{fill:url(#SVGID_18_);}
.st19{fill:url(#SVGID_19_);}
</style>
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.806386" y1="30.5149899" x2="13.806386" y2="0.0000301">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.0866544" style="stop-color:#C832A9"/>
<stop offset="0.1996946" style="stop-color:#9D2AAF"/>
<stop offset="0.3094908" style="stop-color:#7C24B3"/>
<stop offset="0.4136127" style="stop-color:#6420B6"/>
<stop offset="0.5097673" style="stop-color:#551EB8"/>
<stop offset="0.5903056" style="stop-color:#501DB9"/>
<stop offset="0.6045721" style="stop-color:#501DB9"/>
<stop offset="0.7748037" style="stop-color:#501DB9"/>
<stop offset="0.8825542" style="stop-color:#7311B4"/>
<stop offset="1" style="stop-color:#9506B0"/>
<stop offset="1" style="stop-color:#9103B0"/>
</linearGradient>
<path class="st0" d="M18.4649811,27.823019l-0.0005131,0.0005131c0.0724716-0.0724716,0.1342678-0.1448421,0.204174-0.2173138
l-3.4111109-3.4110069l-0.558629-0.55863L6.319869,15.2575493l2.234416-2.234416l6.7032461-6.7032471l2.234416,2.234416
l5.6520958,5.6520948l3.0811882-3.0812902l-3.0811882,3.0812902l0,0l4.2584972-4.2586002L27.612772,9.737566l-7.8864098-7.8864594
c-2.468153-2.4681017-6.4696112-2.4681017-8.9376621,0l-8.9376621,8.9376106c-2.4680505,2.468051-2.4680505,6.4695606,0,8.9376621
l8.9376621,8.9376125c2.468051,2.4679985,6.4695091,2.4679985,8.9376621,0v-0.0000515l-1.0511513-1.0511513L18.4649811,27.823019z
"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3865204" y1="27.2705288" x2="37.6677437" y2="6.9730129">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.5092942" style="stop-color:#9103B0"/>
<stop offset="1" style="stop-color:#501DB9"/>
<stop offset="1" style="stop-color:#9506B0"/>
</linearGradient>
<path class="st1" d="M55.4768066,10.7887173l-8.9376602-8.9376106l-4.4687309,4.4687796l6.7032471,6.7032471l2.234314,2.234416
l-6.7031441,6.7032471l-2.234417,2.2344151l-7.7302742-7.7302761l-0.2102318,0.2102318l-4.2584972,4.2586002l7.7301731,7.7301731
v0.0000515c2.4680519,2.4679985,6.4696121,2.4679985,8.937561,0l8.9376602-8.9376125
C57.9449615,17.2582779,57.9449615,13.2567682,55.4768066,10.7887173z"/>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="10.7887001" y1="15.2575035" x2="46.5391464" y2="15.2575035">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.1175187" style="stop-color:#D634A7"/>
<stop offset="0.4183493" style="stop-color:#9D2AAF"/>
<stop offset="0.6763742" style="stop-color:#7323B4"/>
<stop offset="0.8785662" style="stop-color:#591FB8"/>
<stop offset="1" style="stop-color:#501DB9"/>
</linearGradient>
<path class="st2" d="M37.6015854,1.8511064l-8.9376621,8.9376106l-4.468729,4.468832l-0.55863,0.558629l-8.3790331,8.3790331
l-4.4688311,4.468832c2.467948,2.4677925,6.4688931,2.4678955,8.937149,0.0004101l0.0005131-0.0005131l13.4063931-13.4063911
l8.3790321-8.379034l0.5586281-0.5586295l4.4687309-4.4687796C44.0711975-0.6169954,40.0696373-0.6169954,37.6015854,1.8511064z"
/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.1951942" y1="13.6117887" x2="27.4866123" y2="13.6117887">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.1175187" style="stop-color:#D634A7"/>
<stop offset="0.4183493" style="stop-color:#9D2AAF"/>
<stop offset="0.6763742" style="stop-color:#7323B4"/>
<stop offset="0.8785662" style="stop-color:#591FB8"/>
<stop offset="1" style="stop-color:#501DB9"/>
</linearGradient>
<polygon class="st3" points="24.1951942,15.2574978 24.1951942,15.2575493 27.4866123,11.9660282 "/>
</g>
</g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.3990173" y1="-7.8904157" x2="122.914917" y2="37.6254807">
<stop offset="0" style="stop-color:#8B00B1"/>
<stop offset="0" style="stop-color:#EE38A4"/>
<stop offset="0.0727272" style="stop-color:#D634A7"/>
<stop offset="0.2166433" style="stop-color:#AD2DAD"/>
<stop offset="0.3643613" style="stop-color:#8C27B1"/>
<stop offset="0.5144968" style="stop-color:#7123B5"/>
<stop offset="0.6680248" style="stop-color:#5F20B7"/>
<stop offset="0.8269761" style="stop-color:#541EB9"/>
<stop offset="1" style="stop-color:#501DB9"/>
</linearGradient>
<path class="st4" d="M73.7269974,4.3174438v5.8997192v11.3051758v5.3615112
c-0.4117432,2.0700073-1.6452637,3.1047974-3.7012939,3.1047974c-1.9445801,0-3.1610107-0.9794312-3.6466064-2.94104v-5.3562012
V10.0534058V4.1483765c0.4855957-2.0239868,1.7020264-3.036438,3.6466064-3.036438
C72.0817337,1.1119385,73.3152542,2.180603,73.7269974,4.3174438z M106.2809982,19.8569603
c0-1.8695717-0.9047928-3.7108078-2.7115402-5.5251274c-1.8067474-1.8133755-3.6427689-2.7205353-5.5052414-2.7205353h-6.3165283
c-1.0814056-0.3452024-1.6216354-1.055913-1.6216354-2.1316605c0-1.1130533,0.5383453-1.8237638,1.6159668-2.1311879h3.5096054
c1.9682465-0.5189838,2.9523697-1.7250671,2.9523697-3.6182499c0-2.0782979-1.0483475-3.3216877-3.1412582-3.7301693h-3.8703918
c-1.9077988,0-3.7872696,0.9000763-5.6374664,2.7002289c-1.8511353,1.8001525-2.7767029,3.6574452-2.7767029,5.5699892v2.4192505
c0,1.8752375,0.9038467,3.7230854,2.7105942,5.5416546c1.8067474,1.8195152,3.6427689,2.7285633,5.5061874,2.7285633h6.3165283
c1.0804596,0.3367023,1.6216354,1.0474129,1.6216354,2.1316605c0,1.0474129-0.5392838,1.7387619-1.6150208,2.0754642h-3.3981628
c-2.0060272,0.5605412-3.0090408,1.7765408-3.0090408,3.6461124c0,1.9446564,1.0105743,3.1776562,3.0298233,3.7018356h4.0951614
c1.8690872,0,3.7098312-0.8972435,5.5250778-2.6922016c1.8133621-1.7949581,2.7200394-3.6267509,2.7200394-5.4972649V19.8569603z
M138.8360748,10.5393066v2.6487427c0,2.5925903-1.1069336,4.9976807-3.3208008,7.2142944
c-2.2138672,2.2171631-4.6164551,3.3250122-7.2062988,3.3250122h-2.5329514c-0.7498779,0-1.7822266-0.2800293-3.0959473-0.8410645
v13.7991333c-0.4117432,2.1312256-1.6452637,3.1970215-3.7012939,3.1970215c-1.9447021,0-3.1610107-1.0115356-3.6466064-3.0331421
V3.0893555c0-0.262085,0.1303711-0.6176758,0.3929443-1.0672607C116.5467758,0.6738892,117.6329575,0,118.9787827,0
c0.9718018,0,1.8690186,0.4118042,2.692627,1.2339478C123.354393,0.4118042,124.7372055,0,125.821434,0h2.525383
c2.5803223,0,4.9726562,1.1088257,7.1798096,3.3250122C137.7328033,5.5426025,138.8360748,7.9467773,138.8360748,10.5393066z
M131.4881744,10.4920654c0-0.6478882-0.3929443-1.3340454-1.1787109-2.0579834
c-0.7858887-0.723938-1.4960938-1.0856323-2.1315918-1.0856323h-2.1874924c-0.6364746,0-1.3458252,0.3711548-2.1315918,1.1144409
s-1.1787109,1.4384155-1.1787109,2.0863647v2.6293945c0,0.5713501,0.3835449,1.2481079,1.1503906,2.0286865
c0.7668457,0.7820435,1.4309082,1.1720581,1.9909668,1.1720581h2.525383c0.5610352,0,1.2241211-0.3900146,1.9909668-1.1720581
c0.7658691-0.7805786,1.1503906-1.4573364,1.1503906-2.0286865V10.4920654z"/>
</g>
</svg>
</div>
</li>
</ul>
</div>
</div>

+ 176
- 0
src/ads.html View File

@ -0,0 +1,176 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dashboard</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>
${require('html-loader!./_sidebar.html')}
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<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">
All Ads Published
</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">
<!-- # ad n 1 ==================== -->
<div class='col-md-4'>
<div class="card" >
<img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Adv title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- # ad n 2 ==================== -->
<div class='col-md-4'>
<div class="card" >
<img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- # ad n 3 ==================== -->
<div class='col-md-4'>
<div class="card" >
<img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</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>
</body>
</html>

+ 317
- 244
src/charts.html View File

@ -3,8 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dashboard</title>
<title>Charts</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
@ -22,6 +21,8 @@
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
@ -54,11 +55,6 @@
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
@ -92,20 +88,7 @@
<!-- @App Content -->
<!-- =================================================== -->
<div>
<!-- # Sidebar ==================== -->
<!-- #Left Sidebar ==================== -->
<div class="sidebar">
<div class="sidebar-inner">
<!-- ### $Sidebar Header ### -->
@ -116,9 +99,12 @@
<div class="peers ai-c fxw-nw">
<div class="peer">
<div class="logo">
<img src="assets/static/images/wisp_logo_white_vertical.svg" alt="">
<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>
@ -134,103 +120,179 @@
<!-- ### $Sidebar Menu ### -->
<ul class="sidebar-menu scrollable pos-r">
<li class="nav-item mT-30">
<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>
<i class="c-blue-500 ti-home"></i>
</span>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item active">
<a class='sidebar-link' href="charts.html">
<li class="nav-item">
<a class='sidebar-link' href="email.html">
<span class="icon-holder">
<i class="c-white-500 ti-receipt"></i>
<i class="c-brown-500 ti-email"></i>
</span>
<span class="title">Ads</span>
<span class="title">Email</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<a class='sidebar-link' href="compose.html">
<span class="icon-holder">
<i class="c-white-500 ti-home"></i>
<i class="c-blue-500 ti-share"></i>
</span>
<span class="title">Profile</span>
<span class="title">Compose</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<a class='sidebar-link' href="calendar.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-users"></i>
<i class="c-deep-orange-500 ti-calendar"></i>
</span>
<span class="title">Users</span>
<span class="title">Calendar</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<a class='sidebar-link' href="chat.html">
<span class="icon-holder">
<i class="c-white-500 fa fa-building"></i>
<i class="c-deep-purple-500 ti-comment-alt"></i>
</span>
<span class="title">Companies</span>
<span class="title">Chat</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-white-500 fa fa-crosshairs"></i>
<i class="c-indigo-500 ti-bar-chart"></i>
</span>
<span class="title">Referees</span>
<span class="title">Charts</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-white-500 ti-comments"></i>
<i class="c-light-blue-500 ti-pencil"></i>
</span>
<span class="title">Reviews</span>
<span class="title">Forms</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="charts.html">
<li class="nav-item dropdown">
<a class="sidebar-link" href="ui.html">
<span class="icon-holder">
<i class="c-white-500 ti-calendar"></i>
</span>
<span class="title">Reports</span>
<i class="c-pink-500 ti-palette"></i>
</span>
<span class="title">UI Elements</span>
</a>
</li>
<li class="nav-item">
<a class='sidebar-link' href="calendar.html" >
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-white-500 fa fa-history"></i>
<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>
<span class="title">History</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">
<a class="sidebar-link" href="ui.html">
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">
<span class="icon-holder">
<i class="c-white-500 fa fa-cogs"></i>
<i class="c-purple-500 ti-map"></i>
</span>
<span class="title">Maps</span>
<span class="arrow">
<i class="ti-angle-right"></i>
</span>
<span class="title">Settings</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">
<!-- #LEFT ============================ -->
<ul class="nav-left">
<li>
<a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
@ -244,28 +306,20 @@
</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>
<input class="form-control" type="text" placeholder="Search...">
</li>
</ul>
<ul class="nav-right">
<!-- #RIGHT ============================ -->
<!-- #email ============================ -->
<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 top-notification"></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">
@ -275,19 +329,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>
@ -297,19 +346,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>
@ -319,19 +363,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>
@ -339,21 +378,21 @@
</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>
<!-- #notifications bell ============================ -->
<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"></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">
@ -363,14 +402,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>
@ -380,14 +424,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>
@ -397,14 +446,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>
@ -412,26 +466,19 @@
</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>
<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="">
<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>
@ -461,118 +508,144 @@
</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> <!--topbar-->
</div>
<!-- ### $App Screen Content ### -->
<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>
<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="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 class="peer">
<span class="sparkline">&nbsp;</span>
</div>
</div>
</div>
<!-- #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 class="peers ai-c jc-sb fxw-nw bdB pY-15">
<div class="peer">
<span>Spark Bar</span>
</div>
<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>
<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>
<!-- #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>
<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="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 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><!--content container-->
</div><!--page container-->
</main>
</div><!-- page-container -->
</div> <!-- App Content -->
</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>

+ 0
- 651
src/charts_.html View File

@ -1,651 +0,0 @@
<!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>

+ 232
- 623
src/index.html View File

@ -1,12 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dashboard</title>
<style>
#loader {
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dashboard</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
@ -53,11 +54,12 @@
}
}
</style>
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
@ -69,665 +71,271 @@
> $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>
<!-- @Page Loader -->
<!-- =================================================== -->
<div id='loader'>
<div class="spinner"></div>
</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/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>
<script>
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
setTimeout(() => {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
${require('html-loader!./_sidebar.html')}
<!-- #Main ============================ -->
<div class="page-container">
${require('html-loader!./_topbar.html')}
<!-- ### $App Screen Content ### -->
<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>
<!-- ### $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>
<!-- #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);">
<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 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="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>
</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>
<!-- ### $App Screen Content ### -->
<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="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>
<!-- #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="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>
</div>
</div>
</div>
<!-- #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="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>
<!-- #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="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>
</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>
</div>
<div class="masonry-item col-12">
<!-- #New Registered Users ==================== -->
<div class="bd bgc-white">
<div class="layers">
<div class="layer w-100 pX-20 pT-20">
<h6 class="lh-1">New Registered Users</h6>
</div>
<div class="layer w-100 p-20">
<canvas id="line-chart" height="220"></canvas>
</div>
<div class="layer bdT p-20 w-100">
<div class="peers ai-c jc-c gapX-20">
<div class="peer">
<span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">APPL</small>
</div>
<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>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Average</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">Sales</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Profit</small>
</div>
</div>
</div>
</div>
</div>
<div class="masonry-item col-12">
<!-- #New Registered Users ==================== -->
<div class="bd bgc-white">
<div class="layers">
<div class="layer w-100 pX-20 pT-20">
<h6 class="lh-1">New Registered Users</h6>
</div>
<div class="layer w-100 p-20">
<canvas id="line-chart" height="220"></canvas>
</div>
<div class="layer bdT p-20 w-100">
<div class="peers ai-c jc-c gapX-20">
</div>
<div class="masonry-item w-100">
<div class="row gap-20">
<div class="col-3">
<!-- #Successful Mathches ==================== -->
<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-50 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
<div class="peer">
<span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">APPL</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Average</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
<small class="c-grey-500 fw-600">Sales</small>
</div>
<div class="peer fw-600">
<span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
<small class="c-grey-500 fw-600">Profit</small>
<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 class="masonry-item w-100">
<div class="row gap-20">
<div class="col-3">
<!-- #Successful Mathches ==================== -->
<div class="bd bgc-white p-20 peer peer-greed" style="height: 400px">
<div class="col-9">
<!-- #Nationality ==================== -->
<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">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Successful Mathches</h6>
<h6 class="lh-1">Nationality</h6>
</div>
<div class="layer w-100">
<div id="world-map-marker"></div>
</div>
<!-- Pie Charts -->
<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='130' data-percent="75" data-bar-color='#a19ff8'>
<span></span>
</div>
<h6 class="fsz-sm">Matched</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-9" >
<!-- #Nationality ==================== -->
<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="peer bdL p-20 w-30p@lg+ w-100p@lg-">
<div class="layers">
<div class="layer w-100">
<!-- Progress Bars -->
<div class="layers">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Nationality</h6>
</div>
<div class="layer w-100">
<div id="world-map-marker"></div>
<h5 class="mB-5">100k</h5>
<small class="fw-600 c-grey-700">Visitors From USA</small>
<span class="pull-right c-grey-600 fsz-sm">50%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50%
Complete</span></div>
</div>
</div>
</div>
</div>
<div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
<div class="layers">
<div class="layer w-100">
<!-- Progress Bars -->
<div class="layers">
<div class="layer w-100">
<h5 class="mB-5">100k</h5>
<small class="fw-600 c-grey-700">Visitors From USA</small>
<span class="pull-right c-grey-600 fsz-sm">50%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">1M</h5>
<small class="fw-600 c-grey-700">Visitors From Europe</small>
<span class="pull-right c-grey-600 fsz-sm">80%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">450k</h5>
<small class="fw-600 c-grey-700">Visitors From Australia</small>
<span class="pull-right c-grey-600 fsz-sm">40%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">1B</h5>
<small class="fw-600 c-grey-700">Visitors From India</small>
<span class="pull-right c-grey-600 fsz-sm">90%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
</div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">1M</h5>
<small class="fw-600 c-grey-700">Visitors From Europe</small>
<span class="pull-right c-grey-600 fsz-sm">80%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80%
Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">450k</h5>
<small class="fw-600 c-grey-700">Visitors From Australia</small>
<span class="pull-right c-grey-600 fsz-sm">40%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40%
Complete</span></div>
</div>
</div>
<div class="layer w-100 mT-15">
<h5 class="mB-5">1B</h5>
<small class="fw-600 c-grey-700">Visitors From India</small>
<span class="pull-right c-grey-600 fsz-sm">90%</span>
<div class="progress mT-10">
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90%
Complete</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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 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 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 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>
</main>
</div>
</div>
</main>
@ -741,12 +349,13 @@
<!-- ### $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>
<!-- ### $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>

+ 1
- 0
webpack/plugins/htmlPlugin.js View File

@ -9,6 +9,7 @@ const titles = {
'buttons': 'Buttons',
'calendar': 'Calendar',
'charts': 'Charts',
'ads': 'ads',
'chat': 'Chat',
'compose': 'Compose',
'datatable': 'Datatable',


Write Preview
Loading…
Cancel
Save