Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CryptoPredict - Analyse de marché crypto</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| crypto: { | |
| primary: '#396afc', | |
| secondary: '#2948ff', | |
| accent: '#00d2ff', | |
| dark: '#1a202c' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #396afc 0%, #2948ff 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sentiment-positive { background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%); } | |
| .sentiment-neutral { background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%); } | |
| .sentiment-negative { background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%); } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="trending-up" class="text-crypto-primary"></i> | |
| <span class="font-bold text-xl text-crypto-dark">CryptoPredict</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select id="cryptoSelect" class="block appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-crypto-primary"> | |
| <option value="bitcoin">Bitcoin (BTC)</option> | |
| <option value="ethereum">Ethereum (ETH)</option> | |
| <option value="cardano">Cardano (ADA)</option> | |
| <option value="solana">Solana (SOL)</option> | |
| <option value="xrp">XRP</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i data-feather="chevron-down" class="h-4 w-4"></i> | |
| </div> | |
| </div> | |
| <button id="languageToggle" class="flex items-center space-x-2 bg-crypto-primary text-white px-4 py-2 rounded-lg hover:bg-crypto-secondary transition"> | |
| <i data-feather="globe" class="h-4 w-4"></i> | |
| <span id="languageText">FR</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg pt-20 pb-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 id="heroTitle" class="text-4xl md:text-5xl font-extrabold text-white" data-aos="fade-up"> | |
| Analyse Prédictive Crypto Avancée | |
| </h1> | |
| <p id="heroSubtitle" class="mt-4 text-xl text-blue-100" data-aos="fade-up" data-aos-delay="200"> | |
| Combinaison d'analyse quantitative et qualitative pour des prédictions fiables | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Quantitative Analysis --> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover" data-aos="fade-right"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 id="quantitativeTitle" class="text-2xl font-bold text-crypto-dark">Analyse Quantitative</h2> | |
| <i data-feather="bar-chart-2" class="text-crypto-primary"></i> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p id="priceLabel" class="text-gray-600">Prix Actuel</p> | |
| <p id="currentPrice" class="text-2xl font-bold text-crypto-dark">€95,423.78</p> | |
| <p id="priceChange" class="text-green-500">+3.2% (24h)</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p id="volumeLabel" class="text-gray-600">Volume 24h</p> | |
| <p class="text-2xl font-bold text-crypto-dark">€32.5B</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <canvas id="priceChart" height="250"></canvas> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="text-center p-3 bg-blue-50 rounded-lg"> | |
| <p id="rsiLabel" class="text-sm text-gray-600">RSI</p> | |
| <p class="text-lg font-semibold">52.3</p> | |
| </div> | |
| <div class="text-center p-3 bg-blue-50 rounded-lg"> | |
| <p id="macdLabel" class="text-sm text-gray-600">MACD</p> | |
| <p class="text-lg font-semibold">Bullish</p> | |
| </div> | |
| <div class="text-center p-3 bg-blue-50 rounded-lg"> | |
| <p id="volatilityLabel" class="text-sm text-gray-600">Volatilité</p> | |
| <p class="text-lg font-semibold">3.2%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Qualitative Analysis --> | |
| <div class="bg-white rounded-xl shadow-md p-6 card-hover" data-aos="fade-left"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 id="qualitativeTitle" class="text-2xl font-bold text-crypto-dark">Analyse Qualitative</h2> | |
| <i data-feather="message-square" class="text-crypto-primary"></i> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 id="sentimentLabel" class="text-lg font-semibold">Sentiment du marché</h3> | |
| <div class="sentiment-positive text-white px-3 py-1 rounded-full text-sm"> | |
| <span id="sentimentValue">Positif</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-full h-2.5 mb-6"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="book-open" class="text-crypto-primary mt-1"></i> | |
| <div> | |
| <h4 id="newsLabel" class="font-semibold">Actualités récentes</h4> | |
| <p class="text-sm text-gray-600 mt-1">Adoption institutionnelle croissante • Nouveaux partenariats majeurs</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="users" class="text-crypto-primary mt-1"></i> | |
| <div> | |
| <h4 id="adoptionLabel" class="font-semibold">Niveau d'adoption</h4> | |
| <p class="text-sm text-gray-600 mt-1">Adoption croissante dans les pays émergents • Intérêt retail stable</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="file-text" class="text-crypto-primary mt-1"></i> | |
| <div> | |
| <h4 id="regulationLabel" class="font-semibold">Environnement régulatoire</h4> | |
| <p class="text-sm text-gray-600 mt-1">Clarté réglementaire en amélioration • Approche favorable dans plusieurs juridictions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prediction Result --> | |
| <div class="mt-12 bg-white rounded-xl shadow-md p-6" data-aos="zoom-in"> | |
| <div class="text-center mb-6"> | |
| <h2 id="predictionTitle" class="text-2xl font-bold text-crypto-dark">Prédiction de tendance</h2> | |
| <p id="predictionSubtitle" class="text-gray-600">Basée sur l'analyse combinée quantitative et qualitative</p> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center mb-4"> | |
| <i data-feather="arrow-up" class="text-white h-12 w-12"></i> | |
| </div> | |
| <h3 id="predictionResult" class="text-2xl font-bold text-green-600 mb-2">Tendance haussière</h3> | |
| <p id="confidenceLabel" class="text-gray-600">Confiance: <span class="font-semibold">78%</span></p> | |
| </div> | |
| <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 id="timeframeLabel" class="font-semibold mb-3">Perspective à court terme (1-2 semaines)</h4> | |
| <p class="text-gray-700">Consolidation suivie d'une possible avancée vers de nouveaux sommets, soutenue par une accumulation institutionnelle.</p> | |
| </div> | |
| <div> | |
| <h4 id="riskLabel" class="font-semibold mb-3">Niveau de risque</h4> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| <span class="ml-2 text-sm font-medium">Modéré</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize animations and icons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Initialize chart | |
| const ctx = document.getElementById('priceChart').getContext('2d'); | |
| const priceChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [{ | |
| label: 'Prix (€)', | |
| data: [42000, 48000, 52000, 58000, 62000, 68000, 72000, 78000, 85000, 88000, 92000, 95423], | |
| borderColor: '#396afc', | |
| tension: 0.1, | |
| fill: false | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false | |
| } | |
| } | |
| } | |
| }); | |
| // Language toggle functionality | |
| const languageToggle = document.getElementById('languageToggle'); | |
| const languageText = document.getElementById('languageText'); | |
| let isFrench = true; | |
| // French translations | |
| const frenchText = { | |
| heroTitle: "Analyse Prédictive Crypto Avancée", | |
| heroSubtitle: "Combinaison d'analyse quantitative et qualitative pour des prédictions fiables", | |
| quantitativeTitle: "Analyse Quantitative", | |
| priceLabel: "Prix Actuel", | |
| volumeLabel: "Volume 24h", | |
| rsiLabel: "RSI", | |
| macdLabel: "MACD", | |
| volatilityLabel: "Volatilité", | |
| qualitativeTitle: "Analyse Qualitative", | |
| sentimentLabel: "Sentiment du marché", | |
| sentimentValue: "Positif", | |
| newsLabel: "Actualités récentes", | |
| adoptionLabel: "Niveau d'adoption", | |
| regulationLabel: "Environnement régulatoire", | |
| predictionTitle: "Prédiction de tendance", | |
| predictionSubtitle: "Basée sur l'analyse combinée quantitative et qualitative", | |
| predictionResult: "Tendance haussière", | |
| confidenceLabel: "Confiance", | |
| timeframeLabel: "Perspective à court terme (1-2 semaines)", | |
| riskLabel: "Niveau de risque" | |
| }; | |
| // English translations | |
| const englishText = { | |
| heroTitle: "Advanced Crypto Predictive Analysis", | |
| heroSubtitle: "Combining quantitative and qualitative analysis for reliable predictions", | |
| quantitativeTitle: "Quantitative Analysis", | |
| priceLabel: "Current Price", | |
| volumeLabel: "24h Volume", | |
| rsiLabel: "RSI", | |
| macdLabel: "MACD", | |
| volatilityLabel: "Volatility", | |
| qualitativeTitle: "Qualitative Analysis", | |
| sentimentLabel: "Market Sentiment", | |
| sentimentValue: "Positive", | |
| newsLabel: "Recent News", | |
| adoptionLabel: "Adoption Level", | |
| regulationLabel: "Regulatory Environment", | |
| predictionTitle: "Trend Prediction", | |
| predictionSubtitle: "Based on combined quantitative and qualitative analysis", | |
| predictionResult: "Bullish Trend", | |
| confidenceLabel: "Confidence", | |
| timeframeLabel: "Short-term Perspective (1-2 weeks)", | |
| riskLabel: "Risk Level" | |
| }; | |
| languageToggle.addEventListener('click', function() { | |
| isFrench = !isFrench; | |
| if (isFrench) { | |
| languageText.textContent = 'FR'; | |
| updateTextContent(frenchText); | |
| } else { | |
| languageText.textContent = 'EN'; | |
| updateTextContent(englishText); | |
| } | |
| }); | |
| function updateTextContent(translations) { | |
| for (const [key, value] of Object.entries(translations)) { | |
| const element = document.getElementById(key); | |
| if (element) { | |
| element.textContent = value; | |
| } | |
| } | |
| } | |
| // Crypto selection functionality | |
| const cryptoSelect = document.getElementById('cryptoSelect'); | |
| cryptoSelect.addEventListener('change', function() { | |
| const selectedCrypto = cryptoSelect.value; | |
| // Update prices and data based on selected cryptocurrency | |
| updateCryptoData(selectedCrypto); | |
| }); | |
| // Function to update crypto data | |
| function updateCryptoData(crypto) { | |
| const cryptoData = { | |
| bitcoin: { | |
| price: 95423.78, | |
| change: "+3.2%", | |
| data: [42000, 48000, 52000, 58000, 62000, 68000, 72000, 78000, 85000, 88000, 92000, 95423], | |
| rsi: "54.8", | |
| macd: "Bullish", | |
| volatility: "4.1%", | |
| sentiment: "Positif" | |
| }, | |
| ethereum: { | |
| price: 3828.00, | |
| change: "+2.8%", | |
| data: [3200, 3300, 3400, 3500, 3600, 3650, 3700, 3750, 3800, 3820, 3825, 3828], | |
| rsi: "58.2", | |
| macd: "Bullish", | |
| volatility: "3.8%", | |
| sentiment: "Positif" | |
| }, | |
| cardano: { | |
| price: 0.85, | |
| change: "+1.2%", | |
| data: [0.45, 0.50, 0.55, 0.60, 0.65, 0.70, 0.75, 0.78, 0.80, 0.82, 0.84, 0.85], | |
| rsi: "56.3", | |
| macd: "Bullish", | |
| volatility: "4.5%", | |
| sentiment: "Neutre" | |
| }, | |
| solana: { | |
| price: 128.50, | |
| change: "-0.8%", | |
| data: [95, 100, 105, 110, 115, 120, 122, 125, 127, 128, 129, 128.5], | |
| rsi: "48.7", | |
| macd: "Neutral", | |
| volatility: "4.2%", | |
| sentiment: "Neutre" | |
| }, | |
| xrp: { | |
| price: 0.62, | |
| change: "+0.5%", | |
| data: [0.50, 0.52, 0.54, 0.56, 0.58, 0.59, 0.60, 0.61, 0.62, 0.62, 0.62, 0.62], | |
| rsi: "52.0", | |
| macd: "Neutral", | |
| volatility: "2.5%", | |
| sentiment: "Neutre" | |
| } | |
| }; | |
| const data = cryptoData[crypto] || cryptoData.bitcoin; | |
| // Update UI with new data | |
| document.getElementById('currentPrice').textContent = `€${data.price.toLocaleString('fr-FR')}`; | |
| document.getElementById('priceChange').textContent = `${data.change} (24h)`; | |
| document.getElementById('priceChange').className = data.change.startsWith('+') ? | |
| 'text-green-500' : 'text-red-500'; | |
| document.querySelector('.text-lg.font-semibold').textContent = data.rsi; | |
| document.querySelectorAll('.text-lg.font-semibold')[1].textContent = data.macd; | |
| document.querySelectorAll('.text-lg.font-semibold')[2].textContent = data.volatility; | |
| document.getElementById('sentimentValue').textContent = data.sentiment; | |
| // Update chart | |
| priceChart.data.datasets[0].data = data.data; | |
| priceChart.update(); | |
| // Update sentiment color | |
| const sentimentDiv = document.querySelector('.sentiment-positive'); | |
| sentimentDiv.className = `text-white px-3 py-1 rounded-full text-sm ${ | |
| data.sentiment === 'Positif' ? 'sentiment-positive' : | |
| data.sentiment === 'Neutre' ? 'sentiment-neutral' : 'sentiment-negative' | |
| }`; | |
| if (isFrench) { | |
| document.getElementById('sentimentValue').textContent = data.sentiment; | |
| } else { | |
| document.getElementById('sentimentValue').textContent = | |
| data.sentiment === 'Positif' ? 'Positive' : | |
| data.sentiment === 'Neutre' ? 'Neutral' : 'Negative'; | |
| } | |
| } | |
| // Initialize with Bitcoin data | |
| updateCryptoData('bitcoin'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |