Spaces:
Running
Running
Add 1 files
Browse files- index.html +72 -8
index.html
CHANGED
|
@@ -40,6 +40,26 @@
|
|
| 40 |
background: rgba(255, 255, 255, 0.3);
|
| 41 |
border-radius: 10px;
|
| 42 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 43 |
</style>
|
| 44 |
</head>
|
| 45 |
<body class="min-h-screen gradient-bg text-white">
|
|
@@ -109,7 +129,15 @@
|
|
| 109 |
<div class="mt-8 text-center">
|
| 110 |
<div class="text-sm mb-2">Montant converti</div>
|
| 111 |
<div id="conversion-result" class="text-4xl font-bold">0.00</div>
|
| 112 |
-
<div id="conversion-rate" class="text-sm opacity-80 mt-2
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 113 |
</div>
|
| 114 |
|
| 115 |
<!-- Bouton de conversion -->
|
|
@@ -165,7 +193,7 @@
|
|
| 165 |
</div>
|
| 166 |
|
| 167 |
<footer class="mt-12 text-center text-sm opacity-70">
|
| 168 |
-
<p>Taux de change actualisés
|
| 169 |
<p class="mt-2">© 2025 Convertisseur EUR/THB - Tous droits réservés Patrick Pansaerts</p>
|
| 170 |
</footer>
|
| 171 |
</div>
|
|
@@ -175,6 +203,9 @@
|
|
| 175 |
// Taux de change (simulé - en réalité on ferait une requête API)
|
| 176 |
let exchangeRate = 38.50; // 1 EUR = 38.50 THB
|
| 177 |
let lastUpdated = new Date();
|
|
|
|
|
|
|
|
|
|
| 178 |
|
| 179 |
// Éléments du DOM
|
| 180 |
const amountInput = document.getElementById('amount');
|
|
@@ -184,6 +215,7 @@
|
|
| 184 |
const convertBtn = document.getElementById('convert-btn');
|
| 185 |
const conversionResult = document.getElementById('conversion-result');
|
| 186 |
const conversionRate = document.getElementById('conversion-rate');
|
|
|
|
| 187 |
const eurToThb = document.getElementById('eur-to-thb');
|
| 188 |
const thbToEur = document.getElementById('thb-to-eur');
|
| 189 |
const lastUpdatedSpan = document.getElementById('last-updated');
|
|
@@ -191,12 +223,20 @@
|
|
| 191 |
const emptyHistory = document.getElementById('empty-history');
|
| 192 |
const fromCurrencySymbol = document.getElementById('from-currency-symbol');
|
| 193 |
const clearHistoryBtn = document.getElementById('clear-history');
|
|
|
|
|
|
|
| 194 |
|
| 195 |
// Mettre à jour les taux affichés
|
| 196 |
function updateExchangeRates() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 197 |
eurToThb.textContent = exchangeRate.toFixed(2);
|
| 198 |
thbToEur.textContent = (1 / exchangeRate).toFixed(3);
|
| 199 |
-
|
| 200 |
|
| 201 |
// Formater la date de mise à jour
|
| 202 |
const options = {
|
|
@@ -204,19 +244,24 @@
|
|
| 204 |
month: 'long',
|
| 205 |
day: 'numeric',
|
| 206 |
hour: '2-digit',
|
| 207 |
-
minute: '2-digit'
|
|
|
|
| 208 |
};
|
| 209 |
lastUpdatedSpan.textContent = lastUpdated.toLocaleDateString('fr-FR', options);
|
|
|
|
|
|
|
|
|
|
|
|
|
| 210 |
}
|
| 211 |
|
| 212 |
-
// Simuler la récupération des taux de change
|
| 213 |
function fetchExchangeRates() {
|
| 214 |
// Simulation: taux aléatoire autour de 38.50 pour l'exemple
|
| 215 |
exchangeRate = 38.50 + (Math.random() * 0.5 - 0.25);
|
| 216 |
lastUpdated = new Date();
|
| 217 |
updateExchangeRates();
|
| 218 |
|
| 219 |
-
// En production, on utiliserait
|
| 220 |
// fetch('https://api.exchangerate-api.com/v4/latest/EUR')
|
| 221 |
// .then(response => response.json())
|
| 222 |
// .then(data => {
|
|
@@ -226,6 +271,24 @@
|
|
| 226 |
// });
|
| 227 |
}
|
| 228 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 229 |
// Effectuer la conversion
|
| 230 |
function performConversion() {
|
| 231 |
const amount = parseFloat(amountInput.value);
|
|
@@ -314,6 +377,7 @@
|
|
| 314 |
convertBtn.addEventListener('click', performConversion);
|
| 315 |
fromCurrency.addEventListener('change', updateCurrencySymbol);
|
| 316 |
clearHistoryBtn.addEventListener('click', clearHistory);
|
|
|
|
| 317 |
|
| 318 |
// Permettre la conversion avec la touche Entrée
|
| 319 |
amountInput.addEventListener('keypress', function(e) {
|
|
@@ -326,8 +390,8 @@
|
|
| 326 |
fetchExchangeRates();
|
| 327 |
updateCurrencySymbol();
|
| 328 |
|
| 329 |
-
//
|
| 330 |
-
setInterval(fetchExchangeRates,
|
| 331 |
});
|
| 332 |
</script>
|
| 333 |
<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/convertisseur-eur-thb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
|
|
|
| 40 |
background: rgba(255, 255, 255, 0.3);
|
| 41 |
border-radius: 10px;
|
| 42 |
}
|
| 43 |
+
.refresh-animation {
|
| 44 |
+
animation: pulse 1.5s infinite;
|
| 45 |
+
}
|
| 46 |
+
@keyframes pulse {
|
| 47 |
+
0% { opacity: 1; }
|
| 48 |
+
50% { opacity: 0.5; }
|
| 49 |
+
100% { opacity: 1; }
|
| 50 |
+
}
|
| 51 |
+
.countdown-bar {
|
| 52 |
+
height: 4px;
|
| 53 |
+
background: rgba(255, 255, 255, 0.3);
|
| 54 |
+
border-radius: 2px;
|
| 55 |
+
overflow: hidden;
|
| 56 |
+
}
|
| 57 |
+
.countdown-progress {
|
| 58 |
+
height: 100%;
|
| 59 |
+
background: white;
|
| 60 |
+
width: 100%;
|
| 61 |
+
transition: width 0.5s linear;
|
| 62 |
+
}
|
| 63 |
</style>
|
| 64 |
</head>
|
| 65 |
<body class="min-h-screen gradient-bg text-white">
|
|
|
|
| 129 |
<div class="mt-8 text-center">
|
| 130 |
<div class="text-sm mb-2">Montant converti</div>
|
| 131 |
<div id="conversion-result" class="text-4xl font-bold">0.00</div>
|
| 132 |
+
<div id="conversion-rate" class="text-sm opacity-80 mt-2 flex items-center justify-center">
|
| 133 |
+
<span id="rate-value">1 EUR = 38.50 THB</span>
|
| 134 |
+
<button id="manual-refresh" class="ml-2 text-white/60 hover:text-white transition-colors">
|
| 135 |
+
<i class="fas fa-sync-alt"></i>
|
| 136 |
+
</button>
|
| 137 |
+
</div>
|
| 138 |
+
<div class="countdown-bar mt-2">
|
| 139 |
+
<div id="countdown-progress" class="countdown-progress"></div>
|
| 140 |
+
</div>
|
| 141 |
</div>
|
| 142 |
|
| 143 |
<!-- Bouton de conversion -->
|
|
|
|
| 193 |
</div>
|
| 194 |
|
| 195 |
<footer class="mt-12 text-center text-sm opacity-70">
|
| 196 |
+
<p>Taux de change actualisés toutes les 15 minutes. Dernière mise à jour: <span id="last-updated">chargement...</span></p>
|
| 197 |
<p class="mt-2">© 2025 Convertisseur EUR/THB - Tous droits réservés Patrick Pansaerts</p>
|
| 198 |
</footer>
|
| 199 |
</div>
|
|
|
|
| 203 |
// Taux de change (simulé - en réalité on ferait une requête API)
|
| 204 |
let exchangeRate = 38.50; // 1 EUR = 38.50 THB
|
| 205 |
let lastUpdated = new Date();
|
| 206 |
+
let nextRefreshTime = new Date();
|
| 207 |
+
let refreshInterval = 15 * 60 * 1000; // 15 minutes en millisecondes
|
| 208 |
+
let countdownInterval;
|
| 209 |
|
| 210 |
// Éléments du DOM
|
| 211 |
const amountInput = document.getElementById('amount');
|
|
|
|
| 215 |
const convertBtn = document.getElementById('convert-btn');
|
| 216 |
const conversionResult = document.getElementById('conversion-result');
|
| 217 |
const conversionRate = document.getElementById('conversion-rate');
|
| 218 |
+
const rateValue = document.getElementById('rate-value');
|
| 219 |
const eurToThb = document.getElementById('eur-to-thb');
|
| 220 |
const thbToEur = document.getElementById('thb-to-eur');
|
| 221 |
const lastUpdatedSpan = document.getElementById('last-updated');
|
|
|
|
| 223 |
const emptyHistory = document.getElementById('empty-history');
|
| 224 |
const fromCurrencySymbol = document.getElementById('from-currency-symbol');
|
| 225 |
const clearHistoryBtn = document.getElementById('clear-history');
|
| 226 |
+
const manualRefreshBtn = document.getElementById('manual-refresh');
|
| 227 |
+
const countdownProgress = document.getElementById('countdown-progress');
|
| 228 |
|
| 229 |
// Mettre à jour les taux affichés
|
| 230 |
function updateExchangeRates() {
|
| 231 |
+
// Animation de rafraîchissement
|
| 232 |
+
rateValue.classList.add('refresh-animation');
|
| 233 |
+
setTimeout(() => {
|
| 234 |
+
rateValue.classList.remove('refresh-animation');
|
| 235 |
+
}, 1500);
|
| 236 |
+
|
| 237 |
eurToThb.textContent = exchangeRate.toFixed(2);
|
| 238 |
thbToEur.textContent = (1 / exchangeRate).toFixed(3);
|
| 239 |
+
rateValue.textContent = `1 EUR = ${exchangeRate.toFixed(2)} THB`;
|
| 240 |
|
| 241 |
// Formater la date de mise à jour
|
| 242 |
const options = {
|
|
|
|
| 244 |
month: 'long',
|
| 245 |
day: 'numeric',
|
| 246 |
hour: '2-digit',
|
| 247 |
+
minute: '2-digit',
|
| 248 |
+
second: '2-digit'
|
| 249 |
};
|
| 250 |
lastUpdatedSpan.textContent = lastUpdated.toLocaleDateString('fr-FR', options);
|
| 251 |
+
|
| 252 |
+
// Mettre à jour le prochain temps de rafraîchissement
|
| 253 |
+
nextRefreshTime = new Date(lastUpdated.getTime() + refreshInterval);
|
| 254 |
+
startCountdown();
|
| 255 |
}
|
| 256 |
|
| 257 |
+
// Simuler la récupération des taux de change
|
| 258 |
function fetchExchangeRates() {
|
| 259 |
// Simulation: taux aléatoire autour de 38.50 pour l'exemple
|
| 260 |
exchangeRate = 38.50 + (Math.random() * 0.5 - 0.25);
|
| 261 |
lastUpdated = new Date();
|
| 262 |
updateExchangeRates();
|
| 263 |
|
| 264 |
+
// En production, on utiliserait une API réelle:
|
| 265 |
// fetch('https://api.exchangerate-api.com/v4/latest/EUR')
|
| 266 |
// .then(response => response.json())
|
| 267 |
// .then(data => {
|
|
|
|
| 271 |
// });
|
| 272 |
}
|
| 273 |
|
| 274 |
+
// Démarrer le compte à rebours
|
| 275 |
+
function startCountdown() {
|
| 276 |
+
clearInterval(countdownInterval);
|
| 277 |
+
|
| 278 |
+
countdownInterval = setInterval(() => {
|
| 279 |
+
const now = new Date();
|
| 280 |
+
const timeLeft = nextRefreshTime - now;
|
| 281 |
+
|
| 282 |
+
if (timeLeft <= 0) {
|
| 283 |
+
fetchExchangeRates();
|
| 284 |
+
return;
|
| 285 |
+
}
|
| 286 |
+
|
| 287 |
+
const progress = 100 - (timeLeft / refreshInterval * 100);
|
| 288 |
+
countdownProgress.style.width = `${progress}%`;
|
| 289 |
+
}, 1000);
|
| 290 |
+
}
|
| 291 |
+
|
| 292 |
// Effectuer la conversion
|
| 293 |
function performConversion() {
|
| 294 |
const amount = parseFloat(amountInput.value);
|
|
|
|
| 377 |
convertBtn.addEventListener('click', performConversion);
|
| 378 |
fromCurrency.addEventListener('change', updateCurrencySymbol);
|
| 379 |
clearHistoryBtn.addEventListener('click', clearHistory);
|
| 380 |
+
manualRefreshBtn.addEventListener('click', fetchExchangeRates);
|
| 381 |
|
| 382 |
// Permettre la conversion avec la touche Entrée
|
| 383 |
amountInput.addEventListener('keypress', function(e) {
|
|
|
|
| 390 |
fetchExchangeRates();
|
| 391 |
updateCurrencySymbol();
|
| 392 |
|
| 393 |
+
// Configurer l'actualisation automatique toutes les 15 minutes
|
| 394 |
+
setInterval(fetchExchangeRates, refreshInterval);
|
| 395 |
});
|
| 396 |
</script>
|
| 397 |
<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/convertisseur-eur-thb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|