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 #1 from ExtProjNomit/ui-index-1 

Ui index 1
pull/144/head
Mohammed Tantawy 7 years ago
committed by GitHub
parent
75f2d6134f d5a4e2f3c0
commit
0e263a1ee6
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 2130 additions and 1438 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      package.json
  2. +0
    -1
      server.js
  3. +6
    -6
      src/assets/scripts/charts/chartJS/index.js
  4. +4
    -0
      src/assets/scripts/charts/easyPieChart/index.js
  5. +4
    -4
      src/assets/scripts/charts/sparkline/index.js
  6. +1
    -1
      src/assets/scripts/vectorMaps/index.js
  7. BIN
      src/assets/static/images/nomit-logo.png
  8. +122
    -0
      src/assets/static/images/wisp_logo_horizontal.svg
  9. +120
    -0
      src/assets/static/images/wisp_logo_white_vertical.svg
  10. +7
    -0
      src/assets/styles/spec/components/pageContainer.scss
  11. +24
    -13
      src/assets/styles/spec/components/sidebar.scss
  12. +50
    -6
      src/assets/styles/spec/components/topbar.scss
  13. +4
    -1
      src/assets/styles/spec/settings/baseColors.scss
  14. +2
    -2
      src/assets/styles/spec/utils/layout/utils/peers.scss
  15. +244
    -317
      src/charts.html
  16. +651
    -0
      src/charts_.html
  17. +199
    -417
      src/datatable.html
  18. +321
    -669
      src/index.html
  19. +123
    -0
      src/sidebar.html
  20. +247
    -0
      src/topbar.html

+ 1
- 1
package.json View File

@ -65,4 +65,4 @@
"popper.js": "^1.12.6",
"skycons": "^1.0.0"
}
}
}

+ 0
- 1
server.js View File

@ -9,4 +9,3 @@ app.use('/', express.static(__dirname + '/build'));
const server = app.listen(process.env.PORT || 3000, function () {
console.log('Server started at http://localhost:%s', server.address().port);
});

+ 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;


BIN
src/assets/static/images/nomit-logo.png View File

Before After
Width: 200  |  Height: 184  |  Size: 25 KiB

+ 122
- 0
src/assets/static/images/wisp_logo_horizontal.svg View File

@ -0,0 +1,122 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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>

+ 120
- 0
src/assets/static/images/wisp_logo_white_vertical.svg View File

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 105.6869278 99.4877319" style="enable-background:new 0 0 105.6869278 99.4877319;" 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="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="st0" 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="st11" 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="SVGID_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="st1" 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="SVGID_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="st2" points="44.6050644,28.1279144 44.6050644,28.1280079 50.6729622,22.0599232 "/>
</g>
</g>
<g>
<path class="st11" 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="st11" 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="st11" 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="st11" 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>

+ 7
- 0
src/assets/styles/spec/components/pageContainer.scss View File

@ -25,6 +25,13 @@
}
}
.content-title{
font-weight: bolder;
font-size: 20pt;
color: $default-dark-wisp;
margin-top: 20px;
}
// ---------------------------------------------------------
// @Main Content
// ---------------------------------------------------------


+ 24
- 13
src/assets/styles/spec/components/sidebar.scss View File

@ -13,7 +13,8 @@
// ---------------------------------------------------------
.sidebar {
background-color: $default-white;
//background-color: $default-white;
background-image: linear-gradient(#fe4cb8, #793fcc);
bottom: 0;
overflow: hidden;
position: fixed;
@ -75,7 +76,7 @@
.sidebar-inner {
.sidebar-logo {
border-bottom: 1px solid $border-color;
padding: 0 20px;
padding: 0 40px;
}
.sidebar-menu {
@ -125,10 +126,10 @@
// ---------------------------------------------------------
.sidebar-logo {
border-bottom: 1px solid $border-color;
border-right: 1px solid $border-color;
line-height: 0;
padding: 0 20px;
padding: 0 35%;
transition: all 0.2s ease;
a {
@ -136,12 +137,13 @@
width: 100%;
.logo {
background-position: center left;
background-position: center;
margin-top: 30px;
background-repeat: no-repeat;
display: inline-block;
display: block;
min-height: calc(#{$header-height} - 1px);
width: 100%;
width: 70px;
width: 80px;
}
.logo-text {
@ -178,18 +180,20 @@
border-right: 1px solid $border-color;
height: calc(100vh - #{$header-height});
list-style: none;
margin: 0;
margin: 0px;
overflow: auto;
padding: 0;
padding: 10px;
position: relative;
.dropdown-toggle::after {
display: none;
}
//cerchietto vicino la voce selezionata
.sidebar-link {
&.active::before {
background: $md-blue-500;
background: white;
border-radius: 50%;
content: '';
display: block;
@ -245,16 +249,18 @@
}
a {
color: $default-text-color;
color: $default-white;
transition: all 0.3s ease;
font-weight: normal;
&:hover,
&:focus {
color: $default-dark;
color: $default-white;
text-decoration: none;
font-weight: bold;
.icon-holder {
color: $default-info;
font-weight: bold;
}
}
}
@ -334,6 +340,9 @@
.sidebar-logo {
border-bottom: 1px solid transparent;
padding: 0;
margin-left: auto;
margin-right: auto;
}
.sidebar-menu {
@ -370,6 +379,8 @@
.sidebar-logo {
border-bottom: 1px solid $border-color;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
}
.sidebar-menu {


+ 50
- 6
src/assets/styles/spec/components/topbar.scss View File

@ -68,6 +68,7 @@
.notifications {
position: relative;
font-size: 20px;
.counter {
background-color: $default-danger;
@ -77,8 +78,14 @@
line-height: 1;
padding: 3px 5.5px;
position: absolute;
right: 6px;
top: 12px;
right: 2px;
top: 20px;
z-index: 1;
}
.top-notification{
z-index: 4;
position: relative;
background-color: $default-white;
}
.dropdown-menu {
@ -144,6 +151,8 @@
}
.search-box {
.search-icon-close {
display: none;
}
@ -168,13 +177,16 @@
input {
background-color: transparent;
border: 0;
border: 1;
border-color: #501db9;
border-radius: 50px;
box-shadow: none;
font-size: 18px;
font-size: 13px;
height: 40px;
margin-top: 12px;
width: 350px;
margin-top: calc((#{$header-height} - 40px)/2);
outline: none;
padding: 5px;
padding: 10px;
@include to($breakpoint-sm) {
width: 85px;
@ -186,6 +198,38 @@
}
}
}
.btn-gradient {
color: #fff;
background-image: linear-gradient(to right,#ee38a4, #501db9);
border-radius: 50px;
border: none;
height: 40px;
width: 180px;
margin-top: calc((#{$header-height} - 40px)/2);
margin-left: 15px;
outline: none;
padding: 5px;
}
.nomit-logo-top{
width: 60px ;
margin-right: 0px;
}
.verticalLine{
border-left:1.5px solid $grey-400;
height:30px;
margin-top: calc((#{$header-height} - 30px)/2);
margin-left: 12px;
margin-right: 12px;
}
.logo-top-bar{
width: 70px;
margin-top: calc((#{$header-height} - 20px)/2);
margin-right: 55px;
margin-left: 16px;
}
}
// ---------------------------------------------------------


+ 4
- 1
src/assets/styles/spec/settings/baseColors.scss View File

@ -67,6 +67,9 @@ $default-text-color : #72777a;
$default-warning : #fc0;
$default-white : #fff;
$default-dark-wisp : #501db9;
$default-light-wisp : #ee38a4;
// ---------------------------------------------------------
// @Inverted Colors
// ---------------------------------------------------------
@ -83,7 +86,7 @@ $inverse-warning : lighten($default-warning, 45%);
$border-color : #e6ecf5;
$collapsed-size : 70px;
$header-height : 65px;
$header-height : 80px;
$offscreen-size : 280px;
$side-nav-dark : #313644;
$side-nav-dark-border : rgba(120, 130, 140, 0.3);


+ 2
- 2
src/assets/styles/spec/utils/layout/utils/peers.scss View File

@ -21,8 +21,8 @@
// overflow: hidden;
}
.peers-greed > .peer,
.peers-greed > .peers {
.-greed > .peer,
.-greed > .peers {
flex: 1 1 auto;
}


+ 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>

+ 199
- 417
src/datatable.html View File

@ -462,7 +462,7 @@
</div>
</a>
</li>
</ul>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
@ -516,494 +516,276 @@
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="container-fluid">
<h4 class="c-grey-900 mT-10 mB-30">Data Tables</h4>
<h4 class="c-grey-900 mT-10 mB-30">Tables - Nomit</h4>
<div class="row">
<div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Bootstrap Data Table</h4>
<h4 class="c-grey-900 mB-20">Table of users</h4>
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Family Name</th>
<th>Email</th>
<th>Status</th>
<th>Shearing data with NOMIT</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Family Name</th>
<th>Email</th>
<th>Status</th>
<th>Shearing data with NOMIT</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
<th>001</th>
<td>Tiger</td>
<td>Nixon</td>
<td>tiger@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
<th>002</th>
<td>Garrett</td>
<td>Winters</td>
<td>garret@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
<th>003</th>
<td>Grace</td>
<td>White</td>
<td>grace@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
<th>004</th>
<td>Charlie</td>
<td>Chiu</td>
<td>charlie@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
<th>005</th>
<td>Mohammed</td>
<td>Tantawy</td>
<td>mohammed@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
<th>006</th>
<td>Davide</td>
<td>Bragagnolo</td>
<td>davide@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
<th>007</th>
<td>Ashly</td>
<td>Black</td>
<td>ashly@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
<th>008</th>
<td>Willy</td>
<td>Hamweak</td>
<td>willy@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
<th>009</th>
<td>Symon</td>
<td>Bottles</td>
<td>symon@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
<th>010</th>
<td>Fiona</td>
<td>Leggins</td>
<td>fiona@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
<th>011</th>
<td>Myriam</td>
<td>Whites</td>
<td>myriam@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
<th>012</th>
<td>Lillie</td>
<td>Wang</td>
<td>lillie@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Complete table of users</h4>
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
<th>ID</th>
<th>Status</th>
<th>Name</th>
<th>Middle Name</th>
<th>Family Name</th>
<th>Email</th>
<th>Address</th>
<th>Age</th>
<th>Gender</th>
<th>Status</th>
<th>Visa</th>
<th>Arriving date</th>
<th>Reason to leave</th>
<th>Gender</th>
<th>Status</th>
<th>Visa</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
<th>ID</th>
<th>Name</th>
<th>Family Name</th>
<th>Email</th>
<th>Status</th>
<th>Shearing data with NOMIT</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
<th>001</th>
<td>Tiger</td>
<td>Nixon</td>
<td>tiger@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
<th>002</th>
<td>Garrett</td>
<td>Winters</td>
<td>garret@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
<th>003</th>
<td>Grace</td>
<td>White</td>
<td>grace@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
<th>004</th>
<td>Charlie</td>
<td>Chiu</td>
<td>charlie@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
<th>005</th>
<td>Mohammed</td>
<td>Tantawy</td>
<td>mohammed@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
<th>006</th>
<td>Davide</td>
<td>Bragagnolo</td>
<td>davide@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
<th>007</th>
<td>Ashly</td>
<td>Black</td>
<td>ashly@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
<th>008</th>
<td>Willy</td>
<td>Hamweak</td>
<td>willy@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
<th>009</th>
<td>Symon</td>
<td>Bottles</td>
<td>symon@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
<th>010</th>
<td>Fiona</td>
<td>Leggins</td>
<td>fiona@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
<th>011</th>
<td>Myriam</td>
<td>Whites</td>
<td>myriam@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
<th>012</th>
<td>Lillie</td>
<td>Wang</td>
<td>lillie@gmail.com</td>
<td>on</td>
<td>yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>


+ 321
- 669
src/index.html
File diff suppressed because it is too large
View File


+ 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