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

View File

@@ -130,7 +130,7 @@ Detalhes {{comanda.name}}
<div id="product-list" class="grid-list-products"> <div id="product-list" class="grid-list-products">
{% for product in 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> {{product.name}} <br>
R$ {{product.price}} R$ {{product.price}}
</article > </article >

Binary file not shown.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,3 +1,5 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(2, 2fr); grid-template-columns: repeat(2, 2fr);
@@ -14,24 +16,15 @@
margin: 0 auto; margin: 0 auto;
} }
.card { .card-product {
width: 120px; background: var(--main-gradient);
height: 120px; box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
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:hover { .card-product:hover {
transform: scale(1.05); 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 { table td th {

View File

@@ -16,25 +16,16 @@
margin: 0 auto; margin: 0 auto;
} }
.card { .card-product {
width: 120px; background: var(--main-gradient);
height: 120px; box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
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:hover { }
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); .card-product:hover {
} transform: scale(1.05);
box-shadow: 2px 2px 10px rgba(185, 185, 185, 0.678);
}
table td th { table td th {
text-align: center; text-align: center;

View File

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

View File

@@ -29,11 +29,20 @@ var chartVendas = new Chart("vendas", {
y: { y: {
ticks: { ticks: {
display: true, display: true,
color: 'white',
callback: function(value, index, values) { callback: function(value, index, values) {
return chartVendas.data.labels[index].substring(0, 6); return chartVendas.data.labels[index].substring(0, 6);
}, },
} }
}, },
x: {
ticks: {
display: true,
color: 'white',
}
}
}, },
legend: { legend: {
display: true, display: true,
@@ -116,7 +125,7 @@ var chartCuisine = new Chart("cuisine", {
size: 18, size: 18,
weight: 'normal' weight: 'normal'
}, },
backgroundColor: 'rgba(8, 26, 81, 0.66)', backgroundColor: 'rgba(1, 2, 5, 0.66)',
bodyColor: 'rgba(255, 255, 255, 0.7)', bodyColor: 'rgba(255, 255, 255, 0.7)',
bodyFont: { bodyFont: {
family: "'Poppins', 'sans-serif'", family: "'Poppins', 'sans-serif'",
@@ -306,7 +315,7 @@ var resposta = fetch(`/chartCuisine/${dateStart}/${dateEnd}`, {method: 'GET',
chartCuisine.data.labels = xValues chartCuisine.data.labels = xValues
chartCuisine.update(); chartCuisine.update();
document.getElementById('30-days').innerText = '' document.getElementById('30-days').innerText = 'Período de 30 dias'
}) })
.catch(error => { .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-active-summary-color: var(--pico-primary-hover);
--pico-accordion-close-summary-color: var(--pico-color); --pico-accordion-close-summary-color: var(--pico-color);
--pico-accordion-open-summary-color: var(--pico-muted-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-border-color: var(--pico-muted-border-color);
--pico-card-box-shadow: var(--pico-box-shadow); --pico-card-box-shadow: var(--pico-box-shadow);
--pico-card-sectioning-background-color: #fbfcfc; --pico-card-sectioning-background-color: #fbfcfc;
@@ -1974,7 +1974,7 @@ article {
transition: transform 0.2s; transition: transform 0.2s;
} }
article:hover { article:hover {
transform: scale(1.02); /* transform: scale(1.02); */
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
} }
article > header, article > header,