125 lines
5.7 KiB
HTML
125 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<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>
|
|
<!-- Seccion de Carga de Archivos (Configuracion) -->
|
|
<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>
|
|
<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>
|
|
</section>
|
|
|
|
<!-- Seccion de Calculo -->
|
|
<section id="budget-section" class="card">
|
|
<h2>Nuevo Presupuesto</h2>
|
|
<div class="grid" style="margin-top: 2rem;">
|
|
<!-- Columna Izquierda: Inputs -->
|
|
<div class="budget-form">
|
|
<div class="form-group">
|
|
<label for="select-materia">Materia Prima</label>
|
|
<input type="text" id="search-materia" placeholder="Buscar materia prima...">
|
|
<div class="data-table-container">
|
|
<table id="table-materias">
|
|
<thead>
|
|
<tr><th>Concepto</th><th>Precio</th></tr>
|
|
</thead>
|
|
<tbody id="tbody-materias">
|
|
<tr><td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<input type="number" id="manual-materia" placeholder="O ingresa monto manual" style="margin-top: 0.5rem;">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="select-confeccion">Confección</label>
|
|
<input type="text" id="search-confeccion" placeholder="Buscar tipo de confección...">
|
|
<div class="data-table-container">
|
|
<table id="table-confeccion">
|
|
<thead>
|
|
<tr><th>Trabajo</th><th>Precio</th></tr>
|
|
</thead>
|
|
<tbody id="tbody-confeccion">
|
|
<tr><td colspan="2" style="text-align: center;">Carga un Excel para ver datos</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<input type="number" id="manual-confeccion" placeholder="O ingresa monto manual" style="margin-top: 0.5rem;">
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="form-group">
|
|
<label>Corte (€)</label>
|
|
<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>
|
|
|
|
<button id="btn-calcular" class="btn" style="width: 100%;">CALCULAR TOTALES</button>
|
|
</div>
|
|
|
|
<!-- Columna Derecha: Resultados -->
|
|
<div class="budget-results">
|
|
<div class="price-box" style="margin-bottom: 1.5rem;">
|
|
<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) x 2
|
|
</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>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|