project done before
This commit is contained in:
kicap1992
189
assets/demo/demo.css
Normal file
189
assets/demo/demo.css
Normal file
@ -0,0 +1,189 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Nucleo Style */
|
||||
|
||||
.demo-iconshtml {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
.demo-icons body {
|
||||
font-size: 1.6rem;
|
||||
font-family: sans-serif;
|
||||
color: #333333;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.demo-icons a {
|
||||
color: #608CEE;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.demo-icons header {
|
||||
text-align: center;
|
||||
padding: 100px 0 0;
|
||||
}
|
||||
|
||||
.demo-icons header h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.demo-icons header p {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.demo-icons header a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.demo-icons .nc-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.demo-icons section h2 {
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
padding: 0 0 1em .2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.demo-icons ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.demo-icons ul::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.demo-icons ul li {
|
||||
width: 20%;
|
||||
float: left;
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
border-radius: .25em;
|
||||
-webkit-transition: background 0.2s;
|
||||
-moz-transition: background 0.2s;
|
||||
transition: background 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-icons ul li:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.demo-icons ul p,
|
||||
.demo-icons ul em,
|
||||
.demo-icons ul input {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
color: #999999;
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.demo-icons ul p {
|
||||
padding: 20px 0 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo-icons ul p::selection,
|
||||
.demo-icons ul em::selection {
|
||||
background: #608CEE;
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
.demo-icons ul em {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.demo-icons ul em::before {
|
||||
content: '[';
|
||||
}
|
||||
|
||||
.demo-icons ul em::after {
|
||||
content: ']';
|
||||
}
|
||||
|
||||
.demo-icons ul input {
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
display: none;
|
||||
}
|
||||
408
assets/demo/demo.js
Normal file
408
assets/demo/demo.js
Normal file
@ -0,0 +1,408 @@
|
||||
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";
|
||||
|
||||
ctx = document.getElementById('chartHours').getContext("2d");
|
||||
|
||||
myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
|
||||
datasets: [{
|
||||
borderColor: "#6bd098",
|
||||
backgroundColor: "#6bd098",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
borderWidth: 3,
|
||||
data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354]
|
||||
},
|
||||
{
|
||||
borderColor: "#f17e5d",
|
||||
backgroundColor: "#f17e5d",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
borderWidth: 3,
|
||||
data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420]
|
||||
},
|
||||
{
|
||||
borderColor: "#fcc468",
|
||||
backgroundColor: "#fcc468",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
borderWidth: 3,
|
||||
data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
scales: {
|
||||
yAxes: [{
|
||||
|
||||
ticks: {
|
||||
fontColor: "#9f9f9f",
|
||||
beginAtZero: false,
|
||||
maxTicksLimit: 5,
|
||||
//padding: 20
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
zeroLineColor: "#ccc",
|
||||
color: 'rgba(255,255,255,0.05)'
|
||||
}
|
||||
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(255,255,255,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9f9f9f"
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
initChartsPages: function() {
|
||||
chartColor = "#FFFFFF";
|
||||
|
||||
ctx = document.getElementById('chartHours').getContext("2d");
|
||||
|
||||
myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
|
||||
datasets: [{
|
||||
borderColor: "#6bd098",
|
||||
backgroundColor: "#6bd098",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
borderWidth: 3,
|
||||
data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354]
|
||||
},
|
||||
{
|
||||
borderColor: "#f17e5d",
|
||||
backgroundColor: "#f17e5d",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
borderWidth: 3,
|
||||
data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420]
|
||||
},
|
||||
{
|
||||
borderColor: "#fcc468",
|
||||
backgroundColor: "#fcc468",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
borderWidth: 3,
|
||||
data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
scales: {
|
||||
yAxes: [{
|
||||
|
||||
ticks: {
|
||||
fontColor: "#9f9f9f",
|
||||
beginAtZero: false,
|
||||
maxTicksLimit: 5,
|
||||
//padding: 20
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
zeroLineColor: "#ccc",
|
||||
color: 'rgba(255,255,255,0.05)'
|
||||
}
|
||||
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(255,255,255,0.1)',
|
||||
zeroLineColor: "transparent",
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
padding: 20,
|
||||
fontColor: "#9f9f9f"
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
ctx = document.getElementById('chartEmail').getContext("2d");
|
||||
|
||||
myChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: [1, 2, 3],
|
||||
datasets: [{
|
||||
label: "Emails",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0,
|
||||
backgroundColor: [
|
||||
'#e3e3e3',
|
||||
'#4acccd',
|
||||
'#fcc468',
|
||||
'#ef8157'
|
||||
],
|
||||
borderWidth: 0,
|
||||
data: [342, 480, 530, 120]
|
||||
}]
|
||||
},
|
||||
|
||||
options: {
|
||||
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
|
||||
pieceLabel: {
|
||||
render: 'percentage',
|
||||
fontColor: ['white'],
|
||||
precision: 2
|
||||
},
|
||||
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
scales: {
|
||||
yAxes: [{
|
||||
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
zeroLineColor: "transparent",
|
||||
color: 'rgba(255,255,255,0.05)'
|
||||
}
|
||||
|
||||
}],
|
||||
|
||||
xAxes: [{
|
||||
barPercentage: 1.6,
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
color: 'rgba(255,255,255,0.1)',
|
||||
zeroLineColor: "transparent"
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
var speedCanvas = document.getElementById("speedChart");
|
||||
|
||||
var dataFirst = {
|
||||
data: [0, 19, 15, 20, 30, 40, 40, 50, 25, 30, 50, 70],
|
||||
fill: false,
|
||||
borderColor: '#fbc658',
|
||||
backgroundColor: 'transparent',
|
||||
pointBorderColor: '#fbc658',
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 4,
|
||||
pointBorderWidth: 8,
|
||||
};
|
||||
|
||||
var dataSecond = {
|
||||
data: [0, 5, 10, 12, 20, 27, 30, 34, 42, 45, 55, 63],
|
||||
fill: false,
|
||||
borderColor: '#51CACF',
|
||||
backgroundColor: 'transparent',
|
||||
pointBorderColor: '#51CACF',
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 4,
|
||||
pointBorderWidth: 8
|
||||
};
|
||||
|
||||
var speedData = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [dataFirst, dataSecond]
|
||||
};
|
||||
|
||||
var chartOptions = {
|
||||
legend: {
|
||||
display: false,
|
||||
position: 'top'
|
||||
}
|
||||
};
|
||||
|
||||
var lineChart = new Chart(speedCanvas, {
|
||||
type: 'line',
|
||||
hover: false,
|
||||
data: speedData,
|
||||
options: chartOptions
|
||||
});
|
||||
},
|
||||
|
||||
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: [{
|
||||
"featureType": "water",
|
||||
"stylers": [{
|
||||
"saturation": 43
|
||||
}, {
|
||||
"lightness": -11
|
||||
}, {
|
||||
"hue": "#0088ff"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"hue": "#ff0000"
|
||||
}, {
|
||||
"saturation": -100
|
||||
}, {
|
||||
"lightness": 99
|
||||
}]
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": [{
|
||||
"color": "#808080"
|
||||
}, {
|
||||
"lightness": 54
|
||||
}]
|
||||
}, {
|
||||
"featureType": "landscape.man_made",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"color": "#ece2d9"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "poi.park",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"color": "#ccdca1"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"color": "#767676"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": [{
|
||||
"color": "#ffffff"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "poi",
|
||||
"stylers": [{
|
||||
"visibility": "off"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "landscape.natural",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
}, {
|
||||
"color": "#b8cb93"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "poi.park",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "poi.sports_complex",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "poi.medical",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
}]
|
||||
}, {
|
||||
"featureType": "poi.business",
|
||||
"stylers": [{
|
||||
"visibility": "simplified"
|
||||
}]
|
||||
}]
|
||||
|
||||
}
|
||||
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 = 'primary';
|
||||
|
||||
$.notify({
|
||||
icon: "nc-icon nc-bell-55",
|
||||
message: "Welcome to <b>Paper Dashboard</b> - a beautiful bootstrap dashboard for every web developer."
|
||||
|
||||
}, {
|
||||
type: color,
|
||||
timer: 8000,
|
||||
placement: {
|
||||
from: from,
|
||||
align: align
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user