DeBalletAtelier/CosturaBallet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify budget calculator with manual default and dynamic multiplier

Browse Source
This commit is contained in:
Edgar
2026-01-23 12:57:58 +01:00
parent 4bded8a0f7
commit 67cd1e43d5
3 changed files with 215 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
index.html
View File

@@ -1,124 +1,173 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/javascript.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeBallet Atelier - Presupuestador Pro</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container">
<header>
<h1>DeBallet Atelier</h1>
<p>Calculadora de Presupuestos de Alta Costura</p>
</header>
<main> <head>
<!-- Seccion de Carga de Archivos (Configuracion) --> <meta charset="UTF-8" />
<section id="config-section" class="card"> <link rel="icon" type="image/svg+xml" href="/javascript.svg" />
<h2>Configuración de Tarifas</h2> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<p style="margin-bottom: 1.5rem; font-size: 0.9rem; color: #666;"> <title>DeBallet Atelier - Presupuestador Pro</title>
Sube tus archivos Excel para cargar los precios de confección y materiales. <link rel="preconnect" href="https://fonts.googleapis.com">
</p> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<div class="grid"> <link
<div> href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap"
<label>Excel de Confección</label> rel="stylesheet">
<div id="upload-confeccion" class="upload-zone"> </head>
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-confeccion" accept=".xlsx, .xls" class="hidden"> <body>
<span id="status-confeccion" style="font-size: 0.8rem; color: var(--primary-color);"></span> <div id="app">
</div> <div class="container">
</div> <header>
<div> <h1>DeBallet Atelier</h1>
<label>Excel de Materias Básicas</label> <p>Calculadora de Presupuestos de Alta Costura</p>
<div id="upload-materias" class="upload-zone"> </header>
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-materias" accept=".xlsx, .xls" class="hidden"> <main>
<span id="status-materias" style="font-size: 0.8rem; color: var(--primary-color);"></span> <!-- Seccion de Carga de Archivos (Configuracion) -->
</div> <section id="config-section" class="card">
<h2>Configuración de Tarifas</h2>
<p style="margin-bottom: 1.5rem; font-size: 0.9rem; color: #666;">
Sube tus archivos Excel para cargar los precios de confección y materiales.
</p>
<div class="grid">
<div>
<label>Excel de Confección</label>
<div id="upload-confeccion" class="upload-zone">
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-confeccion" accept=".xlsx, .xls" class="hidden">
<span id="status-confeccion" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div> </div>
</div> </div>
</section> <div>
<label>Excel de Materias Básicas</label>
<div id="upload-materias" class="upload-zone">
<p>Arrastra aquí o haz clic para subir</p>
<input type="file" id="file-materias" accept=".xlsx, .xls" class="hidden">
<span id="status-materias" style="font-size: 0.8rem; color: var(--primary-color);"></span>
</div>
</div>
<div>
<label>Multiplicador de Beneficio</label>
<div class="form-group" style="margin-top: 0.5rem;">
<input type="number" id="input-multiplicador" value="2" step="0.1" min="1" style="width: 100px;">
<span style="font-size: 0.8rem; color: #666; margin-left: 0.5rem;">(x sobre el coste total)</span>
</div>
</div>
</div>
</section>
<!-- Seccion de Calculo --> <!-- Seccion de Calculo -->
<section id="budget-section" class="card"> <section id="budget-section" class="card">
<h2>Nuevo Presupuesto</h2> <h2>Nuevo Presupuesto</h2>
<div class="grid" style="margin-top: 2rem;"> <div class="grid" style="margin-top: 2rem;">
<!-- Columna Izquierda: Inputs --> <!-- Columna Izquierda: Inputs -->
<div class="budget-form"> <div class="budget-form">
<div class="form-group"> <div class="form-group">
<label for="select-materia">Materia Prima</label> <label>Materia Prima</label>
<div class="input-toggle">
<button type="button" class="toggle-btn" data-target="materia-excel"
data-group="materia">Excel</button>
<button type="button" class="toggle-btn active" data-target="materia-manual"
data-group="materia">Manual</button>
</div>
<div id="materia-excel" class="toggle-content hidden">
<input type="text" id="search-materia" placeholder="Buscar materia prima..."> <input type="text" id="search-materia" placeholder="Buscar materia prima...">
<div class="data-table-container"> <div class="data-table-container">
<table id="table-materias"> <table id="table-materias">
<thead> <thead>
<tr><th>Concepto</th><th>Precio</th></tr> <tr>
<th>Concepto</th>
<th>Precio</th>
</tr>
</thead> </thead>
<tbody id="tbody-materias"> <tbody id="tbody-materias">
<tr><td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td></tr> <tr>
<td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<input type="number" id="manual-materia" placeholder="O ingresa monto manual" style="margin-top: 0.5rem;">
</div> </div>
<div class="form-group"> <div id="materia-manual" class="toggle-content">
<label for="select-confeccion">Confección</label> <input type="number" id="manual-materia" placeholder="Ingresa monto manual"
style="margin-top: 0.5rem;">
</div>
</div>
<div class="form-group">
<label>Confección</label>
<div class="input-toggle">
<button type="button" class="toggle-btn" data-target="confeccion-excel"
data-group="confeccion">Excel</button>
<button type="button" class="toggle-btn active" data-target="confeccion-manual"
data-group="confeccion">Manual</button>
</div>
<div id="confeccion-excel" class="toggle-content hidden">
<input type="text" id="search-confeccion" placeholder="Buscar tipo de confección..."> <input type="text" id="search-confeccion" placeholder="Buscar tipo de confección...">
<div class="data-table-container"> <div class="data-table-container">
<table id="table-confeccion"> <table id="table-confeccion">
<thead> <thead>
<tr><th>Trabajo</th><th>Precio</th></tr> <tr>
<th>Trabajo</th>
<th>Precio</th>
</tr>
</thead> </thead>
<tbody id="tbody-confeccion"> <tbody id="tbody-confeccion">
<tr><td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td></tr> <tr>
<td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<input type="number" id="manual-confeccion" placeholder="O ingresa monto manual" style="margin-top: 0.5rem;">
</div> </div>
<div class="grid"> <div id="confeccion-manual" class="toggle-content">
<div class="form-group"> <input type="number" id="manual-confeccion" placeholder="Ingresa monto manual"
<label>Corte (€)</label> style="margin-top: 0.5rem;">
<input type="number" id="costo-corte" value="1" step="0.5">
</div>
<div class="form-group">
<label>Distribución (€)</label>
<input type="number" id="costo-distribucion" value="1" step="0.5">
</div>
</div> </div>
<button id="btn-calcular" class="btn" style="width: 100%;">CALCULAR TOTALES</button>
</div> </div>
<!-- Columna Derecha: Resultados --> <div class="grid">
<div class="budget-results"> <div class="form-group">
<div class="price-box" style="margin-bottom: 1.5rem;"> <label>Corte (€)</label>
<div class="price-label">Precio de Venta</div> <input type="number" id="costo-corte" value="1" step="0.5">
<div class="price-value"><span id="res-venta">0.00</span><span class="currency">€</span></div>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Fórmula: (Materias + Confección + Corte + Dist) x 2
</p>
</div> </div>
<div class="form-group">
<label>Distribución (€)</label>
<input type="number" id="costo-distribucion" value="1" step="0.5">
</div>
</div>
<div class="price-box coste"> <button id="btn-calcular" class="btn" style="width: 100%;">CALCULAR TOTALES</button>
<div class="price-label">Precio de Coste</div> </div>
<div class="price-value" style="font-size: 1.8rem;"><span id="res-coste">0.00</span><span class="currency">€</span></div>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;"> <!-- Columna Derecha: Resultados -->
Suma total de gastos directos. <div class="budget-results">
</p> <div class="price-box" style="margin-bottom: 1.5rem;">
</div> <div class="price-label">Precio de Venta</div>
<div class="price-value"><span id="res-venta">0.00</span><span class="currency">€</span></div>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Fórmula: (Materias + Confección + Corte + Dist) <span id="formula-multi">x 2</span>
</p>
</div>
<div class="price-box coste">
<div class="price-label">Precio de Coste</div>
<div class="price-value" style="font-size: 1.8rem;"><span id="res-coste">0.00</span><span
class="currency">€</span></div>
<p style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
Suma total de gastos directos.
</p>
</div> </div>
</div> </div>
</section> </div>
</main> </section>
</div> </main>
</div> </div>
<script type="module" src="/src/main.js"></script> </div>
</body> <script type="module" src="/src/main.js"></script>
</body>
</html> </html>

31
src/main.js
View File

@@ -21,10 +21,36 @@ const inputMateriaTotal = document.getElementById('manual-materia');
const inputConfeccionTotal = document.getElementById('manual-confeccion'); const inputConfeccionTotal = document.getElementById('manual-confeccion');
const inputCorte = document.getElementById('costo-corte'); const inputCorte = document.getElementById('costo-corte');
const inputDistribucion = document.getElementById('costo-distribucion'); const inputDistribucion = document.getElementById('costo-distribucion');
const btnCalcular = document.getElementById('btn-calcular'); const btnCalcular = document.getElementById('btn-calcular');
const resVenta = document.getElementById('res-venta'); const resVenta = document.getElementById('res-venta');
const resCoste = document.getElementById('res-coste'); const resCoste = document.getElementById('res-coste');
const inputMultiplicador = document.getElementById('input-multiplicador');
const formulaMulti = document.getElementById('formula-multi');
// Toggle Buttons
const toggleBtns = document.querySelectorAll('.toggle-btn');
toggleBtns.forEach(btn => {
btn.onclick = () => {
const group = btn.dataset.group;
const targetId = btn.dataset.target;
// Update Buttons
document.querySelectorAll(`.toggle-btn[data-group="${group}"]`).forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Update Content
const contentGroup = group === 'materia' ? ['materia-excel', 'materia-manual'] : ['confeccion-excel', 'confeccion-manual'];
contentGroup.forEach(id => {
document.getElementById(id).classList.toggle('hidden', id !== targetId);
});
};
});
// Listener para actualizar el texto de la fórmula cuando cambie el multiplicador
inputMultiplicador.oninput = () => {
formulaMulti.innerText = `x ${inputMultiplicador.value}`;
};
// Handlers para subida de archivos // Handlers para subida de archivos
uploadConfeccion.onclick = () => fileConfeccion.click(); uploadConfeccion.onclick = () => fileConfeccion.click();
@@ -102,9 +128,10 @@ btnCalcular.onclick = () => {
const c = parseFloat(inputConfeccionTotal.value) || 0; const c = parseFloat(inputConfeccionTotal.value) || 0;
const corte = parseFloat(inputCorte.value) || 0; const corte = parseFloat(inputCorte.value) || 0;
const dist = parseFloat(inputDistribucion.value) || 0; const dist = parseFloat(inputDistribucion.value) || 0;
const multiplicador = parseFloat(inputMultiplicador.value) || 2;
const costeTotal = m + c + corte + dist; const costeTotal = m + c + corte + dist;
const precioVenta = costeTotal * 2; const precioVenta = costeTotal * multiplicador;
resCoste.innerText = costeTotal.toFixed(2); resCoste.innerText = costeTotal.toFixed(2);
resVenta.innerText = precioVenta.toFixed(2); resVenta.innerText = precioVenta.toFixed(2);

51
src/style.css
View File

@@ -5,9 +5,11 @@
/* Palette: Ballet Atelier */ /* Palette: Ballet Atelier */
--bg-color: #fcf9f8; --bg-color: #fcf9f8;
--card-bg: rgba(255, 255, 255, 0.85); --card-bg: rgba(255, 255, 255, 0.85);
--primary-color: #d4a373; /* Satin Tan */ --primary-color: #d4a373;
/* Satin Tan */
--primary-light: #faedcd; --primary-light: #faedcd;
--accent-color: #e76f51; /* Deep Silk */ --accent-color: #e76f51;
/* Deep Silk */
--text-dark: #264653; --text-dark: #264653;
--text-muted: #6d6d6d; --text-muted: #6d6d6d;
--border-color: #e9edc9; --border-color: #e9edc9;
@@ -31,7 +33,9 @@ body {
flex-direction: column; flex-direction: column;
} }
h1, h2, h3 { h1,
h2,
h3 {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 700; font-weight: 700;
} }
@@ -87,7 +91,8 @@ label {
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
input, select { input,
select {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 1px solid #ddd; border: 1px solid #ddd;
@@ -97,7 +102,8 @@ input, select {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
input:focus, select:focus { input:focus,
select:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light); box-shadow: 0 0 0 3px var(--primary-light);
@@ -208,7 +214,8 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
th, td { th,
td {
padding: 0.75rem; padding: 0.75rem;
text-align: left; text-align: left;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@@ -245,3 +252,35 @@ tr:hover {
.hidden { .hidden {
display: none; display: none;
} }
/* Input Toggles */
.input-toggle {
display: flex;
background: #f0f0f0;
padding: 0.25rem;
border-radius: 50px;
margin-bottom: 1rem;
width: fit-content;
}
.toggle-btn {
border: none;
background: none;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text-muted);
}
.toggle-btn.active {
background: white;
color: var(--primary-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.toggle-content {
transition: all 0.3s ease;
}