mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 13:35:42 +00:00
style: paleta de cores
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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.
Binary file not shown.
@@ -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> -->
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user