mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
2404 lines
113 KiB
HTML
2404 lines
113 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
|
* @version 1.0.0-alpha.4
|
|
* @link https://github.com/tabler/tabler
|
|
* Copyright 2018-2019 The Tabler Authors
|
|
* Copyright 2018-2019 codecalm.net Paweł Kuna
|
|
* Licensed under MIT (https://tabler.io/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>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
|
<meta name="msapplication-TileColor" content="#206bc4"/>
|
|
<meta name="theme-color" content="#206bc4"/>
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
|
<meta name="mobile-web-app-capable" content="yes"/>
|
|
<meta name="HandheldFriendly" content="True"/>
|
|
<meta name="MobileOptimized" content="320"/>
|
|
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
|
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
|
|
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
|
|
<!-- Libs CSS -->
|
|
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/selectize/dist/css/selectize.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/core/main.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/daygrid/main.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/timegrid/main.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/fullcalendar/list/main.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/libs/nouislider/distribute/nouislider.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
|
|
<!-- Tabler Core -->
|
|
<link href="./dist/css/tabler.min.css?1582373134" rel="stylesheet"/>
|
|
<!-- Tabler Plugins -->
|
|
<link href="./dist/css/tabler-flags.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-payments.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-buttons.min.css?1582373134" rel="stylesheet"/>
|
|
<link href="./dist/css/demo.min.css?1582373134" rel="stylesheet"/>
|
|
<style>
|
|
body {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased border-top-wide border-primary d-flex flex-column">
|
|
<div class="flex-fill d-flex align-items-center justify-content-center">
|
|
<div class="container-tight py-6">
|
|
<div class="empty">
|
|
<div class="empty-icon">
|
|
<div class="display-4">400</div>
|
|
</div>
|
|
<p class="empty-title h3">Oops… You just found an error page</p>
|
|
<p class="empty-subtitle text-muted">
|
|
We are sorry but your request contains bad syntax and cannot be fulfilled
|
|
</p>
|
|
<div class="empty-action">
|
|
<a href="./." class="btn btn-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
Take me home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Customize Tabler</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="text-muted">Set preferences that will be saved for your live preview.</p>
|
|
<div class="mb-3">
|
|
<label class="form-label">Color scheme</label>
|
|
<div class="form-hint">Light or dark presentation.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
Dark</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 text-muted">
|
|
You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Navigation position</label>
|
|
<div class="form-hint">Choose where the main navigation in your project should be located.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar size</label>
|
|
<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Sidebar position</label>
|
|
<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Navigation color</label>
|
|
<div class="form-hint">Light or dark version of the sidebar </div>
|
|
<div class="btn-group w-100">
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
|
|
<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Libs JS -->
|
|
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1582373134"></script>
|
|
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1582373134"></script>
|
|
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1582373134"></script>
|
|
<!-- Tabler Core -->
|
|
<script src="./dist/js/tabler.min.js?1582373134"></script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</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>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function() {
|
|
var navbarPrimary = document.getElementById('navbar-primary'),
|
|
navbarSecondary = document.getElementById('navbar-secondary');
|
|
var defaults = {
|
|
theme: 'light',
|
|
'navbar-position': 'horizontal',
|
|
'navbar-size': 'wide',
|
|
'navbar-side': 'left',
|
|
'navbar-color': 'light',
|
|
};
|
|
var eventsClean = {
|
|
'theme': function () {
|
|
document.body.classList.remove('theme-dark');
|
|
},
|
|
'navbar-position': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical');
|
|
navbarSecondary.classList.remove('d-none');
|
|
},
|
|
'navbar-size': function () {
|
|
navbarPrimary.classList.remove('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side': function () {
|
|
navbarPrimary.classList.remove('navbar-right');
|
|
},
|
|
'navbar-color': function () {
|
|
navbarPrimary.classList.remove('navbar-dark');
|
|
navbarPrimary.classList.add('navbar-light');
|
|
},
|
|
};
|
|
var events = {
|
|
'theme:light': function () {
|
|
},
|
|
'theme:dark': function () {
|
|
document.body.classList.add('theme-dark');
|
|
},
|
|
'navbar-position:vertical': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
navbarSecondary.classList.add('d-none');
|
|
},
|
|
'navbar-position:horizontal': function () {
|
|
},
|
|
'navbar-position:both': function () {
|
|
navbarPrimary.classList.add('navbar-vertical');
|
|
},
|
|
'navbar-size:wide': function () {
|
|
},
|
|
'navbar-size:narrow': function () {
|
|
navbarPrimary.classList.add('navbar-vertical-narrow');
|
|
},
|
|
'navbar-side:left': function () {
|
|
},
|
|
'navbar-side:right': function () {
|
|
navbarPrimary.classList.add('navbar-right');
|
|
},
|
|
'navbar-color:light': function () {
|
|
},
|
|
'navbar-color:dark': function () {
|
|
navbarPrimary.classList.add('navbar-dark');
|
|
navbarPrimary.classList.remove('navbar-light');
|
|
},
|
|
};
|
|
var updateThemeConfig = function (name) {
|
|
var key, value;
|
|
if (name) {
|
|
[key, value] = name.split(':');
|
|
setConfig(key, value);
|
|
}
|
|
applyConfig();
|
|
};
|
|
var disableTransitions = function () {
|
|
document.body.classList.add('no-transitions');
|
|
setTimeout(function () {
|
|
document.body.classList.remove('no-transitions');
|
|
}, 300);
|
|
};
|
|
var getConfig = function () {
|
|
var config = {};
|
|
for (var key in defaults) {
|
|
config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
|
|
}
|
|
return config;
|
|
};
|
|
var setConfig = function (key, value) {
|
|
localStorage.setItem('tabler-' + key, value);
|
|
};
|
|
var applyConfig = function () {
|
|
disableTransitions();
|
|
var config = getConfig();
|
|
for (var key in config) {
|
|
var value = config[key];
|
|
eventsClean[key] && eventsClean[key].call();
|
|
events[key + ':' + value] && events[key + ':' + value].call();
|
|
([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
|
|
activeTrigger.classList.remove('active')
|
|
});
|
|
document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
|
|
}
|
|
};
|
|
applyConfig();
|
|
for (var name in events) {
|
|
var event = events[name];
|
|
(function (event, name) {
|
|
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
|
|
updateThemeConfig(name);
|
|
event.call();
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
})(event, name);
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
document.body.style.display = "block"
|
|
</script>
|
|
</body>
|
|
</html> |