diff --git a/index.html b/index.html index a805f5a..4962d46 100644 --- a/index.html +++ b/index.html @@ -1,124 +1,173 @@ - - - - - DeBallet Atelier - Presupuestador Pro - - - - - -
-
-
-

DeBallet Atelier

-

Calculadora de Presupuestos de Alta Costura

-
-
- -
-

Configuración de Tarifas

-

- Sube tus archivos Excel para cargar los precios de confección y materiales. -

-
-
- -
-

Arrastra aquí o haz clic para subir

- - -
-
-
- -
-

Arrastra aquí o haz clic para subir

- - -
+ + + + + DeBallet Atelier - Presupuestador Pro + + + + + + +
+
+
+

DeBallet Atelier

+

Calculadora de Presupuestos de Alta Costura

+
+ +
+ +
+

Configuración de Tarifas

+

+ Sube tus archivos Excel para cargar los precios de confección y materiales. +

+
+
+ +
+

Arrastra aquí o haz clic para subir

+ +
-
+
+ +
+

Arrastra aquí o haz clic para subir

+ + +
+
+
+ +
+ + (x sobre el coste total) +
+
+
+
- -
-

Nuevo Presupuesto

-
- -
-
- + +
+

Nuevo Presupuesto

+
+ +
+
+ +
+ + +
+ + -
- +
+ +
+
+ +
+ +
+ + +
+ + -
-
- - -
-
- - -
+
+
- -
- -
-
-
Precio de Venta
-
0.00€
-

- Fórmula: (Materias + Confección + Corte + Dist) x 2 -

+
+
+ +
+
+ + +
+
-
-
Precio de Coste
-
0.00€
-

- Suma total de gastos directos. -

-
+ +
+ + +
+
+
Precio de Venta
+
0.00€
+

+ Fórmula: (Materias + Confección + Corte + Dist) x 2 +

+
+ +
+
Precio de Coste
+
0.00€
+

+ Suma total de gastos directos. +

-
-
-
+
+ + - - - + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index d67a3b4..f874a80 100644 --- a/src/main.js +++ b/src/main.js @@ -21,10 +21,36 @@ const inputMateriaTotal = document.getElementById('manual-materia'); const inputConfeccionTotal = document.getElementById('manual-confeccion'); const inputCorte = document.getElementById('costo-corte'); const inputDistribucion = document.getElementById('costo-distribucion'); - const btnCalcular = document.getElementById('btn-calcular'); + const resVenta = document.getElementById('res-venta'); 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 uploadConfeccion.onclick = () => fileConfeccion.click(); @@ -56,7 +82,7 @@ async function handleFileUpload(event, type) { function renderTable(container, data, keys, targetInput) { container.innerHTML = ''; - + // Detectar nombres de columnas automáticamente si no son estándar const availableKeys = data.length > 0 ? Object.keys(data[0]) : []; const nameKey = availableKeys[0] || 'Concepto'; @@ -82,7 +108,7 @@ function renderTable(container, data, keys, targetInput) { // Búsqueda en tablas searchMateria.oninput = (e) => { const term = e.target.value.toLowerCase(); - const filtered = dataMaterias.filter(item => + const filtered = dataMaterias.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(term)) ); renderTable(tbodyMaterias, filtered, [], inputMateriaTotal); @@ -90,7 +116,7 @@ searchMateria.oninput = (e) => { searchConfeccion.oninput = (e) => { const term = e.target.value.toLowerCase(); - const filtered = dataConfeccion.filter(item => + const filtered = dataConfeccion.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(term)) ); renderTable(tbodyConfeccion, filtered, [], inputConfeccionTotal); @@ -102,9 +128,10 @@ btnCalcular.onclick = () => { const c = parseFloat(inputConfeccionTotal.value) || 0; const corte = parseFloat(inputCorte.value) || 0; const dist = parseFloat(inputDistribucion.value) || 0; + const multiplicador = parseFloat(inputMultiplicador.value) || 2; const costeTotal = m + c + corte + dist; - const precioVenta = costeTotal * 2; + const precioVenta = costeTotal * multiplicador; resCoste.innerText = costeTotal.toFixed(2); resVenta.innerText = precioVenta.toFixed(2); diff --git a/src/style.css b/src/style.css index a42122c..55af577 100644 --- a/src/style.css +++ b/src/style.css @@ -1,13 +1,15 @@ :root { --font-serif: 'Playfair Display', serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; - + /* Palette: Ballet Atelier */ --bg-color: #fcf9f8; --card-bg: rgba(255, 255, 255, 0.85); - --primary-color: #d4a373; /* Satin Tan */ + --primary-color: #d4a373; + /* Satin Tan */ --primary-light: #faedcd; - --accent-color: #e76f51; /* Deep Silk */ + --accent-color: #e76f51; + /* Deep Silk */ --text-dark: #264653; --text-muted: #6d6d6d; --border-color: #e9edc9; @@ -31,7 +33,9 @@ body { flex-direction: column; } -h1, h2, h3 { +h1, +h2, +h3 { font-family: var(--font-serif); font-weight: 700; } @@ -87,7 +91,8 @@ label { letter-spacing: 0.5px; } -input, select { +input, +select { width: 100%; padding: 1rem; border: 1px solid #ddd; @@ -97,7 +102,8 @@ input, select { transition: all 0.3s ease; } -input:focus, select:focus { +input:focus, +select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); @@ -208,7 +214,8 @@ table { border-collapse: collapse; } -th, td { +th, +td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #eee; @@ -245,3 +252,35 @@ tr:hover { .hidden { 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; +} \ No newline at end of file