Hugging Face's logo

Spaces:
Assad3l
/
analiz-crypto
Running

App Files Community
Assad3l commited on
Commit
fe8fa52
·
verified ·
1 Parent(s): 05731a5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +742 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Analiz Crypto
3
- emoji: ⚡
4
  colorFrom: blue
5
- colorTo: red
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: analiz-crypto
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: blue
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,742 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CryptoAnalyzer Pro - Анализ и прогноз криптовалют</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .indicator-active {
13
+ @apply bg-blue-100 border-blue-500;
14
+ }
15
+ .news-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
18
+ }
19
+ .blink {
20
+ animation: blink-animation 1s steps(2, start) infinite;
21
+ }
22
+ @keyframes blink-animation {
23
+ to { opacity: 0.5; }
24
+ }
25
+ .chart-container {
26
+ height: 400px;
27
+ }
28
+ .tooltip {
29
+ position: relative;
30
+ display: inline-block;
31
+ }
32
+ .tooltip .tooltiptext {
33
+ visibility: hidden;
34
+ width: 200px;
35
+ background-color: #333;
36
+ color: #fff;
37
+ text-align: center;
38
+ border-radius: 6px;
39
+ padding: 5px;
40
+ position: absolute;
41
+ z-index: 1;
42
+ bottom: 125%;
43
+ left: 50%;
44
+ margin-left: -100px;
45
+ opacity: 0;
46
+ transition: opacity 0.3s;
47
+ }
48
+ .tooltip:hover .tooltiptext {
49
+ visibility: visible;
50
+ opacity: 1;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-50 text-gray-800">
55
+ <div class="container mx-auto px-4 py-8">
56
+ <!-- Header -->
57
+ <header class="mb-8">
58
+ <div class="flex justify-between items-center">
59
+ <div>
60
+ <h1 class="text-3xl font-bold text-blue-600">CryptoAnalyzer <span class="text-yellow-500">Pro</span></h1>
61
+ <p class="text-gray-600">Комплексный анализ и прогнозирование криптовалютных активов</p>
62
+ </div>
63
+ <div class="flex items-center space-x-4">
64
+ <div class="relative">
65
+ <select id="cryptoSelect" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-500">
66
+ <option value="BTC">Bitcoin (BTC)</option>
67
+ <option value="ETH">Ethereum (ETH)</option>
68
+ <option value="BNB">Binance Coin (BNB)</option>
69
+ <option value="SOL">Solana (SOL)</option>
70
+ <option value="XRP">Ripple (XRP)</option>
71
+ </select>
72
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
73
+ <i class="fas fa-chevron-down"></i>
74
+ </div>
75
+ </div>
76
+ <div class="relative">
77
+ <select id="timeframeSelect" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-500">
78
+ <option value="1d">1 день</option>
79
+ <option value="1h">1 час</option>
80
+ <option value="4h">4 часа</option>
81
+ <option value="1w">1 неделя</option>
82
+ <option value="1m">1 месяц</option>
83
+ </select>
84
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
85
+ <i class="fas fa-chevron-down"></i>
86
+ </div>
87
+ </div>
88
+ <button id="refreshBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
89
+ <i class="fas fa-sync-alt mr-2"></i> Обновить
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </header>
94
+
95
+ <!-- Main Dashboard -->
96
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
97
+ <!-- Price Overview -->
98
+ <div class="bg-white rounded-xl shadow-md p-6 col-span-1">
99
+ <div class="flex justify-between items-center mb-4">
100
+ <h2 class="text-xl font-semibold">Обзор цены</h2>
101
+ <span id="priceChange" class="px-3 py-1 rounded-full text-sm font-medium"></span>
102
+ </div>
103
+ <div class="flex items-end mb-2">
104
+ <span id="currentPrice" class="text-3xl font-bold mr-2">$--</span>
105
+ <span id="priceChangePercent" class="text-lg"></span>
106
+ </div>
107
+ <div class="grid grid-cols-2 gap-4 mt-4">
108
+ <div>
109
+ <p class="text-gray-500 text-sm">Максимум (24ч)</p>
110
+ <p id="high24h" class="font-medium">$--</p>
111
+ </div>
112
+ <div>
113
+ <p class="text-gray-500 text-sm">Минимум (24ч)</p>
114
+ <p id="low24h" class="font-medium">$--</p>
115
+ </div>
116
+ <div>
117
+ <p class="text-gray-500 text-sm">Объем (24ч)</p>
118
+ <p id="volume24h" class="font-medium">$--</p>
119
+ </div>
120
+ <div>
121
+ <p class="text-gray-500 text-sm">Рыночная капитализация</p>
122
+ <p id="marketCap" class="font-medium">$--</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Indicators Summary -->
128
+ <div class="bg-white rounded-xl shadow-md p-6 col-span-1">
129
+ <h2 class="text-xl font-semibold mb-4">Технические индикаторы</h2>
130
+ <div class="space-y-4">
131
+ <div>
132
+ <div class="flex justify-between mb-1">
133
+ <span class="font-medium">RSI (14)</span>
134
+ <span id="rsiValue" class="font-bold">--</span>
135
+ </div>
136
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
137
+ <div id="rsiBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 50%"></div>
138
+ </div>
139
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
140
+ <span>Перепроданность</span>
141
+ <span>Нейтрально</span>
142
+ <span>Перекупленность</span>
143
+ </div>
144
+ </div>
145
+ <div>
146
+ <div class="flex justify-between mb-1">
147
+ <span class="font-medium">MACD</span>
148
+ <span id="macdValue" class="font-bold">--</span>
149
+ </div>
150
+ <div class="flex items-center">
151
+ <div class="w-4 h-4 rounded-full mr-2" id="macdSignal"></div>
152
+ <span id="macdSignalText" class="text-sm">Сигнал: --</span>
153
+ </div>
154
+ </div>
155
+ <div>
156
+ <div class="flex justify-between mb-1">
157
+ <span class="font-medium">Скользящие средние</span>
158
+ <span id="maSignal" class="font-bold">--</span>
159
+ </div>
160
+ <div class="flex items-center">
161
+ <div class="w-4 h-4 rounded-full mr-2" id="maSignalDot"></div>
162
+ <span id="maSignalText" class="text-sm">Сигнал: --</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Prediction Card -->
169
+ <div class="bg-white rounded-xl shadow-md p-6 col-span-1">
170
+ <h2 class="text-xl font-semibold mb-4">Прогноз на основе анализа</h2>
171
+ <div class="flex flex-col items-center justify-center h-full">
172
+ <div id="predictionIcon" class="text-5xl mb-4">
173
+ <i class="fas fa-question-circle text-gray-400"></i>
174
+ </div>
175
+ <div id="predictionText" class="text-center">
176
+ <p class="text-lg font-medium mb-2">Загрузка данных...</p>
177
+ <p class="text-gray-600 text-sm">Анализируем рыночные индикаторы и тенденции</p>
178
+ </div>
179
+ <div id="confidenceMeter" class="w-full mt-6">
180
+ <div class="flex justify-between mb-1">
181
+ <span class="text-sm font-medium">Уверенность прогноза</span>
182
+ <span id="confidenceValue" class="text-sm font-bold">--%</span>
183
+ </div>
184
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
185
+ <div id="confidenceBar" class="bg-green-500 h-2.5 rounded-full" style="width: 0%"></div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Charts Section -->
193
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
194
+ <div class="flex justify-between items-center mb-6">
195
+ <h2 class="text-xl font-semibold">Графики и анализ</h2>
196
+ <div class="flex space-x-2">
197
+ <button id="priceChartBtn" class="px-3 py-1 bg-blue-500 text-white rounded-md">Цена</button>
198
+ <button id="volumeChartBtn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md">Объем</button>
199
+ <button id="rsiChartBtn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md">RSI</button>
200
+ <button id="macdChartBtn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md">MACD</button>
201
+ </div>
202
+ </div>
203
+ <div class="chart-container">
204
+ <canvas id="mainChart"></canvas>
205
+ </div>
206
+ <div class="mt-4 flex flex-wrap gap-2">
207
+ <button class="indicator-btn px-3 py-1 border rounded-md" data-indicator="sma">SMA (20,50)</button>
208
+ <button class="indicator-btn px-3 py-1 border rounded-md" data-indicator="ema">EMA (12,26)</button>
209
+ <button class="indicator-btn px-3 py-1 border rounded-md" data-indicator="bollinger">Полосы Боллинджера</button>
210
+ <button class="indicator-btn px-3 py-1 border rounded-md" data-indicator="fibonacci">Уровни Фибоначчи</button>
211
+ <button class="indicator-btn px-3 py-1 border rounded-md" data-indicator="support">Уровни поддержки/сопротивления</button>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- News and Social Sentiment -->
216
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
217
+ <!-- News Section -->
218
+ <div class="bg-white rounded-xl shadow-md p-6">
219
+ <div class="flex justify-between items-center mb-4">
220
+ <h2 class="text-xl font-semibold">Последние новости</h2>
221
+ <button id="refreshNews" class="text-blue-500 hover:text-blue-700">
222
+ <i class="fas fa-sync-alt"></i>
223
+ </button>
224
+ </div>
225
+ <div id="newsContainer" class="space-y-4">
226
+ <div class="news-card bg-gray-50 p-4 rounded-lg transition-all duration-200 cursor-pointer">
227
+ <div class="flex justify-between items-start">
228
+ <div>
229
+ <h3 class="font-medium">Загрузка новостей...</h3>
230
+ <p class="text-gray-500 text-sm mt-1">Источник: --</p>
231
+ </div>
232
+ <span class="text-xs text-gray-400">-- минут назад</span>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Social Sentiment -->
239
+ <div class="bg-white rounded-xl shadow-md p-6">
240
+ <h2 class="text-xl font-semibold mb-4">Социальные настроения</h2>
241
+ <div class="flex items-center justify-center mb-6">
242
+ <div class="relative w-40 h-40">
243
+ <svg class="w-full h-full" viewBox="0 0 100 100">
244
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#e6e6e6" stroke-width="8"></circle>
245
+ <circle id="sentimentCircle" cx="50" cy="50" r="45" fill="none" stroke="#4CAF50" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="141.5" stroke-linecap="round" transform="rotate(-90 50 50)"></circle>
246
+ <text id="sentimentValue" x="50" y="50" text-anchor="middle" dy=".3em" font-size="20" font-weight="bold">--%</text>
247
+ </svg>
248
+ </div>
249
+ <div class="ml-6">
250
+ <div class="mb-4">
251
+ <p class="text-gray-500 text-sm">Позитивные упоминания</p>
252
+ <p id="positiveMentions" class="font-medium text-green-500">--%</p>
253
+ </div>
254
+ <div class="mb-4">
255
+ <p class="text-gray-500 text-sm">Негативные упоминания</p>
256
+ <p id="negativeMentions" class="font-medium text-red-500">--%</p>
257
+ </div>
258
+ <div>
259
+ <p class="text-gray-500 text-sm">Общее упоминаний (24ч)</p>
260
+ <p id="totalMentions" class="font-medium">--</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div>
265
+ <p class="text-gray-500 text-sm mb-2">Ключевые слова</p>
266
+ <div id="keywordsContainer" class="flex flex-wrap gap-2">
267
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">загрузка...</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Detailed Indicators -->
274
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
275
+ <h2 class="text-xl font-semibold mb-4">Подробные индикаторы</h2>
276
+ <div class="overflow-x-auto">
277
+ <table class="min-w-full divide-y divide-gray-200">
278
+ <thead class="bg-gray-50">
279
+ <tr>
280
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Индикатор</th>
281
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Значение</th>
282
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Сигнал</th>
283
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Описание</th>
284
+ </tr>
285
+ </thead>
286
+ <tbody id="indicatorsTable" class="bg-white divide-y divide-gray-200">
287
+ <tr>
288
+ <td class="px-6 py-4 whitespace-nowrap">RSI (14)</td>
289
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
290
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
291
+ <td class="px-6 py-4">Индекс относительной силы показывает перекупленность/перепроданность</td>
292
+ </tr>
293
+ <tr>
294
+ <td class="px-6 py-4 whitespace-nowrap">MACD (12,26,9)</td>
295
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
296
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
297
+ <td class="px-6 py-4">Схождение/расхождение скользящих средних</td>
298
+ </tr>
299
+ <tr>
300
+ <td class="px-6 py-4 whitespace-nowrap">SMA (50)</td>
301
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
302
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
303
+ <td class="px-6 py-4">Простая скользящая средняя за 50 периодов</td>
304
+ </tr>
305
+ <tr>
306
+ <td class="px-6 py-4 whitespace-nowrap">Bollinger Bands</td>
307
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
308
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
309
+ <td class="px-6 py-4">Волатильность и ценовые экстремумы</td>
310
+ </tr>
311
+ <tr>
312
+ <td class="px-6 py-4 whitespace-nowrap">Объем</td>
313
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
314
+ <td class="px-6 py-4 whitespace-nowrap">--</td>
315
+ <td class="px-6 py-4">Объем торгов за последние 24 часа</td>
316
+ </tr>
317
+ </tbody>
318
+ </table>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Disclaimer -->
323
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-8">
324
+ <div class="flex">
325
+ <div class="flex-shrink-0">
326
+ <i class="fas fa-exclamation-triangle text-yellow-400"></i>
327
+ </div>
328
+ <div class="ml-3">
329
+ <p class="text-sm text-yellow-700">
330
+ <strong>Важно:</strong> Данный инструмент предоставляет аналитическую информацию и не является финансовой рекомендацией. Криптовалютные рынки крайне волатильны. Проводите собственное исследование перед принятием инвестиционных решений.
331
+ </p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <script>
338
+ // Global variables
339
+ let mainChart;
340
+ let currentCrypto = 'BTC';
341
+ let currentTimeframe = '1d';
342
+ let activeIndicators = [];
343
+ let chartType = 'price';
344
+
345
+ // DOM Elements
346
+ const cryptoSelect = document.getElementById('cryptoSelect');
347
+ const timeframeSelect = document.getElementById('timeframeSelect');
348
+ const refreshBtn = document.getElementById('refreshBtn');
349
+ const currentPriceEl = document.getElementById('currentPrice');
350
+ const priceChangeEl = document.getElementById('priceChange');
351
+ const priceChangePercentEl = document.getElementById('priceChangePercent');
352
+ const high24hEl = document.getElementById('high24h');
353
+ const low24hEl = document.getElementById('low24h');
354
+ const volume24hEl = document.getElementById('volume24h');
355
+ const marketCapEl = document.getElementById('marketCap');
356
+ const rsiValueEl = document.getElementById('rsiValue');
357
+ const rsiBarEl = document.getElementById('rsiBar');
358
+ const macdValueEl = document.getElementById('macdValue');
359
+ const macdSignalEl = document.getElementById('macdSignal');
360
+ const macdSignalTextEl = document.getElementById('macdSignalText');
361
+ const maSignalEl = document.getElementById('maSignal');
362
+ const maSignalDotEl = document.getElementById('maSignalDot');
363
+ const maSignalTextEl = document.getElementById('maSignalText');
364
+ const predictionIconEl = document.getElementById('predictionIcon');
365
+ const predictionTextEl = document.getElementById('predictionText');
366
+ const confidenceValueEl = document.getElementById('confidenceValue');
367
+ const confidenceBarEl = document.getElementById('confidenceBar');
368
+ const priceChartBtn = document.getElementById('priceChartBtn');
369
+ const volumeChartBtn = document.getElementById('volumeChartBtn');
370
+ const rsiChartBtn = document.getElementById('rsiChartBtn');
371
+ const macdChartBtn = document.getElementById('macdChartBtn');
372
+ const newsContainer = document.getElementById('newsContainer');
373
+ const refreshNews = document.getElementById('refreshNews');
374
+ const sentimentCircle = document.getElementById('sentimentCircle');
375
+ const sentimentValueEl = document.getElementById('sentimentValue');
376
+ const positiveMentionsEl = document.getElementById('positiveMentions');
377
+ const negativeMentionsEl = document.getElementById('negativeMentions');
378
+ const totalMentionsEl = document.getElementById('totalMentions');
379
+ const keywordsContainer = document.getElementById('keywordsContainer');
380
+ const indicatorsTable = document.getElementById('indicatorsTable');
381
+
382
+ // Event Listeners
383
+ cryptoSelect.addEventListener('change', (e) => {
384
+ currentCrypto = e.target.value;
385
+ loadData();
386
+ });
387
+
388
+ timeframeSelect.addEventListener('change', (e) => {
389
+ currentTimeframe = e.target.value;
390
+ loadData();
391
+ });
392
+
393
+ refreshBtn.addEventListener('click', loadData);
394
+ refreshNews.addEventListener('click', loadNews);
395
+
396
+ priceChartBtn.addEventListener('click', () => switchChartType('price'));
397
+ volumeChartBtn.addEventListener('click', () => switchChartType('volume'));
398
+ rsiChartBtn.addEventListener('click', () => switchChartType('rsi'));
399
+ macdChartBtn.addEventListener('click', () => switchChartType('macd'));
400
+
401
+ document.querySelectorAll('.indicator-btn').forEach(btn => {
402
+ btn.addEventListener('click', function() {
403
+ const indicator = this.dataset.indicator;
404
+ toggleIndicator(indicator, this);
405
+ });
406
+ });
407
+
408
+ // Initialize
409
+ document.addEventListener('DOMContentLoaded', () => {
410
+ loadData();
411
+ loadNews();
412
+ updateSocialSentiment();
413
+ initializeChart();
414
+ });
415
+
416
+ // Functions
417
+ function initializeChart() {
418
+ const ctx = document.getElementById('mainChart').getContext('2d');
419
+
420
+ mainChart = new Chart(ctx, {
421
+ type: 'line',
422
+ data: {
423
+ labels: [],
424
+ datasets: [
425
+ {
426
+ label: 'Цена',
427
+ data: [],
428
+ borderColor: 'rgb(59, 130, 246)',
429
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
430
+ borderWidth: 2,
431
+ fill: true,
432
+ tension: 0.1
433
+ },
434
+ {
435
+ label: 'SMA (20)',
436
+ data: [],
437
+ borderColor: 'rgb(234, 88, 12)',
438
+ backgroundColor: 'rgba(234, 88, 12, 0.1)',
439
+ borderWidth: 1,
440
+ borderDash: [5, 5],
441
+ fill: false
442
+ },
443
+ {
444
+ label: 'SMA (50)',
445
+ data: [],
446
+ borderColor: 'rgb(22, 163, 74)',
447
+ backgroundColor: 'rgba(22, 163, 74, 0.1)',
448
+ borderWidth: 1,
449
+ borderDash: [5, 5],
450
+ fill: false
451
+ }
452
+ ]
453
+ },
454
+ options: {
455
+ responsive: true,
456
+ maintainAspectRatio: false,
457
+ plugins: {
458
+ tooltip: {
459
+ mode: 'index',
460
+ intersect: false,
461
+ },
462
+ legend: {
463
+ position: 'top',
464
+ }
465
+ },
466
+ scales: {
467
+ x: {
468
+ grid: {
469
+ display: false
470
+ }
471
+ },
472
+ y: {
473
+ beginAtZero: false
474
+ }
475
+ },
476
+ interaction: {
477
+ mode: 'nearest',
478
+ axis: 'x',
479
+ intersect: false
480
+ }
481
+ }
482
+ });
483
+ }
484
+
485
+ function switchChartType(type) {
486
+ chartType = type;
487
+
488
+ // Reset all buttons
489
+ priceChartBtn.classList.remove('bg-blue-500', 'text-white');
490
+ priceChartBtn.classList.add('bg-gray-200', 'text-gray-700');
491
+ volumeChartBtn.classList.remove('bg-blue-500', 'text-white');
492
+ volumeChartBtn.classList.add('bg-gray-200', 'text-gray-700');
493
+ rsiChartBtn.classList.remove('bg-blue-500', 'text-white');
494
+ rsiChartBtn.classList.add('bg-gray-200', 'text-gray-700');
495
+ macdChartBtn.classList.remove('bg-blue-500', 'text-white');
496
+ macdChartBtn.classList.add('bg-gray-200', 'text-gray-700');
497
+
498
+ // Activate selected button
499
+ switch(type) {
500
+ case 'price':
501
+ priceChartBtn.classList.add('bg-blue-500', 'text-white');
502
+ priceChartBtn.classList.remove('bg-gray-200', 'text-gray-700');
503
+ updateChartForPrice();
504
+ break;
505
+ case 'volume':
506
+ volumeChartBtn.classList.add('bg-blue-500', 'text-white');
507
+ volumeChartBtn.classList.remove('bg-gray-200', 'text-gray-700');
508
+ updateChartForVolume();
509
+ break;
510
+ case 'rsi':
511
+ rsiChartBtn.classList.add('bg-blue-500', 'text-white');
512
+ rsiChartBtn.classList.remove('bg-gray-200', 'text-gray-700');
513
+ updateChartForRSI();
514
+ break;
515
+ case 'macd':
516
+ macdChartBtn.classList.add('bg-blue-500', 'text-white');
517
+ macdChartBtn.classList.remove('bg-gray-200', 'text-gray-700');
518
+ updateChartForMACD();
519
+ break;
520
+ }
521
+ }
522
+
523
+ function updateChartForPrice() {
524
+ // In a real app, we would fetch actual data
525
+ // For demo, we'll simulate data
526
+ const labels = [];
527
+ const prices = [];
528
+ const sma20 = [];
529
+ const sma50 = [];
530
+
531
+ const now = new Date();
532
+ for (let i = 30; i >= 0; i--) {
533
+ const date = new Date(now);
534
+ date.setDate(date.getDate() - i);
535
+ labels.push(date.toLocaleDateString());
536
+
537
+ // Simulate price with some randomness
538
+ const basePrice = currentCrypto === 'BTC' ? 50000 :
539
+ currentCrypto === 'ETH' ? 3000 :
540
+ currentCrypto === 'BNB' ? 400 :
541
+ currentCrypto === 'SOL' ? 100 : 0.5;
542
+ const randFactor = 0.95 + Math.random() * 0.1;
543
+ prices.push((basePrice * randFactor).toFixed(2));
544
+
545
+ // Calculate SMAs (simplified)
546
+ if (i < 30) {
547
+ sma20.push((prices[prices.length-1] * 0.3 + prices[prices.length-2] * 0.7).toFixed(2));
548
+ } else {
549
+ sma20.push(null);
550
+ }
551
+
552
+ if (i < 28) {
553
+ sma50.push((prices[prices.length-1] * 0.2 + prices[prices.length-2] * 0.3 + prices[prices.length-3] * 0.5).toFixed(2));
554
+ } else {
555
+ sma50.push(null);
556
+ }
557
+ }
558
+
559
+ mainChart.data.labels = labels;
560
+ mainChart.data.datasets[0].data = prices;
561
+ mainChart.data.datasets[0].label = 'Цена ' + currentCrypto;
562
+ mainChart.data.datasets[1].data = sma20;
563
+ mainChart.data.datasets[2].data = sma50;
564
+
565
+ // Hide other datasets
566
+ for (let i = 3; i < mainChart.data.datasets.length; i++) {
567
+ mainChart.data.datasets[i].hidden = true;
568
+ }
569
+
570
+ // Show relevant datasets
571
+ mainChart.data.datasets[0].hidden = false;
572
+ mainChart.data.datasets[1].hidden = !activeIndicators.includes('sma');
573
+ mainChart.data.datasets[2].hidden = !activeIndicators.includes('sma');
574
+
575
+ mainChart.update();
576
+ }
577
+
578
+ function updateChartForVolume() {
579
+ // Simulate volume data
580
+ const labels = mainChart.data.labels;
581
+ const volumes = [];
582
+
583
+ for (let i = 0; i < labels.length; i++) {
584
+ // Random volume with some correlation to price changes
585
+ const baseVol = currentCrypto === 'BTC' ? 30000 :
586
+ currentCrypto === 'ETH' ? 20000 :
587
+ currentCrypto === 'BNB' ? 15000 :
588
+ currentCrypto === 'SOL' ? 10000 : 5000;
589
+ const randFactor = 0.7 + Math.random() * 0.6;
590
+ volumes.push((baseVol * randFactor).toFixed(2));
591
+ }
592
+
593
+ // Change chart to bar type for volume
594
+ mainChart.config.type = 'bar';
595
+
596
+ // Update datasets
597
+ mainChart.data.datasets = [
598
+ {
599
+ label: 'Объем торгов',
600
+ data: volumes,
601
+ backgroundColor: 'rgba(99, 102, 241, 0.6)',
602
+ borderColor: 'rgba(99, 102, 241, 1)',
603
+ borderWidth: 1
604
+ }
605
+ ];
606
+
607
+ mainChart.update();
608
+ }
609
+
610
+ function updateChartForRSI() {
611
+ // Simulate RSI data
612
+ const labels = mainChart.data.labels;
613
+ const rsiValues = [];
614
+
615
+ for (let i = 0; i < labels.length; i++) {
616
+ // RSI between 30 and 70 with some randomness
617
+ rsiValues.push((40 + Math.random() * 40).toFixed(2));
618
+ }
619
+
620
+ // Change chart back to line type
621
+ mainChart.config.type = 'line';
622
+
623
+ // Update datasets
624
+ mainChart.data.datasets = [
625
+ {
626
+ label: 'RSI (14)',
627
+ data: rsiValues,
628
+ borderColor: 'rgb(219, 39, 119)',
629
+ backgroundColor: 'rgba(219, 39, 119, 0.1)',
630
+ borderWidth: 2,
631
+ fill: true
632
+ },
633
+ {
634
+ label: 'Перепроданность (30)',
635
+ data: Array(labels.length).fill(30),
636
+ borderColor: 'rgb(22, 163, 74)',
637
+ backgroundColor: 'rgba(22, 163, 74, 0.1)',
638
+ borderWidth: 1,
639
+ borderDash: [5, 5]
640
+ },
641
+ {
642
+ label: 'Перекупленность (70)',
643
+ data: Array(labels.length).fill(70),
644
+ borderColor: 'rgb(220, 38, 38)',
645
+ backgroundColor: 'rgba(220, 38, 38, 0.1)',
646
+ borderWidth: 1,
647
+ borderDash: [5, 5]
648
+ }
649
+ ];
650
+
651
+ mainChart.update();
652
+ }
653
+
654
+ function updateChartForMACD() {
655
+ // Simulate MACD data
656
+ const labels = mainChart.data.labels;
657
+ const macdLine = [];
658
+ const signalLine = [];
659
+ const histogram = [];
660
+
661
+ for (let i = 0; i < labels.length; i++) {
662
+ // MACD line
663
+ const macdValue = (Math.random() * 4 - 2).toFixed(2);
664
+ macdLine.push(macdValue);
665
+
666
+ // Signal line (smoothed MACD)
667
+ const signalValue = (macdValue * 0.3 + (i > 0 ? macdLine[i-1] * 0.7 : 0)).toFixed(2);
668
+ signalLine.push(signalValue);
669
+
670
+ // Histogram (difference)
671
+ histogram.push((macdValue - signalValue).toFixed(2));
672
+ }
673
+
674
+ // Change chart type to bar for histogram
675
+ mainChart.config.type = 'bar';
676
+
677
+ // Update datasets
678
+ mainChart.data.datasets = [
679
+ {
680
+ label: 'MACD Линия',
681
+ data: macdLine,
682
+ borderColor: 'rgb(59, 130, 246)',
683
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
684
+ borderWidth: 2,
685
+ type: 'line'
686
+ },
687
+ {
688
+ label: 'Сигнальная линия',
689
+ data: signalLine,
690
+ borderColor: 'rgb(234, 88, 12)',
691
+ backgroundColor: 'rgba(234, 88, 12, 0.1)',
692
+ borderWidth: 2,
693
+ type: 'line'
694
+ },
695
+ {
696
+ label: 'Гистограмма MACD',
697
+ data: histogram,
698
+ backgroundColor: histogram.map(val => val > 0 ? 'rgba(22, 163, 74, 0.7)' : 'rgba(220, 38, 38, 0.7)'),
699
+ borderColor: histogram.map(val => val > 0 ? 'rgba(22, 163, 74, 1)' : 'rgba(220, 38, 38, 1)'),
700
+ borderWidth: 1,
701
+ type: 'bar'
702
+ }
703
+ ];
704
+
705
+ mainChart.update();
706
+ }
707
+
708
+ function toggleIndicator(indicator, button) {
709
+ const index = activeIndicators.indexOf(indicator);
710
+
711
+ if (index === -1) {
712
+ activeIndicators.push(indicator);
713
+ button.classList.add('indicator-active');
714
+ button.classList.add('border-blue-500');
715
+ button.classList.remove('border-gray-300');
716
+ } else {
717
+ activeIndicators.splice(index, 1);
718
+ button.classList.remove('indicator-active');
719
+ button.classList.remove('border-blue-500');
720
+ button.classList.add('border-gray-300');
721
+ }
722
+
723
+ // Update chart based on active indicators
724
+ if (chartType === 'price') {
725
+ updateChartForPrice();
726
+ }
727
+ }
728
+
729
+ function loadData() {
730
+ // Show loading state
731
+ refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Загрузка...';
732
+
733
+ // Simulate API call delay
734
+ setTimeout(() => {
735
+ // Update price info
736
+ const basePrice = currentCrypto === 'BTC' ? 50000 :
737
+ currentCrypto === 'ETH' ? 3000 :
738
+ currentCrypto === 'BNB' ? 400 :
739
+ currentCrypto === 'SOL' ? 100 : 0.5;
740
+ const priceChange = (Math.random() * 10 - 5).toFixed(2);
741
+ const currentPrice = (basePrice * (1 + priceChange/100)).
742
+ </html>