Hugging Face's logo

Spaces:
Alexo19
/
cryptosignal-sleuth
Running

App Files Community
Alexo19 commited on
Commit
440287e
·
verified ·
1 Parent(s): 6ca3084

FINISH BUILDING APP

Browse files
Files changed (5) hide show
  1. analytics.html +446 -0
  2. features.html +390 -0
  3. index.html +6 -6
  4. pricing.html +419 -0
  5. traders.html +453 -0
analytics.html ADDED
@@ -0,0 +1,446 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Analytics | CryptoSignal Sleuth</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 500: '#d946ef',
20
+ },
21
+ secondary: {
22
+ 500: '#f97316',
23
+ }
24
+ }
25
+ }
26
+ }
27
+ }
28
+ </script>
29
+ <style>
30
+ .vanta-bg {
31
+ position: absolute;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ z-index: -1;
37
+ opacity: 0.3;
38
+ }
39
+ .glass-card {
40
+ backdrop-filter: blur(16px) saturate(180%);
41
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
42
+ background-color: rgba(17, 25, 40, 0.75);
43
+ border-radius: 12px;
44
+ border: 1px solid rgba(255, 255, 255, 0.125);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
49
+ <div id="vanta-bg" class="vanta-bg"></div>
50
+
51
+ <nav class="border-b border-gray-800 py-4">
52
+ <div class="container mx-auto px-4 flex justify-between items-center">
53
+ <div class="flex items-center space-x-2">
54
+ <i data-feather="activity" class="text-primary-500"></i>
55
+ <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">CryptoSignal Sleuth</span>
56
+ </div>
57
+ <div class="hidden md:flex space-x-6">
58
+ <a href="index.html" class="hover:text-primary-500 transition">Dashboard</a>
59
+ <a href="signals.html" class="hover:text-primary-500 transition">Signals</a>
60
+ <a href="analytics.html" class="text-primary-500 font-medium">Analytics</a>
61
+ <a href="traders.html" class="hover:text-primary-500 transition">Traders</a>
62
+ <a href="api-docs.html" class="hover:text-primary-500 transition">API Docs</a>
63
+ </div>
64
+ <button class="md:hidden">
65
+ <i data-feather="menu"></i>
66
+ </button>
67
+ </div>
68
+ </nav>
69
+
70
+ <main class="container mx-auto px-4 py-8">
71
+ <!-- Analytics Header -->
72
+ <section class="glass-card p-8 mb-12 relative overflow-hidden">
73
+ <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-primary-500 opacity-10 blur-3xl"></div>
74
+ <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-secondary-500 opacity-10 blur-3xl"></div>
75
+ <div class="relative z-10">
76
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Performance <span class="text-primary-500">Analytics</span></h1>
77
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl">Track signal performance and trading insights across all markets</p>
78
+ <div class="flex flex-col sm:flex-row gap-4">
79
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105">Export Data</button>
80
+ <button class="border border-primary-500 text-primary-500 hover:bg-primary-500/10 px-6 py-3 rounded-lg font-medium transition">Custom Reports</button>
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <!-- Stats Overview -->
86
+ <section class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
87
+ <div class="glass-card p-6 rounded-xl">
88
+ <div class="flex justify-between items-start">
89
+ <div>
90
+ <h3 class="text-lg font-semibold text-gray-400 mb-2">Total Signals</h3>
91
+ <p class="text-3xl font-bold">1,248</p>
92
+ </div>
93
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center">
94
+ <i data-feather="activity" class="text-primary-500"></i>
95
+ </div>
96
+ </div>
97
+ <div class="flex items-center mt-4">
98
+ <i data-feather="trending-up" class="text-green-500 mr-1 w-4 h-4"></i>
99
+ <span class="text-green-500 text-sm">12% this week</span>
100
+ </div>
101
+ </div>
102
+ <div class="glass-card p-6 rounded-xl">
103
+ <div class="flex justify-between items-start">
104
+ <div>
105
+ <h3 class="text-lg font-semibold text-gray-400 mb-2">Success Rate</h3>
106
+ <p class="text-3xl font-bold">72.5%</p>
107
+ </div>
108
+ <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
109
+ <i data-feather="check-circle" class="text-green-500"></i>
110
+ </div>
111
+ </div>
112
+ <div class="flex items-center mt-4">
113
+ <i data-feather="trending-up" class="text-green-500 mr-1 w-4 h-4"></i>
114
+ <span class="text-green-500 text-sm">3.2% this week</span>
115
+ </div>
116
+ </div>
117
+ <div class="glass-card p-6 rounded-xl">
118
+ <div class="flex justify-between items-start">
119
+ <div>
120
+ <h3 class="text-lg font-semibold text-gray-400 mb-2">Avg Profit</h3>
121
+ <p class="text-3xl font-bold">8.2%</p>
122
+ </div>
123
+ <div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
124
+ <i data-feather="dollar-sign" class="text-blue-500"></i>
125
+ </div>
126
+ </div>
127
+ <div class="flex items-center mt-4">
128
+ <i data-feather="trending-down" class="text-red-500 mr-1 w-4 h-4"></i>
129
+ <span class="text-red-500 text-sm">1.1% this week</span>
130
+ </div>
131
+ </div>
132
+ <div class="glass-card p-6 rounded-xl">
133
+ <div class="flex justify-between items-start">
134
+ <div>
135
+ <h3 class="text-lg font-semibold text-gray-400 mb-2">Top Trader</h3>
136
+ <p class="text-3xl font-bold">CryptoWhale</p>
137
+ </div>
138
+ <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
139
+ <i data-feather="award" class="text-purple-500"></i>
140
+ </div>
141
+ </div>
142
+ <div class="flex items-center mt-4">
143
+ <span class="text-sm text-gray-400">85.3% success rate</span>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Charts Section -->
149
+ <section class="glass-card p-8 mb-12">
150
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
151
+ <h2 class="text-2xl font-bold">Performance <span class="text-primary-500">Trends</span></h2>
152
+ <div class="flex space-x-4 mt-4 md:mt-0">
153
+ <button class="bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium">7 Days</button>
154
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium">30 Days</button>
155
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium">90 Days</button>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
160
+ <div>
161
+ <h3 class="text-lg font-semibold mb-4">Signal Success Rate</h3>
162
+ <canvas id="successRateChart" height="300"></canvas>
163
+ </div>
164
+ <div>
165
+ <h3 class="text-lg font-semibold mb-4">Profit Distribution</h3>
166
+ <canvas id="profitChart" height="300"></canvas>
167
+ </div>
168
+ <div>
169
+ <h3 class="text-lg font-semibold mb-4">Signal Volume by Type</h3>
170
+ <canvas id="signalTypeChart" height="300"></canvas>
171
+ </div>
172
+ <div>
173
+ <h3 class="text-lg font-semibold mb-4">Top Pairs Performance</h3>
174
+ <canvas id="pairsChart" height="300"></canvas>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Top Traders Section -->
180
+ <section class="glass-card p-8 mb-12">
181
+ <h2 class="text-2xl font-bold mb-8">Top <span class="text-secondary-500">Traders</span> by Performance</h2>
182
+
183
+ <div class="overflow-x-auto">
184
+ <table class="w-full">
185
+ <thead>
186
+ <tr class="border-b border-gray-800 text-gray-400 text-left">
187
+ <th class="pb-4">Rank</th>
188
+ <th class="pb-4">Trader</th>
189
+ <th class="pb-4">Signals</th>
190
+ <th class="pb-4">Success Rate</th>
191
+ <th class="pb-4">Avg Profit</th>
192
+ <th class="pb-4">Followers</th>
193
+ </tr>
194
+ </thead>
195
+ <tbody class="divide-y divide-gray-800">
196
+ <tr class="hover:bg-gray-800/50 transition">
197
+ <td class="py-4">
198
+ <div class="w-8 h-8 rounded-full bg-primary-500/20 flex items-center justify-center text-primary-500 font-bold">1</div>
199
+ </td>
200
+ <td class="font-bold">CryptoWhale</td>
201
+ <td>142</td>
202
+ <td>
203
+ <div class="flex items-center">
204
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
205
+ <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
206
+ </div>
207
+ <span>85.3%</span>
208
+ </div>
209
+ </td>
210
+ <td class="text-green-500 font-bold">12.8%</td>
211
+ <td>5,248</td>
212
+ </tr>
213
+ <tr class="hover:bg-gray-800/50 transition">
214
+ <td class="py-4">
215
+ <div class="w-8 h-8 rounded-full bg-primary-500/20 flex items-center justify-center text-primary-500 font-bold">2</div>
216
+ </td>
217
+ <td class="font-bold">AltSniper</td>
218
+ <td>118</td>
219
+ <td>
220
+ <div class="flex items-center">
221
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
222
+ <div class="bg-green-500 h-2 rounded-full" style="width: 79%"></div>
223
+ </div>
224
+ <span>79.1%</span>
225
+ </div>
226
+ </td>
227
+ <td class="text-green-500 font-bold">9.5%</td>
228
+ <td>3,756</td>
229
+ </tr>
230
+ <tr class="hover:bg-gray-800/50 transition">
231
+ <td class="py-4">
232
+ <div class="w-8 h-8 rounded-full bg-primary-500/20 flex items-center justify-center text-primary-500 font-bold">3</div>
233
+ </td>
234
+ <td class="font-bold">SolanaKing</td>
235
+ <td>96</td>
236
+ <td>
237
+ <div class="flex items-center">
238
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
239
+ <div class="bg-green-500 h-2 rounded-full" style="width: 76%"></div>
240
+ </div>
241
+ <span>76.4%</span>
242
+ </div>
243
+ </td>
244
+ <td class="text-green-500 font-bold">8.7%</td>
245
+ <td>2,983</td>
246
+ </tr>
247
+ </tbody>
248
+ </table>
249
+ </div>
250
+ </section>
251
+ </main>
252
+
253
+ <footer class="border-t border-gray-800 py-8 mt-12">
254
+ <div class="container mx-auto px-4">
255
+ <div class="flex flex-col md:flex-row justify-between items-center">
256
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
257
+ <i data-feather="activity" class="text-primary-500"></i>
258
+ <span class="text-xl font-bold">CryptoSignal Sleuth</span>
259
+ </div>
260
+ <div class="flex space-x-6">
261
+ <a href="#" class="hover:text-primary-500 transition">
262
+ <i data-feather="twitter" class="w-5 h-5"></i>
263
+ </a>
264
+ <a href="#" class="hover:text-primary-500 transition">
265
+ <i data-feather="github" class="w-5 h-5"></i>
266
+ </a>
267
+ <a href="#" class="hover:text-primary-500 transition">
268
+ <i data-feather="discord" class="w-5 h-5"></i>
269
+ </a>
270
+ <a href="#" class="hover:text-primary-500 transition">
271
+ <i data-feather="mail" class="w-5 h-5"></i>
272
+ </a>
273
+ </div>
274
+ </div>
275
+ <div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between">
276
+ <div class="mb-6 md:mb-0">
277
+ <p class="text-gray-400">&copy; 2023 CryptoSignal Sleuth. All rights reserved.</p>
278
+ </div>
279
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
280
+ <div>
281
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h4>
282
+ <ul class="space-y-2">
283
+ <li><a href="features.html" class="text-gray-300 hover:text-primary-500 transition">Features</a></li>
284
+ <li><a href="pricing.html" class="text-gray-300 hover:text-primary-500 transition">Pricing</a></li>
285
+ <li><a href="api-docs.html" class="text-gray-300 hover:text-primary-500 transition">API Docs</a></li>
286
+ </ul>
287
+ </div>
288
+ <div>
289
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Company</h4>
290
+ <ul class="space-y-2">
291
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">About</a></li>
292
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Blog</a></li>
293
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Careers</a></li>
294
+ </ul>
295
+ </div>
296
+ <div>
297
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Legal</h4>
298
+ <ul class="space-y-2">
299
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Privacy</a></li>
300
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Terms</a></li>
301
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Cookie Policy</a></li>
302
+ </ul>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </footer>
308
+
309
+ <script>
310
+ // Initialize Vanta.js globe background
311
+ VANTA.GLOBE({
312
+ el: "#vanta-bg",
313
+ mouseControls: true,
314
+ touchControls: true,
315
+ gyroControls: false,
316
+ minHeight: 200.00,
317
+ minWidth: 200.00,
318
+ scale: 1.00,
319
+ scaleMobile: 1.00,
320
+ color: "#d946ef",
321
+ backgroundColor: "#111827",
322
+ size: 1.00
323
+ });
324
+
325
+ // Initialize Charts
326
+ document.addEventListener('DOMContentLoaded', function() {
327
+ // Success Rate Chart
328
+ const successCtx = document.getElementById('successRateChart').getContext('2d');
329
+ new Chart(successCtx, {
330
+ type: 'line',
331
+ data: {
332
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
333
+ datasets: [{
334
+ label: 'Success Rate %',
335
+ data: [65, 68, 72, 70, 73, 76],
336
+ borderColor: '#10b981',
337
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
338
+ tension: 0.3,
339
+ fill: true
340
+ }]
341
+ },
342
+ options: {
343
+ responsive: true,
344
+ plugins: {
345
+ legend: {
346
+ display: false
347
+ }
348
+ },
349
+ scales: {
350
+ y: {
351
+ beginAtZero: false,
352
+ min: 50
353
+ }
354
+ }
355
+ }
356
+ });
357
+
358
+ // Profit Distribution Chart
359
+ const profitCtx = document.getElementById('profitChart').getContext('2d');
360
+ new Chart(profitCtx, {
361
+ type: 'bar',
362
+ data: {
363
+ labels: ['<5%', '5-10%', '10-15%', '15-20%', '>20%'],
364
+ datasets: [{
365
+ label: 'Signals',
366
+ data: [120, 380, 420, 210, 80],
367
+ backgroundColor: [
368
+ 'rgba(217, 70, 239, 0.7)',
369
+ 'rgba(16, 185, 129, 0.7)',
370
+ 'rgba(59, 130, 246, 0.7)',
371
+ 'rgba(249, 115, 22, 0.7)',
372
+ 'rgba(239, 68, 68, 0.7)'
373
+ ]
374
+ }]
375
+ },
376
+ options: {
377
+ responsive: true,
378
+ plugins: {
379
+ legend: {
380
+ display: false
381
+ }
382
+ }
383
+ }
384
+ });
385
+
386
+ // Signal Type Chart
387
+ const typeCtx = document.getElementById('signalTypeChart').getContext('2d');
388
+ new Chart(typeCtx, {
389
+ type: 'doughnut',
390
+ data: {
391
+ labels: ['BUY', 'SELL'],
392
+ datasets: [{
393
+ data: [820, 428],
394
+ backgroundColor: [
395
+ 'rgba(16, 185, 129, 0.7)',
396
+ 'rgba(239, 68, 68, 0.7)'
397
+ ]
398
+ }]
399
+ },
400
+ options: {
401
+ responsive: true,
402
+ plugins: {
403
+ legend: {
404
+ position: 'bottom'
405
+ }
406
+ }
407
+ }
408
+ });
409
+
410
+ // Pairs Chart
411
+ const pairsCtx = document.getElementById('pairsChart').getContext('2d');
412
+ new Chart(pairsCtx, {
413
+ type: 'radar',
414
+ data: {
415
+ labels: ['BTC/USDT', 'ETH/USDT', 'SOL/USDT', 'XRP/USDT', 'ADA/USDT', 'DOT/USDT'],
416
+ datasets: [{
417
+ label: 'Success Rate %',
418
+ data: [78, 74, 82, 68, 71, 65],
419
+ backgroundColor: 'rgba(217, 70, 239, 0.2)',
420
+ borderColor: '#d946ef',
421
+ pointBackgroundColor: '#d946ef',
422
+ pointBorderColor: '#fff',
423
+ pointHoverBackgroundColor: '#fff',
424
+ pointHoverBorderColor: '#d946ef'
425
+ }]
426
+ },
427
+ options: {
428
+ responsive: true,
429
+ scales: {
430
+ r: {
431
+ angleLines: {
432
+ display: true
433
+ },
434
+ suggestedMin: 50,
435
+ suggestedMax: 100
436
+ }
437
+ }
438
+ }
439
+ });
440
+ });
441
+
442
+ // Initialize feather icons
443
+ feather.replace();
444
+ </script>
445
+ </body>
446
+ </html>
features.html ADDED
@@ -0,0 +1,390 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Features | CryptoSignal Sleuth</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#d946ef',
19
+ },
20
+ secondary: {
21
+ 500: '#f97316',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .vanta-bg {
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ z-index: -1;
36
+ opacity: 0.3;
37
+ }
38
+ .glass-card {
39
+ backdrop-filter: blur(16px) saturate(180%);
40
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
41
+ background-color: rgba(17, 25, 40, 0.75);
42
+ border-radius: 12px;
43
+ border: 1px solid rgba(255, 255, 255, 0.125);
44
+ }
45
+ .feature-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(217, 70, 239, 0.1), 0 10px 10px -5px rgba(217, 70, 239, 0.04);
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
52
+ <div id="vanta-bg" class="vanta-bg"></div>
53
+
54
+ <nav class="border-b border-gray-800 py-4">
55
+ <div class="container mx-auto px-4 flex justify-between items-center">
56
+ <div class="flex items-center space-x-2">
57
+ <i data-feather="activity" class="text-primary-500"></i>
58
+ <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">CryptoSignal Sleuth</span>
59
+ </div>
60
+ <div class="hidden md:flex space-x-6">
61
+ <a href="index.html" class="hover:text-primary-500 transition">Dashboard</a>
62
+ <a href="signals.html" class="hover:text-primary-500 transition">Signals</a>
63
+ <a href="analytics.html" class="hover:text-primary-500 transition">Analytics</a>
64
+ <a href="traders.html" class="hover:text-primary-500 transition">Traders</a>
65
+ <a href="api-docs.html" class="hover:text-primary-500 transition">API Docs</a>
66
+ </div>
67
+ <button class="md:hidden">
68
+ <i data-feather="menu"></i>
69
+ </button>
70
+ </div>
71
+ </nav>
72
+
73
+ <main class="container mx-auto px-4 py-8">
74
+ <!-- Features Header -->
75
+ <section class="glass-card p-8 mb-12 relative overflow-hidden">
76
+ <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-primary-500 opacity-10 blur-3xl"></div>
77
+ <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-secondary-500 opacity-10 blur-3xl"></div>
78
+ <div class="relative z-10">
79
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Powerful <span class="text-primary-500">Features</span></h1>
80
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl">Everything you need to analyze crypto signals and make better trading decisions</p>
81
+ <div class="flex flex-col sm:flex-row gap-4">
82
+ <a href="pricing.html" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105 text-center">View Pricing</a>
83
+ <button class="border border-primary-500 text-primary-500 hover:bg-primary-500/10 px-6 py-3 rounded-lg font-medium transition">Get Started</button>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Core Features -->
89
+ <section class="mb-16">
90
+ <h2 class="text-3xl font-bold mb-8 text-center">Core <span class="text-secondary-500">Features</span></h2>
91
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
92
+ <!-- Feature 1 -->
93
+ <div class="feature-card glass-card p-6 rounded-xl transition hover:border-primary-500 border border-gray-800">
94
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mb-4">
95
+ <i data-feather="zap" class="text-primary-500"></i>
96
+ </div>
97
+ <h3 class="text-xl font-bold mb-2">Real-time Signals</h3>
98
+ <p class="text-gray-400 mb-4">Instant detection of trading signals across hundreds of Telegram channels with AI-powered accuracy scoring.</p>
99
+ <ul class="space-y-2 text-sm text-gray-400">
100
+ <li class="flex items-center">
101
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
102
+ <span>Instant notifications</span>
103
+ </li>
104
+ <li class="flex items-center">
105
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
106
+ <span>Multi-channel monitoring</span>
107
+ </li>
108
+ <li class="flex items-center">
109
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
110
+ <span>Automated signal parsing</span>
111
+ </li>
112
+ </ul>
113
+ </div>
114
+
115
+ <!-- Feature 2 -->
116
+ <div class="feature-card glass-card p-6 rounded-xl transition hover:border-primary-500 border border-gray-800">
117
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mb-4">
118
+ <i data-feather="trending-up" class="text-primary-500"></i>
119
+ </div>
120
+ <h3 class="text-xl font-bold mb-2">Performance Tracking</h3>
121
+ <p class="text-gray-400 mb-4">Track signal accuracy and trader performance over time with detailed historical analytics.</p>
122
+ <ul class="space-y-2 text-sm text-gray-400">
123
+ <li class="flex items-center">
124
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
125
+ <span>Success rate metrics</span>
126
+ </li>
127
+ <li class="flex items-center">
128
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
129
+ <span>Profit/loss tracking</span>
130
+ </li>
131
+ <li class="flex items-center">
132
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
133
+ <span>Time-based analysis</span>
134
+ </li>
135
+ </ul>
136
+ </div>
137
+
138
+ <!-- Feature 3 -->
139
+ <div class="feature-card glass-card p-6 rounded-xl transition hover:border-primary-500 border border-gray-800">
140
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mb-4">
141
+ <i data-feather="bar-chart-2" class="text-primary-500"></i>
142
+ </div>
143
+ <h3 class="text-xl font-bold mb-2">Smart Alerts</h3>
144
+ <p class="text-gray-400 mb-4">Get notified when high-confidence signals are detected based on your custom criteria.</p>
145
+ <ul class="space-y-2 text-sm text-gray-400">
146
+ <li class="flex items-center">
147
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
148
+ <span>Custom alert thresholds</span>
149
+ </li>
150
+ <li class="flex items-center">
151
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
152
+ <span>Multi-platform notifications</span>
153
+ </li>
154
+ <li class="flex items-center">
155
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
156
+ <span>Priority signal flagging</span>
157
+ </li>
158
+ </ul>
159
+ </div>
160
+
161
+ <!-- Feature 4 -->
162
+ <div class="feature-card glass-card p-6 rounded-xl transition hover:border-primary-500 border border-gray-800">
163
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mb-4">
164
+ <i data-feather="user" class="text-primary-500"></i>
165
+ </div>
166
+ <h3 class="text-xl font-bold mb-2">Trader Rankings</h3>
167
+ <p class="text-gray-400 mb-4">Discover the most consistent and profitable signal providers with our performance-based rankings.</p>
168
+ <ul class="space-y-2 text-sm text-gray-400">
169
+ <li class="flex items-center">
170
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
171
+ <span>Leaderboard system</span>
172
+ </li>
173
+ <li class="flex items-center">
174
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
175
+ <span>Detailed trader profiles</span>
176
+ </li>
177
+ <li class="flex items-center">
178
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
179
+ <span>Follow top performers</span>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+
184
+ <!-- Feature 5 -->
185
+ <div class="feature-card glass-card p-6 rounded-xl transition hover:border-primary-500 border border-gray-800">
186
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mb-4">
187
+ <i data-feather="filter" class="text-primary-500"></i>
188
+ </div>
189
+ <h3 class="text-xl font-bold mb-2">Advanced Filters</h3>
190
+ <p class="text-gray-400 mb-4">Narrow down signals by pair, type, confidence level, trader, and more to find exactly what you need.</p>
191
+ <ul class="space-y-2 text-sm text-gray-400">
192
+ <li class="flex items-center">
193
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
194
+ <span>Multi-criteria filtering</span>
195
+ </li>
196
+ <li class="flex items-center">
197
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
198
+ <span>Saved filter presets</span>
199
+ </li>
200
+ <li class="flex items-center">
201
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
202
+ <span>Custom watchlists</span>
203
+ </li>
204
+ </ul>
205
+ </div>
206
+
207
+ <!-- Feature 6 -->
208
+ <div class="feature-card glass-card p-6 rounded-xl transition hover:border-primary-500 border border-gray-800">
209
+ <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mb-4">
210
+ <i data-feather="code" class="text-primary-500"></i>
211
+ </div>
212
+ <h3 class="text-xl font-bold mb-2">API Access</h3>
213
+ <p class="text-gray-400 mb-4">Integrate our signal data into your own trading systems and applications with our robust API.</p>
214
+ <ul class="space-y-2 text-sm text-gray-400">
215
+ <li class="flex items-center">
216
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
217
+ <span>REST API endpoints</span>
218
+ </li>
219
+ <li class="flex items-center">
220
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
221
+ <span>Webhook support</span>
222
+ </li>
223
+ <li class="flex items-center">
224
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
225
+ <span>Detailed documentation</span>
226
+ </li>
227
+ </ul>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Feature Highlights -->
233
+ <section class="glass-card p-8 rounded-xl mb-16 bg-gradient-to-r from-primary-500/10 to-secondary-500/10 border border-primary-500/30">
234
+ <div class="text-center">
235
+ <h2 class="text-3xl font-bold mb-4">Ready to Transform Your Trading?</h2>
236
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join thousands of traders who are making smarter decisions with our Telegram signal analysis platform</p>
237
+ <a href="pricing.html" class="bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-8 py-4 rounded-lg font-bold transition transform hover:scale-105 shadow-lg shadow-primary-500/20 inline-block">
238
+ View Pricing Plans
239
+ <i data-feather="arrow-right" class="inline ml-2 w-5 h-5"></i>
240
+ </a>
241
+ </div>
242
+ </section>
243
+
244
+ <!-- Testimonials -->
245
+ <section class="mb-16">
246
+ <h2 class="text-3xl font-bold mb-8 text-center">What Our <span class="text-primary-500">Users</span> Say</h2>
247
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
248
+ <!-- Testimonial 1 -->
249
+ <div class="glass-card p-6 rounded-xl">
250
+ <div class="flex items-center mb-4">
251
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
252
+ <i data-feather="user" class="w-6 h-6"></i>
253
+ </div>
254
+ <div>
255
+ <h3 class="font-bold">Sarah K.</h3>
256
+ <p class="text-sm text-gray-400">Professional Trader</p>
257
+ </div>
258
+ </div>
259
+ <p class="text-gray-300 mb-4">"CryptoSignal Sleuth has transformed how I evaluate Telegram signals. The performance tracking alone has increased my profitability by 30%."</p>
260
+ <div class="flex text-yellow-400">
261
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
262
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
263
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
264
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
265
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Testimonial 2 -->
270
+ <div class="glass-card p-6 rounded-xl">
271
+ <div class="flex items-center mb-4">
272
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
273
+ <i data-feather="user" class="w-6 h-6"></i>
274
+ </div>
275
+ <div>
276
+ <h3 class="font-bold">Michael T.</h3>
277
+ <p class="text-sm text-gray-400">Hedge Fund Manager</p>
278
+ </div>
279
+ </div>
280
+ <p class="text-gray-300 mb-4">"The API integration allows us to automate our signal evaluation pipeline. The accuracy metrics are invaluable for our trading algorithms."</p>
281
+ <div class="flex text-yellow-400">
282
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
283
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
284
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
285
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
286
+ <i data-feather="star" class="w-4 h-4"></i>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Testimonial 3 -->
291
+ <div class="glass-card p-6 rounded-xl">
292
+ <div class="flex items-center mb-4">
293
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
294
+ <i data-feather="user" class="w-6 h-6"></i>
295
+ </div>
296
+ <div>
297
+ <h3 class="font-bold">Raj P.</h3>
298
+ <p class="text-sm text-gray-400">Retail Investor</p>
299
+ </div>
300
+ </div>
301
+ <p class="text-gray-300 mb-4">"As someone new to crypto trading, being able to filter signals by confidence level and track performance has been a game-changer."</p>
302
+ <div class="flex text-yellow-400">
303
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
304
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
305
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
306
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
307
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </section>
312
+ </main>
313
+
314
+ <footer class="border-t border-gray-800 py-8 mt-12">
315
+ <div class="container mx-auto px-4">
316
+ <div class="flex flex-col md:flex-row justify-between items-center">
317
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
318
+ <i data-feather="activity" class="text-primary-500"></i>
319
+ <span class="text-xl font-bold">CryptoSignal Sleuth</span>
320
+ </div>
321
+ <div class="flex space-x-6">
322
+ <a href="#" class="hover:text-primary-500 transition">
323
+ <i data-feather="twitter" class="w-5 h-5"></i>
324
+ </a>
325
+ <a href="#" class="hover:text-primary-500 transition">
326
+ <i data-feather="github" class="w-5 h-5"></i>
327
+ </a>
328
+ <a href="#" class="hover:text-primary-500 transition">
329
+ <i data-feather="discord" class="w-5 h-5"></i>
330
+ </a>
331
+ <a href="#" class="hover:text-primary-500 transition">
332
+ <i data-feather="mail" class="w-5 h-5"></i>
333
+ </a>
334
+ </div>
335
+ </div>
336
+ <div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between">
337
+ <div class="mb-6 md:mb-0">
338
+ <p class="text-gray-400">&copy; 2023 CryptoSignal Sleuth. All rights reserved.</p>
339
+ </div>
340
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
341
+ <div>
342
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h4>
343
+ <ul class="space-y-2">
344
+ <li><a href="features.html" class="text-gray-300 hover:text-primary-500 transition">Features</a></li>
345
+ <li><a href="pricing.html" class="text-gray-300 hover:text-primary-500 transition">Pricing</a></li>
346
+ <li><a href="api-docs.html" class="text-gray-300 hover:text-primary-500 transition">API Docs</a></li>
347
+ </ul>
348
+ </div>
349
+ <div>
350
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Company</h4>
351
+ <ul class="space-y-2">
352
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">About</a></li>
353
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Blog</a></li>
354
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Careers</a></li>
355
+ </ul>
356
+ </div>
357
+ <div>
358
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Legal</h4>
359
+ <ul class="space-y-2">
360
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Privacy</a></li>
361
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Terms</a></li>
362
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Cookie Policy</a></li>
363
+ </ul>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </footer>
369
+
370
+ <script>
371
+ // Initialize Vanta.js globe background
372
+ VANTA.GLOBE({
373
+ el: "#vanta-bg",
374
+ mouseControls: true,
375
+ touchControls: true,
376
+ gyroControls: false,
377
+ minHeight: 200.00,
378
+ minWidth: 200.00,
379
+ scale: 1.00,
380
+ scaleMobile: 1.00,
381
+ color: "#d946ef",
382
+ backgroundColor: "#111827",
383
+ size: 1.00
384
+ });
385
+
386
+ // Initialize feather icons
387
+ feather.replace();
388
+ </script>
389
+ </body>
390
+ </html>
index.html CHANGED
@@ -60,9 +60,9 @@
60
  <div class="hidden md:flex space-x-6">
61
  <a href="index.html" class="hover:text-primary-500 transition">Dashboard</a>
62
  <a href="signals.html" class="hover:text-primary-500 transition">Signals</a>
63
- <a href="#" class="hover:text-primary-500 transition">Analytics</a>
64
- <a href="#" class="hover:text-primary-500 transition">Traders</a>
65
- <a href="api-docs.html" class="hover:text-primary-500 transition">API Docs</a>
66
  </div>
67
  <button class="md:hidden">
68
  <i data-feather="menu"></i>
@@ -290,9 +290,9 @@
290
  <div>
291
  <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h4>
292
  <ul class="space-y-2">
293
- <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Features</a></li>
294
- <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Pricing</a></li>
295
- <li><a href="api-docs.html" class="text-gray-300 hover:text-primary-500 transition">API Docs</a></li>
296
  </ul>
297
  </div>
298
  <div>
 
60
  <div class="hidden md:flex space-x-6">
61
  <a href="index.html" class="hover:text-primary-500 transition">Dashboard</a>
62
  <a href="signals.html" class="hover:text-primary-500 transition">Signals</a>
63
+ <a href="analytics.html" class="hover:text-primary-500 transition">Analytics</a>
64
+ <a href="traders.html" class="hover:text-primary-500 transition">Traders</a>
65
+ <a href="api-docs.html" class="hover:text-primary-500 transition">API Docs</a>
66
  </div>
67
  <button class="md:hidden">
68
  <i data-feather="menu"></i>
 
290
  <div>
291
  <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h4>
292
  <ul class="space-y-2">
293
+ <li><a href="features.html" class="text-gray-300 hover:text-primary-500 transition">Features</a></li>
294
+ <li><a href="pricing.html" class="text-gray-300 hover:text-primary-500 transition">Pricing</a></li>
295
+ <li><a href="api-docs.html" class="text-gray-300 hover:text-primary-500 transition">API Docs</a></li>
296
  </ul>
297
  </div>
298
  <div>
pricing.html ADDED
@@ -0,0 +1,419 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pricing | CryptoSignal Sleuth</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#d946ef',
19
+ },
20
+ secondary: {
21
+ 500: '#f97316',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .vanta-bg {
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ z-index: -1;
36
+ opacity: 0.3;
37
+ }
38
+ .glass-card {
39
+ backdrop-filter: blur(16px) saturate(180%);
40
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
41
+ background-color: rgba(17, 25, 40, 0.75);
42
+ border-radius: 12px;
43
+ border: 1px solid rgba(255, 255, 255, 0.125);
44
+ }
45
+ .pricing-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(217, 70, 239, 0.1), 0 10px 10px -5px rgba(217, 70, 239, 0.04);
48
+ }
49
+ .popular-plan {
50
+ border: 2px solid #d946ef;
51
+ position: relative;
52
+ }
53
+ .popular-badge {
54
+ position: absolute;
55
+ top: -12px;
56
+ right: 20px;
57
+ background: #d946ef;
58
+ color: white;
59
+ padding: 2px 8px;
60
+ border-radius: 9999px;
61
+ font-size: 0.75rem;
62
+ font-weight: bold;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
67
+ <div id="vanta-bg" class="vanta-bg"></div>
68
+
69
+ <nav class="border-b border-gray-800 py-4">
70
+ <div class="container mx-auto px-4 flex justify-between items-center">
71
+ <div class="flex items-center space-x-2">
72
+ <i data-feather="activity" class="text-primary-500"></i>
73
+ <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">CryptoSignal Sleuth</span>
74
+ </div>
75
+ <div class="hidden md:flex space-x-6">
76
+ <a href="index.html" class="hover:text-primary-500 transition">Dashboard</a>
77
+ <a href="signals.html" class="hover:text-primary-500 transition">Signals</a>
78
+ <a href="analytics.html" class="hover:text-primary-500 transition">Analytics</a>
79
+ <a href="traders.html" class="hover:text-primary-500 transition">Traders</a>
80
+ <a href="api-docs.html" class="hover:text-primary-500 transition">API Docs</a>
81
+ </div>
82
+ <button class="md:hidden">
83
+ <i data-feather="menu"></i>
84
+ </button>
85
+ </div>
86
+ </nav>
87
+
88
+ <main class="container mx-auto px-4 py-8">
89
+ <!-- Pricing Header -->
90
+ <section class="glass-card p-8 mb-12 relative overflow-hidden">
91
+ <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-primary-500 opacity-10 blur-3xl"></div>
92
+ <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-secondary-500 opacity-10 blur-3xl"></div>
93
+ <div class="relative z-10 text-center">
94
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Simple <span class="text-primary-500">Pricing</span></h1>
95
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Choose the plan that fits your trading needs</p>
96
+ <div class="inline-flex bg-gray-800 rounded-lg p-1">
97
+ <button class="px-4 py-2 rounded-lg font-medium">Monthly</button>
98
+ <button class="bg-primary-500 text-white px-4 py-2 rounded-lg font-medium">Yearly (Save 20%)</button>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Pricing Plans -->
104
+ <section class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
105
+ <!-- Basic Plan -->
106
+ <div class="pricing-card glass-card p-8 rounded-xl border border-gray-800 transition duration-300">
107
+ <h2 class="text-2xl font-bold mb-2">Basic</h2>
108
+ <p class="text-gray-400 mb-6">For casual traders getting started with signal analysis</p>
109
+ <div class="mb-6">
110
+ <span class="text-4xl font-bold">$29</span>
111
+ <span class="text-gray-400">/month</span>
112
+ </div>
113
+ <button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-lg font-medium mb-6">
114
+ Get Started
115
+ </button>
116
+ <ul class="space-y-3 text-gray-300">
117
+ <li class="flex items-center">
118
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
119
+ <span>100 signals per day</span>
120
+ </li>
121
+ <li class="flex items-center">
122
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
123
+ <span>Basic performance metrics</span>
124
+ </li>
125
+ <li class="flex items-center">
126
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
127
+ <span>Email notifications</span>
128
+ </li>
129
+ <li class="flex items-center text-gray-500">
130
+ <i data-feather="x" class="w-4 h-4 text-red-500 mr-2"></i>
131
+ <span>API Access</span>
132
+ </li>
133
+ <li class="flex items-center text-gray-500">
134
+ <i data-feather="x" class="w-4 h-4 text-red-500 mr-2"></i>
135
+ <span>Advanced filters</span>
136
+ </li>
137
+ <li class="flex items-center text-gray-500">
138
+ <i data-feather="x" class="w-4 h-4 text-red-500 mr-2"></i>
139
+ <span>Priority support</span>
140
+ </li>
141
+ </ul>
142
+ </div>
143
+
144
+ <!-- Pro Plan (Popular) -->
145
+ <div class="pricing-card popular-plan glass-card p-8 rounded-xl border border-primary-500 transition duration-300">
146
+ <div class="popular-badge">MOST POPULAR</div>
147
+ <h2 class="text-2xl font-bold mb-2">Pro</h2>
148
+ <p class="text-gray-400 mb-6">For serious traders who need comprehensive signal analysis</p>
149
+ <div class="mb-6">
150
+ <span class="text-4xl font-bold">$79</span>
151
+ <span class="text-gray-400">/month</span>
152
+ </div>
153
+ <button class="w-full bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-3 rounded-lg font-bold mb-6">
154
+ Get Started
155
+ </button>
156
+ <ul class="space-y-3 text-gray-300">
157
+ <li class="flex items-center">
158
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
159
+ <span>Unlimited signals</span>
160
+ </li>
161
+ <li class="flex items-center">
162
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
163
+ <span>Advanced analytics</span>
164
+ </li>
165
+ <li class="flex items-center">
166
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
167
+ <span>Push notifications</span>
168
+ </li>
169
+ <li class="flex items-center">
170
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
171
+ <span>Basic API access</span>
172
+ </li>
173
+ <li class="flex items-center">
174
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
175
+ <span>Custom filters</span>
176
+ </li>
177
+ <li class="flex items-center text-gray-500">
178
+ <i data-feather="x" class="w-4 h-4 text-red-500 mr-2"></i>
179
+ <span>Priority support</span>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+
184
+ <!-- Enterprise Plan -->
185
+ <div class="pricing-card glass-card p-8 rounded-xl border border-gray-800 transition duration-300">
186
+ <h2 class="text-2xl font-bold mb-2">Enterprise</h2>
187
+ <p class="text-gray-400 mb-6">For institutions and professional trading teams</p>
188
+ <div class="mb-6">
189
+ <span class="text-4xl font-bold">$199</span>
190
+ <span class="text-gray-400">/month</span>
191
+ </div>
192
+ <button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-lg font-medium mb-6">
193
+ Get Started
194
+ </button>
195
+ <ul class="space-y-3 text-gray-300">
196
+ <li class="flex items-center">
197
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
198
+ <span>Unlimited signals</span>
199
+ </li>
200
+ <li class="flex items-center">
201
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
202
+ <span>Premium analytics</span>
203
+ </li>
204
+ <li class="flex items-center">
205
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
206
+ <span>All notification methods</span>
207
+ </li>
208
+ <li class="flex items-center">
209
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
210
+ <span>Full API access</span>
211
+ </li>
212
+ <li class="flex items-center">
213
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
214
+ <span>Advanced filters</span>
215
+ </li>
216
+ <li class="flex items-center">
217
+ <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
218
+ <span>24/7 priority support</span>
219
+ </li>
220
+ </ul>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- Feature Comparison -->
225
+ <section class="glass-card p-8 rounded-xl mb-16">
226
+ <h2 class="text-3xl font-bold mb-8 text-center">Plan <span class="text-primary-500">Comparison</span></h2>
227
+
228
+ <div class="overflow-x-auto">
229
+ <table class="w-full">
230
+ <thead>
231
+ <tr class="border-b border-gray-800">
232
+ <th class="pb-4 text-left">Feature</th>
233
+ <th class="pb-4 text-center">Basic</th>
234
+ <th class="pb-4 text-center">Pro</th>
235
+ <th class="pb-4 text-center">Enterprise</th>
236
+ </tr>
237
+ </thead>
238
+ <tbody class="divide-y divide-gray-800">
239
+ <tr>
240
+ <td class="py-4 text-gray-400">Daily Signal Limit</td>
241
+ <td class="py-4 text-center">100</td>
242
+ <td class="py-4 text-center">Unlimited</td>
243
+ <td class="py-4 text-center">Unlimited</td>
244
+ </tr>
245
+ <tr>
246
+ <td class="py-4 text-gray-400">Performance Analytics</td>
247
+ <td class="py-4 text-center">Basic</td>
248
+ <td class="py-4 text-center">Advanced</td>
249
+ <td class="py-4 text-center">Premium</td>
250
+ </tr>
251
+ <tr>
252
+ <td class="py-4 text-gray-400">Notifications</td>
253
+ <td class="py-4 text-center">Email</td>
254
+ <td class="py-4 text-center">Email + Push</td>
255
+ <td class="py-4 text-center">All Methods</td>
256
+ </tr>
257
+ <tr>
258
+ <td class="py-4 text-gray-400">API Access</td>
259
+ <td class="py-4 text-center"><i data-feather="x" class="w-4 h-4 text-red-500 mx-auto"></i></td>
260
+ <td class="py-4 text-center">Basic</td>
261
+ <td class="py-4 text-center">Full</td>
262
+ </tr>
263
+ <tr>
264
+ <td class="py-4 text-gray-400">Signal Filters</td>
265
+ <td class="py-4 text-center">Basic</td>
266
+ <td class="py-4 text-center">Custom</td>
267
+ <td class="py-4 text-center">Advanced</td>
268
+ </tr>
269
+ <tr>
270
+ <td class="py-4 text-gray-400">Support</td>
271
+ <td class="py-4 text-center">Email</td>
272
+ <td class="py-4 text-center">Email + Chat</td>
273
+ <td class="py-4 text-center">24/7 Priority</td>
274
+ </tr>
275
+ </tbody>
276
+ </table>
277
+ </div>
278
+ </section>
279
+
280
+ <!-- FAQ Section -->
281
+ <section class="glass-card p-8 rounded-xl">
282
+ <h2 class="text-3xl font-bold mb-8 text-center">Frequently Asked <span class="text-secondary-500">Questions</span></h2>
283
+
284
+ <div class="space-y-4">
285
+ <!-- FAQ Item 1 -->
286
+ <div class="border-b border-gray-800 pb-4">
287
+ <button class="flex justify-between items-center w-full text-left">
288
+ <h3 class="text-lg font-medium">What payment methods do you accept?</h3>
289
+ <i data-feather="chevron-down" class="w-5 h-5 text-gray-400"></i>
290
+ </button>
291
+ <div class="mt-2 text-gray-400">
292
+ We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and cryptocurrency payments including Bitcoin and Ethereum.
293
+ </div>
294
+ </div>
295
+
296
+ <!-- FAQ Item 2 -->
297
+ <div class="border-b border-gray-800 pb-4">
298
+ <button class="flex justify-between items-center w-full text-left">
299
+ <h3 class="text-lg font-medium">Can I change plans later?</h3>
300
+ <i data-feather="chevron-down" class="w-5 h-5 text-gray-400"></i>
301
+ </button>
302
+ <div class="mt-2 text-gray-400">
303
+ Yes, you can upgrade or downgrade your plan at any time. Changes will be prorated based on your current billing cycle.
304
+ </div>
305
+ </div>
306
+
307
+ <!-- FAQ Item 3 -->
308
+ <div class="border-b border-gray-800 pb-4">
309
+ <button class="flex justify-between items-center w-full text-left">
310
+ <h3 class="text-lg font-medium">Is there a free trial available?</h3>
311
+ <i data-feather="chevron-down" class="w-5 h-5 text-gray-400"></i>
312
+ </button>
313
+ <div class="mt-2 text-gray-400">
314
+ We offer a 7-day free trial for our Pro plan. No credit card is required to start the trial.
315
+ </div>
316
+ </div>
317
+
318
+ <!-- FAQ Item 4 -->
319
+ <div class="border-b border-gray-800 pb-4">
320
+ <button class="flex justify-between items-center w-full text-left">
321
+ <h3 class="text-lg font-medium">How do I cancel my subscription?</h3>
322
+ <i data-feather="chevron-down" class="w-5 h-5 text-gray-400"></i>
323
+ </button>
324
+ <div class="mt-2 text-gray-400">
325
+ You can cancel at any time from your account settings. Your subscription will remain active until the end of your current billing period.
326
+ </div>
327
+ </div>
328
+
329
+ <!-- FAQ Item 5 -->
330
+ <div class="border-b border-gray-800 pb-4">
331
+ <button class="flex justify-between items-center w-full text-left">
332
+ <h3 class="text-lg font-medium">What's your refund policy?</h3>
333
+ <i data-feather="chevron-down" class="w-5 h-5 text-gray-400"></i>
334
+ </button>
335
+ <div class="mt-2 text-gray-400">
336
+ We offer a 14-day money-back guarantee for all annual subscriptions. Monthly plans can be canceled before the next billing cycle.
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </section>
341
+ </main>
342
+
343
+ <footer class="border-t border-gray-800 py-8 mt-12">
344
+ <div class="container mx-auto px-4">
345
+ <div class="flex flex-col md:flex-row justify-between items-center">
346
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
347
+ <i data-feather="activity" class="text-primary-500"></i>
348
+ <span class="text-xl font-bold">CryptoSignal Sleuth</span>
349
+ </div>
350
+ <div class="flex space-x-6">
351
+ <a href="#" class="hover:text-primary-500 transition">
352
+ <i data-feather="twitter" class="w-5 h-5"></i>
353
+ </a>
354
+ <a href="#" class="hover:text-primary-500 transition">
355
+ <i data-feather="github" class="w-5 h-5"></i>
356
+ </a>
357
+ <a href="#" class="hover:text-primary-500 transition">
358
+ <i data-feather="discord" class="w-5 h-5"></i>
359
+ </a>
360
+ <a href="#" class="hover:text-primary-500 transition">
361
+ <i data-feather="mail" class="w-5 h-5"></i>
362
+ </a>
363
+ </div>
364
+ </div>
365
+ <div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between">
366
+ <div class="mb-6 md:mb-0">
367
+ <p class="text-gray-400">&copy; 2023 CryptoSignal Sleuth. All rights reserved.</p>
368
+ </div>
369
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
370
+ <div>
371
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h4>
372
+ <ul class="space-y-2">
373
+ <li><a href="features.html" class="text-gray-300 hover:text-primary-500 transition">Features</a></li>
374
+ <li><a href="pricing.html" class="text-gray-300 hover:text-primary-500 transition">Pricing</a></li>
375
+ <li><a href="api-docs.html" class="text-gray-300 hover:text-primary-500 transition">API Docs</a></li>
376
+ </ul>
377
+ </div>
378
+ <div>
379
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Company</h4>
380
+ <ul class="space-y-2">
381
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">About</a></li>
382
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Blog</a></li>
383
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Careers</a></li>
384
+ </ul>
385
+ </div>
386
+ <div>
387
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Legal</h4>
388
+ <ul class="space-y-2">
389
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Privacy</a></li>
390
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Terms</a></li>
391
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Cookie Policy</a></li>
392
+ </ul>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </footer>
398
+
399
+ <script>
400
+ // Initialize Vanta.js globe background
401
+ VANTA.GLOBE({
402
+ el: "#vanta-bg",
403
+ mouseControls: true,
404
+ touchControls: true,
405
+ gyroControls: false,
406
+ minHeight: 200.00,
407
+ minWidth: 200.00,
408
+ scale: 1.00,
409
+ scaleMobile: 1.00,
410
+ color: "#d946ef",
411
+ backgroundColor: "#111827",
412
+ size: 1.00
413
+ });
414
+
415
+ // Initialize feather icons
416
+ feather.replace();
417
+ </script>
418
+ </body>
419
+ </html>
traders.html ADDED
@@ -0,0 +1,453 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Traders | CryptoSignal Sleuth</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#d946ef',
19
+ },
20
+ secondary: {
21
+ 500: '#f97316',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .vanta-bg {
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ z-index: -1;
36
+ opacity: 0.3;
37
+ }
38
+ .glass-card {
39
+ backdrop-filter: blur(16px) saturate(180%);
40
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
41
+ background-color: rgba(17, 25, 40, 0.75);
42
+ border-radius: 12px;
43
+ border: 1px solid rgba(255, 255, 255, 0.125);
44
+ }
45
+ .trader-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(217, 70, 239, 0.1), 0 10px 10px -5px rgba(217, 70, 239, 0.04);
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
52
+ <div id="vanta-bg" class="vanta-bg"></div>
53
+
54
+ <nav class="border-b border-gray-800 py-4">
55
+ <div class="container mx-auto px-4 flex justify-between items-center">
56
+ <div class="flex items-center space-x-2">
57
+ <i data-feather="activity" class="text-primary-500"></i>
58
+ <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">CryptoSignal Sleuth</span>
59
+ </div>
60
+ <div class="hidden md:flex space-x-6">
61
+ <a href="index.html" class="hover:text-primary-500 transition">Dashboard</a>
62
+ <a href="signals.html" class="hover:text-primary-500 transition">Signals</a>
63
+ <a href="analytics.html" class="hover:text-primary-500 transition">Analytics</a>
64
+ <a href="traders.html" class="text-primary-500 font-medium">Traders</a>
65
+ <a href="api-docs.html" class="hover:text-primary-500 transition">API Docs</a>
66
+ </div>
67
+ <button class="md:hidden">
68
+ <i data-feather="menu"></i>
69
+ </button>
70
+ </div>
71
+ </nav>
72
+
73
+ <main class="container mx-auto px-4 py-8">
74
+ <!-- Traders Header -->
75
+ <section class="glass-card p-8 mb-12 relative overflow-hidden">
76
+ <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-primary-500 opacity-10 blur-3xl"></div>
77
+ <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-secondary-500 opacity-10 blur-3xl"></div>
78
+ <div class="relative z-10">
79
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Track <span class="text-primary-500">Traders</span></h1>
80
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl">Follow the most successful signal providers and their performance</p>
81
+ <div class="flex flex-col sm:flex-row gap-4">
82
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105">Add Trader</button>
83
+ <button class="border border-primary-500 text-primary-500 hover:bg-primary-500/10 px-6 py-3 rounded-lg font-medium transition">View Leaderboard</button>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Trader Search -->
89
+ <section class="glass-card p-6 mb-8">
90
+ <div class="flex flex-col md:flex-row items-center justify-between">
91
+ <h2 class="text-2xl font-bold mb-4 md:mb-0">Find <span class="text-secondary-500">Traders</span></h2>
92
+ <div class="relative w-full md:w-96">
93
+ <input type="text" placeholder="Search by name, channel or pair..." class="bg-gray-800 border border-gray-700 text-gray-300 rounded-lg px-4 py-2 pl-10 w-full focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
94
+ <i data-feather="search" class="absolute left-3 top-3 w-4 h-4 text-gray-500"></i>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Featured Traders -->
100
+ <section class="mb-12">
101
+ <h2 class="text-2xl font-bold mb-6">Featured <span class="text-primary-500">Traders</span></h2>
102
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
103
+ <!-- Trader Card 1 -->
104
+ <div class="trader-card glass-card p-6 rounded-xl border border-gray-800 transition duration-300">
105
+ <div class="flex items-center mb-4">
106
+ <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mr-4">
107
+ <i data-feather="user" class="w-8 h-8"></i>
108
+ </div>
109
+ <div>
110
+ <h3 class="text-xl font-bold">CryptoWhale</h3>
111
+ <p class="text-gray-400 text-sm">@CryptoWhaleSignals</p>
112
+ </div>
113
+ </div>
114
+ <div class="space-y-3">
115
+ <div class="flex justify-between">
116
+ <span class="text-gray-400">Signals</span>
117
+ <span class="font-bold">142</span>
118
+ </div>
119
+ <div class="flex justify-between">
120
+ <span class="text-gray-400">Success Rate</span>
121
+ <span class="text-green-500 font-bold">85.3%</span>
122
+ </div>
123
+ <div class="flex justify-between">
124
+ <span class="text-gray-400">Avg Profit</span>
125
+ <span class="text-green-500 font-bold">12.8%</span>
126
+ </div>
127
+ <div class="flex justify-between">
128
+ <span class="text-gray-400">Followers</span>
129
+ <span class="font-bold">5,248</span>
130
+ </div>
131
+ </div>
132
+ <div class="mt-6 pt-4 border-t border-gray-800 flex justify-between">
133
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium w-full mr-2">
134
+ Follow
135
+ </button>
136
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium w-full ml-2">
137
+ View Signals
138
+ </button>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Trader Card 2 -->
143
+ <div class="trader-card glass-card p-6 rounded-xl border border-gray-800 transition duration-300">
144
+ <div class="flex items-center mb-4">
145
+ <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mr-4">
146
+ <i data-feather="user" class="w-8 h-8"></i>
147
+ </div>
148
+ <div>
149
+ <h3 class="text-xl font-bold">AltSniper</h3>
150
+ <p class="text-gray-400 text-sm">@AltSniperPro</p>
151
+ </div>
152
+ </div>
153
+ <div class="space-y-3">
154
+ <div class="flex justify-between">
155
+ <span class="text-gray-400">Signals</span>
156
+ <span class="font-bold">118</span>
157
+ </div>
158
+ <div class="flex justify-between">
159
+ <span class="text-gray-400">Success Rate</span>
160
+ <span class="text-green-500 font-bold">79.1%</span>
161
+ </div>
162
+ <div class="flex justify-between">
163
+ <span class="text-gray-400">Avg Profit</span>
164
+ <span class="text-green-500 font-bold">9.5%</span>
165
+ </div>
166
+ <div class="flex justify-between">
167
+ <span class="text-gray-400">Followers</span>
168
+ <span class="font-bold">3,756</span>
169
+ </div>
170
+ </div>
171
+ <div class="mt-6 pt-4 border-t border-gray-800 flex justify-between">
172
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium w-full mr-2">
173
+ Follow
174
+ </button>
175
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium w-full ml-2">
176
+ View Signals
177
+ </button>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Trader Card 3 -->
182
+ <div class="trader-card glass-card p-6 rounded-xl border border-gray-800 transition duration-300">
183
+ <div class="flex items-center mb-4">
184
+ <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mr-4">
185
+ <i data-feather="user" class="w-8 h-8"></i>
186
+ </div>
187
+ <div>
188
+ <h3 class="text-xl font-bold">SolanaKing</h3>
189
+ <p class="text-gray-400 text-sm">@SolanaKingOfficial</p>
190
+ </div>
191
+ </div>
192
+ <div class="space-y-3">
193
+ <div class="flex justify-between">
194
+ <span class="text-gray-400">Signals</span>
195
+ <span class="font-bold">96</span>
196
+ </div>
197
+ <div class="flex justify-between">
198
+ <span class="text-gray-400">Success Rate</span>
199
+ <span class="text-green-500 font-bold">76.4%</span>
200
+ </div>
201
+ <div class="flex justify-between">
202
+ <span class="text-gray-400">Avg Profit</span>
203
+ <span class="text-green-500 font-bold">8.7%</span>
204
+ </div>
205
+ <div class="flex justify-between">
206
+ <span class="text-gray-400">Followers</span>
207
+ <span class="font-bold">2,983</span>
208
+ </div>
209
+ </div>
210
+ <div class="mt-6 pt-4 border-t border-gray-800 flex justify-between">
211
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium w-full mr-2">
212
+ Follow
213
+ </button>
214
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium w-full ml-2">
215
+ View Signals
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- All Traders Table -->
223
+ <section class="glass-card p-8 mb-12">
224
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
225
+ <h2 class="text-2xl font-bold">All <span class="text-primary-500">Traders</span></h2>
226
+ <div class="flex space-x-4 mt-4 md:mt-0">
227
+ <button class="bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium">Top Performers</button>
228
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium">Most Active</button>
229
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium">Newest</button>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="overflow-x-auto">
234
+ <table class="w-full">
235
+ <thead>
236
+ <tr class="border-b border-gray-800 text-gray-400 text-left">
237
+ <th class="pb-4">Trader</th>
238
+ <th class="pb-4">Channel</th>
239
+ <th class="pb-4">Signals</th>
240
+ <th class="pb-4">Success Rate</th>
241
+ <th class="pb-4">Avg Profit</th>
242
+ <th class="pb-4">Followers</th>
243
+ <th class="pb-4">Actions</th>
244
+ </tr>
245
+ </thead>
246
+ <tbody class="divide-y divide-gray-800">
247
+ <!-- Trader Row 1 -->
248
+ <tr class="hover:bg-gray-800/50 transition">
249
+ <td class="py-4 font-bold">CryptoWhale</td>
250
+ <td>@CryptoWhaleSignals</td>
251
+ <td>142</td>
252
+ <td>
253
+ <div class="flex items-center">
254
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
255
+ <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
256
+ </div>
257
+ <span class="text-green-500 font-bold">85.3%</span>
258
+ </div>
259
+ </td>
260
+ <td class="text-green-500 font-bold">12.8%</td>
261
+ <td>5,248</td>
262
+ <td>
263
+ <button class="text-primary-500 hover:text-primary-400 p-2">
264
+ <i data-feather="eye" class="w-4 h-4"></i>
265
+ </button>
266
+ </td>
267
+ </tr>
268
+
269
+ <!-- Trader Row 2 -->
270
+ <tr class="hover:bg-gray-800/50 transition">
271
+ <td class="py-4 font-bold">AltSniper</td>
272
+ <td>@AltSniperPro</td>
273
+ <td>118</td>
274
+ <td>
275
+ <div class="flex items-center">
276
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
277
+ <div class="bg-green-500 h-2 rounded-full" style="width: 79%"></div>
278
+ </div>
279
+ <span class="text-green-500 font-bold">79.1%</span>
280
+ </div>
281
+ </td>
282
+ <td class="text-green-500 font-bold">9.5%</td>
283
+ <td>3,756</td>
284
+ <td>
285
+ <button class="text-primary-500 hover:text-primary-400 p-2">
286
+ <i data-feather="eye" class="w-4 h-4"></i>
287
+ </button>
288
+ </td>
289
+ </tr>
290
+
291
+ <!-- Trader Row 3 -->
292
+ <tr class="hover:bg-gray-800/50 transition">
293
+ <td class="py-4 font-bold">SolanaKing</td>
294
+ <td>@SolanaKingOfficial</td>
295
+ <td>96</td>
296
+ <td>
297
+ <div class="flex items-center">
298
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
299
+ <div class="bg-green-500 h-2 rounded-full" style="width: 76%"></div>
300
+ </div>
301
+ <span class="text-green-500 font-bold">76.4%</span>
302
+ </div>
303
+ </td>
304
+ <td class="text-green-500 font-bold">8.7%</td>
305
+ <td>2,983</td>
306
+ <td>
307
+ <button class="text-primary-500 hover:text-primary-400 p-2">
308
+ <i data-feather="eye" class="w-4 h-4"></i>
309
+ </button>
310
+ </td>
311
+ </tr>
312
+
313
+ <!-- Trader Row 4 -->
314
+ <tr class="hover:bg-gray-800/50 transition">
315
+ <td class="py-4 font-bold">XRPNinja</td>
316
+ <td>@XRPNinjaSignals</td>
317
+ <td>78</td>
318
+ <td>
319
+ <div class="flex items-center">
320
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
321
+ <div class="bg-green-500 h-2 rounded-full" style="width: 72%"></div>
322
+ </div>
323
+ <span class="text-green-500 font-bold">72.3%</span>
324
+ </div>
325
+ </td>
326
+ <td class="text-green-500 font-bold">7.2%</td>
327
+ <td>2,145</td>
328
+ <td>
329
+ <button class="text-primary-500 hover:text-primary-400 p-2">
330
+ <i data-feather="eye" class="w-4 h-4"></i>
331
+ </button>
332
+ </td>
333
+ </tr>
334
+
335
+ <!-- Trader Row 5 -->
336
+ <tr class="hover:bg-gray-800/50 transition">
337
+ <td class="py-4 font-bold">AdaQueen</td>
338
+ <td>@AdaQueenVIP</td>
339
+ <td>65</td>
340
+ <td>
341
+ <div class="flex items-center">
342
+ <div class="w-16 bg-gray-700 rounded-full h-2 mr-2">
343
+ <div class="bg-green-500 h-2 rounded-full" style="width: 69%"></div>
344
+ </div>
345
+ <span class="text-green-500 font-bold">69.8%</span>
346
+ </div>
347
+ </td>
348
+ <td class="text-green-500 font-bold">6.5%</td>
349
+ <td>1,872</td>
350
+ <td>
351
+ <button class="text-primary-500 hover:text-primary-400 p-2">
352
+ <i data-feather="eye" class="w-4 h-4"></i>
353
+ </button>
354
+ </td>
355
+ </tr>
356
+ </tbody>
357
+ </table>
358
+ </div>
359
+
360
+ <!-- Pagination -->
361
+ <div class="flex justify-center mt-8">
362
+ <div class="flex space-x-2">
363
+ <button class="w-10 h-10 flex items-center justify-center border border-gray-700 rounded-lg text-gray-400 hover:text-primary-500 transition">
364
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
365
+ </button>
366
+ <button class="w-10 h-10 flex items-center justify-center bg-primary-500 text-white rounded-lg">1</button>
367
+ <button class="w-10 h-10 flex items-center justify-center border border-gray-700 rounded-lg hover:text-primary-500 transition">2</button>
368
+ <button class="w-10 h-10 flex items-center justify-center border border-gray-700 rounded-lg hover:text-primary-500 transition">3</button>
369
+ <button class="w-10 h-10 flex items-center justify-center border border-gray-700 rounded-lg text-gray-400 hover:text-primary-500 transition">
370
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
371
+ </button>
372
+ </div>
373
+ </div>
374
+ </section>
375
+ </main>
376
+
377
+ <footer class="border-t border-gray-800 py-8 mt-12">
378
+ <div class="container mx-auto px-4">
379
+ <div class="flex flex-col md:flex-row justify-between items-center">
380
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
381
+ <i data-feather="activity" class="text-primary-500"></i>
382
+ <span class="text-xl font-bold">CryptoSignal Sleuth</span>
383
+ </div>
384
+ <div class="flex space-x-6">
385
+ <a href="#" class="hover:text-primary-500 transition">
386
+ <i data-feather="twitter" class="w-5 h-5"></i>
387
+ </a>
388
+ <a href="#" class="hover:text-primary-500 transition">
389
+ <i data-feather="github" class="w-5 h-5"></i>
390
+ </a>
391
+ <a href="#" class="hover:text-primary-500 transition">
392
+ <i data-feather="discord" class="w-5 h-5"></i>
393
+ </a>
394
+ <a href="#" class="hover:text-primary-500 transition">
395
+ <i data-feather="mail" class="w-5 h-5"></i>
396
+ </a>
397
+ </div>
398
+ </div>
399
+ <div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between">
400
+ <div class="mb-6 md:mb-0">
401
+ <p class="text-gray-400">&copy; 2023 CryptoSignal Sleuth. All rights reserved.</p>
402
+ </div>
403
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
404
+ <div>
405
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Product</h4>
406
+ <ul class="space-y-2">
407
+ <li><a href="features.html" class="text-gray-300 hover:text-primary-500 transition">Features</a></li>
408
+ <li><a href="pricing.html" class="text-gray-300 hover:text-primary-500 transition">Pricing</a></li>
409
+ <li><a href="api-docs.html" class="text-gray-300 hover:text-primary-500 transition">API Docs</a></li>
410
+ </ul>
411
+ </div>
412
+ <div>
413
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Company</h4>
414
+ <ul class="space-y-2">
415
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">About</a></li>
416
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Blog</a></li>
417
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Careers</a></li>
418
+ </ul>
419
+ </div>
420
+ <div>
421
+ <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Legal</h4>
422
+ <ul class="space-y-2">
423
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Privacy</a></li>
424
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Terms</a></li>
425
+ <li><a href="#" class="text-gray-300 hover:text-primary-500 transition">Cookie Policy</a></li>
426
+ </ul>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </footer>
432
+
433
+ <script>
434
+ // Initialize Vanta.js globe background
435
+ VANTA.GLOBE({
436
+ el: "#vanta-bg",
437
+ mouseControls: true,
438
+ touchControls: true,
439
+ gyroControls: false,
440
+ minHeight: 200.00,
441
+ minWidth: 200.00,
442
+ scale: 1.00,
443
+ scaleMobile: 1.00,
444
+ color: "#d946ef",
445
+ backgroundColor: "#111827",
446
+ size: 1.00
447
+ });
448
+
449
+ // Initialize feather icons
450
+ feather.replace();
451
+ </script>
452
+ </body>
453
+ </html>