Hugging Face's logo

Spaces:
Pablosolaris
/
VCM
Running

App Files Community
Pablosolaris commited on
Commit
d150bdb
·
verified ·
1 Parent(s): 8a919b3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +779 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mesa Inteligente
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mesa-inteligente
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,779 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculadora de Crédito</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <style>
14
+ .dark-mode {
15
+ background-color: #1a202c;
16
+ color: #f7fafc;
17
+ }
18
+ .dark-mode .card {
19
+ background-color: #2d3748;
20
+ border-color: #4a5568;
21
+ }
22
+ .dark-mode input, .dark-mode select {
23
+ background-color: #2d3748;
24
+ border-color: #4a5568;
25
+ color: #f7fafc;
26
+ }
27
+ .dark-mode .btn-primary {
28
+ background-color: #4299e1;
29
+ }
30
+ .dark-mode .btn-secondary {
31
+ background-color: #718096;
32
+ }
33
+ .dark-mode .table-container {
34
+ background-color: #2d3748;
35
+ }
36
+ .dark-mode table {
37
+ color: #f7fafc;
38
+ }
39
+ .dark-mode table th, .dark-mode table td {
40
+ border-color: #4a5568;
41
+ }
42
+ .dark-mode table tr:nth-child(even) {
43
+ background-color: #4a5568;
44
+ }
45
+ .transition-all {
46
+ transition: all 0.3s ease;
47
+ }
48
+ .card {
49
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
50
+ }
51
+ .btn-primary {
52
+ background-color: #3182ce;
53
+ color: white;
54
+ }
55
+ .btn-primary:hover {
56
+ background-color: #2c5282;
57
+ }
58
+ .btn-secondary {
59
+ background-color: #a0aec0;
60
+ color: white;
61
+ }
62
+ .btn-secondary:hover {
63
+ background-color: #718096;
64
+ }
65
+ .table-container {
66
+ max-height: 400px;
67
+ overflow-y: auto;
68
+ }
69
+ table {
70
+ width: 100%;
71
+ border-collapse: collapse;
72
+ }
73
+ table th, table td {
74
+ padding: 0.75rem;
75
+ text-align: left;
76
+ border-bottom: 1px solid #e2e8f0;
77
+ }
78
+ table tr:nth-child(even) {
79
+ background-color: #f8fafc;
80
+ }
81
+ .chart-container {
82
+ position: relative;
83
+ height: 300px;
84
+ width: 100%;
85
+ }
86
+ .tooltip {
87
+ position: relative;
88
+ display: inline-block;
89
+ }
90
+ .tooltip .tooltip-text {
91
+ visibility: hidden;
92
+ width: 200px;
93
+ background-color: #555;
94
+ color: #fff;
95
+ text-align: center;
96
+ border-radius: 6px;
97
+ padding: 5px;
98
+ position: absolute;
99
+ z-index: 1;
100
+ bottom: 125%;
101
+ left: 50%;
102
+ margin-left: -100px;
103
+ opacity: 0;
104
+ transition: opacity 0.3s;
105
+ }
106
+ .tooltip:hover .tooltip-text {
107
+ visibility: visible;
108
+ opacity: 1;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="bg-gray-100 transition-all">
113
+ <div class="container mx-auto px-4 py-8">
114
+ <!-- Header -->
115
+ <header class="flex justify-between items-center mb-8">
116
+ <h1 class="text-3xl font-bold text-blue-800" id="title">Calculadora de Crédito</h1>
117
+ <div class="flex space-x-4">
118
+ <div class="tooltip">
119
+ <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
120
+ <i class="fas fa-moon"></i>
121
+ </button>
122
+ <span class="tooltip-text" id="darkModeTooltip">Modo oscuro</span>
123
+ </div>
124
+ <div class="relative">
125
+ <select id="languageSelect" class="p-2 rounded border border-gray-300 bg-white">
126
+ <option value="es">Español</option>
127
+ <option value="en">English</option>
128
+ <option value="fr">Français</option>
129
+ </select>
130
+ </div>
131
+ </div>
132
+ </header>
133
+
134
+ <!-- Main Content -->
135
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
136
+ <!-- Input Section -->
137
+ <div class="lg:col-span-1">
138
+ <div class="card bg-white rounded-lg shadow p-6">
139
+ <h2 class="text-xl font-semibold mb-4" id="inputTitle">Datos del Crédito</h2>
140
+
141
+ <div class="mb-4">
142
+ <label for="amount" class="block text-sm font-medium text-gray-700 mb-1" id="amountLabel">Monto Total</label>
143
+ <input type="number" id="amount" class="w-full p-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" min="0">
144
+ </div>
145
+
146
+ <div class="mb-4">
147
+ <label for="currency" class="block text-sm font-medium text-gray-700 mb-1" id="currencyLabel">Moneda</label>
148
+ <select id="currency" class="w-full p-2 border border-gray-300 rounded">
149
+ <option value="MXN">MXN - Peso Mexicano</option>
150
+ <option value="USD">USD - Dólar Estadounidense</option>
151
+ <option value="CAD">CAD - Dólar Canadiense</option>
152
+ <option value="CLP">CLP - Peso Chileno</option>
153
+ <option value="ARS">ARS - Peso Argentino</option>
154
+ <option value="COP">COP - Peso Colombiano</option>
155
+ <option value="EUR">EUR - Euro</option>
156
+ </select>
157
+ </div>
158
+
159
+ <div class="mb-6">
160
+ <label class="block text-sm font-medium text-gray-700 mb-1" id="termLabel">Plazo del Financiamiento Intermedio (20%)</label>
161
+ <div class="flex space-x-4 mt-2">
162
+ <div class="flex items-center">
163
+ <input id="term6" name="term" type="radio" value="6" class="h-4 w-4 text-blue-600 focus:ring-blue-500" checked>
164
+ <label for="term6" class="ml-2 block text-sm text-gray-700">
165
+ <span id="term6Label">6 meses (4.99%)</span>
166
+ </label>
167
+ </div>
168
+ <div class="flex items-center">
169
+ <input id="term9" name="term" type="radio" value="9" class="h-4 w-4 text-blue-600 focus:ring-blue-500">
170
+ <label for="term9" class="ml-2 block text-sm text-gray-700">
171
+ <span id="term9Label">9 meses (6.99%)</span>
172
+ </label>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <button id="calculateBtn" class="w-full btn-primary py-2 px-4 rounded font-medium" id="calculateBtnText">
178
+ Calcular
179
+ </button>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Results Section -->
184
+ <div class="lg:col-span-2">
185
+ <div class="card bg-white rounded-lg shadow p-6 mb-6">
186
+ <h2 class="text-xl font-semibold mb-4" id="summaryTitle">Resumen del Crédito</h2>
187
+
188
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
189
+ <div class="bg-blue-50 p-4 rounded-lg">
190
+ <p class="text-sm text-blue-800 font-medium" id="totalAmountLabel">Monto Total</p>
191
+ <p id="totalAmount" class="text-2xl font-bold text-blue-900">$0.00</p>
192
+ </div>
193
+ <div class="bg-green-50 p-4 rounded-lg">
194
+ <p class="text-sm text-green-800 font-medium" id="downPaymentLabel">Enganche (10%)</p>
195
+ <p id="downPayment" class="text-2xl font-bold text-green-900">$0.00</p>
196
+ </div>
197
+ <div class="bg-yellow-50 p-4 rounded-lg">
198
+ <p class="text-sm text-yellow-800 font-medium" id="interestLabel">Interés Generado (20%)</p>
199
+ <p id="interest" class="text-2xl font-bold text-yellow-900">$0.00</p>
200
+ </div>
201
+ <div class="bg-purple-50 p-4 rounded-lg">
202
+ <p class="text-sm text-purple-800 font-medium" id="totalPaymentLabel">Total a Pagar</p>
203
+ <p id="totalPayment" class="text-2xl font-bold text-purple-900">$0.00</p>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
208
+ <div>
209
+ <h3 class="font-medium mb-2" id="monthlyPaymentsLabel">Pagos Mensuales</h3>
210
+ <div class="bg-gray-50 p-4 rounded-lg">
211
+ <p class="text-sm text-gray-600" id="intermediatePaymentLabel">Financiamiento intermedio (20% con interés):</p>
212
+ <p id="intermediatePayment" class="text-lg font-semibold">$0.00</p>
213
+ <p class="text-sm text-gray-600 mt-2" id="longTermPaymentLabel">Financiamiento largo plazo (70% sin interés):</p>
214
+ <p id="longTermPayment" class="text-lg font-semibold">$0.00</p>
215
+ </div>
216
+ </div>
217
+
218
+ <div>
219
+ <h3 class="font-medium mb-2" id="comparisonTitle">Comparación de Plazos</h3>
220
+ <div class="bg-gray-50 p-4 rounded-lg">
221
+ <p class="text-sm text-gray-600" id="term6ComparisonLabel">6 meses: Total interés</p>
222
+ <p id="term6Comparison" class="text-lg font-semibold">$0.00</p>
223
+ <p class="text-sm text-gray-600 mt-2" id="term9ComparisonLabel">9 meses: Total interés</p>
224
+ <p id="term9Comparison" class="text-lg font-semibold">$0.00</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Charts Section -->
231
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
232
+ <div class="card bg-white rounded-lg shadow p-4">
233
+ <h3 class="font-medium mb-2" id="distributionChartTitle">Distribución del Pago</h3>
234
+ <div class="chart-container">
235
+ <canvas id="pieChart"></canvas>
236
+ </div>
237
+ </div>
238
+ <div class="card bg-white rounded-lg shadow p-4">
239
+ <h3 class="font-medium mb-2" id="paymentEvolutionTitle">Evolución de Pagos</h3>
240
+ <div class="chart-container">
241
+ <canvas id="lineChart"></canvas>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Amortization Table -->
247
+ <div class="card bg-white rounded-lg shadow p-6">
248
+ <div class="flex justify-between items-center mb-4">
249
+ <h2 class="text-xl font-semibold" id="amortizationTitle">Tabla de Amortización</h2>
250
+ <div class="flex space-x-2">
251
+ <button id="exportExcel" class="btn-secondary py-1 px-3 rounded text-sm">
252
+ <i class="fas fa-file-excel mr-1"></i>
253
+ <span id="exportExcelText">Excel</span>
254
+ </button>
255
+ <button id="exportPDF" class="btn-secondary py-1 px-3 rounded text-sm">
256
+ <i class="fas fa-file-pdf mr-1"></i>
257
+ <span id="exportPDFText">PDF</span>
258
+ </button>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="table-container">
263
+ <table id="amortizationTable">
264
+ <thead>
265
+ <tr class="bg-gray-100">
266
+ <th class="py-2" id="monthHeader">Mes</th>
267
+ <th class="py-2" id="intermediatePaymentHeader">Pago 20% (con interés)</th>
268
+ <th class="py-2" id="longTermPaymentHeader">Pago 70% (sin interés)</th>
269
+ <th class="py-2" id="remainingBalanceHeader">Saldo Restante</th>
270
+ </tr>
271
+ </thead>
272
+ <tbody id="amortizationBody">
273
+ <!-- Table content will be generated by JavaScript -->
274
+ </tbody>
275
+ </table>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <script>
283
+ // Translations
284
+ const translations = {
285
+ es: {
286
+ title: "Calculadora de Crédito",
287
+ inputTitle: "Datos del Crédito",
288
+ amountLabel: "Monto Total",
289
+ currencyLabel: "Moneda",
290
+ termLabel: "Plazo del Financiamiento Intermedio (20%)",
291
+ term6Label: "6 meses (4.99%)",
292
+ term9Label: "9 meses (6.99%)",
293
+ calculateBtnText: "Calcular",
294
+ summaryTitle: "Resumen del Crédito",
295
+ totalAmountLabel: "Monto Total",
296
+ downPaymentLabel: "Enganche (10%)",
297
+ interestLabel: "Interés Generado (20%)",
298
+ totalPaymentLabel: "Total a Pagar",
299
+ monthlyPaymentsLabel: "Pagos Mensuales",
300
+ intermediatePaymentLabel: "Financiamiento intermedio (20% con interés):",
301
+ longTermPaymentLabel: "Financiamiento largo plazo (70% sin interés):",
302
+ comparisonTitle: "Comparación de Plazos",
303
+ term6ComparisonLabel: "6 meses: Total interés",
304
+ term9ComparisonLabel: "9 meses: Total interés",
305
+ distributionChartTitle: "Distribución del Pago",
306
+ paymentEvolutionTitle: "Evolución de Pagos",
307
+ amortizationTitle: "Tabla de Amortización",
308
+ exportExcelText: "Excel",
309
+ exportPDFText: "PDF",
310
+ monthHeader: "Mes",
311
+ intermediatePaymentHeader: "Pago 20% (con interés)",
312
+ longTermPaymentHeader: "Pago 70% (sin interés)",
313
+ remainingBalanceHeader: "Saldo Restante",
314
+ darkModeTooltip: "Modo oscuro"
315
+ },
316
+ en: {
317
+ title: "Loan Calculator",
318
+ inputTitle: "Loan Data",
319
+ amountLabel: "Total Amount",
320
+ currencyLabel: "Currency",
321
+ termLabel: "Intermediate Financing Term (20%)",
322
+ term6Label: "6 months (4.99%)",
323
+ term9Label: "9 months (6.99%)",
324
+ calculateBtnText: "Calculate",
325
+ summaryTitle: "Loan Summary",
326
+ totalAmountLabel: "Total Amount",
327
+ downPaymentLabel: "Down Payment (10%)",
328
+ interestLabel: "Generated Interest (20%)",
329
+ totalPaymentLabel: "Total Payment",
330
+ monthlyPaymentsLabel: "Monthly Payments",
331
+ intermediatePaymentLabel: "Intermediate financing (20% with interest):",
332
+ longTermPaymentLabel: "Long term financing (70% without interest):",
333
+ comparisonTitle: "Term Comparison",
334
+ term6ComparisonLabel: "6 months: Total interest",
335
+ term9ComparisonLabel: "9 months: Total interest",
336
+ distributionChartTitle: "Payment Distribution",
337
+ paymentEvolutionTitle: "Payment Evolution",
338
+ amortizationTitle: "Amortization Table",
339
+ exportExcelText: "Excel",
340
+ exportPDFText: "PDF",
341
+ monthHeader: "Month",
342
+ intermediatePaymentHeader: "20% Payment (with interest)",
343
+ longTermPaymentHeader: "70% Payment (without interest)",
344
+ remainingBalanceHeader: "Remaining Balance",
345
+ darkModeTooltip: "Dark mode"
346
+ },
347
+ fr: {
348
+ title: "Calculateur de Crédit",
349
+ inputTitle: "Données du Crédit",
350
+ amountLabel: "Montant Total",
351
+ currencyLabel: "Devise",
352
+ termLabel: "Durée du Financement Intermédiaire (20%)",
353
+ term6Label: "6 mois (4.99%)",
354
+ term9Label: "9 mois (6.99%)",
355
+ calculateBtnText: "Calculer",
356
+ summaryTitle: "Résumé du Crédit",
357
+ totalAmountLabel: "Montant Total",
358
+ downPaymentLabel: "Acompte (10%)",
359
+ interestLabel: "Intérêt Généré (20%)",
360
+ totalPaymentLabel: "Total à Payer",
361
+ monthlyPaymentsLabel: "Paiements Mensuels",
362
+ intermediatePaymentLabel: "Financement intermédiaire (20% avec intérêt):",
363
+ longTermPaymentLabel: "Financement à long terme (70% sans intérêt):",
364
+ comparisonTitle: "Comparaison des Durées",
365
+ term6ComparisonLabel: "6 mois: Intérêt total",
366
+ term9ComparisonLabel: "9 mois: Intérêt total",
367
+ distributionChartTitle: "Répartition des Paiements",
368
+ paymentEvolutionTitle: "Évolution des Paiements",
369
+ amortizationTitle: "Tableau d'Amortissement",
370
+ exportExcelText: "Excel",
371
+ exportPDFText: "PDF",
372
+ monthHeader: "Mois",
373
+ intermediatePaymentHeader: "Paiement 20% (avec intérêt)",
374
+ longTermPaymentHeader: "Paiement 70% (sans intérêt)",
375
+ remainingBalanceHeader: "Solde Restant",
376
+ darkModeTooltip: "Mode sombre"
377
+ }
378
+ };
379
+
380
+ // DOM Elements
381
+ const amountInput = document.getElementById('amount');
382
+ const currencySelect = document.getElementById('currency');
383
+ const term6Radio = document.getElementById('term6');
384
+ const term9Radio = document.getElementById('term9');
385
+ const calculateBtn = document.getElementById('calculateBtn');
386
+ const languageSelect = document.getElementById('languageSelect');
387
+ const darkModeToggle = document.getElementById('darkModeToggle');
388
+ const darkModeTooltip = document.getElementById('darkModeTooltip');
389
+
390
+ // Results Elements
391
+ const totalAmountEl = document.getElementById('totalAmount');
392
+ const downPaymentEl = document.getElementById('downPayment');
393
+ const interestEl = document.getElementById('interest');
394
+ const totalPaymentEl = document.getElementById('totalPayment');
395
+ const intermediatePaymentEl = document.getElementById('intermediatePayment');
396
+ const longTermPaymentEl = document.getElementById('longTermPayment');
397
+ const term6ComparisonEl = document.getElementById('term6Comparison');
398
+ const term9ComparisonEl = document.getElementById('term9Comparison');
399
+ const amortizationBody = document.getElementById('amortizationBody');
400
+
401
+ // Charts
402
+ let pieChart, lineChart;
403
+
404
+ // Dark Mode
405
+ let darkMode = false;
406
+
407
+ // Current language
408
+ let currentLanguage = 'es';
409
+
410
+ // Initialize the calculator
411
+ function init() {
412
+ // Event Listeners
413
+ calculateBtn.addEventListener('click', calculateLoan);
414
+ amountInput.addEventListener('input', calculateLoan);
415
+ term6Radio.addEventListener('change', calculateLoan);
416
+ term9Radio.addEventListener('change', calculateLoan);
417
+ languageSelect.addEventListener('change', changeLanguage);
418
+ darkModeToggle.addEventListener('click', toggleDarkMode);
419
+ document.getElementById('exportExcel').addEventListener('click', exportToExcel);
420
+ document.getElementById('exportPDF').addEventListener('click', exportToPDF);
421
+
422
+ // Initial calculation
423
+ calculateLoan();
424
+ }
425
+
426
+ // Calculate loan details
427
+ function calculateLoan() {
428
+ const amount = parseFloat(amountInput.value) || 0;
429
+ const currency = currencySelect.value;
430
+ const term = term6Radio.checked ? 6 : 9;
431
+ const interestRate = term6Radio.checked ? 0.0499 : 0.0699;
432
+
433
+ // Calculate payments
434
+ const downPayment = amount * 0.1;
435
+ const intermediateAmount = amount * 0.2;
436
+ const longTermAmount = amount * 0.7;
437
+
438
+ // Calculate intermediate payment with compound interest
439
+ const monthlyRate = interestRate / 12;
440
+ const intermediateMonthlyPayment = intermediateAmount * (monthlyRate * Math.pow(1 + monthlyRate, term)) / (Math.pow(1 + monthlyRate, term) - 1);
441
+ const totalIntermediatePayment = intermediateMonthlyPayment * term;
442
+ const interestPaid = totalIntermediatePayment - intermediateAmount;
443
+
444
+ // Calculate long term payment (48 months no interest)
445
+ const longTermMonthlyPayment = longTermAmount / 48;
446
+
447
+ // Calculate total payment
448
+ const totalPayment = downPayment + totalIntermediatePayment + longTermAmount;
449
+
450
+ // Calculate comparison values
451
+ const term6MonthlyRate = 0.0499 / 12;
452
+ const term6IntermediateMonthlyPayment = intermediateAmount * (term6MonthlyRate * Math.pow(1 + term6MonthlyRate, 6)) / (Math.pow(1 + term6MonthlyRate, 6) - 1);
453
+ const term6TotalInterest = (term6IntermediateMonthlyPayment * 6) - intermediateAmount;
454
+
455
+ const term9MonthlyRate = 0.0699 / 12;
456
+ const term9IntermediateMonthlyPayment = intermediateAmount * (term9MonthlyRate * Math.pow(1 + term9MonthlyRate, 9)) / (Math.pow(1 + term9MonthlyRate, 9) - 1);
457
+ const term9TotalInterest = (term9IntermediateMonthlyPayment * 9) - intermediateAmount;
458
+
459
+ // Update UI
460
+ updateResults(currency, amount, downPayment, interestPaid, totalPayment, intermediateMonthlyPayment, longTermMonthlyPayment, term6TotalInterest, term9TotalInterest);
461
+ updateAmortizationTable(currency, term, intermediateMonthlyPayment, longTermMonthlyPayment, intermediateAmount, longTermAmount);
462
+ updateCharts(currency, downPayment, intermediateAmount + interestPaid, longTermAmount);
463
+ }
464
+
465
+ // Update results in UI
466
+ function updateResults(currency, amount, downPayment, interest, totalPayment, intermediatePayment, longTermPayment, term6Interest, term9Interest) {
467
+ totalAmountEl.textContent = formatCurrency(currency, amount);
468
+ downPaymentEl.textContent = formatCurrency(currency, downPayment);
469
+ interestEl.textContent = formatCurrency(currency, interest);
470
+ totalPaymentEl.textContent = formatCurrency(currency, totalPayment);
471
+ intermediatePaymentEl.textContent = formatCurrency(currency, intermediatePayment);
472
+ longTermPaymentEl.textContent = formatCurrency(currency, longTermPayment);
473
+ term6ComparisonEl.textContent = formatCurrency(currency, term6Interest);
474
+ term9ComparisonEl.textContent = formatCurrency(currency, term9Interest);
475
+ }
476
+
477
+ // Update amortization table
478
+ function updateAmortizationTable(currency, term, intermediatePayment, longTermPayment, intermediateAmount, longTermAmount) {
479
+ amortizationBody.innerHTML = '';
480
+
481
+ let intermediateRemaining = intermediateAmount;
482
+ let longTermRemaining = longTermAmount;
483
+
484
+ for (let month = 1; month <= 48; month++) {
485
+ const row = document.createElement('tr');
486
+
487
+ // Month column
488
+ const monthCell = document.createElement('td');
489
+ monthCell.textContent = month;
490
+ row.appendChild(monthCell);
491
+
492
+ // Intermediate payment column
493
+ const intermediateCell = document.createElement('td');
494
+ if (month <= term) {
495
+ intermediateCell.textContent = formatCurrency(currency, intermediatePayment);
496
+ intermediateRemaining -= intermediatePayment;
497
+ } else {
498
+ intermediateCell.textContent = formatCurrency(currency, 0);
499
+ }
500
+ row.appendChild(intermediateCell);
501
+
502
+ // Long term payment column
503
+ const longTermCell = document.createElement('td');
504
+ if (month <= 48) {
505
+ longTermCell.textContent = formatCurrency(currency, longTermPayment);
506
+ longTermRemaining -= longTermPayment;
507
+ } else {
508
+ longTermCell.textContent = formatCurrency(currency, 0);
509
+ }
510
+ row.appendChild(longTermCell);
511
+
512
+ // Remaining balance column
513
+ const remainingCell = document.createElement('td');
514
+ remainingCell.textContent = formatCurrency(currency, intermediateRemaining + longTermRemaining);
515
+ row.appendChild(remainingCell);
516
+
517
+ amortizationBody.appendChild(row);
518
+ }
519
+ }
520
+
521
+ // Update charts
522
+ function updateCharts(currency, downPayment, intermediateTotal, longTermAmount) {
523
+ // Pie Chart
524
+ const pieCtx = document.getElementById('pieChart').getContext('2d');
525
+
526
+ if (pieChart) {
527
+ pieChart.destroy();
528
+ }
529
+
530
+ pieChart = new Chart(pieCtx, {
531
+ type: 'pie',
532
+ data: {
533
+ labels: [
534
+ translations[currentLanguage].downPaymentLabel,
535
+ translations[currentLanguage].intermediatePaymentHeader,
536
+ translations[currentLanguage].longTermPaymentHeader
537
+ ],
538
+ datasets: [{
539
+ data: [downPayment, intermediateTotal, longTermAmount],
540
+ backgroundColor: [
541
+ '#4299e1',
542
+ '#f6ad55',
543
+ '#9f7aea'
544
+ ],
545
+ borderWidth: 1
546
+ }]
547
+ },
548
+ options: {
549
+ responsive: true,
550
+ maintainAspectRatio: false,
551
+ plugins: {
552
+ tooltip: {
553
+ callbacks: {
554
+ label: function(context) {
555
+ const label = context.label || '';
556
+ const value = context.raw || 0;
557
+ return `${label}: ${formatCurrency(currency, value)}`;
558
+ }
559
+ }
560
+ }
561
+ }
562
+ }
563
+ });
564
+
565
+ // Line Chart
566
+ const lineCtx = document.getElementById('lineChart').getContext('2d');
567
+
568
+ if (lineChart) {
569
+ lineChart.destroy();
570
+ }
571
+
572
+ // Generate data for 48 months
573
+ const term = term6Radio.checked ? 6 : 9;
574
+ const intermediatePayment = parseFloat(intermediatePaymentEl.textContent.replace(/[^0-9.-]+/g,"")) || 0;
575
+ const longTermPayment = parseFloat(longTermPaymentEl.textContent.replace(/[^0-9.-]+/g,"")) || 0;
576
+
577
+ const labels = Array.from({length: 48}, (_, i) => i + 1);
578
+ const intermediateData = labels.map((_, i) => i < term ? intermediatePayment : 0);
579
+ const longTermData = labels.map(() => longTermPayment);
580
+ const totalData = labels.map((_, i) => intermediateData[i] + longTermData[i]);
581
+
582
+ lineChart = new Chart(lineCtx, {
583
+ type: 'line',
584
+ data: {
585
+ labels: labels,
586
+ datasets: [
587
+ {
588
+ label: translations[currentLanguage].intermediatePaymentHeader,
589
+ data: intermediateData,
590
+ borderColor: '#f6ad55',
591
+ backgroundColor: 'rgba(246, 173, 85, 0.1)',
592
+ tension: 0.1,
593
+ fill: true
594
+ },
595
+ {
596
+ label: translations[currentLanguage].longTermPaymentHeader,
597
+ data: longTermData,
598
+ borderColor: '#9f7aea',
599
+ backgroundColor: 'rgba(159, 122, 234, 0.1)',
600
+ tension: 0.1,
601
+ fill: true
602
+ },
603
+ {
604
+ label: translations[currentLanguage].totalPaymentLabel,
605
+ data: totalData,
606
+ borderColor: '#4299e1',
607
+ backgroundColor: 'rgba(66, 153, 225, 0.1)',
608
+ tension: 0.1,
609
+ fill: true
610
+ }
611
+ ]
612
+ },
613
+ options: {
614
+ responsive: true,
615
+ maintainAspectRatio: false,
616
+ scales: {
617
+ y: {
618
+ beginAtZero: true,
619
+ ticks: {
620
+ callback: function(value) {
621
+ return formatCurrency(currency, value);
622
+ }
623
+ }
624
+ }
625
+ },
626
+ plugins: {
627
+ tooltip: {
628
+ callbacks: {
629
+ label: function(context) {
630
+ const label = context.dataset.label || '';
631
+ const value = context.raw || 0;
632
+ return `${label}: ${formatCurrency(currency, value)}`;
633
+ }
634
+ }
635
+ }
636
+ }
637
+ }
638
+ });
639
+ }
640
+
641
+ // Format currency
642
+ function formatCurrency(currency, amount) {
643
+ return new Intl.NumberFormat(getLocale(currency), {
644
+ style: 'currency',
645
+ currency: currency
646
+ }).format(amount);
647
+ }
648
+
649
+ // Get locale based on currency
650
+ function getLocale(currency) {
651
+ const locales = {
652
+ USD: 'en-US',
653
+ MXN: 'es-MX',
654
+ CAD: 'en-CA',
655
+ CLP: 'es-CL',
656
+ ARS: 'es-AR',
657
+ COP: 'es-CO',
658
+ EUR: 'de-DE'
659
+ };
660
+ return locales[currency] || 'en-US';
661
+ }
662
+
663
+ // Change language
664
+ function changeLanguage() {
665
+ currentLanguage = languageSelect.value;
666
+ updateTranslations();
667
+ calculateLoan(); // Recalculate to update chart labels
668
+ }
669
+
670
+ // Update all translations
671
+ function updateTranslations() {
672
+ const lang = translations[currentLanguage];
673
+
674
+ for (const key in lang) {
675
+ const element = document.getElementById(key);
676
+ if (element) {
677
+ element.textContent = lang[key];
678
+ }
679
+ }
680
+
681
+ // Update dark mode tooltip
682
+ darkModeTooltip.textContent = lang.darkModeTooltip;
683
+ }
684
+
685
+ // Toggle dark mode
686
+ function toggleDarkMode() {
687
+ darkMode = !darkMode;
688
+ document.body.classList.toggle('dark-mode', darkMode);
689
+
690
+ // Update icon
691
+ const icon = darkModeToggle.querySelector('i');
692
+ icon.classList.toggle('fa-moon', !darkMode);
693
+ icon.classList.toggle('fa-sun', darkMode);
694
+
695
+ // Recreate charts with dark mode colors
696
+ if (amountInput.value) {
697
+ calculateLoan();
698
+ }
699
+ }
700
+
701
+ // Export to Excel
702
+ function exportToExcel() {
703
+ const table = document.getElementById('amortizationTable');
704
+ const ws = XLSX.utils.table_to_sheet(table);
705
+ const wb = XLSX.utils.book_new();
706
+ XLSX.utils.book_append_sheet(wb, ws, "Amortization");
707
+
708
+ const currency = currencySelect.value;
709
+ const amount = amountInput.value || 0;
710
+ const fileName = `Amortization_${currency}_${amount}.xlsx`;
711
+
712
+ XLSX.writeFile(wb, fileName);
713
+ }
714
+
715
+ // Export to PDF
716
+ function exportToPDF() {
717
+ const { jsPDF } = window.jspdf;
718
+ const doc = new jsPDF();
719
+
720
+ // Title
721
+ const title = translations[currentLanguage].amortizationTitle;
722
+ doc.setFontSize(18);
723
+ doc.text(title, 14, 15);
724
+
725
+ // Loan summary
726
+ doc.setFontSize(12);
727
+ doc.text(`${translations[currentLanguage].totalAmountLabel}: ${totalAmountEl.textContent}`, 14, 25);
728
+ doc.text(`${translations[currentLanguage].downPaymentLabel}: ${downPaymentEl.textContent}`, 14, 32);
729
+ doc.text(`${translations[currentLanguage].interestLabel}: ${interestEl.textContent}`, 14, 39);
730
+ doc.text(`${translations[currentLanguage].totalPaymentLabel}: ${totalPaymentEl.textContent}`, 14, 46);
731
+
732
+ // Table headers
733
+ const headers = [
734
+ translations[currentLanguage].monthHeader,
735
+ translations[currentLanguage].intermediatePaymentHeader,
736
+ translations[currentLanguage].longTermPaymentHeader,
737
+ translations[currentLanguage].remainingBalanceHeader
738
+ ];
739
+
740
+ // Table data
741
+ const tableData = [];
742
+ const rows = amortizationBody.querySelectorAll('tr');
743
+
744
+ rows.forEach(row => {
745
+ const rowData = [];
746
+ row.querySelectorAll('td').forEach(cell => {
747
+ rowData.push(cell.textContent);
748
+ });
749
+ tableData.push(rowData);
750
+ });
751
+
752
+ // Add table to PDF
753
+ doc.autoTable({
754
+ head: [headers],
755
+ body: tableData,
756
+ startY: 55,
757
+ styles: {
758
+ fontSize: 8,
759
+ cellPadding: 2
760
+ },
761
+ columnStyles: {
762
+ 0: { cellWidth: 15 },
763
+ 1: { cellWidth: 40 },
764
+ 2: { cellWidth: 40 },
765
+ 3: { cellWidth: 40 }
766
+ }
767
+ });
768
+
769
+ // Save PDF
770
+ const currency = currencySelect.value;
771
+ const amount = amountInput.value || 0;
772
+ doc.save(`Amortization_${currency}_${amount}.pdf`);
773
+ }
774
+
775
+ // Initialize the calculator when the page loads
776
+ window.addEventListener('DOMContentLoaded', init);
777
+ </script>
778
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Pablosolaris/mesa-inteligente" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
779
+ </html>