Hugging Face's logo

Spaces:
victor
/
deepsite-gallery
Running

App Files Community
33

Upload index (12).html

#26
by Ddccvczsed - opened
base: refs/heads/main
←
from: refs/pr/26
Discussion Files changed
+1225
-0
Files changed (1) hide show
  1. index (12).html +1225 -0
index (12).html ADDED
@@ -0,0 +1,1225 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TRONIX Mining | Next-Gen Cloud Mining</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ neon: {
15
+ primary: '#00f0ff',
16
+ secondary: '#ff00e4',
17
+ tertiary: '#ffcc00',
18
+ },
19
+ tron: {
20
+ dark: '#0a0a1a',
21
+ mid: '#161635',
22
+ light: '#242450',
23
+ highlight: '#00ff88',
24
+ },
25
+ cyber: {
26
+ bg: '#0a0a1a',
27
+ card: '#161635',
28
+ border: '#242450',
29
+ text: '#e0e0ff',
30
+ }
31
+ },
32
+ fontFamily: {
33
+ 'sans': ['"Exo 2"', 'sans-serif'],
34
+ },
35
+ animation: {
36
+ 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
37
+ 'float': 'float 6s ease-in-out infinite',
38
+ 'gradient-x': 'gradient-x 8s ease infinite',
39
+ 'neon-glow': 'neon-glow 2s linear infinite',
40
+ 'scanline': 'scanline 8s linear infinite',
41
+ },
42
+ keyframes: {
43
+ float: {
44
+ '0%, 100%': { transform: 'translateY(0)' },
45
+ '50%': { transform: 'translateY(-10px)' },
46
+ },
47
+ 'gradient-x': {
48
+ '0%, 100%': {
49
+ 'background-size':'200% 200%',
50
+ 'background-position': 'left center'
51
+ },
52
+ '50%': {
53
+ 'background-size':'200% 200%',
54
+ 'background-position': 'right center'
55
+ }
56
+ },
57
+ 'neon-glow': {
58
+ '0%, 100%': {
59
+ 'text-shadow': '0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 15px #00f0ff',
60
+ 'opacity': '1'
61
+ },
62
+ '50%': {
63
+ 'text-shadow': '0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff',
64
+ 'opacity': '0.8'
65
+ }
66
+ },
67
+ 'scanline': {
68
+ '0%': { 'background-position': '0 -100vh' },
69
+ '100%': { 'background-position': '0 100vh' },
70
+ }
71
+ }
72
+ }
73
+ }
74
+ }
75
+ </script>
76
+ <style>
77
+ @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&display=swap');
78
+
79
+ body {
80
+ font-family: 'Exo 2', sans-serif;
81
+ background-color: #0a0a1a;
82
+ color: #e0e0ff;
83
+ background-image:
84
+ linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
85
+ linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
86
+ background-size: 40px 40px;
87
+ position: relative;
88
+ overflow-x: hidden;
89
+ }
90
+
91
+ body::before {
92
+ content: '';
93
+ position: fixed;
94
+ top: 0;
95
+ left: 0;
96
+ width: 100%;
97
+ height: 100%;
98
+ pointer-events: none;
99
+ background: linear-gradient(
100
+ to bottom,
101
+ rgba(0, 240, 255, 0.1) 0%,
102
+ transparent 5%,
103
+ transparent 95%,
104
+ rgba(255, 0, 228, 0.1) 100%
105
+ );
106
+ z-index: -1;
107
+ }
108
+
109
+ .cyber-card {
110
+ background-color: rgba(22, 22, 53, 0.8);
111
+ border: 1px solid #242450;
112
+ backdrop-filter: blur(10px);
113
+ border-radius: 8px;
114
+ transition: all 0.3s ease;
115
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
116
+ }
117
+
118
+ .cyber-card:hover {
119
+ transform: translateY(-5px);
120
+ box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
121
+ border-color: #00f0ff;
122
+ }
123
+
124
+ .progress-bar {
125
+ height: 10px;
126
+ border-radius: 5px;
127
+ background: rgba(36, 36, 80, 0.5);
128
+ overflow: hidden;
129
+ }
130
+
131
+ .progress-fill {
132
+ height: 100%;
133
+ border-radius: 5px;
134
+ background: linear-gradient(90deg, #00ff88 0%, #00f0ff 100%);
135
+ transition: width 0.5s ease;
136
+ position: relative;
137
+ overflow: hidden;
138
+ }
139
+
140
+ .progress-fill::after {
141
+ content: '';
142
+ position: absolute;
143
+ top: 0;
144
+ left: 0;
145
+ right: 0;
146
+ bottom: 0;
147
+ background: linear-gradient(
148
+ to right,
149
+ rgba(255, 255, 255, 0) 0%,
150
+ rgba(255, 255, 255, 0.3) 50%,
151
+ rgba(255, 255, 255, 0) 100%
152
+ );
153
+ animation: shimmer 2s infinite;
154
+ }
155
+
156
+ @keyframes shimmer {
157
+ 0% { transform: translateX(-100%); }
158
+ 100% { transform: translateX(100%); }
159
+ }
160
+
161
+ .coin-animation {
162
+ animation: float 6s ease-in-out infinite;
163
+ }
164
+
165
+ .nav-link {
166
+ position: relative;
167
+ }
168
+
169
+ .nav-link::after {
170
+ content: '';
171
+ position: absolute;
172
+ width: 0;
173
+ height: 2px;
174
+ bottom: -2px;
175
+ left: 0;
176
+ background-color: #00f0ff;
177
+ transition: width 0.3s ease;
178
+ }
179
+
180
+ .nav-link:hover::after {
181
+ width: 100%;
182
+ }
183
+
184
+ .status-dot {
185
+ width: 10px;
186
+ height: 10px;
187
+ border-radius: 50%;
188
+ display: inline-block;
189
+ margin-right: 5px;
190
+ }
191
+
192
+ .status-active {
193
+ background-color: #00ff88;
194
+ box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
195
+ }
196
+
197
+ .status-pending {
198
+ background-color: #ffcc00;
199
+ box-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
200
+ }
201
+
202
+ .disc-outer {
203
+ width: 100px;
204
+ height: 100px;
205
+ border-radius: 50%;
206
+ background: conic-gradient(
207
+ #00ff88 0% 25%,
208
+ #00f0ff 25% 50%,
209
+ #ff00e4 50% 75%,
210
+ #ffcc00 75% 100%
211
+ );
212
+ display: flex;
213
+ justify-content: center;
214
+ align-items: center;
215
+ animation: rotate 10s linear infinite;
216
+ }
217
+
218
+ .disc-inner {
219
+ width: 70px;
220
+ height: 70px;
221
+ border-radius: 50%;
222
+ background-color: #161635;
223
+ display: flex;
224
+ justify-content: center;
225
+ align-items: center;
226
+ font-size: 24px;
227
+ color: #00f0ff;
228
+ }
229
+
230
+ @keyframes rotate {
231
+ from { transform: rotate(0deg); }
232
+ to { transform: rotate(360deg); }
233
+ }
234
+
235
+ .hexagon {
236
+ width: 60px;
237
+ height: 34.64px;
238
+ background-color: #00f0ff;
239
+ position: relative;
240
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
241
+ margin: 17.32px 0;
242
+ display: flex;
243
+ justify-content: center;
244
+ align-items: center;
245
+ color: #0a0a1a;
246
+ font-weight: bold;
247
+ box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
248
+ }
249
+
250
+ .cyber-grid {
251
+ position: absolute;
252
+ top: 0;
253
+ left: 0;
254
+ width: 100%;
255
+ height: 100%;
256
+ background-image:
257
+ linear-gradient(#242450 1px, transparent 1px),
258
+ linear-gradient(90deg, #242450 1px, transparent 1px);
259
+ background-size: 20px 20px;
260
+ opacity: 0.5;
261
+ pointer-events: none;
262
+ }
263
+
264
+ .glow-text {
265
+ animation: neon-glow 2s linear infinite;
266
+ }
267
+
268
+ .scanlines {
269
+ position: absolute;
270
+ top: 0;
271
+ left: 0;
272
+ width: 100%;
273
+ height: 100%;
274
+ background: linear-gradient(
275
+ rgba(0, 240, 255, 0.05) 50%,
276
+ transparent 50%
277
+ );
278
+ background-size: 100% 4px;
279
+ pointer-events: none;
280
+ animation: scanline 8s linear infinite;
281
+ }
282
+ </style>
283
+ </head>
284
+ <body class="min-h-screen overflow-x-hidden bg-tron-dark">
285
+ <!-- Header/Navigation -->
286
+ <header class="sticky top-0 z-50 bg-tron-dark border-b border-tron-light shadow-lg">
287
+ <div class="container mx-auto px-4 py-3">
288
+ <div class="flex justify-between items-center">
289
+ <div class="flex items-center space-x-3">
290
+ <div class="hexagon">
291
+ <i class="fas fa-bolt text-xl"></i>
292
+ </div>
293
+ <span class="text-2xl font-extrabold tracking-wider">
294
+ <span class="text-neon-primary">TRON</span>
295
+ <span class="text-neon-secondary">MINER</span>
296
+ <span class="text-xs text-neon-primary bg-tron-light px-2 py-1 rounded-full ml-2 align-middle">PRO</span>
297
+ </span>
298
+ </div>
299
+
300
+ <!-- Desktop Navigation -->
301
+ <nav class="hidden lg:flex space-x-8 items-center">
302
+ <a href="#" class="nav-link font-medium text-neon-primary">DASHBOARD</a>
303
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary">INVEST</a>
304
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary">EARNINGS</a>
305
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary">WITHDRAW</a>
306
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary">REFERRALS</a>
307
+ <div class="flex items-center space-x-4 ml-4">
308
+ <div class="relative group">
309
+ <div class="w-10 h-10 rounded-full bg-neon-primary flex items-center justify-center cursor-pointer" style="box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);">
310
+ <span class="font-bold text-tron-dark">JD</span>
311
+ </div>
312
+ <div class="absolute right-0 mt-2 w-56 bg-tron-light rounded-lg shadow-xl py-2 hidden group-hover:block border border-tron-light">
313
+ <div class="px-4 py-2 border-b border-tron-light">
314
+ <p class="font-medium text-neon-primary">John Doe</p>
315
+ <p class="text-xs text-gray-400">PREMIUM MEMBER</p>
316
+ </div>
317
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-tron-mid hover:text-neon-primary">
318
+ <i class="fas fa-user mr-2"></i>Profile
319
+ </a>
320
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-tron-mid hover:text-neon-primary">
321
+ <i class="fas fa-cog mr-2"></i>Settings
322
+ </a>
323
+ <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-tron-mid hover:text-neon-primary">
324
+ <i class="fas fa-headset mr-2"></i>Support
325
+ </a>
326
+ <div class="border-t border-tron-light mt-2 pt-2">
327
+ <a href="#" class="block px-4 py-2 text-neon-secondary hover:bg-tron-mid">
328
+ <i class="fas fa-sign-out-alt mr-2"></i>Logout
329
+ </a>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </nav>
335
+
336
+ <!-- Mobile Menu Button -->
337
+ <button id="mobile-menu-button" class="lg:hidden text-neon-primary focus:outline-none">
338
+ <i class="fas fa-bars text-2xl"></i>
339
+ </button>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Mobile Menu -->
344
+ <div id="mobile-menu" class="mobile-menu hidden lg:hidden bg-tron-dark absolute w-full px-4 pb-6 z-40 border-b border-tron-light">
345
+ <div class="flex flex-col space-y-4 py-4">
346
+ <a href="#" class="nav-link font-medium text-neon-primary py-2">DASHBOARD</a>
347
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary py-2">INVEST</a>
348
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary py-2">EARNINGS</a>
349
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary py-2">WITHDRAW</a>
350
+ <a href="#" class="nav-link font-medium text-gray-400 hover:text-neon-primary py-2">REFERRALS</a>
351
+ <div class="pt-4 border-t border-tron-light">
352
+ <div class="flex items-center space-x-4">
353
+ <div class="relative">
354
+ <div class="w-10 h-10 rounded-full bg-neon-primary flex items-center justify-center" style="box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);">
355
+ <span class="font-bold text-tron-dark">JD</span>
356
+ </div>
357
+ </div>
358
+ <div>
359
+ <p class="font-medium">John Doe</p>
360
+ <p class="text-sm text-gray-400">Premium Member</p>
361
+ </div>
362
+ </div>
363
+ <button class="w-full mt-4 bg-neon-secondary hover:bg-purple-600 px-4 py-2 rounded-lg font-medium text-white">
364
+ <i class="fas fa-sign-out-alt mr-2"></i>Logout
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </header>
370
+
371
+ <main class="container mx-auto px-4 py-8 relative">
372
+ <div class="cyber-grid"></div>
373
+ <div class="scanlines"></div>
374
+
375
+ <!-- Dashboard Overview -->
376
+ <section class="mb-12">
377
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
378
+ <div>
379
+ <h1 class="text-3xl md:text-4xl font-bold mb-1">WELCOME BACK, <span class="text-neon-primary">JOHN</span></h1>
380
+ <p class="text-gray-400 text-sm font-mono tracking-wider">USER ID: #A7F9B3C</p>
381
+ </div>
382
+ <div class="flex space-x-3 mt-4 md:mt-0">
383
+ <button class="bg-tron-mid hover:bg-tron-light border border-tron-light hover:border-neon-primary px-4 py-2 rounded-lg font-medium flex items-center space-x-2">
384
+ <i class="fas fa-qrcode text-neon-primary"></i>
385
+ <span>RECEIVE TRX</span>
386
+ </button>
387
+ <button class="bg-neon-secondary hover:bg-purple-600 px-4 py-2 rounded-lg font-medium flex items-center space-x-2">
388
+ <i class="fas fa-wallet"></i>
389
+ <span>WITHDRAW</span>
390
+ </button>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Balance Card -->
395
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8">
396
+ <!-- Main Balance Card -->
397
+ <div class="cyber-card p-6 rounded-xl col-span-1 lg:col-span-2 relative overflow-hidden">
398
+ <div class="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-neon-primary opacity-10 blur-xl"></div>
399
+ <div class="flex flex-col md:flex-row md:justify-between">
400
+ <div class="mb-6 md:mb-0">
401
+ <p class="text-gray-400 mb-1 tracking-wider">TOTAL BALANCE</p>
402
+ <div class="flex items-end">
403
+ <h2 class="text-3xl md:text-4xl font-bold font-mono">1,245.75 <span class="text-neon-primary">TRX</span></h2>
404
+ <span class="ml-2 text-green-400 text-sm mb-1 font-mono">+2.8%</span>
405
+ </div>
406
+ <p class="text-gray-400 mt-1 font-mono">≈ $124.58 USD</p>
407
+ </div>
408
+ <div class="flex flex-col items-end">
409
+ <button class="bg-neon-primary hover:bg-cyan-600 px-6 py-2 rounded-lg font-medium mb-3 text-tron-dark font-bold">
410
+ DEPOSIT
411
+ </button>
412
+ <div class="flex space-x-2">
413
+ <button class="bg-tron-mid hover:bg-tron-light border border-tron-light hover:border-neon-primary px-4 py-1 rounded text-sm">
414
+ BUY TRX
415
+ </button>
416
+ <button class="bg-tron-mid hover:bg-tron-light border border-tron-light hover:border-neon-primary px-4 py-1 rounded text-sm">
417
+ SWAP
418
+ </button>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Balance Chart Placeholder -->
424
+ <div class="mt-8 h-24 flex items-center justify-center">
425
+ <div class="w-full h-16 relative">
426
+ <!-- This would be replaced with a real chart in production -->
427
+ <div class="absolute left-0 bottom-0 w-full h-full">
428
+ <div class="absolute left-0 bottom-0 w-full h-1/4 bg-neon-primary opacity-20 rounded-t"></div>
429
+ <div class="absolute left-0 bottom-0 w-3/4 h-1/2 bg-neon-primary opacity-30 rounded-t"></div>
430
+ <div class="absolute left-0 bottom-0 w-1/2 h-3/4 bg-neon-primary opacity-50 rounded-t"></div>
431
+ <div class="absolute left-0 bottom-0 w-1/4 h-full bg-neon-secondary rounded-t"></div>
432
+ </div>
433
+ <div class="absolute left-0 bottom-0 w-full h-px bg-tron-light"></div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Mining Summary -->
439
+ <div class="cyber-card p-6 rounded-xl relative overflow-hidden">
440
+ <div class="absolute -top-10 -right-10 w-20 h-20 rounded-full bg-neon-secondary opacity-10 blur-xl"></div>
441
+ <div class="flex justify-between items-center mb-6">
442
+ <div>
443
+ <p class="text-gray-400 mb-1 tracking-wider">MINING STATUS</p>
444
+ <h3 class="text-xl font-bold">ACTIVE <span class="status-dot status-active"></span></h3>
445
+ </div>
446
+ <div class="w-12 h-12 rounded-full bg-tron-light flex items-center justify-center" style="box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);">
447
+ <i class="fas fa-bolt text-neon-primary text-xl"></i>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="space-y-2">
452
+ <div class="flex justify-between font-mono">
453
+ <span class="text-gray-400">HASH RATE</span>
454
+ <span class="font-medium">1,245 GH/S</span>
455
+ </div>
456
+ <div class="flex justify-between font-mono">
457
+ <span class="text-gray-400">DAILY EARNINGS</span>
458
+ <span class="font-medium text-neon-primary">12.45 TRX</span>
459
+ </div>
460
+ <div class="flex justify-between font-mono">
461
+ <span class="text-gray-400">NEXT PAYOUT</span>
462
+ <span class="font-medium">3H 24M</span>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="mt-4">
467
+ <div class="flex justify-between mb-2 text-sm font-mono">
468
+ <span>MINING PROGRESS</span>
469
+ <span>65%</span>
470
+ </div>
471
+ <div class="progress-bar">
472
+ <div class="progress-fill" style="width: 65%"></div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Stats Grid -->
479
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
480
+ <!-- Daily Earnings -->
481
+ <div class="cyber-card p-5 rounded-xl flex justify-between items-center relative overflow-hidden">
482
+ <div class="absolute -top-10 -left-10 w-20 h-20 rounded-full bg-neon-primary opacity-10 blur-xl"></div>
483
+ <div>
484
+ <p class="text-gray-400 mb-1 tracking-wider">DAILY EARNINGS</p>
485
+ <h3 class="text-xl font-bold font-mono">12.45 <span class="text-neon-primary">TRX</span></h3>
486
+ <p class="text-green-400 text-sm font-mono">≈ $1.25</p>
487
+ </div>
488
+ <div class="w-12 h-12 rounded-full bg-green-900 bg-opacity-20 flex items-center justify-center border border-green-400">
489
+ <i class="fas fa-chart-line text-green-400 text-xl"></i>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Active Investments -->
494
+ <div class="cyber-card p-5 rounded-xl flex justify-between items-center relative overflow-hidden">
495
+ <div class="absolute -top-10 -left-10 w-20 h-20 rounded-full bg-neon-secondary opacity-10 blur-xl"></div>
496
+ <div>
497
+ <p class="text-gray-400 mb-1 tracking-wider">ACTIVE INVESTMENTS</p>
498
+ <h3 class="text-xl font-bold font-mono">3</h3>
499
+ <p class="text-blue-300 text-sm font-mono">1,000 TRX TOTAL</p>
500
+ </div>
501
+ <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-20 flex items-center justify-center border border-blue-300">
502
+ <i class="fas fa-coins text-blue-300 text-xl"></i>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Referral Earnings -->
507
+ <div class="cyber-card p-5 rounded-xl flex justify-between items-center relative overflow-hidden">
508
+ <div class="absolute -top-10 -left-10 w-20 h-20 rounded-full bg-neon-secondary opacity-10 blur-xl"></div>
509
+ <div>
510
+ <p class="text-gray-400 mb-1 tracking-wider">REFERRAL EARNINGS</p>
511
+ <h3 class="text-xl font-bold font-mono">45.20 <span class="text-neon-primary">TRX</span></h3>
512
+ <p class="text-purple-400 text-sm font-mono">5 ACTIVE REFERRALS</p>
513
+ </div>
514
+ <div class="w-12 h-12 rounded-full bg-purple-900 bg-opacity-20 flex items-center justify-center border border-purple-400">
515
+ <i class="fas fa-users text-purple-400 text-xl"></i>
516
+ </div>
517
+ </div>
518
+
519
+ <!-- Total Mined -->
520
+ <div class="cyber-card p-5 rounded-xl flex justify-between items-center relative overflow-hidden">
521
+ <div class="absolute -top-10 -left-10 w-20 h-20 rounded-full bg-neon-primary opacity-10 blur-xl"></div>
522
+ <div>
523
+ <p class="text-gray-400 mb-1 tracking-wider">TOTAL MINED</p>
524
+ <h3 class="text-xl font-bold font-mono">342.15 <span class="text-neon-primary">TRX</span></h3>
525
+ <p class="text-yellow-400 text-sm font-mono">ALL TIME</p>
526
+ </div>
527
+ <div class="w-12 h-12 rounded-full bg-yellow-900 bg-opacity-20 flex items-center justify-center border border-yellow-400">
528
+ <i class="fas fa-digging text-yellow-400 text-xl"></i>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </section>
533
+
534
+ <!-- Investment Plans -->
535
+ <section class="mb-12">
536
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
537
+ <div>
538
+ <h1 class="text-3xl font-bold mb-2 glow-text">INVESTMENT PLANS</h1>
539
+ <p class="text-gray-400 font-mono">CHOOSE A PLAN THAT FITS YOUR INVESTMENT GOALS</p>
540
+ </div>
541
+ <div class="mt-4 md:mt-0 flex space-x-3">
542
+ <div class="relative">
543
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
544
+ <i class="fas fa-coins text-gray-400"></i>
545
+ </div>
546
+ <select class="bg-tron-light border border-tron-light text-white rounded-lg px-10 py-2 focus:outline-none focus:ring-1 focus:ring-neon-primary font-mono">
547
+ <option>TRX</option>
548
+ <option>USDT</option>
549
+ <option>BTC</option>
550
+ </select>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
556
+ <!-- Starter Plan -->
557
+ <div class="cyber-card p-6 rounded-xl relative overflow-hidden group">
558
+ <div class="absolute -top-10 -right-10 w-20 h-20 rounded-full bg-blue-500 opacity-10 blur-xl group-hover:opacity-20 transition-opacity"></div>
559
+ <div class="text-center mb-4">
560
+ <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-blue-400 bg-opacity-20 flex items-center justify-center border-2 border-blue-400">
561
+ <i class="fas fa-rocket text-blue-400 text-xl"></i>
562
+ </div>
563
+ <h3 class="text-xl font-bold text-blue-400">STARTER</h3>
564
+ <p class="text-gray-400 text-sm font-mono">FOR BEGINNERS</p>
565
+ </div>
566
+ <div class="text-center mb-6 px-4">
567
+ <div class="inline-block px-4 py-2 bg-blue-900 bg-opacity-20 rounded-full border border-blue-400">
568
+ <span class="text-2xl font-bold font-mono">1.8%</span>
569
+ <span class="text-gray-400 font-mono">DAILY</span>
570
+ </div>
571
+ <p class="text-sm text-gray-400 mt-2 font-mono">FOR 15 DAYS (27% TOTAL)</p>
572
+ </div>
573
+ <div class="mb-6">
574
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
575
+ <span class="text-gray-400">MIN:</span>
576
+ <span class="font-medium">100 TRX</span>
577
+ </div>
578
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
579
+ <span class="text-gray-400">MAX:</span>
580
+ <span class="font-medium">1,000 TRX</span>
581
+ </div>
582
+ <div class="flex justify-between items-center py-2 font-mono">
583
+ <span class="text-gray-400">STATUS:</span>
584
+ <span class="text-green-400">AVAILABLE</span>
585
+ </div>
586
+ </div>
587
+ <button class="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-bold mt-4 invest-button border border-blue-400" data-plan="starter">
588
+ INVEST IN STARTER
589
+ </button>
590
+ </div>
591
+
592
+ <!-- Advanced Plan -->
593
+ <div class="cyber-card p-6 rounded-xl relative overflow-hidden group">
594
+ <div class="absolute -top-10 -right-10 w-20 h-20 rounded-full bg-green-500 opacity-10 blur-xl group-hover:opacity-20 transition-opacity"></div>
595
+ <div class="text-center mb-4">
596
+ <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-green-400 bg-opacity-20 flex items-center justify-center border-2 border-green-400">
597
+ <i class="fas fa-chart-line text-green-400 text-xl"></i>
598
+ </div>
599
+ <h3 class="text-xl font-bold text-green-400">ADVANCED</h3>
600
+ <p class="text-gray-400 text-sm font-mono">POPULAR CHOICE</p>
601
+ </div>
602
+ <div class="text-center mb-6 px-4">
603
+ <div class="inline-block px-4 py-2 bg-green-900 bg-opacity-20 rounded-full border border-green-400">
604
+ <span class="text-2xl font-bold font-mono">2.2%</span>
605
+ <span class="text-gray-400 font-mono">DAILY</span>
606
+ </div>
607
+ <p class="text-sm text-gray-400 mt-2 font-mono">FOR 20 DAYS (44% TOTAL)</p>
608
+ </div>
609
+ <div class="mb-6">
610
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
611
+ <span class="text-gray-400">MIN:</span>
612
+ <span class="font-medium">1,000 TRX</span>
613
+ </div>
614
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
615
+ <span class="text-gray-400">MAX:</span>
616
+ <span class="font-medium">5,000 TRX</span>
617
+ </div>
618
+ <div class="flex justify-between items-center py-2 font-mono">
619
+ <span class="text-gray-400">STATUS:</span>
620
+ <span class="text-green-400">AVAILABLE</span>
621
+ </div>
622
+ </div>
623
+ <button class="w-full bg-green-600 hover:bg-green-700 py-3 rounded-lg font-bold mt-4 invest-button border border-green-400" data-plan="advanced">
624
+ INVEST IN ADVANCED
625
+ </button>
626
+ </div>
627
+
628
+ <!-- Professional Plan -->
629
+ <div class="cyber-card p-6 rounded-xl relative overflow-hidden group border-2 border-yellow-400">
630
+ <div class="absolute -top-10 -right-10 w-20 h-20 rounded-full bg-yellow-500 opacity-10 blur-xl group-hover:opacity-20 transition-opacity"></div>
631
+ <div class="absolute -top-3 right-4 bg-yellow-400 text-tron-dark px-3 py-1 rounded-full text-xs font-bold border border-yellow-400" style="box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);">
632
+ RECOMMENDED
633
+ </div>
634
+ <div class="text-center mb-4">
635
+ <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-yellow-400 bg-opacity-20 flex items-center justify-center border-2 border-yellow-400">
636
+ <i class="fas fa-crown text-yellow-400 text-xl"></i>
637
+ </div>
638
+ <h3 class="text-xl font-bold text-yellow-400">PROFESSIONAL</h3>
639
+ <p class="text-gray-400 text-sm font-mono">BEST VALUE</p>
640
+ </div>
641
+ <div class="text-center mb-6 px-4">
642
+ <div class="inline-block px-4 py-2 bg-yellow-900 bg-opacity-20 rounded-full border border-yellow-400">
643
+ <span class="text-2xl font-bold font-mono">2.8%</span>
644
+ <span class="text-gray-400 font-mono">DAILY</span>
645
+ </div>
646
+ <p class="text-sm text-gray-400 mt-2 font-mono">FOR 25 DAYS (70% TOTAL)</p>
647
+ </div>
648
+ <div class="mb-6">
649
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
650
+ <span class="text-gray-400">MIN:</span>
651
+ <span class="font-medium">5,000 TRX</span>
652
+ </div>
653
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
654
+ <span class="text-gray-400">MAX:</span>
655
+ <span class="font-medium">20,000 TRX</span>
656
+ </div>
657
+ <div class="flex justify-between items-center py-2 font-mono">
658
+ <span class="text-gray-400">STATUS:</span>
659
+ <span class="text-green-400">AVAILABLE</span>
660
+ </div>
661
+ </div>
662
+ <button class="w-full bg-yellow-500 hover:bg-yellow-600 py-3 rounded-lg font-bold text-tron-dark mt-4 invest-button border border-yellow-400" data-plan="professional">
663
+ INVEST IN PROFESSIONAL
664
+ </button>
665
+ </div>
666
+
667
+ <!-- VIP Plan -->
668
+ <div class="cyber-card p-6 rounded-xl relative overflow-hidden group">
669
+ <div class="absolute -top-10 -right-10 w-20 h-20 rounded-full bg-purple-500 opacity-10 blur-xl group-hover:opacity-20 transition-opacity"></div>
670
+ <div class="text-center mb-4">
671
+ <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-purple-400 bg-opacity-20 flex items-center justify-center border-2 border-purple-400">
672
+ <i class="fas fa-gem text-purple-400 text-xl"></i>
673
+ </div>
674
+ <h3 class="text-xl font-bold text-purple-400">VIP</h3>
675
+ <p class="text-gray-400 text-sm font-mono">EXCLUSIVE BENEFITS</p>
676
+ </div>
677
+ <div class="text-center mb-6 px-4">
678
+ <div class="inline-block px-4 py-2 bg-purple-900 bg-opacity-20 rounded-full border border-purple-400">
679
+ <span class="text-2xl font-bold font-mono">3.5%</span>
680
+ <span class="text-gray-400 font-mono">DAILY</span>
681
+ </div>
682
+ <p class="text-sm text-gray-400 mt-2 font-mono">FOR 30 DAYS (105% TOTAL)</p>
683
+ </div>
684
+ <div class="mb-6">
685
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
686
+ <span class="text-gray-400">MIN:</span>
687
+ <span class="font-medium">20,000 TRX</span>
688
+ </div>
689
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
690
+ <span class="text-gray-400">MAX:</span>
691
+ <span class="font-medium">100,000 TRX</span>
692
+ </div>
693
+ <div class="flex justify-between items-center py-2 font-mono">
694
+ <span class="text-gray-400">STATUS:</span>
695
+ <span class="text-green-400">AVAILABLE</span>
696
+ </div>
697
+ </div>
698
+ <button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-bold mt-4 invest-button border border-purple-400" data-plan="vip">
699
+ INVEST IN VIP
700
+ </button>
701
+ </div>
702
+ </div>
703
+ </section>
704
+
705
+ <!-- Mining Activity -->
706
+ <section class="mb-12">
707
+ <div class="flex justify-between items-center mb-6">
708
+ <div>
709
+ <h1 class="text-3xl font-bold glow-text">MINING ACTIVITY</h1>
710
+ <p class="text-gray-400 font-mono">REAL-TIME MINING STATISTICS</p>
711
+ </div>
712
+ <div class="flex items-center space-x-2">
713
+ <span class="text-gray-400 text-sm font-mono">AUTO-CLAIM:</span>
714
+ <div class="relative inline-block w-12 mr-2 align-middle select-none transform transition-all duration-200">
715
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-200"/>
716
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-tron-light cursor-pointer transition-all duration-200"></label>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <div class="cyber-card p-6 rounded-xl">
722
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
723
+ <!-- Mining Stats -->
724
+ <div>
725
+ <h3 class="text-xl font-bold mb-4">MINING STATISTICS</h3>
726
+ <div class="space-y-4">
727
+ <div>
728
+ <div class="flex justify-between mb-1 font-mono">
729
+ <span class="text-gray-400">HASHRATE</span>
730
+ <span class="font-medium">1,245 GH/S</span>
731
+ </div>
732
+ <div class="w-full bg-tron-light rounded-full h-2.5">
733
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 65%;"></div>
734
+ </div>
735
+ </div>
736
+ <div>
737
+ <div class="flex justify-between mb-1 font-mono">
738
+ <span class="text-gray-400">MINING EFFICIENCY</span>
739
+ <span class="font-medium">82%</span>
740
+ </div>
741
+ <div class="w-full bg-tron-light rounded-full h-2.5">
742
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 82%;"></div>
743
+ </div>
744
+ </div>
745
+ <div>
746
+ <div class="flex justify-between mb-1 font-mono">
747
+ <span class="text-gray-400">NETWORK DIFFICULTY</span>
748
+ <span class="font-medium">HIGH</span>
749
+ </div>
750
+ <div class="w-full bg-tron-light rounded-full h-2.5">
751
+ <div class="bg-red-500 h-2.5 rounded-full" style="width: 75%;"></div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <div class="grid grid-cols-2 gap-4 mt-6">
757
+ <div class="bg-tron-light bg-opacity-50 p-4 rounded-lg border border-tron-light">
758
+ <p class="text-gray-400 text-sm font-mono">MINED TODAY</p>
759
+ <p class="text-xl font-bold font-mono">12.45 TRX</p>
760
+ </div>
761
+ <div class="bg-tron-light bg-opacity-50 p-4 rounded-lg border border-tron-light">
762
+ <p class="text-gray-400 text-sm font-mono">NEXT PAYOUT</p>
763
+ <p class="text-xl font-bold font-mono">3H 24M</p>
764
+ </div>
765
+ <div class="bg-tron-light bg-opacity-50 p-4 rounded-lg border border-tron-light">
766
+ <p class="text-gray-400 text-sm font-mono">DAILY PROFIT</p>
767
+ <p class="text-xl font-bold text-green-400 font-mono">1.8%</p>
768
+ </div>
769
+ <div class="bg-tron-light bg-opacity-50 p-4 rounded-lg border border-tron-light">
770
+ <p class="text-gray-400 text-sm font-mono">EST. MONTHLY</p>
771
+ <p class="text-xl font-bold font-mono">372.75 TRX</p>
772
+ </div>
773
+ </div>
774
+ </div>
775
+
776
+ <!-- Mining Visualization -->
777
+ <div>
778
+ <h3 class="text-xl font-bold mb-4">MINING VISUALIZATION</h3>
779
+ <div class="relative h-full min-h-64 bg-tron-light rounded-xl border border-tron-light overflow-hidden" style="box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.1);">
780
+ <div class="absolute inset-0">
781
+ <div class="cyber-grid"></div>
782
+ </div>
783
+ <div class="absolute inset-0 flex items-center justify-center">
784
+ <div class="disc-outer">
785
+ <div class="disc-inner">
786
+ <i class="fas fa-bolt"></i>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ <!-- Floating TRX coins -->
791
+ <div class="absolute top-1/4 left-1/3 text-neon-primary coin-animation">
792
+ <i class="fas fa-coins text-3xl"></i>
793
+ </div>
794
+ <div class="absolute top-1/3 right-1/4 text-neon-secondary coin-animation" style="animation-delay: 1s;">
795
+ <i class="fas fa-coins text-2xl"></i>
796
+ </div>
797
+ <div class="absolute top-1/2 left-1/4 text-neon-tertiary coin-animation" style="animation-delay: 2s;">
798
+ <i class="fas fa-coins text-xl"></i>
799
+ </div>
800
+ </div>
801
+ <div class="mt-4 flex justify-center">
802
+ <button class="bg-neon-secondary hover:bg-purple-600 px-6 py-2 rounded-lg font-medium border border-transparent hover:border-neon-secondary">
803
+ <i class="fas fa-bolt mr-2"></i>
804
+ <span>BOOST MINING</span>
805
+ </button>
806
+ </div>
807
+ </div>
808
+ </div>
809
+ </div>
810
+ </section>
811
+
812
+ <!-- Active Investments -->
813
+ <section class="mb-12">
814
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
815
+ <div>
816
+ <h1 class="text-3xl font-bold glow-text">ACTIVE INVESTMENTS</h1>
817
+ <p class="text-gray-400 font-mono">YOUR CURRENTLY RUNNING INVESTMENTS</p>
818
+ </div>
819
+ <div class="mt-4 md:mt-0">
820
+ <button class="bg-tron-light hover:bg-tron-mid px-4 py-2 rounded-lg font-medium border border-tron-light hover:border-neon-primary">
821
+ VIEW HISTORY
822
+ </button>
823
+ </div>
824
+ </div>
825
+
826
+ <div class="cyber-card rounded-xl overflow-hidden">
827
+ <div class="overflow-x-auto">
828
+ <table class="w-full">
829
+ <thead class="bg-tron-light">
830
+ <tr>
831
+ <th class="py-4 px-6 text-left font-mono">PLAN</th>
832
+ <th class="py-4 px-6 text-left font-mono">AMOUNT</th>
833
+ <th class="py-4 px-6 text-left font-mono">DAILY PROFIT</th>
834
+ <th class="py-4 px-6 text-left font-mono">TOTAL EARNED</th>
835
+ <th class="py-4 px-6 text-left font-mono">PROGRESS</th>
836
+ <th class="py-4 px-6 text-left font-mono">ACTIONS</th>
837
+ </tr>
838
+ </thead>
839
+ <tbody class="divide-y divide-tron-light">
840
+ <tr class="hover:bg-tron-mid group">
841
+ <td class="py-4 px-6">
842
+ <div class="flex items-center">
843
+ <div class="w-3 h-3 rounded-full bg-blue-400 mr-2 group-hover:animate-pulse"></div>
844
+ <span>STARTER</span>
845
+ </div>
846
+ </td>
847
+ <td class="py-4 px-6 font-mono">500 TRX</td>
848
+ <td class="py-4 px-6 font-mono text-green-400">9 TRX</td>
849
+ <td class="py-4 px-6 font-mono">45 TRX</td>
850
+ <td class="py-4 px-6">
851
+ <div class="flex items-center">
852
+ <div class="w-24 h-2 bg-tron-light rounded-full mr-2">
853
+ <div class="h-2 bg-blue-400 rounded-full" style="width: 33%;"></div>
854
+ </div>
855
+ <span class="text-sm font-mono">5/15 DAYS</span>
856
+ </div>
857
+ </td>
858
+ <td class="py-4 px-6">
859
+ <button class="text-blue-400 hover:text-blue-300 mr-3">
860
+ <i class="fas fa-eye"></i>
861
+ </button>
862
+ <button class="text-red-400 hover:text-red-300">
863
+ <i class="fas fa-stop-circle"></i>
864
+ </button>
865
+ </td>
866
+ </tr>
867
+ <tr class="hover:bg-tron-mid group">
868
+ <td class="py-4 px-6">
869
+ <div class="flex items-center">
870
+ <div class="w-3 h-3 rounded-full bg-green-400 mr-2 group-hover:animate-pulse"></div>
871
+ <span>ADVANCED</span>
872
+ </div>
873
+ </td>
874
+ <td class="py-4 px-6 font-mono">2,000 TRX</td>
875
+ <td class="py-4 px-6 font-mono text-green-400">44 TRX</td>
876
+ <td class="py-4 px-6 font-mono">220 TRX</td>
877
+ <td class="py-4 px-6">
878
+ <div class="flex items-center">
879
+ <div class="w-24 h-2 bg-tron-light rounded-full mr-2">
880
+ <div class="h-2 bg-green-400 rounded-full" style="width: 40%;"></div>
881
+ </div>
882
+ <span class="text-sm font-mono">8/20 DAYS</span>
883
+ </div>
884
+ </td>
885
+ <td class="py-4 px-6">
886
+ <button class="text-blue-400 hover:text-blue-300 mr-3">
887
+ <i class="fas fa-eye"></i>
888
+ </button>
889
+ <button class="text-red-400 hover:text-red-300">
890
+ <i class="fas fa-stop-circle"></i>
891
+ </button>
892
+ </td>
893
+ </tr>
894
+ <tr class="hover:bg-tron-mid group">
895
+ <td class="py-4 px-6">
896
+ <div class="flex items-center">
897
+ <div class="w-3 h-3 rounded-full bg-yellow-400 mr-2 group-hover:animate-pulse"></div>
898
+ <span>PROFESSIONAL</span>
899
+ </div>
900
+ </td>
901
+ <td class="py-4 px-6 font-mono">10,000 TRX</td>
902
+ <td class="py-4 px-6 font-mono text-green-400">280 TRX</td>
903
+ <td class="py-4 px-6 font-mono">1,400 TRX</td>
904
+ <td class="py-4 px-6">
905
+ <div class="flex items-center">
906
+ <div class="w-24 h-2 bg-tron-light rounded-full mr-2">
907
+ <div class="h-2 bg-yellow-400 rounded-full" style="width: 48%;"></div>
908
+ </div>
909
+ <span class="text-sm font-mono">12/25 DAYS</span>
910
+ </div>
911
+ </td>
912
+ <td class="py-4 px-6">
913
+ <button class="text-blue-400 hover:text-blue-300 mr-3">
914
+ <i class="fas fa-eye"></i>
915
+ </button>
916
+ <button class="text-red-400 hover:text-red-300">
917
+ <i class="fas fa-stop-circle"></i>
918
+ </button>
919
+ </td>
920
+ </tr>
921
+ </tbody>
922
+ </table>
923
+ </div>
924
+ </div>
925
+ </section>
926
+
927
+ <!-- Recent Transactions -->
928
+ <section>
929
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
930
+ <div>
931
+ <h1 class="text-3xl font-bold glow-text">RECENT TRANSACTIONS</h1>
932
+ <p class="text-gray-400 font-mono">YOUR LATEST ACCOUNT ACTIVITY</p>
933
+ </div>
934
+ <div class="mt-4 md:mt-0">
935
+ <button class="bg-tron-light hover:bg-tron-mid px-4 py-2 rounded-lg font-medium border border-tron-light hover:border-neon-primary">
936
+ FILTER <i class="fas fa-filter ml-1"></i>
937
+ </button>
938
+ </div>
939
+ </div>
940
+
941
+ <div class="space-y-3">
942
+ <!-- Deposit -->
943
+ <div class="cyber-card p-4 rounded-lg flex justify-between items-center group hover:border-neon-primary">
944
+ <div class="flex items-center space-x-4">
945
+ <div class="w-12 h-12 rounded-full bg-blue-400 bg-opacity-10 flex items-center justify-center border border-blue-400">
946
+ <i class="fas fa-arrow-down text-blue-400 text-xl"></i>
947
+ </div>
948
+ <div>
949
+ <h4 class="font-medium">TRX DEPOSIT</h4>
950
+ <p class="text-gray-400 text-sm font-mono">TODAY, 10:24 AM</p>
951
+ </div>
952
+ </div>
953
+ <div class="text-right">
954
+ <p class="text-green-400 font-medium font-mono">+500 TRX</p>
955
+ <div class="flex items-center justify-end">
956
+ <span class="status-dot status-active"></span>
957
+ <span class="text-gray-400 text-sm font-mono">COMPLETED</span>
958
+ </div>
959
+ </div>
960
+ </div>
961
+
962
+ <!-- Investment -->
963
+ <div class="cyber-card p-4 rounded-lg flex justify-between items-center group hover:border-neon-primary">
964
+ <div class="flex items-center space-x-4">
965
+ <div class="w-12 h-12 rounded-full bg-purple-400 bg-opacity-10 flex items-center justify-center border border-purple-400">
966
+ <i class="fas fa-coins text-purple-400 text-xl"></i>
967
+ </div>
968
+ <div>
969
+ <h4 class="font-medium">PROFESSIONAL PLAN</h4>
970
+ <p class="text-gray-400 text-sm font-mono">YESTERDAY, 2:15 PM</p>
971
+ </div>
972
+ </div>
973
+ <div class="text-right">
974
+ <p class="text-red-400 font-medium font-mono">-10,000 TRX</p>
975
+ <div class="flex items-center justify-end">
976
+ <span class="status-dot status-active"></span>
977
+ <span class="text-gray-400 text-sm font-mono">ACTIVE</span>
978
+ </div>
979
+ </div>
980
+ </div>
981
+
982
+ <!-- Earnings -->
983
+ <div class="cyber-card p-4 rounded-lg flex justify-between items-center group hover:border-neon-primary">
984
+ <div class="flex items-center space-x-4">
985
+ <div class="w-12 h-12 rounded-full bg-green-400 bg-opacity-10 flex items-center justify-center border border-green-400">
986
+ <i class="fas fa-coins text-green-400 text-xl"></i>
987
+ </div>
988
+ <div>
989
+ <h4 class="font-medium">DAILY EARNINGS</h4>
990
+ <p class="text-gray-400 text-sm font-mono">TODAY, 12:00 AM</p>
991
+ </div>
992
+ </div>
993
+ <div class="text-right">
994
+ <p class="text-green-400 font-medium font-mono">+280 TRX</p>
995
+ <div class="flex items-center justify-end">
996
+ <span class="status-dot status-active"></span>
997
+ <span class="text-gray-400 text-sm font-mono">FROM PROFESSIONAL</span>
998
+ </div>
999
+ </div>
1000
+ </div>
1001
+
1002
+ <!-- Referral -->
1003
+ <div class="cyber-card p-4 rounded-lg flex justify-between items-center group hover:border-neon-primary">
1004
+ <div class="flex items-center space-x-4">
1005
+ <div class="w-12 h-12 rounded-full bg-yellow-400 bg-opacity-10 flex items-center justify-center border border-yellow-400">
1006
+ <i class="fas fa-user-plus text-yellow-400 text-xl"></i>
1007
+ </div>
1008
+ <div>
1009
+ <h4 class="font-medium">REFERRAL BONUS</h4>
1010
+ <p class="text-gray-400 text-sm font-mono">YESTERDAY, 5:42 PM</p>
1011
+ </div>
1012
+ </div>
1013
+ <div class="text-right">
1014
+ <p class="text-green-400 font-medium font-mono">+50 TRX</p>
1015
+ <div class="flex items-center justify-end">
1016
+ <span class="status-dot status-active"></span>
1017
+ <span class="text-gray-400 text-sm font-mono">FROM USER</span>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+
1022
+ <!-- Pending Withdrawal -->
1023
+ <div class="cyber-card p-4 rounded-lg flex justify-between items-center group hover:border-neon-primary">
1024
+ <div class="flex items-center space-x-4">
1025
+ <div class="w-12 h-12 rounded-full bg-red-400 bg-opacity-10 flex items-center justify-center border border-red-400">
1026
+ <i class="fas fa-wallet text-red-400 text-xl"></i>
1027
+ </div>
1028
+ <div>
1029
+ <h4 class="font-medium">WITHDRAWAL REQUEST</h4>
1030
+ <p class="text-gray-400 text-sm font-mono">2 DAYS AGO, 9:10 AM</p>
1031
+ </div>
1032
+ </div>
1033
+ <div class="text-right">
1034
+ <p class="text-yellow-400 font-medium font-mono">-150 TRX</p>
1035
+ <div class="flex items-center justify-end">
1036
+ <span class="status-dot status-pending"></span>
1037
+ <span class="text-gray-400 text-sm font-mono">PROCESSING</span>
1038
+ </div>
1039
+ </div>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="mt-6 text-center">
1044
+ <button class="border border-tron-light hover:border-neon-primary px-6 py-2 rounded-lg font-medium text-neon-primary hover:text-neon-secondary">
1045
+ VIEW ALL TRANSACTIONS
1046
+ </button>
1047
+ </div>
1048
+ </section>
1049
+ </main>
1050
+
1051
+ <!-- Footer -->
1052
+ <footer class="mt-16 pt-12 pb-8 bg-tron-dark border-t border-tron-light">
1053
+ <div class="container mx-auto px-4">
1054
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
1055
+ <div>
1056
+ <div class="flex items-center space-x-3 mb-6">
1057
+ <div class="hexagon">
1058
+ <i class="fas fa-bolt text-xl"></i>
1059
+ </div>
1060
+ <span class="text-2xl font-extrabold tracking-wider">
1061
+ <span class="text-neon-primary">TRON</span>
1062
+ <span class="text-neon-secondary">MINER</span>
1063
+ </span>
1064
+ </div>
1065
+ <p class="text-gray-300 mb-4 font-mono">THE MOST ADVANCED TRX CLOUD MINING PLATFORM WITH HIGH PROFITABILITY AND RELIABLE PAYOUTS.</p>
1066
+ <div class="flex space-x-4">
1067
+ <a href="#" class="w-10 h-10 rounded-full bg-neon-primary bg-opacity-10 hover:bg-opacity-20 flex items-center justify-center border border-neon-primary" style="box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);">
1068
+ <i class="fab fa-telegram text-neon-primary"></i>
1069
+ </a>
1070
+ <a href="#" class="w-10 h-10 rounded-full bg-neon-secondary bg-opacity-10 hover:bg-opacity-20 flex items-center justify-center border border-neon-secondary" style="box-shadow: 0 0 10px rgba(255, 0, 228, 0.3);">
1071
+ <i class="fab fa-twitter"></i>
1072
+ </a>
1073
+ <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 flex items-center justify-center border border-gray-300">
1074
+ <i class="fab fa-medium text-gray-300"></i>
1075
+ </a>
1076
+ </div>
1077
+ </div>
1078
+ <div>
1079
+ <h4 class="text-lg font-bold mb-5 text-neon-primary">COMPANY</h4>
1080
+ <ul class="space-y-3">
1081
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">ABOUT US</a></li>
1082
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">CAREERS</a></li>
1083
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">PRESS</a></li>
1084
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">NEWS</a></li>
1085
+ </ul>
1086
+ </div>
1087
+ <div>
1088
+ <h4 class="text-lg font-bold mb-5 text-neon-primary">RESOURCES</h4>
1089
+ <ul class="space-y-3">
1090
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">HELP CENTER</a></li>
1091
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">BLOG</a></li>
1092
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">COMMUNITY</a></li>
1093
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">STATUS</a></li>
1094
+ </ul>
1095
+ </div>
1096
+ <div>
1097
+ <h4 class="text-lg font-bold mb-5 text-neon-primary">LEGAL</h4>
1098
+ <ul class="space-y-3">
1099
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">TERMS OF SERVICE</a></li>
1100
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">PRIVACY POLICY</a></li>
1101
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">COOKIE POLICY</a></li>
1102
+ <li><a href="#" class="text-gray-300 hover:text-neon-primary font-mono">AML POLICY</a></li>
1103
+ </ul>
1104
+ </div>
1105
+ </div>
1106
+ <div class="border-t border-tron-light mt-12 pt-8 text-center text-gray-400 font-mono">
1107
+ <p>© 2023 TRONMINER. ALL RIGHTS RESERVED. CRYPTOCURRENCIES ARE CONSIDERED HIGH-RISK INVESTMENTS.</p>
1108
+ <p class="mt-2 text-sm">TRON AND TRONIX ARE TRADEMARKS OF THE TRON FOUNDATION.</p>
1109
+ </div>
1110
+ </div>
1111
+ </footer>
1112
+
1113
+ <!-- Investment Modal -->
1114
+ <div id="investment-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden transition-all duration-200">
1115
+ <div class="bg-tron-dark rounded-xl p-6 w-full max-w-md border border-tron-light transform transition-all relative overflow-hidden">
1116
+ <div class="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-neon-primary opacity-10 blur-xl"></div>
1117
+ <div class="flex justify-between items-center mb-5">
1118
+ <h3 id="modal-title" class="text-2xl font-bold"></h3>
1119
+ <button id="close-modal" class="text-gray-400 hover:text-white">
1120
+ <i class="fas fa-times text-xl"></i>
1121
+ </button>
1122
+ </div>
1123
+
1124
+ <div class="mb-6">
1125
+ <label class="block text-gray-400 mb-2 font-mono">INVESTMENT AMOUNT (TRX)</label>
1126
+ <div class="relative">
1127
+ <input type="number" id="investment-amount" class="w-full bg-tron-light border border-tron-light rounded-lg py-3 px-4 focus:outline-none focus:ring-1 focus:ring-neon-primary font-mono" placeholder="ENTER AMOUNT">
1128
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3">
1129
+ <span class="text-gray-400 font-mono">TRX</span>
1130
+ </div>
1131
+ </div>
1132
+ <div class="flex justify-between mt-2 text-sm text-gray-400 font-mono">
1133
+ <span id="plan-min">MIN: 5,000 TRX</span>
1134
+ <span id="plan-max">MAX: 20,000 TRX</span>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <div class="mb-6 bg-tron-light rounded-lg p-4 border border-tron-light">
1139
+ <h4 class="font-medium mb-3 text-lg">INVESTMENT DETAILS</h4>
1140
+ <div class="space-y-3">
1141
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
1142
+ <span class="text-gray-400">DAILY PROFIT:</span>
1143
+ <span id="profit-rate" class="font-medium text-green-400">2.8%</span>
1144
+ </div>
1145
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
1146
+ <span class="text-gray-400">TERM:</span>
1147
+ <span id="profit-duration" class="font-medium">25 DAYS</span>
1148
+ </div>
1149
+ <div class="flex justify-between items-center py-2 border-b border-tron-light font-mono">
1150
+ <span class="text-gray-400">ESTIMATED DAILY:</span>
1151
+ <span id="estimated-daily" class="font-medium text-neon-primary">140 TRX</span>
1152
+ </div>
1153
+ <div class="flex justify-between items-center pt-2 font-mono">
1154
+ <span class="text-gray-400">TOTAL RETURN:</span>
1155
+ <span id="total-return" class="font-bold text-xl text-green-400">70%</span>
1156
+ </div>
1157
+ </div>
1158
+ </div>
1159
+
1160
+ <button id="confirm-investment" class="w-full bg-yellow-500 hover:bg-yellow-600 py-3 rounded-lg font-bold text-lg text-tron-dark">
1161
+ CONFIRM INVESTMENT
1162
+ </button>
1163
+
1164
+ <div class="mt-4 text-center text-sm text-gray-400 font-mono">
1165
+ <p>BY PROCEEDING, YOU AGREE TO OUR <a href="#" class="text-blue-400 hover:underline">TERMS OF SERVICE</a></p>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+
1170
+ <!-- Success Toast -->
1171
+ <div id="success-toast" class="fixed bottom-6 right-6 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 hidden transition-all transform translate-y-6 opacity-0 border border-green-400">
1172
+ <div class="flex items-center space-x-3">
1173
+ <i class="fas fa-check-circle text-xl"></i>
1174
+ <span id="toast-message" class="font-mono">INVESTMENT CREATED SUCCESSFULLY!</span>
1175
+ </div>
1176
+ </div>
1177
+
1178
+ <script>
1179
+ // Mobile Menu Toggle
1180
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
1181
+ const mobileMenu = document.getElementById('mobile-menu');
1182
+
1183
+ mobileMenuButton.addEventListener('click', () => {
1184
+ mobileMenu.classList.toggle('hidden');
1185
+ });
1186
+
1187
+ // Investment Modal
1188
+ const investmentModal = document.getElementById('investment-modal');
1189
+ const closeModal = document.getElementById('close-modal');
1190
+ const investButtons = document.querySelectorAll('.invest-button');
1191
+ const confirmInvestment = document.getElementById('confirm-investment');
1192
+ const modalTitle = document.getElementById('modal-title');
1193
+ const planMin = document.getElementById('plan-min');
1194
+ const planMax = document.getElementById('plan-max');
1195
+ const profitRate = document.getElementById('profit-rate');
1196
+ const profitDuration = document.getElementById('profit-duration');
1197
+ const estimatedDaily = document.getElementById('estimated-daily');
1198
+ const totalReturn = document.getElementById('total-return');
1199
+ const investmentAmount = document.getElementById('investment-amount');
1200
+ const successToast = document.getElementById('success-toast');
1201
+ const toastMessage = document.getElementById('toast-message');
1202
+
1203
+ // Plan data
1204
+ const plans = {
1205
+ starter: {
1206
+ name: "STARTER PLAN",
1207
+ min: 100,
1208
+ max: 1000,
1209
+ rate: "1.8%",
1210
+ duration: "15 DAYS",
1211
+ return: "27%",
1212
+ color: "bg-blue-600 hover:bg-blue-700",
1213
+ buttonClass: "bg-blue-600 hover:bg-blue-700"
1214
+ },
1215
+ advanced: {
1216
+ name: "ADVANCED PLAN",
1217
+ min: 1000,
1218
+ max: 5000,
1219
+ rate: "2.2%",
1220
+ duration: "20 DAYS",
1221
+ return: "44%",
1222
+ color: "bg-green-600 hover:bg-green-700",
1223
+ buttonClass
1224
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sasa231989/sasa23" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1225
+ </html>