1393 lines
66 KiB
HTML
1393 lines
66 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
|
* @version 1.0.0-beta20
|
|
* @link https://tabler.io
|
|
* Copyright 2018-2023 The Tabler Authors
|
|
* Copyright 2018-2023 codecalm.net Paweł Kuna
|
|
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
|
<title>Dashboard - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
|
|
<!-- CSS files -->
|
|
<link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
|
|
<link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
|
|
<link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
|
|
<style>
|
|
@import url('https://rsms.me/inter/inter.css');
|
|
:root {
|
|
--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
|
|
}
|
|
body {
|
|
font-feature-settings: "cv03", "cv04", "cv11";
|
|
}
|
|
.card-link {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
|
|
}
|
|
.card-link:hover {
|
|
transform: scale(1.05); /* 鼠标悬停时放大 */
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<script src="./dist/js/demo-theme.min.js?1692870487"></script>
|
|
<div class="page">
|
|
<!-- Navbar -->
|
|
<header class="navbar navbar-expand-md d-print-none" >
|
|
<div class="container-xl">
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
|
<a href=".">
|
|
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
|
|
</a>
|
|
</h1>
|
|
<div class="navbar-nav flex-row order-md-last">
|
|
<div class="nav-item d-none d-md-flex me-3">
|
|
<div class="btn-list">
|
|
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
|
|
Source code
|
|
</a>
|
|
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
|
|
Sponsor
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="d-none d-md-flex">
|
|
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
|
|
</a>
|
|
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
|
|
</a>
|
|
<div class="nav-item dropdown d-none d-md-flex me-3">
|
|
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
|
|
<span class="badge bg-red"></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Last updates</h3>
|
|
</div>
|
|
<div class="list-group list-group-flush list-group-hoverable">
|
|
<div class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
|
|
<div class="col text-truncate">
|
|
<a href="#" class="text-body d-block">Example 1</a>
|
|
<div class="d-block text-secondary text-truncate mt-n1">
|
|
Change deprecated html tags to text decoration classes (#29604)
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" class="list-group-item-actions">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="status-dot d-block"></span></div>
|
|
<div class="col text-truncate">
|
|
<a href="#" class="text-body d-block">Example 2</a>
|
|
<div class="d-block text-secondary text-truncate mt-n1">
|
|
justify-content:between ⇒ justify-content:space-between (#29734)
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" class="list-group-item-actions show">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="status-dot d-block"></span></div>
|
|
<div class="col text-truncate">
|
|
<a href="#" class="text-body d-block">Example 3</a>
|
|
<div class="d-block text-secondary text-truncate mt-n1">
|
|
Update change-version.js (#29736)
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" class="list-group-item-actions">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
|
|
<div class="col text-truncate">
|
|
<a href="#" class="text-body d-block">Example 4</a>
|
|
<div class="d-block text-secondary text-truncate mt-n1">
|
|
Regenerate package-lock.json (#29730)
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" class="list-group-item-actions">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/star -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nav-item dropdown">
|
|
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
|
|
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
|
|
<div class="d-none d-xl-block ps-2">
|
|
<div>Paweł Kuna</div>
|
|
<div class="mt-1 small text-secondary">UI Designer</div>
|
|
</div>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
|
<a href="#" class="dropdown-item">Status</a>
|
|
<a href="./profile.html" class="dropdown-item">Profile</a>
|
|
<a href="#" class="dropdown-item">Feedback</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="./settings.html" class="dropdown-item">Settings</a>
|
|
<a href="./sign-in.html" class="dropdown-item">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<header class="navbar-expand-md">
|
|
<div class="collapse navbar-collapse" id="navbar-menu">
|
|
<div class="navbar">
|
|
<div class="container-xl">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./" > <!--主链接-->
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
项目
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="./datasets.html">
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
数据集
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-menu-columns">
|
|
<div class="dropdown-menu-column">
|
|
<a class="dropdown-item" href="./alerts.html">
|
|
Alerts
|
|
</a>
|
|
<a class="dropdown-item" href="./accordion.html">
|
|
Accordion
|
|
</a>
|
|
<div class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
|
|
Authentication
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="./sign-in.html" class="dropdown-item">
|
|
Sign in
|
|
</a>
|
|
<a href="./sign-in-link.html" class="dropdown-item">
|
|
Sign in link
|
|
</a>
|
|
<a href="./sign-in-illustration.html" class="dropdown-item">
|
|
Sign in with illustration
|
|
</a>
|
|
<a href="./sign-in-cover.html" class="dropdown-item">
|
|
Sign in with cover
|
|
</a>
|
|
<a href="./sign-up.html" class="dropdown-item">
|
|
Sign up
|
|
</a>
|
|
<a href="./forgot-password.html" class="dropdown-item">
|
|
Forgot password
|
|
</a>
|
|
<a href="./terms-of-service.html" class="dropdown-item">
|
|
Terms of service
|
|
</a>
|
|
<a href="./auth-lock.html" class="dropdown-item">
|
|
Lock screen
|
|
</a>
|
|
<a href="./2-step-verification.html" class="dropdown-item">
|
|
2 step verification
|
|
</a>
|
|
<a href="./2-step-verification-code.html" class="dropdown-item">
|
|
2 step verification code
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="dropdown-item" href="./blank.html">
|
|
Blank page
|
|
</a>
|
|
<a class="dropdown-item" href="./badges.html">
|
|
Badges
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./buttons.html">
|
|
Buttons
|
|
</a>
|
|
<div class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
|
|
Cards
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="./cards.html" class="dropdown-item">
|
|
Sample cards
|
|
</a>
|
|
<a href="./card-actions.html" class="dropdown-item">
|
|
Card actions
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a href="./cards-masonry.html" class="dropdown-item">
|
|
Cards Masonry
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="dropdown-item" href="./carousel.html">
|
|
Carousel
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./charts.html">
|
|
Charts
|
|
</a>
|
|
<a class="dropdown-item" href="./colors.html">
|
|
Colors
|
|
</a>
|
|
<a class="dropdown-item" href="./colorpicker.html">
|
|
Color picker
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./datagrid.html">
|
|
Data grid
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./datatables.html">
|
|
Datatables
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
<a class="dropdown-item" href="./dropzone.html">
|
|
Dropzone
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<div class="dropend">
|
|
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
|
|
Error pages
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a href="./error-404.html" class="dropdown-item">
|
|
404 page
|
|
</a>
|
|
<a href="./error-500.html" class="dropdown-item">
|
|
500 page
|
|
</a>
|
|
<a href="./error-maintenance.html" class="dropdown-item">
|
|
Maintenance page
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a class="dropdown-item" href="./flags.html">
|
|
Flags
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./inline-player.html">
|
|
Inline player
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-menu-column">
|
|
<a class="dropdown-item" href="./lightbox.html">
|
|
Lightbox
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./lists.html">
|
|
Lists
|
|
</a>
|
|
<a class="dropdown-item" href="./modals.html">
|
|
Modal
|
|
</a>
|
|
<a class="dropdown-item" href="./maps.html">
|
|
Map
|
|
</a>
|
|
<a class="dropdown-item" href="./map-fullsize.html">
|
|
Map fullsize
|
|
</a>
|
|
<a class="dropdown-item" href="./maps-vector.html">
|
|
Map vector
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./markdown.html">
|
|
Markdown
|
|
</a>
|
|
<a class="dropdown-item" href="./navigation.html">
|
|
Navigation
|
|
</a>
|
|
<a class="dropdown-item" href="./offcanvas.html">
|
|
Offcanvas
|
|
</a>
|
|
<a class="dropdown-item" href="./pagination.html">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
|
|
Pagination
|
|
</a>
|
|
<a class="dropdown-item" href="./placeholder.html">
|
|
Placeholder
|
|
</a>
|
|
<a class="dropdown-item" href="./steps.html">
|
|
Steps
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./stars-rating.html">
|
|
Stars rating
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./tabs.html">
|
|
Tabs
|
|
</a>
|
|
<a class="dropdown-item" href="./tags.html">
|
|
Tags
|
|
</a>
|
|
<a class="dropdown-item" href="./tables.html">
|
|
Tables
|
|
</a>
|
|
<a class="dropdown-item" href="./typography.html">
|
|
Typography
|
|
</a>
|
|
<a class="dropdown-item" href="./tinymce.html">
|
|
TinyMCE
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./form-elements.html" >
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
Form elements
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
Extra
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-menu-columns">
|
|
<div class="dropdown-menu-column">
|
|
<a class="dropdown-item" href="./empty.html">
|
|
Empty page
|
|
</a>
|
|
<a class="dropdown-item" href="./cookie-banner.html">
|
|
Cookie banner
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./chat.html">
|
|
Chat
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./activity.html">
|
|
Activity
|
|
</a>
|
|
<a class="dropdown-item" href="./gallery.html">
|
|
Gallery
|
|
</a>
|
|
<a class="dropdown-item" href="./invoice.html">
|
|
Invoice
|
|
</a>
|
|
<a class="dropdown-item" href="./search-results.html">
|
|
Search results
|
|
</a>
|
|
<a class="dropdown-item" href="./pricing.html">
|
|
Pricing cards
|
|
</a>
|
|
<a class="dropdown-item" href="./pricing-table.html">
|
|
Pricing table
|
|
</a>
|
|
<a class="dropdown-item" href="./faq.html">
|
|
FAQ
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./users.html">
|
|
Users
|
|
</a>
|
|
<a class="dropdown-item" href="./license.html">
|
|
License
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-menu-column">
|
|
<a class="dropdown-item" href="./logs.html">
|
|
Logs
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./music.html">
|
|
Music
|
|
</a>
|
|
<a class="dropdown-item" href="./photogrid.html">
|
|
Photogrid
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./tasks.html">
|
|
Tasks
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./uptime.html">
|
|
Uptime monitor
|
|
</a>
|
|
<a class="dropdown-item" href="./widgets.html">
|
|
Widgets
|
|
</a>
|
|
<a class="dropdown-item" href="./wizard.html">
|
|
Wizard
|
|
</a>
|
|
<a class="dropdown-item" href="./settings.html">
|
|
Settings
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./trial-ended.html">
|
|
Trial ended
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./job-listing.html">
|
|
Job listing
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./page-loader.html">
|
|
Page loader
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
Layout
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-menu-columns">
|
|
<div class="dropdown-menu-column">
|
|
<a class="dropdown-item" href="./layout-horizontal.html">
|
|
Horizontal
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-boxed.html">
|
|
Boxed
|
|
<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-vertical.html">
|
|
Vertical
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-vertical-transparent.html">
|
|
Vertical transparent
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-vertical-right.html">
|
|
Right vertical
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-condensed.html">
|
|
Condensed
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-combo.html">
|
|
Combined
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-menu-column">
|
|
<a class="dropdown-item" href="./layout-navbar-dark.html">
|
|
Navbar dark
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-navbar-sticky.html">
|
|
Navbar sticky
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-navbar-overlap.html">
|
|
Navbar overlap
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-rtl.html">
|
|
RTL mode
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-fluid.html">
|
|
Fluid
|
|
</a>
|
|
<a class="dropdown-item" href="./layout-fluid-vertical.html">
|
|
Fluid vertical
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./icons.html" >
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
4637 icons
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="./emails.html" >
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
Email templates
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
|
|
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
|
|
</span>
|
|
<span class="nav-link-title">
|
|
Help
|
|
</span>
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
|
|
Documentation
|
|
</a>
|
|
<a class="dropdown-item" href="./changelog.html">
|
|
Changelog
|
|
</a>
|
|
<a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
|
|
Source code
|
|
</a>
|
|
<a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
|
|
Sponsor project!
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="page-wrapper">
|
|
<!-- Page header -->
|
|
<div class="page-header d-print-none">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<!-- Page title -->
|
|
<h2 class="page-title">
|
|
数据集列表
|
|
</h2>
|
|
</div>
|
|
<!-- Page title actions -->
|
|
<div class="col-auto ms-auto d-print-none">
|
|
<div class="btn-list">
|
|
<a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
|
|
Create a new datasets
|
|
</a>
|
|
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 页面主体 -->
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
<div class="row row-deck row-cards">
|
|
|
|
<div class="col-sm-6 col-lg-6"> <!-- 修改为 col-lg-6 以占据一半宽度 -->
|
|
<div class="card card-link" onclick="location.href='./datasets-detail.html';" style="cursor: pointer; padding: 30px;"> <!-- 增加内边距 -->
|
|
<div class="card-body" style="font-size: 1.1em; display: flex; align-items: center;"> <!-- 使用 flexbox 布局 -->
|
|
<div style="flex-grow: 1;"> <!-- 让文本部分占据剩余空间 -->
|
|
<div class="subheader">数据集名称</div> <!-- 项目名称 -->
|
|
<div class="h3 mb-0 me-2">MINIST</div>
|
|
<div class="text-muted">种类: 图像</div> <!-- 新增信息框 -->
|
|
<div class="text-muted">数量: 70000</div> <!-- 新增信息框 -->
|
|
<div class="text-muted">大小: 10MB</div> <!-- 新增信息框 -->
|
|
<div class="mt-3"> <!-- 链接信息 -->
|
|
<a href="#" class="text-primary">编辑</a> |
|
|
<a href="#" class="text-warning">归档</a> |
|
|
<a href="#" class="text-danger">删除</a>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100px; height: 100px; margin-left: 20px;"> <!-- 固定大小的图片框 -->
|
|
<img src="./favicon.ico" alt="展示图片" style="width: 100%; height: 100%; object-fit: cover;"> <!-- 图片 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-6"> <!-- 修改为 col-lg-6 以占据一半宽度 -->
|
|
<div class="card card-link" onclick="location.href='./project-detail.html';" style="cursor: pointer; padding: 20px;"> <!-- 增加内边距 -->
|
|
<div class="card-body" style="font-size: 1.2em;"> <!-- 增加字体大小 -->
|
|
<div class="subheader">项目</div> <!-- 项目名称 -->
|
|
<div class="h3 mb-0 me-2">apex假人数据</div>
|
|
<div class="text-muted">创建时间: 2023-01-01</div> <!-- 创建时间 -->
|
|
<div class="text-muted">更新时间: 2023-01-10</div> <!-- 更新时间 -->
|
|
<div class="mt-3"> <!-- 链接信息 -->
|
|
<a href="#" class="text-primary">编辑</a> |
|
|
<a href="#" class="text-warning">归档</a> |
|
|
<a href="#" class="text-danger">删除</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">New report</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Name</label>
|
|
<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
|
|
</div>
|
|
<label class="form-label">Report type</label>
|
|
<div class="form-selectgroup-boxes row mb-3">
|
|
<div class="col-lg-6">
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
|
|
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<span class="me-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</span>
|
|
<span class="form-selectgroup-label-content">
|
|
<span class="form-selectgroup-title strong mb-1">Simple</span>
|
|
<span class="d-block text-secondary">Provide only basic data needed for the report</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<label class="form-selectgroup-item">
|
|
<input type="radio" name="report-type" value="1" class="form-selectgroup-input">
|
|
<span class="form-selectgroup-label d-flex align-items-center p-3">
|
|
<span class="me-3">
|
|
<span class="form-selectgroup-check"></span>
|
|
</span>
|
|
<span class="form-selectgroup-label-content">
|
|
<span class="form-selectgroup-title strong mb-1">Advanced</span>
|
|
<span class="d-block text-secondary">Insert charts and additional advanced analyses to be inserted in the report</span>
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="mb-3">
|
|
<label class="form-label">Report url</label>
|
|
<div class="input-group input-group-flat">
|
|
<span class="input-group-text">
|
|
https://tabler.io/reports/
|
|
</span>
|
|
<input type="text" class="form-control ps-0" value="report-01" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">Visibility</label>
|
|
<select class="form-select">
|
|
<option value="1" selected>Private</option>
|
|
<option value="2">Public</option>
|
|
<option value="3">Hidden</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Client name</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Reporting period</label>
|
|
<input type="date" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div>
|
|
<label class="form-label">Additional information</label>
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
|
|
Cancel
|
|
</a>
|
|
<a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
|
<!-- Download SVG icon from http://tabler-icons.io/i/plus -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
|
|
Create new report
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Libs JS -->
|
|
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1692870487" defer></script>
|
|
<script src="./dist/libs/jsvectormap/dist/js/jsvectormap.min.js?1692870487" defer></script>
|
|
<script src="./dist/libs/jsvectormap/dist/maps/world.js?1692870487" defer></script>
|
|
<script src="./dist/libs/jsvectormap/dist/maps/world-merc.js?1692870487" defer></script>
|
|
<!-- Tabler Core -->
|
|
<script src="./dist/js/tabler.min.js?1692870487" defer></script>
|
|
<script src="./dist/js/demo.min.js?1692870487" defer></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]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
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: [tabler.getColor("primary")],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 40.0,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
width: [2, 1],
|
|
dashArray: [0, 3],
|
|
lineCap: "round",
|
|
curve: "smooth",
|
|
},
|
|
series: [{
|
|
name: "May",
|
|
data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
|
|
},{
|
|
name: "April",
|
|
data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
strokeDashArray: 4,
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
type: 'datetime',
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
labels: [
|
|
'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
|
|
],
|
|
colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), {
|
|
chart: {
|
|
type: "bar",
|
|
fontFamily: 'inherit',
|
|
height: 40.0,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
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]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
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: [tabler.getColor("primary")],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
|
|
chart: {
|
|
type: "bar",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
stacked: true,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
series: [{
|
|
name: "Web",
|
|
data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
|
|
},{
|
|
name: "Social",
|
|
data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
|
|
},{
|
|
name: "Other",
|
|
data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -20,
|
|
right: 0,
|
|
left: -4,
|
|
bottom: -4
|
|
},
|
|
strokeDashArray: 4,
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
},
|
|
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', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
|
|
],
|
|
colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("green", 0.8)],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:on
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const map = new jsVectorMap({
|
|
selector: '#map-world',
|
|
map: 'world',
|
|
backgroundColor: 'transparent',
|
|
regionStyle: {
|
|
initial: {
|
|
fill: tabler.getColor('body-bg'),
|
|
stroke: tabler.getColor('border-color'),
|
|
strokeWidth: 2,
|
|
}
|
|
},
|
|
zoomOnScroll: false,
|
|
zoomButtons: false,
|
|
// -------- Series --------
|
|
visualizeData: {
|
|
scale: [tabler.getColor('bg-surface'), tabler.getColor('primary')],
|
|
values: { "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 },
|
|
},
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
map.updateSize();
|
|
});
|
|
});
|
|
// @formatter:off
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-activity'), {
|
|
chart: {
|
|
type: "radialBar",
|
|
fontFamily: 'inherit',
|
|
height: 40,
|
|
width: 40,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 0,
|
|
size: '75%'
|
|
},
|
|
track: {
|
|
margin: 0
|
|
},
|
|
dataLabels: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
colors: [tabler.getColor("blue")],
|
|
series: [35],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-development-activity'), {
|
|
chart: {
|
|
type: "area",
|
|
fontFamily: 'inherit',
|
|
height: 192,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
opacity: .16,
|
|
type: 'solid'
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
curve: "smooth",
|
|
},
|
|
series: [{
|
|
name: "Purchases",
|
|
data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
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: [tabler.getColor("primary")],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
point: {
|
|
show: false
|
|
},
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-1'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 24,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: tabler.getColor("primary"),
|
|
data: [17, 24, 20, 10, 5, 1, 4, 18, 13]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-2'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 24,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: tabler.getColor("primary"),
|
|
data: [13, 11, 19, 22, 12, 7, 14, 3, 21]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-3'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 24,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: tabler.getColor("primary"),
|
|
data: [10, 13, 10, 4, 17, 3, 23, 22, 19]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-4'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 24,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: tabler.getColor("primary"),
|
|
data: [6, 15, 13, 13, 5, 7, 17, 20, 19]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-5'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 24,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: tabler.getColor("primary"),
|
|
data: [2, 11, 15, 14, 21, 20, 8, 23, 18, 14]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
<script>
|
|
// @formatter:off
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-6'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 24,
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
},
|
|
series: [{
|
|
color: tabler.getColor("primary"),
|
|
data: [22, 12, 7, 14, 3, 21, 8, 23, 18, 14]
|
|
}],
|
|
})).render();
|
|
});
|
|
// @formatter:on
|
|
</script>
|
|
</body>
|
|
</html> |