style: page login

This commit is contained in:
2025-01-16 11:09:44 -03:00
parent 966b5b2cf3
commit 137f5510f8
10 changed files with 98 additions and 40 deletions

View File

@@ -87,7 +87,7 @@ Clientes
<input type="text" id="clientContact" name="contact" placeholder="Contato"></input> <input type="text" id="clientContact" name="contact" placeholder="Contato"></input>
<footer class="grid-buttons"> <footer class="grid-buttons">
<button id="save" type="submit">Salvar</button> <button id="save" type="submit">Salvar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-target="#client-list" >Alterar</button> <button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" >Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button> <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button>
</footer> </footer>
</form> </form>

View File

@@ -159,14 +159,21 @@ Detalhes {{comanda.name}}
<dialog id="payment-comanda" style="display: none;" > <dialog id="payment-comanda" style="display: none;" >
<article> <article>
<h2>Pagamento</h2> <h2>Pagamento</h2>
<h1>R$ {{ total }}</h1> <h1 id="first-total">R$ {{ total }}</h1>
<div>
<p>Recebido:</p> <input id="recebido" type="number">
<h4 id="troco">Troco: </h4>
</div>
<footer> <footer>
<button class="secondary" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="backPage()"> <button class="secondary" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="backPage()" style="background-color:green;">
Receber Receber
</button> </button>
<button class="secondary" onclick="backPage()">
Conta Cliente
</button>
<button onclick="close_modal_payment_comanda()" >Cancelar</button> <button onclick="close_modal_payment_comanda()" style="background-color:red;">Cancelar</button>
</footer> </footer>
</article> </article>
</dialog> </dialog>
@@ -196,6 +203,28 @@ Detalhes {{comanda.name}}
<dialog id="conta-cliente" style="display: none;" >
<article>
<h2>Pagamento</h2>
<h1>R$ {{ total }}</h1>
<div>
<p>Recebido:</p> <input id="recebido" type="number">
<h4 id="troco">Adicionar a conta: </h4>
</div>
<footer>
<button class="secondary" style="background-color:green;">
Receber
</button>
<button onclick="close_modal_payment_comanda()" style="background-color:red;">Cancelar</button>
</footer>
</article>
</dialog>
<script src="{% static 'comandas/js/viewcomanda.js' %}"></script> <script src="{% static 'comandas/js/viewcomanda.js' %}"></script>
</body> </body>

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -12,9 +12,9 @@
</head> </head>
<body> <body>
<div class="c-form"> <div class="c-form">
<h2>
<img src="{% static 'midia/logo.png' %}" width="140px"> <img class="logo" src="{% static 'midia/logo.png' %}" width="140px">
</h2>
<div class="c-input"> <div class="c-input">
<form method="post" class="c-inputBox"> <form method="post" class="c-inputBox">
{% csrf_token %} {% csrf_token %}

View File

@@ -2,16 +2,16 @@
display: grid; display: grid;
grid-template-columns: repeat(2, 2fr); grid-template-columns: repeat(2, 2fr);
gap: 20px; gap: 20px;
max-width: 1300px; /* Define a largura máxima do grid */ max-width: 1300px;
margin: 0 auto; /* Centraliza o grid na página */ margin: 0 auto;
} }
.grid-list-products { .grid-list-products {
display: grid; display: grid;
grid-template-columns: repeat(3, 2fr); grid-template-columns: repeat(3, 2fr);
gap: 10px; gap: 10px;
max-width: 800px; /* Define a largura máxima do grid */ max-width: 800px;
margin: 0 auto; /* Centraliza o grid na página */ margin: 0 auto;
} }
.card { .card {
@@ -21,7 +21,7 @@
border-radius: 15px; border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
line-height: 40px; /* Centraliza o texto verticalmente */ line-height: 40px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;

View File

@@ -30,6 +30,8 @@ function openModalObs(id) {
function modal_payment_comanda() { function modal_payment_comanda() {
document.getElementById('payment-comanda').style.display = 'block'; document.getElementById('payment-comanda').style.display = 'block';
recebido = document.getElementById('recebido')
recebido.focus()
} }
function close_modal_payment_comanda() { function close_modal_payment_comanda() {
@@ -139,17 +141,35 @@ function backPage() {
} }
// document.onkeydown = teclado function troco(){
recebido = document.getElementById('recebido').value
total = document.getElementById('first-total').innerHTML
resultado = document.getElementById('troco')
total = total.replace('R$ ','')
total = total.replace(',','.')
result = recebido - total
resultado.innerHTML = 'Troco: R$ '+result
}
// function teclado(event){
// if (event.keyCode == 65){
// openModal()
// }
// else if (event.keyCode == 73){
// imprimirFichas()
// }
// } document.onkeydown = teclado
function teclado(event){
if (document.getElementById('payment-comanda').style.display == 'block'){
if (event.keyCode == 13){
troco()
}else{
console.log(event.keyCode)
}
}else{
if (event.keyCode == 13){
troco()
}else{
console.log('')
}
}
}
function addOrder(){ function addOrder(){
obs = document.getElementById('obs').value obs = document.getElementById('obs').value
var id = document.getElementById('id-temp').value var id = document.getElementById('id-temp').value

View File

@@ -38,20 +38,25 @@ body
transform: skew(2deg,1deg); transform: skew(2deg,1deg);
border-radius: 10px; border-radius: 10px;
} }
.c-form h2
{
.logo {
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 5px; letter-spacing: 5px;
transition: transform 0.2s; filter: drop-shadow(0px 0px 8px rgba(168, 168, 168, 0.788));
transition: all 0.5s ease-in-out;
} }
.c-form h2:hover .logo:hover {
{ filter: drop-shadow(0px 0px 12px rgba(168, 168, 168, 0.788));
scale: 1.05; /* transition: transform 1.2s; */
transition: transform 0.2s; scale: 1.2;
} }
.c-form .c-input .c-form .c-input
{ {
margin-top: 40px; margin-top: 40px;
@@ -64,7 +69,7 @@ body
.c-form .c-input .c-inputBox label .c-form .c-input .c-inputBox label
{ {
display: block; display: block;
color: #fff; color: #f1e3d1;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 18px; font-size: 18px;
letter-spacing: 1px; letter-spacing: 1px;
@@ -82,20 +87,24 @@ body
font-size: 20px; font-size: 20px;
border-radius: 10px; border-radius: 10px;
} }
.c-form .c-input .c-inputBox input[type="submit"]
{
background:linear-gradient(315deg,#591309,#fee4c1) ;
.c-form .c-input .c-inputBox input[type="submit"] {
background:#612319;
cursor: pointer; cursor: pointer;
margin-top: 20px; margin-top: 20px;
letter-spacing: 1px; letter-spacing: 1px;
} box-shadow: 0px 0px 10px rgba(207, 207, 207, 0.671);
.c-form .c-input .c-inputBox input[type="submit"]:hover transition: all 0.3s ease-in-out;
{ }
background:linear-gradient(315deg,#fee4c1,#591309) ;
}
.c-form .c-input .c-inputBox input[type="submit"]:active .c-form .c-input .c-inputBox input[type="submit"]:hover {
{ background:#9e6f4f;
scale: 1.05;
}
/* .c-form .c-input .c-inputBox input[type="submit"]:active {
color: rgba(255, 255, 255, 0.521); color: rgba(255, 255, 255, 0.521);
background:linear-gradient(315deg,#fee4c1,#591309) ; background:linear-gradient(315deg,#fee4c1,#591309) ;
} } */