Spaces:

cppbel
/

tha-bath-checker

Running

File size: 17,714 Bytes

dd14b5d

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suivi des Devises EUR/THB</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .refresh-animation {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .chart-container {
            height: 200px;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-10">
            <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
                <i class="fas fa-chart-line mr-2"></i>Suivi des Devises en Temps Réel
            </h1>
            <p class="text-gray-600">Cours actuels de l'Euro et du Baht Thaïlandais</p>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <!-- Carte Euro -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
                <div class="bg-indigo-600 p-4 text-white flex items-center">
                    <i class="fas fa-euro-sign text-2xl mr-3"></i>
                    <h2 class="text-xl font-semibold">Euro (EUR)</h2>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <div>
                            <p class="text-gray-500">Taux actuel</p>
                            <p id="eur-rate" class="text-3xl font-bold text-indigo-700">--.--</p>
                        </div>
                        <div id="eur-change" class="text-right">
                            <p class="text-gray-500">Variation</p>
                            <p class="text-lg font-semibold">--.--%</p>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="eurChart"></canvas>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 text-sm text-gray-500 flex justify-between items-center">
                    <span id="eur-time">Dernière mise à jour: --:--:--</span>
                    <button id="refresh-eur" class="text-indigo-600 hover:text-indigo-800">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>

            <!-- Carte Baht Thaïlandais -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
                <div class="bg-green-600 p-4 text-white flex items-center">
                    <i class="fas fa-money-bill-wave text-2xl mr-3"></i>
                    <h2 class="text-xl font-semibold">Baht Thaïlandais (THB)</h2>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <div>
                            <p class="text-gray-500">Taux actuel</p>
                            <p id="thb-rate" class="text-3xl font-bold text-green-700">--.--</p>
                        </div>
                        <div id="thb-change" class="text-right">
                            <p class="text-gray-500">Variation</p>
                            <p class="text-lg font-semibold">--.--%</p>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="thbChart"></canvas>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 text-sm text-gray-500 flex justify-between items-center">
                    <span id="thb-time">Dernière mise à jour: --:--:--</span>
                    <button id="refresh-thb" class="text-green-600 hover:text-green-800">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-exchange-alt mr-2 text-indigo-600"></i> Convertisseur de Devises
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-gray-700 mb-2">Montant</label>
                    <input type="number" id="amount" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400" value="1" min="0">
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">De</label>
                    <select id="from-currency" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400">
                        <option value="EUR">Euro (EUR)</option>
                        <option value="THB">Baht Thaïlandais (THB)</option>
                        <option value="USD">Dollar US (USD)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-gray-700 mb-2">À</label>
                    <select id="to-currency" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-indigo-400">
                        <option value="USD">Dollar US (USD)</option>
                        <option value="EUR">Euro (EUR)</option>
                        <option value="THB">Baht Thaïlandais (THB)</option>
                    </select>
                </div>
            </div>
            <div class="mt-6">
                <button id="convert" class="bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-6 rounded-lg font-medium transition-colors">
                    Convertir
                </button>
            </div>
            <div id="conversion-result" class="mt-6 p-4 bg-blue-50 rounded-lg hidden">
                <h4 class="font-semibold text-gray-800 mb-2">Résultat de la conversion</h4>
                <p id="converted-amount" class="text-2xl font-bold text-indigo-700"></p>
                <p id="conversion-rate" class="text-sm text-gray-600 mt-1"></p>
            </div>
        </div>

        <footer class="text-center text-gray-500 text-sm mt-12">
            <p>Données fournies par Forex API - Mise à jour toutes les minutes</p>
            <p class="mt-1">© 2023 Suivi des Devises - Tous droits réservés</p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Variables globales
        let eurChart, thbChart;
        let eurHistory = [];
        let thbHistory = [];
        let lastEurRate = 0;
        let lastThbRate = 0;
        const maxHistoryPoints = 10;

        // Initialisation
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            fetchExchangeRates();
            
            // Configurer l'actualisation automatique toutes les minutes
            setInterval(fetchExchangeRates, 60000);
            
            // Configurer les boutons de rafraîchissement
            document.getElementById('refresh-eur').addEventListener('click', function() {
                this.querySelector('i').classList.add('refresh-animation');
                fetchExchangeRates();
                setTimeout(() => {
                    this.querySelector('i').classList.remove('refresh-animation');
                }, 1000);
            });
            
            document.getElementById('refresh-thb').addEventListener('click', function() {
                this.querySelector('i').classList.add('refresh-animation');
                fetchExchangeRates();
                setTimeout(() => {
                    this.querySelector('i').classList.remove('refresh-animation');
                }, 1000);
            });
            
            // Configurer le convertisseur
            document.getElementById('convert').addEventListener('click', convertCurrency);
        });

        // Initialiser les graphiques
        function initializeCharts() {
            const eurCtx = document.getElementById('eurChart').getContext('2d');
            const thbCtx = document.getElementById('thbChart').getContext('2d');
            
            eurChart = new Chart(eurCtx, {
                type: 'line',
                data: {
                    labels: Array(maxHistoryPoints).fill(''),
                    datasets: [{
                        label: 'EUR/USD',
                        data: [],
                        borderColor: '#6366f1',
                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: { display: false },
                        x: { display: false }
                    },
                    elements: {
                        point: { radius: 0 }
                    }
                }
            });
            
            thbChart = new Chart(thbCtx, {
                type: 'line',
                data: {
                    labels: Array(maxHistoryPoints).fill(''),
                    datasets: [{
                        label: 'THB/USD',
                        data: [],
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: { display: false },
                        x: { display: false }
                    },
                    elements: {
                        point: { radius: 0 }
                    }
                }
            });
        }

        // Récupérer les taux de change
        async function fetchExchangeRates() {
            try {
                // Simulation de données (en production, utiliser une API réelle)
                // Note: En pratique, vous devriez utiliser une API comme ExchangeRate-API, Alpha Vantage, etc.
                const now = new Date();
                const mockEurRate = 1.08 + (Math.random() * 0.02 - 0.01); // Simulation EUR/USD
                const mockThbRate = 0.028 + (Math.random() * 0.001 - 0.0005); // Simulation THB/USD
                
                // Mettre à jour l'interface
                updateCurrencyDisplay('EUR', mockEurRate, now);
                updateCurrencyDisplay('THB', mockThbRate, now);
                
                // Mettre à jour les graphiques
                updateCharts(mockEurRate, mockThbRate);
                
                // Enregistrer les derniers taux pour calculer les variations
                lastEurRate = mockEurRate;
                lastThbRate = mockThbRate;
                
            } catch (error) {
                console.error('Erreur lors de la récupération des taux:', error);
                document.getElementById('eur-rate').textContent = 'Erreur';
                document.getElementById('thb-rate').textContent = 'Erreur';
            }
        }

        // Mettre à jour l'affichage des devises
        function updateCurrencyDisplay(currency, rate, timestamp) {
            const formattedRate = rate.toFixed(4);
            const formattedTime = timestamp.toLocaleTimeString();
            
            if (currency === 'EUR') {
                document.getElementById('eur-rate').textContent = formattedRate;
                document.getElementById('eur-time').textContent = `Dernière mise à jour: ${formattedTime}`;
                
                // Calculer la variation si nous avons un taux précédent
                if (lastEurRate && lastEurRate !== 0) {
                    const change = ((rate - lastEurRate) / lastEurRate) * 100;
                    const changeElement = document.getElementById('eur-change');
                    changeElement.innerHTML = `
                        <p class="text-gray-500">Variation</p>
                        <p class="text-lg font-semibold ${change >= 0 ? 'text-green-600' : 'text-red-600'}">
                            ${change >= 0 ? '+' : ''}${change.toFixed(2)}%
                        </p>
                    `;
                }
            } else if (currency === 'THB') {
                document.getElementById('thb-rate').textContent = formattedRate;
                document.getElementById('thb-time').textContent = `Dernière mise à jour: ${formattedTime}`;
                
                // Calculer la variation si nous avons un taux précédent
                if (lastThbRate && lastThbRate !== 0) {
                    const change = ((rate - lastThbRate) / lastThbRate) * 100;
                    const changeElement = document.getElementById('thb-change');
                    changeElement.innerHTML = `
                        <p class="text-gray-500">Variation</p>
                        <p class="text-lg font-semibold ${change >= 0 ? 'text-green-600' : 'text-red-600'}">
                            ${change >= 0 ? '+' : ''}${change.toFixed(2)}%
                        </p>
                    `;
                }
            }
        }

        // Mettre à jour les graphiques
        function updateCharts(eurRate, thbRate) {
            // Ajouter les nouveaux taux à l'historique
            eurHistory.push(eurRate);
            thbHistory.push(thbRate);
            
            // Garder seulement les derniers points
            if (eurHistory.length > maxHistoryPoints) {
                eurHistory.shift();
                thbHistory.shift();
            }
            
            // Mettre à jour les graphiques
            eurChart.data.datasets[0].data = eurHistory;
            thbChart.data.datasets[0].data = thbHistory;
            
            // Mettre à jour les labels avec les heures
            const now = new Date();
            const labels = [];
            for (let i = 0; i < maxHistoryPoints; i++) {
                const time = new Date(now.getTime() - (maxHistoryPoints - i - 1) * 60000);
                labels.push(time.getHours() + ':' + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes());
            }
            
            eurChart.data.labels = labels;
            thbChart.data.labels = labels;
            
            eurChart.update();
            thbChart.update();
        }

        // Convertir les devises
        function convertCurrency() {
            const amount = parseFloat(document.getElementById('amount').value);
            const fromCurrency = document.getElementById('from-currency').value;
            const toCurrency = document.getElementById('to-currency').value;
            
            if (isNaN(amount) || amount <= 0) {
                alert('Veuillez entrer un montant valide');
                return;
            }
            
            // Taux de change simulés (en pratique, utiliser les taux réels)
            const rates = {
                'EUR': 1.08,
                'THB': 0.028,
                'USD': 1.00
            };
            
            // Calculer le taux de conversion
            const fromRate = rates[fromCurrency];
            const toRate = rates[toCurrency];
            const convertedAmount = (amount * fromRate) / toRate;
            const conversionRate = toRate / fromRate;
            
            // Afficher le résultat
            document.getElementById('converted-amount').textContent = 
                `${amount.toFixed(2)} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
            
            document.getElementById('conversion-rate').textContent = 
                `Taux de conversion: 1 ${fromCurrency} = ${conversionRate.toFixed(6)} ${toCurrency}`;
            
            document.getElementById('conversion-result').classList.remove('hidden');
        }
    </script>
<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>
</html>