mirror of
https://github.com/tabler/tabler.git
synced 2026-07-25 04:24:37 +04:00
dependencies update
This commit is contained in:
codecalm
@@ -1,568 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||||
* @version 1.0.0-beta
|
||||
* @link https://tabler.io
|
||||
* Copyright 2018-2021 The Tabler Authors
|
||||
* Copyright 2018-2021 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>Heatmap Charts - 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 class="antialiased">
|
||||
<div class="page">
|
||||
<header class="navbar navbar-expand-md navbar-light d-print-none">
|
||||
<div class="container-xl">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<a href=".">
|
||||
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
|
||||
</a>
|
||||
</h1>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item dropdown d-none d-md-flex me-3">
|
||||
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
|
||||
<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="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
|
||||
<span class="badge bg-red"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
|
||||
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-muted">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
||||
<a href="#" class="dropdown-item">Set status</a>
|
||||
<a href="#" class="dropdown-item">Profile & account</a>
|
||||
<a href="#" class="dropdown-item">Feedback</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">Settings</a>
|
||||
<a href="#" class="dropdown-item">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
<div class="navbar navbar-light">
|
||||
<div class="container-xl">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./index.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Home
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Interface
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-menu-columns">
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="./empty.html" >
|
||||
Empty page
|
||||
</a>
|
||||
<a class="dropdown-item" href="./accordion.html" >
|
||||
Accordion
|
||||
</a>
|
||||
<a class="dropdown-item" href="./blank.html" >
|
||||
Blank page
|
||||
</a>
|
||||
<a class="dropdown-item" href="./buttons.html" >
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item" href="./cards.html" >
|
||||
Cards
|
||||
</a>
|
||||
<a class="dropdown-item" href="./cards-masonry.html" >
|
||||
Cards Masonry
|
||||
</a>
|
||||
<a class="dropdown-item" href="./colors.html" >
|
||||
Colors
|
||||
</a>
|
||||
<a class="dropdown-item" href="./dropdowns.html" >
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item" href="./icons.html" >
|
||||
Icons
|
||||
</a>
|
||||
<a class="dropdown-item" href="./modals.html" >
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item" href="./maps.html" >
|
||||
Maps
|
||||
</a>
|
||||
<a class="dropdown-item" href="./map-fullsize.html" >
|
||||
Map fullsize
|
||||
</a>
|
||||
<a class="dropdown-item" href="./maps-vector.html" >
|
||||
Vector maps
|
||||
</a>
|
||||
<a class="dropdown-item" href="./navigation.html" >
|
||||
Navigation
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="./charts.html" >
|
||||
Charts
|
||||
</a>
|
||||
<a class="dropdown-item" href="./charts-heatmap.html" >
|
||||
Charts heatmap
|
||||
</a>
|
||||
<a class="dropdown-item" href="./pagination.html" >
|
||||
Pagination
|
||||
</a>
|
||||
<a class="dropdown-item" href="./skeleton.html" >
|
||||
Skeleton
|
||||
</a>
|
||||
<a class="dropdown-item" href="./tabs.html" >
|
||||
Tabs
|
||||
</a>
|
||||
<a class="dropdown-item" href="./tables.html" >
|
||||
Tables
|
||||
</a>
|
||||
<a class="dropdown-item" href="./carousel.html" >
|
||||
Carousel
|
||||
</a>
|
||||
<a class="dropdown-item" href="./lists.html" >
|
||||
Lists
|
||||
</a>
|
||||
<a class="dropdown-item" href="./typography.html" >
|
||||
Typography
|
||||
</a>
|
||||
<a class="dropdown-item" href="./page-headers.html" >
|
||||
Page headers
|
||||
</a>
|
||||
<a class="dropdown-item" href="./markdown.html" >
|
||||
Markdown
|
||||
</a>
|
||||
<div class="dropend">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Authentication
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
|
||||
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
|
||||
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
|
||||
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||||
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropend">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Error pages
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="./error-404.html" class="dropdown-item">404 page</a>
|
||||
<a href="./error-500.html" class="dropdown-item">500 page</a>
|
||||
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./form-elements.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Form elements
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Extra
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="./activity.html" >
|
||||
Activity
|
||||
</a>
|
||||
<a class="dropdown-item" href="./gallery.html" >
|
||||
Gallery
|
||||
</a>
|
||||
<a class="dropdown-item" href="./invoice.html" >
|
||||
Invoice
|
||||
</a>
|
||||
<a class="dropdown-item" href="./search-results.html" >
|
||||
Search results
|
||||
</a>
|
||||
<a class="dropdown-item" href="./pricing.html" >
|
||||
Pricing cards
|
||||
</a>
|
||||
<a class="dropdown-item" href="./users.html" >
|
||||
Users
|
||||
</a>
|
||||
<a class="dropdown-item" href="./license.html" >
|
||||
License
|
||||
</a>
|
||||
<a class="dropdown-item" href="./music.html" >
|
||||
Music
|
||||
</a>
|
||||
<a class="dropdown-item" href="./widgets.html" >
|
||||
Widgets
|
||||
</a>
|
||||
<a class="dropdown-item" href="./wizard.html" >
|
||||
Wizard
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Layout
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-menu-columns">
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="./layout-horizontal.html" >
|
||||
Horizontal
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-vertical.html" >
|
||||
Vertical
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
|
||||
Vertical transparent
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-vertical-right.html" >
|
||||
Right vertical
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-condensed.html" >
|
||||
Condensed
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-condensed-dark.html" >
|
||||
Condensed dark
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-combo.html" >
|
||||
Combined
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="./layout-navbar-dark.html" >
|
||||
Navbar dark
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
|
||||
Navbar sticky
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
|
||||
Navbar overlap
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-dark.html" >
|
||||
Dark mode
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-rtl.html" >
|
||||
RTL mode
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-fluid.html" >
|
||||
Fluid
|
||||
</a>
|
||||
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
|
||||
Fluid vertical
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./docs/index.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Documentation
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
|
||||
<form action="." method="get">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
<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>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="container-xl">
|
||||
<!-- Page title -->
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Heatmap Charts
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-cards">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Basic Heatmap - Single Series</h4>
|
||||
<div id="chart-heatmap-basic"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Heatmap - Multiple series</h4>
|
||||
<div id="chart-heatmap-multiple"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Heatmap - Labels included</h4>
|
||||
<div id="chart-heatmap-labels"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Heatmap - Color range</h4>
|
||||
<div id="chart-heatmap-colors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer footer-transparent d-print-none">
|
||||
<div class="container">
|
||||
<div class="row text-center align-items-center flex-row-reverse">
|
||||
<div class="col-lg-auto ms-lg-auto">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
|
||||
<li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
|
||||
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
Copyright © 2021
|
||||
<a href="." class="link-secondary">Tabler</a>.
|
||||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Libs JS -->
|
||||
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
|
||||
<!-- Tabler Core -->
|
||||
<script src="./dist/js/tabler.min.js"></script>
|
||||
<script>
|
||||
var options = {
|
||||
chart: {
|
||||
height: 400,
|
||||
type: "heatmap",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: ["#206bc4", ],
|
||||
series: [
|
||||
{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
|
||||
{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
|
||||
{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
|
||||
{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
|
||||
{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
|
||||
{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
|
||||
{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
|
||||
{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
|
||||
{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
|
||||
{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
|
||||
{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
|
||||
{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
|
||||
],
|
||||
xaxis: {
|
||||
type: "category"
|
||||
}
|
||||
};
|
||||
(new ApexCharts(document.querySelector("#chart-heatmap-basic"),options)).render();
|
||||
</script>
|
||||
<script>
|
||||
var options = {
|
||||
chart: {
|
||||
height: 400,
|
||||
type: "heatmap",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: ["#206bc4", "#45aaf2", "#6574cd", "#a55eea", "#f66d9b", "#cd201f", "#ff922b", "#fab005", "#94d82d", "#5eba00", "#2bcbba", "#17a2b8", ],
|
||||
series: [
|
||||
{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
|
||||
{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
|
||||
{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
|
||||
{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
|
||||
{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
|
||||
{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
|
||||
{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
|
||||
{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
|
||||
{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
|
||||
{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
|
||||
{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
|
||||
{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
|
||||
],
|
||||
xaxis: {
|
||||
type: "category"
|
||||
}
|
||||
};
|
||||
(new ApexCharts(document.querySelector("#chart-heatmap-multiple"),options)).render();
|
||||
</script>
|
||||
<script>
|
||||
var options = {
|
||||
chart: {
|
||||
height: 400,
|
||||
type: "heatmap",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
colors: ["#206bc4", ],
|
||||
series: [
|
||||
{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
|
||||
{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
|
||||
{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
|
||||
{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
|
||||
{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
|
||||
{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
|
||||
{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
|
||||
{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
|
||||
{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
|
||||
{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
|
||||
{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
|
||||
{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
|
||||
],
|
||||
xaxis: {
|
||||
type: "category"
|
||||
}
|
||||
};
|
||||
(new ApexCharts(document.querySelector("#chart-heatmap-labels"),options)).render();
|
||||
</script>
|
||||
<script>
|
||||
var options = {
|
||||
chart: {
|
||||
height: 400,
|
||||
type: "heatmap",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
enableShades: true,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: 0,
|
||||
to: 20,
|
||||
name: "Low",
|
||||
color: "#5eba00"
|
||||
}, {
|
||||
from: 21,
|
||||
to: 50,
|
||||
name: "Medium",
|
||||
color: "#206bc4"
|
||||
}, {
|
||||
from: 51,
|
||||
to: 75,
|
||||
name: "High",
|
||||
color: "#fab005"
|
||||
}, {
|
||||
from: 76,
|
||||
to: 100,
|
||||
name: "Extreme",
|
||||
color: "#cd201f"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
|
||||
{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
|
||||
{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
|
||||
{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
|
||||
{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
|
||||
{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
|
||||
{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
|
||||
{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
|
||||
{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
|
||||
{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
|
||||
{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
|
||||
{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
|
||||
],
|
||||
xaxis: {
|
||||
type: "category"
|
||||
}
|
||||
};
|
||||
(new ApexCharts(document.querySelector("#chart-heatmap-colors"),options)).render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,735 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||||
* @version 1.0.0-beta
|
||||
* @link https://tabler.io
|
||||
* Copyright 2018-2021 The Tabler Authors
|
||||
* Copyright 2018-2021 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>Browser Support - 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 class="antialiased">
|
||||
<div class="page">
|
||||
<header class="navbar navbar-expand-md navbar-light d-print-none">
|
||||
<div class="container-xl">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<a href="..">
|
||||
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
|
||||
</a>
|
||||
</h1>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item d-none d-md-flex me-3">
|
||||
<a href="https://github.com/tabler/tabler" class="btn btn-outline-github" target="_blank" rel="noreferrer">
|
||||
<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="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>
|
||||
Source code
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-item dropdown d-none d-md-flex me-3">
|
||||
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
|
||||
<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="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
|
||||
<span class="badge bg-red"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
|
||||
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-muted">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
||||
<a href="#" class="dropdown-item">Set status</a>
|
||||
<a href="#" class="dropdown-item">Profile & account</a>
|
||||
<a href="#" class="dropdown-item">Feedback</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">Settings</a>
|
||||
<a href="#" class="dropdown-item">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="navbar-expand-md">
|
||||
<div class="collapse navbar-collapse" id="navbar-menu">
|
||||
<div class="navbar navbar-light">
|
||||
<div class="container-xl">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../index.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Home
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Interface
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-menu-columns">
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../empty.html" >
|
||||
Empty page
|
||||
</a>
|
||||
<a class="dropdown-item" href="../accordion.html" >
|
||||
Accordion
|
||||
</a>
|
||||
<a class="dropdown-item" href="../blank.html" >
|
||||
Blank page
|
||||
</a>
|
||||
<a class="dropdown-item" href="../buttons.html" >
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item" href="../cards.html" >
|
||||
Cards
|
||||
</a>
|
||||
<a class="dropdown-item" href="../cards-masonry.html" >
|
||||
Cards Masonry
|
||||
</a>
|
||||
<a class="dropdown-item" href="../colors.html" >
|
||||
Colors
|
||||
</a>
|
||||
<a class="dropdown-item" href="../dropdowns.html" >
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item" href="../icons.html" >
|
||||
Icons
|
||||
</a>
|
||||
<a class="dropdown-item" href="../modals.html" >
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item" href="../maps.html" >
|
||||
Maps
|
||||
</a>
|
||||
<a class="dropdown-item" href="../map-fullsize.html" >
|
||||
Map fullsize
|
||||
</a>
|
||||
<a class="dropdown-item" href="../maps-vector.html" >
|
||||
Vector maps
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../navigation.html" >
|
||||
Navigation
|
||||
</a>
|
||||
<a class="dropdown-item" href="../charts.html" >
|
||||
Charts
|
||||
</a>
|
||||
<a class="dropdown-item" href="../pagination.html" >
|
||||
Pagination
|
||||
</a>
|
||||
<a class="dropdown-item" href="../skeleton.html" >
|
||||
Skeleton
|
||||
</a>
|
||||
<a class="dropdown-item" href="../tabs.html" >
|
||||
Tabs
|
||||
</a>
|
||||
<a class="dropdown-item" href="../tables.html" >
|
||||
Tables
|
||||
</a>
|
||||
<a class="dropdown-item" href="../carousel.html" >
|
||||
Carousel
|
||||
</a>
|
||||
<a class="dropdown-item" href="../lists.html" >
|
||||
Lists
|
||||
</a>
|
||||
<a class="dropdown-item" href="../typography.html" >
|
||||
Typography
|
||||
</a>
|
||||
<a class="dropdown-item" href="../markdown.html" >
|
||||
Markdown
|
||||
</a>
|
||||
<div class="dropend">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Authentication
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
|
||||
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
|
||||
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
|
||||
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
|
||||
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropend">
|
||||
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
Error pages
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="../error-404.html" class="dropdown-item">404 page</a>
|
||||
<a href="../error-500.html" class="dropdown-item">500 page</a>
|
||||
<a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="../form-elements.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Form elements
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Extra
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="../activity.html" >
|
||||
Activity
|
||||
</a>
|
||||
<a class="dropdown-item" href="../gallery.html" >
|
||||
Gallery
|
||||
</a>
|
||||
<a class="dropdown-item" href="../invoice.html" >
|
||||
Invoice
|
||||
</a>
|
||||
<a class="dropdown-item" href="../search-results.html" >
|
||||
Search results
|
||||
</a>
|
||||
<a class="dropdown-item" href="../pricing.html" >
|
||||
Pricing cards
|
||||
</a>
|
||||
<a class="dropdown-item" href="../users.html" >
|
||||
Users
|
||||
</a>
|
||||
<a class="dropdown-item" href="../license.html" >
|
||||
License
|
||||
</a>
|
||||
<a class="dropdown-item" href="../music.html" >
|
||||
Music
|
||||
</a>
|
||||
<a class="dropdown-item" href="../widgets.html" >
|
||||
Widgets
|
||||
</a>
|
||||
<a class="dropdown-item" href="../wizard.html" >
|
||||
Wizard
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Layout
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-menu-columns">
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../layout-horizontal.html" >
|
||||
Horizontal
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-vertical.html" >
|
||||
Vertical
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
|
||||
Vertical transparent
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-vertical-right.html" >
|
||||
Right vertical
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-condensed.html" >
|
||||
Condensed
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-condensed-dark.html" >
|
||||
Condensed dark
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-combo.html" >
|
||||
Combined
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="../layout-navbar-dark.html" >
|
||||
Navbar dark
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
|
||||
Navbar sticky
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
|
||||
Navbar overlap
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-dark.html" >
|
||||
Dark mode
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-rtl.html" >
|
||||
RTL mode
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-fluid.html" >
|
||||
Fluid
|
||||
</a>
|
||||
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
|
||||
Fluid vertical
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="../docs/index.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Documentation
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
|
||||
<form action="." method="get">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">
|
||||
<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>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="container-xl">
|
||||
<!-- Page title -->
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Documentation
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gx-lg-4">
|
||||
<div class="d-none d-lg-block col-lg-3">
|
||||
<ul class="nav nav-pills nav-vertical">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/" class="nav-link">
|
||||
Introduction
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
|
||||
Getting started
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse show" id="menu-base">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/getting-started.html" class="nav-link">
|
||||
Getting Started
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/download.html" class="nav-link">
|
||||
Download
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/browser-support.html" class="nav-link active">
|
||||
Browser Support
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
|
||||
Content
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse" id="menu-content">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/colors.html" class="nav-link">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/typography.html" class="nav-link">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/icons.html" class="nav-link">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
|
||||
Layout
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse" id="menu-layout">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/page-headers.html" class="nav-link">
|
||||
Page headers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
|
||||
Form components
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse" id="menu-forms">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-elements.html" class="nav-link">
|
||||
Form elements
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-helpers.html" class="nav-link">
|
||||
Form helpers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-validation.html" class="nav-link">
|
||||
Validation states
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-image-check.html" class="nav-link">
|
||||
Image check
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-color-check.html" class="nav-link">
|
||||
Color check
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-selectboxes.html" class="nav-link">
|
||||
Form selectboxes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-fieldset.html" class="nav-link">
|
||||
Form fieldset
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
|
||||
Components
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse" id="menu-components">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/alerts.html" class="nav-link">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/avatars.html" class="nav-link">
|
||||
Avatars
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/badges.html" class="nav-link">
|
||||
Badges
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/breadcrumb.html" class="nav-link">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/buttons.html" class="nav-link">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/cards.html" class="nav-link">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/carousel.html" class="nav-link">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/dropdowns.html" class="nav-link">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/divider.html" class="nav-link">
|
||||
Divider
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/empty.html" class="nav-link">
|
||||
Empty states
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/modals.html" class="nav-link">
|
||||
Modals
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/page-headers.html" class="nav-link">
|
||||
Page headers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/progress.html" class="nav-link">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/range-slider.html" class="nav-link">
|
||||
Range slider
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/ribbons.html" class="nav-link">
|
||||
Ribbons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/skeleton.html" class="nav-link">
|
||||
Skeleton
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/spinners.html" class="nav-link">
|
||||
Spinners
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/steps.html" class="nav-link">
|
||||
Steps
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/switch-icon.html" class="nav-link">
|
||||
Switch icon
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/tables.html" class="nav-link">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/tabs.html" class="nav-link">
|
||||
Tabs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/timelines.html" class="nav-link">
|
||||
Timelines
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/toasts.html" class="nav-link">
|
||||
Toasts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/tooltips.html" class="nav-link">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
|
||||
Utilities
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse" id="menu-utils">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/borders.html" class="nav-link">
|
||||
Borders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/cursors.html" class="nav-link">
|
||||
Cursors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/interactions.html" class="nav-link">
|
||||
Interactions
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
|
||||
Plugins
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav nav-pills collapse" id="menu-plugins">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/autosize.html" class="nav-link">
|
||||
Autosize
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/input-mask.html" class="nav-link">
|
||||
Form input mask
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/flags.html" class="nav-link">
|
||||
Flags
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/payments.html" class="nav-link">
|
||||
Payments
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/charts.html" class="nav-link">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../changelog.html" class="nav-link">
|
||||
Changelog
|
||||
<span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="markdown">
|
||||
<div>
|
||||
<div class="d-flex mb-3">
|
||||
<h1 class="m-0">Browser Support</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p>As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.</p>
|
||||
<p>For instance, Tabler no longer uses <strong>vendor prefixes</strong> in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as <strong>CSS grid</strong>, <strong>object fit</strong>, and <strong>sticky positioning</strong> which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with <strong>only</strong> partial support for Internet Explorer.</p>
|
||||
<h2 id="supported-browsers">Supported Browsers</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Version</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox</td>
|
||||
<td>last 3 versions, ESR</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi</td>
|
||||
<td>last 3 versions</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer footer-transparent d-print-none">
|
||||
<div class="container">
|
||||
<div class="row text-center align-items-center flex-row-reverse">
|
||||
<div class="col-lg-auto ms-lg-auto">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
|
||||
<li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
|
||||
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item">
|
||||
Copyright © 2021
|
||||
<a href=".." class="link-secondary">Tabler</a>.
|
||||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Libs JS -->
|
||||
<!-- Tabler Core -->
|
||||
<script src="../dist/js/tabler.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -12,7 +12,7 @@
|
||||
<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>Page headers - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
||||
<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"/>
|
||||
@@ -33,6 +33,12 @@
|
||||
</a>
|
||||
</h1>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item d-none d-md-flex me-3">
|
||||
<a href="https://github.com/tabler/tabler" class="btn btn-outline-github" target="_blank" rel="noreferrer">
|
||||
<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="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>
|
||||
Source code
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-item dropdown d-none d-md-flex me-3">
|
||||
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
|
||||
<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="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
|
||||
@@ -80,7 +86,7 @@
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active dropdown">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
|
||||
</span>
|
||||
@@ -130,17 +136,14 @@
|
||||
<a class="dropdown-item" href="./maps-vector.html" >
|
||||
Vector maps
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="./navigation.html" >
|
||||
Navigation
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu-column">
|
||||
<a class="dropdown-item" href="./charts.html" >
|
||||
Charts
|
||||
</a>
|
||||
<a class="dropdown-item" href="./charts-heatmap.html" >
|
||||
Charts heatmap
|
||||
</a>
|
||||
<a class="dropdown-item" href="./pagination.html" >
|
||||
Pagination
|
||||
</a>
|
||||
@@ -162,9 +165,6 @@
|
||||
<a class="dropdown-item" href="./typography.html" >
|
||||
Typography
|
||||
</a>
|
||||
<a class="dropdown-item active" href="./page-headers.html" >
|
||||
Page headers
|
||||
</a>
|
||||
<a class="dropdown-item" href="./markdown.html" >
|
||||
Markdown
|
||||
</a>
|
||||
@@ -329,159 +329,12 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="container-xl">
|
||||
<!-- Page title -->
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
Page headers
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, aperiam asperiores assumenda consequuntur debitis delectus dolorem doloremque est incidunt ipsa, labore minus, natus nobis non nulla possimus provident reprehenderit sint.
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span class="avatar avatar-md" style="background-image: url(./static/avatars/000m.jpg)"></span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2 class="page-title">Paweł Kuna</h2>
|
||||
<div class="page-subtitle">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<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="3" y1="21" x2="21" y2="21" /><path d="M5 21v-14l8 -4v18" /><path d="M19 21v-10l-6 -4" /><line x1="9" y1="9" x2="9" y2="9.01" /><line x1="9" y1="12" x2="9" y2="12.01" /><line x1="9" y1="15" x2="9" y2="15.01" /><line x1="9" y1="18" x2="9" y2="18.01" /></svg>
|
||||
<a href="#" class="text-reset">UI Designer at Tabler</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<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="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /></svg>
|
||||
<a href="#" class="text-reset">194 friends</a>
|
||||
</div>
|
||||
<div class="col-auto text-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" 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 12l5 5l10 -10" /></svg>
|
||||
Verified
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto d-none d-md-flex">
|
||||
<a href="#" class="btn btn-primary">
|
||||
<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="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" /><line x1="8" y1="9" x2="16" y2="9" /><line x1="8" y1="13" x2="14" y2="13" /></svg>
|
||||
Send message
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">Gallery</h2>
|
||||
<div class="text-muted mt-1">1-12 of 241 photos</div>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="d-flex">
|
||||
<div class="me-3 d-none d-md-block">
|
||||
<div class="input-icon">
|
||||
<input type="text" class="form-control" placeholder="Search…">
|
||||
<span class="input-icon-addon">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">
|
||||
<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>
|
||||
Add photo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<div class="page-header page-header-border">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">Improve cards with no border</h2>
|
||||
<div class="text-muted mt-1">
|
||||
<a href="#" class="text-reset">#693</a>
|
||||
opened by <a href="#" class="text-body">Jeffie Lewzey</a>
|
||||
in <a href="#" class="text-body">Calendar Page</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-white">
|
||||
<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="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" class="btn btn-white d-none d-md-inline-flex">
|
||||
<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="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center mw-100">
|
||||
<div class="col">
|
||||
<div class="mb-1">
|
||||
<ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<h2 class="page-title">
|
||||
<span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn btn-white d-none d-md-inline-flex">
|
||||
<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="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary">
|
||||
Publish
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="page-pretitle">
|
||||
Overview
|
||||
</div>
|
||||
<h2 class="page-title">
|
||||
Dashboard
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto ms-auto">
|
||||
<div class="btn-list">
|
||||
<span class="d-none d-sm-inline">
|
||||
<a href="#" class="btn btn-white">
|
||||
New view
|
||||
</a>
|
||||
</span>
|
||||
<a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
|
||||
<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>
|
||||
Create new report
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -512,107 +365,6 @@
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">New report</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
|
||||
</div>
|
||||
<label class="form-label">Report type</label>
|
||||
<div class="form-selectgroup-boxes row mb-3">
|
||||
<div class="col-lg-6">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
|
||||
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<span class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</span>
|
||||
<span class="form-selectgroup-label-content">
|
||||
<span class="form-selectgroup-title strong mb-1">Simple</span>
|
||||
<span class="d-block text-muted">Provide only basic data needed for the report</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="report-type" value="1" class="form-selectgroup-input">
|
||||
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
||||
<span class="me-3">
|
||||
<span class="form-selectgroup-check"></span>
|
||||
</span>
|
||||
<span class="form-selectgroup-label-content">
|
||||
<span class="form-selectgroup-title strong mb-1">Advanced</span>
|
||||
<span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Report url</label>
|
||||
<div class="input-group input-group-flat">
|
||||
<span class="input-group-text">
|
||||
https://tabler.io/reports/
|
||||
</span>
|
||||
<input type="text" class="form-control ps-0" value="report-01" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Visibility</label>
|
||||
<select class="form-select">
|
||||
<option value="1" selected>Private</option>
|
||||
<option value="2">Public</option>
|
||||
<option value="3">Hidden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Client name</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Reporting period</label>
|
||||
<input type="date" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div>
|
||||
<label class="form-label">Additional information</label>
|
||||
<textarea class="form-control" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
|
||||
Cancel
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
||||
<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>
|
||||
Create new report
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Libs JS -->
|
||||
<!-- Tabler Core -->
|
||||
<script src="./dist/js/tabler.min.js"></script>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2770 2770"><linearGradient id="a" y1="51%" y2="51%"><stop offset=".4" stop-color="#f50"/><stop offset=".6" stop-color="#ff2000"/></linearGradient><linearGradient id="b" x1="2%" y1="51%" y2="51%"><stop offset="0" stop-color="#ff452a"/><stop offset="1" stop-color="#ff2000"/></linearGradient><path fill="url(#a)" d="M2395 723l60-147-170-176c-92-92-288-38-288-38l-222-252H992L769 363s-196-53-288 37L311 575l60 147-75 218 250 953c52 204 87 283 234 387l457 310c44 27 98 74 147 74s103-47 147-74l457-310c147-104 182-183 234-387l250-953z"/><path fill="#fff" d="M1935 524s287 347 287 420c0 75-36 94-72 133l-215 230c-20 20-63 54-38 113 25 60 60 134 20 210-40 77-110 128-155 120a820 820 0 0 1-190-90c-38-25-160-126-160-165s126-110 150-124c23-16 130-78 132-102s2-30-30-90-88-140-80-192c10-52 100-80 167-105l207-78c16-8 12-15-36-20-48-4-183-22-244-5s-163 43-173 57c-8 14-16 14-7 62l58 315c4 40 12 67-30 77-44 10-117 27-142 27s-99-17-142-27-35-37-30-77c4-40 48-268 57-315 10-48 1-48-7-62-10-14-113-40-174-57-60-17-196 1-244 6-48 4-52 10-36 20l207 77c66 25 158 53 167 105 10 53-47 132-80 192s-32 66-30 90 110 86 132 102c24 15 150 85 150 124s-119 140-159 165a820 820 0 0 1-190 90c-45 8-115-43-156-120-40-76-4-150 20-210 25-60-17-92-38-113l-215-230c-35-37-71-57-71-131s287-420 287-420l273 44c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47zm-215 1328c18 10 7 32-10 44l-254 198c-20 20-52 50-73 50s-52-30-73-50a13200 13200 0 0 0-255-198c-16-12-27-33-10-44l150-80a870 870 0 0 1 188-73c15 0 110 34 187 73l150 80z"/><path fill="url(#b)" d="M1999 363l-224-253H992L769 363s-196-53-288 37c0 0 260-23 350 123l276 47c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47 90-146 350-123 350-123-92-92-288-38-288-38"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 190 190"><linearGradient id="d" x1="28.3" x2="80.8" y1="75" y2="44.4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52714" stop-opacity=".6"/><stop offset=".7" stop-color="#a52714" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="109.9" x2="51.5" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#055524" stop-opacity=".4"/><stop offset=".3" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ea6100" stop-opacity=".3"/><stop offset=".7" stop-color="#ea6100" stop-opacity="0"/></linearGradient><radialGradient id="a" cx="91.2" cy="55" r="84.1" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3e2723" stop-opacity=".2"/><stop offset="1" stop-color="#3e2723" stop-opacity="0"/></radialGradient><radialGradient id="i" cx="20.9" cy="47.5" r="78" xlink:href="#a"/><radialGradient id="j" cx="94.8" cy="95.1" r="87.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="k" cx="33.3" cy="31" r="176.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><clipPath id="b"><circle cx="95" cy="95" r="88"/></clipPath><g clip-path="url(#b)"><use fill="#db4437" xlink:href="#c"/><use fill="url(#d)" xlink:href="#c"/><use fill="#0f9d58" xlink:href="#e"/><use fill="url(#f)" xlink:href="#e"/><use fill="#ffcd40" xlink:href="#g"/><use fill="url(#h)" xlink:href="#g"/><g fill-opacity=".1"><path fill="#3e2723" d="M61.3 114.7L21 47.4l39 67.8z"/><path fill="#263238" d="M128.8 116.3l-.8-.4-37.3 67 38.3-67z"/></g><path id="e" d="M7 183h83.8l39-39v-29H60.2L7 23.5z"/><path id="g" d="M95 55l34.6 60L91 183h92V55z"/><path id="c" d="M21 7v108h39.4L95 55h88V7z"/><path fill="url(#a)" d="M95 55v21l78.4-21z"/><path fill="url(#i)" d="M21 47.5l57.2 57.2L60.4 115z"/><path fill="url(#j)" d="M90.8 183l21-78.3 17.8 10.3z"/><circle cx="95" cy="95" r="40" fill="#f1f1f1"/><circle cx="95" cy="95" r="32" fill="#4285f4"/><circle cx="95" cy="95" r="88" fill="url(#k)"/><g fill="#3e2723" fill-opacity=".1"><path fill="#fff" d="M129.6 115a40 40 0 0 1-69.2 0L7 24.5 60.4 116a40 40 0 0 0 69.2 0z"/><path d="M96 55h-.5a40 40 0 1 1 0 80h.5c22 0 40-18 40-40s-18-40-40-40zm-1 127a88 88 0 0 0 88-87.5v.5A88 88 0 0 1 7 95v-.5A88 88 0 0 0 95 182z"/><g fill-opacity=".2"><path fill="#fff" d="M130 116.3a39.3 39.3 0 0 0 3.4-32 38 38 0 0 1-3.8 30.7L92 183l38.2-66.5zM95 8a88 88 0 0 1 88 87.5V95A88 88 0 0 0 7 95v.5A88 88 0 0 1 95 8z"/><path d="M95 54c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27600 27600"><linearGradient id="a" gradientUnits="userSpaceOnUse"/><linearGradient id="b" x1="6870" x2="24704" y1="18705" y2="18705" xlink:href="#a"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="e" x1="16272" x2="5133" y1="10968" y2="23102" xlink:href="#a"><stop offset="0" stop-color="#1b9de2"/><stop offset=".16" stop-color="#1595df"/><stop offset=".67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="d" cx="16720" cy="18747" r="9538" xlink:href="#a"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><radialGradient id="g" cx="7130" cy="19866" r="14324" gradientTransform="matrix(.14843 -.98892 .79688 .1196 -8759 25542)" xlink:href="#a"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="h" cx="2523" cy="4680" r="20243" gradientTransform="matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)" xlink:href="#a"><stop offset="0" stop-color="#35c1f1"/><stop offset=".11" stop-color="#34c1ed"/><stop offset=".23" stop-color="#2fc2df"/><stop offset=".31" stop-color="#2bc3d2"/><stop offset=".67" stop-color="#36c752"/></radialGradient><radialGradient id="j" cx="24247" cy="7758" r="9734" gradientTransform="matrix(.28109 .95968 -.78353 .22949 24510 -16292)" xlink:href="#a"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><path id="c" d="M24105 20053a9345 9345 0 0 1-1053 472 10202 10202 0 0 1-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 0 0 6660-5282c220-350-168-757-535-565z"/><path id="f" d="M11571 25141a7913 7913 0 0 1-2273-2137 8145 8145 0 0 1-1514-4740 8093 8093 0 0 1 3093-6395 8082 8082 0 0 1 1373-859c312-148 846-414 1554-404a3236 3236 0 0 1 2569 1297 3184 3184 0 0 1 636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 0 0 7684 6757 12795 12795 0 0 0 3908 610c1414 0 2774-233 4045-656a7575 7575 0 0 1-6278-803z"/><path id="i" d="M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 0 0 3027-839 6147 6147 0 0 0 1133-850 6180 6180 0 0 0 1910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z"/><use fill="url(#b)" xlink:href="#c"/><use fill="url(#d)" opacity=".35" xlink:href="#c"/><use fill="url(#e)" xlink:href="#f"/><use fill="url(#g)" opacity=".4" xlink:href="#f"/><use fill="url(#h)" xlink:href="#i"/><use fill="url(#j)" xlink:href="#i"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#47848f" viewBox="0 0 1610 1610"><path d="M603 382c-195-36-349 2-411 108-46 79-33 185 32 297 5 10 18 13 27 7 10-5 13-18 7-27-58-101-69-192-32-257 51-88 189-122 369-89 11 2 21-5 23-16s-4-21-15-23zM326 924a1230 1230 0 0 0 298 235c283 163 584 207 733 106 9-6 11-19 5-28s-19-11-28-5c-133 91-419 49-690-107a1200 1200 0 0 1-289-228 20 20 0 0 0-28-1 20 20 0 0 0-1 28z"/><path d="M1309 900c128-151 172-303 111-409-45-78-141-119-267-121-11 0-20 9-20 20s9 20 20 20c114 1 196 37 233 101 51 88 11 224-107 363a20 20 0 0 0 2 28 20 20 0 0 0 28-2zM981 388a1263 1263 0 0 0-356 141c-293 169-483 418-457 598a21 21 0 0 0 23 17 21 21 0 0 0 17-23c-24-160 157-395 437-557a1228 1228 0 0 1 345-137 20 20 0 0 0 15-24c-3-10-13-17-24-15z"/><path d="M508 1252c67 186 176 301 299 301 90 0 172-61 237-169 6-9 3-22-7-27-9-6-22-3-27 7-58 97-129 149-203 149-102 0-199-102-261-275a20 20 0 0 0-26-12 20 20 0 0 0-12 26zm610-36a1240 1240 0 0 0 53-371c0-331-116-617-281-690-10-4-22 0-26 10s0 22 10 26c147 65 257 336 257 654a1230 1230 0 0 1-51 359 20 20 0 0 0 13 25c10 3 21-3 25-13zm376-20a96 96 0 1 0-192 0 96 96 0 0 0 192 0zm-40 0a56 56 0 1 1-112 0 56 56 0 0 1 112 0zm-1241 96a96 96 0 1 0 0-192 96 96 0 0 0 0 192zm0-40a56 56 0 1 1 0-112 56 56 0 0 1 0 112z"/><path d="M807 252a96 96 0 1 0 0-192 96 96 0 0 0 0 192zm0-40a56 56 0 1 1 0-112 56 56 0 0 1 0 112zm14 701a70 70 0 0 1-82-53 70 70 0 0 1 53-82 70 70 0 0 1 82 53 69 69 0 0 1-53 82z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.4 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1090 1090"><linearGradient id="a" x1="461" x2="461" y1="59" y2="1033" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" x1="714" x2="714" y1="116" y2="978" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/></linearGradient><path fill="url(#a)" d="M545 42.5a502.5 502.5 0 1 0 334.9 877.1 362.4 362.4 0 0 1-201.4 61.5c-119.7 0-226.8-59.4-299-153-55.6-65.6-91.5-162.5-94-271.3V533c2.5-108.8 38.4-205.8 94-271.3 72-93.6 179.3-153 299-153 73.6 0 142.5 22.5 201.4 61.6a500.8 500.8 0 0 0-333-127.9h-2z"/><path fill="url(#b)" d="M379.6 261.8c46-54.4 105.7-87.3 170.7-87.3 146.3 0 265 166 265 370.4 0 204.6-118.6 370.4-265 370.4-65 0-124.6-32.8-170.7-87.2 72 93.6 179.2 153 299 153A363 363 0 0 0 880 919.6 501 501 0 0 0 1047.5 545a501.1 501.1 0 0 0-167.6-374.6 362.4 362.4 0 0 0-201.4-61.5c-119.7 0-226.8 59.4-299 153"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 1900"><path fill="#ef3939" d="M944 1830c386 0 600 0 740-140s140-354 140-740 0-600-140-740S1330 70 944 70s-600 0-740 140S64 564 64 950s0 600 140 740 354 140 740 140z"/><linearGradient id="a" x1="61.24" x2="145.33" y1="37.94" y2="183.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity=".2"/><stop offset=".79" stop-opacity=".05"/></linearGradient><path fill="url(#a)" d="M151.6 62.4A66 66 0 0 0 30.5 78a65.57 65.57 0 0 0 6.8 50.4c.1.2.2.4.4.6l31 53.8 25.5.2c17.1 0 30.9 0 42.2-1.2 14-1.5 24.1-5 31.9-12.8 11.3-11.3 13.5-27.6 13.9-53.8l-30.6-52.8z" transform="scale(10)"/><path fill="#fff" d="M1407 484a657.9 657.9 0 0 0-932 0 660.9 660.9 0 0 0 0 933 657.9 657.9 0 0 0 932 0 660.9 660.9 0 0 0 0-933zm-39 304l-326 567c-20 35-49 56-90 59-45 3-80-16-103-55L519 786c-42-73 5-162 89-166 44-2 78 18 101 57 31 52 61 105 91 158l66 114c33 55 80 85 144 89 90 5 174-60 185-156 1-7 1-14 2-18 0-31-6-57-19-82-34-68 2-143 75-160 60-13 121 31 129 91 4 27-1 52-14 75z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Reference in New Issue
Block a user