Skip to content

Instantly share code, notes, and snippets.

@kaniket7209
Created April 12, 2022 10:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaniket7209/4df0dda2e5f3ed2de1f1cc582a1a6656 to your computer and use it in GitHub Desktop.
Save kaniket7209/4df0dda2e5f3ed2de1f1cc582a1a6656 to your computer and use it in GitHub Desktop.
Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIYA | Dashboard </title>
<head>
<%- include('./css/styles'); %>
<%- include('./css/bootstrap_min'); %>
<%- include('./font-awesome/css/font_awesome'); %>
<%- include('./css/animate'); %>
</head>
<link href="/public/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.e6ec1c8e.chunk.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="logo-element">
IN+
</div>
</li>
<li>
<a href="http://localhost:8000/dashboard/"><i class="nav-icon icon-list"></i> <span class="nav-label">Dashboard</span>
</a>
</li>
<li> Shop </li>
<li>
<a href="http://localhost:8000/dashboard/"><i class="nav-icon icon-list"></i> <span class="nav-label">Recharge History</span>
</a>
</li>
<li> Message </li>
<li class="">
<a href="http://localhost:8000/dashboard/"><i class="fa fa-envelope-open"></i> <span class="nav-label">Delivery Report</span>
</a>
</li>
<li class="">
<a href="http://localhost:8000/dashboard/"><i class="fa fa-line-chart"></i> <span class="nav-label">Statitics Report</span>
</a>
</li>
<li>
<a href="http://localhost:8000/dashboard/"><i class="fa fa-inbox"></i> <span class="nav-label">Inbox </span></a>
</li>
<li>
<a href="http://localhost:8000/dashboard/"><i class="fa fa-comments"></i> <span class="nav-label">Chat Bot </span></a>
</li>
<li>Api Segment</li>
<li>
<a href="http://localhost:8000/dashboard/"><i class="fa fa-files-o"></i> <span class="nav-label">Http Api </span></a>
</li>
<li>
<a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">Plugins </span></span></a>
</li>
<li>
<a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">Sample Code </span></a>
<ul class="nav nav-second-level collapse">
<li><a href="mailbox.html">Inbox</a></li>
<li><a href="mail_detail.html">Email view</a></li>
<li><a href="mail_compose.html">Compose email</a></li>
<li><a href="email_template.html">Email templates</a></li>
</ul>
</li>
<li>
<a href="basic_gallery.html"><i class="fa fa-picture-o"></i> <span class="nav-label">Gallery</span>
</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>
<ul class="ml-auto navbar-nav"><strong><%= name %></strong>
<li class="dropdown nav-item">
<a href="#" class="nav-link" ><img src="img/savi.jpg" class="img-avatar" alt=""></a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<button type="button" tabindex="0" role="menuitem" class="dropdown-item"><i class="fa fa-user"></i> Change Password</button>
<button type="button" tabindex="0" role="menuitem" class="dropdown-item"><i class="fa fa-lock"></i> Logout</button></div>
</li></ul>
</nav>
</div>
<marquee behavior="scroll" direction="left"> WE ALSO PROVIDING BULK SMS SERVICE.CONTACT US</marquee>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-6 col-md-3"><div class="card">
<div class="clearfix p-0 card-body">
<i class="fa fa-comments bg-primary p-4 font-2xl mr-3 float-left"></i>
<div class="h5 mb-0 text-primary pt-3">
<span><%= usage %> </span></div><div><b>TODAY USAGE</b></div></div></div></div>
<div class="col-sm-6 col-md-3"><div class="card">
<div class="clearfix p-0 card-body">
<i class="fa fa-flag-o bg-warning p-4 font-2xl mr-3 float-left"></i>
<div class="h5 mb-0 text-warning pt-3">
<span> 0<br></span></div><div><b>TODAY IN QUEUE</b></div>
</div></div></div>
<div class="col-sm-6 col-md-3"><div class="card">
<div class="clearfix p-0 card-body">
<i class="fa fa-comments bg-danger p-4 font-2xl mr-3 float-left"></i>
<div class="h5 mb-0 text-danger pt-3">
<span>0</span></div><div><b>TODAY FAILED</b></div></div></div></div>
<div class="col-sm-6 col-md-3"><div class="card"><div class="clearfix p-0 card-body">
<i class="fa fa-flag-o bg-warning p-4 font-2xl mr-3 float-left"></i>
<div class="h5 mb-0 text-warning pt-3"><span>0</span></div>
<div><b>
TOTAL IN QUEUE</b></div></div></div></div></div>
<div class="row"><div class="col"><div class="card"><h4 class="card-header"><i class="fa fa-whatsapp fa-lg"></i> List Instance WhatsApp<div class="card-header-actions"><button type="button" class="float-right btn btn-primary"><i class="fa fa-plus fa-lg"></i></button></div></h4><div class="card-body"><div class="row"><div class="col"><div class="card"><div class="card-body"><div class="row"><div class="col-sm-8"><div class="mb-0 card-title"><%=userData[0].instanceName %> <a href="#edit" title="Edit instance name"><i class="fa fa-edit fa-lg text-info mt-2"></i></a></div><div class="small">ID : <strong><%=userData[0].instanceID %></strong></div></div><div class="d-sm-inline-block col-sm-4"><div class="float-right mt-2 dropleft dropdown" style="cursor: pointer;"><i class="fa fa-ellipsis-v fa-lg"></i><div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu"><button type="button" tabindex="0" role="menuitem" class="dropdown-item"><i class="fa fa-sign-out"></i><span>Logout Instance</span></button><button type="button" tabindex="0" role="menuitem" class="dropdown-item"><i class="fa fa-trash"></i><span>Delete Instance</span></button></div></div><button type="button" class="btn-sm float-right mr-3 mt-2 btn btn-primary"><i class="fa fa-send"></i> Send Message</button></div><div class="col"><hr></div></div><div class="row"><div class="col-12 col-sm-6 col-lg-6"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-info bg-primary p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-primary pt-3"><%= name %></div><div class="text-muted text-uppercase font-weight-bold font-xs"><%= phone_no %></div></div></div></div><div class="col-12 col-sm-6 col-lg-3"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-battery-quarter bg-danger p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-danger pt-3">0%</div><div class="text-muted text-uppercase font-weight-bold font-xs">Battery Info</div></div></div></div><div class="col-12 col-sm-6 col-lg-3"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-wifi fa-lg bg-success p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-success pt-3"><%=userData[0].status%></div><div class="text-muted text-uppercase font-weight-bold font-xs">Status</div></div></div></div></div><div class="row"><div class="col-12 col-sm-6 col-lg-3"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-plug bg-danger p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-danger pt-3">Unplugged</div><div class="text-muted text-uppercase font-weight-bold font-xs">Charger</div></div></div></div><div class="col-12 col-sm-6 col-lg-3"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-mobile-phone fa-lg bg-info p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-info pt-3">N/A</div><div class="text-muted text-uppercase font-weight-bold font-xs">Manufacturer</div></div></div></div><div class="col-12 col-sm-6 col-lg-3"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-whatsapp fa-lg bg-info p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-info pt-3">N/A</div><div class="text-muted text-uppercase font-weight-bold font-xs">OS Version</div></div></div></div><div class="col-12 col-sm-6 col-lg-3"><div class="card"><div class="clearfix p-0 card-body"><i class="fa fa-whatsapp fa-lg bg-success p-4 font-2xl mr-3 float-left"></i><div class="h5 mb-0 text-success pt-3">N/A</div><div class="text-muted text-uppercase font-weight-bold font-xs">WA Version</div></div></div></div></div><div class="row"><div class="col-12 col-sm-6 col-lg-6">
<h4>Webhook</h4><div class="input-group"><input id="webhook" name="webhook" placeholder="https:/example.com/webhook" type="text" class="form-control" aria-invalid="false" value=""><div class="input-group-append"><button type="button" class="float-right btn btn-primary"><i class="fa fa-send fa-lg"></i> Save</button></div></div></div></div></div><div class="card-footer"><div class="text-center row"><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Usage</div><strong><span> <%= usageTillNow %></span> Credit</strong><div class="progress-xs mt-2 progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="3.66989962305705" aria-valuemin="0" aria-valuemax="100" style="width: 3.6699%;"></div></div></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Quota Remaining</div><strong><span><%= quotaRemaining %></span> Credit</strong><div class="progress-xs mt-2 progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="96.33010037694295" aria-valuemin="0" aria-valuemax="100" style="width: 96.3301%;"></div></div></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Expiry</div><strong><time datetime="1676048399000"> <%= validTill %></time></strong><div class="progress-xs mt-2 progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="84.72222222222221" aria-valuemin="0" aria-valuemax="100" style="width: 84.7222%;"></div></div></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Webhook</div><h4><i class="fa fa-close fa-lg text-danger mt-2"></i></h4></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Backup Credit</div><h4><i class="fa fa-close fa-lg text-danger mt-2"></i></h4></div></div></div></div><div class="card"><div class="card-body"><div class="row"><div class="col-sm-8"><div class="mb-0 card-title">sagar <a href="#edit" title="Edit instance name"><i class="fa fa-edit fa-lg text-info mt-2"></i></a></div><div class="small">ID : <strong style="font-weight: bold; color: rgb(0, 0, 0);">605ae814683424da0e412c89</strong></div></div><div class="d-sm-inline-block col-sm-4"><div class="float-right mt-2 dropleft dropdown" style="cursor: pointer;"><i class="fa fa-ellipsis-v fa-lg"></i><div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu"><button type="button" tabindex="0" role="menuitem" class="dropdown-item"><i class="fa fa-sign-out"></i><span>Logout Instance</span></button><button type="button" tabindex="0" role="menuitem" class="dropdown-item"><i class="fa fa-trash"></i><span>Delete Instance</span></button></div></div><button type="button" class="btn-sm float-right mr-3 mt-2 btn btn-primary"><i class="fa fa-send"></i> Send Message</button></div><div class="col"><hr></div></div><div class="justify-content-center row"><div class="col-md-6" style="cursor: pointer;"><div class="clearfix"><h1 class="float-left display-3 mr-4"><i class="fa fa-qrcode fa-lg"></i></h1><h4 class="pt-3">Instance not connected to device</h4><p class="text-muted float-left">Please click me to reconnect or scan QrCode</p></div></div></div></div><div class="card-footer"><div class="text-center row"><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Usage</div><strong><span>0</span> Credit</strong><div class="progress-xs mt-2 progress"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Quota Remaining</div><strong><span>0</span> Credit</strong><div class="progress-xs mt-2 progress"><div class="progress-bar bg-danger" role="progressbar" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Expiry</div><strong><time datetime="NaN">Invalid date</time></strong><div class="progress-xs mt-2 progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="Infinity" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Webhook</div><h4><i class="fa fa-close fa-lg text-danger mt-2"></i></h4></div><div class="mb-sm-2 mb-0 col-sm-12 col-md"><div class="text-muted">Backup Credit</div><h4>
<i class="fa fa-close fa-lg text-danger mt-2"></i></h4></div></div></div></div></div></div></div></div></div></div>
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<li>
<a class="nav-link active" data-toggle="tab" href="#tab-1"> Notes </a>
</li>
<li>
<a class="nav-link" data-toggle="tab" href="#tab-2"> Projects </a>
</li>
<li>
<a class="nav-link" data-toggle="tab" href="#tab-3"> <i class="fa fa-gear"></i> </a>
</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> Latest Notes</h3>
<small><i class="fa fa-tim"></i> You have 10 new message.</small>
</div>
<div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a1.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
There are many variations of passages of Lorem Ipsum available.
<br>
<small class="text-muted">Today 4:21 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a2.jpg">
</div>
<div class="media-body">
The point of using Lorem Ipsum is that it has a more-or-less normal.
<br>
<small class="text-muted">Yesterday 2:45 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a3.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
Mevolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<br>
<small class="text-muted">Yesterday 1:10 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a4.jpg">
</div>
<div class="media-body">
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
<br>
<small class="text-muted">Monday 8:37 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a8.jpg">
</div>
<div class="media-body">
All the Lorem Ipsum generators on the Internet tend to repeat.
<br>
<small class="text-muted">Today 4:21 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a7.jpg">
</div>
<div class="media-body">
Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
<br>
<small class="text-muted">Yesterday 2:45 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a3.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below.
<br>
<small class="text-muted">Yesterday 1:10 pm</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="float-left text-center">
<img alt="image" class="rounded-circle message-avatar" src="img/a4.jpg">
</div>
<div class="media-body">
Uncover many web sites still in their infancy. Various versions have.
<br>
<small class="text-muted">Monday 8:37 pm</small>
</div>
</a>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-cube"></i> Latest projects</h3>
<small><i class="fa fa-tim"></i> You have 14 projects. 10 not completed.</small>
</div>
<ul class="sidebar-list">
<li>
<a href="#">
<div class="small float-right m-t-xs">9 hours ago</div>
<h4>Business valuation</h4>
It is a long established fact that a reader will be distracted.
<div class="small">Completion with: 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
</a>
</li>
<li>
<a href="#">
<div class="small float-right m-t-xs">9 hours ago</div>
<h4>Contract with Company </h4>
Many desktop publishing packages and web page editors.
<div class="small">Completion with: 48%</div>
<div class="progress progress-mini">
<div style="width: 48%;" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="small float-right m-t-xs">9 hours ago</div>
<h4>Meeting</h4>
By the readable content of a page when looking at its layout.
<div class="small">Completion with: 14%</div>
<div class="progress progress-mini">
<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
<li>
<a href="#">
<span class="label label-primary float-right">NEW</span>
<h4>The generated</h4>
<!--<div class="small float-right m-t-xs">9 hours ago</div>-->
There are many variations of passages of Lorem Ipsum available.
<div class="small">Completion with: 22%</div>
<div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
</a>
</li>
<li>
<a href="#">
<div class="small float-right m-t-xs">9 hours ago</div>
<h4>Business valuation</h4>
It is a long established fact that a reader will be distracted.
<div class="small">Completion with: 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
</a>
</li>
<li>
<a href="#">
<div class="small float-right m-t-xs">9 hours ago</div>
<h4>Contract with Company </h4>
Many desktop publishing packages and web page editors.
<div class="small">Completion with: 48%</div>
<div class="progress progress-mini">
<div style="width: 48%;" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="small float-right m-t-xs">9 hours ago</div>
<h4>Meeting</h4>
By the readable content of a page when looking at its layout.
<div class="small">Completion with: 14%</div>
<div class="progress progress-mini">
<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
<li>
<a href="#">
<span class="label label-primary float-right">NEW</span>
<h4>The generated</h4>
<!--<div class="small float-right m-t-xs">9 hours ago</div>-->
There are many variations of passages of Lorem Ipsum available.
<div class="small">Completion with: 22%</div>
<div class="small text-muted m-t-xs">Project end: 4:00 pm - 12.06.2014</div>
</a>
</li>
</ul>
</div>
<div id="tab-3" class="tab-pane">
<div class="sidebar-title">
<h3><i class="fa fa-gears"></i> Settings</h3>
<small><i class="fa fa-tim"></i> You have 14 projects. 10 not completed.</small>
</div>
<div class="setings-item">
<span>
Show notifications
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example">
<label class="onoffswitch-label" for="example">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Disable Chat
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" checked class="onoffswitch-checkbox" id="example2">
<label class="onoffswitch-label" for="example2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Enable history
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example3">
<label class="onoffswitch-label" for="example3">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Show charts
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example4">
<label class="onoffswitch-label" for="example4">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Offline users
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox" id="example5">
<label class="onoffswitch-label" for="example5">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Global search
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox" id="example6">
<label class="onoffswitch-label" for="example6">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>
Update everyday
</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example7">
<label class="onoffswitch-label" for="example7">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="sidebar-content">
<h4>Settings</h4>
<div class="small">
I belive that. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
And typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Flot -->
<script src="js/plugins/flot/jquery.flot.js"></script>
<script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/plugins/flot/jquery.flot.spline.js"></script>
<script src="js/plugins/flot/jquery.flot.resize.js"></script>
<script src="js/plugins/flot/jquery.flot.pie.js"></script>
<script src="js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="js/plugins/flot/jquery.flot.time.js"></script>
<!-- Peity -->
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/demo/peity-demo.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- jQuery UI -->
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Jvectormap -->
<script src="js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script src="js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- EayPIE -->
<script src="js/plugins/easypiechart/jquery.easypiechart.js"></script>
<!-- Sparkline -->
<script src="js/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- Sparkline demo data -->
<script src="js/demo/sparkline-demo.js"></script>
<script>
$(document).ready(function() {
// alert("dd");
$("#income_val").val("jhjhj");
// document.getElementById("income_val").innerHTML = "hh";
//ajax
$.ajax({
type: 'GET',
url: 'ajax_get_data.php',
data: 'id=testdata',
dataType: 'json',
cache: false,
success: function(result) {
$('#income_val').html(result[0]);
$("#work_val").html(result[1]);
$("#visit_val").html(result[2]);
$("#user_activity_val").html(result[3]);
},
});
$('.chart').easyPieChart({
barColor: '#f8ac59',
// scaleColor: false,
scaleLength: 5,
lineWidth: 4,
size: 80
});
$('.chart2').easyPieChart({
barColor: '#1c84c6',
// scaleColor: false,
scaleLength: 5,
lineWidth: 4,
size: 80
});
var data2 = [
[gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
[gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
[gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
[gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
[gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
[gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
[gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
[gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
];
var data3 = [
[gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
[gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
[gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
[gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
[gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
[gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
[gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
[gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
];
var dataset = [
{
label: "Number of works",
data: data3,
color: "#1ab394",
bars: {
show: true,
align: "center",
barWidth: 24 * 60 * 60 * 600,
lineWidth:0
}
}, {
label: "Payments",
data: data2,
yaxis: 2,
color: "#1C84C6",
lines: {
lineWidth:1,
show: true,
fill: true,
fillColor: {
colors: [{
opacity: 0.2
}, {
opacity: 0.4
}]
}
},
splines: {
show: false,
tension: 0.6,
lineWidth: 1,
fill: 0.1
},
}
];
var options = {
xaxis: {
mode: "time",
tickSize: [3, "day"],
tickLength: 0,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: "#d5d5d5"
},
yaxes: [{
position: "left",
max: 1070,
color: "#d5d5d5",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 3
}, {
position: "right",
clolor: "#d5d5d5",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: ' Arial',
axisLabelPadding: 67
}
],
legend: {
noColumns: 1,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: false,
borderWidth: 0
}
};
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
var previousPoint = null, previousLabel = null;
$.plot($("#flot-dashboard-chart"), dataset, options);
var mapData = {
"US": 298,
"SA": 200,
"DE": 220,
"FR": 540,
"CN": 120,
"AU": 760,
"BR": 550,
"IN": 200,
"GB": 120,
};
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: "transparent",
regionStyle: {
initial: {
fill: '#e4e4e4',
"fill-opacity": 0.9,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 0
}
},
series: {
regions: [{
values: mapData,
scale: ["#1ab394", "#22d6b1"],
normalizeFunction: 'polynomial'
}]
},
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment