1070 lines
37 KiB
HTML
1070 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
|
|
|
|
<title>
|
|
|
|
Black Dashboard Flask by Creative Tim
|
|
|
|
|
|
|
|
|
|
|
|
</title>
|
|
|
|
|
|
|
|
<!-- Fonts and icons -->
|
|
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
|
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
|
|
|
<!-- Nucleo Icons -->
|
|
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
|
<!-- CSS Files -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Documentation extras -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
|
|
<link rel="stylesheet" href="../../../assets/demo/docs.min.css">
|
|
|
|
<style>
|
|
.navbar-absolute-logo{
|
|
padding-left: 45px;
|
|
}
|
|
.navbar-absolute-logo img{
|
|
position: absolute;
|
|
left: 15px;
|
|
margin-top: -6px;
|
|
}
|
|
body{
|
|
background: white;
|
|
}
|
|
</style>
|
|
|
|
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
</head>
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
|
|
|
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
|
<div class="container">
|
|
<span class="skiplink-text">Skip to main content</span>
|
|
</div>
|
|
</a>
|
|
|
|
<header class="navbar navbar-expand bg-primary flex-column flex-md-row bd-navbar">
|
|
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/black-dashboard-flask" target="_blank">
|
|
Black Dashboard Flask
|
|
</a>
|
|
|
|
<ul class="navbar-nav flex-row d-none d-md-flex">
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="#version">
|
|
1.0.0
|
|
</a>
|
|
</li>
|
|
|
|
<!-- <li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
v2.0.0
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
|
|
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
|
|
</div>
|
|
</li> -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
|
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="navbar-nav-scroll ml-md-auto ">
|
|
<ul class="navbar-nav bd-navbar-nav flex-row">
|
|
<li class="nav-item">
|
|
<a target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
|
|
|
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
|
|
</header>
|
|
|
|
|
|
<div class="container-fluid">
|
|
<div class="row flex-xl-nowrap">
|
|
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Getting started
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
|
|
Getting Started Flask
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/getting-started/license.html">
|
|
License
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Foundation
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/foundation/colors.html">
|
|
Colors
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Components
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/badge.html">
|
|
Badge
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/breadcrumb.html">
|
|
Breadcrumb
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/card.html">
|
|
Card
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/collapse.html">
|
|
Collapse
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/forms.html">
|
|
Forms
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/google-maps.html">
|
|
Google Maps
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/modal.html">
|
|
Modal
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/navs.html">
|
|
Navs
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/nucleo-icons.html">
|
|
Nucleo Icons
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/components/tables.html">
|
|
Tables
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Plugins
|
|
</a>
|
|
|
|
<ul class="nav bd-sidenav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/plugins/perfect-scrollbar.html">
|
|
Perfect Scrollbar
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
|
|
<a href="../../../docs/1.0/plugins/chart-js.html">
|
|
Chart.js
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
|
<ul class="section-nav">
|
|
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3"><a href="#css">CSS</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#js">JS</a></li>
|
|
<li class="toc-entry toc-h3"><a href="#fonts-and-icons">Fonts and Icons</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2"><a href="#starter-template">Starter template</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
|
<h1 class="bd-title" id="content">Introduction</h1>
|
|
<p class="bd-lead">Black Dashboard is a free Bootstrap 4 Admin Template.</p>
|
|
<h2 id="quick-start">Quick start</h2>
|
|
|
|
<p>To start using the Admin Dashboard you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).</p>
|
|
|
|
<h3 id="css">CSS</h3>
|
|
|
|
<p>Copy-paste the stylesheet <code class="highlighter-rouge"><link></code> into your <code class="highlighter-rouge"><head></code> before all other stylesheets to load our CSS.</p>
|
|
|
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- CSS Files --></span>
|
|
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"../assets/css/black-dashboard-flask.css?v=1.0.0"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span></code></pre></figure>
|
|
|
|
<h3 id="js">JS</h3>
|
|
|
|
<p>Many of our components require the use of JavaScript to function. Specifically, they require <a href="https://jquery.com">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript plugins. Place the following <code class="highlighter-rouge"><script></code>s near the end of your pages, right before the closing <code class="highlighter-rouge"></body></code> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.</p>
|
|
|
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Core JS Files --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/jquery.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/popper.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/bootstrap.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/perfect-scrollbar.jquery.min.js"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Google Maps Plugin --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Chartist JS --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/chartjs.min.js"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Notifications Plugin --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/bootstrap-notify.js"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/black-dashboard-flask.js?v=1.0.0"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span></code></pre></figure>
|
|
|
|
<h3 id="fonts-and-icons">Fonts and Icons</h3>
|
|
|
|
<p>Copy-paste the stylesheet <code class="highlighter-rouge"><link></code> into your <code class="highlighter-rouge"><head></code> before all other stylesheets to load the Fonts and Icons.</p>
|
|
|
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Fonts and icons --></span>
|
|
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
|
|
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://use.fontawesome.com/releases/v5.0.6/css/all.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span></code></pre></figure>
|
|
|
|
<h2 id="starter-template">Starter template</h2>
|
|
|
|
<p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:</p>
|
|
|
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!doctype html></span>
|
|
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
|
<span class="nt"><head></span>
|
|
<span class="nt"><title></span>Hello, world!<span class="nt"></title></span>
|
|
<span class="c"><!-- Required meta tags --></span>
|
|
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
|
|
<span class="nt"><meta</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="nt">/></span>
|
|
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge,chrome=1"</span> <span class="nt">/></span>
|
|
<span class="c"><!-- Fonts and icons --></span>
|
|
<span class="c"><!-- Fonts and icons --></span>
|
|
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
|
|
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://use.fontawesome.com/releases/v5.0.6/css/all.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
|
|
|
|
<span class="c"><!-- Black Dashboard CSS --></span>
|
|
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"assets/css/black-dashboard-flask.css?v=1.0.0"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
|
<span class="nt"></head></span>
|
|
<span class="nt"><body></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"wrapper "</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span> <span class="na">data-color=</span><span class="s">"purple"</span> <span class="na">data-background-color=</span><span class="s">"white"</span><span class="nt">></span>
|
|
<span class="c"><!--
|
|
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
|
|
|
Tip 2: you can also add an image using data-image tag
|
|
--></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"logo"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.creative-tim.com"</span> <span class="na">class=</span><span class="s">"simple-text logo-mini"</span><span class="nt">></span>
|
|
CT
|
|
<span class="nt"></a></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.creative-tim.com"</span> <span class="na">class=</span><span class="s">"simple-text logo-normal"</span><span class="nt">></span>
|
|
Creative Tim
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar-wrapper"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active "</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#0"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-chart-pie-36"</span><span class="nt">></i></span>
|
|
<span class="nt"><p></span>Dashboard<span class="nt"></p></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
|
|
<span class="c"><!-- your sidebar here --></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"main-panel"</span><span class="nt">></span>
|
|
<span class="c"><!-- Navbar --></span>
|
|
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top "</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-wrapper"</span><span class="nt">></span>
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>Dashboard<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">aria-controls=</span><span class="s">"navigation-index"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle navigation<span class="nt"></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon icon-bar"</span><span class="nt">></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon icon-bar"</span><span class="nt">></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon icon-bar"</span><span class="nt">></span></span>
|
|
<span class="nt"></button></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse justify-content-end"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-bell-55"</span><span class="nt">></i></span> Notifications
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="c"><!-- your navbar here --></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></nav></span>
|
|
<span class="c"><!-- End Navbar --></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
|
|
<span class="c"><!-- your content here --></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
|
|
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"float-left"</span><span class="nt">></span>
|
|
<span class="nt"><ul></span>
|
|
<span class="nt"><li></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.creative-tim.com"</span><span class="nt">></span>
|
|
Creative Tim
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></nav></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"copyright float-right"</span><span class="nt">></span>
|
|
<span class="ni">&copy;</span>
|
|
<span class="nt"><script></span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getFullYear</span><span class="p">())</span>
|
|
<span class="nt"></script></span>, made with <span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-heart-2"</span><span class="nt">></i></span> by
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.creative-tim.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>Creative Tim<span class="nt"></a></span> for a better web.
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="c"><!-- your footer here --></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></footer></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="c"><!-- Core JS Files --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/jquery.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/popper.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/bootstrap.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/perfect-scrollbar.jquery.min.js"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Google Maps Plugin --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Chartist JS --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/chartjs.min.js"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Notifications Plugin --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/bootstrap-notify.js"</span><span class="nt">></script></span>
|
|
<span class="c"><!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc --></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/black-dashboard-flask.js?v=1.0.0"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></script></body></span>
|
|
<span class="nt"></html></span></code></pre></figure>
|
|
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Core JS Files -->
|
|
<script src="../../../assets/js/core/jquery.min.js" ></script>
|
|
<script src="../../../assets/js/core/popper.min.js" ></script>
|
|
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
|
|
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
|
|
|
|
|
|
|
|
|
|
<!-- Google Maps Plugin -->
|
|
|
|
<!-- Place this tag in your head or just before your close body tag. -->
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
|
|
|
|
|
<!-- Chart JS -->
|
|
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
|
|
|
|
<!-- Notifications Plugin -->
|
|
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
|
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
$().ready(function(){
|
|
$sidebar = $('.sidebar');
|
|
$navbar = $('.navbar');
|
|
$main_panel = $('.main-panel');
|
|
|
|
$full_page = $('.full-page');
|
|
|
|
$sidebar_responsive = $('body > .navbar-collapse');
|
|
sidebar_mini_active = true;
|
|
white_color = false;
|
|
|
|
window_width = $(window).width();
|
|
|
|
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
|
|
|
|
|
|
|
$('.fixed-plugin a').click(function(event){
|
|
if($(this).hasClass('switch-trigger')){
|
|
if(event.stopPropagation){
|
|
event.stopPropagation();
|
|
}
|
|
else if(window.event){
|
|
window.event.cancelBubble = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .background-color span').click(function(){
|
|
$(this).siblings().removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
var new_color = $(this).data('color');
|
|
|
|
if($sidebar.length != 0){
|
|
$sidebar.attr('data',new_color);
|
|
}
|
|
|
|
if($main_panel.length != 0){
|
|
$main_panel.attr('data',new_color);
|
|
}
|
|
|
|
if($full_page.length != 0){
|
|
$full_page.attr('filter-color',new_color);
|
|
}
|
|
|
|
if($sidebar_responsive.length != 0){
|
|
$sidebar_responsive.attr('data',new_color);
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
|
|
var $btn = $(this);
|
|
|
|
if(sidebar_mini_active == true){
|
|
$('body').removeClass('sidebar-mini');
|
|
sidebar_mini_active = false;
|
|
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
|
}else{
|
|
$('body').addClass('sidebar-mini');
|
|
sidebar_mini_active = true;
|
|
blackDashboard.showSidebarMessage('Sidebar mini activated...');
|
|
}
|
|
|
|
// we simulate the window Resize so the charts will get updated in realtime.
|
|
var simulateWindowResize = setInterval(function(){
|
|
window.dispatchEvent(new Event('resize'));
|
|
},180);
|
|
|
|
// we stop the simulation of Window Resize after the animations are completed
|
|
setTimeout(function(){
|
|
clearInterval(simulateWindowResize);
|
|
},1000);
|
|
});
|
|
|
|
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
|
|
var $btn = $(this);
|
|
|
|
if(white_color == true){
|
|
|
|
$('body').addClass('change-background');
|
|
setTimeout(function(){ $('body').removeClass('change-background');
|
|
$('body').removeClass('white-content'); }, 900);
|
|
white_color = false;
|
|
}else{
|
|
|
|
$('body').addClass('change-background');
|
|
setTimeout(function(){ $('body').removeClass('change-background');
|
|
$('body').addClass('white-content');}, 900);
|
|
|
|
white_color = true;
|
|
}
|
|
|
|
|
|
});
|
|
|
|
$('.light-badge').click(function(){
|
|
$('body').addClass('white-content');
|
|
});
|
|
|
|
$('.dark-badge').click(function(){
|
|
$('body').removeClass('white-content');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script src="../../../assets/demo/docs.min.js"></script>
|
|
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
|
|
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
|
|
<script src="../../../assets/demo/vendor/holder.min.js"></script>
|
|
<script src="../../../assets/demo/src/application.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
if($('#lineChartExample').length != 0){
|
|
demo.initDocChart();
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
Holder.addTheme('gray', {
|
|
bg: '#777',
|
|
fg: 'rgba(255,255,255,.75)',
|
|
font: 'Helvetica',
|
|
fontweight: 'normal'
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
|
|
window.TrackJS &&
|
|
TrackJS.install({
|
|
token: "ee6fab19c5a04ac1a32a645abde4613a",
|
|
application: "black-dashboard-free"
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|