Hugging Face's logo

Spaces:
cppbel
/
tha-bath-checker
Running

App Files Community
cppbel commited on
Commit
dd14b5d
·
verified ·
1 Parent(s): 2b19134

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +379 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tha Bath Checker
3
- emoji: 🐨
4
- colorFrom: green
5
- colorTo: purple
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: tha-bath-checker
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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,379 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Suivi des Devises EUR/THB</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .refresh-animation {
11
+ animation: spin 1s linear infinite;
12
+ }
13
+ @keyframes spin {
14
+ 0% { transform: rotate(0deg); }
15
+ 100% { transform: rotate(360deg); }
16
+ }
17
+ .pulse {
18
+ animation: pulse 2s infinite;
19
+ }
20
+ @keyframes pulse {
21
+ 0% { opacity: 1; }
22
+ 50% { opacity: 0.5; }
23
+ 100% { opacity: 1; }
24
+ }
25
+ .chart-container {
26
+ height: 200px;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
31
+ <div class="container mx-auto px-4 py-8">
32
+ <header class="text-center mb-10">
33
+ <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
34
+ <i class="fas fa-chart-line mr-2"></i>Suivi des Devises en Temps Réel
35
+ </h1>
36
+ <p class="text-gray-600">Cours actuels de l'Euro et du Baht Thaïlandais</p>
37
+ </header>
38
+
39
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
40
+ <!-- Carte Euro -->
41
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
42
+ <div class="bg-indigo-600 p-4 text-white flex items-center">
43
+ <i class="fas fa-euro-sign text-2xl mr-3"></i>
44
+ <h2 class="text-xl font-semibold">Euro (EUR)</h2>
45
+ </div>
46
+ <div class="p-6">
47
+ <div class="flex justify-between items-center mb-4">
48
+ <div>
49
+ <p class="text-gray-500">Taux actuel</p>
50
+ <p id="eur-rate" class="text-3xl font-bold text-indigo-700">--.--</p>
51
+ </div>
52
+ <div id="eur-change" class="text-right">
53
+ <p class="text-gray-500">Variation</p>
54
+ <p class="text-lg font-semibold">--.--%</p>
55
+ </div>
56
+ </div>
57
+ <div class="chart-container">
58
+ <canvas id="eurChart"></canvas>
59
+ </div>
60
+ </div>
61
+ <div class="bg-gray-50 px-4 py-3 text-sm text-gray-500 flex justify-between items-center">
62
+ <span id="eur-time">Dernière mise à jour: --:--:--</span>
63
+ <button id="refresh-eur" class="text-indigo-600 hover:text-indigo-800">
64
+ <i class="fas fa-sync-alt"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Carte Baht Thaïlandais -->
70
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
71
+ <div class="bg-green-600 p-4 text-white flex items-center">
72
+ <i class="fas fa-money-bill-wave text-2xl mr-3"></i>
73
+ <h2 class="text-xl font-semibold">Baht Thaïlandais (THB)</h2>
74
+ </div>
75
+ <div class="p-6">
76
+ <div class="flex justify-between items-center mb-4">
77
+ <div>
78
+ <p class="text-gray-500">Taux actuel</p>
79
+ <p id="thb-rate" class="text-3xl font-bold text-green-700">--.--</p>
80
+ </div>
81
+ <div id="thb-change" class="text-right">
82
+ <p class="text-gray-500">Variation</p>
83
+ <p class="text-lg font-semibold">--.--%</p>
84
+ </div>
85
+ </div>
86
+ <div class="chart-container">
87
+ <canvas id="thbChart"></canvas>
88
+ </div>
89
+ </div>
90
+ <div class="bg-gray-50 px-4 py-3 text-sm text-gray-500 flex justify-between items-center">
91
+ <span id="thb-time">Dernière mise à jour: --:--:--</span>
92
+ <button id="refresh-thb" class="text-green-600 hover:text-green-800">
93
+ <i class="fas fa-sync-alt"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
100
+ <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
101
+ <i class="fas fa-exchange-alt mr-2 text-indigo-600"></i> Convertisseur de Devises
102
+ </h3>
103
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
104
+ <div>
105
+ <label class="block text-gray-700 mb-2">Montant</label>
106
+ <input type="number" id="amount" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400" value="1" min="0">
107
+ </div>
108
+ <div>
109
+ <label class="block text-gray-700 mb-2">De</label>
110
+ <select id="from-currency" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400">
111
+ <option value="EUR">Euro (EUR)</option>
112
+ <option value="THB">Baht Thaïlandais (THB)</option>
113
+ <option value="USD">Dollar US (USD)</option>
114
+ </select>
115
+ </div>
116
+ <div>
117
+ <label class="block text-gray-700 mb-2">À</label>
118
+ <select id="to-currency" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400">
119
+ <option value="USD">Dollar US (USD)</option>
120
+ <option value="EUR">Euro (EUR)</option>
121
+ <option value="THB">Baht Thaïlandais (THB)</option>
122
+ </select>
123
+ </div>
124
+ </div>
125
+ <div class="mt-6">
126
+ <button id="convert" class="bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-6 rounded-lg font-medium transition-colors">
127
+ Convertir
128
+ </button>
129
+ </div>
130
+ <div id="conversion-result" class="mt-6 p-4 bg-blue-50 rounded-lg hidden">
131
+ <h4 class="font-semibold text-gray-800 mb-2">Résultat de la conversion</h4>
132
+ <p id="converted-amount" class="text-2xl font-bold text-indigo-700"></p>
133
+ <p id="conversion-rate" class="text-sm text-gray-600 mt-1"></p>
134
+ </div>
135
+ </div>
136
+
137
+ <footer class="text-center text-gray-500 text-sm mt-12">
138
+ <p>Données fournies par Forex API - Mise à jour toutes les minutes</p>
139
+ <p class="mt-1">© 2023 Suivi des Devises - Tous droits réservés</p>
140
+ </footer>
141
+ </div>
142
+
143
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
144
+ <script>
145
+ // Variables globales
146
+ let eurChart, thbChart;
147
+ let eurHistory = [];
148
+ let thbHistory = [];
149
+ let lastEurRate = 0;
150
+ let lastThbRate = 0;
151
+ const maxHistoryPoints = 10;
152
+
153
+ // Initialisation
154
+ document.addEventListener('DOMContentLoaded', function() {
155
+ initializeCharts();
156
+ fetchExchangeRates();
157
+
158
+ // Configurer l'actualisation automatique toutes les minutes
159
+ setInterval(fetchExchangeRates, 60000);
160
+
161
+ // Configurer les boutons de rafraîchissement
162
+ document.getElementById('refresh-eur').addEventListener('click', function() {
163
+ this.querySelector('i').classList.add('refresh-animation');
164
+ fetchExchangeRates();
165
+ setTimeout(() => {
166
+ this.querySelector('i').classList.remove('refresh-animation');
167
+ }, 1000);
168
+ });
169
+
170
+ document.getElementById('refresh-thb').addEventListener('click', function() {
171
+ this.querySelector('i').classList.add('refresh-animation');
172
+ fetchExchangeRates();
173
+ setTimeout(() => {
174
+ this.querySelector('i').classList.remove('refresh-animation');
175
+ }, 1000);
176
+ });
177
+
178
+ // Configurer le convertisseur
179
+ document.getElementById('convert').addEventListener('click', convertCurrency);
180
+ });
181
+
182
+ // Initialiser les graphiques
183
+ function initializeCharts() {
184
+ const eurCtx = document.getElementById('eurChart').getContext('2d');
185
+ const thbCtx = document.getElementById('thbChart').getContext('2d');
186
+
187
+ eurChart = new Chart(eurCtx, {
188
+ type: 'line',
189
+ data: {
190
+ labels: Array(maxHistoryPoints).fill(''),
191
+ datasets: [{
192
+ label: 'EUR/USD',
193
+ data: [],
194
+ borderColor: '#6366f1',
195
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
196
+ borderWidth: 2,
197
+ tension: 0.4,
198
+ fill: true
199
+ }]
200
+ },
201
+ options: {
202
+ responsive: true,
203
+ maintainAspectRatio: false,
204
+ plugins: {
205
+ legend: { display: false }
206
+ },
207
+ scales: {
208
+ y: { display: false },
209
+ x: { display: false }
210
+ },
211
+ elements: {
212
+ point: { radius: 0 }
213
+ }
214
+ }
215
+ });
216
+
217
+ thbChart = new Chart(thbCtx, {
218
+ type: 'line',
219
+ data: {
220
+ labels: Array(maxHistoryPoints).fill(''),
221
+ datasets: [{
222
+ label: 'THB/USD',
223
+ data: [],
224
+ borderColor: '#10b981',
225
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
226
+ borderWidth: 2,
227
+ tension: 0.4,
228
+ fill: true
229
+ }]
230
+ },
231
+ options: {
232
+ responsive: true,
233
+ maintainAspectRatio: false,
234
+ plugins: {
235
+ legend: { display: false }
236
+ },
237
+ scales: {
238
+ y: { display: false },
239
+ x: { display: false }
240
+ },
241
+ elements: {
242
+ point: { radius: 0 }
243
+ }
244
+ }
245
+ });
246
+ }
247
+
248
+ // Récupérer les taux de change
249
+ async function fetchExchangeRates() {
250
+ try {
251
+ // Simulation de données (en production, utiliser une API réelle)
252
+ // Note: En pratique, vous devriez utiliser une API comme ExchangeRate-API, Alpha Vantage, etc.
253
+ const now = new Date();
254
+ const mockEurRate = 1.08 + (Math.random() * 0.02 - 0.01); // Simulation EUR/USD
255
+ const mockThbRate = 0.028 + (Math.random() * 0.001 - 0.0005); // Simulation THB/USD
256
+
257
+ // Mettre à jour l'interface
258
+ updateCurrencyDisplay('EUR', mockEurRate, now);
259
+ updateCurrencyDisplay('THB', mockThbRate, now);
260
+
261
+ // Mettre à jour les graphiques
262
+ updateCharts(mockEurRate, mockThbRate);
263
+
264
+ // Enregistrer les derniers taux pour calculer les variations
265
+ lastEurRate = mockEurRate;
266
+ lastThbRate = mockThbRate;
267
+
268
+ } catch (error) {
269
+ console.error('Erreur lors de la récupération des taux:', error);
270
+ document.getElementById('eur-rate').textContent = 'Erreur';
271
+ document.getElementById('thb-rate').textContent = 'Erreur';
272
+ }
273
+ }
274
+
275
+ // Mettre à jour l'affichage des devises
276
+ function updateCurrencyDisplay(currency, rate, timestamp) {
277
+ const formattedRate = rate.toFixed(4);
278
+ const formattedTime = timestamp.toLocaleTimeString();
279
+
280
+ if (currency === 'EUR') {
281
+ document.getElementById('eur-rate').textContent = formattedRate;
282
+ document.getElementById('eur-time').textContent = `Dernière mise à jour: ${formattedTime}`;
283
+
284
+ // Calculer la variation si nous avons un taux précédent
285
+ if (lastEurRate && lastEurRate !== 0) {
286
+ const change = ((rate - lastEurRate) / lastEurRate) * 100;
287
+ const changeElement = document.getElementById('eur-change');
288
+ changeElement.innerHTML = `
289
+ <p class="text-gray-500">Variation</p>
290
+ <p class="text-lg font-semibold ${change >= 0 ? 'text-green-600' : 'text-red-600'}">
291
+ ${change >= 0 ? '+' : ''}${change.toFixed(2)}%
292
+ </p>
293
+ `;
294
+ }
295
+ } else if (currency === 'THB') {
296
+ document.getElementById('thb-rate').textContent = formattedRate;
297
+ document.getElementById('thb-time').textContent = `Dernière mise à jour: ${formattedTime}`;
298
+
299
+ // Calculer la variation si nous avons un taux précédent
300
+ if (lastThbRate && lastThbRate !== 0) {
301
+ const change = ((rate - lastThbRate) / lastThbRate) * 100;
302
+ const changeElement = document.getElementById('thb-change');
303
+ changeElement.innerHTML = `
304
+ <p class="text-gray-500">Variation</p>
305
+ <p class="text-lg font-semibold ${change >= 0 ? 'text-green-600' : 'text-red-600'}">
306
+ ${change >= 0 ? '+' : ''}${change.toFixed(2)}%
307
+ </p>
308
+ `;
309
+ }
310
+ }
311
+ }
312
+
313
+ // Mettre à jour les graphiques
314
+ function updateCharts(eurRate, thbRate) {
315
+ // Ajouter les nouveaux taux à l'historique
316
+ eurHistory.push(eurRate);
317
+ thbHistory.push(thbRate);
318
+
319
+ // Garder seulement les derniers points
320
+ if (eurHistory.length > maxHistoryPoints) {
321
+ eurHistory.shift();
322
+ thbHistory.shift();
323
+ }
324
+
325
+ // Mettre à jour les graphiques
326
+ eurChart.data.datasets[0].data = eurHistory;
327
+ thbChart.data.datasets[0].data = thbHistory;
328
+
329
+ // Mettre à jour les labels avec les heures
330
+ const now = new Date();
331
+ const labels = [];
332
+ for (let i = 0; i < maxHistoryPoints; i++) {
333
+ const time = new Date(now.getTime() - (maxHistoryPoints - i - 1) * 60000);
334
+ labels.push(time.getHours() + ':' + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes());
335
+ }
336
+
337
+ eurChart.data.labels = labels;
338
+ thbChart.data.labels = labels;
339
+
340
+ eurChart.update();
341
+ thbChart.update();
342
+ }
343
+
344
+ // Convertir les devises
345
+ function convertCurrency() {
346
+ const amount = parseFloat(document.getElementById('amount').value);
347
+ const fromCurrency = document.getElementById('from-currency').value;
348
+ const toCurrency = document.getElementById('to-currency').value;
349
+
350
+ if (isNaN(amount) || amount <= 0) {
351
+ alert('Veuillez entrer un montant valide');
352
+ return;
353
+ }
354
+
355
+ // Taux de change simulés (en pratique, utiliser les taux réels)
356
+ const rates = {
357
+ 'EUR': 1.08,
358
+ 'THB': 0.028,
359
+ 'USD': 1.00
360
+ };
361
+
362
+ // Calculer le taux de conversion
363
+ const fromRate = rates[fromCurrency];
364
+ const toRate = rates[toCurrency];
365
+ const convertedAmount = (amount * fromRate) / toRate;
366
+ const conversionRate = toRate / fromRate;
367
+
368
+ // Afficher le résultat
369
+ document.getElementById('converted-amount').textContent =
370
+ `${amount.toFixed(2)} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
371
+
372
+ document.getElementById('conversion-rate').textContent =
373
+ `Taux de conversion: 1 ${fromCurrency} = ${conversionRate.toFixed(6)} ${toCurrency}`;
374
+
375
+ document.getElementById('conversion-result').classList.remove('hidden');
376
+ }
377
+ </script>
378
+ <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=cppbel/tha-bath-checker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
379
+ </html>