Arquivo: Projects

Estoque roupas

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Gestão de Estoque – Roupas</title>
<style>
:root {
–primary-color: #2c3e50;
–secondary-color: #3498db;
–background: #f4f7f6;
–text-color: #333;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–background);
color: var(–text-color);
margin: 0;
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

header {
background-color: var(–primary-color);
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
}

.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
}

h2 { margin-top: 0; color: var(–primary-color); }

/* Estilos do Formulário */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}

.form-group {
display: flex;
flex-direction: column;
}

/* Classe para ocupar a largura total em telas maiores */
.full-width {
grid-column: 1 / -1;
}

.measurements-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #f8f9fa;
padding: 15px;
border-radius: 6px;
border: 1px dashed #ccc;
}

label { margin-bottom: 5px; font-weight: bold; font-size: 0.9em; }

input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1em;
width: 100%;
box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

button.btn-add {
grid-column: 1 / -1;
background-color: var(–secondary-color);
color: white;
border: none;
padding: 12px;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}

button.btn-add:hover { background-color: #2980b9; }

/* Estilos da Tabela */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 0.95em;
}

th, td {
text-align: left;
padding: 12px;
border-bottom: 1px solid #ddd;
vertical-align: middle;
}

th { background-color: #eee; }

.product-img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #ddd;
}

.total-badge {
background-color: #27ae60;
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.85em;
font-weight: bold;
}

.btn-delete {
background-color: #e74c3c;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}

.medidas-list {
font-size: 0.85em;
color: #555;
line-height: 1.4;
}

/* Responsividade para medidas em telas pequenas */
@media (max-width: 600px) {
.measurements-container {
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>

<div class=”container”>
<header>
<h1>Sistema de Estoque – Roupas</h1>
</header>

<div class=”card”>
<h2>📦 Cadastrar Novo Produto</h2>
<div class=”form-grid”>
<div class=”form-group”>
<label>Modelo</label>
<input type=”text” id=”modelo” placeholder=”Ex: Vestido Longo”>
</div>
<div class=”form-group”>
<label>Marca</label>
<input type=”text” id=”marca” placeholder=”Ex: Farm”>
</div>
<div class=”form-group”>
<label>Qtd em Estoque</label>
<input type=”number” id=”qtd” placeholder=”0″>
</div>
<div class=”form-group”>
<label>Valor Unitário (R$)</label>
<input type=”number” id=”valor” placeholder=”0.00″ step=”0.01″>
</div>

<div class=”form-group full-width”>
<label>Medidas da Peça (cm)</label>
<div class=”measurements-container”>
<div>
<label style=”font-weight: normal; font-size: 0.8em;”>Cava</label>
<input type=”number” id=”medCava” placeholder=”cm”>
</div>
<div>
<label style=”font-weight: normal; font-size: 0.8em;”>Busto</label>
<input type=”number” id=”medBusto” placeholder=”cm”>
</div>
<div>
<label style=”font-weight: normal; font-size: 0.8em;”>Comprimento</label>
<input type=”number” id=”medComp” placeholder=”cm”>
</div>
<div>
<label style=”font-weight: normal; font-size: 0.8em;”>Quadril</label>
<input type=”number” id=”medQuad” placeholder=”cm”>
</div>
</div>
</div>

<div class=”form-group full-width”>
<label>Foto (URL da Imagem)</label>
<input type=”text” id=”foto” placeholder=”Cole o link da imagem aqui”>
</div>
<button class=”btn-add” onclick=”adicionarProduto()”>Cadastrar Produto</button>
</div>
</div>

<div class=”card”>
<h2>📋 Inventário Atual</h2>
<table id=”tabelaEstoque”>
<thead>
<tr>
<th>Foto</th>
<th>Produto</th>
<th>Medidas (cm)</th>
<th>Qtd</th>
<th>Valor Total</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

<script>
// Carrega dados salvos ou inicia lista vazia
let produtos = JSON.parse(localStorage.getItem(‘estoqueRoupasv2’)) || [];

// Função para renderizar a tabela
function atualizarTabela() {
const tbody = document.querySelector(‘#tabelaEstoque tbody’);
tbody.innerHTML = ”;

produtos.forEach((produto, index) => {
const valorTotal = (produto.qtd * produto.valor).toFixed(2);

// Verifica se as medidas existem, se não, coloca traço
const m = produto.medidas || {};

const tr = document.createElement(‘tr’);
tr.innerHTML = `
<td><img src=”${produto.foto || ‘https://via.placeholder.com/60&#8217;}” class=”product-img” onerror=”this.src=’https://via.placeholder.com/60′”></td&gt;
<td>
<strong>${produto.modelo}</strong><br>
<small style=”color: #666;”>${produto.marca}</small><br>
<small>R$ ${parseFloat(produto.valor).toFixed(2)} /un</small>
</td>
<td>
<div class=”medidas-list”>
Cava: <strong>${m.cava || ‘-‘}</strong> | Busto: <strong>${m.busto || ‘-‘}</strong><br>
Comp: <strong>${m.comp || ‘-‘}</strong> | Quadril: <strong>${m.quad || ‘-‘}</strong>
</div>
</td>
<td>${produto.qtd} un</td>
<td><span class=”total-badge”>R$ ${valorTotal}</span></td>
<td><button class=”btn-delete” onclick=”deletarProduto(${index})”>Excluir</button></td>
`;
tbody.appendChild(tr);
});
}

// Função para adicionar produto
function adicionarProduto() {
const modelo = document.getElementById(‘modelo’).value;
const marca = document.getElementById(‘marca’).value;
const qtd = document.getElementById(‘qtd’).value;
const valor = document.getElementById(‘valor’).value;
const foto = document.getElementById(‘foto’).value;

// Captura as medidas
const medidas = {
cava: document.getElementById(‘medCava’).value,
busto: document.getElementById(‘medBusto’).value,
comp: document.getElementById(‘medComp’).value,
quad: document.getElementById(‘medQuad’).value
};

if(!modelo || !qtd || !valor) {
alert(“Por favor, preencha pelo menos Modelo, Quantidade e Valor.”);
return;
}

const novoProduto = {
modelo,
marca,
qtd: parseInt(qtd),
valor: parseFloat(valor),
foto,
medidas // Salva o objeto de medidas dentro do produto
};

produtos.push(novoProduto);
salvarDados();
atualizarTabela();
limparFormulario();
}

// Função para deletar
function deletarProduto(index) {
if(confirm(“Tem certeza que deseja remover este item?”)) {
produtos.splice(index, 1);
salvarDados();
atualizarTabela();
}
}

// Salvar no navegador
function salvarDados() {
// Mudei a chave para ‘estoqueRoupasv2’ para garantir compatibilidade com o novo formato
localStorage.setItem(‘estoqueRoupasv2’, JSON.stringify(produtos));
}

function limparFormulario() {
document.getElementById(‘modelo’).value = ”;
document.getElementById(‘marca’).value = ”;
document.getElementById(‘qtd’).value = ”;
document.getElementById(‘valor’).value = ”;
document.getElementById(‘foto’).value = ”;

// Limpar campos de medidas
document.getElementById(‘medCava’).value = ”;
document.getElementById(‘medBusto’).value = ”;
document.getElementById(‘medComp’).value = ”;
document.getElementById(‘medQuad’).value = ”;
}

// Inicializa a tabela ao abrir a página
atualizarTabela();
</script>

</body>
</html>

Partilhar