Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 676 lines (661 sloc) 42 KB
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Dashboard 4</title>
<!-- Fontfaces CSS-->
<link href="css/font-face.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="vendor/wow/animate.css" rel="stylesheet" media="all">
<link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="vendor/slick/slick.css" rel="stylesheet" media="all">
<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
<link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="css/theme.css" rel="stylesheet" media="all">
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- HEADER DESKTOP-->
<header class="header-desktop4">
<div class="container">
<div class="header4-wrap">
<div class="header__logo">
<a href="#">
<img src="images/icon/logo-blue.png" alt="CoolAdmin" />
</a>
</div>
<div class="header__tool">
<div class="header-button-item has-noti js-item-menu">
<i class="zmdi zmdi-notifications"></i>
<div class="notifi-dropdown js-dropdown">
<div class="notifi__title">
<p>You have 3 Notifications</p>
</div>
<div class="notifi__item">
<div class="bg-c1 img-cir img-40">
<i class="zmdi zmdi-email-open"></i>
</div>
<div class="content">
<p>You got a email notification</p>
<span class="date">April 12, 2018 06:50</span>
</div>
</div>
<div class="notifi__item">
<div class="bg-c2 img-cir img-40">
<i class="zmdi zmdi-account-box"></i>
</div>
<div class="content">
<p>Your account has been blocked</p>
<span class="date">April 12, 2018 06:50</span>
</div>
</div>
<div class="notifi__item">
<div class="bg-c3 img-cir img-40">
<i class="zmdi zmdi-file-text"></i>
</div>
<div class="content">
<p>You got a new file</p>
<span class="date">April 12, 2018 06:50</span>
</div>
</div>
<div class="notifi__footer">
<a href="#">All notifications</a>
</div>
</div>
</div>
<div class="header-button-item js-item-menu">
<i class="zmdi zmdi-settings"></i>
<div class="setting-dropdown js-dropdown">
<div class="account-dropdown__body">
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-account"></i>Account</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-settings"></i>Setting</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-money-box"></i>Billing</a>
</div>
</div>
<div class="account-dropdown__body">
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-globe"></i>Language</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-pin"></i>Location</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-email"></i>Email</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-notifications"></i>Notifications</a>
</div>
</div>
</div>
</div>
<div class="account-wrap">
<div class="account-item account-item--style2 clearfix js-item-menu">
<div class="image">
<img src="images/icon/avatar-01.jpg" alt="John Doe" />
</div>
<div class="content">
<a class="js-acc-btn" href="#">john doe</a>
</div>
<div class="account-dropdown js-dropdown">
<div class="info clearfix">
<div class="image">
<a href="#">
<img src="images/icon/avatar-01.jpg" alt="John Doe" />
</a>
</div>
<div class="content">
<h5 class="name">
<a href="#">john doe</a>
</h5>
<span class="email">johndoe@example.com</span>
</div>
</div>
<div class="account-dropdown__body">
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-account"></i>Account</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-settings"></i>Setting</a>
</div>
<div class="account-dropdown__item">
<a href="#">
<i class="zmdi zmdi-money-box"></i>Billing</a>
</div>
</div>
<div class="account-dropdown__footer">
<a href="#">
<i class="zmdi zmdi-power"></i>Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP -->
<!-- WELCOME-->
<section class="welcome2 p-t-40 p-b-55">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="au-breadcrumb3">
<div class="au-breadcrumb-left">
<span class="au-breadcrumb-span">You are here:</span>
<ul class="list-unstyled list-inline au-breadcrumb__list">
<li class="list-inline-item active">
<a href="#">Home</a>
</li>
<li class="list-inline-item seprate">
<span>/</span>
</li>
<li class="list-inline-item">Dashboard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="welcome2-inner m-t-60">
<div class="welcome2-greeting">
<h1 class="title-6">Hi
<span>John</span>, Welcome back</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<form class="form-header form-header2" action="" method="post">
<input class="au-input au-input--w435" type="text" name="search" placeholder="Search for datas &amp; reports...">
<button class="au-btn--submit" type="submit">
<i class="zmdi zmdi-search"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- END WELCOME-->
<!-- PAGE CONTENT-->
<div class="page-container3">
<section class="alert-wrap p-t-70 p-b-70">
<div class="container">
<!-- ALERT-->
<div class="alert au-alert-success alert-dismissible fade show au-alert au-alert--70per" role="alert">
<i class="zmdi zmdi-check-circle"></i>
<span class="content">You successfully read this important alert message.</span>
<button class="close" type="button" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="zmdi zmdi-close-circle"></i>
</span>
</button>
</div>
<!-- END ALERT-->
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-xl-3">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar3 js-spe-sidebar">
<nav class="navbar-sidebar2 navbar-sidebar3">
<ul class="list-unstyled navbar__list">
<li class="active has-sub">
<a class="js-arrow" href="#">
<i class="fas fa-tachometer-alt"></i>Dashboard 4
<span class="arrow">
<i class="fas fa-angle-down"></i>
</span>
</a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li>
<a href="index.html">Dashboard 1</a>
</li>
<li>
<a href="index2.html">Dashboard 2</a>
</li>
<li>
<a href="index3.html">Dashboard 3</a>
</li>
<li>
<a href="index4.html">Dashboard 4</a>
</li>
</ul>
</li>
<li>
<a href="inbox.html">
<i class="fas fa-chart-bar"></i>Inbox</a>
<span class="inbox-num">3</span>
</li>
<li>
<a href="#">
<i class="fas fa-shopping-basket"></i>eCommerce</a>
</li>
<li class="has-sub">
<a class="js-arrow" href="#">
<i class="fas fa-trophy"></i>Features
<span class="arrow">
<i class="fas fa-angle-down"></i>
</span>
</a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li>
<a href="table.html">Tables</a>
</li>
<li>
<a href="form.html">Forms</a>
</li>
<li>
<a href="#">Calendar</a>
</li>
<li>
<a href="map.html">Maps</a>
</li>
</ul>
</li>
<li class="has-sub">
<a class="js-arrow" href="#">
<i class="fas fa-copy"></i>Pages
<span class="arrow">
<i class="fas fa-angle-down"></i>
</span>
</a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="register.html">Register</a>
</li>
<li>
<a href="forget-pass.html">Forget Password</a>
</li>
</ul>
</li>
<li class="has-sub">
<a class="js-arrow" href="#">
<i class="fas fa-desktop"></i>UI Elements
<span class="arrow">
<i class="fas fa-angle-down"></i>
</span>
</a>
<ul class="list-unstyled navbar__sub-list js-sub-list">
<li>
<a href="button.html">Button</a>
</li>
<li>
<a href="badge.html">Badges</a>
</li>
<li>
<a href="tab.html">Tabs</a>
</li>
<li>
<a href="card.html">Cards</a>
</li>
<li>
<a href="alert.html">Alerts</a>
</li>
<li>
<a href="progress-bar.html">Progress Bars</a>
</li>
<li>
<a href="modal.html">Modals</a>
</li>
<li>
<a href="switch.html">Switchs</a>
</li>
<li>
<a href="grid.html">Grids</a>
</li>
<li>
<a href="fontawesome.html">FontAwesome</a>
</li>
<li>
<a href="typo.html">Typography</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
<!-- END MENU SIDEBAR-->
</div>
<div class="col-xl-9">
<!-- PAGE CONTENT-->
<div class="page-content">
<div class="row">
<div class="col-lg-8">
<!-- RECENT REPORT-->
<div class="recent-report3 m-b-40">
<div class="title-wrap">
<h3 class="title-3">recent reports</h3>
<div class="chart-info-wrap">
<div class="chart-note">
<span class="dot dot--blue"></span>
<span>Blue</span>
</div>
<div class="chart-note mr-0">
<span class="dot dot--green"></span>
<span>green</span>
</div>
</div>
</div>
<div class="filters m-b-55">
<div class="rs-select2--dark rs-select2--md m-r-10 rs-select2--border">
<select class="js-select2" name="property">
<option selected="selected">Products Sales</option>
<option value="">Products</option>
<option value="">Services</option>
</select>
<div class="dropDownSelect2"></div>
</div>
<div class="rs-select2--dark rs-select2--sm rs-select2--border">
<select class="js-select2 au-select-dark" name="time">
<option selected="selected">All Time</option>
<option value="">By Month</option>
<option value="">By Day</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
<div class="chart-wrap">
<canvas id="recent-rep3-chart"></canvas>
</div>
</div>
<!-- END RECENT REPORT-->
</div>
<div class="col-lg-4">
<!-- CHART PERCENT-->
<div class="chart-percent-3 m-b-40">
<h3 class="title-3 m-b-25">chart by %</h3>
<div class="chart-note m-b-5">
<span class="dot dot--blue"></span>
<span>products</span>
</div>
<div class="chart-note">
<span class="dot dot--red"></span>
<span>services</span>
</div>
<div class="chart-wrap m-t-60">
<canvas id="percent-chart2"></canvas>
</div>
</div>
<!-- END CHART PERCENT-->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- DATA TABLE-->
<div class="table-responsive m-b-40">
<table class="table table-borderless table-data3">
<thead>
<tr>
<th>date</th>
<th>type</th>
<th>description</th>
<th>status</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-09-29 05:57</td>
<td>Mobile</td>
<td>iPhone X 64Gb Grey</td>
<td class="process">Processed</td>
<td>$999.00</td>
</tr>
<tr>
<td>2018-09-28 01:22</td>
<td>Mobile</td>
<td>Samsung S8 Black</td>
<td class="process">Processed</td>
<td>$756.00</td>
</tr>
<tr>
<td>2018-09-27 02:12</td>
<td>Game</td>
<td>Game Console Controller</td>
<td class="denied">Denied</td>
<td>$22.00</td>
</tr>
<tr>
<td>2018-09-26 23:06</td>
<td>Mobile</td>
<td>iPhone X 256Gb Black</td>
<td class="denied">Denied</td>
<td>$1199.00</td>
</tr>
<tr>
<td>2018-09-25 19:03</td>
<td>Accessories</td>
<td>USB 3.0 Cable</td>
<td class="process">Processed</td>
<td>$10.00</td>
</tr>
<tr>
<td>2018-09-29 05:57</td>
<td>Accesories</td>
<td>Smartwatch 4.0 LTE Wifi</td>
<td class="denied">Denied</td>
<td>$199.00</td>
</tr>
<tr>
<td>2018-09-24 19:10</td>
<td>Camera</td>
<td>Camera C430W 4k</td>
<td class="process">Processed</td>
<td>$699.00</td>
</tr>
<tr>
<td>2018-09-22 00:43</td>
<td>Computer</td>
<td>Macbook Pro Retina 2017</td>
<td class="process">Processed</td>
<td>$10.00</td>
</tr>
</tbody>
</table>
</div>
<!-- END DATA TABLE -->
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="au-card au-card--no-shadow au-card--no-pad m-b-40 au-card--border">
<div class="au-card-title" style="background-image:url('images/bg-title-01.jpg');">
<div class="bg-overlay bg-overlay--blue"></div>
<h3>
<i class="zmdi zmdi-account-calendar"></i>22 May, 2018</h3>
<button class="au-btn-plus">
<i class="zmdi zmdi-plus"></i>
</button>
</div>
<div class="au-task js-list-load au-task--border">
<div class="au-task__title">
<p>Tasks for John Doe</p>
</div>
<div class="au-task-list js-scrollbar3">
<div class="au-task__item au-task__item--danger">
<div class="au-task__item-inner">
<h5 class="task">
<a href="#">Meeting about plan for Admin Template 2018</a>
</h5>
<span class="time">10:00 AM</span>
</div>
</div>
<div class="au-task__item au-task__item--warning">
<div class="au-task__item-inner">
<h5 class="task">
<a href="#">Create new task for Dashboard</a>
</h5>
<span class="time">11:00 AM</span>
</div>
</div>
<div class="au-task__item au-task__item--primary">
<div class="au-task__item-inner">
<h5 class="task">
<a href="#">Meeting about plan for Admin Template 2018</a>
</h5>
<span class="time">02:00 PM</span>
</div>
</div>
<div class="au-task__item au-task__item--success">
<div class="au-task__item-inner">
<h5 class="task">
<a href="#">Create new task for Dashboard</a>
</h5>
<span class="time">03:30 PM</span>
</div>
</div>
<div class="au-task__item au-task__item--danger js-load-item">
<div class="au-task__item-inner">
<h5 class="task">
<a href="#">Meeting about plan for Admin Template 2018</a>
</h5>
<span class="time">10:00 AM</span>
</div>
</div>
<div class="au-task__item au-task__item--warning js-load-item">
<div class="au-task__item-inner">
<h5 class="task">
<a href="#">Create new task for Dashboard</a>
</h5>
<span class="time">11:00 AM</span>
</div>
</div>
</div>
<div class="au-task__footer">
<button class="au-btn au-btn-load js-load-btn">load more</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="au-card au-card--no-shadow au-card--no-pad m-b-40 au-card--border">
<div class="au-card-title" style="background-image:url('images/bg-title-02.jpg');">
<div class="bg-overlay bg-overlay--blue"></div>
<h3>
<i class="zmdi zmdi-comment-text"></i>Chat</h3>
<button class="au-btn-plus">
<i class="zmdi zmdi-plus"></i>
</button>
</div>
<div class="au-inbox-wrap">
<div class="au-chat au-chat--border">
<div class="au-chat__title">
<div class="au-chat-info">
<div class="avatar-wrap online">
<div class="avatar avatar--small">
<img src="images/icon/avatar-02.jpg" alt="John Smith">
</div>
</div>
<span class="nick">
<a href="#">John Smith</a>
</span>
</div>
</div>
<div class="au-chat__content au-chat__content2 js-scrollbar5">
<div class="recei-mess-wrap">
<span class="mess-time">12 Min ago</span>
<div class="recei-mess__inner">
<div class="avatar avatar--tiny">
<img src="images/icon/avatar-02.jpg" alt="John Smith">
</div>
<div class="recei-mess-list">
<div class="recei-mess">Lorem ipsum dolor sit amet elit</div>
<div class="recei-mess">Donec tempor viverra</div>
</div>
</div>
</div>
<div class="send-mess-wrap">
<span class="mess-time">30 Sec ago</span>
<div class="send-mess__inner">
<div class="send-mess-list">
<div class="send-mess">Lorem ipsum dolor sit amet elit</div>
</div>
</div>
</div>
</div>
<div class="au-chat-textfield">
<form class="au-form-icon">
<input class="au-input au-input--full au-input--h65" type="text" placeholder="Type a message">
<button class="au-input-icon">
<i class="zmdi zmdi-camera"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2018 Colorlib. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.</p>
</div>
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
</div>
</div>
</section>
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- Jquery JS-->
<script src="vendor/jquery-3.2.1.min.js"></script>
<!-- Bootstrap JS-->
<script src="vendor/bootstrap-4.1/popper.min.js"></script>
<script src="vendor/bootstrap-4.1/bootstrap.min.js"></script>
<!-- Vendor JS -->
<script src="vendor/slick/slick.min.js">
</script>
<script src="vendor/wow/wow.min.js"></script>
<script src="vendor/animsition/animsition.min.js"></script>
<script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="vendor/counter-up/jquery.waypoints.min.js"></script>
<script src="vendor/counter-up/jquery.counterup.min.js">
</script>
<script src="vendor/circle-progress/circle-progress.min.js"></script>
<script src="vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="vendor/chartjs/Chart.bundle.min.js"></script>
<script src="vendor/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="js/main.js"></script>
</body>
</html>
<!-- end document-->
You can’t perform that action at this time.