Hugging Face's logo

Spaces:
joseififif
/
Megatron-So
Runtime error

App Files Community
joseififif commited on
Commit
1e7e58b
·
verified ·
1 Parent(s): cd00cb5

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +711 -0
index.html ADDED
@@ -0,0 +1,711 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Diamond AI Platform - 💎 Inteligencia Artificial con Tokens DIAMANTE</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
9
+ <script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script>
10
+ <script src="https://unpkg.com/@solana/wallet-adapter-phantom/lib/index.iife.min.js"></script>
11
+ <script src="https://unpkg.com/@solana/wallet-adapter-base@latest/lib/index.iife.js"></script>
12
+ <style>
13
+ :root {
14
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ --diamond-gradient: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
16
+ --solana-gradient: linear-gradient(135deg, #9945FF 0%, #14F195 100%);
17
+ --dark-bg: #0f172a;
18
+ --darker-bg: #020617;
19
+ --card-bg: rgba(30, 41, 59, 0.7);
20
+ --border-color: rgba(148, 163, 184, 0.2);
21
+ --text-primary: #f8fafc;
22
+ --text-secondary: #cbd5e1;
23
+ --accent-cyan: #22d3ee;
24
+ --accent-purple: #a855f7;
25
+ --accent-green: #10b981;
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Inter', sans-serif;
36
+ background: var(--dark-bg);
37
+ color: var(--text-primary);
38
+ min-height: 100vh;
39
+ overflow-x: hidden;
40
+ background-image:
41
+ radial-gradient(at 40% 20%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
42
+ radial-gradient(at 80% 0%, rgba(124, 58, 237, 0.15) 0px, transparent 50%),
43
+ radial-gradient(at 0% 50%, rgba(14, 165, 233, 0.1) 0px, transparent 50%),
44
+ radial-gradient(at 80% 50%, rgba(139, 92, 246, 0.1) 0px, transparent 50%),
45
+ radial-gradient(at 0% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%);
46
+ }
47
+
48
+ .container {
49
+ max-width: 1400px;
50
+ margin: 0 auto;
51
+ padding: 0 20px;
52
+ }
53
+
54
+ /* Header y Navegación */
55
+ header {
56
+ background: rgba(15, 23, 42, 0.9);
57
+ backdrop-filter: blur(10px);
58
+ border-bottom: 1px solid var(--border-color);
59
+ position: sticky;
60
+ top: 0;
61
+ z-index: 100;
62
+ padding: 1.2rem 0;
63
+ }
64
+
65
+ .nav-container {
66
+ display: flex;
67
+ justify-content: space-between;
68
+ align-items: center;
69
+ }
70
+
71
+ .logo {
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 12px;
75
+ font-weight: 800;
76
+ font-size: 1.8rem;
77
+ background: var(--diamond-gradient);
78
+ -webkit-background-clip: text;
79
+ -webkit-text-fill-color: transparent;
80
+ }
81
+
82
+ .logo-icon {
83
+ font-size: 2.2rem;
84
+ }
85
+
86
+ .nav-links {
87
+ display: flex;
88
+ gap: 2rem;
89
+ align-items: center;
90
+ }
91
+
92
+ .nav-link {
93
+ color: var(--text-secondary);
94
+ text-decoration: none;
95
+ font-weight: 500;
96
+ transition: color 0.3s;
97
+ display: flex;
98
+ align-items: center;
99
+ gap: 8px;
100
+ }
101
+
102
+ .nav-link:hover {
103
+ color: var(--accent-cyan);
104
+ }
105
+
106
+ .nav-link.active {
107
+ color: var(--accent-cyan);
108
+ font-weight: 600;
109
+ }
110
+
111
+ .wallet-section {
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 1rem;
115
+ }
116
+
117
+ .balance-display {
118
+ background: rgba(30, 41, 59, 0.8);
119
+ padding: 8px 16px;
120
+ border-radius: 12px;
121
+ border: 1px solid var(--border-color);
122
+ font-weight: 600;
123
+ display: flex;
124
+ align-items: center;
125
+ gap: 8px;
126
+ }
127
+
128
+ .diamond-icon {
129
+ color: var(--accent-cyan);
130
+ }
131
+
132
+ .connect-btn {
133
+ background: var(--solana-gradient);
134
+ color: white;
135
+ border: none;
136
+ padding: 10px 20px;
137
+ border-radius: 12px;
138
+ font-weight: 600;
139
+ cursor: pointer;
140
+ transition: transform 0.3s, box-shadow 0.3s;
141
+ display: flex;
142
+ align-items: center;
143
+ gap: 8px;
144
+ }
145
+
146
+ .connect-btn:hover {
147
+ transform: translateY(-2px);
148
+ box-shadow: 0 10px 25px rgba(153, 69, 255, 0.3);
149
+ }
150
+
151
+ /* Hero Section */
152
+ .hero {
153
+ padding: 5rem 0;
154
+ text-align: center;
155
+ max-width: 900px;
156
+ margin: 0 auto;
157
+ }
158
+
159
+ .hero h1 {
160
+ font-size: 3.5rem;
161
+ font-weight: 900;
162
+ margin-bottom: 1.5rem;
163
+ background: linear-gradient(to right, #22d3ee, #a855f7, #10b981);
164
+ -webkit-background-clip: text;
165
+ -webkit-text-fill-color: transparent;
166
+ line-height: 1.2;
167
+ }
168
+
169
+ .hero p {
170
+ font-size: 1.2rem;
171
+ color: var(--text-secondary);
172
+ max-width: 700px;
173
+ margin: 0 auto 2.5rem;
174
+ line-height: 1.6;
175
+ }
176
+
177
+ .hero-buttons {
178
+ display: flex;
179
+ gap: 1rem;
180
+ justify-content: center;
181
+ margin-top: 2rem;
182
+ }
183
+
184
+ .primary-btn {
185
+ background: var(--diamond-gradient);
186
+ color: white;
187
+ border: none;
188
+ padding: 14px 32px;
189
+ border-radius: 12px;
190
+ font-weight: 600;
191
+ font-size: 1.1rem;
192
+ cursor: pointer;
193
+ transition: transform 0.3s, box-shadow 0.3s;
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 10px;
197
+ }
198
+
199
+ .primary-btn:hover {
200
+ transform: translateY(-3px);
201
+ box-shadow: 0 15px 30px rgba(0, 201, 255, 0.3);
202
+ }
203
+
204
+ .secondary-btn {
205
+ background: transparent;
206
+ color: var(--text-primary);
207
+ border: 2px solid var(--border-color);
208
+ padding: 14px 32px;
209
+ border-radius: 12px;
210
+ font-weight: 600;
211
+ font-size: 1.1rem;
212
+ cursor: pointer;
213
+ transition: all 0.3s;
214
+ display: flex;
215
+ align-items: center;
216
+ gap: 10px;
217
+ }
218
+
219
+ .secondary-btn:hover {
220
+ background: rgba(148, 163, 184, 0.1);
221
+ border-color: var(--accent-cyan);
222
+ }
223
+
224
+ /* Main Content Grid */
225
+ .main-grid {
226
+ display: grid;
227
+ grid-template-columns: 1fr 1fr 1fr;
228
+ gap: 1.5rem;
229
+ margin-bottom: 4rem;
230
+ }
231
+
232
+ /* Chat Section */
233
+ .chat-section {
234
+ grid-column: span 2;
235
+ background: var(--card-bg);
236
+ backdrop-filter: blur(10px);
237
+ border-radius: 20px;
238
+ border: 1px solid var(--border-color);
239
+ padding: 2rem;
240
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
241
+ }
242
+
243
+ .section-title {
244
+ font-size: 1.5rem;
245
+ font-weight: 700;
246
+ margin-bottom: 1.5rem;
247
+ display: flex;
248
+ align-items: center;
249
+ gap: 10px;
250
+ }
251
+
252
+ .section-title i {
253
+ color: var(--accent-cyan);
254
+ }
255
+
256
+ .chat-container {
257
+ display: flex;
258
+ flex-direction: column;
259
+ height: 600px;
260
+ }
261
+
262
+ .chat-messages {
263
+ flex: 1;
264
+ overflow-y: auto;
265
+ padding: 1.5rem;
266
+ background: rgba(15, 23, 42, 0.6);
267
+ border-radius: 15px;
268
+ margin-bottom: 1.5rem;
269
+ border: 1px solid var(--border-color);
270
+ }
271
+
272
+ .message {
273
+ margin-bottom: 1.5rem;
274
+ padding: 1rem;
275
+ border-radius: 12px;
276
+ max-width: 85%;
277
+ }
278
+
279
+ .message.user {
280
+ background: rgba(34, 211, 238, 0.15);
281
+ border-left: 4px solid var(--accent-cyan);
282
+ margin-left: auto;
283
+ }
284
+
285
+ .message.ai {
286
+ background: rgba(168, 85, 247, 0.15);
287
+ border-left: 4px solid var(--accent-purple);
288
+ }
289
+
290
+ .message-header {
291
+ display: flex;
292
+ justify-content: space-between;
293
+ margin-bottom: 8px;
294
+ font-size: 0.9rem;
295
+ color: var(--text-secondary);
296
+ }
297
+
298
+ .message-content {
299
+ line-height: 1.5;
300
+ }
301
+
302
+ .chat-input-container {
303
+ display: flex;
304
+ gap: 1rem;
305
+ }
306
+
307
+ .chat-input {
308
+ flex: 1;
309
+ padding: 1rem 1.5rem;
310
+ background: rgba(15, 23, 42, 0.8);
311
+ border: 2px solid var(--border-color);
312
+ border-radius: 12px;
313
+ color: var(--text-primary);
314
+ font-size: 1rem;
315
+ transition: border-color 0.3s;
316
+ }
317
+
318
+ .chat-input:focus {
319
+ outline: none;
320
+ border-color: var(--accent-cyan);
321
+ }
322
+
323
+ .send-btn {
324
+ background: var(--diamond-gradient);
325
+ color: white;
326
+ border: none;
327
+ width: 60px;
328
+ border-radius: 12px;
329
+ cursor: pointer;
330
+ font-size: 1.2rem;
331
+ transition: transform 0.3s;
332
+ }
333
+
334
+ .send-btn:hover {
335
+ transform: translateY(-2px);
336
+ }
337
+
338
+ .cost-indicator {
339
+ display: flex;
340
+ align-items: center;
341
+ gap: 8px;
342
+ margin-top: 1rem;
343
+ color: var(--text-secondary);
344
+ font-size: 0.9rem;
345
+ }
346
+
347
+ /* Sidebar Sections */
348
+ .sidebar-section {
349
+ background: var(--card-bg);
350
+ backdrop-filter: blur(10px);
351
+ border-radius: 20px;
352
+ border: 1px solid var(--border-color);
353
+ padding: 1.5rem;
354
+ margin-bottom: 1.5rem;
355
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
356
+ }
357
+
358
+ .token-info .info-grid {
359
+ display: grid;
360
+ grid-template-columns: 1fr 1fr;
361
+ gap: 1rem;
362
+ margin-top: 1rem;
363
+ }
364
+
365
+ .info-item {
366
+ display: flex;
367
+ flex-direction: column;
368
+ gap: 4px;
369
+ }
370
+
371
+ .info-label {
372
+ font-size: 0.8rem;
373
+ color: var(--text-secondary);
374
+ }
375
+
376
+ .info-value {
377
+ font-weight: 600;
378
+ font-size: 1rem;
379
+ word-break: break-all;
380
+ }
381
+
382
+ .token-address {
383
+ background: rgba(15, 23, 42, 0.6);
384
+ padding: 10px;
385
+ border-radius: 8px;
386
+ font-family: monospace;
387
+ font-size: 0.8rem;
388
+ margin-top: 1rem;
389
+ border: 1px solid var(--border-color);
390
+ }
391
+
392
+ .earn-options {
393
+ display: flex;
394
+ flex-direction: column;
395
+ gap: 1rem;
396
+ margin-top: 1rem;
397
+ }
398
+
399
+ .earn-option {
400
+ display: flex;
401
+ justify-content: space-between;
402
+ align-items: center;
403
+ padding: 1rem;
404
+ background: rgba(15, 23, 42, 0.6);
405
+ border-radius: 12px;
406
+ border: 1px solid var(--border-color);
407
+ transition: all 0.3s;
408
+ cursor: pointer;
409
+ }
410
+
411
+ .earn-option:hover {
412
+ border-color: var(--accent-green);
413
+ transform: translateX(5px);
414
+ }
415
+
416
+ .earn-details {
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 12px;
420
+ }
421
+
422
+ .earn-icon {
423
+ width: 40px;
424
+ height: 40px;
425
+ border-radius: 10px;
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ font-size: 1.2rem;
430
+ }
431
+
432
+ .earn-1 .earn-icon { background: rgba(34, 211, 238, 0.2); color: var(--accent-cyan); }
433
+ .earn-2 .earn-icon { background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); }
434
+ .earn-3 .earn-icon { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); }
435
+
436
+ .earn-amount {
437
+ font-weight: 700;
438
+ color: var(--accent-green);
439
+ }
440
+
441
+ .quick-actions {
442
+ display: grid;
443
+ grid-template-columns: 1fr 1fr;
444
+ gap: 1rem;
445
+ margin-top: 1rem;
446
+ }
447
+
448
+ .action-btn {
449
+ display: flex;
450
+ flex-direction: column;
451
+ align-items: center;
452
+ gap: 8px;
453
+ padding: 1rem;
454
+ background: rgba(15, 23, 42, 0.6);
455
+ border-radius: 12px;
456
+ border: 1px solid var(--border-color);
457
+ transition: all 0.3s;
458
+ cursor: pointer;
459
+ }
460
+
461
+ .action-btn:hover {
462
+ border-color: var(--accent-purple);
463
+ transform: translateY(-3px);
464
+ }
465
+
466
+ .action-icon {
467
+ font-size: 1.5rem;
468
+ color: var(--accent-purple);
469
+ }
470
+
471
+ .action-label {
472
+ font-size: 0.9rem;
473
+ font-weight: 500;
474
+ }
475
+
476
+ /* Stats Section */
477
+ .stats-section {
478
+ display: grid;
479
+ grid-template-columns: repeat(4, 1fr);
480
+ gap: 1.5rem;
481
+ margin-bottom: 4rem;
482
+ }
483
+
484
+ .stat-card {
485
+ background: var(--card-bg);
486
+ backdrop-filter: blur(10px);
487
+ border-radius: 20px;
488
+ border: 1px solid var(--border-color);
489
+ padding: 1.5rem;
490
+ display: flex;
491
+ align-items: center;
492
+ gap: 1rem;
493
+ transition: transform 0.3s, box-shadow 0.3s;
494
+ }
495
+
496
+ .stat-card:hover {
497
+ transform: translateY(-5px);
498
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
499
+ }
500
+
501
+ .stat-icon {
502
+ width: 60px;
503
+ height: 60px;
504
+ border-radius: 15px;
505
+ display: flex;
506
+ align-items: center;
507
+ justify-content: center;
508
+ font-size: 1.8rem;
509
+ }
510
+
511
+ .stat-1 .stat-icon { background: rgba(34, 211, 238, 0.2); color: var(--accent-cyan); }
512
+ .stat-2 .stat-icon { background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); }
513
+ .stat-3 .stat-icon { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); }
514
+ .stat-4 .stat-icon { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
515
+
516
+ .stat-content {
517
+ flex: 1;
518
+ }
519
+
520
+ .stat-value {
521
+ font-size: 1.8rem;
522
+ font-weight: 800;
523
+ margin-bottom: 4px;
524
+ }
525
+
526
+ .stat-label {
527
+ font-size: 0.9rem;
528
+ color: var(--text-secondary);
529
+ }
530
+
531
+ /* Footer */
532
+ footer {
533
+ background: rgba(15, 23, 42, 0.9);
534
+ border-top: 1px solid var(--border-color);
535
+ padding: 3rem 0;
536
+ margin-top: 4rem;
537
+ }
538
+
539
+ .footer-grid {
540
+ display: grid;
541
+ grid-template-columns: repeat(4, 1fr);
542
+ gap: 3rem;
543
+ }
544
+
545
+ .footer-column h3 {
546
+ font-size: 1.2rem;
547
+ margin-bottom: 1.5rem;
548
+ color: var(--text-primary);
549
+ }
550
+
551
+ .footer-links {
552
+ display: flex;
553
+ flex-direction: column;
554
+ gap: 0.8rem;
555
+ }
556
+
557
+ .footer-link {
558
+ color: var(--text-secondary);
559
+ text-decoration: none;
560
+ transition: color 0.3s;
561
+ }
562
+
563
+ .footer-link:hover {
564
+ color: var(--accent-cyan);
565
+ }
566
+
567
+ .copyright {
568
+ text-align: center;
569
+ margin-top: 3rem;
570
+ padding-top: 2rem;
571
+ border-top: 1px solid var(--border-color);
572
+ color: var(--text-secondary);
573
+ font-size: 0.9rem;
574
+ }
575
+
576
+ /* Responsive */
577
+ @media (max-width: 1200px) {
578
+ .main-grid {
579
+ grid-template-columns: 1fr;
580
+ }
581
+
582
+ .chat-section {
583
+ grid-column: span 1;
584
+ }
585
+
586
+ .stats-section {
587
+ grid-template-columns: repeat(2, 1fr);
588
+ }
589
+
590
+ .footer-grid {
591
+ grid-template-columns: repeat(2, 1fr);
592
+ }
593
+ }
594
+
595
+ @media (max-width: 768px) {
596
+ .nav-links {
597
+ display: none;
598
+ }
599
+
600
+ .hero h1 {
601
+ font-size: 2.5rem;
602
+ }
603
+
604
+ .hero-buttons {
605
+ flex-direction: column;
606
+ }
607
+
608
+ .stats-section {
609
+ grid-template-columns: 1fr;
610
+ }
611
+
612
+ .footer-grid {
613
+ grid-template-columns: 1fr;
614
+ }
615
+
616
+ .quick-actions {
617
+ grid-template-columns: 1fr;
618
+ }
619
+ }
620
+
621
+ /* Animations */
622
+ @keyframes fadeIn {
623
+ from { opacity: 0; transform: translateY(20px); }
624
+ to { opacity: 1; transform: translateY(0); }
625
+ }
626
+
627
+ .fade-in {
628
+ animation: fadeIn 0.5s ease-out;
629
+ }
630
+
631
+ @keyframes pulse {
632
+ 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7); }
633
+ 70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
634
+ 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
635
+ }
636
+
637
+ .pulse {
638
+ animation: pulse 2s infinite;
639
+ }
640
+
641
+ /* Scrollbar */
642
+ ::-webkit-scrollbar {
643
+ width: 8px;
644
+ }
645
+
646
+ ::-webkit-scrollbar-track {
647
+ background: rgba(30, 41, 59, 0.5);
648
+ border-radius: 10px;
649
+ }
650
+
651
+ ::-webkit-scrollbar-thumb {
652
+ background: var(--accent-cyan);
653
+ border-radius: 10px;
654
+ }
655
+
656
+ ::-webkit-scrollbar-thumb:hover {
657
+ background: #06b6d4;
658
+ }
659
+ </style>
660
+ </head>
661
+ <body>
662
+ <!-- Header -->
663
+ <header>
664
+ <div class="container nav-container">
665
+ <div class="logo">
666
+ <i class="fas fa-gem logo-icon"></i>
667
+ <span>Diamond AI</span>
668
+ </div>
669
+
670
+ <div class="nav-links">
671
+ <a href="#" class="nav-link active">
672
+ <i class="fas fa-robot"></i>
673
+ <span>AI Assistant</span>
674
+ </a>
675
+ <a href="#" class="nav-link">
676
+ <i class="fas fa-wallet"></i>
677
+ <span>Wallet</span>
678
+ </a>
679
+ <a href="#" class="nav-link">
680
+ <i class="fas fa-chart-line"></i>
681
+ <span>Analytics</span>
682
+ </a>
683
+ <a href="#" class="nav-link">
684
+ <i class="fas fa-coins"></i>
685
+ <span>Earn</span>
686
+ </a>
687
+ <a href="#" class="nav-link">
688
+ <i class="fas fa-book"></i>
689
+ <span>Docs</span>
690
+ </a>
691
+ </div>
692
+
693
+ <div class="wallet-section">
694
+ <div class="balance-display">
695
+ <i class="fas fa-gem diamond-icon"></i>
696
+ <span id="balance">0.00</span>
697
+ <span>DIAMOND</span>
698
+ </div>
699
+ <button id="connectWallet" class="connect-btn">
700
+ <i class="fas fa-plug"></i>
701
+ <span>Connect Wallet</span>
702
+ </button>
703
+ </div>
704
+ </div>
705
+ </header>
706
+
707
+ <!-- Hero Section -->
708
+ <section class="hero">
709
+ <div class="container">
710
+ <h1 class="fade-in">Inteligencia Artificial Descentralizada con 💎 DIAMANTE</h1>
711
+ <p class="fade-in">La primera plataforma de IA que recompensa a los usuarios con tokens DIAMANTE en Solana. Genera contenido, entrena modelos y gana recompensas.</p