1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-24 02:38:15 +04:00
Files
tabler/demo/400.html
2020-02-07 20:25:49 +01:00

199 lines
7.3 KiB
HTML

<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.3
* @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"/>
<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"/>
<title>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/selectize/dist/css/selectize.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/core/main.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/list/main.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580915872" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="./dist/css/tabler.min.css?1580915872" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="./dist/css/tabler-flags.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/css/tabler-buttons.min.css?1580915872" rel="stylesheet"/>
<link href="./dist/css/demo.min.css?1580915872" rel="stylesheet"/>
</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>
<!-- Libs JS -->
<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580915872"></script>
<script src="./dist/libs/autosize/dist/autosize.min.js?1580915872"></script>
<script src="./dist/libs/imask/dist/imask.min.js?1580915872"></script>
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1580915872"></script>
<script src="./dist/libs/nouislider/distribute/nouislider.min.js?1580915872"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js?1580915872"></script>
<script src="./dist/js/tabler-range-sliders.min.js?1580915872"></script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-simple'), {
start: 20,
connect: [true, false],
step: 10,
range: {
min: 0,
max: 100
}
});
// @formatter:on
</script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-connect'), {
start: [60, 90],
connect: [false, true, false],
step: 10,
range: {
min: 0,
max: 100
}
});
// @formatter:on
</script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-color'), {
start: 40,
connect: [true, false],
step: 10,
range: {
min: 0,
max: 100
}
});
// @formatter:on
</script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), {
chart: {
type: "area",
fontFamily: 'inherit',
height: 40.0,
sparkline: {
enabled: true
},
animations: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
fill: {
opacity: .16,
type: 'solid'
},
stroke: {
width: 2,
lineCap: "round",
curve: "smooth",
},
series: [{
name: "Profits",
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
}],
grid: {
strokeDashArray: 4,
},
xaxis: {
labels: {
padding: 0
},
tooltip: {
enabled: false
},
axisBorder: {
show: false,
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: [
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
],
colors: ["#206bc4"],
legend: {
show: false,
},
})).render();
});
// @formatter:on
</script>
<script>
(function () {
const elements = document.querySelectorAll('[data-toggle="autosize"]');
if (elements.length) {
elements.forEach(function (element) {
autosize(element);
});
}
})();
</script>
<script>
(function () {
/**
* Input mask
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
console.log('maskEl', maskEl);
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});
})();
</script>
</body>
</html>