Added Docs - Initial draft

This commit is contained in:
Adi Chirilov
2020-08-21 17:55:22 +03:00
parent 5405b9733d
commit ae44dcb68f
93 changed files with 56581 additions and 0 deletions

18437
assets/css/dashboard-free.css Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

24
assets/css/dashboard-free.min.css vendored Normal file

File diff suppressed because one or more lines are too long

540
assets/css/nucleo-icons.css Normal file
View File

@ -0,0 +1,540 @@
/* --------------------------------
Nucleo Outline Web Font - nucleoapp.com/
License - nucleoapp.com/license/
Created using IcoMoon - icomoon.io
-------------------------------- */
@font-face {
font-family: 'Nucleo';
src: url('../fonts/nucleo.eot');
src: url('../fonts/nucleo.eot') format('embedded-opentype'),
url('../fonts/nucleo.woff2') format('woff2'),
url('../fonts/nucleo.woff') format('woff'),
url('../fonts/nucleo.ttf') format('truetype'),
url('../fonts/nucleo.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.tim-icons {
display: inline-block;
font: normal normal normal 1em/1 'Nucleo';
vertical-align: middle;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-icon-detail{
text-align: center;
padding: 45px 0 30px;
border: 1px solid #e44cc4;
border-radius: .1875rem;
margin: 15px 0;
min-height: 168px;
}
.font-icon-detail i{
color: #FFFFFF;
font-size: 1.5em;
}
.font-icon-detail p{
color: #e44cc4 !important;
margin-top: 30px;
padding: 0 10px;
font-size: .7142em;
}
/*------------------------
change icon size
-------------------------*/
.tim-icons-sm {
font-size: 0.8em;
}
.tim-icons-lg {
font-size: 1.2em;
}
/* absolute units */
.tim-icons-16 {
font-size: 16px;
}
.tim-icons-32 {
font-size: 32px;
}
/*----------------------------------
add a square/circle background
-----------------------------------*/
.tim-icons-bg-square,
.tim-icons-bg-circle {
padding: 0.35em;
}
.tim-icons-bg-circle {
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
/*------------------------
spinning icons
-------------------------*/
.tim-icons-is-spinning {
-webkit-animation: tim-icons-spin 2s infinite linear;
-moz-animation: tim-icons-spin 2s infinite linear;
animation: tim-icons-spin 2s infinite linear;
}
@-webkit-keyframes tim-icons-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes tim-icons-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes tim-icons-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
/*------------------------
icons
-------------------------*/
.icon-alert-circle-exc::before {
content: "\ea02";
}
.icon-align-center::before {
content: "\ea03";
}
.icon-align-left-2::before {
content: "\ea04";
}
.icon-app::before {
content: "\ea05";
}
.icon-atom::before {
content: "\ea06";
}
.icon-attach-87::before {
content: "\ea07";
}
.icon-badge::before {
content: "\ea08";
}
.icon-bag-16::before {
content: "\ea09";
}
.icon-bank::before {
content: "\ea0a";
}
.icon-basket-simple::before {
content: "\ea0b";
}
.icon-bell-55::before {
content: "\ea0c";
}
.icon-bold::before {
content: "\ea0d";
}
.icon-book-bookmark::before {
content: "\ea0e";
}
.icon-bulb-63::before {
content: "\ea0f";
}
.icon-bullet-list-67::before {
content: "\ea10";
}
.icon-bus-front-12::before {
content: "\ea11";
}
.icon-button-pause::before {
content: "\ea12";
}
.icon-button-power::before {
content: "\ea13";
}
.icon-calendar-60::before {
content: "\ea14";
}
.icon-camera-18::before {
content: "\ea15";
}
.icon-caps-small::before {
content: "\ea16";
}
.icon-cart::before {
content: "\ea17";
}
.icon-chart-bar-32::before {
content: "\ea18";
}
.icon-chart-pie-36::before {
content: "\ea19";
}
.icon-chat-33::before {
content: "\ea1a";
}
.icon-check-2::before {
content: "\ea1b";
}
.icon-cloud-download-93::before {
content: "\ea1c";
}
.icon-cloud-upload-94::before {
content: "\ea1d";
}
.icon-coins::before {
content: "\ea1e";
}
.icon-compass-05::before {
content: "\ea1f";
}
.icon-controller::before {
content: "\ea20";
}
.icon-credit-card::before {
content: "\ea21";
}
.icon-delivery-fast::before {
content: "\ea22";
}
.icon-double-left::before {
content: "\ea23";
}
.icon-double-right::before {
content: "\ea24";
}
.icon-email-85::before {
content: "\ea25";
}
.icon-gift-2::before {
content: "\ea26";
}
.icon-globe-2::before {
content: "\ea27";
}
.icon-headphones::before {
content: "\ea28";
}
.icon-heart-2::before {
content: "\ea29";
}
.icon-html5::before {
content: "\ea2a";
}
.icon-image-02::before {
content: "\ea2b";
}
.icon-istanbul::before {
content: "\ea2c";
}
.icon-key-25::before {
content: "\ea2d";
}
.icon-laptop::before {
content: "\ea2e";
}
.icon-light-3::before {
content: "\ea2f";
}
.icon-link-72::before {
content: "\ea30";
}
.icon-lock-circle::before {
content: "\ea31";
}
.icon-map-big::before {
content: "\ea32";
}
.icon-minimal-down::before {
content: "\ea33";
}
.icon-minimal-left::before {
content: "\ea34";
}
.icon-minimal-right::before {
content: "\ea35";
}
.icon-minimal-up::before {
content: "\ea36";
}
.icon-mobile::before {
content: "\ea37";
}
.icon-molecule-40::before {
content: "\ea38";
}
.icon-money-coins::before {
content: "\ea39";
}
.icon-notes::before {
content: "\ea3a";
}
.icon-palette::before {
content: "\ea3b";
}
.icon-paper::before {
content: "\ea3c";
}
.icon-pencil::before {
content: "\ea3d";
}
.icon-pin::before {
content: "\ea3e";
}
.icon-planet::before {
content: "\ea3f";
}
.icon-puzzle-10::before {
content: "\ea40";
}
.icon-satisfied::before {
content: "\ea41";
}
.icon-scissors::before {
content: "\ea42";
}
.icon-send::before {
content: "\ea43";
}
.icon-settings-gear-63::before {
content: "\ea44";
}
.icon-settings::before {
content: "\ea45";
}
.icon-simple-add::before {
content: "\ea46";
}
.icon-simple-delete::before {
content: "\ea47";
}
.icon-simple-remove::before {
content: "\ea48";
}
.icon-single-02::before {
content: "\ea49";
}
.icon-single-copy-04::before {
content: "\ea4a";
}
.icon-sound-wave::before {
content: "\ea4b";
}
.icon-spaceship::before {
content: "\ea4c";
}
.icon-square-pin::before {
content: "\ea4d";
}
.icon-support-17::before {
content: "\ea4e";
}
.icon-tablet-2::before {
content: "\ea4f";
}
.icon-tag::before {
content: "\ea50";
}
.icon-tap-02::before {
content: "\ea51";
}
.icon-tie-bow::before {
content: "\ea52";
}
.icon-time-alarm::before {
content: "\ea53";
}
.icon-trash-simple::before {
content: "\ea54";
}
.icon-triangle-right-17::before {
content: "\ea55";
}
.icon-trophy::before {
content: "\ea56";
}
.icon-tv-2::before {
content: "\ea57";
}
.icon-upload::before {
content: "\ea58";
}
.icon-user-run::before {
content: "\ea59";
}
.icon-vector::before {
content: "\ea5a";
}
.icon-video-66::before {
content: "\ea5b";
}
.icon-volume-98::before {
content: "\ea5c";
}
.icon-wallet-43::before {
content: "\ea5d";
}
.icon-watch-time::before {
content: "\ea5e";
}
.icon-wifi::before {
content: "\ea5f";
}
.icon-world::before {
content: "\ea60";
}
.icon-zoom-split::before {
content: "\ea61";
}
.icon-refresh-01::before {
content: "\ea62";
}
.icon-refresh-02::before {
content: "\ea63";
}
.icon-shape-star::before {
content: "\ea64";
}
.icon-components::before {
content: "\ea65";
}

View File

@ -0,0 +1,59 @@
.tim-row{
margin-bottom: 20px;
}
.tim-white-buttons {
background-color: #777777;
}
.typography-line{
padding-left: 25%;
margin-bottom: 35px;
position: relative;
display: block;
width: 100%;
}
.typography-line span{
bottom: 10px;
color: #c0c1c2;
display: block;
font-weight: 400;
font-size: 13px;
line-height: 13px;
left: 0;
position: absolute;
width: 260px;
text-transform: none;
}
.tim-row{
padding-top: 60px;
}
.tim-row h3{
margin-top: 0;
}
.offline-doc .page-header{
display: flex;
align-items: center;
}
.offline-doc .footer{
position: absolute;
width: 100%;
background: transparent;
bottom: 0;
color: #fff;
z-index: 1;
}
@media all and (min-width: 992px) {
.sidebar .nav>li.active-pro {
position: absolute;
width: 100%;
bottom: 10px;
}
}
.card.card-upgrade .card-category{
max-width: 530px;
margin: 0 auto;
}

View File

@ -0,0 +1,792 @@
type = ['primary','info','success','warning','danger'];
demo = {
initPickColor: function(){
$('.pick-class-label').click(function(){
var new_class = $(this).attr('new-class');
var old_class = $('#display-buttons').attr('data-class');
var display_div = $('#display-buttons');
if(display_div.length) {
var display_buttons = display_div.find('.btn');
display_buttons.removeClass(old_class);
display_buttons.addClass(new_class);
display_div.attr('data-class', new_class);
}
});
},
initDocChart: function(){
chartColor = "#FFFFFF";
// General configuration for the charts with Line gradientStroke
gradientChartOptionsConfiguration = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
mode:"nearest",
intersect: 0,
position:"nearest",
xPadding:10,
yPadding:10,
caretPadding:10
},
responsive: true,
scales: {
yAxes: [{
display:0,
gridLines:0,
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}],
xAxes: [{
display:0,
gridLines:0,
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}]
},
layout:{
padding:{left:0,right:0,top:15,bottom:15}
}
};
ctx = document.getElementById('lineChartExample').getContext("2d");
gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#80b6f4');
gradientStroke.addColorStop(1, chartColor);
gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill.addColorStop(1, "rgba(249, 99, 59, 0.40)");
myChart = new Chart(ctx, {
type: 'line',
responsive: true,
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Active Users",
borderColor: "#f96332",
pointBorderColor: "#FFF",
pointBackgroundColor: "#f96332",
pointBorderWidth: 2,
pointHoverRadius: 4,
pointHoverBorderWidth: 1,
pointRadius: 4,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 630]
}]
},
options: gradientChartOptionsConfiguration
});
},
initDashboardPageCharts: function(){
gradientChartOptionsConfigurationWithTooltipBlue = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#2380f7"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#2380f7"
}
}]
}
};
gradientChartOptionsConfigurationWithTooltipPurple = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#9a9a9a"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}]
}
};
gradientChartOptionsConfigurationWithTooltipOrange = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin:50,
suggestedMax: 110,
padding: 20,
fontColor: "#ff8a76"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(220,53,69,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#ff8a76"
}
}]
}
};
gradientChartOptionsConfigurationWithTooltipGreen = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 50,
suggestedMax: 125,
padding: 20,
fontColor: "#9e9e9e"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(0,242,195,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9e9e9e"
}
}]
}
};
gradientBarChartConfiguration = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 120,
padding: 20,
fontColor: "#9e9e9e"
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9e9e9e"
}
}]
}
};
var ctx = document.getElementById("chartLinePurple").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0,230,0,50);
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
var data = {
labels: ['JUL','AUG','SEP','OCT','NOV','DEC'],
datasets: [{
label: "Data",
fill: true,
backgroundColor: gradientStroke,
borderColor: '#d048b6',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d048b6',
pointBorderColor:'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d048b6',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [ 80, 100, 70, 80, 120, 80],
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: gradientChartOptionsConfigurationWithTooltipPurple
});
var ctxGreen = document.getElementById("chartLineGreen").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0,230,0,50);
gradientStroke.addColorStop(1, 'rgba(66,134,121,0.15)');
gradientStroke.addColorStop(0.4, 'rgba(66,134,121,0.0)'); //green colors
gradientStroke.addColorStop(0, 'rgba(66,134,121,0)'); //green colors
var data = {
labels: ['JUL','AUG','SEP','OCT','NOV'],
datasets: [{
label: "My First dataset",
fill: true,
backgroundColor: gradientStroke,
borderColor: '#00d6b4',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#00d6b4',
pointBorderColor:'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#00d6b4',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [ 90, 27, 60, 12, 80],
}]
};
var myChart = new Chart(ctxGreen, {
type: 'line',
data: data,
options: gradientChartOptionsConfigurationWithTooltipGreen
});
var chart_labels = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
var chart_data = [ 100, 70, 90, 70, 85, 60, 75, 60, 90, 80,110, 100];
var ctx = document.getElementById("chartBig1").getContext('2d');
var gradientStroke = ctx.createLinearGradient(0,230,0,50);
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
var config = {
type: 'line',
data: {
labels: chart_labels,
datasets: [{
label: "My First dataset",
fill: true,
backgroundColor: gradientStroke,
borderColor: '#d346b1',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d346b1',
pointBorderColor:'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d346b1',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: chart_data,
}]
},
options: gradientChartOptionsConfigurationWithTooltipPurple
};
var myChartData = new Chart(ctx, config);
$("#0").click(function() {
var data = myChartData.config.data;
data.datasets[0].data = chart_data;
data.labels = chart_labels;
myChartData.update();
});
$("#1").click(function() {
var chart_data = [ 80, 120, 105, 110, 95, 105, 90, 100, 80, 95,70, 120];
var data = myChartData.config.data;
data.datasets[0].data = chart_data;
data.labels = chart_labels;
myChartData.update();
});
$("#2").click(function() {
var chart_data = [ 60, 80, 65, 130, 80, 105, 90, 130, 70, 115,60, 130];
var data = myChartData.config.data;
data.datasets[0].data = chart_data;
data.labels = chart_labels;
myChartData.update();
});
var ctx = document.getElementById("CountryChart").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0,230,0,50);
gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
gradientStroke.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
var myChart = new Chart(ctx, {
type: 'bar',
responsive: true,
legend: {
display: false
},
data: {
labels: ['USA','GER','AUS','UK','RO','BR'],
datasets: [{
label: "Countries",
fill: true,
backgroundColor: gradientStroke,
hoverBackgroundColor: gradientStroke,
borderColor: '#1f8ef1',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
data: [ 53, 20, 10, 80, 100, 45],
}]
},
options: gradientBarChartConfiguration
});
},
initGoogleMaps: function(){
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8ec3b9"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1a3646"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#4b6878"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#64779e"
}
]
},
{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#4b6878"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#334e87"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#023e58"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#283d6a"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6f9ba5"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#023e58"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3C7680"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#304a7d"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#98a5be"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#2c6675"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#9d2a80"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#9d2a80"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#b0d5ce"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#023e58"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#98a5be"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#283d6a"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#3a4762"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#0e1626"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#4e6d70"
}
]
}
]
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
},
showNotification: function(from, align){
color = Math.floor((Math.random() * 4) + 1);
$.notify({
icon: "tim-icons icon-bell-55",
message: "Welcome to <b>Black Dashboard</b> - a beautiful freebie for every web developer."
},{
type: type[color],
timer: 8000,
placement: {
from: from,
align: align
}
});
}
};

1418
assets/demo/docs.css Normal file

File diff suppressed because it is too large Load Diff

BIN
assets/demo/docs.min.css vendored Normal file

Binary file not shown.

19
assets/demo/docs.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,585 @@
/*!
* Sharrre.com - Make your sharing widget!
* Version: beta 1.3.5
* Author: Julien Hany
* License: MIT http://en.wikipedia.org/wiki/MIT_License or GPLv2 http://en.wikipedia.org/wiki/GNU_General_Public_License
*/
;(function ( $, window, document, undefined ) {
/* Defaults
================================================== */
var pluginName = 'sharrre',
defaults = {
className: 'sharrre',
share: {
googlePlus: false,
facebook: false,
twitter: false,
digg: false,
delicious: false,
stumbleupon: false,
linkedin: false,
pinterest: false
},
shareTotal: 0,
template: '',
title: '',
url: document.location.href,
text: document.title,
urlCurl: 'sharrre.php', //PHP script for google plus...
count: {}, //counter by social network
total: 0, //total of sharing
shorterTotal: true, //show total by k or M when number is to big
enableHover: true, //disable if you want to personalize hover event with callback
enableCounter: true, //disable if you just want use buttons
enableTracking: false, //tracking with google analitycs
hover: function(){}, //personalize hover event with this callback function
hide: function(){}, //personalize hide event with this callback function
click: function(){}, //personalize click event with this callback function
render: function(){}, //personalize render event with this callback function
buttons: { //settings for buttons
googlePlus : { //http://www.google.com/webmasters/+1/button/
url: '', //if you need to personnalize button url
urlCount: false, //if you want to use personnalize button url on global counter
size: 'medium',
lang: 'en-US',
annotation: ''
},
facebook: { //http://developers.facebook.com/docs/reference/plugins/like/
url: '', //if you need to personalize url button
urlCount: false, //if you want to use personnalize button url on global counter
action: 'like',
layout: 'button_count',
width: '',
send: 'false',
faces: 'false',
colorscheme: '',
font: '',
lang: 'en_US'
},
twitter: { //http://twitter.com/about/resources/tweetbutton
url: '', //if you need to personalize url button
urlCount: false, //if you want to use personnalize button url on global counter
count: 'horizontal',
hashtags: '',
via: '',
related: '',
lang: 'en'
},
digg: { //http://about.digg.com/downloads/button/smart
url: '', //if you need to personalize url button
urlCount: false, //if you want to use personnalize button url on global counter
type: 'DiggCompact'
},
delicious: {
url: '', //if you need to personalize url button
urlCount: false, //if you want to use personnalize button url on global counter
size: 'medium' //medium or tall
},
stumbleupon: { //http://www.stumbleupon.com/badges/
url: '', //if you need to personalize url button
urlCount: false, //if you want to use personnalize button url on global counter
layout: '1'
},
linkedin: { //http://developer.linkedin.com/plugins/share-button
url: '', //if you need to personalize url button
urlCount: false, //if you want to use personnalize button url on global counter
counter: ''
},
pinterest: { //http://pinterest.com/about/goodies/
url: '', //if you need to personalize url button
media: '',
description: '',
layout: 'horizontal'
}
}
},
/* Json URL to get count number
================================================== */
urlJson = {
googlePlus: "",
//new FQL method by Sire
facebook: "https://graph.facebook.com/fql?q=SELECT%20url,%20normalized_url,%20share_count,%20like_count,%20comment_count,%20total_count,commentsbox_count,%20comments_fbid,%20click_count%20FROM%20link_stat%20WHERE%20url=%27{url}%27&callback=?",
//old method facebook: "http://graph.facebook.com/?id={url}&callback=?",
//facebook : "http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls={url}&format=json"
twitter: "http://cdn.api.twitter.com/1/urls/count.json?url={url}&callback=?",
digg: "http://services.digg.com/2.0/story.getInfo?links={url}&type=javascript&callback=?",
delicious: 'http://feeds.delicious.com/v2/json/urlinfo/data?url={url}&callback=?',
//stumbleupon: "http://www.stumbleupon.com/services/1.01/badge.getinfo?url={url}&format=jsonp&callback=?",
stumbleupon: "",
linkedin: "http://www.linkedin.com/countserv/count/share?format=jsonp&url={url}&callback=?",
pinterest: "http://api.pinterest.com/v1/urls/count.json?url={url}&callback=?"
},
/* Load share buttons asynchronously
================================================== */
loadButton = {
googlePlus : function(self){
var sett = self.options.buttons.googlePlus;
//$(self.element).find('.buttons').append('<div class="button googleplus"><g:plusone size="'+self.options.buttons.googlePlus.size+'" href="'+self.options.url+'"></g:plusone></div>');
$(self.element).find('.buttons').append('<div class="button googleplus"><div class="g-plusone" data-size="'+sett.size+'" data-href="'+(sett.url !== '' ? sett.url : self.options.url)+'" data-annotation="'+sett.annotation+'"></div></div>');
window.___gcfg = {
lang: self.options.buttons.googlePlus.lang
};
var loading = 0;
if(typeof gapi === 'undefined' && loading == 0){
loading = 1;
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '//apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
}
else{
gapi.plusone.go();
}
},
facebook : function(self){
var sett = self.options.buttons.facebook;
$(self.element).find('.buttons').append('<div class="button facebook"><div id="fb-root"></div><div class="fb-like" data-href="'+(sett.url !== '' ? sett.url : self.options.url)+'" data-send="'+sett.send+'" data-layout="'+sett.layout+'" data-width="'+sett.width+'" data-show-faces="'+sett.faces+'" data-action="'+sett.action+'" data-colorscheme="'+sett.colorscheme+'" data-font="'+sett.font+'" data-via="'+sett.via+'"></div></div>');
var loading = 0;
if(typeof FB === 'undefined' && loading == 0){
loading = 1;
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/'+sett.lang+'/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
else{
FB.XFBML.parse();
}
},
twitter : function(self){
var sett = self.options.buttons.twitter;
$(self.element).find('.buttons').append('<div class="button twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="'+(sett.url !== '' ? sett.url : self.options.url)+'" data-count="'+sett.count+'" data-text="'+self.options.text+'" data-via="'+sett.via+'" data-hashtags="'+sett.hashtags+'" data-related="'+sett.related+'" data-lang="'+sett.lang+'">Tweet</a></div>');
var loading = 0;
if(typeof twttr === 'undefined' && loading == 0){
loading = 1;
(function() {
var twitterScriptTag = document.createElement('script');
twitterScriptTag.type = 'text/javascript';
twitterScriptTag.async = true;
twitterScriptTag.src = '//platform.twitter.com/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(twitterScriptTag, s);
})();
}
else{
$.ajax({ url: '//platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //http://stackoverflow.com/q/6536108
}
},
digg : function(self){
var sett = self.options.buttons.digg;
$(self.element).find('.buttons').append('<div class="button digg"><a class="DiggThisButton '+sett.type+'" rel="nofollow external" href="http://digg.com/submit?url='+encodeURIComponent((sett.url !== '' ? sett.url : self.options.url))+'"></a></div>');
var loading = 0;
if(typeof __DBW === 'undefined' && loading == 0){
loading = 1;
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = '//widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
}
},
delicious : function(self){
if(self.options.buttons.delicious.size == 'tall'){//tall
var css = 'width:50px;',
cssCount = 'height:35px;width:50px;font-size:15px;line-height:35px;',
cssShare = 'height:18px;line-height:18px;margin-top:3px;';
}
else{//medium
var css = 'width:93px;',
cssCount = 'float:right;padding:0 3px;height:20px;width:26px;line-height:20px;',
cssShare = 'float:left;height:20px;line-height:20px;';
}
var count = self.shorterTotal(self.options.count.delicious);
if(typeof count === "undefined"){
count = 0;
}
$(self.element).find('.buttons').append(
'<div class="button delicious"><div style="'+css+'font:12px Arial,Helvetica,sans-serif;cursor:pointer;color:#666666;display:inline-block;float:none;height:20px;line-height:normal;margin:0;padding:0;text-indent:0;vertical-align:baseline;">'+
'<div style="'+cssCount+'background-color:#fff;margin-bottom:5px;overflow:hidden;text-align:center;border:1px solid #ccc;border-radius:3px;">'+count+'</div>'+
'<div style="'+cssShare+'display:block;padding:0;text-align:center;text-decoration:none;width:50px;background-color:#7EACEE;border:1px solid #40679C;border-radius:3px;color:#fff;">'+
'<img src="http://www.delicious.com/static/img/delicious.small.gif" height="10" width="10" alt="Delicious" /> Add</div></div></div>');
$(self.element).find('.delicious').on('click', function(){
self.openPopup('delicious');
});
},
stumbleupon : function(self){
var sett = self.options.buttons.stumbleupon;
$(self.element).find('.buttons').append('<div class="button stumbleupon"><su:badge layout="'+sett.layout+'" location="'+(sett.url !== '' ? sett.url : self.options.url)+'"></su:badge></div>');
var loading = 0;
if(typeof STMBLPN === 'undefined' && loading == 0){
loading = 1;
(function() {
var li = document.createElement('script');li.type = 'text/javascript';li.async = true;
li.src = '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(li, s);
})();
s = window.setTimeout(function(){
if(typeof STMBLPN !== 'undefined'){
STMBLPN.processWidgets();
clearInterval(s);
}
},500);
}
else{
STMBLPN.processWidgets();
}
},
linkedin : function(self){
var sett = self.options.buttons.linkedin;
$(self.element).find('.buttons').append('<div class="button linkedin"><script type="in/share" data-url="'+(sett.url !== '' ? sett.url : self.options.url)+'" data-counter="'+sett.counter+'"></script></div>');
var loading = 0;
if(typeof window.IN === 'undefined' && loading == 0){
loading = 1;
(function() {
var li = document.createElement('script');li.type = 'text/javascript';li.async = true;
li.src = '//platform.linkedin.com/in.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(li, s);
})();
}
else{
window.IN.init();
}
},
pinterest : function(self){
var sett = self.options.buttons.pinterest;
$(self.element).find('.buttons').append('<div class="button pinterest"><a href="http://pinterest.com/pin/create/button/?url='+(sett.url !== '' ? sett.url : self.options.url)+'&media='+sett.media+'&description='+sett.description+'" class="pin-it-button" count-layout="'+sett.layout+'">Pin It</a></div>');
(function() {
var li = document.createElement('script');li.type = 'text/javascript';li.async = true;
li.src = '//assets.pinterest.com/js/pinit.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(li, s);
})();
}
},
/* Tracking for Google Analytics
================================================== */
tracking = {
googlePlus: function(){},
facebook: function(){
//console.log('facebook');
fb = window.setInterval(function(){
if (typeof FB !== 'undefined') {
FB.Event.subscribe('edge.create', function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});
FB.Event.subscribe('edge.remove', function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});
FB.Event.subscribe('message.send', function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});
//console.log('ok');
clearInterval(fb);
}
},1000);
},
twitter: function(){
//console.log('twitter');
tw = window.setInterval(function(){
if (typeof twttr !== 'undefined') {
twttr.events.bind('tweet', function(event) {
if (event) {
_gaq.push(['_trackSocial', 'twitter', 'tweet']);
}
});
//console.log('ok');
clearInterval(tw);
}
},1000);
},
digg: function(){
//if somenone find a solution, mail me !
/*$(this.element).find('.digg').on('click', function(){
_gaq.push(['_trackSocial', 'digg', 'add']);
});*/
},
delicious: function(){},
stumbleupon: function(){},
linkedin: function(){
function LinkedInShare() {
_gaq.push(['_trackSocial', 'linkedin', 'share']);
}
},
pinterest: function(){
//if somenone find a solution, mail me !
}
},
/* Popup for each social network
================================================== */
popup = {
googlePlus: function(opt){
window.open("https://plus.google.com/share?hl="+opt.buttons.googlePlus.lang+"&url="+encodeURIComponent((opt.buttons.googlePlus.url !== '' ? opt.buttons.googlePlus.url : opt.url)), "", "toolbar=0, status=0, width=900, height=500");
},
facebook: function(opt){
window.open("http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&t="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");
},
twitter: function(opt){
window.open("https://twitter.com/intent/tweet?text="+encodeURIComponent(opt.text)+"&url="+encodeURIComponent((opt.buttons.twitter.url !== '' ? opt.buttons.twitter.url : opt.url))+(opt.buttons.twitter.via !== '' ? '&via='+opt.buttons.twitter.via : ''), "", "toolbar=0, status=0, width=650, height=360");
},
digg: function(opt){
window.open("http://digg.com/tools/diggthis/submit?url="+encodeURIComponent((opt.buttons.digg.url !== '' ? opt.buttons.digg.url : opt.url))+"&title="+opt.text+"&related=true&style=true", "", "toolbar=0, status=0, width=650, height=360");
},
delicious: function(opt){
window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent((opt.buttons.delicious.url !== '' ? opt.buttons.delicious.url : opt.url))+'&title='+opt.text, 'delicious', 'toolbar=no,width=550,height=550');
},
stumbleupon: function(opt){
window.open('http://www.stumbleupon.com/badge/?url='+encodeURIComponent((opt.buttons.stumbleupon.url !== '' ? opt.buttons.stumbleupon.url : opt.url)), 'stumbleupon', 'toolbar=no,width=550,height=550');
},
linkedin: function(opt){
window.open('https://www.linkedin.com/cws/share?url='+encodeURIComponent((opt.buttons.linkedin.url !== '' ? opt.buttons.linkedin.url : opt.url))+'&token=&isFramed=true', 'linkedin', 'toolbar=no,width=550,height=550');
},
pinterest: function(opt){
window.open('http://pinterest.com/pin/create/button/?url='+encodeURIComponent((opt.buttons.pinterest.url !== '' ? opt.buttons.pinterest.url : opt.url))+'&media='+encodeURIComponent(opt.buttons.pinterest.media)+'&description='+opt.buttons.pinterest.description, 'pinterest', 'toolbar=no,width=700,height=300');
}
};
/* Plugin constructor
================================================== */
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( true, {}, defaults, options);
this.options.share = options.share; //simple solution to allow order of buttons
this._defaults = defaults;
this._name = pluginName;
this.init();
};
/* Initialization method
================================================== */
Plugin.prototype.init = function () {
var self = this;
if(this.options.urlCurl !== ''){
urlJson.googlePlus = this.options.urlCurl + '?url={url}&type=googlePlus'; // PHP script for GooglePlus...
urlJson.stumbleupon = this.options.urlCurl + '?url={url}&type=stumbleupon'; // PHP script for Stumbleupon...
}
$(this.element).addClass(this.options.className); //add class
//HTML5 Custom data
if(typeof $(this.element).data('title') !== 'undefined'){
this.options.title = $(this.element).attr('data-title');
}
if(typeof $(this.element).data('url') !== 'undefined'){
this.options.url = $(this.element).data('url');
}
if(typeof $(this.element).data('text') !== 'undefined'){
this.options.text = $(this.element).data('text');
}
//how many social website have been selected
$.each(this.options.share, function(name, val) {
if(val === true){
self.options.shareTotal ++;
}
});
if(self.options.enableCounter === true){ //if for some reason you don't need counter
//get count of social share that have been selected
$.each(this.options.share, function(name, val) {
if(val === true){
//self.getSocialJson(name);
try {
self.getSocialJson(name);
} catch(e){
}
}
});
}
else if(self.options.template !== ''){ //for personalized button (with template)
this.options.render(this, this.options);
}
else{ // if you want to use official button like example 3 or 5
this.loadButtons();
}
//add hover event
$(this.element).hover(function(){
//load social button if enable and 1 time
if($(this).find('.buttons').length === 0 && self.options.enableHover === true){
self.loadButtons();
}
self.options.hover(self, self.options);
}, function(){
self.options.hide(self, self.options);
});
//click event
$(this.element).click(function(){
self.options.click(self, self.options);
return false;
});
};
/* loadButtons methode
================================================== */
Plugin.prototype.loadButtons = function () {
var self = this;
$(this.element).append('<div class="buttons"></div>');
$.each(self.options.share, function(name, val) {
if(val == true){
loadButton[name](self);
if(self.options.enableTracking === true){ //add tracking
tracking[name]();
}
}
});
};
/* getSocialJson methode
================================================== */
Plugin.prototype.getSocialJson = function (name) {
var self = this,
count = 0,
url = urlJson[name].replace('{url}', encodeURIComponent(this.options.url));
if(this.options.buttons[name].urlCount === true && this.options.buttons[name].url !== ''){
url = urlJson[name].replace('{url}', this.options.buttons[name].url);
}
//console.log('name : ' + name + ' - url : '+url); //debug
if(url != '' && self.options.urlCurl !== ''){ //urlCurl = '' if you don't want to used PHP script but used social button
$.getJSON(url, function(json){
if(typeof json.count !== "undefined"){ //GooglePlus, Stumbleupon, Twitter, Pinterest and Digg
var temp = json.count + '';
temp = temp.replace('\u00c2\u00a0', ''); //remove google plus special chars
count += parseInt(temp, 10);
}
//get the FB total count (shares, likes and more)
else if(json.data && json.data.length > 0 && typeof json.data[0].total_count !== "undefined"){ //Facebook total count
count += parseInt(json.data[0].total_count, 10);
}
else if(typeof json[0] !== "undefined"){ //Delicious
count += parseInt(json[0].total_posts, 10);
}
else if(typeof json[0] !== "undefined"){ //Stumbleupon
}
self.options.count[name] = count;
self.options.total += count;
self.renderer();
self.rendererPerso();
//console.log(json); //debug
})
.error(function() {
self.options.count[name] = 0;
self.rendererPerso();
});
}
else{
self.renderer();
self.options.count[name] = 0;
self.rendererPerso();
}
};
/* launch render methode
================================================== */
Plugin.prototype.rendererPerso = function () {
//check if this is the last social website to launch render
var shareCount = 0;
for (e in this.options.count) { shareCount++; }
if(shareCount === this.options.shareTotal){
this.options.render(this, this.options);
}
};
/* render methode
================================================== */
Plugin.prototype.renderer = function () {
var total = this.options.total,
template = this.options.template;
if(this.options.shorterTotal === true){ //format number like 1.2k or 5M
total = this.shorterTotal(total);
}
if(template !== ''){ //if there is a template
template = template.replace('{total}', total);
$(this.element).html(template);
}
else{ //template by defaults
$(this.element).html(
'<div class="box"><a class="count" href="#">' + total + '</a>' +
(this.options.title !== '' ? '<a class="share" href="#">' + this.options.title + '</a>' : '') +
'</div>'
);
}
};
/* format total numbers like 1.2k or 5M
================================================== */
Plugin.prototype.shorterTotal = function (num) {
if (num >= 1e6){
num = (num / 1e6).toFixed(2) + "M"
} else if (num >= 1e3){
num = (num / 1e3).toFixed(1) + "k"
}
return num;
};
/* Methode for open popup
================================================== */
Plugin.prototype.openPopup = function (site) {
popup[site](this.options); //open
if(this.options.enableTracking === true){ //tracking!
var tracking = {
googlePlus: {site: 'Google', action: '+1'},
facebook: {site: 'facebook', action: 'like'},
twitter: {site: 'twitter', action: 'tweet'},
digg: {site: 'digg', action: 'add'},
delicious: {site: 'delicious', action: 'add'},
stumbleupon: {site: 'stumbleupon', action: 'add'},
linkedin: {site: 'linkedin', action: 'share'},
pinterest: {site: 'pinterest', action: 'pin'}
};
_gaq.push(['_trackSocial', tracking[site].site, tracking[site].action]);
}
};
/* Methode for add +1 to a counter
================================================== */
Plugin.prototype.simulateClick = function () {
var html = $(this.element).html();
$(this.element).html(html.replace(this.options.total, this.options.total+1));
};
/* Methode for add +1 to a counter
================================================== */
Plugin.prototype.update = function (url, text) {
if(url !== ''){
this.options.url = url;
}
if(text !== ''){
this.options.text = text;
}
};
/* A really lightweight plugin wrapper around the constructor, preventing against multiple instantiations
================================================== */
$.fn[pluginName] = function ( options ) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}
});
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
return this.each(function () {
var instance = $.data(this, 'plugin_' + pluginName);
if (instance instanceof Plugin && typeof instance[options] === 'function') {
instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
}
});
}
};
})(jQuery, window, document);

View File

@ -0,0 +1,119 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/.
*/
/* global Clipboard, anchors */
(function($) {
'use strict';
$(function() {
// Indeterminate checkbox example
$('.bd-example-indeterminate [type="checkbox"]').prop(
'indeterminate',
true
);
// Tooltip and popover demos
$('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body',
});
$('[data-toggle="popover"]').popover();
// Demos within modals
$('.tooltip-test').tooltip();
$('.popover-test').popover();
// Indeterminate checkbox example
$('.bd-example-indeterminate [type="checkbox"]').prop(
'indeterminate',
true
);
// Disable empty links in docs examples
$('.bd-content [href="#"]').click(function(e) {
e.preventDefault();
});
// Modal relatedTarget demo
$('#exampleModal').on('show.bs.modal', function(event) {
var $button = $(event.relatedTarget); // Button that triggered the modal
var recipient = $button.data('whatever'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var $modal = $(this);
$modal.find('.modal-title').text('New message to ' + recipient);
$modal.find('.modal-body input').val(recipient);
});
// Activate animated progress bar
$('.bd-toggle-animated-progress').on('click', function() {
$(this)
.siblings('.progress')
.find('.progress-bar-striped')
.toggleClass('progress-bar-animated');
});
// Insert copy to clipboard button before .highlight
$('.highlight').each(function() {
var btnHtml =
'<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>';
$(this).before(btnHtml);
$('.btn-clipboard').tooltip().on('mouseleave', function() {
// explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away
$(this).tooltip('hide');
});
});
var clipboard = new Clipboard('.btn-clipboard', {
target: function(trigger) {
return trigger.parentNode.nextElementSibling;
},
});
clipboard.on('success', function(e) {
$(e.trigger)
.attr('title', 'Copied!')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle');
e.clearSelection();
});
clipboard.on('error', function(e) {
var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-';
var fallbackMsg = 'Press ' + modifierKey + 'C to copy';
$(e.trigger)
.attr('title', fallbackMsg)
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle');
});
anchors.options = {
icon: '#',
};
anchors.add(
'.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'
);
$(
'.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'
).wrapInner('<div></div>');
});
})(jQuery);

6
assets/demo/vendor/anchor.min.js vendored Normal file

File diff suppressed because one or more lines are too long

7
assets/demo/vendor/clipboard.min.js vendored Normal file

File diff suppressed because one or more lines are too long

13
assets/demo/vendor/holder.min.js vendored Normal file

File diff suppressed because one or more lines are too long

21
assets/demo/vendor/split.min.js vendored Normal file
View File

@ -0,0 +1,21 @@
var _gaq=_gaq||[]
Split=(function(){var config={},defaults={cookieName:'abTest',cookieAge:30,customVariableName:'AB Test alternative',customVariableIndex:1}
function createCookie(name,value,days){if(days){var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires="; expires="+date.toGMTString();}
else var expires="";document.cookie=name+"="+value+expires+"; path=/";}
function readCookie(name){var nameEQ=name+"=";var ca=document.cookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length);}
return null;}
function eraseCookie(name){createCookie(name,"",-1);}
function getKeys(obj)
{var keys=[];for(var i in obj)if(obj.hasOwnProperty(i))
{keys.push(i);}
return keys;}
function init(){alternatives=arguments[0]
options=arguments[1]
keys=getKeys(alternatives);config={}
if(options!=undefined){for(k in defaults){config[k]=(options[k]!=undefined)?options[k]:defaults[k];}}else{config=defaults;}
var alternative=readCookie(config.cookieName)
if(alternative){}else{alternative=keys[Math.floor(Math.random()*keys.length)]
createCookie(config.cookieName,alternative,config.cookieAge)}
_gaq.push(['_setCustomVar',config.customVariableIndex,config.customVariableName,alternative,1]);alternatives[alternative]();}
return{setup:function(args,options){init(args,options)}}})();

BIN
assets/fonts/nucleo.eot Normal file

Binary file not shown.

BIN
assets/fonts/nucleo.ttf Normal file

Binary file not shown.

BIN
assets/fonts/nucleo.woff Normal file

Binary file not shown.

BIN
assets/fonts/nucleo.woff2 Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

6
assets/js/core/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

4
assets/js/core/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

4
assets/js/core/popper.min.js vendored Normal file

File diff suppressed because one or more lines are too long

252
assets/js/dashboard-free.js Normal file
View File

@ -0,0 +1,252 @@
/*!
=========================================================
* Black Dashboard Flask - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/black-dashboard
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/black-dashboard/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
var transparent = true;
var transparentDemo = true;
var fixedTop = false;
var navbar_initialized = false;
var backgroundOrange = false;
var sidebar_mini_active = false;
var toggle_initialized = false;
var $html = $('html');
var $body = $('body');
var $navbar_minimize_fixed = $('.navbar-minimize-fixed');
var $collapse = $('.collapse');
var $navbar = $('.navbar');
var $tagsinput = $('.tagsinput');
var $selectpicker = $('.selectpicker');
var $navbar_color = $('.navbar[color-on-scroll]');
var $full_screen_map = $('.full-screen-map');
var $datetimepicker = $('.datetimepicker');
var $datepicker = $('.datepicker');
var $timepicker = $('.timepicker');
var seq = 0, delays = 80, durations = 500;
var seq2 = 0, delays2 = 80, durations2 = 500;
(function(){
var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows){
// if we are on windows OS we activate the perfectScrollbar function
if($('.main-panel').length != 0){
var ps = new PerfectScrollbar('.main-panel',{
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20,
suppressScrollX: true
});
}
if($('.sidebar .sidebar-wrapper').length != 0){
var ps1 = new PerfectScrollbar('.sidebar .sidebar-wrapper');
$('.table-responsive').each(function(){
var ps2 = new PerfectScrollbar($(this)[0]);
});
}
$html.addClass('perfect-scrollbar-on');
} else {
$html.addClass('perfect-scrollbar-off');
}
})();
$(document).ready(function(){
var scroll_start = 0;
var startchange=$('.row');
var offset = startchange.offset();
var scrollElement = navigator.platform.indexOf('Win') > -1 ? $(".ps"):$(window);
scrollElement.scroll(function(){
scroll_start = $(this).scrollTop();
if(scroll_start > 50){
$(".navbar-minimize-fixed").css('opacity', '1');
} else {
$(".navbar-minimize-fixed").css('opacity', '0');
}
});
$(document).scroll(function(){
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top){
$(".navbar-minimize-fixed").css('opacity', '1');
} else {
$(".navbar-minimize-fixed").css('opacity', '0');
}
});
if( $('.full-screen-map').length == 0 && $('.bd-docs').length == 0 ){
// On click navbar-collapse the menu will be white not transparent
$('.collapse').on('show.bs.collapse', function () {
$(this).closest('.navbar').removeClass('navbar-transparent').addClass('bg-white');
}).on('hide.bs.collapse', function () {
$(this).closest('.navbar').addClass('navbar-transparent').removeClass('bg-white');
});
}
blackDashboard.initMinimizeSidebar();
$navbar = $('.navbar[color-on-scroll]');
scroll_distance = $navbar.attr('color-on-scroll') || 500;
// Check if we have the class "navbar-color-on-scroll" then add the function to remove the class "navbar-transparent" so it will transform to a plain color.
if($('.navbar[color-on-scroll]').length != 0){
blackDashboard.checkScrollForTransparentNavbar();
$(window).on('scroll', blackDashboard.checkScrollForTransparentNavbar)
}
$('.form-control').on("focus", function(){
$(this).parent('.input-group').addClass("input-group-focus");
}).on("blur", function(){
$(this).parent(".input-group").removeClass("input-group-focus");
});
// Activate bootstrapSwitch
$('.bootstrap-switch').each(function(){
$this = $(this);
data_on_label = $this.data('on-label') || '';
data_off_label = $this.data('off-label') || '';
$this.bootstrapSwitch({
onText: data_on_label,
offText: data_off_label
});
});
});
$(document).on('click', '.navbar-toggle', function(){
var $toggle = $(this);
if(blackDashboard.misc.navbar_menu_visible == 1) {
$html.removeClass('nav-open');
blackDashboard.misc.navbar_menu_visible = 0;
setTimeout(function(){
$toggle.removeClass('toggled');
$('.bodyClick').remove();
}, 550);
} else {
setTimeout(function(){
$toggle.addClass('toggled');
}, 580);
var div = '<div class="bodyClick"></div>';
$(div).appendTo('body').click(function() {
$html.removeClass('nav-open');
blackDashboard.misc.navbar_menu_visible = 0;
setTimeout(function(){
$toggle.removeClass('toggled');
$('.bodyClick').remove();
}, 550);
});
$html.addClass('nav-open');
blackDashboard.misc.navbar_menu_visible = 1;
}
});
$(window).resize(function(){
// reset the seq for charts drawing animations
seq = seq2 = 0;
if($full_screen_map.length == 0 && $('.bd-docs').length == 0){
var isExpanded = $navbar.find('[data-toggle="collapse"]').attr("aria-expanded");
if( $navbar.hasClass('bg-white') && $(window).width() > 991 ){
$navbar.removeClass('bg-white').addClass('navbar-transparent');
} else if( $navbar.hasClass('navbar-transparent') && $(window).width() < 991 && isExpanded != "false" ) {
$navbar.addClass('bg-white').removeClass('navbar-transparent');
}
}
});
blackDashboard = {
misc:{
navbar_menu_visible: 0
},
initMinimizeSidebar:function(){
if($('.sidebar-mini').length != 0){
sidebar_mini_active = true;
}
$('#minimizeSidebar').click(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);
});
},
showSidebarMessage: function(message){
try {
$.notify({
icon: "tim-icons ui-1_bell-53",
message: message
},{
type: 'info',
timer: 4000,
placement: {
from: 'top',
align: 'right'
}
});
} catch (e) {
console.log('Notify library is missing, please make sure you have the notifications library added.');
}
}
};
function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}

2
assets/js/dashboard-free.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
var transparent=!0,transparentDemo=!0,fixedTop=!1,navbar_initialized=!1,backgroundOrange=!1,sidebar_mini_active=!1,toggle_initialized=!1,$html=$("html"),$body=$("body"),$navbar_minimize_fixed=$(".navbar-minimize-fixed"),$collapse=$(".collapse"),$navbar=$(".navbar"),$tagsinput=$(".tagsinput"),$selectpicker=$(".selectpicker"),$navbar_color=$(".navbar[color-on-scroll]"),$full_screen_map=$(".full-screen-map"),$datetimepicker=$(".datetimepicker"),$datepicker=$(".datepicker"),$timepicker=$(".timepicker"),seq=0,delays=80,durations=500,seq2=0,delays2=80,durations2=500;function hexToRGB(a,e){var i=parseInt(a.slice(1,3),16),n=parseInt(a.slice(3,5),16),r=parseInt(a.slice(5,7),16);return e?"rgba("+i+", "+n+", "+r+", "+e+")":"rgb("+i+", "+n+", "+r+")"}-1<navigator.platform.indexOf("Win")?(0!=$(".main-panel").length&&new PerfectScrollbar(".main-panel",{wheelSpeed:2,wheelPropagation:!0,minScrollbarLength:20,suppressScrollX:!0}),0!=$(".sidebar .sidebar-wrapper").length&&(new PerfectScrollbar(".sidebar .sidebar-wrapper"),$(".table-responsive").each(function(){new PerfectScrollbar($(this)[0])})),$html.addClass("perfect-scrollbar-on")):$html.addClass("perfect-scrollbar-off"),$(document).ready(function(){var a=$(".row").offset();(-1<navigator.platform.indexOf("Win")?$(".ps"):$(window)).scroll(function(){50<$(this).scrollTop()?$(".navbar-minimize-fixed").css("opacity","1"):$(".navbar-minimize-fixed").css("opacity","0")}),$(document).scroll(function(){$(this).scrollTop()>a.top?$(".navbar-minimize-fixed").css("opacity","1"):$(".navbar-minimize-fixed").css("opacity","0")}),0==$(".full-screen-map").length&&0==$(".bd-docs").length&&$(".collapse").on("show.bs.collapse",function(){$(this).closest(".navbar").removeClass("navbar-transparent").addClass("bg-white")}).on("hide.bs.collapse",function(){$(this).closest(".navbar").addClass("navbar-transparent").removeClass("bg-white")}),blackDashboard.initMinimizeSidebar(),$navbar=$(".navbar[color-on-scroll]"),scroll_distance=$navbar.attr("color-on-scroll")||500,0!=$(".navbar[color-on-scroll]").length&&(blackDashboard.checkScrollForTransparentNavbar(),$(window).on("scroll",blackDashboard.checkScrollForTransparentNavbar)),$(".form-control").on("focus",function(){$(this).parent(".input-group").addClass("input-group-focus")}).on("blur",function(){$(this).parent(".input-group").removeClass("input-group-focus")}),$(".bootstrap-switch").each(function(){$this=$(this),data_on_label=$this.data("on-label")||"",data_off_label=$this.data("off-label")||"",$this.bootstrapSwitch({onText:data_on_label,offText:data_off_label})})}),$(document).on("click",".navbar-toggle",function(){var a=$(this);1==blackDashboard.misc.navbar_menu_visible?($html.removeClass("nav-open"),blackDashboard.misc.navbar_menu_visible=0,setTimeout(function(){a.removeClass("toggled"),$(".bodyClick").remove()},550)):(setTimeout(function(){a.addClass("toggled")},580),$('<div class="bodyClick"></div>').appendTo("body").click(function(){$html.removeClass("nav-open"),blackDashboard.misc.navbar_menu_visible=0,setTimeout(function(){a.removeClass("toggled"),$(".bodyClick").remove()},550)}),$html.addClass("nav-open"),blackDashboard.misc.navbar_menu_visible=1)}),$(window).resize(function(){var a;(seq=seq2=0)==$full_screen_map.length&&0==$(".bd-docs").length&&(a=$navbar.find('[data-toggle="collapse"]').attr("aria-expanded"),$navbar.hasClass("bg-white")&&991<$(window).width()?$navbar.removeClass("bg-white").addClass("navbar-transparent"):$navbar.hasClass("navbar-transparent")&&$(window).width()<991&&"false"!=a&&$navbar.addClass("bg-white").removeClass("navbar-transparent"))}),blackDashboard={misc:{navbar_menu_visible:0},initMinimizeSidebar:function(){0!=$(".sidebar-mini").length&&(sidebar_mini_active=!0),$("#minimizeSidebar").click(function(){$(this);1==sidebar_mini_active?($("body").removeClass("sidebar-mini"),sidebar_mini_active=!1,blackDashboard.showSidebarMessage("Sidebar mini deactivated...")):($("body").addClass("sidebar-mini"),sidebar_mini_active=!0,blackDashboard.showSidebarMessage("Sidebar mini activated..."));var a=setInterval(function(){window.dispatchEvent(new Event("resize"))},180);setTimeout(function(){clearInterval(a)},1e3)})},showSidebarMessage:function(a){try{$.notify({icon:"tim-icons ui-1_bell-53",message:a},{type:"info",timer:4e3,placement:{from:"top",align:"right"}})}catch(a){console.log("Notify library is missing, please make sure you have the notifications library added.")}}};
//# sourceMappingURL=_site_dashboard_free/assets/js/dashboard-free.js.map

View File

@ -0,0 +1 @@
{"version":3,"sources":["_site_dashboard_free/assets/js/dashboard-free.js"],"names":["transparent","transparentDemo","fixedTop","navbar_initialized","backgroundOrange","sidebar_mini_active","toggle_initialized","$html","$","$body","$navbar_minimize_fixed","$collapse","$navbar","$tagsinput","$selectpicker","$navbar_color","$full_screen_map","$datetimepicker","$datepicker","$timepicker","seq","delays","durations","seq2","delays2","durations2","hexToRGB","hex","alpha","r","parseInt","slice","g","b","navigator","platform","indexOf","length","PerfectScrollbar","wheelSpeed","wheelPropagation","minScrollbarLength","suppressScrollX","each","this","addClass","document","ready","offset","window","scroll","scrollTop","css","top","on","closest","removeClass","blackDashboard","initMinimizeSidebar","scroll_distance","attr","checkScrollForTransparentNavbar","parent","$this","data_on_label","data","data_off_label","bootstrapSwitch","onText","offText","$toggle","misc","navbar_menu_visible","setTimeout","remove","appendTo","click","resize","isExpanded","find","hasClass","width","showSidebarMessage","simulateWindowResize","setInterval","dispatchEvent","Event","clearInterval","message","notify","icon","type","timer","placement","from","align","e","console","log"],"mappings":"AAkBA,IAAIA,aAAc,EACdC,iBAAkB,EAClBC,UAAW,EAEXC,oBAAqB,EACrBC,kBAAmB,EACnBC,qBAAsB,EACtBC,oBAAqB,EAErBC,MAAQC,EAAE,QACVC,MAAQD,EAAE,QACVE,uBAAyBF,EAAE,0BAC3BG,UAAYH,EAAE,aACdI,QAAUJ,EAAE,WACZK,WAAaL,EAAE,cACfM,cAAgBN,EAAE,iBAClBO,cAAgBP,EAAE,4BAClBQ,iBAAmBR,EAAE,oBACrBS,gBAAkBT,EAAE,mBACpBU,YAAcV,EAAE,eAChBW,YAAcX,EAAE,eAEhBY,IAAM,EAAGC,OAAS,GAAIC,UAAY,IAClCC,KAAO,EAAGC,QAAU,GAAIC,WAAa,IAuMzC,SAASC,SAASC,EAAKC,GACnB,IAAIC,EAAIC,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BC,EAAIF,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BE,EAAIH,SAASH,EAAII,MAAM,EAAG,GAAI,IAElC,OAAIH,EACO,QAAUC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KAAOL,EAAQ,IAEnD,OAASC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KA5MO,EAArCC,UAAUC,SAASC,QAAQ,QAIV,GAA3B5B,EAAE,eAAe6B,QACX,IAAIC,iBAAiB,cAAc,CAC1CC,WAAY,EACZC,kBAAkB,EAClBC,mBAAoB,GACpBC,iBAAiB,IAIuB,GAAzClC,EAAE,6BAA6B6B,SAEtB,IAAIC,iBAAiB,6BAC/B9B,EAAE,qBAAqBmC,KAAK,WAChB,IAAIL,iBAAiB9B,EAAEoC,MAAM,OAMzCrC,MAAMsC,SAAS,yBAEftC,MAAMsC,SAAS,yBAItBrC,EAAEsC,UAAUC,MAAM,WAEhB,IAEIC,EADYxC,EAAE,QACOwC,WACgC,EAArCd,UAAUC,SAASC,QAAQ,OAAc5B,EAAE,OAAOA,EAAEyC,SAC1DC,OAAO,WAID,GAFH1C,EAAEoC,MAAMO,YAGrB3C,EAAE,0BAA0B4C,IAAI,UAAW,KAE3C5C,EAAE,0BAA0B4C,IAAI,UAAW,OAK/C5C,EAAEsC,UAAUI,OAAO,WACF1C,EAAEoC,MAAMO,YACLH,EAAOK,IACvB7C,EAAE,0BAA0B4C,IAAI,UAAW,KAE3C5C,EAAE,0BAA0B4C,IAAI,UAAW,OAIX,GAAhC5C,EAAE,oBAAoB6B,QAAuC,GAAxB7B,EAAE,YAAY6B,QAErD7B,EAAE,aAAa8C,GAAG,mBAAoB,WAClC9C,EAAEoC,MAAMW,QAAQ,WAAWC,YAAY,sBAAsBX,SAAS,cACvES,GAAG,mBAAoB,WACtB9C,EAAEoC,MAAMW,QAAQ,WAAWV,SAAS,sBAAsBW,YAAY,cAI5EC,eAAeC,sBAEf9C,QAAUJ,EAAE,4BACZmD,gBAAkB/C,QAAQgD,KAAK,oBAAsB,IAGV,GAAxCpD,EAAE,4BAA4B6B,SAC7BoB,eAAeI,kCACfrD,EAAEyC,QAAQK,GAAG,SAAUG,eAAeI,kCAG1CrD,EAAE,iBAAiB8C,GAAG,QAAS,WAC3B9C,EAAEoC,MAAMkB,OAAO,gBAAgBjB,SAAS,uBACzCS,GAAG,OAAQ,WACV9C,EAAEoC,MAAMkB,OAAO,gBAAgBN,YAAY,uBAI/ChD,EAAE,qBAAqBmC,KAAK,WACxBoB,MAAQvD,EAAEoC,MACVoB,cAAgBD,MAAME,KAAK,aAAe,GAC1CC,eAAiBH,MAAME,KAAK,cAAgB,GAE5CF,MAAMI,gBAAgB,CAClBC,OAAQJ,cACRK,QAASH,qBAKnB1D,EAAEsC,UAAUQ,GAAG,QAAS,iBAAkB,WACtC,IAAIgB,EAAU9D,EAAEoC,MAE8B,GAA3Ca,eAAec,KAAKC,qBACnBjE,MAAMiD,YAAY,YAClBC,eAAec,KAAKC,oBAAsB,EAC1CC,WAAW,WACPH,EAAQd,YAAY,WACpBhD,EAAE,cAAckE,UACjB,OAGHD,WAAW,WACPH,EAAQzB,SAAS,YAClB,KAGHrC,EADU,iCACHmE,SAAS,QAAQC,MAAM,WAC1BrE,MAAMiD,YAAY,YAClBC,eAAec,KAAKC,oBAAsB,EACtCC,WAAW,WACPH,EAAQd,YAAY,WACpBhD,EAAE,cAAckE,UAClB,OAGVnE,MAAMsC,SAAS,YACfY,eAAec,KAAKC,oBAAsB,KAIlDhE,EAAEyC,QAAQ4B,OAAO,WAIb,IACMC,GAHN1D,IAAMG,KAAO,IAEVP,iBAAiBqB,QAAuC,GAAxB7B,EAAE,YAAY6B,SAC3CyC,EAAalE,QAAQmE,KAAK,4BAA4BnB,KAAK,iBAC3DhD,QAAQoE,SAAS,aAAmC,IAApBxE,EAAEyC,QAAQgC,QAC5CrE,QAAQ4C,YAAY,YAAYX,SAAS,sBAChCjC,QAAQoE,SAAS,uBAAyBxE,EAAEyC,QAAQgC,QAAU,KAAqB,SAAdH,GAC9ElE,QAAQiC,SAAS,YAAYW,YAAY,yBAKjDC,eAAiB,CACfc,KAAK,CACDC,oBAAqB,GAGzBd,oBAAoB,WACgB,GAA7BlD,EAAE,iBAAiB6B,SACpBhC,qBAAsB,GAGxBG,EAAE,oBAAoBoE,MAAM,WACbpE,EAAEoC,MAEa,GAAvBvC,qBACCG,EAAE,QAAQgD,YAAY,gBACtBnD,qBAAsB,EACtBoD,eAAeyB,mBAAmB,iCAElC1E,EAAE,QAAQqC,SAAS,gBACnBxC,qBAAsB,EACtBoD,eAAeyB,mBAAmB,8BAItC,IAAIC,EAAuBC,YAAY,WACnCnC,OAAOoC,cAAc,IAAIC,MAAM,YACjC,KAGFb,WAAW,WACPc,cAAcJ,IAChB,QAIVD,mBAAoB,SAASM,GAC3B,IACEhF,EAAEiF,OAAO,CACLC,KAAM,yBACNF,QAASA,GACT,CACEG,KAAM,OACNC,MAAO,IACPC,UAAW,CACPC,KAAM,MACNC,MAAO,WAGjB,MAAOC,GACPC,QAAQC,IAAI"}

View File

@ -0,0 +1,433 @@
/*
Creative Tim Modifications
Lines: 238, 239 was changed from top: 5px to top: 50% and we added margin-top: -13px. In this way the close button will be aligned vertically
Line:222 - modified when the icon is set, we add the class "alert-with-icon", so there will be enough space for the icon.
*/
/*
* Project: Bootstrap Notify = v3.1.5
* Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
* Author: Mouse0270 aka Robert McIntosh
* License: MIT License
* Website: https://github.com/mouse0270/bootstrap-growl
*/
/* global define:false, require: false, jQuery:false */
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
// Create the defaults once
var defaults = {
element: 'body',
position: null,
type: "info",
allow_dismiss: true,
allow_duplicates: true,
newest_on_top: false,
showProgressbar: false,
placement: {
from: "top",
align: "right"
},
offset: 20,
spacing: 10,
z_index: 1060,
delay: 5000,
timer: 1000,
url_target: '_blank',
mouse_over: null,
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
},
onShow: null,
onShown: null,
onClose: null,
onClosed: null,
onClick: null,
icon_type: 'class',
template: '<div data-notify="container" class="col-xs-11 col-sm-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss"><i class="tim-icons icon-simple-remove"></i></button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
};
String.format = function () {
var args = arguments;
var str = arguments[0];
return str.replace(/(\{\{\d\}\}|\{\d\})/g, function (str) {
if (str.substring(0, 2) === "{{") return str;
var num = parseInt(str.match(/\d/)[0]);
return args[num + 1];
});
};
function isDuplicateNotification(notification) {
var isDupe = false;
$('[data-notify="container"]').each(function (i, el) {
var $el = $(el);
var title = $el.find('[data-notify="title"]').html().trim();
var message = $el.find('[data-notify="message"]').html().trim();
// The input string might be different than the actual parsed HTML string!
// (<br> vs <br /> for example)
// So we have to force-parse this as HTML here!
var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim();
var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim();
var isSameType = $el.hasClass('alert-' + notification.settings.type);
if (isSameTitle && isSameMsg && isSameType) {
//we found the dupe. Set the var and stop checking.
isDupe = true;
}
return !isDupe;
});
return isDupe;
}
function Notify(element, content, options) {
// Setup Content of Notify
var contentObj = {
content: {
message: typeof content === 'object' ? content.message : content,
title: content.title ? content.title : '',
icon: content.icon ? content.icon : '',
url: content.url ? content.url : '#',
target: content.target ? content.target : '-'
}
};
options = $.extend(true, {}, contentObj, options);
this.settings = $.extend(true, {}, defaults, options);
this._defaults = defaults;
if (this.settings.content.target === "-") {
this.settings.content.target = this.settings.url_target;
}
this.animations = {
start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
};
if (typeof this.settings.offset === 'number') {
this.settings.offset = {
x: this.settings.offset,
y: this.settings.offset
};
}
//if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing
if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) {
this.init();
}
}
$.extend(Notify.prototype, {
init: function () {
var self = this;
this.buildNotify();
if (this.settings.content.icon) {
this.setIcon();
}
if (this.settings.content.url != "#") {
this.styleURL();
}
this.styleDismiss();
this.placement();
this.bind();
this.notify = {
$ele: this.$ele,
update: function (command, update) {
var commands = {};
if (typeof command === "string") {
commands[command] = update;
} else {
commands = command;
}
for (var cmd in commands) {
switch (cmd) {
case "type":
this.$ele.removeClass('alert-' + self.settings.type);
this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
self.settings.type = commands[cmd];
this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]);
break;
case "icon":
var $icon = this.$ele.find('[data-notify="icon"]');
if (self.settings.icon_type.toLowerCase() === 'class') {
$icon.removeClass(self.settings.content.icon).addClass(commands[cmd]);
} else {
if (!$icon.is('img')) {
$icon.find('img');
}
$icon.attr('src', commands[cmd]);
}
self.settings.content.icon = commands[command];
break;
case "progress":
var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100));
this.$ele.data('notify-delay', newDelay);
this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%');
break;
case "url":
this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]);
break;
case "target":
this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]);
break;
default:
this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]);
}
}
var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
self.reposition(posX);
},
close: function () {
self.close();
}
};
},
buildNotify: function () {
var content = this.settings.content;
this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
if (!this.settings.allow_dismiss) {
this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
}
if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
this.$ele.find('[data-notify="progressbar"]').remove();
}
},
setIcon: function () {
this.$ele.addClass('alert-with-icon');
if (this.settings.icon_type.toLowerCase() === 'class') {
this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon);
} else {
if (this.$ele.find('[data-notify="icon"]').is('img')) {
this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
} else {
this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />');
}
}
},
styleDismiss: function () {
this.$ele.find('[data-notify="dismiss"]').css({
position: 'absolute',
right: '10px',
top: '50%',
marginTop: '-13px',
zIndex: this.settings.z_index + 2
});
},
styleURL: function () {
this.$ele.find('[data-notify="url"]').css({
backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
height: '100%',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
zIndex: this.settings.z_index + 1
});
},
placement: function () {
var self = this,
offsetAmt = this.settings.offset.y,
css = {
display: 'inline-block',
margin: '0px auto',
position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
transition: 'all .5s ease-in-out',
zIndex: this.settings.z_index
},
hasAnimation = false,
settings = this.settings;
$('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function () {
offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
});
if (this.settings.newest_on_top === true) {
offsetAmt = this.settings.offset.y;
}
css[this.settings.placement.from] = offsetAmt + 'px';
switch (this.settings.placement.align) {
case "left":
case "right":
css[this.settings.placement.align] = this.settings.offset.x + 'px';
break;
case "center":
css.left = 0;
css.right = 0;
break;
}
this.$ele.css(css).addClass(this.settings.animate.enter);
$.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function (index, prefix) {
self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1;
});
$(this.settings.element).append(this.$ele);
if (this.settings.newest_on_top === true) {
offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight();
this.reposition(offsetAmt);
}
if ($.isFunction(self.settings.onShow)) {
self.settings.onShow.call(this.$ele);
}
this.$ele.one(this.animations.start, function () {
hasAnimation = true;
}).one(this.animations.end, function () {
self.$ele.removeClass(self.settings.animate.enter);
if ($.isFunction(self.settings.onShown)) {
self.settings.onShown.call(this);
}
});
setTimeout(function () {
if (!hasAnimation) {
if ($.isFunction(self.settings.onShown)) {
self.settings.onShown.call(this);
}
}
}, 600);
},
bind: function () {
var self = this;
this.$ele.find('[data-notify="dismiss"]').on('click', function () {
self.close();
});
if ($.isFunction(self.settings.onClick)) {
this.$ele.on('click', function (event) {
if (event.target != self.$ele.find('[data-notify="dismiss"]')[0]) {
self.settings.onClick.call(this, event);
}
});
}
this.$ele.mouseover(function () {
$(this).data('data-hover', "true");
}).mouseout(function () {
$(this).data('data-hover', "false");
});
this.$ele.data('data-hover', "false");
if (this.settings.delay > 0) {
self.$ele.data('notify-delay', self.settings.delay);
var timer = setInterval(function () {
var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") {
var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
self.$ele.data('notify-delay', delay);
self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
}
if (delay <= -(self.settings.timer)) {
clearInterval(timer);
self.close();
}
}, self.settings.timer);
}
},
close: function () {
var self = this,
posX = parseInt(this.$ele.css(this.settings.placement.from)),
hasAnimation = false;
this.$ele.attr('data-closing', 'true').addClass(this.settings.animate.exit);
self.reposition(posX);
if ($.isFunction(self.settings.onClose)) {
self.settings.onClose.call(this.$ele);
}
this.$ele.one(this.animations.start, function () {
hasAnimation = true;
}).one(this.animations.end, function () {
$(this).remove();
if ($.isFunction(self.settings.onClosed)) {
self.settings.onClosed.call(this);
}
});
setTimeout(function () {
if (!hasAnimation) {
self.$ele.remove();
if (self.settings.onClosed) {
self.settings.onClosed(self.$ele);
}
}
}, 600);
},
reposition: function (posX) {
var self = this,
notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
$elements = this.$ele.nextAll(notifies);
if (this.settings.newest_on_top === true) {
$elements = this.$ele.prevAll(notifies);
}
$elements.each(function () {
$(this).css(self.settings.placement.from, posX);
posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight();
});
}
});
$.notify = function (content, options) {
var plugin = new Notify(this, content, options);
return plugin.notify;
};
$.notifyDefaults = function (options) {
defaults = $.extend(true, {}, defaults, options);
return defaults;
};
$.notifyClose = function (selector) {
if (typeof selector === "undefined" || selector === "all") {
$('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
}else if(selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger'){
$('.alert-' + selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click');
} else if(selector){
$(selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click');
}
else {
$('[data-notify-position="' + selector + '"]').find('[data-notify="dismiss"]').trigger('click');
}
};
$.notifyCloseExcept = function (selector) {
if(selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger'){
$('[data-notify]').not('.alert-' + selector).find('[data-notify="dismiss"]').trigger('click');
} else{
$('[data-notify]').not(selector).find('[data-notify="dismiss"]').trigger('click');
}
};
}));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,102 @@
/*!
=========================================================
* Black Dashboard - v1.0.1
=========================================================
* Product Page: https://www.creative-tim.com/product/black-dashboard
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/black-dashboard/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Core
@import "dashboard/core/custom/functions";
@import "dashboard/core/bootstrap/functions";
@import "dashboard/core/custom/variables";
@import "dashboard/core/bootstrap/variables";
@import "dashboard/core/custom/mixins";
@import "dashboard/core/bootstrap/mixins";
// Bootstrap components
@import "dashboard/core/bootstrap/root";
@import "dashboard/core/bootstrap/reboot";
@import "dashboard/core/bootstrap/type";
@import "dashboard/core/bootstrap/images";
@import "dashboard/core/bootstrap/code";
@import "dashboard/core/bootstrap/grid";
@import "dashboard/core/bootstrap/tables";
@import "dashboard/core/bootstrap/forms";
@import "dashboard/core/bootstrap/buttons";
@import "dashboard/core/bootstrap/transitions";
@import "dashboard/core/bootstrap/dropdown";
@import "dashboard/core/bootstrap/button-group";
@import "dashboard/core/bootstrap/input-group";
@import "dashboard/core/bootstrap/custom-forms";
@import "dashboard/core/bootstrap/nav";
@import "dashboard/core/bootstrap/navbar";
@import "dashboard/core/bootstrap/card";
@import "dashboard/core/bootstrap/breadcrumb";
@import "dashboard/core/bootstrap/pagination";
@import "dashboard/core/bootstrap/badge";
@import "dashboard/core/bootstrap/jumbotron";
@import "dashboard/core/bootstrap/alert";
@import "dashboard/core/bootstrap/progress";
@import "dashboard/core/bootstrap/media";
@import "dashboard/core/bootstrap/list-group";
@import "dashboard/core/bootstrap/close";
@import "dashboard/core/bootstrap/modal";
@import "dashboard/core/bootstrap/tooltip";
@import "dashboard/core/bootstrap/popover";
@import "dashboard/core/bootstrap/carousel";
@import "dashboard/core/bootstrap/utilities";
@import "dashboard/core/bootstrap/print";
// Custom components
@import "dashboard/core/custom/alerts.scss";
@import "dashboard/core/custom/buttons.scss";
@import "dashboard/core/custom/dropdown.scss";
@import "dashboard/core/custom/footer.scss";
@import "dashboard/core/custom/forms.scss";
@import "dashboard/core/custom/images.scss";
@import "dashboard/core/custom/modal.scss";
@import "dashboard/core/custom/navbar.scss";
@import "dashboard/core/custom/type.scss";
@import "dashboard/core/custom/tables";
@import "dashboard/core/custom/checkboxes-radio";
@import "dashboard/core/custom/fixed-plugin";
@import "dashboard/core/custom/sidebar-and-main-panel.scss";
@import "dashboard/core/custom/misc.scss";
@import "dashboard/core/custom/rtl.scss";
@import "dashboard/core/custom/input-group.scss";
// Vendor / Plugins
@import "dashboard/core/custom/vendor/plugin-perfect-scrollbar.scss";
@import "dashboard/core/custom/vendor/plugin-animate-bootstrap-notify.scss";
// light mode
@import "dashboard/core/custom/white-content.scss";
// Cards
@import 'dashboard/core/custom/card';
@import "dashboard/core/custom/cards/card-chart";
@import "dashboard/core/custom/cards/card-map";
@import "dashboard/core/custom/cards/card-user";
@import "dashboard/core/custom/cards/card-task";
@import "dashboard/core/custom/cards/card-plain";

View File

@ -0,0 +1,142 @@
/*!
=========================================================
* site.product_name - site.current_version
=========================================================
* Product Page: site.link_tim
* Copyright site.year Creative Tim (http://www.creative-tim.com)
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Core
@import "dashboard/pro/custom/functions";
@import "dashboard/pro/bootstrap/functions";
@import "dashboard/pro/custom/variables";
@import "dashboard/pro/bootstrap/variables";
@import "dashboard/pro/custom/mixins";
@import "dashboard/pro/bootstrap/mixins";
// Bootstrap components
@import "dashboard/pro/bootstrap/root";
@import "dashboard/pro/bootstrap/reboot";
@import "dashboard/pro/bootstrap/type";
@import "dashboard/pro/bootstrap/images";
@import "dashboard/pro/bootstrap/code";
@import "dashboard/pro/bootstrap/grid";
@import "dashboard/pro/bootstrap/tables";
@import "dashboard/pro/bootstrap/forms";
@import "dashboard/pro/bootstrap/buttons";
@import "dashboard/pro/bootstrap/transitions";
@import "dashboard/pro/bootstrap/dropdown";
@import "dashboard/pro/bootstrap/button-group";
@import "dashboard/pro/bootstrap/input-group";
@import "dashboard/pro/bootstrap/custom-forms";
@import "dashboard/pro/bootstrap/nav";
@import "dashboard/pro/bootstrap/navbar";
@import "dashboard/pro/bootstrap/card";
@import "dashboard/pro/bootstrap/breadcrumb";
@import "dashboard/pro/bootstrap/pagination";
@import "dashboard/pro/bootstrap/badge";
@import "dashboard/pro/bootstrap/jumbotron";
@import "dashboard/pro/bootstrap/alert";
@import "dashboard/pro/bootstrap/progress";
@import "dashboard/pro/bootstrap/media";
@import "dashboard/pro/bootstrap/list-group";
@import "dashboard/pro/bootstrap/close";
@import "dashboard/pro/bootstrap/modal";
@import "dashboard/pro/bootstrap/tooltip";
@import "dashboard/pro/bootstrap/popover";
@import "dashboard/pro/bootstrap/carousel";
@import "dashboard/pro/bootstrap/utilities";
@import "dashboard/pro/bootstrap/print";
// Custom components
@import "dashboard/pro/custom/reboot.scss";
@import "dashboard/pro/custom/global.scss";
@import "dashboard/pro/custom/utilities.scss";
@import "dashboard/pro/custom/alerts.scss";
@import "dashboard/pro/custom/avatars.scss";
@import "dashboard/pro/custom/badge.scss";
@import "dashboard/pro/custom/buttons.scss";
@import "dashboard/pro/custom/close.scss";
@import "dashboard/pro/custom/custom-forms.scss";
@import "dashboard/pro/custom/dropdown.scss";
@import "dashboard/pro/custom/footer.scss";
@import "dashboard/pro/custom/forms.scss";
@import "dashboard/pro/custom/grid.scss";
@import "dashboard/pro/custom/icons.scss";
@import "dashboard/pro/custom/images.scss";
@import "dashboard/pro/custom/input-group.scss";
@import "dashboard/pro/custom/info-areas.scss";
@import "dashboard/pro/custom/modal.scss";
@import "dashboard/pro/custom/nav.scss";
@import "dashboard/pro/custom/navbar.scss";
@import "dashboard/pro/custom/pagination.scss";
@import "dashboard/pro/custom/tabs.scss";
@import "dashboard/pro/custom/pills.scss";
@import "dashboard/pro/custom/popover.scss";
@import "dashboard/pro/custom/progress.scss";
@import "dashboard/pro/custom/type.scss";
@import "dashboard/pro/custom/tables";
@import "dashboard/pro/custom/checkboxes-radio";
@import "dashboard/pro/custom/fixed-plugin";
@import "dashboard/pro/custom/sidebar-and-main-panel.scss";
@import "dashboard/pro/custom/misc.scss";
@import "dashboard/pro/custom/rtl.scss";
@import "dashboard/pro/custom/timeline.scss";
// Vendor / Plugins
@import "dashboard/pro/custom/vendor/plugin-datetimepicker.scss";
@import "dashboard/pro/custom/vendor/plugin-nouislider.scss";
@import "dashboard/pro/custom/vendor/plugin-fullcalendar.scss";
@import "dashboard/pro/custom/vendor/plugin-sweetalert2.scss";
@import "dashboard/pro/custom/vendor/plugin-bootstrap-switch.scss";
@import "dashboard/pro/custom/vendor/plugin-bootstrap-select.scss";
@import "dashboard/pro/custom/vendor/plugin-jasny-fileupload.scss";
@import "dashboard/pro/custom/vendor/plugin-tagsinput.scss";
@import "dashboard/pro/custom/vendor/plugin-perfect-scrollbar.scss";
@import "dashboard/pro/custom/vendor/plugin-jquery.jvectormap.scss";
@import "dashboard/pro/custom/vendor/plugin-datatables.net.scss";
@import "dashboard/pro/custom/vendor/plugin-animate-bootstrap-notify.scss";
@import "dashboard/pro/custom/vendor/plugin-card-wizard.scss";
@import "dashboard/pro/custom/vendor/plugin-chartjs.scss";
// example pages and sections
@import "dashboard/pro/custom/example-pages.scss";
// light mode
@import "dashboard/pro/custom/white-content.scss";
// Cards
@import 'dashboard/pro/custom/card';
@import "dashboard/pro/custom/cards/card-chart";
@import "dashboard/pro/custom/cards/card-map";
@import "dashboard/pro/custom/cards/card-user";
@import "dashboard/pro/custom/cards/card-task";
@import "dashboard/pro/custom/cards/card-animation-on-hover";
@import "dashboard/pro/custom/cards/card-collapse";
@import "dashboard/pro/custom/cards/card-contributions";
@import "dashboard/pro/custom/cards/card-lock";
@import "dashboard/pro/custom/cards/card-pricing";
@import "dashboard/pro/custom/cards/card-profile";
@import "dashboard/pro/custom/cards/card-plain";
@import "dashboard/pro/custom/cards/card-register";
@import "dashboard/pro/custom/cards/card-stats";
@import "dashboard/pro/custom/cards/card-subcategories";
@import "dashboard/pro/custom/cards/card-testimonials";
@import "dashboard/pro/custom/cards/card-wizard";

View File

@ -0,0 +1,29 @@
/*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";

View File

@ -0,0 +1,12 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "reboot";

View File

@ -0,0 +1,44 @@
/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

View File

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

View File

@ -0,0 +1,29 @@
/*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";

View File

@ -0,0 +1,12 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "reboot";

View File

@ -0,0 +1,44 @@
/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

View File

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

113
assets/scss/kit-free.scss Normal file
View File

@ -0,0 +1,113 @@
/*
=========================================================
* site.product_name - site.current_version
=========================================================
* Product Page: site.link_tim
* Copyright site.year Creative Tim (http://www.creative-tim.com)
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// Core
@import "kit/core/custom/functions";
@import "kit/core/bootstrap/functions";
@import "kit/core/custom/variables";
@import "kit/core/bootstrap/variables";
@import "kit/core/custom/mixins";
@import "kit/core/bootstrap/mixins";
// Bootstrap components
@import "kit/core/bootstrap/root";
@import "kit/core/bootstrap/reboot";
@import "kit/core/bootstrap/type";
@import "kit/core/bootstrap/images";
@import "kit/core/bootstrap/code";
@import "kit/core/bootstrap/grid";
@import "kit/core/bootstrap/tables";
@import "kit/core/bootstrap/forms";
@import "kit/core/bootstrap/buttons";
@import "kit/core/bootstrap/transitions";
@import "kit/core/bootstrap/dropdown";
@import "kit/core/bootstrap/button-group";
@import "kit/core/bootstrap/input-group";
@import "kit/core/bootstrap/custom-forms";
@import "kit/core/bootstrap/nav";
@import "kit/core/bootstrap/navbar";
@import "kit/core/bootstrap/card";
@import "kit/core/bootstrap/breadcrumb";
@import "kit/core/bootstrap/pagination";
@import "kit/core/bootstrap/badge";
@import "kit/core/bootstrap/jumbotron";
@import "kit/core/bootstrap/alert";
@import "kit/core/bootstrap/progress";
@import "kit/core/bootstrap/media";
@import "kit/core/bootstrap/list-group";
@import "kit/core/bootstrap/close";
@import "kit/core/bootstrap/modal";
@import "kit/core/bootstrap/tooltip";
@import "kit/core/bootstrap/popover";
@import "kit/core/bootstrap/carousel";
@import "kit/core/bootstrap/utilities";
@import "kit/core/bootstrap/print";
// Custom components
@import "kit/core/custom/alerts.scss";
@import "kit/core/custom/buttons.scss";
@import "kit/core/custom/dropdown.scss";
@import "kit/core/custom/footer.scss";
@import "kit/core/custom/forms.scss";
@import "kit/core/custom/images.scss";
@import "kit/core/custom/modal.scss";
@import "kit/core/custom/navbar.scss";
@import "kit/core/custom/type.scss";
@import "kit/core/custom/icons.scss";
@import "kit/core/custom/tables";
@import "kit/core/custom/checkboxes-radio";
@import "kit/core/custom/fixed-plugin";
@import "kit/core/custom/pagination.scss";
@import "kit/core/custom/misc.scss";
@import "kit/core/custom/rtl.scss";
@import "kit/core/custom/input-group.scss";
@import "kit/core/custom/example-pages.scss";
@import "kit/core/custom/progress.scss";
@import "kit/core/custom/badge.scss";
@import "kit/core/custom/pills.scss";
@import "kit/core/custom/tabs.scss";
@import "kit/core/custom/info-areas.scss";
// Sections
@import "kit/core/custom/sections.scss";
// Vendor / Plugins
@import "kit/core/custom/vendor/plugin-perfect-scrollbar.scss";
@import "kit/core/custom/vendor/plugin-animate-bootstrap-notify.scss";
@import "kit/core/custom/vendor/plugin-bootstrap-switch.scss";
@import "kit/core/custom/vendor/plugin-nouislider.scss";
@import "kit/core/custom/vendor/plugin-datetimepicker.scss";
// Cards
@import 'kit/core/custom/card';
@import "kit/core/custom/cards/card-chart";
@import "kit/core/custom/cards/card-map";
@import "kit/core/custom/cards/card-user";
@import "kit/core/custom/cards/card-task";
@import "kit/core/custom/cards/card-plain";
@import "kit/core/custom/cards/card-register";
@import "kit/core/custom/cards/card-stats";
@import "kit/core/custom/cards/card-chart";

152
assets/scss/kit-pro.scss Normal file
View File

@ -0,0 +1,152 @@
/*!
=========================================================
* site.product_name - site.current_version
=========================================================
* Product Page: site.link_tim
* Copyright site.year Creative Tim (http://www.creative-tim.com)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
@import "kit/pro/custom/functions";
@import "kit/pro/bootstrap/functions";
@import "kit/pro/variables";
@import "kit/pro/bootstrap/variables";
@import "kit/pro/custom/mixins";
@import "kit/pro/bootstrap/mixins";
// Bootstrap components
@import "kit/pro/bootstrap/root";
@import "kit/pro/bootstrap/reboot";
@import "kit/pro/bootstrap/type";
@import "kit/pro/bootstrap/images";
@import "kit/pro/bootstrap/code";
@import "kit/pro/bootstrap/grid";
@import "kit/pro/bootstrap/tables";
@import "kit/pro/bootstrap/forms";
@import "kit/pro/bootstrap/buttons";
@import "kit/pro/bootstrap/transitions";
@import "kit/pro/bootstrap/dropdown";
@import "kit/pro/bootstrap/button-group";
@import "kit/pro/bootstrap/input-group";
@import "kit/pro/bootstrap/custom-forms";
@import "kit/pro/bootstrap/nav";
@import "kit/pro/bootstrap/navbar";
@import "kit/pro/bootstrap/card";
@import "kit/pro/bootstrap/breadcrumb";
@import "kit/pro/bootstrap/pagination";
@import "kit/pro/bootstrap/badge";
@import "kit/pro/bootstrap/jumbotron";
@import "kit/pro/bootstrap/alert";
@import "kit/pro/bootstrap/progress";
@import "kit/pro/bootstrap/media";
@import "kit/pro/bootstrap/list-group";
@import "kit/pro/bootstrap/close";
@import "kit/pro/bootstrap/modal";
@import "kit/pro/bootstrap/tooltip";
@import "kit/pro/bootstrap/popover";
@import "kit/pro/bootstrap/carousel";
@import "kit/pro/bootstrap/utilities";
@import "kit/pro/bootstrap/print";
// Custom components
@import "kit/pro/custom/alerts.scss";
@import "kit/pro/custom/buttons.scss";
@import "kit/pro/custom/dropdown.scss";
@import "kit/pro/custom/footer.scss";
@import "kit/pro/custom/forms.scss";
@import "kit/pro/custom/images.scss";
@import "kit/pro/custom/modal.scss";
@import "kit/pro/custom/navbar.scss";
@import "kit/pro/custom/type.scss";
@import "kit/pro/custom/icons.scss";
@import "kit/pro/custom/checkboxes-radio";
@import "kit/pro/custom/fixed-plugin";
@import "kit/pro/custom/pagination.scss";
@import "kit/pro/custom/misc.scss";
@import "kit/pro/custom/rtl.scss";
@import "kit/pro/custom/input-group.scss";
@import "kit/pro/custom/progress.scss";
@import "kit/pro/custom/badge.scss";
@import "kit/pro/custom/pills.scss";
@import "kit/pro/custom/tabs.scss";
@import "kit/pro/info-areas.scss";
@import "kit/pro/misc-extend.scss";
@import "kit/pro/sections-extend.scss";
@import "kit/pro/footers.scss";
@import "kit/pro/tables.scss";
// Pro components
@import "kit/pro/example-pages.scss";
@import "kit/pro/social-buttons.scss";
@import "kit/pro/media.scss";
@import "kit/pro/modals-extend.scss";
@import "kit/pro/navbar-extend.scss";
@import "kit/pro/buttons-extend.scss";
@import "kit/pro/pills-extend.scss";
@import "kit/pro/dropdown-extend.scss";
// Sections
@import "kit/pro/custom/sections.scss";
// Vendor / Plugins
@import "kit/pro/custom/vendor/plugin-perfect-scrollbar.scss";
@import "kit/pro/custom/vendor/plugin-animate-bootstrap-notify.scss";
@import "kit/pro/custom/vendor/plugin-bootstrap-switch.scss";
@import "kit/pro/custom/vendor/plugin-nouislider.scss";
@import "kit/pro/custom/vendor/plugin-datetimepicker.scss";
@import "kit/pro/plugins/plugin-tagsinput.scss";
@import "kit/pro/plugins/plugin-bootstrap-select";
@import "kit/pro/plugins/plugin-jasny-fileupload.scss";
@import "kit/pro/plugins/plugin-carousel-slick.scss";
// Cards
@import 'kit/pro/custom/card';
@import "kit/pro/custom/cards/card-chart";
@import "kit/pro/custom/cards/card-map";
@import "kit/pro/custom/cards/card-user";
@import "kit/pro/custom/cards/card-task";
@import "kit/pro/custom/cards/card-plain";
@import "kit/pro/custom/cards/card-register";
@import "kit/pro/custom/cards/card-stats";
@import "kit/pro/custom/cards/card-chart";
@import "kit/pro/cards/card-background";
@import "kit/pro/cards/card-blog";
@import "kit/pro/cards/card-profile";
@import "kit/pro/cards/card-pricing";
@import "kit/pro/cards/card-login";
@import "kit/pro/cards/card-testimonials";
@import "kit/pro/cards/card-product";
// Avatars
@import "kit/pro/avatars/avatar-group";
@import "kit/pro/avatars/avatar";
// Responsive
@import "kit/pro/responsive";

View File

@ -0,0 +1,29 @@
/*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";

View File

@ -0,0 +1,12 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "reboot";

View File

@ -0,0 +1,44 @@
/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

View File

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

View File

@ -0,0 +1,29 @@
/*!
* Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/spacing";

View File

@ -0,0 +1,12 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "reboot";

View File

@ -0,0 +1,44 @@
/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

View File

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

BIN
assets/video/fireworks.mp4 Normal file

Binary file not shown.

BIN
docs/.DS_Store vendored Normal file

Binary file not shown.

BIN
docs/1.0/.DS_Store vendored Normal file

Binary file not shown.

1579
docs/1.0/browser-bugs.html Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,974 @@
<!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="active bd-sidenav-active">
<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="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#contextual-variations">Contextual variations</a></li>
<li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</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">Badges</h1>
<p class="bd-lead">Documentation and examples for badges, our small count and labeling component.</p>
<h2 id="example">Example</h2>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<div class="bd-example" data-example-id="">
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-default">4</span>
</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
Notifications <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-default"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre></div>
<h2 id="contextual-variations">Contextual variations</h2>
<p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
<div class="bd-example" data-example-id="">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-default">Default</span>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/span&gt;</span></code></pre></div>
<h2 id="pill-badges">Pill badges</h2>
<p>Use the <code class="highlighter-rouge">.badge-pill</code> modifier class to make badges more rounded (with a larger <code class="highlighter-rouge">border-radius</code> and additional horizontal <code class="highlighter-rouge">padding</code>). Useful if you miss the badges from v3.</p>
<div class="bd-example" data-example-id="">
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-default">Default</span>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill badge-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/span&gt;</span></code></pre></div>
<h2 id="links">Links</h2>
<p>Using the contextual <code class="highlighter-rouge">.badge-*</code> classes on an <code class="highlighter-rouge">&lt;a&gt;</code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
<div class="bd-example" data-example-id="">
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-default">Default</a>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge badge-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/a&gt;</span></code></pre></div>
</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>

View File

@ -0,0 +1,942 @@
<!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="active bd-sidenav-active">
<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>
<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">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.</p>
<h2 id="overview">Overview</h2>
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>.</p>
<div class="bd-example" data-example-id="">
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
</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>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,906 @@
<!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="active bd-sidenav-active">
<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">
</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">How to set up Google API Keys</h1>
<p class="bd-lead"></p>
<ol>
<li>Go to <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a></li>
<li>Scroll to the “Get an API key” Title and press “Get a Key” Button</li>
<li>Choose a name for your project then press on Create and Enable API</li>
<li>Get the Key and place it in your project where is this script:<code class="highlighter-rouge">&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"&gt;&lt;script&gt;</code></li>
</ol>
</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>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,907 @@
<!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="active bd-sidenav-active">
<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">
</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">Nucleo Icons</h1>
<p class="bd-lead"></p>
<p>Through most of the examples in this kit, we have used 100 Nucleo Icons for the Black Dashboard. View all the <a href="http://demos.creative-tim.com/black-dashboard-pro/nucleo-icons.html">example icons</a>. If you want more than 2100 icons please check the official <a href="https://nucleoapp.com/?ref=1712">Nucleo Icons Pack</a>.</p>
<div class="bd-example" data-example-id="">
<i class="tim-icons icon-single-02"></i>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"tim-icons icon-single-02"</span><span class="nt">&gt;&lt;/i&gt;</span></code></pre></div>
</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>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,896 @@
<!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>
<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">License</h1>
<p class="bd-lead"></p>
<p>Currently, on <a href="https://www.creative-tim.com/">Creative Tim</a> you can get the products with two types of licenses: Personal or Developer. All the freebies are licensed to Personal License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our <a href="http://www.creative-tim.com/license?ref=license-page-bd">Official License Page</a>.</p>
</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>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,978 @@
<!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-h1"><a href="#setup-ubuntu-for-developers">Setup Ubuntu for developers</a>
<ul>
<li class="toc-entry toc-h2"><a href="#install-basic-development-tools">Install basic development tools</a></li>
<li class="toc-entry toc-h2"><a href="#install-git">Install Git</a></li>
<li class="toc-entry toc-h2"><a href="#install-python3">Install Python3</a></li>
<li class="toc-entry toc-h2"><a href="#installing-nodejs">Installing Node.js</a></li>
<li class="toc-entry toc-h2"><a href="#installing-yarn">Installing Yarn</a></li>
</ul>
</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">Setup Ubuntu for Developers</h1>
<p class="bd-lead"></p>
<h1 id="setup-ubuntu-for-developers">Setup <a href="https://ubuntu.com/">Ubuntu</a> for developers</h1>
<hr />
<p><a href="https://ubuntu.com/">Ubuntu</a> is a complete Linux operating system, freely available with both community and professional support. Ubuntu is suitable for both desktop and server use. The current Ubuntu release supports many architectures: Intel x86 (IBM-compatible PC), AMD64 (x86-64), ARMv7, ARMv8.</p>
<p>Ubuntu includes thousands of pieces of software, starting with the Linux kernel version 4.15 and GNOME 3.28, and covering every standard desktop application from word processing and spreadsheet applications to internet access applications, web server software, email software, programming languages and tools and of course several games. For more information please access the official website: <a href="https://ubuntu.com/">Ubuntu.com</a></p>
<p><br /></p>
<h2 id="install-basic-development-tools">Install basic development tools</h2>
<hr />
<p>The <code class="highlighter-rouge">Build Essential</code> package group provides the GNU Compiler Collection (GCC), GNU Debugger (GDB), and other related development tools.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># install Development Tools bundle</span>
<span class="nv">$ </span><span class="nb">sudo </span>apt <span class="nb">install </span>build-essential
</code></pre></div></div>
<p><br /></p>
<h2 id="install-git">Install <a href="https://git-scm.com/">Git</a></h2>
<hr />
<p><a href="https://git-scm.com/">Git</a> is the most popular version control system on Linux. It is easy to use, amazingly fast, its very efficient with large projects, and it has an incredible branching system for non-linear development.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt <span class="nb">install install </span>git
</code></pre></div></div>
<p><br /></p>
<h2 id="install-python3">Install Python3</h2>
<p>Ubuntu comes with both Python 2.7 and Python 3.5 by default. You can install Python 3.6 along with them via a <a href="https://launchpad.net/~jonathonf/+archive/ubuntu/python-3.6">third-party PPA</a> by doing the following steps:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>add-apt-repository ppa:jonathonf/python-3.6
</code></pre></div></div>
<blockquote>
<p>And Python3 libraries for development</p>
</blockquote>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get update
<span class="nv">$ </span><span class="nb">sudo </span>apt-get <span class="nb">install </span>python3.6
</code></pre></div></div>
<p><br /></p>
<h2 id="installing-nodejs">Installing <a href="https://nodejs.org/">Node.js</a></h2>
<p>Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get <span class="nb">install install </span>nodejs
<span class="err">$</span>
<span class="nv">$ </span><span class="c"># check the version</span>
<span class="nv">$ </span>node <span class="nt">--version</span>
</code></pre></div></div>
<p><br /></p>
<h2 id="installing-yarn">Installing <a href="https://yarnpkg.com/">Yarn</a></h2>
<p>The yarn is an advanced package management software for Node.js applications. It is a fast, secure, and reliable alternative that any other Nodejs package manager.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>npm <span class="nb">install </span>yarn <span class="nt">-g</span>
<span class="err">$</span>
<span class="nv">$ </span><span class="c"># check the version</span>
<span class="nv">$ </span>yarn <span class="nt">-v</span>
</code></pre></div></div>
</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>

View File

@ -0,0 +1,998 @@
<!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-h1"><a href="#setup-windows-for-developers">Setup Windows for developers</a>
<ul>
<li class="toc-entry toc-h2"><a href="#install-basic-development-tools">Install basic development tools</a></li>
<li class="toc-entry toc-h2"><a href="#visual-studio-code">Visual Studio Code</a></li>
<li class="toc-entry toc-h2"><a href="#install-python">Install Python</a></li>
<li class="toc-entry toc-h2"><a href="#install-git">Install Git</a></li>
<li class="toc-entry toc-h2"><a href="#install-nodejs">Install Node.js</a></li>
</ul>
</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">Setup Windows for Developers</h1>
<p class="bd-lead"></p>
<h1 id="setup-windows-for-developers">Setup <a href="https://www.microsoft.com/en-us/windows">Windows</a> for developers</h1>
<hr />
<p>Microsoft Windows, commonly referred to as Windows, is a group of several proprietary graphical operating system families, all of which are developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. Active Microsoft Windows families include Windows NT and Windows IoT; these may encompass subfamilies, e.g. Windows Server or Windows Embedded Compact (Windows CE). Defunct Microsoft Windows families include Windows 9x, Windows Mobile and Windows Phone.</p>
<p><br /></p>
<h2 id="install-basic-development-tools">Install basic development tools</h2>
<hr />
<p>This guide is written for Windows 10 version but can be used as a starting point for older versions of Windows.</p>
<p><br /></p>
<h2 id="visual-studio-code"><a href="https://code.visualstudio.com/">Visual Studio Code</a></h2>
<p>Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, MacOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).</p>
<p><strong>Links</strong>:</p>
<ul>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a> - the official page</li>
<li><a href="https://code.visualstudio.com/docs">Visual Studio Code</a> - documentation</li>
</ul>
<p><br /></p>
<h2 id="install-python">Install <a href="https://www.python.org">Python</a></h2>
<p>It is highly unlikely that your Windows system shipped with Python already installed. Fortunately, installing does not involve much more than downloading the Python installer from the python.org website and running it. Lets take a look at how to install Python3 on Windows:</p>
<ul>
<li>Access the <a href="https://www.python.org/downloads/windows/">download page</a></li>
<li>Click on the installer that matches your operating system version 32b or 64b</li>
<li>Run the installer and mark the option that includes Python executable to your PATH variable (image credit: RealPython )</li>
</ul>
<p><img src="https://files.realpython.com/media/win-install-dialog.40e3ded144b0.png" alt="Install Python - The Visual Installer Screen." /></p>
<p>If the installation goes well, test the Python execution from the terminal:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>python <span class="nt">--version</span>
Python 3.7.2
</code></pre></div></div>
<p><br /></p>
<h2 id="install-git">Install <a href="https://git-scm.com/downloads">Git</a></h2>
<p>To install Git on Windows you will need to download the installer from the <a href="https://git-scm.com/downloads">Git</a> website:</p>
<ul>
<li>Download the installer</li>
<li>Execute the installer, using the default options</li>
<li>Test the installation by typing <code class="highlighter-rouge">git</code></li>
</ul>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>git
usage: git <span class="o">[</span><span class="nt">--version</span><span class="o">]</span> <span class="o">[</span><span class="nt">--help</span><span class="o">]</span> <span class="o">[</span><span class="nt">-C</span> &lt;path&gt;] <span class="o">[</span><span class="nt">-c</span> <span class="nv">name</span><span class="o">=</span>value]
<span class="o">[</span><span class="nt">--exec-path</span><span class="o">[=</span>&lt;path&gt;]] <span class="o">[</span><span class="nt">--html-path</span><span class="o">]</span> <span class="o">[</span><span class="nt">--man-path</span><span class="o">]</span> <span class="o">[</span><span class="nt">--info-path</span><span class="o">]</span>
<span class="o">[</span><span class="nt">-p</span> | <span class="nt">--paginate</span> | <span class="nt">--no-pager</span><span class="o">]</span> <span class="o">[</span><span class="nt">--no-replace-objects</span><span class="o">]</span> <span class="o">[</span><span class="nt">--bare</span><span class="o">]</span>
<span class="o">[</span><span class="nt">--git-dir</span><span class="o">=</span>&lt;path&gt;] <span class="o">[</span><span class="nt">--work-tree</span><span class="o">=</span>&lt;path&gt;] <span class="o">[</span><span class="nt">--namespace</span><span class="o">=</span>&lt;name&gt;]
&lt;<span class="nb">command</span><span class="o">&gt;</span> <span class="o">[</span>&lt;args&gt;]
</code></pre></div></div>
<p>For more information about Git please access:</p>
<ul>
<li><a href="https://www.linode.com/docs/development/version-control/how-to-install-git-on-linux-mac-and-windows/">How to Install Git on Linux, Mac or Windows</a></li>
<li><a href="https://www.linode.com/docs/development/version-control/how-to-configure-git/">Getting Started with Git</a></li>
</ul>
<p><br /></p>
<h2 id="install-nodejs">Install <a href="https://nodejs.org/en/">Node.js</a></h2>
<p>Node.js is a run-time environment that includes everything you need to execute a program written in JavaScript. Its used for running scripts on the server to render content before it is delivered to a web browser. NPM stands for Node Package Manager, which is an application and repository for developing and sharing JavaScript code.</p>
<p><strong>Download the installer</strong></p>
<p>In a web browser, navigate to https://nodejs.org/en/download/. Click the Windows Installer button to download the latest default version. At the time this article was written, version 10.16.0-x64 was the latest version. The Node.js installer includes the NPM package manager.</p>
<p><img src="https://raw.githubusercontent.com/app-generator/docs-creativetim/master/static/donwload-nodejs-installer-windows-1.png" alt="NodeJs Installer." /></p>
<p>Execute the installer, and choosing the default options should be enough to have a successfull installation:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>node <span class="nt">-v</span>
<span class="nv">$ </span>npm <span class="nt">-v</span>
</code></pre></div></div>
</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>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,994 @@
<!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="active bd-sidenav-active">
<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">
</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">Chart.js v2.7.2</h1>
<p class="bd-lead"></p>
<p>Simple yet flexible JavaScript charting for designers &amp; developers. Made by our friends from <a target="_blank" href="http://www.chartjs.org">Charts.js</a>. Please check the <a target="_blank" href="http://www.chartjs.org/docs/latest/"></a>full documentation&lt;/a&gt;.</p>
<div class="bd-example" data-example-id="">
<!-- markup -->
<canvas id="lineChartExample"></canvas>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- markup --&gt;</span>
<span class="nt">&lt;canvas</span> <span class="na">id=</span><span class="s">"lineChartExample"</span><span class="nt">&gt;&lt;/canvas&gt;</span></code></pre></div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- javascript init --&gt;</span>
// General configuration for the charts with Line gradientStroke
gradientChartOptionsConfiguration = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#fff',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales:{
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin:50,
suggestedMax: 110,
padding: 20,
fontColor: "#9a9a9a"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(220,53,69,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}]
}
};
var ctx = document.getElementById("lineChartExample").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0,230,0,50);
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
var data = {
labels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
datasets: [{
label: "Data",
fill: true,
backgroundColor: gradientStroke,
borderColor: '#d048b6',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d048b6',
pointBorderColor:'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d048b6',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: [ 60,110,70,100, 75, 90, 80, 100, 70, 80, 120, 80],
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: gradientChartOptionsConfiguration
});</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>

View File

@ -0,0 +1,934 @@
<!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">
</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">DateTimePicker v4.17.47</h1>
<p class="bd-lead"></p>
<p>We have created the design of the date-time picker made by <strong><a href="https://github.com/Eonasdan" target="_blank">Eonasdan</a></strong>. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.</p>
<p>For more information please check <strong><a href="https://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank">Full Github Documentation</a></strong>.</p>
<p>Here is a coded example:</p>
<div class="bd-example" data-example-id="">
<!-- input with datetimepicker -->
<div class="form-group">
<label class="label-control">Datetime Picker</label>
<input type="text" class="form-control datetimepicker" value="10/05/2018" />
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- input with datetimepicker --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"label-control"</span><span class="nt">&gt;</span>Datetime Picker<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control datetimepicker"</span> <span class="na">value=</span><span class="s">"10/05/2018"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- javascript for init --&gt;</span>
$('.datetimepicker').datetimepicker({
icons: {
time: "tim-icons icon-watch-time",
date: "tim-icons icon-calendar-60",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'tim-icons icon-minimal-left',
next: 'tim-icons icon-minimal-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});</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>

View File

@ -0,0 +1,915 @@
<!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="active bd-sidenav-active">
<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">
</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">Perfect Scrollbar v1.4.0</h1>
<p class="bd-lead"></p>
<p>“Minimalistic but perfect custom scrollbar plugin.”</p>
<p>!IMPORTANT Perfect Scrollbar is applied on the <code class="highlighter-rouge">.main-panel</code> and <code class="highlighter-rouge">.sidebar .sidebar-wrapper</code> so we will have a nice scrollbar that is visible only when you actually scroll. Since it is changing the overflows of the CSS it is also affecting the child elements which have a scroll so please make sure that you add the class <code class="highlighter-rouge">.ps-child</code> to any element that should have scroll.</p>
<p>For more information please check <strong><a href="https://github.com/utatti/perfect-scrollbar" target="_blank">Full Github Documentation</a></strong>.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- javascript for activating the Perfect Scrollbar --&gt;</span>
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
<span class="c">&lt;!-- javascript for detroying the Perfect Scrollbar --&gt;</span>
$('.main-panel').perfectScrollbar('destroy');
<span class="c">&lt;!-- javascript for updating the Perfect Scrollbar when the content of the page is changing --&gt;</span>
$('.main-panel').perfectScrollbar('update');</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>

View File

@ -0,0 +1,913 @@
<!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">
</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">Sweet Alert 2</h1>
<p class="bd-lead"></p>
<p>If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colors for the plugin provided by <a href="https://twitter.com/t4t5">Tristan Edwards</a>.</p>
<p>For more information please check <strong><a href="https://sweetalert2.github.io/" target="_blank">Full Documentation</a></strong></p>
<div class="bd-example" data-example-id="">
<!-- markup -->
<button class="btn btn-primary btn-fill" onclick="swal({ title:&quot;Good job!&quot;, text: &quot;You clicked the button!&quot;, type: &quot;success&quot;, buttonsStyling: false, confirmButtonClass: &quot;btn btn-success&quot;})">Try me!</button>
<!-- for more actions that you can use onclick, please check out assets/assets-for-demo/js/demo.js -->
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- markup --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-fill"</span> <span class="na">onclick=</span><span class="s">'swal({ title:"Good job!", text: "You clicked the button!", type: "success", buttonsStyling: false, confirmButtonClass: "btn btn-success"})'</span><span class="nt">&gt;</span>Try me!<span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- for more actions that you can use onclick, please check out assets/assets-for-demo/js/demo.js --&gt;</span></code></pre></div>
</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>