Hugging Face's logo

Spaces:
Flynf
/
predictcrypto
Running

App Files Community
predictcrypto / index.html
Flynf's picture
Flynf
créé une application de prédiction crypto ( on doit pouvoir sélectionner une crypto a analyser) elle devra mélanger l’analyse quantitative (prix, volumes, on-chain, TA) avec l’analyse qualitative (sentiment, news, adoption, régulation) pour donner une tendance fiable. Tout dois etre en français avec possibilité de passer à l'anglais - Initial Deployment
5fe6fef verified
raw
history blame contribute delete
60.4 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PredictCrypto - Analyse prédictive des cryptomonnaies</title>
<script src="https://cdn.tailwindcss.com"></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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6B46C1 0%, #3B82F6 100%);
}
.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);
}
.language-switcher {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Language Switcher -->
<div class="language-switcher">
<button id="languageToggle" class="bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition">
<i data-feather="globe"></i>
</button>
</div>
<!-- Header -->
<header class="gradient-bg text-white py-16">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4" data-i18n="title">PredictCrypto</h1>
<p class="text-xl md:text-2xl mb-8" data-i18n="subtitle">Analyse prédictive des cryptomonnaies combinant données quantitatives et qualitatives</p>
<div class="max-w-2xl mx-auto">
<div class="bg-white rounded-lg shadow-xl p-4">
<div class="flex items-center">
<select id="cryptoSelect" class="flex-grow p-3 rounded-l-lg border-r border-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 text-gray-800">
<option value="" disabled selected data-i18n="selectCrypto">Sélectionnez une cryptomonnaie</option>
<option value="BTC">Bitcoin (BTC)</option>
<option value="ETH">Ethereum (ETH)</option>
<option value="BNB">Binance Coin (BNB)</option>
<option value="SOL">Solana (SOL)</option>
<option value="XRP">Ripple (XRP)</option>
</select>
<button id="analyzeBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-r-lg transition">
<span data-i18n="analyze">Analyser</span>
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-12">
<!-- Loading State -->
<div id="loading" class="hidden text-center py-12">
<div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mb-4"></div>
<p class="text-xl text-gray-700" data-i18n="loading">Analyse en cours...</p>
</div>
<!-- Results Section -->
<div id="results" class="hidden">
<!-- Prediction Summary -->
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8" data-aos="fade-up">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<img id="cryptoIcon" src="" alt="" class="w-10 h-10 mr-3">
<h2 id="cryptoName" class="text-2xl font-bold text-gray-800"></h2>
<span id="cryptoPrice" class="ml-4 text-xl font-semibold"></span>
<span id="priceChange" class="ml-2 px-2 py-1 rounded-full text-sm"></span>
</div>
<div id="predictionBadge" class="px-4 py-2 rounded-full text-white font-bold"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<h3 class="text-lg font-semibold mb-2" data-i18n="prediction">Prédiction</h3>
<p id="predictionText" class="text-gray-700"></p>
</div>
<div>
<h3 class="text-lg font-semibold mb-2" data-i18n="confidence">Confiance</h3>
<div class="w-full bg-gray-200 rounded-full h-4">
<div id="confidenceBar" class="h-4 rounded-full"></div>
</div>
<p id="confidenceText" class="mt-2 text-sm text-gray-600"></p>
</div>
</div>
</div>
</div>
<!-- Analysis Tabs -->
<div class="mb-8" data-aos="fade-up">
<div class="border-b border-gray-200">
<nav class="-mb-px flex space-x-8">
<button id="quantitativeTab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-purple-500 text-purple-600" data-i18n="quantitative">Quantitatif</button>
<button id="qualitativeTab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-i18n="qualitative">Qualitatif</button>
<button id="combinedTab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-i18n="combined">Combiné</button>
</nav>
</div>
</div>
<!-- Quantitative Analysis -->
<div id="quantitativeContent" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<!-- Price Chart -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
<h3 class="text-lg font-semibold mb-4" data-i18n="priceEvolution">Évolution du prix</h3>
<div class="h-64">
<canvas id="priceChart"></canvas>
</div>
</div>
<!-- Volume Analysis -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-left">
<h3 class="text-lg font-semibold mb-4" data-i18n="volumeAnalysis">Analyse des volumes</h3>
<div class="h-64">
<canvas id="volumeChart"></canvas>
</div>
</div>
<!-- Technical Indicators -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
<h3 class="text-lg font-semibold mb-4" data-i18n="technicalIndicators">Indicateurs techniques</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium" data-i18n="rsi">RSI (14 jours)</span>
<span id="rsiValue" class="text-sm"></span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="rsiBar" class="h-2.5 rounded-full"></div>
</div>
<p id="rsiInterpretation" class="mt-1 text-xs text-gray-500"></p>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium" data-i18n="macd">MACD</span>
<span id="macdValue" class="text-sm"></span>
</div>
<p id="macdInterpretation" class="mt-1 text-xs text-gray-500"></p>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium" data-i18n="movingAverages">Moyennes mobiles</span>
<span id="maValue" class="text-sm"></span>
</div>
<p id="maInterpretation" class="mt-1 text-xs text-gray-500"></p>
</div>
</div>
</div>
<!-- On-Chain Metrics -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-left">
<h3 class="text-lg font-semibold mb-4" data-i18n="onChainMetrics">Métriques On-Chain</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="activeAddresses">Adresses actives</p>
<p id="activeAddresses" class="font-semibold"></p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="transactionCount">Nombre de transactions</p>
<p id="transactionCount" class="font-semibold"></p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="hashRate">Hashrate (BTC)</p>
<p id="hashRate" class="font-semibold"></p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="gasPrice">Prix du gaz (ETH)</p>
<p id="gasPrice" class="font-semibold"></p>
</div>
</div>
</div>
</div>
<!-- Qualitative Analysis -->
<div id="qualitativeContent" class="hidden grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<!-- Sentiment Analysis -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
<h3 class="text-lg font-semibold mb-4" data-i18n="sentimentAnalysis">Analyse de sentiment</h3>
<div class="h-64">
<canvas id="sentimentChart"></canvas>
</div>
<p id="sentimentText" class="mt-4 text-sm text-gray-600"></p>
</div>
<!-- News Impact -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-a18n="fade-left">
<h3 class="text-lg font-semibold mb-4" data-i18n="newsImpact">Impact des actualités</h3>
<div class="space-y-4">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex items-start">
<span class="bg-purple-100 text-purple-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded" data-i18n="positive">Positif</span>
<p class="text-sm" data-i18n="news1">Adoption croissante par les institutions</p>
</div>
</div>
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex items-start">
<span class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded" data-i18n="negative">Négatif</span>
<p class="text-sm" data-i18n="news2">Incertitudes réglementaires en Asie</p>
</div>
</div>
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex items-start">
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded" data-i18n="neutral">Neutre</span>
<p class="text-sm" data-i18n="news3">Mise à jour du réseau prévue pour Q3</p>
</div>
</div>
</div>
</div>
<!-- Adoption Metrics -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
<h3 class="text-lg font-semibold mb-4" data-i18n="adoptionMetrics">Métriques d'adoption</h3>
<div class="space-y-4">
<div>
<p class="text-sm text-gray-500 mb-1" data-i18n="institutionalAdoption">Adoption institutionnelle</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="institutionalBar" class="h-2.5 rounded-full bg-blue-600" style="width: 65%"></div>
</div>
</div>
<div>
<p class="text-sm text-gray-500 mb-1" data-i18n="retailAdoption">Adoption retail</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="retailBar" class="h-2.5 rounded-full bg-green-600" style="width: 42%"></div>
</div>
</div>
<div>
<p class="text-sm text-gray-500 mb-1" data-i18n="developerActivity">Activité des développeurs</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="developerBar" class="h-2.5 rounded-full bg-purple-600" style="width: 78%"></div>
</div>
</div>
</div>
</div>
<!-- Regulatory Landscape -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-left">
<h3 class="text-lg font-semibold mb-4" data-i18n="regulatoryLandscape">Environnement réglementaire</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="usRegulation">États-Unis</p>
<p class="font-semibold text-yellow-600" data-i18n="mixed">Mixte</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="euRegulation">Europe</p>
<p class="font-semibold text-green-600" data-i18n="positive">Positif</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="asiaRegulation">Asie</p>
<p class="font-semibold text-red-600" data-i18n="negative">Négatif</p>
</div>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="text-sm text-gray-500" data-i18n="globalTrend">Tendance globale</p>
<p class="font-semibold text-blue-600" data-i18n="improving">En amélioration</p>
</div>
</div>
</div>
</div>
<!-- Combined Analysis -->
<div id="combinedContent" class="hidden">
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-4" data-i18n="combinedAnalysis">Analyse combinée</h3>
<div class="h-96">
<canvas id="combinedChart"></canvas>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-right">
<h3 class="text-lg font-semibold mb-4" data-i18n="strengths">Forces</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
<span data-i18n="strength1">Adoption institutionnelle croissante</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
<span data-i18n="strength2">Activité développeur robuste</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
<span data-i18n="strength3">Indicateurs techniques favorables</span>
</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-left">
<h3 class="text-lg font-semibold mb-4" data-i18n="weaknesses">Faiblesses</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i data-feather="x-circle" class="text-red-500 mr-2 mt-1"></i>
<span data-i18n="weakness1">Incertitudes réglementaires</span>
</li>
<li class="flex items-start">
<i data-feather="x-circle" class="text-red-500 mr-2 mt-1"></i>
<span data-i18n="weakness2">Sentiment retail mitigé</span>
</li>
<li class="flex items-start">
<i data-feather="x-circle" class="text-red-500 mr-2 mt-1"></i>
<span data-i18n="weakness3">Concurrence accrue</span>
</li>
</ul>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mt-6" data-aos="fade-up">
<h3 class="text-lg font-semibold mb-4" data-i18n="recommendation">Recommandation</h3>
<div class="p-4 bg-blue-50 rounded-lg">
<div class="flex">
<i data-feather="alert-circle" class="text-blue-500 mr-3 mt-1"></i>
<p id="recommendationText" data-i18n="recommendationText">Notre analyse suggère une tendance haussière à moyen terme avec une confiance modérée. Les indicateurs techniques et l'adoption institutionnelle sont favorables, mais les incertitudes réglementaires justifient une certaine prudence.</p>
</div>
</div>
</div>
</div>
</div>
<!-- How It Works -->
<div class="max-w-4xl mx-auto mt-16">
<h2 class="text-3xl font-bold text-center mb-8" data-i18n="howItWorks">Comment ça marche ?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition" data-aos="fade-up" data-aos-delay="0">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="bar-chart-2" class="text-purple-600 w-6 h-6"></i>
</div>
<h3 class="text-lg font-semibold mb-2" data-i18n="step1Title">Analyse quantitative</h3>
<p class="text-gray-600" data-i18n="step1Desc">Nous analysons les données de prix, volumes, indicateurs techniques et métriques on-chain pour identifier les tendances.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition" data-aos="fade-up" data-aos-delay="100">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="message-square" class="text-blue-600 w-6 h-6"></i>
</div>
<h3 class="text-lg font-semibold mb-2" data-i18n="step2Title">Analyse qualitative</h3>
<p class="text-gray-600" data-i18n="step2Desc">Nous évaluons le sentiment du marché, les actualités, l'adoption et l'environnement réglementaire.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition" data-aos="fade-up" data-aos-delay="200">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="cpu" class="text-green-600 w-6 h-6"></i>
</div>
<h3 class="text-lg font-semibold mb-2" data-i18n="step3Title">Modèle prédictif</h3>
<p class="text-gray-600" data-i18n="step3Desc">Notre algorithme combine ces analyses pour générer une prédiction avec un indice de confiance.</p>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4" data-i18n="about">À propos</h3>
<p class="text-gray-400" data-i18n="aboutText">PredictCrypto combine analyse technique et fondamentale avec intelligence artificielle pour fournir des prédictions crypto fiables.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4" data-i18n="resources">Ressources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="blog">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="guides">Guides</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="research">Recherche</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4" data-i18n="legal">Légal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="terms">Conditions</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="privacy">Confidentialité</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="disclaimer">Avertissement</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4" data-i18n="contact">Contact</h3>
<ul class="space-y-2">
<li class="flex items-center">
<i data-feather="mail" class="w-4 h-4 mr-2 text-gray-400"></i>
<a href="mailto:contact@predictcrypto.com" class="text-gray-400 hover:text-white transition">contact@predictcrypto.com</a>
</li>
<li class="flex items-center">
<i data-feather="twitter" class="w-4 h-4 mr-2 text-gray-400"></i>
<a href="#" class="text-gray-400 hover:text-white transition" data-i18n="twitter">Twitter</a>
</li>
<li class="flex items-center">
<i data-feather="linkedin" class="w-4 h-4 mr-2 text-gray-400"></i>
<a href="#" class="text-gray-400 hover:text-white transition" data-i18n="linkedin">LinkedIn</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p data-i18n="copyright">© 2023 PredictCrypto. Tous droits réservés.</p>
</div>
</div>
</footer>
<script>
// Initialize AOS
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Language switcher
const languageToggle = document.getElementById('languageToggle');
let currentLanguage = 'fr';
languageToggle.addEventListener('click', () => {
currentLanguage = currentLanguage === 'fr' ? 'en' : 'fr';
updateLanguage();
});
function updateLanguage() {
const elements = document.querySelectorAll('[data-i18n]');
elements.forEach(element => {
const key = element.getAttribute('data-i18n');
element.textContent = translations[currentLanguage][key] || element.textContent;
});
// Update button icon
feather.replace();
}
const translations = {
fr: {
"title": "PredictCrypto",
"subtitle": "Analyse prédictive des cryptomonnaies combinant données quantitatives et qualitatives",
"selectCrypto": "Sélectionnez une cryptomonnaie",
"analyze": "Analyser",
"loading": "Analyse en cours...",
"prediction": "Prédiction",
"confidence": "Confiance",
"quantitative": "Quantitatif",
"qualitative": "Qualitatif",
"combined": "Combiné",
"priceEvolution": "Évolution du prix",
"volumeAnalysis": "Analyse des volumes",
"technicalIndicators": "Indicateurs techniques",
"rsi": "RSI (14 jours)",
"macd": "MACD",
"movingAverages": "Moyennes mobiles",
"onChainMetrics": "Métriques On-Chain",
"activeAddresses": "Adresses actives",
"transactionCount": "Nombre de transactions",
"hashRate": "Hashrate (BTC)",
"gasPrice": "Prix du gaz (ETH)",
"sentimentAnalysis": "Analyse de sentiment",
"newsImpact": "Impact des actualités",
"positive": "Positif",
"negative": "Négatif",
"neutral": "Neutre",
"news1": "Adoption croissante par les institutions",
"news2": "Incertitudes réglementaires en Asie",
"news3": "Mise à jour du réseau prévue pour Q3",
"adoptionMetrics": "Métriques d'adoption",
"institutionalAdoption": "Adoption institutionnelle",
"retailAdoption": "Adoption retail",
"developerActivity": "Activité des développeurs",
"regulatoryLandscape": "Environnement réglementaire",
"usRegulation": "États-Unis",
"euRegulation": "Europe",
"asiaRegulation": "Asie",
"globalTrend": "Tendance globale",
"mixed": "Mixte",
"improving": "En amélioration",
"combinedAnalysis": "Analyse combinée",
"strengths": "Forces",
"strength1": "Adoption institutionnelle croissante",
"strength2": "Activité développeur robuste",
"strength3": "Indicateurs techniques favorables",
"weaknesses": "Faiblesses",
"weakness1": "Incertitudes réglementaires",
"weakness2": "Sentiment retail mitigé",
"weakness3": "Concurrence accrue",
"recommendation": "Recommandation",
"recommendationText": "Notre analyse suggère une tendance haussière à moyen terme avec une confiance modérée. Les indicateurs techniques et l'adoption institutionnelle sont favorables, mais les incertitudes réglementaires justifient une certaine prudence.",
"howItWorks": "Comment ça marche ?",
"step1Title": "Analyse quantitative",
"step1Desc": "Nous analysons les données de prix, volumes, indicateurs techniques et métriques on-chain pour identifier les tendances.",
"step2Title": "Analyse qualitative",
"step2Desc": "Nous évaluons le sentiment du marché, les actualités, l'adoption et l'environnement réglementaire.",
"step3Title": "Modèle prédictif",
"step3Desc": "Notre algorithme combine ces analyses pour générer une prédiction avec un indice de confiance.",
"about": "À propos",
"aboutText": "PredictCrypto combine analyse technique et fondamentale avec intelligence artificielle pour fournir des prédictions crypto fiables.",
"resources": "Ressources",
"blog": "Blog",
"guides": "Guides",
"research": "Recherche",
"legal": "Légal",
"terms": "Conditions",
"privacy": "Confidentialité",
"disclaimer": "Avertissement",
"contact": "Contact",
"twitter": "Twitter",
"linkedin": "LinkedIn",
"copyright": "© 2023 PredictCrypto. Tous droits réservés."
},
en: {
"title": "PredictCrypto",
"subtitle": "Cryptocurrency predictive analysis combining quantitative and qualitative data",
"selectCrypto": "Select a cryptocurrency",
"analyze": "Analyze",
"loading": "Analysis in progress...",
"prediction": "Prediction",
"confidence": "Confidence",
"quantitative": "Quantitative",
"qualitative": "Qualitative",
"combined": "Combined",
"priceEvolution": "Price evolution",
"volumeAnalysis": "Volume analysis",
"technicalIndicators": "Technical indicators",
"rsi": "RSI (14 days)",
"macd": "MACD",
"movingAverages": "Moving averages",
"onChainMetrics": "On-Chain metrics",
"activeAddresses": "Active addresses",
"transactionCount": "Transaction count",
"hashRate": "Hashrate (BTC)",
"gasPrice": "Gas price (ETH)",
"sentimentAnalysis": "Sentiment analysis",
"newsImpact": "News impact",
"positive": "Positive",
"negative": "Negative",
"neutral": "Neutral",
"news1": "Growing institutional adoption",
"news2": "Regulatory uncertainties in Asia",
"news3": "Network update planned for Q3",
"adoptionMetrics": "Adoption metrics",
"institutionalAdoption": "Institutional adoption",
"retailAdoption": "Retail adoption",
"developerActivity": "Developer activity",
"regulatoryLandscape": "Regulatory landscape",
"usRegulation": "United States",
"euRegulation": "Europe",
"asiaRegulation": "Asia",
"globalTrend": "Global trend",
"mixed": "Mixed",
"improving": "Improving",
"combinedAnalysis": "Combined analysis",
"strengths": "Strengths",
"strength1": "Growing institutional adoption",
"strength2": "Strong developer activity",
"strength3": "Favorable technical indicators",
"weaknesses": "Weaknesses",
"weakness1": "Regulatory uncertainties",
"weakness2": "Mixed retail sentiment",
"weakness3": "Increased competition",
"recommendation": "Recommendation",
"recommendationText": "Our analysis suggests a medium-term bullish trend with moderate confidence. Technical indicators and institutional adoption are favorable, but regulatory uncertainties warrant some caution.",
"howItWorks": "How it works",
"step1Title": "Quantitative analysis",
"step1Desc": "We analyze price data, volumes, technical indicators and on-chain metrics to identify trends.",
"step2Title": "Qualitative analysis",
"step2Desc": "We assess market sentiment, news, adoption and regulatory environment.",
"step3Title": "Predictive model",
"step3Desc": "Our algorithm combines these analyses to generate a prediction with a confidence index.",
"about": "About",
"aboutText": "PredictCrypto combines technical and fundamental analysis with artificial intelligence to provide reliable crypto predictions.",
"resources": "Resources",
"blog": "Blog",
"guides": "Guides",
"research": "Research",
"legal": "Legal",
"terms": "Terms",
"privacy": "Privacy",
"disclaimer": "Disclaimer",
"contact": "Contact",
"twitter": "Twitter",
"linkedin": "LinkedIn",
"copyright": "© 2023 PredictCrypto. All rights reserved."
}
};
// Crypto data and analysis simulation
const cryptoData = {
BTC: {
name: "Bitcoin",
symbol: "BTC",
price: 42356.78,
change24h: 2.34,
icon: "https://cryptologos.cc/logos/bitcoin-btc-logo.png",
prediction: "Tendance haussière à moyen terme",
confidence: 72,
rsi: 58,
macd: "Bullish crossover",
movingAverages: "Price above 50-day and 200-day MA",
activeAddresses: "1.2M",
transactionCount: "350K",
hashRate: "180 EH/s",
sentiment: {
positive: 45,
neutral: 35,
negative: 20
}
},
ETH: {
name: "Ethereum",
symbol: "ETH",
price: 2256.42,
change24h: -1.12,
icon: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
prediction: "Consolidation à court terme",
confidence: 65,
rsi: 49,
macd: "Neutral",
movingAverages: "Price between 50-day and 200-day MA",
activeAddresses: "850K",
transactionCount: "1.1M",
gasPrice: "45 Gwei",
sentiment: {
positive: 38,
neutral: 42,
negative: 20
}
},
BNB: {
name: "Binance Coin",
symbol: "BNB",
price: 312.56,
change24h: 3.78,
icon: "https://cryptologos.cc/logos/bnb-bnb-logo.png",
prediction: "Tendance haussière à court terme",
confidence: 68,
rsi: 62,
macd: "Bullish",
movingAverages: "Price above 50-day and 200-day MA",
activeAddresses: "420K",
transactionCount: "3.5M",
sentiment: {
positive: 52,
neutral: 30,
negative: 18
}
},
SOL: {
name: "Solana",
symbol: "SOL",
price: 98.23,
change24h: 5.67,
icon: "https://cryptologos.cc/logos/solana-sol-logo.png",
prediction: "Forte tendance haussière",
confidence: 81,
rsi: 65,
macd: "Strong bullish",
movingAverages: "Price well above 50-day and 200-day MA",
activeAddresses: "680K",
transactionCount: "25M",
sentiment: {
positive: 60,
neutral: 30,
negative: 10
}
},
XRP: {
name: "Ripple",
symbol: "XRP",
price: 0.5423,
change24h: -0.23,
icon: "https://cryptologos.cc/logos/xrp-xrp-logo.png",
prediction: "Tendance neutre avec volatilité",
confidence: 55,
rsi: 47,
macd: "Bearish",
movingAverages: "Price below 50-day MA",
activeAddresses: "380K",
transactionCount: "1.2M",
sentiment: {
positive: 30,
neutral: 40,
negative: 30
}
}
};
// Tab switching
const quantitativeTab = document.getElementById('quantitativeTab');
const qualitativeTab = document.getElementById('qualitativeTab');
const combinedTab = document.getElementById('combinedTab');
const quantitativeContent = document.getElementById('quantitativeContent');
const qualitativeContent = document.getElementById('qualitativeContent');
const combinedContent = document.getElementById('combinedContent');
quantitativeTab.addEventListener('click', () => {
quantitativeContent.classList.remove('hidden');
qualitativeContent.classList.add('hidden');
combinedContent.classList.add('hidden');
quantitativeTab.classList.add('border-purple-500', 'text-purple-600');
quantitativeTab.classList.remove('border-transparent', 'text-gray-500');
qualitativeTab.classList.remove('border-purple-500', 'text-purple-600');
qualitativeTab.classList.add('border-transparent', 'text-gray-500');
combinedTab.classList.remove('border-purple-500', 'text-purple-600');
combinedTab.classList.add('border-transparent', 'text-gray-500');
});
qualitativeTab.addEventListener('click', () => {
quantitativeContent.classList.add('hidden');
qualitativeContent.classList.remove('hidden');
combinedContent.classList.add('hidden');
quantitativeTab.classList.remove('border-purple-500', 'text-purple-600');
quantitativeTab.classList.add('border-transparent', 'text-gray-500');
qualitativeTab.classList.add('border-purple-500', 'text-purple-600');
qualitativeTab.classList.remove('border-transparent', 'text-gray-500');
combinedTab.classList.remove('border-purple-500', 'text-purple-600');
combinedTab.classList.add('border-transparent', 'text-gray-500');
});
combinedTab.addEventListener('click', () => {
quantitativeContent.classList.add('hidden');
qualitativeContent.classList.add('hidden');
combinedContent.classList.remove('hidden');
quantitativeTab.classList.remove('border-purple-500', 'text-purple-600');
quantitativeTab.classList.add('border-transparent', 'text-gray-500');
qualitativeTab.classList.remove('border-purple-500', 'text-purple-600');
qualitativeTab.classList.add('border-transparent', 'text-gray-500');
combinedTab.classList.add('border-purple-500', 'text-purple-600');
combinedTab.classList.remove('border-transparent', 'text-gray-500');
});
// Analyze button click handler
document.getElementById('analyzeBtn').addEventListener('click', () => {
const selectedCrypto = document.getElementById('cryptoSelect').value;
if (!selectedCrypto) {
alert(currentLanguage === 'fr' ? "Veuillez sélectionner une cryptomonnaie" : "Please select a cryptocurrency");
return;
}
// Show loading state
document.getElementById('loading').classList.remove('hidden');
document.getElementById('results').classList.add('hidden');
// Simulate analysis delay
setTimeout(() => {
analyzeCrypto(selectedCrypto);
// Hide loading and show results
document.getElementById('loading').classList.add('hidden');
document.getElementById('results').classList.remove('hidden');
// Scroll to results
document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
}, 1500);
});
function analyzeCrypto(symbol) {
const data = cryptoData[symbol];
// Update basic info
document.getElementById('cryptoIcon').src = data.icon;
document.getElementById('cryptoIcon').alt = data.name;
document.getElementById('cryptoName').textContent = `${data.name} (${data.symbol})`;
// Format price and change
const priceFormatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: data.price < 1 ? 4 : 2
}).format(data.price);
document.getElementById('cryptoPrice').textContent = priceFormatted;
const changeElement = document.getElementById('priceChange');
changeElement.textContent = `${data.change24h > 0 ? '+' : ''}${data.change24h.toFixed(2)}%`;
if (data.change24h > 0) {
changeElement.classList.add('bg-green-100', 'text-green-800');
changeElement.classList.remove('bg-red-100', 'text-red-800');
} else {
changeElement.classList.add('bg-red-100', 'text-red-800');
changeElement.classList.remove('bg-green-100', 'text-green-800');
}
// Update prediction
document.getElementById('predictionText').textContent = data.prediction;
// Update confidence
const confidenceBar = document.getElementById('confidenceBar');
confidenceBar.style.width = `${data.confidence}%`;
if (data.confidence > 70) {
confidenceBar.classList.add('bg-green-500');
confidenceBar.classList.remove('bg-yellow-500', 'bg-red-500');
} else if (data.confidence > 50) {
confidenceBar.classList.add('bg-yellow-500');
confidenceBar.classList.remove('bg-green-500', 'bg-red-500');
} else {
confidenceBar.classList.add('bg-red-500');
confidenceBar.classList.remove('bg-green-500', 'bg-yellow-500');
}
document.getElementById('confidenceText').textContent = `${data.confidence}% ${currentLanguage === 'fr' ? 'de confiance' : 'confidence'}`;
// Update prediction badge
const predictionBadge = document.getElementById('predictionBadge');
predictionBadge.textContent = data.prediction.split(' ')[0]; // First word of prediction
if (data.prediction.includes('hauss') || data.prediction.includes('bull')) {
predictionBadge.classList.add('bg-green-500');
predictionBadge.classList.remove('bg-red-500', 'bg-yellow-500');
} else if (data.prediction.includes('baiss') || data.prediction.includes('bear')) {
predictionBadge.classList.add('bg-red-500');
predictionBadge.classList.remove('bg-green-500', 'bg-yellow-500');
} else {
predictionBadge.classList.add('bg-yellow-500');
predictionBadge.classList.remove('bg-green-500', 'bg-red-500');
}
// Update technical indicators
document.getElementById('rsiValue').textContent = data.rsi;
const rsiBar = document.getElementById('rsiBar');
rsiBar.style.width = `${data.rsi}%`;
if (data.rsi > 70) {
rsiBar.classList.add('bg-red-500');
rsiBar.classList.remove('bg-green-500', 'bg-yellow-500');
document.getElementById('rsiInterpretation').textContent = currentLanguage === 'fr' ? "Surachat (RSI > 70)" : "Overbought (RSI > 70)";
} else if (data.rsi < 30) {
rsiBar.classList.add('bg-green-500');
rsiBar.classList.remove('bg-red-500', 'bg-yellow-500');
document.getElementById('rsiInterpretation').textContent = currentLanguage === 'fr' ? "Survente (RSI < 30)" : "Oversold (RSI < 30)";
} else {
rsiBar.classList.add('bg-yellow-500');
rsiBar.classList.remove('bg-green-500', 'bg-red-500');
document.getElementById('rsiInterpretation').textContent = currentLanguage === 'fr' ? "Neutre" : "Neutral";
}
document.getElementById('macdValue').textContent = data.macd;
if (data.macd.includes('bull')) {
document.getElementById('macdInterpretation').textContent = currentLanguage === 'fr' ? "Signal haussier" : "Bullish signal";
document.getElementById('macdInterpretation').classList.add('text-green-500');
document.getElementById('macdInterpretation').classList.remove('text-red-500', 'text-yellow-500');
} else if (data.macd.includes('bear')) {
document.getElementById('macdInterpretation').textContent = currentLanguage === 'fr' ? "Signal baissier" : "Bearish signal";
document.getElementById('macdInterpretation').classList.add('text-red-500');
document.getElementById('macdInterpretation').classList.remove('text-green-500', 'text-yellow-500');
} else {
document.getElementById('macdInterpretation').textContent = currentLanguage === 'fr' ? "Signal neutre" : "Neutral signal";
document.getElementById('macdInterpretation').classList.add('text-yellow-500');
document.getElementById('macdInterpretation').classList.remove('text-green-500', 'text-red-500');
}
document.getElementById('maValue').textContent = data.movingAverages;
if (data.movingAverages.includes('above')) {
document.getElementById('maInterpretation').textContent = currentLanguage === 'fr' ? "Tendance haussière" : "Bullish trend";
document.getElementById('maInterpretation').classList.add('text-green-500');
document.getElementById('maInterpretation').classList.remove('text-red-500', 'text-yellow-500');
} else if (data.movingAverages.includes('below')) {
document.getElementById('maInterpretation').textContent = currentLanguage === 'fr' ? "Tendance baissière" : "Bearish trend";
document.getElementById('maInterpretation').classList.add('text-red-500');
document.getElementById('maInterpretation').classList.remove('text-green-500', 'text-yellow-500');
} else {
document.getElementById('maInterpretation').textContent = currentLanguage === 'fr' ? "Tendance neutre" : "Neutral trend";
document.getElementById('maInterpretation').classList.add('text-yellow-500');
document.getElementById('maInterpretation').classList.remove('text-green-500', 'text-red-500');
}
// Update on-chain metrics
if (data.activeAddresses) document.getElementById('activeAddresses').textContent = data.activeAddresses;
if (data.transactionCount) document.getElementById('transactionCount').textContent = data.transactionCount;
if (data.hashRate) document.getElementById('hashRate').textContent = data.hashRate;
if (data.gasPrice) document.getElementById('gasPrice').textContent = data.gasPrice;
// Update charts
updateCharts(symbol);
}
function updateCharts(symbol) {
const data = cryptoData[symbol];
// Price Chart
const priceCtx = document.getElementById('priceChart').getContext('2d');
if (window.priceChart) {
window.priceChart.destroy();
}
window.priceChart = new Chart(priceCtx, {
type: 'line',
data: {
labels: Array.from({length: 30}, (_, i) => `${i+1} ${currentLanguage === 'fr' ? 'juin' : 'Jun'}`),
datasets: [{
label: currentLanguage === 'fr' ? 'Prix (USD)' : 'Price (USD)',
data: generateRandomData(30, data.price * 0.8, data.price * 1.2),
borderColor: '#8B5CF6',
backgroundColor: 'rgba(139, 92, 246, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: false
}
}
}
});
// Volume Chart
const volumeCtx = document.getElementById('volumeChart').getContext('2d');
if (window.volumeChart) {
window.volumeChart.destroy();
}
window.volumeChart = new Chart(volumeCtx, {
type: 'bar',
data: {
labels: Array.from({length: 30}, (_, i) => `${i+1} ${currentLanguage === 'fr' ? 'juin' : 'Jun'}`),
datasets: [{
label: currentLanguage === 'fr' ? 'Volume (USD)' : 'Volume (USD)',
data: generateRandomData(30, 10000000, 500000000),
backgroundColor: 'rgba(99, 102, 241, 0.7)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
// Sentiment Chart
const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
if (window.sentimentChart) {
window.sentimentChart.destroy();
}
window.sentimentChart = new Chart(sentimentCtx, {
type: 'doughnut',
data: {
labels: [
currentLanguage === 'fr' ? 'Positif' : 'Positive',
currentLanguage === 'fr' ? 'Neutre' : 'Neutral',
currentLanguage === 'fr' ? 'Négatif' : 'Negative'
],
datasets: [{
data: [data.sentiment.positive, data.sentiment.neutral, data.sentiment.negative],
backgroundColor: [
'rgba(16, 185, 129, 0.8)',
'rgba(245, 158, 11, 0.8)',
'rgba(239, 68, 68, 0.8)'
],
borderColor: [
'rgba(16, 185, 129, 1)',
'rgba(245, 158, 11, 1)',
'rgba(239, 68, 68, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right'
}
},
cutout: '70%'
}
});
// Combined Chart
const combinedCtx = document.getElementById('combinedChart').getContext('2d');
if (window.combinedChart) {
window.combinedChart.destroy();
}
window.combinedChart = new Chart(combinedCtx, {
type: 'radar',
data: {
labels: [
currentLanguage === 'fr' ? 'Prix' : 'Price',
currentLanguage === 'fr' ? 'Volume' : 'Volume',
currentLanguage === 'fr' ? 'RSI' : 'RSI',
currentLanguage === 'fr' ? 'MACD' : 'MACD',
currentLanguage === 'fr' ? 'Moyennes' : 'MAs',
currentLanguage === 'fr' ? 'Sentiment' : 'Sentiment',
currentLanguage === 'fr' ? 'Actualités' : 'News',
currentLanguage === 'fr' ? 'Adoption' : 'Adoption',
currentLanguage === 'fr' ? 'Régulation' : 'Regulation'
],
datasets: [
{
label: currentLanguage === 'fr' ? 'Quantitatif' : 'Quantitative',
data: [
Math.random() * 80 + 20,
Math.random() * 80 + 20,
data.rsi,
data.macd.includes('bull') ? 80 : data.macd.includes('bear') ? 30 : 50,
data.movingAverages.includes('above') ? 80 : data.movingAverages.includes('below') ? 30 : 50,
50,
50,
50,
50
],
backgroundColor: 'rgba(99, 102, 241, 0.2)',
borderColor: 'rgba(99, 102, 241, 1)',
pointBackgroundColor: 'rgba(99, 102, 241, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 2
},
{
label: currentLanguage === 'fr' ? 'Qualitatif' : 'Qualitative',
data: [
50,
50,
50,
50,
50,
data.sentiment.positive,
data.newsImpact ? 70 : 30,
data.adoption ? 70 : 30,
data.regulation ? 70 : 30
],
backgroundColor: 'rgba(245, 158, 11, 0.2)',
borderColor: 'rgba(245, 158, 11, 1)',
pointBackgroundColor: 'rgba(245, 158, 11, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(245, 158, 11, 1)',
borderWidth: 2
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
angleLines: {
display: true
},
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
// Update sentiment text
let sentimentText = '';
if (data.sentiment.positive > data.sentiment.negative && data.sentiment.positive > data.sentiment.neutral) {
sentimentText = currentLanguage === 'fr'
? "Le sentiment global est positif, avec une majorité de discussions favorables sur les réseaux sociaux et les forums."
: "The overall sentiment is positive, with a majority of favorable discussions on social media and forums.";
} else if (data.sentiment.negative > data.sentiment.positive && data.sentiment.negative > data.sentiment.neutral) {
sentimentText = currentLanguage === 'fr'
? "Le sentiment global est négatif, avec des préoccupations exprimées dans les discussions en ligne."
: "The overall sentiment is negative, with concerns expressed in online discussions.";
} else {
sentimentText = currentLanguage === 'fr'
? "Le sentiment global est neutre, sans tendance marquée positive ou négative."
: "The overall sentiment is neutral, with no marked positive or negative trend.";
}
document.getElementById('sentimentText').textContent = sentimentText;
}
function generateRandomData(count, min, max) {
const data = [];
let lastValue = (min + max) / 2;
for (let i = 0; i < count; i++) {
const change = (Math.random() - 0.5) * (max - min) * 0.1;
lastValue = Math.min(max, Math.max(min, lastValue + change));
data.push(lastValue);
}
return data;
}
// Initialize feather icons
feather.replace();
</script>
</body>
</html>