Hugging Face's logo

Spaces:
Flynf
/
predictcrypto
Running

App Files Community
Flynf commited on
Commit
5fe6fef
·
verified ·
1 Parent(s): 88998d0

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

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1130 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Predictcrypto
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: pink
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: predictcrypto
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,1131 @@
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>PredictCrypto - Analyse prédictive des cryptomonnaies</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
+ <style>
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #6B46C1 0%, #3B82F6 100%);
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .language-switcher {
22
+ position: fixed;
23
+ top: 20px;
24
+ right: 20px;
25
+ z-index: 1000;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50">
30
+ <!-- Language Switcher -->
31
+ <div class="language-switcher">
32
+ <button id="languageToggle" class="bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition">
33
+ <i data-feather="globe"></i>
34
+ </button>
35
+ </div>
36
+
37
+ <!-- Header -->
38
+ <header class="gradient-bg text-white py-16">
39
+ <div class="container mx-auto px-4 text-center">
40
+ <h1 class="text-4xl md:text-5xl font-bold mb-4" data-i18n="title">PredictCrypto</h1>
41
+ <p class="text-xl md:text-2xl mb-8" data-i18n="subtitle">Analyse prédictive des cryptomonnaies combinant données quantitatives et qualitatives</p>
42
+
43
+ <div class="max-w-2xl mx-auto">
44
+ <div class="bg-white rounded-lg shadow-xl p-4">
45
+ <div class="flex items-center">
46
+ <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">
47
+ <option value="" disabled selected data-i18n="selectCrypto">Sélectionnez une cryptomonnaie</option>
48
+ <option value="BTC">Bitcoin (BTC)</option>
49
+ <option value="ETH">Ethereum (ETH)</option>
50
+ <option value="BNB">Binance Coin (BNB)</option>
51
+ <option value="SOL">Solana (SOL)</option>
52
+ <option value="XRP">Ripple (XRP)</option>
53
+ </select>
54
+ <button id="analyzeBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-r-lg transition">
55
+ <span data-i18n="analyze">Analyser</span>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Main Content -->
64
+ <main class="container mx-auto px-4 py-12">
65
+ <!-- Loading State -->
66
+ <div id="loading" class="hidden text-center py-12">
67
+ <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mb-4"></div>
68
+ <p class="text-xl text-gray-700" data-i18n="loading">Analyse en cours...</p>
69
+ </div>
70
+
71
+ <!-- Results Section -->
72
+ <div id="results" class="hidden">
73
+ <!-- Prediction Summary -->
74
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8" data-aos="fade-up">
75
+ <div class="p-6">
76
+ <div class="flex items-center justify-between mb-4">
77
+ <div class="flex items-center">
78
+ <img id="cryptoIcon" src="" alt="" class="w-10 h-10 mr-3">
79
+ <h2 id="cryptoName" class="text-2xl font-bold text-gray-800"></h2>
80
+ <span id="cryptoPrice" class="ml-4 text-xl font-semibold"></span>
81
+ <span id="priceChange" class="ml-2 px-2 py-1 rounded-full text-sm"></span>
82
+ </div>
83
+ <div id="predictionBadge" class="px-4 py-2 rounded-full text-white font-bold"></div>
84
+ </div>
85
+
86
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
87
+ <div>
88
+ <h3 class="text-lg font-semibold mb-2" data-i18n="prediction">Prédiction</h3>
89
+ <p id="predictionText" class="text-gray-700"></p>
90
+ </div>
91
+ <div>
92
+ <h3 class="text-lg font-semibold mb-2" data-i18n="confidence">Confiance</h3>
93
+ <div class="w-full bg-gray-200 rounded-full h-4">
94
+ <div id="confidenceBar" class="h-4 rounded-full"></div>
95
+ </div>
96
+ <p id="confidenceText" class="mt-2 text-sm text-gray-600"></p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Analysis Tabs -->
103
+ <div class="mb-8" data-aos="fade-up">
104
+ <div class="border-b border-gray-200">
105
+ <nav class="-mb-px flex space-x-8">
106
+ <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>
107
+ <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>
108
+ <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>
109
+ </nav>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Quantitative Analysis -->
114
+ <div id="quantitativeContent" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
115
+ <!-- Price Chart -->
116
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
117
+ <h3 class="text-lg font-semibold mb-4" data-i18n="priceEvolution">Évolution du prix</h3>
118
+ <div class="h-64">
119
+ <canvas id="priceChart"></canvas>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Volume Analysis -->
124
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-left">
125
+ <h3 class="text-lg font-semibold mb-4" data-i18n="volumeAnalysis">Analyse des volumes</h3>
126
+ <div class="h-64">
127
+ <canvas id="volumeChart"></canvas>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Technical Indicators -->
132
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
133
+ <h3 class="text-lg font-semibold mb-4" data-i18n="technicalIndicators">Indicateurs techniques</h3>
134
+ <div class="space-y-4">
135
+ <div>
136
+ <div class="flex justify-between mb-1">
137
+ <span class="text-sm font-medium" data-i18n="rsi">RSI (14 jours)</span>
138
+ <span id="rsiValue" class="text-sm"></span>
139
+ </div>
140
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
141
+ <div id="rsiBar" class="h-2.5 rounded-full"></div>
142
+ </div>
143
+ <p id="rsiInterpretation" class="mt-1 text-xs text-gray-500"></p>
144
+ </div>
145
+ <div>
146
+ <div class="flex justify-between mb-1">
147
+ <span class="text-sm font-medium" data-i18n="macd">MACD</span>
148
+ <span id="macdValue" class="text-sm"></span>
149
+ </div>
150
+ <p id="macdInterpretation" class="mt-1 text-xs text-gray-500"></p>
151
+ </div>
152
+ <div>
153
+ <div class="flex justify-between mb-1">
154
+ <span class="text-sm font-medium" data-i18n="movingAverages">Moyennes mobiles</span>
155
+ <span id="maValue" class="text-sm"></span>
156
+ </div>
157
+ <p id="maInterpretation" class="mt-1 text-xs text-gray-500"></p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- On-Chain Metrics -->
163
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-left">
164
+ <h3 class="text-lg font-semibold mb-4" data-i18n="onChainMetrics">Métriques On-Chain</h3>
165
+ <div class="grid grid-cols-2 gap-4">
166
+ <div class="bg-gray-50 p-3 rounded-lg">
167
+ <p class="text-sm text-gray-500" data-i18n="activeAddresses">Adresses actives</p>
168
+ <p id="activeAddresses" class="font-semibold"></p>
169
+ </div>
170
+ <div class="bg-gray-50 p-3 rounded-lg">
171
+ <p class="text-sm text-gray-500" data-i18n="transactionCount">Nombre de transactions</p>
172
+ <p id="transactionCount" class="font-semibold"></p>
173
+ </div>
174
+ <div class="bg-gray-50 p-3 rounded-lg">
175
+ <p class="text-sm text-gray-500" data-i18n="hashRate">Hashrate (BTC)</p>
176
+ <p id="hashRate" class="font-semibold"></p>
177
+ </div>
178
+ <div class="bg-gray-50 p-3 rounded-lg">
179
+ <p class="text-sm text-gray-500" data-i18n="gasPrice">Prix du gaz (ETH)</p>
180
+ <p id="gasPrice" class="font-semibold"></p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Qualitative Analysis -->
187
+ <div id="qualitativeContent" class="hidden grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
188
+ <!-- Sentiment Analysis -->
189
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
190
+ <h3 class="text-lg font-semibold mb-4" data-i18n="sentimentAnalysis">Analyse de sentiment</h3>
191
+ <div class="h-64">
192
+ <canvas id="sentimentChart"></canvas>
193
+ </div>
194
+ <p id="sentimentText" class="mt-4 text-sm text-gray-600"></p>
195
+ </div>
196
+
197
+ <!-- News Impact -->
198
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-a18n="fade-left">
199
+ <h3 class="text-lg font-semibold mb-4" data-i18n="newsImpact">Impact des actualités</h3>
200
+ <div class="space-y-4">
201
+ <div class="p-3 bg-gray-50 rounded-lg">
202
+ <div class="flex items-start">
203
+ <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>
204
+ <p class="text-sm" data-i18n="news1">Adoption croissante par les institutions</p>
205
+ </div>
206
+ </div>
207
+ <div class="p-3 bg-gray-50 rounded-lg">
208
+ <div class="flex items-start">
209
+ <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>
210
+ <p class="text-sm" data-i18n="news2">Incertitudes réglementaires en Asie</p>
211
+ </div>
212
+ </div>
213
+ <div class="p-3 bg-gray-50 rounded-lg">
214
+ <div class="flex items-start">
215
+ <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>
216
+ <p class="text-sm" data-i18n="news3">Mise à jour du réseau prévue pour Q3</p>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Adoption Metrics -->
223
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-right">
224
+ <h3 class="text-lg font-semibold mb-4" data-i18n="adoptionMetrics">Métriques d'adoption</h3>
225
+ <div class="space-y-4">
226
+ <div>
227
+ <p class="text-sm text-gray-500 mb-1" data-i18n="institutionalAdoption">Adoption institutionnelle</p>
228
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
229
+ <div id="institutionalBar" class="h-2.5 rounded-full bg-blue-600" style="width: 65%"></div>
230
+ </div>
231
+ </div>
232
+ <div>
233
+ <p class="text-sm text-gray-500 mb-1" data-i18n="retailAdoption">Adoption retail</p>
234
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
235
+ <div id="retailBar" class="h-2.5 rounded-full bg-green-600" style="width: 42%"></div>
236
+ </div>
237
+ </div>
238
+ <div>
239
+ <p class="text-sm text-gray-500 mb-1" data-i18n="developerActivity">Activité des développeurs</p>
240
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
241
+ <div id="developerBar" class="h-2.5 rounded-full bg-purple-600" style="width: 78%"></div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Regulatory Landscape -->
248
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition" data-aos="fade-left">
249
+ <h3 class="text-lg font-semibold mb-4" data-i18n="regulatoryLandscape">Environnement réglementaire</h3>
250
+ <div class="grid grid-cols-2 gap-4">
251
+ <div class="bg-gray-50 p-3 rounded-lg">
252
+ <p class="text-sm text-gray-500" data-i18n="usRegulation">États-Unis</p>
253
+ <p class="font-semibold text-yellow-600" data-i18n="mixed">Mixte</p>
254
+ </div>
255
+ <div class="bg-gray-50 p-3 rounded-lg">
256
+ <p class="text-sm text-gray-500" data-i18n="euRegulation">Europe</p>
257
+ <p class="font-semibold text-green-600" data-i18n="positive">Positif</p>
258
+ </div>
259
+ <div class="bg-gray-50 p-3 rounded-lg">
260
+ <p class="text-sm text-gray-500" data-i18n="asiaRegulation">Asie</p>
261
+ <p class="font-semibold text-red-600" data-i18n="negative">Négatif</p>
262
+ </div>
263
+ <div class="bg-gray-50 p-3 rounded-lg">
264
+ <p class="text-sm text-gray-500" data-i18n="globalTrend">Tendance globale</p>
265
+ <p class="font-semibold text-blue-600" data-i18n="improving">En amélioration</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Combined Analysis -->
272
+ <div id="combinedContent" class="hidden">
273
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6" data-aos="fade-up">
274
+ <h3 class="text-lg font-semibold mb-4" data-i18n="combinedAnalysis">Analyse combinée</h3>
275
+ <div class="h-96">
276
+ <canvas id="combinedChart"></canvas>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
281
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-right">
282
+ <h3 class="text-lg font-semibold mb-4" data-i18n="strengths">Forces</h3>
283
+ <ul class="space-y-3">
284
+ <li class="flex items-start">
285
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
286
+ <span data-i18n="strength1">Adoption institutionnelle croissante</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
290
+ <span data-i18n="strength2">Activité développeur robuste</span>
291
+ </li>
292
+ <li class="flex items-start">
293
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
294
+ <span data-i18n="strength3">Indicateurs techniques favorables</span>
295
+ </li>
296
+ </ul>
297
+ </div>
298
+
299
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-left">
300
+ <h3 class="text-lg font-semibold mb-4" data-i18n="weaknesses">Faiblesses</h3>
301
+ <ul class="space-y-3">
302
+ <li class="flex items-start">
303
+ <i data-feather="x-circle" class="text-red-500 mr-2 mt-1"></i>
304
+ <span data-i18n="weakness1">Incertitudes réglementaires</span>
305
+ </li>
306
+ <li class="flex items-start">
307
+ <i data-feather="x-circle" class="text-red-500 mr-2 mt-1"></i>
308
+ <span data-i18n="weakness2">Sentiment retail mitigé</span>
309
+ </li>
310
+ <li class="flex items-start">
311
+ <i data-feather="x-circle" class="text-red-500 mr-2 mt-1"></i>
312
+ <span data-i18n="weakness3">Concurrence accrue</span>
313
+ </li>
314
+ </ul>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mt-6" data-aos="fade-up">
319
+ <h3 class="text-lg font-semibold mb-4" data-i18n="recommendation">Recommandation</h3>
320
+ <div class="p-4 bg-blue-50 rounded-lg">
321
+ <div class="flex">
322
+ <i data-feather="alert-circle" class="text-blue-500 mr-3 mt-1"></i>
323
+ <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>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- How It Works -->
331
+ <div class="max-w-4xl mx-auto mt-16">
332
+ <h2 class="text-3xl font-bold text-center mb-8" data-i18n="howItWorks">Comment ça marche ?</h2>
333
+
334
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
335
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition" data-aos="fade-up" data-aos-delay="0">
336
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
337
+ <i data-feather="bar-chart-2" class="text-purple-600 w-6 h-6"></i>
338
+ </div>
339
+ <h3 class="text-lg font-semibold mb-2" data-i18n="step1Title">Analyse quantitative</h3>
340
+ <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>
341
+ </div>
342
+
343
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition" data-aos="fade-up" data-aos-delay="100">
344
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
345
+ <i data-feather="message-square" class="text-blue-600 w-6 h-6"></i>
346
+ </div>
347
+ <h3 class="text-lg font-semibold mb-2" data-i18n="step2Title">Analyse qualitative</h3>
348
+ <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>
349
+ </div>
350
+
351
+ <div class="bg-white p-6 rounded-xl shadow-md text-center card-hover transition" data-aos="fade-up" data-aos-delay="200">
352
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
353
+ <i data-feather="cpu" class="text-green-600 w-6 h-6"></i>
354
+ </div>
355
+ <h3 class="text-lg font-semibold mb-2" data-i18n="step3Title">Modèle prédictif</h3>
356
+ <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>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </main>
361
+
362
+ <!-- Footer -->
363
+ <footer class="bg-gray-800 text-white py-12">
364
+ <div class="container mx-auto px-4">
365
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
366
+ <div>
367
+ <h3 class="text-lg font-semibold mb-4" data-i18n="about">À propos</h3>
368
+ <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>
369
+ </div>
370
+ <div>
371
+ <h3 class="text-lg font-semibold mb-4" data-i18n="resources">Ressources</h3>
372
+ <ul class="space-y-2">
373
+ <li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="blog">Blog</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="guides">Guides</a></li>
375
+ <li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="research">Recherche</a></li>
376
+ </ul>
377
+ </div>
378
+ <div>
379
+ <h3 class="text-lg font-semibold mb-4" data-i18n="legal">Légal</h3>
380
+ <ul class="space-y-2">
381
+ <li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="terms">Conditions</a></li>
382
+ <li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="privacy">Confidentialité</a></li>
383
+ <li><a href="#" class="text-gray-400 hover:text-white transition" data-i18n="disclaimer">Avertissement</a></li>
384
+ </ul>
385
+ </div>
386
+ <div>
387
+ <h3 class="text-lg font-semibold mb-4" data-i18n="contact">Contact</h3>
388
+ <ul class="space-y-2">
389
+ <li class="flex items-center">
390
+ <i data-feather="mail" class="w-4 h-4 mr-2 text-gray-400"></i>
391
+ <a href="mailto:contact@predictcrypto.com" class="text-gray-400 hover:text-white transition">contact@predictcrypto.com</a>
392
+ </li>
393
+ <li class="flex items-center">
394
+ <i data-feather="twitter" class="w-4 h-4 mr-2 text-gray-400"></i>
395
+ <a href="#" class="text-gray-400 hover:text-white transition" data-i18n="twitter">Twitter</a>
396
+ </li>
397
+ <li class="flex items-center">
398
+ <i data-feather="linkedin" class="w-4 h-4 mr-2 text-gray-400"></i>
399
+ <a href="#" class="text-gray-400 hover:text-white transition" data-i18n="linkedin">LinkedIn</a>
400
+ </li>
401
+ </ul>
402
+ </div>
403
+ </div>
404
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
405
+ <p data-i18n="copyright">© 2023 PredictCrypto. Tous droits réservés.</p>
406
+ </div>
407
+ </div>
408
+ </footer>
409
+
410
+ <script>
411
+ // Initialize AOS
412
+ AOS.init({
413
+ duration: 800,
414
+ easing: 'ease-in-out',
415
+ once: true
416
+ });
417
+
418
+ // Language switcher
419
+ const languageToggle = document.getElementById('languageToggle');
420
+ let currentLanguage = 'fr';
421
+
422
+ languageToggle.addEventListener('click', () => {
423
+ currentLanguage = currentLanguage === 'fr' ? 'en' : 'fr';
424
+ updateLanguage();
425
+ });
426
+
427
+ function updateLanguage() {
428
+ const elements = document.querySelectorAll('[data-i18n]');
429
+
430
+ elements.forEach(element => {
431
+ const key = element.getAttribute('data-i18n');
432
+ element.textContent = translations[currentLanguage][key] || element.textContent;
433
+ });
434
+
435
+ // Update button icon
436
+ feather.replace();
437
+ }
438
+
439
+ const translations = {
440
+ fr: {
441
+ "title": "PredictCrypto",
442
+ "subtitle": "Analyse prédictive des cryptomonnaies combinant données quantitatives et qualitatives",
443
+ "selectCrypto": "Sélectionnez une cryptomonnaie",
444
+ "analyze": "Analyser",
445
+ "loading": "Analyse en cours...",
446
+ "prediction": "Prédiction",
447
+ "confidence": "Confiance",
448
+ "quantitative": "Quantitatif",
449
+ "qualitative": "Qualitatif",
450
+ "combined": "Combiné",
451
+ "priceEvolution": "Évolution du prix",
452
+ "volumeAnalysis": "Analyse des volumes",
453
+ "technicalIndicators": "Indicateurs techniques",
454
+ "rsi": "RSI (14 jours)",
455
+ "macd": "MACD",
456
+ "movingAverages": "Moyennes mobiles",
457
+ "onChainMetrics": "Métriques On-Chain",
458
+ "activeAddresses": "Adresses actives",
459
+ "transactionCount": "Nombre de transactions",
460
+ "hashRate": "Hashrate (BTC)",
461
+ "gasPrice": "Prix du gaz (ETH)",
462
+ "sentimentAnalysis": "Analyse de sentiment",
463
+ "newsImpact": "Impact des actualités",
464
+ "positive": "Positif",
465
+ "negative": "Négatif",
466
+ "neutral": "Neutre",
467
+ "news1": "Adoption croissante par les institutions",
468
+ "news2": "Incertitudes réglementaires en Asie",
469
+ "news3": "Mise à jour du réseau prévue pour Q3",
470
+ "adoptionMetrics": "Métriques d'adoption",
471
+ "institutionalAdoption": "Adoption institutionnelle",
472
+ "retailAdoption": "Adoption retail",
473
+ "developerActivity": "Activité des développeurs",
474
+ "regulatoryLandscape": "Environnement réglementaire",
475
+ "usRegulation": "États-Unis",
476
+ "euRegulation": "Europe",
477
+ "asiaRegulation": "Asie",
478
+ "globalTrend": "Tendance globale",
479
+ "mixed": "Mixte",
480
+ "improving": "En amélioration",
481
+ "combinedAnalysis": "Analyse combinée",
482
+ "strengths": "Forces",
483
+ "strength1": "Adoption institutionnelle croissante",
484
+ "strength2": "Activité développeur robuste",
485
+ "strength3": "Indicateurs techniques favorables",
486
+ "weaknesses": "Faiblesses",
487
+ "weakness1": "Incertitudes réglementaires",
488
+ "weakness2": "Sentiment retail mitigé",
489
+ "weakness3": "Concurrence accrue",
490
+ "recommendation": "Recommandation",
491
+ "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.",
492
+ "howItWorks": "Comment ça marche ?",
493
+ "step1Title": "Analyse quantitative",
494
+ "step1Desc": "Nous analysons les données de prix, volumes, indicateurs techniques et métriques on-chain pour identifier les tendances.",
495
+ "step2Title": "Analyse qualitative",
496
+ "step2Desc": "Nous évaluons le sentiment du marché, les actualités, l'adoption et l'environnement réglementaire.",
497
+ "step3Title": "Modèle prédictif",
498
+ "step3Desc": "Notre algorithme combine ces analyses pour générer une prédiction avec un indice de confiance.",
499
+ "about": "À propos",
500
+ "aboutText": "PredictCrypto combine analyse technique et fondamentale avec intelligence artificielle pour fournir des prédictions crypto fiables.",
501
+ "resources": "Ressources",
502
+ "blog": "Blog",
503
+ "guides": "Guides",
504
+ "research": "Recherche",
505
+ "legal": "Légal",
506
+ "terms": "Conditions",
507
+ "privacy": "Confidentialité",
508
+ "disclaimer": "Avertissement",
509
+ "contact": "Contact",
510
+ "twitter": "Twitter",
511
+ "linkedin": "LinkedIn",
512
+ "copyright": "© 2023 PredictCrypto. Tous droits réservés."
513
+ },
514
+ en: {
515
+ "title": "PredictCrypto",
516
+ "subtitle": "Cryptocurrency predictive analysis combining quantitative and qualitative data",
517
+ "selectCrypto": "Select a cryptocurrency",
518
+ "analyze": "Analyze",
519
+ "loading": "Analysis in progress...",
520
+ "prediction": "Prediction",
521
+ "confidence": "Confidence",
522
+ "quantitative": "Quantitative",
523
+ "qualitative": "Qualitative",
524
+ "combined": "Combined",
525
+ "priceEvolution": "Price evolution",
526
+ "volumeAnalysis": "Volume analysis",
527
+ "technicalIndicators": "Technical indicators",
528
+ "rsi": "RSI (14 days)",
529
+ "macd": "MACD",
530
+ "movingAverages": "Moving averages",
531
+ "onChainMetrics": "On-Chain metrics",
532
+ "activeAddresses": "Active addresses",
533
+ "transactionCount": "Transaction count",
534
+ "hashRate": "Hashrate (BTC)",
535
+ "gasPrice": "Gas price (ETH)",
536
+ "sentimentAnalysis": "Sentiment analysis",
537
+ "newsImpact": "News impact",
538
+ "positive": "Positive",
539
+ "negative": "Negative",
540
+ "neutral": "Neutral",
541
+ "news1": "Growing institutional adoption",
542
+ "news2": "Regulatory uncertainties in Asia",
543
+ "news3": "Network update planned for Q3",
544
+ "adoptionMetrics": "Adoption metrics",
545
+ "institutionalAdoption": "Institutional adoption",
546
+ "retailAdoption": "Retail adoption",
547
+ "developerActivity": "Developer activity",
548
+ "regulatoryLandscape": "Regulatory landscape",
549
+ "usRegulation": "United States",
550
+ "euRegulation": "Europe",
551
+ "asiaRegulation": "Asia",
552
+ "globalTrend": "Global trend",
553
+ "mixed": "Mixed",
554
+ "improving": "Improving",
555
+ "combinedAnalysis": "Combined analysis",
556
+ "strengths": "Strengths",
557
+ "strength1": "Growing institutional adoption",
558
+ "strength2": "Strong developer activity",
559
+ "strength3": "Favorable technical indicators",
560
+ "weaknesses": "Weaknesses",
561
+ "weakness1": "Regulatory uncertainties",
562
+ "weakness2": "Mixed retail sentiment",
563
+ "weakness3": "Increased competition",
564
+ "recommendation": "Recommendation",
565
+ "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.",
566
+ "howItWorks": "How it works",
567
+ "step1Title": "Quantitative analysis",
568
+ "step1Desc": "We analyze price data, volumes, technical indicators and on-chain metrics to identify trends.",
569
+ "step2Title": "Qualitative analysis",
570
+ "step2Desc": "We assess market sentiment, news, adoption and regulatory environment.",
571
+ "step3Title": "Predictive model",
572
+ "step3Desc": "Our algorithm combines these analyses to generate a prediction with a confidence index.",
573
+ "about": "About",
574
+ "aboutText": "PredictCrypto combines technical and fundamental analysis with artificial intelligence to provide reliable crypto predictions.",
575
+ "resources": "Resources",
576
+ "blog": "Blog",
577
+ "guides": "Guides",
578
+ "research": "Research",
579
+ "legal": "Legal",
580
+ "terms": "Terms",
581
+ "privacy": "Privacy",
582
+ "disclaimer": "Disclaimer",
583
+ "contact": "Contact",
584
+ "twitter": "Twitter",
585
+ "linkedin": "LinkedIn",
586
+ "copyright": "© 2023 PredictCrypto. All rights reserved."
587
+ }
588
+ };
589
+
590
+ // Crypto data and analysis simulation
591
+ const cryptoData = {
592
+ BTC: {
593
+ name: "Bitcoin",
594
+ symbol: "BTC",
595
+ price: 42356.78,
596
+ change24h: 2.34,
597
+ icon: "https://cryptologos.cc/logos/bitcoin-btc-logo.png",
598
+ prediction: "Tendance haussière à moyen terme",
599
+ confidence: 72,
600
+ rsi: 58,
601
+ macd: "Bullish crossover",
602
+ movingAverages: "Price above 50-day and 200-day MA",
603
+ activeAddresses: "1.2M",
604
+ transactionCount: "350K",
605
+ hashRate: "180 EH/s",
606
+ sentiment: {
607
+ positive: 45,
608
+ neutral: 35,
609
+ negative: 20
610
+ }
611
+ },
612
+ ETH: {
613
+ name: "Ethereum",
614
+ symbol: "ETH",
615
+ price: 2256.42,
616
+ change24h: -1.12,
617
+ icon: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
618
+ prediction: "Consolidation à court terme",
619
+ confidence: 65,
620
+ rsi: 49,
621
+ macd: "Neutral",
622
+ movingAverages: "Price between 50-day and 200-day MA",
623
+ activeAddresses: "850K",
624
+ transactionCount: "1.1M",
625
+ gasPrice: "45 Gwei",
626
+ sentiment: {
627
+ positive: 38,
628
+ neutral: 42,
629
+ negative: 20
630
+ }
631
+ },
632
+ BNB: {
633
+ name: "Binance Coin",
634
+ symbol: "BNB",
635
+ price: 312.56,
636
+ change24h: 3.78,
637
+ icon: "https://cryptologos.cc/logos/bnb-bnb-logo.png",
638
+ prediction: "Tendance haussière à court terme",
639
+ confidence: 68,
640
+ rsi: 62,
641
+ macd: "Bullish",
642
+ movingAverages: "Price above 50-day and 200-day MA",
643
+ activeAddresses: "420K",
644
+ transactionCount: "3.5M",
645
+ sentiment: {
646
+ positive: 52,
647
+ neutral: 30,
648
+ negative: 18
649
+ }
650
+ },
651
+ SOL: {
652
+ name: "Solana",
653
+ symbol: "SOL",
654
+ price: 98.23,
655
+ change24h: 5.67,
656
+ icon: "https://cryptologos.cc/logos/solana-sol-logo.png",
657
+ prediction: "Forte tendance haussière",
658
+ confidence: 81,
659
+ rsi: 65,
660
+ macd: "Strong bullish",
661
+ movingAverages: "Price well above 50-day and 200-day MA",
662
+ activeAddresses: "680K",
663
+ transactionCount: "25M",
664
+ sentiment: {
665
+ positive: 60,
666
+ neutral: 30,
667
+ negative: 10
668
+ }
669
+ },
670
+ XRP: {
671
+ name: "Ripple",
672
+ symbol: "XRP",
673
+ price: 0.5423,
674
+ change24h: -0.23,
675
+ icon: "https://cryptologos.cc/logos/xrp-xrp-logo.png",
676
+ prediction: "Tendance neutre avec volatilité",
677
+ confidence: 55,
678
+ rsi: 47,
679
+ macd: "Bearish",
680
+ movingAverages: "Price below 50-day MA",
681
+ activeAddresses: "380K",
682
+ transactionCount: "1.2M",
683
+ sentiment: {
684
+ positive: 30,
685
+ neutral: 40,
686
+ negative: 30
687
+ }
688
+ }
689
+ };
690
+
691
+ // Tab switching
692
+ const quantitativeTab = document.getElementById('quantitativeTab');
693
+ const qualitativeTab = document.getElementById('qualitativeTab');
694
+ const combinedTab = document.getElementById('combinedTab');
695
+
696
+ const quantitativeContent = document.getElementById('quantitativeContent');
697
+ const qualitativeContent = document.getElementById('qualitativeContent');
698
+ const combinedContent = document.getElementById('combinedContent');
699
+
700
+ quantitativeTab.addEventListener('click', () => {
701
+ quantitativeContent.classList.remove('hidden');
702
+ qualitativeContent.classList.add('hidden');
703
+ combinedContent.classList.add('hidden');
704
+
705
+ quantitativeTab.classList.add('border-purple-500', 'text-purple-600');
706
+ quantitativeTab.classList.remove('border-transparent', 'text-gray-500');
707
+
708
+ qualitativeTab.classList.remove('border-purple-500', 'text-purple-600');
709
+ qualitativeTab.classList.add('border-transparent', 'text-gray-500');
710
+
711
+ combinedTab.classList.remove('border-purple-500', 'text-purple-600');
712
+ combinedTab.classList.add('border-transparent', 'text-gray-500');
713
+ });
714
+
715
+ qualitativeTab.addEventListener('click', () => {
716
+ quantitativeContent.classList.add('hidden');
717
+ qualitativeContent.classList.remove('hidden');
718
+ combinedContent.classList.add('hidden');
719
+
720
+ quantitativeTab.classList.remove('border-purple-500', 'text-purple-600');
721
+ quantitativeTab.classList.add('border-transparent', 'text-gray-500');
722
+
723
+ qualitativeTab.classList.add('border-purple-500', 'text-purple-600');
724
+ qualitativeTab.classList.remove('border-transparent', 'text-gray-500');
725
+
726
+ combinedTab.classList.remove('border-purple-500', 'text-purple-600');
727
+ combinedTab.classList.add('border-transparent', 'text-gray-500');
728
+ });
729
+
730
+ combinedTab.addEventListener('click', () => {
731
+ quantitativeContent.classList.add('hidden');
732
+ qualitativeContent.classList.add('hidden');
733
+ combinedContent.classList.remove('hidden');
734
+
735
+ quantitativeTab.classList.remove('border-purple-500', 'text-purple-600');
736
+ quantitativeTab.classList.add('border-transparent', 'text-gray-500');
737
+
738
+ qualitativeTab.classList.remove('border-purple-500', 'text-purple-600');
739
+ qualitativeTab.classList.add('border-transparent', 'text-gray-500');
740
+
741
+ combinedTab.classList.add('border-purple-500', 'text-purple-600');
742
+ combinedTab.classList.remove('border-transparent', 'text-gray-500');
743
+ });
744
+
745
+ // Analyze button click handler
746
+ document.getElementById('analyzeBtn').addEventListener('click', () => {
747
+ const selectedCrypto = document.getElementById('cryptoSelect').value;
748
+
749
+ if (!selectedCrypto) {
750
+ alert(currentLanguage === 'fr' ? "Veuillez sélectionner une cryptomonnaie" : "Please select a cryptocurrency");
751
+ return;
752
+ }
753
+
754
+ // Show loading state
755
+ document.getElementById('loading').classList.remove('hidden');
756
+ document.getElementById('results').classList.add('hidden');
757
+
758
+ // Simulate analysis delay
759
+ setTimeout(() => {
760
+ analyzeCrypto(selectedCrypto);
761
+
762
+ // Hide loading and show results
763
+ document.getElementById('loading').classList.add('hidden');
764
+ document.getElementById('results').classList.remove('hidden');
765
+
766
+ // Scroll to results
767
+ document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
768
+ }, 1500);
769
+ });
770
+
771
+ function analyzeCrypto(symbol) {
772
+ const data = cryptoData[symbol];
773
+
774
+ // Update basic info
775
+ document.getElementById('cryptoIcon').src = data.icon;
776
+ document.getElementById('cryptoIcon').alt = data.name;
777
+ document.getElementById('cryptoName').textContent = `${data.name} (${data.symbol})`;
778
+
779
+ // Format price and change
780
+ const priceFormatted = new Intl.NumberFormat('en-US', {
781
+ style: 'currency',
782
+ currency: 'USD',
783
+ minimumFractionDigits: 2,
784
+ maximumFractionDigits: data.price < 1 ? 4 : 2
785
+ }).format(data.price);
786
+
787
+ document.getElementById('cryptoPrice').textContent = priceFormatted;
788
+
789
+ const changeElement = document.getElementById('priceChange');
790
+ changeElement.textContent = `${data.change24h > 0 ? '+' : ''}${data.change24h.toFixed(2)}%`;
791
+
792
+ if (data.change24h > 0) {
793
+ changeElement.classList.add('bg-green-100', 'text-green-800');
794
+ changeElement.classList.remove('bg-red-100', 'text-red-800');
795
+ } else {
796
+ changeElement.classList.add('bg-red-100', 'text-red-800');
797
+ changeElement.classList.remove('bg-green-100', 'text-green-800');
798
+ }
799
+
800
+ // Update prediction
801
+ document.getElementById('predictionText').textContent = data.prediction;
802
+
803
+ // Update confidence
804
+ const confidenceBar = document.getElementById('confidenceBar');
805
+ confidenceBar.style.width = `${data.confidence}%`;
806
+
807
+ if (data.confidence > 70) {
808
+ confidenceBar.classList.add('bg-green-500');
809
+ confidenceBar.classList.remove('bg-yellow-500', 'bg-red-500');
810
+ } else if (data.confidence > 50) {
811
+ confidenceBar.classList.add('bg-yellow-500');
812
+ confidenceBar.classList.remove('bg-green-500', 'bg-red-500');
813
+ } else {
814
+ confidenceBar.classList.add('bg-red-500');
815
+ confidenceBar.classList.remove('bg-green-500', 'bg-yellow-500');
816
+ }
817
+
818
+ document.getElementById('confidenceText').textContent = `${data.confidence}% ${currentLanguage === 'fr' ? 'de confiance' : 'confidence'}`;
819
+
820
+ // Update prediction badge
821
+ const predictionBadge = document.getElementById('predictionBadge');
822
+ predictionBadge.textContent = data.prediction.split(' ')[0]; // First word of prediction
823
+
824
+ if (data.prediction.includes('hauss') || data.prediction.includes('bull')) {
825
+ predictionBadge.classList.add('bg-green-500');
826
+ predictionBadge.classList.remove('bg-red-500', 'bg-yellow-500');
827
+ } else if (data.prediction.includes('baiss') || data.prediction.includes('bear')) {
828
+ predictionBadge.classList.add('bg-red-500');
829
+ predictionBadge.classList.remove('bg-green-500', 'bg-yellow-500');
830
+ } else {
831
+ predictionBadge.classList.add('bg-yellow-500');
832
+ predictionBadge.classList.remove('bg-green-500', 'bg-red-500');
833
+ }
834
+
835
+ // Update technical indicators
836
+ document.getElementById('rsiValue').textContent = data.rsi;
837
+
838
+ const rsiBar = document.getElementById('rsiBar');
839
+ rsiBar.style.width = `${data.rsi}%`;
840
+
841
+ if (data.rsi > 70) {
842
+ rsiBar.classList.add('bg-red-500');
843
+ rsiBar.classList.remove('bg-green-500', 'bg-yellow-500');
844
+ document.getElementById('rsiInterpretation').textContent = currentLanguage === 'fr' ? "Surachat (RSI > 70)" : "Overbought (RSI > 70)";
845
+ } else if (data.rsi < 30) {
846
+ rsiBar.classList.add('bg-green-500');
847
+ rsiBar.classList.remove('bg-red-500', 'bg-yellow-500');
848
+ document.getElementById('rsiInterpretation').textContent = currentLanguage === 'fr' ? "Survente (RSI < 30)" : "Oversold (RSI < 30)";
849
+ } else {
850
+ rsiBar.classList.add('bg-yellow-500');
851
+ rsiBar.classList.remove('bg-green-500', 'bg-red-500');
852
+ document.getElementById('rsiInterpretation').textContent = currentLanguage === 'fr' ? "Neutre" : "Neutral";
853
+ }
854
+
855
+ document.getElementById('macdValue').textContent = data.macd;
856
+
857
+ if (data.macd.includes('bull')) {
858
+ document.getElementById('macdInterpretation').textContent = currentLanguage === 'fr' ? "Signal haussier" : "Bullish signal";
859
+ document.getElementById('macdInterpretation').classList.add('text-green-500');
860
+ document.getElementById('macdInterpretation').classList.remove('text-red-500', 'text-yellow-500');
861
+ } else if (data.macd.includes('bear')) {
862
+ document.getElementById('macdInterpretation').textContent = currentLanguage === 'fr' ? "Signal baissier" : "Bearish signal";
863
+ document.getElementById('macdInterpretation').classList.add('text-red-500');
864
+ document.getElementById('macdInterpretation').classList.remove('text-green-500', 'text-yellow-500');
865
+ } else {
866
+ document.getElementById('macdInterpretation').textContent = currentLanguage === 'fr' ? "Signal neutre" : "Neutral signal";
867
+ document.getElementById('macdInterpretation').classList.add('text-yellow-500');
868
+ document.getElementById('macdInterpretation').classList.remove('text-green-500', 'text-red-500');
869
+ }
870
+
871
+ document.getElementById('maValue').textContent = data.movingAverages;
872
+
873
+ if (data.movingAverages.includes('above')) {
874
+ document.getElementById('maInterpretation').textContent = currentLanguage === 'fr' ? "Tendance haussière" : "Bullish trend";
875
+ document.getElementById('maInterpretation').classList.add('text-green-500');
876
+ document.getElementById('maInterpretation').classList.remove('text-red-500', 'text-yellow-500');
877
+ } else if (data.movingAverages.includes('below')) {
878
+ document.getElementById('maInterpretation').textContent = currentLanguage === 'fr' ? "Tendance baissière" : "Bearish trend";
879
+ document.getElementById('maInterpretation').classList.add('text-red-500');
880
+ document.getElementById('maInterpretation').classList.remove('text-green-500', 'text-yellow-500');
881
+ } else {
882
+ document.getElementById('maInterpretation').textContent = currentLanguage === 'fr' ? "Tendance neutre" : "Neutral trend";
883
+ document.getElementById('maInterpretation').classList.add('text-yellow-500');
884
+ document.getElementById('maInterpretation').classList.remove('text-green-500', 'text-red-500');
885
+ }
886
+
887
+ // Update on-chain metrics
888
+ if (data.activeAddresses) document.getElementById('activeAddresses').textContent = data.activeAddresses;
889
+ if (data.transactionCount) document.getElementById('transactionCount').textContent = data.transactionCount;
890
+ if (data.hashRate) document.getElementById('hashRate').textContent = data.hashRate;
891
+ if (data.gasPrice) document.getElementById('gasPrice').textContent = data.gasPrice;
892
+
893
+ // Update charts
894
+ updateCharts(symbol);
895
+ }
896
+
897
+ function updateCharts(symbol) {
898
+ const data = cryptoData[symbol];
899
+
900
+ // Price Chart
901
+ const priceCtx = document.getElementById('priceChart').getContext('2d');
902
+
903
+ if (window.priceChart) {
904
+ window.priceChart.destroy();
905
+ }
906
+
907
+ window.priceChart = new Chart(priceCtx, {
908
+ type: 'line',
909
+ data: {
910
+ labels: Array.from({length: 30}, (_, i) => `${i+1} ${currentLanguage === 'fr' ? 'juin' : 'Jun'}`),
911
+ datasets: [{
912
+ label: currentLanguage === 'fr' ? 'Prix (USD)' : 'Price (USD)',
913
+ data: generateRandomData(30, data.price * 0.8, data.price * 1.2),
914
+ borderColor: '#8B5CF6',
915
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
916
+ borderWidth: 2,
917
+ fill: true,
918
+ tension: 0.4
919
+ }]
920
+ },
921
+ options: {
922
+ responsive: true,
923
+ maintainAspectRatio: false,
924
+ plugins: {
925
+ legend: {
926
+ display: false
927
+ }
928
+ },
929
+ scales: {
930
+ y: {
931
+ beginAtZero: false
932
+ }
933
+ }
934
+ }
935
+ });
936
+
937
+ // Volume Chart
938
+ const volumeCtx = document.getElementById('volumeChart').getContext('2d');
939
+
940
+ if (window.volumeChart) {
941
+ window.volumeChart.destroy();
942
+ }
943
+
944
+ window.volumeChart = new Chart(volumeCtx, {
945
+ type: 'bar',
946
+ data: {
947
+ labels: Array.from({length: 30}, (_, i) => `${i+1} ${currentLanguage === 'fr' ? 'juin' : 'Jun'}`),
948
+ datasets: [{
949
+ label: currentLanguage === 'fr' ? 'Volume (USD)' : 'Volume (USD)',
950
+ data: generateRandomData(30, 10000000, 500000000),
951
+ backgroundColor: 'rgba(99, 102, 241, 0.7)',
952
+ borderColor: 'rgba(99, 102, 241, 1)',
953
+ borderWidth: 1
954
+ }]
955
+ },
956
+ options: {
957
+ responsive: true,
958
+ maintainAspectRatio: false,
959
+ plugins: {
960
+ legend: {
961
+ display: false
962
+ }
963
+ },
964
+ scales: {
965
+ y: {
966
+ beginAtZero: true
967
+ }
968
+ }
969
+ }
970
+ });
971
+
972
+ // Sentiment Chart
973
+ const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
974
+
975
+ if (window.sentimentChart) {
976
+ window.sentimentChart.destroy();
977
+ }
978
+
979
+ window.sentimentChart = new Chart(sentimentCtx, {
980
+ type: 'doughnut',
981
+ data: {
982
+ labels: [
983
+ currentLanguage === 'fr' ? 'Positif' : 'Positive',
984
+ currentLanguage === 'fr' ? 'Neutre' : 'Neutral',
985
+ currentLanguage === 'fr' ? 'Négatif' : 'Negative'
986
+ ],
987
+ datasets: [{
988
+ data: [data.sentiment.positive, data.sentiment.neutral, data.sentiment.negative],
989
+ backgroundColor: [
990
+ 'rgba(16, 185, 129, 0.8)',
991
+ 'rgba(245, 158, 11, 0.8)',
992
+ 'rgba(239, 68, 68, 0.8)'
993
+ ],
994
+ borderColor: [
995
+ 'rgba(16, 185, 129, 1)',
996
+ 'rgba(245, 158, 11, 1)',
997
+ 'rgba(239, 68, 68, 1)'
998
+ ],
999
+ borderWidth: 1
1000
+ }]
1001
+ },
1002
+ options: {
1003
+ responsive: true,
1004
+ maintainAspectRatio: false,
1005
+ plugins: {
1006
+ legend: {
1007
+ position: 'right'
1008
+ }
1009
+ },
1010
+ cutout: '70%'
1011
+ }
1012
+ });
1013
+
1014
+ // Combined Chart
1015
+ const combinedCtx = document.getElementById('combinedChart').getContext('2d');
1016
+
1017
+ if (window.combinedChart) {
1018
+ window.combinedChart.destroy();
1019
+ }
1020
+
1021
+ window.combinedChart = new Chart(combinedCtx, {
1022
+ type: 'radar',
1023
+ data: {
1024
+ labels: [
1025
+ currentLanguage === 'fr' ? 'Prix' : 'Price',
1026
+ currentLanguage === 'fr' ? 'Volume' : 'Volume',
1027
+ currentLanguage === 'fr' ? 'RSI' : 'RSI',
1028
+ currentLanguage === 'fr' ? 'MACD' : 'MACD',
1029
+ currentLanguage === 'fr' ? 'Moyennes' : 'MAs',
1030
+ currentLanguage === 'fr' ? 'Sentiment' : 'Sentiment',
1031
+ currentLanguage === 'fr' ? 'Actualités' : 'News',
1032
+ currentLanguage === 'fr' ? 'Adoption' : 'Adoption',
1033
+ currentLanguage === 'fr' ? 'Régulation' : 'Regulation'
1034
+ ],
1035
+ datasets: [
1036
+ {
1037
+ label: currentLanguage === 'fr' ? 'Quantitatif' : 'Quantitative',
1038
+ data: [
1039
+ Math.random() * 80 + 20,
1040
+ Math.random() * 80 + 20,
1041
+ data.rsi,
1042
+ data.macd.includes('bull') ? 80 : data.macd.includes('bear') ? 30 : 50,
1043
+ data.movingAverages.includes('above') ? 80 : data.movingAverages.includes('below') ? 30 : 50,
1044
+ 50,
1045
+ 50,
1046
+ 50,
1047
+ 50
1048
+ ],
1049
+ backgroundColor: 'rgba(99, 102, 241, 0.2)',
1050
+ borderColor: 'rgba(99, 102, 241, 1)',
1051
+ pointBackgroundColor: 'rgba(99, 102, 241, 1)',
1052
+ pointBorderColor: '#fff',
1053
+ pointHoverBackgroundColor: '#fff',
1054
+ pointHoverBorderColor: 'rgba(99, 102, 241, 1)',
1055
+ borderWidth: 2
1056
+ },
1057
+ {
1058
+ label: currentLanguage === 'fr' ? 'Qualitatif' : 'Qualitative',
1059
+ data: [
1060
+ 50,
1061
+ 50,
1062
+ 50,
1063
+ 50,
1064
+ 50,
1065
+ data.sentiment.positive,
1066
+ data.newsImpact ? 70 : 30,
1067
+ data.adoption ? 70 : 30,
1068
+ data.regulation ? 70 : 30
1069
+ ],
1070
+ backgroundColor: 'rgba(245, 158, 11, 0.2)',
1071
+ borderColor: 'rgba(245, 158, 11, 1)',
1072
+ pointBackgroundColor: 'rgba(245, 158, 11, 1)',
1073
+ pointBorderColor: '#fff',
1074
+ pointHoverBackgroundColor: '#fff',
1075
+ pointHoverBorderColor: 'rgba(245, 158, 11, 1)',
1076
+ borderWidth: 2
1077
+ }
1078
+ ]
1079
+ },
1080
+ options: {
1081
+ responsive: true,
1082
+ maintainAspectRatio: false,
1083
+ scales: {
1084
+ r: {
1085
+ angleLines: {
1086
+ display: true
1087
+ },
1088
+ suggestedMin: 0,
1089
+ suggestedMax: 100
1090
+ }
1091
+ }
1092
+ }
1093
+ });
1094
+
1095
+ // Update sentiment text
1096
+ let sentimentText = '';
1097
+ if (data.sentiment.positive > data.sentiment.negative && data.sentiment.positive > data.sentiment.neutral) {
1098
+ sentimentText = currentLanguage === 'fr'
1099
+ ? "Le sentiment global est positif, avec une majorité de discussions favorables sur les réseaux sociaux et les forums."
1100
+ : "The overall sentiment is positive, with a majority of favorable discussions on social media and forums.";
1101
+ } else if (data.sentiment.negative > data.sentiment.positive && data.sentiment.negative > data.sentiment.neutral) {
1102
+ sentimentText = currentLanguage === 'fr'
1103
+ ? "Le sentiment global est négatif, avec des préoccupations exprimées dans les discussions en ligne."
1104
+ : "The overall sentiment is negative, with concerns expressed in online discussions.";
1105
+ } else {
1106
+ sentimentText = currentLanguage === 'fr'
1107
+ ? "Le sentiment global est neutre, sans tendance marquée positive ou négative."
1108
+ : "The overall sentiment is neutral, with no marked positive or negative trend.";
1109
+ }
1110
+
1111
+ document.getElementById('sentimentText').textContent = sentimentText;
1112
+ }
1113
+
1114
+ function generateRandomData(count, min, max) {
1115
+ const data = [];
1116
+ let lastValue = (min + max) / 2;
1117
+
1118
+ for (let i = 0; i < count; i++) {
1119
+ const change = (Math.random() - 0.5) * (max - min) * 0.1;
1120
+ lastValue = Math.min(max, Math.max(min, lastValue + change));
1121
+ data.push(lastValue);
1122
+ }
1123
+
1124
+ return data;
1125
+ }
1126
+
1127
+ // Initialize feather icons
1128
+ feather.replace();
1129
+ </script>
1130
+ </body>
1131
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 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