-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
139 lines (128 loc) · 6.97 KB
/
index.html
File metadata and controls
139 lines (128 loc) · 6.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Divisas - Tabla Comparativa</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body class="bg-gray-100 text-gray-800 font-sans antialiased min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-4xl font-extrabold text-blue-900 tracking-tight flex items-center gap-3">
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
Monitor de Divisas
</h1>
<p class="text-gray-600 mt-2 text-lg">Actualización automatizada cada hora.
</p>
</header>
<main class="bg-white shadow-xl rounded-xl overflow-hidden border border-gray-200">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr
class="bg-blue-50 text-blue-900 uppercase text-sm font-semibold tracking-wide border-b border-gray-200">
<th class="px-6 py-4">Código</th>
<th class="px-6 py-4">Valor Actual</th>
<th class="px-6 py-4">Valor Comparación</th>
<th class="px-6 py-4">Total Calculado</th>
<th class="px-6 py-4 text-right">Última Actualización (GMT)</th>
</tr>
</thead>
<tbody id="tabla-body" class="divide-y divide-gray-100">
<tr>
<td colspan="5"
class="px-6 py-8 text-center text-gray-500 flex flex-col items-center justify-center fade-in">
<svg class="animate-spin h-8 w-8 text-blue-500 mb-2" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
Cargando datos...
</td>
</tr>
</tbody>
</table>
</div>
<div id="no-data" class="hidden px-6 py-12 text-center text-gray-500">
No se encontraron datos. La base de datos puede estar vacía o hubo un error al cargar.
</div>
</main>
<footer class="mt-8 text-center text-gray-400 text-sm space-y-2">
<p class="text-gray-400">
¿Te resultó útil? Si quieres apoyar el proyecto de forma voluntaria,
<a href="https://github.com/sponsors/LucielDOD" target="_blank" rel="noopener noreferrer"
class="inline-flex items-center gap-1 text-pink-500 hover:text-pink-600 font-medium transition-colors duration-200">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
puedes donar aquí
</a>
— sin presión, solo aprecio 🙌
</p>
</footer>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
fetch('datos.json?t=' + new Date().getTime())
.then(response => {
if (!response.ok) throw new Error("No se pudo cargar datos.json");
return response.json();
})
.then(data => {
const tbody = document.getElementById('tabla-body');
const noData = document.getElementById('no-data');
tbody.innerHTML = ''; // Limpiar estado de carga
if (data.length === 0) {
noData.classList.remove('hidden');
return;
}
data.forEach((item, index) => {
const tr = document.createElement('tr');
tr.className = `hover:bg-blue-50 transition-colors duration-200 fade-in`;
tr.style.animationDelay = `${index * 0.05}s`;
// Extraemos hasta 16 decimales visualmente limpios si corresponde
tr.innerHTML = `
<td class="px-6 py-4 font-bold text-gray-900 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
${item.codigo}
</td>
<td class="px-6 py-4 font-mono text-sm text-gray-700">${item.valor_actual || '-'}</td>
<td class="px-6 py-4 font-mono text-sm text-gray-700">${item.valor_comparacion || '-'}</td>
<td class="px-6 py-4 font-mono sm:text-base text-sm font-semibold text-green-600 bg-green-50/30">${item.total_calculado || '-'}</td>
<td class="px-6 py-4 text-right text-xs text-gray-500">${new Date(item.fecha_actualizacion).toLocaleString('es-ES')}</td>
`;
tbody.appendChild(tr);
});
})
.catch(error => {
console.error('Error fetching datos:', error);
const tbody = document.getElementById('tabla-body');
tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-8 text-center text-red-500">Error al cargar datos.json. Revisa la consola o espera a la próxima ejecución.</td></tr>`;
});
});
</script>
</body>
</html>