create comanda | detalhe comanda

This commit is contained in:
2024-12-12 21:33:04 -03:00
parent 2f84ca97c3
commit a3bb7bb674
15 changed files with 284 additions and 21 deletions

View File

@@ -7,13 +7,13 @@
}
.card {
width: 120px;
height: 120px;
width: 220px;
height: 220px;
background-color: #f2f2f2;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px; /* Centraliza o texto verticalmente */
line-height: 50px; /* Centraliza o texto verticalmente */
font-size: 20px;
font-weight: bold;
color: #333;
@@ -23,4 +23,57 @@
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
max-width: 500px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

View File

@@ -1,7 +1,7 @@
.grid-container {
display: grid;
grid-template-columns: repeat(1, 2fr);
gap: 20px;
grid-template-columns: repeat(2, 2fr);
gap: 10px;
max-width: 800px; /* Define a largura máxima do grid */
margin: 0 auto; /* Centraliza o grid na página */
}
@@ -23,4 +23,64 @@
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
}
table td th {
text-align: center;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
height: 90%;
max-width: 500px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, textarea {
width: 95%;
max-width: 95%;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

View File

@@ -0,0 +1,21 @@
function openModal() {
document.getElementById('Modal-create-comanda').style.display = 'block';
}
function closeModal() {
document.getElementById('Modal-create-comanda').style.display = 'none';
}
document.getElementById('openModal').addEventListener('click', openModal);
// document.getElementById('form-comanda').addEventListener('submit', function(event) {
// event.preventDefault();
// const productName = document.getElementById('productName').value;
// const productPrice = document.getElementById('productPrice').value;
// const productDescription = document.getElementById('productDescription').value;
// closeModal();
// }
// );

View File

@@ -0,0 +1,20 @@
function openModal() {
document.getElementById('Modal-add-product').style.display = 'block';
}
function closeModal() {
document.getElementById('Modal-add-product').style.display = 'none';
}
document.getElementById('openModal').addEventListener('click', openModal);
document.getElementById('productForm').addEventListener('submit', function(event) {
event.preventDefault();
// const productName = document.getElementById('productName').value;
// const productPrice = document.getElementById('productPrice').value;
// const productDescription = document.getElementById('productDescription').value;
// closeModal();
});