material-drawn
Version:
Materialize Admin Dashboard Template
792 lines (788 loc) • 164 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Free Download Materialize Admin Dashboard Template">
<meta name="keywords" content="HTML,CSS,JavaScript,Materialize,JQuery,Datatables,Amcharts,Material-Icons,Admin Dashboard,Template,Free Download">
<meta name="author" content="Akshay Soni">
<title>MaterialDrawn | Akshay Soni</title>
<link rel="canonical" href="https://materialdrawn.000webhostapp.com" />
<link rel="canonical" href="https://material-drawn.herokuapp.com" />
<link rel="stylesheet" href="dist/theme.min.css">
<link rel="stylesheet" href="dist/Style.css">
<style type="text/css" id="page"></style>
<style type="text/css" id="material-custom"></style>
<style type="text/css" id="custom"></style>
</head>
<body>
<!-- preloader start -->
<div class="preloader-background">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<!-- preloader end -->
<!-- navbar start -->
<div class="navbar-fixed">
<nav class="theme-colour gradient">
<div class="nav-wrapper">
<ul>
<li>
<button data-target="mobile-demo" class="sidenav-trigger btn-large btn-flat waves-effect waves-light white-text"><i class="material-icons">menu</i></button>
</li>
</ul>
<a href="#!" class="brand-logo"><span style="letter-spacing:-7px;">M</span>Drawn</a>
<ul class="right hide-on-med-and-down">
<li>
<div class="row search-wrap">
<div class="col s12 ">
<div class="input-field ">
<!-- <i class="material-icons prefix search-icon">search</i> -->
<input type="text" placeholder="search" class="autocomplete search-field theme-text-colour">
</div>
</div>
</div>
</li>
<li class="country">
<a class="dropdown-trigger" href="#!" data-target="dropdown1"><img src="https://cdn4.iconfinder.com/data/icons/flag_set/128/in.png" alt="" srcset=""></a>
<ul id="dropdown1" class="dropdown-content">
<li>
<a href="#!" class="theme-colour"><img src="https://cdn4.iconfinder.com/data/icons/flag_set/128/ca.png" alt="" srcset=""> canada</a>
</li>
<li>
<a href="#!" class="theme-colour"><img src="https://cdn4.iconfinder.com/data/icons/flag_set/128/cn.png" alt="" srcset=""> china</a>
</li>
<li>
<a href="#!" class="theme-colour"><img src="https://cdn4.iconfinder.com/data/icons/flag_set/128/au.png" alt="" srcset=""> australia</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-trigger" href="#!" data-target="dropdown2"><i class="material-icons">notifications</i></a>
<ul id="dropdown2" class="dropdown-content">
<li>
<a href="#!" class="theme-colour">NOTIFICATIONS
<span class="new badge theme-colour gradient">
3
</span>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!" class="theme-colour"><i class="material-icons">date_range</i>appointment</a>
</li>
<li>
<a href="#!" class="theme-colour"><i class="material-icons">local_grocery_store</i>new order</a>
</li>
<li>
<a href="#!" class="theme-colour"><i class="material-icons">trending_up</i>report generated</a>
</li>
</ul>
</li>
<li><a href="#mailbox" callShow class="mailbox"><i class="material-icons">markunread</i></a></li>
<li>
<a href="#!" data-target="settings-demo" class="sidenav-trigger show-on-medium-and-up setting-trigger"><i class="material-icons">settings</i></a>
</li>
</ul>
<ul class="right">
<li>
<a href="#!" data-target="settings-demo" class="sidenav-trigger right show-on-medium-and-down setting-trigger"><i class="material-icons">settings</i></a>
</li>
</ul>
</div>
</nav>
</div>
<!-- navbar end -->
<!-- login modal start -->
<div id="modal1" class="modal">
<div class="modal-content">
<!-- <h4>Modal Header</h4>
<p>A bunch of text</p> -->
<ul class="collection with-header theme-text-colour">
<li class="collection-header theme-colour gradient">
<h4>Change Password</h4>
</li>
<li class="collection-item">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock_open</i>
<input id="old_password" type="text" value="xyz123+" disabled>
<label for="old_password">Old Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock</i>
<input id="new_password" type="password" class="validate">
<label for="new_password">Password</label>
</div>
</div>
<div class="row">
<div class="col s12 input-field left">
<p>
<label>
<input type="checkbox" />
<span>Remember me</span>
</label>
</p>
</div>
</div>
<div class="row">
<div class="col s4 offset-s8">
<button class="btn waves-effect waves-light theme-colour gradient modal-close" type="button" name="action">Submit
</button>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
<!-- <div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div> -->
</div>
<!-- login modal end -->
<!-- settings start -->
<ul class="sidenav sidenav1" id="settings-demo">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li><a class="subheader ">Download links</a></li>
<li>
<div class="row no-margin">
<div class="col s12 m4">
<a class="waves-effect waves-light down-circle" href="https://yarnpkg.com/en/package/material-drawn"><img class="circle download-link" src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3%0D%0AQm94PSIwIDAgNTE4IDUxOCI+PHN0eWxlPi5zdDB7ZmlsbDojMmM4ZWJifS5zdDF7ZmlsbDojZmZm%0D%0AfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTI1OSAwYzE0MyAwIDI1OSAxMTYgMjU5IDI1%0D%0AOVM0MDIgNTE4IDI1OSA1MTggMCA0MDIgMCAyNTkgMTE2IDAgMjU5IDB6Ii8+PHBhdGggY2xhc3M9%0D%0AInN0MSIgZD0iTTQzNS4yIDMzNy41Yy0xLjgtMTQuMi0xMy44LTI0LTI5LjItMjMuOC0yMyAuMy00%0D%0AMi4zIDEyLjItNTUuMSAyMC4xLTUgMy4xLTkuMyA1LjQtMTMgNy4xLjgtMTEuNi4xLTI2LjgtNS45%0D%0ALTQzLjUtNy4zLTIwLTE3LjEtMzIuMy0yNC4xLTM5LjQgOC4xLTExLjggMTkuMi0yOSAyNC40LTU1%0D%0ALjYgNC41LTIyLjcgMy4xLTU4LTcuMi03Ny44LTIuMS00LTUuNi02LjktMTAtOC4xLTEuOC0uNS01%0D%0ALjItMS41LTExLjkuNEMyOTMuMSA5NiAyODkuNiA5My44IDI4Ni45IDkyYy01LjYtMy42LTEyLjIt%0D%0ANC40LTE4LjQtMi4xLTguMyAzLTE1LjQgMTEtMjIuMSAyNS4yLTEgMi4xLTEuOSA0LjEtMi43IDYu%0D%0AMS0xMi43LjktMzIuNyA1LjUtNDkuNiAyMy44LTIuMSAyLjMtNi4yIDQtMTAuNSA1LjZoLjFjLTgu%0D%0AOCAzLjEtMTIuOCAxMC4zLTE3LjcgMjMuMy02LjggMTguMi4yIDM2LjEgNy4xIDQ3LjctOS40IDgu%0D%0ANC0yMS45IDIxLjgtMjguNSAzNy41LTguMiAxOS40LTkuMSAzOC40LTguOCA0OC43LTcgNy40LTE3%0D%0ALjggMjEuMy0xOSAzNi45LTEuNiAyMS44IDYuMyAzNi42IDkuOCA0MiAxIDEuNiAyLjEgMi45IDMu%0D%0AMyA0LjItLjQgMi43LS41IDUuNi4xIDguNiAxLjMgNyA1LjcgMTIuNyAxMi40IDE2LjMgMTMuMiA3%0D%0AIDMxLjYgMTAgNDUuOCAyLjkgNS4xIDUuNCAxNC40IDEwLjYgMzEuMyAxMC42aDFjNC4zIDAgNTgu%0D%0AOS0yLjkgNzQuOC02LjggNy4xLTEuNyAxMi00LjcgMTUuMi03LjQgMTAuMi0zLjIgMzguNC0xMi44%0D%0AIDY1LTMwIDE4LjgtMTIuMiAyNS4zLTE0LjggMzkuMy0xOC4yIDEzLjYtMy4zIDIyLjEtMTUuNyAy%0D%0AMC40LTI5LjR6bS0yMy44IDE0LjdjLTE2IDMuOC0yNC4xIDcuMy00My45IDIwLjItMzAuOSAyMC02%0D%0ANC43IDI5LjMtNjQuNyAyOS4zcy0yLjggNC4yLTEwLjkgNi4xYy0xNCAzLjQtNjYuNyA2LjMtNzEu%0D%0ANSA2LjQtMTIuOS4xLTIwLjgtMy4zLTIzLTguNi02LjctMTYgOS42LTIzIDkuNi0yM3MtMy42LTIu%0D%0AMi01LjctNC4yYy0xLjktMS45LTMuOS01LjctNC41LTQuMy0yLjUgNi4xLTMuOCAyMS0xMC41IDI3%0D%0ALjctOS4yIDkuMy0yNi42IDYuMi0zNi45LjgtMTEuMy02IC44LTIwLjEuOC0yMC4xcy02LjEgMy42%0D%0ALTExLTMuOGMtNC40LTYuOC04LjUtMTguNC03LjQtMzIuNyAxLjItMTYuMyAxOS40LTMyLjEgMTku%0D%0ANC0zMi4xcy0zLjItMjQuMSA3LjMtNDguOGM5LjUtMjIuNSAzNS4xLTQwLjYgMzUuMS00MC42cy0y%0D%0AMS41LTIzLjgtMTMuNS00NS4yYzUuMi0xNCA3LjMtMTMuOSA5LTE0LjUgNi0yLjMgMTEuOC00Ljgg%0D%0AMTYuMS05LjUgMjEuNS0yMy4yIDQ4LjktMTguOCA0OC45LTE4LjhzMTMtMzkuNSAyNS0zMS44YzMu%0D%0ANyAyLjQgMTcgMzIgMTcgMzJzMTQuMi04LjMgMTUuOC01LjJjOC42IDE2LjcgOS42IDQ4LjYgNS44%0D%0AIDY4LTYuNCAzMi0yMi40IDQ5LjItMjguOCA2MC0xLjUgMi41IDE3LjIgMTAuNCAyOSA0My4xIDEw%0D%0ALjkgMjkuOSAxLjIgNTUgMi45IDU3LjguMy41LjQuNy40LjdzMTIuNSAxIDM3LjYtMTQuNWMxMy40%0D%0ALTguMyAyOS4zLTE3LjYgNDcuNC0xNy44IDE3LjUtLjMgMTguNCAyMC4yIDUuMiAyMy40eiIvPjwv%0D%0Ac3ZnPg=="
alt=""></a>
</div>
<div class="col s12 m4">
<a class="waves-effect waves-light down-circle" href="https://www.npmjs.com/package/material-drawn"><img class="circle download-link" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCA3%0D%0AIj4KCTxwYXRoIGZpbGw9IiNDQjM4MzciIGQ9Ik0wLDB2Nmg1djFoNHYtMWg5di02Ii8+Cgk8cGF0%0D%0AaCBmaWxsPSIjRkZGIiBkPSJNMSwxdjRoMnYtM2gxdjNoMXYtNGgxdjVoMnYtNGgxdjJoLTF2MWgy%0D%0Adi00aDF2NGgydi0zaDF2M2gxdi0zaDF2M2gxdi00Ii8+Cjwvc3ZnPgo="
alt=""></a>
</div>
<div class="col s12 m4">
<a class="waves-effect waves-light down-circle" href="https://github.com/akshaysoni8707/MaterialDrawn"><img class="circle download-link" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt=""></a>
</div>
</div>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<div class="collapsible-header waves-effect waves-light"><i class="material-icons">arrow_drop_down</i>Themes</div>
<div class="collapsible-body">
<ul>
<li><a href="#!" colour="forestgreen" class="waves-effect waves-light">Forest</a></li>
<li><a href="#!" colour="midnightblue" class="waves-effect waves-light">Midnight</a></li>
<li><a href="#!" colour="tealish" class="waves-effect waves-light">tealish</a></li>
<li><a href="#!" colour="blood" class="waves-effect waves-light">Blood</a></li>
<li><a href="#!" colour="girl" class="waves-effect waves-light">Girl</a></li>
<li><a href="#!" colour="lavender" class="waves-effect waves-light">Lavender</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<!-- settings end -->
<!-- sidenav start -->
<ul class="sidenav" id="mobile-demo">
<li>
<div class="user-view">
<div class="background">
<!-- <img src="https://images.unsplash.com/photo-1532009877282-3340270e0529?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"> -->
</div>
<a href="#user"><img class="circle" src="https://images.unsplash.com/photo-1551930139-1deb64d83adc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60"></a>
<a href="#name"><span class="white-text name"></span><i class="material-icons online-icon green-text">fiber_manual_record</i>John Doe</span></a>
<a href="#email"><span class="white-text email">akshay.soni.8707@gmail.com</span></a>
</div>
</li>
<!-- <li>
<div class="row search-wrap">
<div class="col s12 ">
<div class="input-field ">
<input type="text" placeholder="search" class="autocomplete search-field theme-text-colour">
</div>
</div>
</div>
</li> -->
<li><a href="#dashboard" callShow class="waves-effect waves-light"><i class="material-icons">dashboard</i>Dashboard</a></li>
<li><a href="#mailbox" callShow class="waves-effect waves-light"><i class="material-icons">markunread</i>Mailbox</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Pages</div>
<div class="collapsible-body">
<ul>
<li><a href="login.html">Login Page</a></li>
<li><a href="register.html">Register Page</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<div class="collapsible-header waves-effect waves-light"><i class="material-icons">arrow_drop_down</i>Components</div>
<div class="collapsible-body">
<ul>
<li><a href="#alerts" callShow class="waves-effect waves-light">Alerts</a></li>
<li><a href="#badges" callShow class="waves-effect waves-light">Badges</a></li>
<li><a href="#buttons" callShow class="waves-effect waves-light">Buttons</a></li>
<li><a href="#breadcrumbs" callShow class="waves-effect waves-light">Breadcrumbs</a></li>
<li><a href="#collections" callShow class="waves-effect waves-light">Collections</a></li>
<li><a href="#collapsibles" callShow class="waves-effect waves-light">Collapsibles</a></li>
<li><a href="#tabs" callShow class="waves-effect waves-light">Tabs</a></li>
<li><a href="#navbars" callShow class="waves-effect waves-light">Navbars</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a class="waves-effect waves-light modal-trigger" href="#modal1">Change Password</a>
</li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Download links</a></li>
<li>
<div class="row no-margin">
<div class="col s4 m4">
<a class="waves-effect waves-light down-circle" href="https://yarnpkg.com/en/package/material-drawn"><img class="circle download-link" src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3%0D%0AQm94PSIwIDAgNTE4IDUxOCI+PHN0eWxlPi5zdDB7ZmlsbDojMmM4ZWJifS5zdDF7ZmlsbDojZmZm%0D%0AfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTI1OSAwYzE0MyAwIDI1OSAxMTYgMjU5IDI1%0D%0AOVM0MDIgNTE4IDI1OSA1MTggMCA0MDIgMCAyNTkgMTE2IDAgMjU5IDB6Ii8+PHBhdGggY2xhc3M9%0D%0AInN0MSIgZD0iTTQzNS4yIDMzNy41Yy0xLjgtMTQuMi0xMy44LTI0LTI5LjItMjMuOC0yMyAuMy00%0D%0AMi4zIDEyLjItNTUuMSAyMC4xLTUgMy4xLTkuMyA1LjQtMTMgNy4xLjgtMTEuNi4xLTI2LjgtNS45%0D%0ALTQzLjUtNy4zLTIwLTE3LjEtMzIuMy0yNC4xLTM5LjQgOC4xLTExLjggMTkuMi0yOSAyNC40LTU1%0D%0ALjYgNC41LTIyLjcgMy4xLTU4LTcuMi03Ny44LTIuMS00LTUuNi02LjktMTAtOC4xLTEuOC0uNS01%0D%0ALjItMS41LTExLjkuNEMyOTMuMSA5NiAyODkuNiA5My44IDI4Ni45IDkyYy01LjYtMy42LTEyLjIt%0D%0ANC40LTE4LjQtMi4xLTguMyAzLTE1LjQgMTEtMjIuMSAyNS4yLTEgMi4xLTEuOSA0LjEtMi43IDYu%0D%0AMS0xMi43LjktMzIuNyA1LjUtNDkuNiAyMy44LTIuMSAyLjMtNi4yIDQtMTAuNSA1LjZoLjFjLTgu%0D%0AOCAzLjEtMTIuOCAxMC4zLTE3LjcgMjMuMy02LjggMTguMi4yIDM2LjEgNy4xIDQ3LjctOS40IDgu%0D%0ANC0yMS45IDIxLjgtMjguNSAzNy41LTguMiAxOS40LTkuMSAzOC40LTguOCA0OC43LTcgNy40LTE3%0D%0ALjggMjEuMy0xOSAzNi45LTEuNiAyMS44IDYuMyAzNi42IDkuOCA0MiAxIDEuNiAyLjEgMi45IDMu%0D%0AMyA0LjItLjQgMi43LS41IDUuNi4xIDguNiAxLjMgNyA1LjcgMTIuNyAxMi40IDE2LjMgMTMuMiA3%0D%0AIDMxLjYgMTAgNDUuOCAyLjkgNS4xIDUuNCAxNC40IDEwLjYgMzEuMyAxMC42aDFjNC4zIDAgNTgu%0D%0AOS0yLjkgNzQuOC02LjggNy4xLTEuNyAxMi00LjcgMTUuMi03LjQgMTAuMi0zLjIgMzguNC0xMi44%0D%0AIDY1LTMwIDE4LjgtMTIuMiAyNS4zLTE0LjggMzkuMy0xOC4yIDEzLjYtMy4zIDIyLjEtMTUuNyAy%0D%0AMC40LTI5LjR6bS0yMy44IDE0LjdjLTE2IDMuOC0yNC4xIDcuMy00My45IDIwLjItMzAuOSAyMC02%0D%0ANC43IDI5LjMtNjQuNyAyOS4zcy0yLjggNC4yLTEwLjkgNi4xYy0xNCAzLjQtNjYuNyA2LjMtNzEu%0D%0ANSA2LjQtMTIuOS4xLTIwLjgtMy4zLTIzLTguNi02LjctMTYgOS42LTIzIDkuNi0yM3MtMy42LTIu%0D%0AMi01LjctNC4yYy0xLjktMS45LTMuOS01LjctNC41LTQuMy0yLjUgNi4xLTMuOCAyMS0xMC41IDI3%0D%0ALjctOS4yIDkuMy0yNi42IDYuMi0zNi45LjgtMTEuMy02IC44LTIwLjEuOC0yMC4xcy02LjEgMy42%0D%0ALTExLTMuOGMtNC40LTYuOC04LjUtMTguNC03LjQtMzIuNyAxLjItMTYuMyAxOS40LTMyLjEgMTku%0D%0ANC0zMi4xcy0zLjItMjQuMSA3LjMtNDguOGM5LjUtMjIuNSAzNS4xLTQwLjYgMzUuMS00MC42cy0y%0D%0AMS41LTIzLjgtMTMuNS00NS4yYzUuMi0xNCA3LjMtMTMuOSA5LTE0LjUgNi0yLjMgMTEuOC00Ljgg%0D%0AMTYuMS05LjUgMjEuNS0yMy4yIDQ4LjktMTguOCA0OC45LTE4LjhzMTMtMzkuNSAyNS0zMS44YzMu%0D%0ANyAyLjQgMTcgMzIgMTcgMzJzMTQuMi04LjMgMTUuOC01LjJjOC42IDE2LjcgOS42IDQ4LjYgNS44%0D%0AIDY4LTYuNCAzMi0yMi40IDQ5LjItMjguOCA2MC0xLjUgMi41IDE3LjIgMTAuNCAyOSA0My4xIDEw%0D%0ALjkgMjkuOSAxLjIgNTUgMi45IDU3LjguMy41LjQuNy40LjdzMTIuNSAxIDM3LjYtMTQuNWMxMy40%0D%0ALTguMyAyOS4zLTE3LjYgNDcuNC0xNy44IDE3LjUtLjMgMTguNCAyMC4yIDUuMiAyMy40eiIvPjwv%0D%0Ac3ZnPg=="
alt=""></a>
</div>
<div class="col s4 m4">
<a class="waves-effect waves-light down-circle" href="https://www.npmjs.com/package/material-drawn"><img class="circle download-link" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCA3%0D%0AIj4KCTxwYXRoIGZpbGw9IiNDQjM4MzciIGQ9Ik0wLDB2Nmg1djFoNHYtMWg5di02Ii8+Cgk8cGF0%0D%0AaCBmaWxsPSIjRkZGIiBkPSJNMSwxdjRoMnYtM2gxdjNoMXYtNGgxdjVoMnYtNGgxdjJoLTF2MWgy%0D%0Adi00aDF2NGgydi0zaDF2M2gxdi0zaDF2M2gxdi00Ii8+Cjwvc3ZnPgo="
alt=""></a>
</div>
<div class="col s4 m4">
<a class="waves-effect waves-light down-circle" href="https://github.com/akshaysoni8707/MaterialDrawn"><img class="circle download-link" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt=""></a>
</div>
</div>
</li>
</ul>
<!-- sidenav end -->
<!-- content start -->
<div class="row-wrap sec" id="dashboard">
<div class="row">
<!-- chartcard start -->
<div class="col s12 m12 l7 xl7">
<div class="card">
<div class="card-content">
<div class="chartdiv"></div>
<a class="btn-floating activator btn-large halfway-fab waves-effect waves-light theme-colour gradient"><i class="material-icons">add</i></a>
</div>
<div class="card-reveal">
<span class="card-title theme-text-colour">Pie chart<i class="material-icons right">close</i></span>
<div class="chartdiv2"></div>
</div>
</div>
</div>
<!-- chartcard end -->
<!-- todo start -->
<div class="col s12 m12 l5 xl5">
<ul class="collection with-header">
<li class="collection-header theme-colour gradient">
<h4>To-Do</h4>
</li>
<li class="collection-item">
<div class="row task-wrap">
<div class="col s12">
<label for="task1">
<input type="checkbox" id="task1">
<span class="theme-text-colour task-text">Call John</span>
<a href="#!" class="secondary-content white hide-on-small-and-down">
<span class="badge right pink-text">today</span>
</a>
</label>
</div>
</div>
</li>
<li class="collection-item">
<div class="row task-wrap">
<div class="col s12">
<label for="task2">
<input type="checkbox" id="task2" checked>
<span class="theme-text-colour task-text">Work on template</span>
<a href="#!" class="secondary-content white hide-on-small-and-down">
<span class="badge right pink-text">yesterday</span>
</a>
</label>
</div>
</div>
</li>
<li class="collection-item">
<div class="row task-wrap">
<div class="col s12">
<label for="task3">
<input type="checkbox" id="task3">
<span class="theme-text-colour task-text">Check mails</span>
<a href="#!" class="secondary-content white hide-on-small-and-down">
<span class="badge right pink-text">yesterday</span>
</a>
</label>
</div>
</div>
</li>
<li class="collection-item">
<div class="row task-wrap">
<div class="col s12">
<label for="task4">
<input type="checkbox" id="task4">
<span class="theme-text-colour task-text">presentation day</span>
<a href="#!" class="secondary-content white hide-on-small-and-down">
<span class="badge right pink-text">wednesday</span>
</a>
</label>
</div>
</div>
</li>
<li class="collection-item">
<div class="row task-wrap">
<div class="col s12">
<label for="task5">
<input type="checkbox" id="task5">
<span class="theme-text-colour task-text">Meeting with developer</span>
<a href="#!" class="secondary-content white hide-on-small-and-down">
<span class="badge right pink-text">monday</span>
</a>
</label>
</div>
</div>
</li>
</ul>
</div>
<!-- todo end -->
</div>
<!-- statuscard start -->
<div class="row">
<div class="col s12 m6 l3 xl3">
<div class="card status-card primary darken-1">
<div class="card-content white-text">
<span class="status-card-title"><i class="material-icons">group_add</i> New Clients</span>
<p class="status-card-number">456</p>
<p class="status-card-text"><i class="material-icons">keyboard_arrow_up</i> 20% form last week</p>
</div>
<div class="card-action darken-3">
<p class="status-card-label">Primary</p>
</div>
</div>
</div>
<div class="col s12 m6 l3 xl3">
<div class="card status-card success darken-1">
<div class="card-content white-text">
<span class="status-card-title"><i class="material-icons">trending_up</i> Today Profit</span>
<p class="status-card-number">₹5870.53</p>
<p class="status-card-text"><i class="material-icons">keyboard_arrow_up</i> 12% from yesterday</p>
</div>
<div class="card-action">
<p class="status-card-label">Success</p>
</div>
</div>
</div>
<div class="col s12 m6 l3 xl3">
<div class="card status-card danger darken-1">
<div class="card-content white-text">
<span class="status-card-title"><i class="material-icons">insert_drive_file</i> Invoices</span>
<p class="status-card-number">620</p>
<p class="status-card-text"><i class="material-icons">keyboard_arrow_down</i> 10% from yesterday</p>
</div>
<div class="card-action">
<p class="status-card-label">Danger</p>
</div>
</div>
</div>
<div class="col s12 m6 l3 xl3">
<div class="card status-card info darken-1">
<div class="card-content white-text">
<span class="status-card-title"><i class="material-icons">attach_money</i>Total Sales</span>
<p class="status-card-number">$83560</p>
<p class="status-card-text"><i class="material-icons">keyboard_arrow_up</i> 45% from last month</p>
</div>
<div class="card-action">
<p class="status-card-label">Info</p>
</div>
</div>
</div>
</div>
<!-- statuscard end -->
<div class="row">
<!-- profilecard start -->
<div class="col s12 m6 l4 xl3">
<div class="card profile theme-text-colour">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
<a class="btn-floating activator btn-large halfway-fab waves-effect waves-light theme-colour gradient"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Akshay Soni</span>
<p><i class="material-icons">perm_identity</i> C. E. O.</p>
<p><i class="material-icons">phone</i> +91-1234567890</p>
<p><i class="material-icons">email</i> demo@gmail.com</p>
</div>
<div class="card-reveal theme-colour gradient">
<span class="card-title">Akshay Soni<i class="material-icons right">close</i></span>
<p><i class="material-icons">perm_identity</i> C. E. O.</p>
<p><i class="material-icons">phone</i> +91-1234567890</p>
<p><i class="material-icons">email</i> demo@gmail.com</p>
<p><i class="material-icons">cake</i> 11 JAN 1995</p>
</div>
</div>
</div>
<!-- profilecard end -->
<!-- productcard start -->
<div class="col s12 m6 l4 xl3">
<div class="card product">
<div class="card-image waves-effect waves-block waves-light">
<a href="#!" class="btn-floating btn-large waves-effect waves-light btn-bigfloat pink accent-2">$189</a>
<a href="#"><img src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="product-img">
</a>
</div>
<ul class="card-action-buttons">
<li><a class="btn-floating btn-large waves-effect waves-light green accent-4"><i class="material-icons">share</i></a>
</li>
<li><a class="btn-floating btn-large waves-effect waves-light red accent-3"><i class="material-icons">favorite</i></a>
</li>
<li><a class="btn-floating btn-large activator waves-effect waves-light light-blue"><i class="material-icons">info</i></a>
</li>
</ul>
<div class="card-content ">
<div class="row">
<div class="col s8">
<p class="card-title "><a href="#" class="theme-text-colour">Apple MacBook Pro A1278 13"</a>
</p>
</div>
<div class="col s4 no-padding">
<a href=""></a><img src="https://mpng.pngfly.com/20180920/kl/kisspng-javascript-html5-cascading-style-sheets-css3-5ba40e8038ab77.3391088215374782722321.jpg" alt="amazon" class="responsive-img">
</div>
</div>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"><i class="material-icons right">close</i> Apple MacBook Pro A1278 13"</span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<!-- productcard end -->
<!-- progress start -->
<div class="col s12 m12 l8 xl6">
<ul class="collection with-header">
<li class="collection-header theme-colour gradient">
<h4>Work Progress</h4>
</li>
<li class="collection-item">
<div class="row progress-wrap">
<div class="col s7 m5">
<span class="theme-text-colour progress-text">Designing dashboard</span>
</div>
<div class="col m3 hide-on-small-and-down">
<span class="badge info left">
info
</span>
</div>
<div class="col s5 m4">
<div class="progress">
<div class="determinate theme-colour" style="width: 40%"></div>
</div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row progress-wrap">
<div class="col s7 m5">
<span class="theme-text-colour progress-text">Developing javascript</span>
</div>
<div class="col m3 hide-on-small-and-down">
<span class="badge danger left">
danger
</span>
</div>
<div class="col s5 m4">
<div class="progress">
<div class="determinate theme-colour" style="width: 20%"></div>
</div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row progress-wrap">
<div class="col s7 m5">
<span class="theme-text-colour progress-text">Adding animations</span>
</div>
<div class="col m3 hide-on-small-and-down">
<span class="badge success left">
success
</span>
</div>
<div class="col s5 m4">
<div class="progress">
<div class="determinate theme-colour" style="width: 65%"></div>
</div>
</div>
</div>
</li>
<li class="collection-item">
<div class="row progress-wrap">
<div class="col s7 m5">
<span class="theme-text-colour progress-text">Fixing project bugs</span>
</div>
<div class="col m3 hide-on-small-and-down">
<span class="badge primary left">
primary
</span>
</div>
<div class="col s5 m4">
<div class="progress">
<div class="determinate theme-colour" style="width: 50%"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- progress end -->
</div>
<!-- datatable start -->
<div class="row">
<div class="col s12">
<ul class="collection with-header">
<li class="collection-header theme-colour gradient">
<h3>Data Table</h3>
</li>
<li class="collection-item">
<div class="theme-text-colour">
<table id="example" class="mdl-data-table" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>