mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 13:35:42 +00:00
style: page home
This commit is contained in:
@@ -1,83 +1,89 @@
|
||||
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(3, 2fr);
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(3, 2fr);
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
justify-items: center;
|
||||
background: linear-gradient(135deg, #97cefa, #457bd1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card-resumo {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 0.6fr ;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
background: linear-gradient(135deg, #1a237e, #3f51b5);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
padding: 15px 30px 15px 30px;
|
||||
}
|
||||
.card-faturamento-anual {
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
max-height: 350px;
|
||||
margin: 30px;
|
||||
background: linear-gradient(135deg, #1a237e, #3f51b5);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
padding: 15px 30px 15px 30px;
|
||||
}
|
||||
|
||||
.card-resumo h2 {
|
||||
font-size: 35px;
|
||||
margin: 0px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 730px) {
|
||||
.grid-container {
|
||||
justify-items: center;
|
||||
background-color: #2b376e;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
|
||||
display: grid;
|
||||
width: 99%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 95%;
|
||||
background: linear-gradient(135deg, #d3ebff, #a1c4fd);
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card-resumo {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 0.6fr ;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
background-color: #1a237e;
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 10px rgba(156, 156, 156, 0.2);
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
/* scale: 0.9; */
|
||||
/* font-size: 20px; */
|
||||
/* font-weight: bold; */
|
||||
padding: 15px 30px 15px 30px;
|
||||
/* color: #333; */
|
||||
/* transition: transform 0.2s; */
|
||||
}
|
||||
|
||||
.card-resumo h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 35px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 730px) {
|
||||
.grid-container {
|
||||
justify-items: center;
|
||||
display: grid;
|
||||
width: 99%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 20px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 95%;
|
||||
background-color: #2b376e;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
const barColors = ['rgba(252, 52, 95, 0.65)',
|
||||
'rgba(253, 193, 53, 0.65)',
|
||||
'rgba(54, 162, 235, 0.65)',
|
||||
@@ -17,7 +16,6 @@ var chartVendas = new Chart("vendas", {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
fill: true,
|
||||
// barPercentage: 1.0,
|
||||
data: [],
|
||||
backgroundColor: barColors,
|
||||
borderColor: barColorsBorder,
|
||||
@@ -26,30 +24,28 @@ var chartVendas = new Chart("vendas", {
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
y: {
|
||||
ticks: {
|
||||
display: true,
|
||||
|
||||
// color: 'white'
|
||||
// padding: 5,
|
||||
callback: function(value, index, values) {
|
||||
return chartVendas.data.labels[index].substring(0, 6); // Retorna o valor normal do label
|
||||
return chartVendas.data.labels[index].substring(0, 6);
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
legend: {display: false},
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: 'white'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
text: "Produtos mais vendidos"
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
var chartCuisine = new Chart("cuisine", {
|
||||
@@ -62,7 +58,12 @@ var chartCuisine = new Chart("cuisine", {
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {display: true},
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: 'white' // Cor da legenda alterada para branca
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Média (em minutos) do pedido em cada etapa."
|
||||
@@ -70,8 +71,7 @@ var chartCuisine = new Chart("cuisine", {
|
||||
}
|
||||
});
|
||||
|
||||
function faturaMensal() {
|
||||
|
||||
// O restante do código permanece inalterado
|
||||
const genericOptions = {
|
||||
responsive: true,
|
||||
hoverBackgroundColor: 'white',
|
||||
@@ -79,11 +79,18 @@ function faturaMensal() {
|
||||
hoverBorderWidth: 3,
|
||||
onHover: { mode: ['dataset', 'tooltip'] },
|
||||
scales: {
|
||||
x: { grid: { display: true } },
|
||||
x: { grid: { display: true },
|
||||
ticks: {
|
||||
display: true,
|
||||
color: 'white'
|
||||
} },
|
||||
y: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
ticks: { stepSize: 50 },
|
||||
ticks: { stepSize: 50 ,
|
||||
display: true,
|
||||
color: 'white'
|
||||
},
|
||||
grid: { borderDash: [5, 5] }
|
||||
}
|
||||
},
|
||||
@@ -91,7 +98,7 @@ function faturaMensal() {
|
||||
padding: {
|
||||
bottom: 10,
|
||||
left: 15,
|
||||
right: 25
|
||||
right: 25,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
@@ -100,6 +107,8 @@ function faturaMensal() {
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: true },
|
||||
labels:{
|
||||
color: 'white'},
|
||||
tooltip: {
|
||||
padding: 16,
|
||||
titleFont: {
|
||||
@@ -107,7 +116,7 @@ function faturaMensal() {
|
||||
size: 18,
|
||||
weight: 'normal'
|
||||
},
|
||||
backgroundColor: 'rgba(8, 26, 81, 1)',
|
||||
backgroundColor: 'rgba(8, 26, 81, 0.66)',
|
||||
bodyColor: 'rgba(255, 255, 255, 0.7)',
|
||||
bodyFont: {
|
||||
family: "'Poppins', 'sans-serif'",
|
||||
@@ -232,7 +241,7 @@ var faturamentoMensal = new Chart('mensal', {
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getDataAtualFormatada() {
|
||||
|
||||
Reference in New Issue
Block a user