xxxxxxxxxx1
<body class="fixed-sn light-blue-skin">2
3
<!--Main Navigation-->4
<header>5
6
<!--Navbar-->7
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar double-nav">8
9
<!-- SideNav slide-out button -->10
<div class="float-left">11
<a href="#" data-activates="slide-out" class="button-collapse">12
<i class="fa fa-bars"></i>13
</a>14
</div>15
16
<!-- Breadcrumb-->17
<div class="breadcrumb-dn mr-auto">18
<p>Material Design for Bootstrap</p>19
</div>20
21
<!-- Links -->22
<ul class="nav navbar-nav nav-flex-icons ml-auto">23
<li class="nav-item">24
<a class="nav-link">25
<i class="fa fa-envelope"></i>26
<span class="clearfix d-none d-sm-inline-block">Contact</span>27
</a>28
</li>29
<li class="nav-item">30
<a class="nav-link">31
<i class="fa fa-gear"></i>32
<span class="clearfix d-none d-sm-inline-block">Settings</span>33
</a>34
</li>35
<li class="nav-item dropdown">36
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"37
aria-haspopup="true" aria-expanded="false">38
<i class="fa fa-user"></i>39
<span class="clearfix d-none d-sm-inline-block">Account</span>40
</a>41
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">42
<a class="dropdown-item" href="#">Action</a>43
<a class="dropdown-item" href="#">Another action</a>44
<a class="dropdown-item" href="#">Something else here</a>45
</div>46
</li>47
</ul>48
49
</nav>50
<!--/.Navbar-->51
52
<!-- Sidebar navigation -->53
<div id="slide-out" class="side-nav fixed sn-bg-4">54
<ul class="custom-scrollbar">55
<!-- Logo -->56
<li class="logo-sn waves-effect">57
<div class=" text-center">58
<a href="#" class="pl-0">59
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="">60
</a>61
</div>62
</li>63
<!--/. Logo -->64
<!--Search Form-->65
<li>66
<form class="search-form" role="search">67
<div class="form-group md-form mt-0 pt-1 waves-light">68
<input type="text" class="form-control" placeholder="Search">69
</div>70
</form>71
</li>72
<!--/.Search Form-->73
<!-- Side navigation links -->74
<li>75
<ul class="collapsible collapsible-accordion">76
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i>77
Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>78
<div class="collapsible-body">79
<ul>80
<li><a href="#" class="waves-effect">Submit listing</a>81
</li>82
<li><a href="#" class="waves-effect">Registration form</a>83
</li>84
</ul>85
</div>86
</li>87
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i>88
Instruction<i class="fa fa-angle-down rotate-icon"></i></a>89
<div class="collapsible-body">90
<ul>91
<li><a href="#" class="waves-effect">For bloggers</a>92
</li>93
<li><a href="#" class="waves-effect">For authors</a>94
</li>95
</ul>96
</div>97
</li>98
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>99
<div class="collapsible-body">100
<ul>101
<li><a href="#" class="waves-effect">Introduction</a>102
</li>103
<li><a href="#" class="waves-effect">Monthly meetings</a>104
</li>105
</ul>106
</div>107
</li>108
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact109
me<i class="fa fa-angle-down rotate-icon"></i></a>110
<div class="collapsible-body">111
<ul>112
<li><a href="#" class="waves-effect">FAQ</a>113
</li>114
<li><a href="#" class="waves-effect">Write a message</a>115
</li>116
<li><a href="#" class="waves-effect">FAQ</a>117
</li>118
<li><a href="#" class="waves-effect">Write a message</a>119
</li>120
<li><a href="#" class="waves-effect">FAQ</a>121
</li>122
<li><a href="#" class="waves-effect">Write a message</a>123
</li>124
<li><a href="#" class="waves-effect">FAQ</a>125
</li>126
<li><a href="#" class="waves-effect">Write a message</a>127
</li>128
</ul>129
</div>130
</li>131
</ul>132
</li>133
<!--/. Side navigation links -->134
</ul>135
<div class="sidenav-bg rgba-blue-strong"></div>136
</div>137
<!--/. Sidebar navigation -->138
139
</header>140
<!--Main Navigation-->141
142
<!--Main layout-->143
<main>144
<div class="container-fluid">145
146
<!--Section: Modals-->147
<section>148
149
150
151
</section>152
<!--Section: Modals-->153
154
<!--Section: Main panel-->155
<section class="card card-cascade narrower mb-5">156
157
<!--Grid row-->158
<div class="row">159
160
<!--Grid column-->161
<div class="col-md-5">162
163
<!--Panel Header-->164
<div class="view view-cascade py-3 gradient-card-header info-color-dark">165
<h5 class="mb-0">Sales</h5>166
</div>167
<!--/Panel Header-->168
169
<!--Panel content-->170
<div class="card-body">171
172
<!--Grid row-->173
<div class="row">174
175
<!--Grid column-->176
<div class="col-md-6 mb-4">177
178
<!--Date select-->179
<p class="lead">180
<span class="badge info-color-dark p-2">Date range</span>181
</p>182
<select class="mdb-select colorful-select dropdown-info">183
<option value="" disabled>Choose time period</option>184
<option value="1">Today</option>185
<option value="2">Yesterday</option>186
<option value="3">Last 7 days</option>187
<option value="3">Last 30 days</option>188
<option value="3">Last week</option>189
<option value="3">Last month</option>190
</select>191
192
<!--Date pickers-->193
<p class="lead my-4">194
<span class="badge info-color-dark p-2">Custom date</span>195
</p>196
<div class="md-form">197
<input placeholder="Selected date" type="text" id="from" class="form-control datepicker">198
<label for="date-picker-example">From</label>199
</div>200
<div class="md-form">201
<input placeholder="Selected date" type="text" id="to" class="form-control datepicker">202
<label for="date-picker-example">To</label>203
</div>204
205
</div>206
<!--Grid column-->207
208
<!--Grid column-->209
<div class="col-md-6 mb-4 text-center">210
211
<!--Summary-->212
<p>Total sales:213
<strong>2000$</strong>214
<button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip"215
data-placement="top" title="Total sales in the given period">216
<i class="fa fa-question"></i>217
</button>218
</p>219
<p>Average sales:220
<strong>100$</strong>221
<button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip"222
data-placement="top" title="Average daily sales in the given period">223
<i class="fa fa-question"></i>224
</button>225
</p>226
227
<!--Change chart-->228
<span class="min-chart my-4" id="chart-sales" data-percent="76">229
<span class="percent"></span>230
</span>231
<h5>232
<span class="badge green p-2">Change233
<i class="fa fa-arrow-circle-up ml-1"></i>234
</span>235
<button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip"236
data-placement="top" title="Percentage change compared to the same period in the past">237
<i class="fa fa-question"></i>238
</button>239
</h5>240
241
</div>242
<!--Grid column-->243
244
</div>245
<!--Grid row-->246
247
</div>248
<!--Panel content-->249
250
</div>251
<!--Grid column-->252
253
<!--Grid column-->254
<div class="col-md-7">255
256
<!--Panel Header-->257
<div class="view view-cascade py-3 gradient-card-header info-color-dark mb-4">258
259
<canvas id="lineChart"></canvas>260
261
</div>262
<!--/Card image-->263
264
</div>265
<!--Grid column-->266
267
</div>268
<!--Grid row-->269
270
</section>271
<!--Section: Main panel-->272
273
<!--Section: Table-->274
<section class="mb-5">275
276
<!--Top Table UI-->277
<div class="card p-2 mb-5">278
279
<!--Grid row-->280
<div class="row">281
282
<!--Grid column-->283
<div class="col-lg-3 col-md-12">284
285
<!--Name-->286
<select class="mdb-select colorful-select dropdown-primary mx-2">287
<option value="" disabled selected>Bulk actions</option>288
<option value="1">Delate</option>289
<option value="2">Export</option>290
<option value="3">Change segment</option>291
</select>292
293
</div>294
<!--Grid column-->295
296
<!--Grid column-->297
<div class="col-lg-3 col-md-6">298
299
<!--Blue select-->300
<select class="mdb-select colorful-select dropdown-primary mx-2">301
<option value="" disabled selected>Show only</option>302
<option value="1">All303
<span> (2000)</span>304
</option>305
<option value="2">Never opened306
<span> (200)</span>307
</option>308
<option value="3">Opened but unanswered309
<span> (1800)</span>310
</option>311
<option value="4">Answered312
<span> (200)</span>313
</option>314
<option value="5">Unsunscribed315
<span> (50)</span>316
</option>317
</select>318
<!--/Blue select-->319
320
</div>321
<!--Grid column-->322
323
<!--Grid column-->324
<div class="col-lg-3 col-md-6">325
326
<!--Blue select-->327
<select class="mdb-select colorful-select dropdown-primary mx-2">328
<option value="" disabled selected>Filter segments</option>329
<option value="1">Contacts in no segments330
<span> (100)</span>331
</option>332
<option value="1">Segment 1333
<span> (2000)</span>334
</option>335
<option value="2">Segment 2336
<span> (1000)</span>337
</option>338
<option value="3">Segment 3339
<span> (4000)</span>340
</option>341
</select>342
<!--/Blue select-->343
344
</div>345
<!--Grid column-->346
347
<!--Grid column-->348
<div class="col-lg-3 col-md-6">349
350
<form class="form-inline mt-2 ml-2">351
<input class="form-control my-0 py-0" type="text" placeholder="Search" style="max-width: 150px;">352
<button class="btn btn-sm btn-info ml-2 px-2">353
<i class="fa fa-search"></i>354
</button>355
</form>356
357
</div>358
<!--Grid column-->359
360
</div>361
<!--Grid row-->362
363
</div>364
<!--Top Table UI-->365
366
<!--Card-->367
<div class="card card-cascade narrower">368
369
<!--Card header-->370
<div class="view view-cascade py-3 gradient-card-header info-color-dark mx-4 d-flex justify-content-between align-items-center">371
372
<div>373
<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">374
<i class="fa fa-th-large mt-0"></i>375
</button>376
<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">377
<i class="fa fa-columns mt-0"></i>378
</button>379
</div>380
381
<a href="" class="white-text mx-3">Table name</a>382
383
<div>384
<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">385
<i class="fas fa-pencil-alt mt-0"></i> </button>386
<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">387
<i class="fas fa-times mt-0"></i>388
</button>389
<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">390
<i class="fa fa-info-circle mt-0"></i>391
</button>392
</div>393
394
</div>395
<!--/Card header-->396
397
<!--Card content-->398
<div class="card-body">399
400
<div class="table-responsive">401
402
<table class="table text-nowrap">403
<thead>404
<tr>405
<th>#</th>406
<th>First column</th>407
<th>Second column</th>408
<th>Third column</th>409
<th>Fourth column</th>410
<th>Fifth column</th>411
<th>Sixth column</th>412
</tr>413
</thead>414
<tbody>415
<tr>416
<th scope="row">1</th>417
<td>Lorem Ipsum</td>418
<td>Lorem Ipsum</td>419
<td>Lorem Ipsum</td>420
<td>Lorem Ipsum</td>421
<td>Lorem Ipsum</td>422
<td>Lorem Ipsum</td>423
</tr>424
<tr>425
<th scope="row">2</th>426
<td>Lorem Ipsum</td>427
<td>Lorem Ipsum</td>428
<td>Lorem Ipsum</td>429
<td>Lorem Ipsum</td>430
<td>Lorem Ipsum</td>431
<td>Lorem Ipsum</td>432
</tr>433
<tr>434
<th scope="row">3</th>435
<td>Lorem Ipsum</td>436
<td>Lorem Ipsum</td>437
<td>Lorem Ipsum</td>438
<td>Lorem Ipsum</td>439
<td>Lorem Ipsum</td>440
<td>Lorem Ipsum</td>441
</tr>442
</tbody>443
</table>444
445
</div>446
<hr class="my-0">447
448
<!--Bottom Table UI-->449
<div class="d-flex justify-content-between">450
451
<!--Name-->452
<div class="wrap">453
<select class="mdb-select colorful-select dropdown-primary mt-2">454
<option value="" disabled>Rows number</option>455
<option value="1" selected>10 rows</option>456
<option value="2">25 rows</option>457
<option value="3">50 rows</option>458
<option value="4">100 rows</option>459
</select>460
</div>461
<!--Pagination -->462
<nav class="mt-4">463
<ul class="pagination pagination-circle pg-blue mb-0">464
465
<!--First-->466
<li class="page-item disabled">467
<a class="page-link">First</a>468
</li>469
470
<!--Arrow left-->471
<li class="page-item disabled">472
<a class="page-link" aria-label="Previous">473
<span aria-hidden="true">«</span>474
<span class="sr-only">Previous</span>475
</a>476
</li>477
478
<!--Numbers-->479
<li class="page-item active">480
<a class="page-link">1</a>481
</li>482
<li class="page-item">483
<a class="page-link">2</a>484
</li>485
<li class="page-item">486
<a class="page-link">3</a>487
</li>488
<li class="page-item">489
<a class="page-link">4</a>490
</li>491
<li class="page-item">492
<a class="page-link">5</a>493
</li>494
495
<!--Arrow right-->496
<li class="page-item">497
<a class="page-link" aria-label="Next">498
<span aria-hidden="true">»</span>499
<span class="sr-only">Next</span>500
</a>501
</li>502
503
<!--First-->504
<li class="page-item">505
<a class="page-link">Last</a>506
</li>507
508
</ul>509
</nav>510
<!--/Pagination -->511
</div>512
<!--Bottom Table UI-->513
</div>514
<!--/.Card content-->515
516
</div>517
<!--/.Card-->518
</section>519
<!--Section: Table-->520
521
<!--Section: Accordion-->522
<section class="mb-5">523
524
<!--Accordion wrapper-->525
<div class="md-accordion accordion" id="accordionEx" role="tablist" aria-multiselectable="true">526
527
<!-- Accordion card -->528
<div class="card">529
530
<!-- Card header -->531
<div class="card-header" role="tab" id="headingOne">532
533
<!--Options-->534
<div class="dropdown float-left">535
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"536
aria-haspopup="true" aria-expanded="false">537
<i class="fas fa-pencil-alt"></i>538
</button>539
<div class="dropdown-menu dropdown-info">540
<a class="dropdown-item" href="#">Add new</a>541
<a class="dropdown-item" href="#">Rename folder</a>542
<a class="dropdown-item" href="#">Delete folder</a>543
</div>544
</div>545
546
<!-- Heading -->547
<a id="folder-1" data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne"548
aria-expanded="true" aria-controls="collapseOne">549
<h5 class="mt-1 mb-0">550
<span>Folder 1</span>551
<i class="fas fa-angle-down rotate-icon"></i>552
</h5>553
</a>554
555
</div>556
557
<!-- Card body -->558
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">559
<div class="card-body">560
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad561
squid. 3 wolf moon officia aute,562
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch563
3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda564
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt565
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer566
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them567
accusamus568
labore sustainable VHS.569
</div>570
</div>571
</div>572
<!-- Accordion card -->573
574
<!-- Accordion card -->575
<div class="card">576
577
<!-- Card header -->578
<div class="card-header" role="tab" id="headingTwo">579
580
<!--Options-->581
<div class="dropdown float-left">582
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"583
aria-haspopup="true" aria-expanded="false">584
<i class="fas fa-pencil-alt"></i>585
</button>586
<div class="dropdown-menu dropdown-info">587
<a class="dropdown-item" href="#">Add new</a>588
<a class="dropdown-item" href="#">Rename folder</a>589
<a class="dropdown-item" href="#">Delete folder</a>590
</div>591
</div>592
593
<!-- Heading -->594
<a id="folder-2" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo"595
aria-expanded="true" aria-controls="collapseTwo">596
<h5 class="mt-1 mb-0">597
<span>Folder 2</span>598
<i class="fas fa-angle-down rotate-icon"></i>599
</h5>600
</a>601
602
</div>603
604
<!-- Card body -->605
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">606
<div class="card-body">607
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad608
squid. 3 wolf moon officia aute,609
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch610
3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda611
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt612
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer613
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them614
accusamus615
labore sustainable VHS.616
</div>617
</div>618
</div>619
<!-- Accordion card -->620
621
<!-- Accordion card -->622
<div class="card">623
624
<!-- Card header -->625
<div class="card-header" role="tab" id="headingThree">626
627
<!--Options-->628
<div class="dropdown float-left">629
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"630
aria-haspopup="true" aria-expanded="false">631
<i class="fas fa-pencil-alt"></i>632
</button>633
<div class="dropdown-menu dropdown-info">634
<a class="dropdown-item" href="#">Add new</a>635
<a class="dropdown-item" href="#">Rename folder</a>636
<a class="dropdown-item" href="#">Delete folder</a>637
</div>638
</div>639
640
<!-- Heading -->641
<a id="folder-3" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree"642
aria-expanded="true" aria-controls="collapseThree">643
<h5 class="mt-1 mb-0">644
<span>Folder 3</span>645
<i class="fas fa-angle-down rotate-icon"></i>646
</h5>647
</a>648
</div>649
650
<!-- Card body -->651
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">652
<div class="card-body">653
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad654
squid. 3 wolf moon officia aute,655
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch656
3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda657
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt658
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer659
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them660
accusamus661
labore sustainable VHS.662
</div>663
</div>664
</div>665
<!-- Accordion card -->666
</div>667
<!--/.Accordion wrapper-->668
669
</section>670
<!--Section: Accordion-->671
672
</div>673
</main>674
<!--Main layout-->675
676
<!-- Footer -->677
<footer class="page-footer font-small">678
679
<!-- Copyright -->680
<div class="footer-copyright text-center py-3">© 2018 Copyright:681
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> MDBootstrap.com</a>682
</div>683
<!-- Copyright -->684
685
</footer>686
<!-- Footer -->687
688
</body>xxxxxxxxxx1
.side-nav .logo-sn {2
padding-bottom: 1rem;3
padding-top: 1rem;4
}5
6
.side-nav .logo-sn img {7
height: 38px;8
}9
10
.side-nav .search-form input[type=text] {11
margin-top: 0;12
padding-top: 12px;13
padding-bottom: 12px;14
border-top: 1px solid rgba(255, 255, 255, 0.3);15
border-bottom: 1px solid rgba(255, 255, 255, 0.3);16
}17
18
body {19
background-color: #eee;20
}21
22
.accordion .card {23
margin-bottom: 1.2rem;24
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);25
}26
27
.accordion .card .card-body {28
border-top: 1px solid #eee;29
}xxxxxxxxxx1
$(document).ready(function() {2
// SideNav Button Initialization3
$(".button-collapse").sideNav();4
// SideNav Scrollbar Initialization5
var sideNavScrollbar = document.querySelector('.custom-scrollbar');6
var ps = new PerfectScrollbar(sideNavScrollbar);7
})8
// Material Select Initialization9
$(document).ready(function () {10
$('.mdb-select').material_select();11
});12
// Data Picker Initialization13
$('.datepicker').pickadate();14
// Tooltip Initialization15
$(function () {16
$('[data-toggle="tooltip"]').tooltip()17
})18
// Minimalist chart19
$(function () {20
$('.min-chart#chart-sales').easyPieChart({21
barColor: "#4caf50",22
onStep: function (from, to, percent) {23
$(this.el).find('.percent').text(Math.round(percent));24
}25
});26
});27
// Main chart28
var ctxL = document.getElementById("lineChart").getContext('2d');29
var myLineChart = new Chart(ctxL, {30
type: 'line',31
data: {32
labels: ["January", "February", "March", "April", "May", "June", "July"],33
datasets: [{34
label: "My First dataset",35
fillColor: "#fff",36
backgroundColor: 'rgba(255, 255, 255, .3)',37
borderColor: 'rgba(255, 255, 255)',38
data: [0, 10, 5, 2, 20, 30, 45],39
}]40
},41
options: {42
legend: {43
labels: {44
fontColor: "#fff",45
}46
},47
scales: {48
xAxes: [{49
gridLines: {50
display: true,51
color: "rgba(255,255,255,.25)"52
},53
ticks: {54
fontColor: "#fff",55
},56
}],57
yAxes: [{58
display: true,59
gridLines: {60
display: true,61
color: "rgba(255,255,255,.25)"62
},63
ticks: {64
fontColor: "#fff",65
},66
}],67
}68
}69
});70
$(function () {71
$('#folder-1').click(function () {72
toastr.error("Folder 1 has been clicked!", "Folder 1", {73
"positionClass": "md-toast-top-right",74
});75
});76
$('#folder-2').click(function () {77
// make it not dissappear78
toastr.info("Folder 2 has been clicked!", "Folder 2", );79
});80
$('#folder-3').click(function () {81
// make it not dissappear82
toastr.info("Folder 3 has been clicked!", "Folder 3", );83
});84
}); Console errors: 0