mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
841 lines
46 KiB
HTML
841 lines
46 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
|
* @version 1.0.0-beta11
|
|
* @link https://tabler.io
|
|
* Copyright 2018-2022 The Tabler Authors
|
|
* Copyright 2018-2022 codecalm.net Paweł Kuna
|
|
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
|
<title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
|
<!-- CSS files -->
|
|
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
|
|
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
|
|
</head>
|
|
<body >
|
|
<style>
|
|
body {
|
|
background: #f9fafc;
|
|
}
|
|
|
|
.features {
|
|
width: 368px;
|
|
}
|
|
|
|
.feature {
|
|
height: 276px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.feature .modal {
|
|
position: absolute;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.feature .modal-backdrop {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
<div class="features">
|
|
<div class="feature">
|
|
<div class="d-flex space-x-2">
|
|
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
|
|
<span class="avatar" style="background-image: url(./static/avatars/004f.jpg)">
|
|
<span class="badge bg-red"></span></span>
|
|
<span class="avatar" style="background-image: url(./static/avatars/006f.jpg)">
|
|
<span class="badge bg-green"></span></span>
|
|
<span class="avatar"><!-- Download SVG icon from http://tabler-icons.io/i/plus -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-100">
|
|
<div class="card card-sm">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<span class="bg-twitter text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
|
|
</span>
|
|
</div>
|
|
<div class="col">
|
|
<div class="font-weight-medium">
|
|
623 Shares
|
|
</div>
|
|
<div class="text-muted">
|
|
16
|
|
today
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="chart-sparkline" id="sparkline-abc"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-100">
|
|
<div class="card">
|
|
<div class="ribbon ribbon-top bg-yellow">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="card-title">Card with top ribbon</h3>
|
|
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur
|
|
culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-100" style="zoom: .75">
|
|
<div class="empty">
|
|
<div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
|
|
</div>
|
|
<p class="empty-title">No results found</p>
|
|
<p class="empty-subtitle text-muted">
|
|
Try adjusting your search or filter to find what you're looking for.
|
|
</p>
|
|
<div class="empty-action">
|
|
<a href="./." class="btn btn-primary">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/search -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
|
|
Search again
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Pick your team color</label>
|
|
<div class="row g-2">
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="blue" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-blue"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="azure" class="form-colorinput-input" checked/>
|
|
<span class="form-colorinput-color bg-azure"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="indigo" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-indigo"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="purple" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-purple"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="pink" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-pink"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="red" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-red"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="orange" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-orange"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="yellow" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-yellow"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="lime" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-lime"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-100">
|
|
<div class="mb-3">
|
|
<label class="form-label">Payment method</label>
|
|
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
|
|
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<div class="me-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div>
|
|
<span class="payment payment-provider-visa payment-xs me-2"></span>
|
|
ending in <strong>7998</strong>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
|
|
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<div class="me-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div>
|
|
<span class="payment payment-provider-mastercard payment-xs me-2"></span>
|
|
ending in <strong>2807</strong>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="form-selectgroup-item flex-fill">
|
|
<input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
|
|
<div class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<div class="me-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</div>
|
|
<div>
|
|
<span class="payment payment-provider-paypal payment-xs me-2"></span>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Person Check</label>
|
|
<div class="row g-2">
|
|
<div class="col-auto">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<span class="form-imagecheck-image">
|
|
<span class="avatar avatar-md" style="background-image: url(./static/avatars/009m.jpg)"></span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked/>
|
|
<span class="form-imagecheck-figure">
|
|
<span class="form-imagecheck-image">
|
|
<span class="avatar avatar-md" style="background-image: url(./static/avatars/010m.jpg)"></span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
|
|
<span class="form-imagecheck-figure">
|
|
<span class="form-imagecheck-image">
|
|
<span class="avatar avatar-md" style="background-image: url(./static/avatars/005f.jpg)"></span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-imagecheck mb-2">
|
|
<input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked/>
|
|
<span class="form-imagecheck-figure">
|
|
<span class="form-imagecheck-image">
|
|
<span class="avatar avatar-md" style="background-image: url(./static/avatars/006f.jpg)"></span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="modal-backdrop fade show"></div>
|
|
<div class="modal modal-blur show" style="zoom: .5">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add a new team</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row mb-3 align-items-end">
|
|
<div class="col-auto">
|
|
<a href="#" class="avatar avatar-upload rounded">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
|
|
<span class="avatar-upload-text">Add</span>
|
|
</a>
|
|
</div>
|
|
<div class="col">
|
|
<label class="form-label">Name</label>
|
|
<input type="text" class="form-control" />
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Pick your team color</label>
|
|
<div class="row g-2">
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="dark" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-dark"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput form-colorinput-light">
|
|
<input name="color" type="radio" value="white" class="form-colorinput-input" checked/>
|
|
<span class="form-colorinput-color bg-white"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="blue" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-blue"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="azure" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-azure"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="indigo" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-indigo"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="purple" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-purple"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="pink" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-pink"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="red" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-red"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="orange" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-orange"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="yellow" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-yellow"></span>
|
|
</label>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="form-colorinput">
|
|
<input name="color" type="radio" value="lime" class="form-colorinput-input" />
|
|
<span class="form-colorinput-color bg-lime"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Additional info</label>
|
|
<textarea class="form-control"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-50">
|
|
<div class="d-flex flex-column space-y-2 w-100">
|
|
<a href="#" class="btn">
|
|
Save data
|
|
</a>
|
|
<a href="#" class="btn btn-facebook">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
|
|
Share
|
|
</a>
|
|
<a href="#" class="btn btn-primary">
|
|
Next step
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/arrow-right -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="13" y1="18" x2="19" y2="12" /><line x1="13" y1="6" x2="19" y2="12" /></svg>
|
|
</a>
|
|
<a href="#" class="btn btn-danger">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/trash -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
|
|
Delete project
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature theme-dark">
|
|
<div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="subheader">Revenue</div>
|
|
<div class="ms-auto lh-1">
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a class="dropdown-item active" href="#">Last 7 days</a>
|
|
<a class="dropdown-item" href="#">Last 30 days</a>
|
|
<a class="dropdown-item" href="#">Last 3 months</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-baseline">
|
|
<div class="h1 mb-0 me-2">$4,300</div>
|
|
<div class="me-auto">
|
|
<span class="text-green d-inline-flex align-items-center lh-1">
|
|
8% <!-- Download SVG icon from http://tabler-icons.io/i/trending-up -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="chart-revenue-bg" class="chart-sm"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div style="zoom: 2">
|
|
<div class="row g-1 gy-3">
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/arrow-right -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="13" y1="18" x2="19" y2="12" /><line x1="13" y1="6" x2="19" y2="12" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/ad-2 -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11.933 5h-6.933v16h13v-8" /><path d="M14 17h-5" /><path d="M9 13h5v-4h-5z" /><path d="M15 5v-2" /><path d="M18 6l2 -2" /><path d="M19 9h2" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/api-app -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 15h-6.5a2.5 2.5 0 1 1 0 -5h.5" /><path d="M15 12v6.5a2.5 2.5 0 1 1 -5 0v-.5" /><path d="M12 9h6.5a2.5 2.5 0 1 1 0 5h-.5" /><path d="M9 12v-6.5a2.5 2.5 0 0 1 5 0v.5" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/lego -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="9.5" y1="11" x2="9.51" y2="11" /><line x1="14.5" y1="11" x2="14.51" y2="11" /><path d="M9.5 15a3.5 3.5 0 0 0 5 0" /><path d="M7 5h1v-2h8v2h1a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3v1h-10v-1a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/sailboat -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M2 20a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1" /><path d="M4 18l-1 -3h18l-1 3" /><path d="M11 12h7l-7 -9v9" /><line x1="8" y1="7" x2="6" y2="12" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/math-function -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 10h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1" /><path d="M13 17c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5" /><path d="M3 19c0 1.5 .5 2 2 2s2 -4 3 -9s1.5 -9 3 -9s2 .5 2 2" /><line x1="5" y1="12" x2="11" y2="12" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/biohazard -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M11.939 14c0 .173 .048 .351 .056 .533l0 .217a4.75 4.75 0 0 1 -4.533 4.745l-.217 0m-4.75 -4.75a4.75 4.75 0 0 1 7.737 -3.693m6.513 8.443a4.75 4.75 0 0 1 -4.69 -5.503l-.06 0m1.764 -2.944a4.75 4.75 0 0 1 7.731 3.477l0 .217m-11.195 -3.813a4.75 4.75 0 0 1 -1.828 -7.624l.164 -.172m6.718 0a4.75 4.75 0 0 1 -1.665 7.798" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/beach -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17.553 16.75a7.5 7.5 0 0 0 -10.606 0" /><path d="M18 3.804a6 6 0 0 0 -8.196 2.196l10.392 6a6 6 0 0 0 -2.196 -8.196z" /><path d="M16.732 10c1.658 -2.87 2.225 -5.644 1.268 -6.196c-.957 -.552 -3.075 1.326 -4.732 4.196" /><path d="M15 9l-3 5.196" /><path d="M3 19.25a2.4 2.4 0 0 1 1 -.25a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2 -1a2.4 2.4 0 0 1 2 -1a2.4 2.4 0 0 1 1 .25" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/tools-kitchen-2 -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 3v12h-5c-.023 -3.681 .184 -7.406 5 -12zm0 12v6h-1v-3m-10 -14v17m-3 -17v3a3 3 0 1 0 6 0v-3" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/parachute -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 12a10 10 0 1 0 -20 0" /><path d="M22 12c0 -1.66 -1.46 -3 -3.25 -3c-1.8 0 -3.25 1.34 -3.25 3c0 -1.66 -1.57 -3 -3.5 -3s-3.5 1.34 -3.5 3c0 -1.66 -1.46 -3 -3.25 -3c-1.8 0 -3.25 1.34 -3.25 3" /><path d="M2 12l10 10l-3.5 -10" /><path d="M15.5 12l-3.5 10l10 -10" /></svg>
|
|
</div>
|
|
<div class="col-3 text-center"><!-- Download SVG icon from http://tabler-icons.io/i/ball-basketball -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><line x1="5.65" y1="5.65" x2="18.35" y2="18.35" /><line x1="5.65" y1="18.35" x2="18.35" y2="5.65" /><path d="M12 3a9 9 0 0 0 9 9" /><path d="M3 12a9 9 0 0 1 9 9" /></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-100" style="zoom: .5">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="ratio ratio-4x3">
|
|
<div>
|
|
<div id="map-world" class="w-100 h-100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-75" style="zoom: .5">
|
|
<div class="card placeholder-glow">
|
|
<div class="ratio ratio-21x9 card-img-top placeholder"></div>
|
|
<div class="card-body">
|
|
<div class="placeholder col-9 mb-3"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
<div class="placeholder placeholder-xs col-11"></div>
|
|
<div class="mt-3">
|
|
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-100" style="zoom: .5">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex">
|
|
<h3 class="card-title">Active users</h3>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a class="dropdown-item active" href="#">Last 7 days</a>
|
|
<a class="dropdown-item" href="#">Last 30 days</a>
|
|
<a class="dropdown-item" href="#">Last 3 months</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div id="chart-active-users-2"></div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="divide-y divide-y-fill">
|
|
<div class="px-3">
|
|
<div class="text-muted">
|
|
<span class="status-dot bg-primary"></span> Mobile
|
|
</div>
|
|
<div class="h2">11,425</div>
|
|
</div>
|
|
<div class="px-3">
|
|
<div class="text-muted">
|
|
<span class="status-dot bg-azure"></span> Desktop
|
|
</div>
|
|
<div class="h2">6,458</div>
|
|
</div>
|
|
<div class="px-3">
|
|
<div class="text-muted">
|
|
<span class="status-dot bg-green"></span> Tablet
|
|
</div>
|
|
<div class="h2">3,985</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-50" style="zoom: .33">
|
|
<div class="text-center mb-4">
|
|
<img src="./static/logo.svg" height="36" alt="">
|
|
</div>
|
|
<form class="card card-md" action="." method="get" autocomplete="off">
|
|
<div class="card-body">
|
|
<h2 class="card-title text-center mb-4">Login to your account</h2>
|
|
<div class="mb-3">
|
|
<label class="form-label">Email address</label>
|
|
<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label">
|
|
Password
|
|
<span class="form-label-description">
|
|
<a href="./forgot-password.html">I forgot password</a>
|
|
</span>
|
|
</label>
|
|
<div class="input-group input-group-flat">
|
|
<input type="password" class="form-control" placeholder="Password" autocomplete="off">
|
|
<span class="input-group-text">
|
|
<a href="#" class="link-secondary" title="Show password" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-check">
|
|
<input type="checkbox" class="form-check-input"/>
|
|
<span class="form-check-label">Remember me on this device</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-footer">
|
|
<button type="submit" class="btn btn-primary w-100">Sign in</button>
|
|
</div>
|
|
</div>
|
|
<div class="hr-text">or</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col"><a href="#" class="btn btn-white w-100">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
|
|
Login with Github
|
|
</a></div>
|
|
<div class="col"><a href="#" class="btn btn-white w-100">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
|
|
Login with Twitter
|
|
</a></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="text-center text-muted mt-3">
|
|
Don't have account yet? <a href="./sign-up.html" tabindex="-1">Sign up</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="w-75" style="zoom: .33">
|
|
<div class="empty">
|
|
<div class="empty-header">404</div>
|
|
<p class="empty-title">Oops… You just found an error page</p>
|
|
<p class="empty-subtitle text-muted">
|
|
We are sorry but the page you are looking for was not found
|
|
</p>
|
|
<div class="empty-action">
|
|
<a href="./." class="btn btn-primary">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/arrow-left -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="11" y2="18" /><line x1="5" y1="12" x2="11" y2="6" /></svg>
|
|
Take me home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Libs JS -->
|
|
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script src="./dist/libs/jsvectormap/dist/js/jsvectormap.min.js" defer></script>
|
|
<script src="./dist/libs/jsvectormap/dist/maps/world.js" defer></script>
|
|
<script src="./dist/libs/jsvectormap/dist/maps/world-merc.js" defer></script>
|
|
<!-- Tabler Core -->
|
|
<script src="./dist/js/tabler.min.js" defer></script>
|
|
<script src="./dist/js/demo.min.js" defer></script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-abc'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 40,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: "#1da1f2",
|
|
data: [20,0,40,30,40,30,80,60]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
|
|
chart: {
|
|
type: "area",
|
|
fontFamily: 'inherit',
|
|
height: 40.0,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
opacity: .16,
|
|
type: 'solid'
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
curve: "smooth",
|
|
},
|
|
series: [{
|
|
name: "Profits",
|
|
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
|
|
}],
|
|
grid: {
|
|
strokeDashArray: 4,
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
type: 'datetime',
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
labels: [
|
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
|
|
],
|
|
colors: ["#206bc4"],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:on
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const map = new jsVectorMap({
|
|
selector: '#map-world',
|
|
map: 'world',
|
|
backgroundColor: 'transparent',
|
|
regionStyle: {
|
|
initial: {
|
|
fill: '#F8FAFC',
|
|
stroke: 'rgba(98, 105, 118, .16)',
|
|
strokeWidth: 1,
|
|
}
|
|
},
|
|
zoomOnScroll: false,
|
|
zoomButtons: false,
|
|
// -------- Series --------
|
|
visualizeData: {
|
|
scale: ['#F8FAFC', '#206bc4'],
|
|
values: { "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 },
|
|
},
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
map.updateSize();
|
|
});
|
|
});
|
|
// @formatter:off
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users-2'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 288,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
curve: "smooth",
|
|
},
|
|
series: [{
|
|
name: "Mobile",
|
|
data: [4164, 4652, 4817, 4841, 4920, 5439, 5486, 5498, 5512, 5538, 5841, 5877, 6086, 6146, 6199, 6431, 6704, 7939, 8127, 8296, 8322, 8389, 8411, 8502, 8868, 8977, 9273, 9325, 9345, 9430]
|
|
},{
|
|
name: "Desktop",
|
|
data: [2164, 2292, 2386, 2430, 2528, 3045, 3255, 3295, 3481, 3604, 3688, 3840, 3932, 3949, 4003, 4298, 4424, 4869, 4922, 4973, 5155, 5267, 5566, 5689, 5692, 5758, 5773, 5799, 5960, 6000]
|
|
},{
|
|
name: "Tablet",
|
|
data: [1069, 1089, 1125, 1141, 1162, 1179, 1185, 1216, 1274, 1322, 1346, 1395, 1439, 1564, 1581, 1590, 1656, 1815, 1868, 2010, 2133, 2179, 2264, 2265, 2278, 2343, 2354, 2456, 2472, 2480]
|
|
}],
|
|
grid: {
|
|
padding: {
|
|
top: -20,
|
|
right: 0,
|
|
left: -4,
|
|
bottom: -4
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
type: 'datetime',
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
labels: [
|
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
|
|
],
|
|
colors: ["#206bc4", "#45aaf2", "#5eba00"],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
</body>
|
|
</html> |