style: paleta de cores

This commit is contained in:
2025-01-20 15:32:05 -03:00
parent 203c7345fb
commit 4df3c6e8a8
14 changed files with 85 additions and 70 deletions

View File

@@ -75,8 +75,9 @@
<article
name="productBox"
id="productId-{{ product.id }}"
class="card-product"
onclick="addProductClick({{product.id}} , {{comanda.id}})"
style="background-color: #293552;">
>
<p hidden id="{{forloop.counter0}}">{{product.id}}</p>
<p hidden id="comanda{{forloop.counter0}}">{{comanda.id}}</p>
{{product.name}} <br>
@@ -89,8 +90,9 @@
<article
name="productBox"
id="productId-{{ product.id }}"
class="card-product"
onclick="addProductClick({{product.id}} , {{comanda.id}})"
style="background-color: #293552;">
>
{{product.name}} <br>
R$ {{product.price}}
</article>

View File

@@ -130,7 +130,7 @@ Detalhes {{comanda.name}}
<div id="product-list" class="grid-list-products">
{% for product in products %}
<article onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" style="background-color: #293552;" >
<article class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
{{product.name}} <br>
R$ {{product.price}}
</article >

Binary file not shown.

View File

@@ -13,11 +13,11 @@ RRB&C - DashBoard
<body>
<div class="grid-container">
<h1>DashBoard</h1>
<div class="grid-container" style="grid-template-columns: repeat(2, 2fr);">
<div class="grid-container" style="grid-template-columns: repeat(2, 2fr); align-items: center; margin: 0px;">
<input id="data-start" name="data-start" oninput="mediaCuisine()" type="date">
<input id="data-end" name="data-end" oninput="mediaCuisine()" type="date">
</div>
<h4 id="30-days"></h4>
<h4 id="30-days">Últimos 30 dias</h4>
</div>
<div class="grid-container">
@@ -61,7 +61,7 @@ RRB&C - DashBoard
</div>
</div>
</div>
<h4>Faturamento anual</h4>
<h4 style="justify-self: center;">Faturamento mês a mês</h4>
<!-- <div class="card-faturamento-anual"> -->
<canvas class="card-faturamento-anual" id="mensal" ></canvas>
<!-- </div> -->

View File

@@ -4,7 +4,7 @@
<article
onclick="addProductComanda({{product.id}})"
style="background-color: #293552;"
class="card-product"
hx-get="{% url 'addProduct' product.id comanda_id %} "
hx-trigger="click"
hx-target="#list-products-comanda">

View File

@@ -7,7 +7,7 @@
<article
name="productBox"
id="productId-{{ product.id }}"
style="background-color: #293552;"
class="card-product"
onclick="addProductClick({{product.id}} )"
>
<p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
@@ -21,7 +21,7 @@
<article
name="productBox"
id="productId-{{ product.id }}"
style="background-color: #293552;"
class="card-product"
onclick="addProductClick({{product.id}})"
>
{{product.name}} <br>

View File

@@ -14,8 +14,8 @@
{% if item.product.cuisine == True %}
<img
onclick="openModalObs({{item.id}})"
src="{% static 'midia/icons/edit.svg' %}"
style="width: 35px; height: 35px; cursor: pointer;">
src="{% static 'midia/icons/note.svg' %}"
style="width: 25px; height: 35px; cursor: pointer;">
</img>
{% endif %}

View File

@@ -1,7 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
:root {
--main-gradient: linear-gradient(145deg, #1E2A3B, #2C3E50);
}
body {
margin: 70px 0px 0px 0px;
/* padding: 15px; */
}
h1{
@@ -90,6 +96,7 @@ text-align: center;
display: inline-block;
color: #fff;
cursor: pointer;
transition: display 0.9s ;
}
.dropdown-content {
@@ -99,7 +106,6 @@ text-align: center;
background-color: #313238;
min-width: 160px;
box-shadow: 0px 3px 10px #464646;
transition: display 0.9s ease-in-out
}
.dropdown-content a {
@@ -107,11 +113,15 @@ text-align: center;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #7a7a7a;
border-radius: 5px;
display: block;
}
.img-drop {

View File

@@ -1,3 +1,5 @@
.grid-container {
display: grid;
grid-template-columns: repeat(2, 2fr);
@@ -14,24 +16,15 @@
margin: 0 auto;
}
.card {
width: 120px;
height: 120px;
background-color: #c9ffbc;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 40px;
font-size: 20px;
font-weight: bold;
color: #333;
transition: transform 0.2s;
cursor: pointer;
.card-product {
background: var(--main-gradient);
box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
}
.card:hover {
.card-product:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(185, 185, 185, 0.678);
}
table td th {

View File

@@ -16,24 +16,15 @@
margin: 0 auto;
}
.card {
width: 120px;
height: 120px;
background-color: #c9ffbc;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 40px;
font-size: 20px;
font-weight: bold;
color: #333;
transition: transform 0.2s;
cursor: pointer;
.card-product {
background: var(--main-gradient);
box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
}
.card:hover {
.card-product:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 10px rgba(185, 185, 185, 0.678);
}
table td th {

View File

@@ -1,12 +1,13 @@
.grid-container {
display: grid;
justify-self: center;
justify-content: center;
justify-items: center;
align-items: center;
grid-template-columns: repeat(3, 2fr);
gap: 20px;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
margin: 0px 0px 20px 0px;
padding: 10px;
}
@@ -14,9 +15,11 @@
width: 420px;
height: 420px;
justify-items: center;
background: linear-gradient(135deg, #97cefa, #457bd1);
/* background: linear-gradient(135deg, #97cefa, #457bd1); */
background: var(--main-gradient);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.719);
text-align: center;
line-height: 30px;
font-size: 20px;
@@ -27,8 +30,8 @@
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
transform: translateY(-10px);
box-shadow: 0 4px 8px rgba(199, 199, 199, 0.25);
}
.card-resumo {
@@ -38,9 +41,19 @@
align-items: center;
width: 300px;
height: 130px;
background: linear-gradient(135deg, #1a237e, #3f51b5);
background: var(--main-gradient);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
box-shadow: 0 4px 10px rgba(12, 12, 12, 0.973);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
transition: box-shadow 0.4s;
}
.card-resumo:hover {
box-shadow: 0 4px 15px rgba(175, 175, 175, 0.295);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
@@ -48,12 +61,13 @@
.card-faturamento-anual {
justify-self: center;
align-items: center;
width: 80%;
width: 70%;
max-width: 1350px;;
max-height: 350px;
margin: 30px;
background: linear-gradient(135deg, #1a237e, #3f51b5);
background: var(--main-gradient);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.493);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
@@ -77,13 +91,9 @@
.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, box-shadow 0.2s;
}
.card-faturamento-anual {
max-width: 120%;
}
}

View File

@@ -29,11 +29,20 @@ var chartVendas = new Chart("vendas", {
y: {
ticks: {
display: true,
color: 'white',
callback: function(value, index, values) {
return chartVendas.data.labels[index].substring(0, 6);
},
}
},
x: {
ticks: {
display: true,
color: 'white',
}
}
},
legend: {
display: true,
@@ -116,7 +125,7 @@ var chartCuisine = new Chart("cuisine", {
size: 18,
weight: 'normal'
},
backgroundColor: 'rgba(8, 26, 81, 0.66)',
backgroundColor: 'rgba(1, 2, 5, 0.66)',
bodyColor: 'rgba(255, 255, 255, 0.7)',
bodyFont: {
family: "'Poppins', 'sans-serif'",
@@ -306,7 +315,7 @@ var resposta = fetch(`/chartCuisine/${dateStart}/${dateEnd}`, {method: 'GET',
chartCuisine.data.labels = xValues
chartCuisine.update();
document.getElementById('30-days').innerText = ''
document.getElementById('30-days').innerText = 'Período de 30 dias'
})
.catch(error => {

View File

@@ -309,7 +309,7 @@ details summary[role=button]:not(.outline)::after {
--pico-accordion-active-summary-color: var(--pico-primary-hover);
--pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-color);
--pico-card-background-color: var(--pico-background-color);
--pico-card-background-color: linear-gradient(145deg, #1E2A3B, #2C3E50);
--pico-card-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc;
@@ -1974,7 +1974,7 @@ article {
transition: transform 0.2s;
}
article:hover {
transform: scale(1.02);
/* transform: scale(1.02); */
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
article > header,