All MicroEvals
# PROMPT: Constructor de simulador interactivo de crédito hi...
Create MicroEval
Header image for # PROMPT: Constructor de simulador interactivo de crédito hi...

# PROMPT: Constructor de simulador interactivo de crédito hi...

Prompt

# PROMPT: Constructor de simulador interactivo de crédito hipotecario Eres un ingeniero financiero + desarrollador front-end. Tu tarea es leer el EXTRACTO de un crédito hipotecario que te pego al final y construir un **simulador interactivo en un único archivo HTML autocontenido** (todo el CSS y JS embebido, sin librerías externas ni CDNs, sin localStorage). El resultado debe abrir en cualquier navegador. ## PASO 1 — Extrae estos datos del extracto - Monto / saldo de capital del préstamo (COP) - Plazo total en meses (o años → conviértelo a meses) - Tasa de interés y SU TIPO: Efectiva Anual (E.A.) o Nominal Mes Vencido. Si no lo dice, asume E.A. (estándar en Colombia). - Valor de la cuota mensual reportada - Sistema de amortización: cuota fija (francés) o cuota decreciente. Si no lo dice, asume cuota fija. - Seguros mensuales (vida deudor + incendio/terremoto). Si no vienen desglosados, estímalos como: cuota reportada − cuota financiera calculada (capital+interés). - Moneda: pesos o UVR (este simulador es para PESOS; si es UVR, adviértelo). - Fecha de la primera cuota (mes y año). Si no está, usa el mes actual y hazla editable. Al inicio de tu respuesta, muestra una tabla resumen con los datos que extrajiste y las suposiciones que hiciste. ## PASO 2 — Matemática financiera (impleméntala EXACTA) - Tasa mensual efectiva a partir de la E.A.: i = (1 + EA)^(1/12) − 1 (si la tasa es Nominal M.V.: i = nominal / 12). - Cuota fija (sistema francés): C = P · i / (1 − (1+i)^(−n)) - Tabla de amortización mes a mes: interés_k = saldo · i; abono_capital_k = C − interés_k; saldo -= abono_capital_k. El total de intereses es la suma de interés_k. - *Abono extra a capital* con dos modos seleccionables: - Reducir plazo: la cuota se mantiene; el abono extra baja el saldo → el crédito termina antes. Recalcula meses ahorrados e intereses ahorrados. - Reducir cuota: se mantiene el plazo; tras cada abono se recalcula una cuota menor sobre el saldo y el plazo restante. - Los seguros se SUMAN a la cuota pero NO amortizan capital (no reducen deuda). - *Fecha de finalización*: a partir de la fecha de la primera cuota, calcula el mes y año exactos de la última cuota, para el escenario base y con abono. - Verifica tus cálculos en código antes de entregar (recomputa cuota y total de intereses; deben cuadrar). ## PASO 3 — El simulador debe tener *Controles editables (recalculan todo en vivo):* monto, plazo, tasa (%), tipo de tasa, seguros mensuales, fecha de primera cuota, un **slider de abono extra mensual a capital*, y un toggle *Reducir plazo / Reducir cuota. Botón "restablecer". *Tarjetas KPI (arriba):* cuota mensual (financiera + seguros), total de intereses, total pagado, plazo real en meses. Cuando haya abono, muestra el ahorro en cada una. *Banner destacado:* "Terminarías de pagar en *[mes año]*", que cambie con el abono y muestre cuántos años se adelanta frente al escenario base. *Gráficas (SVG dibujado a mano, con tooltip al pasar el mouse):* 1. Saldo de la deuda en el tiempo — línea del saldo base vs. con abono. 2. Composición de la cuota — área apilada de interés vs. capital mes a mes, marcando el mes en que el capital supera al interés. 3. Total de intereses — barras apiladas capital vs. intereses, comparando "sin abono" contra "con abono", para que se vea de golpe cuánto se ahorra. *Tabla de amortización* con vista conmutable Resumen por año / Mes a mes, columnas: período, cuota, interés, capital, abono extra, saldo. *Al final:* nota de que en Colombia la Ley 546 de 1999 permite abonar/prepagar sin penalización y el deudor elige si el abono reduce plazo o cuota. ## PASO 4 — Diseño - Todo en español; moneda formateada como pesos colombianos ($98.400.000). - Estética limpia y profesional: tarjetas con borde y sombra suave, tipografía system-ui, números con tabular-nums. - *Modo claro y oscuro* con botón de tema (usa variables CSS). - Paleta accesible y distinguible para daltónicos: azul para "base", naranja para "con abono", verde/aguamarina para capital, amarillo/ámbar para interés. El texto nunca lleva el color de la serie. - Responsivo (usable en móvil). ## Entrega Devuelve *solo el archivo HTML completo*, listo para guardar como .html y abrir. Antes, incluye la tabla-resumen de los datos extraídos y tus suposiciones. --- ### EXTRACTO: [pega aquí tu extracto / captura / texto del estado de cuenta del crédito]

A system prompt was added to support web rendering

Drag to resize