Hugging Face's logo

Spaces:
stakmodsco
/
taskchain-token
Running

App Files Community
stakmodsco commited on
Commit
dbcf0e1
·
verified ·
1 Parent(s): d68f6dd

change the name to 'CoinBeacon' - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +288 -816
index.html CHANGED
@@ -3,903 +3,375 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TaskChain - Crypto Token for Micro-Task Rewards</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
- taskchain: {
15
- primary: '#6C63FF',
16
- secondary: '#4F46E5',
17
- accent: '#A78BFA',
18
- dark: '#1E1B4B',
19
- light: '#E0E7FF'
20
- }
21
- },
22
- fontFamily: {
23
- sans: ['Inter', 'sans-serif'],
24
- },
25
- }
26
- }
27
- }
28
- </script>
29
  <style>
30
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
31
-
32
- body {
33
- font-family: 'Inter', sans-serif;
34
- background-color: #f8fafc;
35
- }
36
-
37
  .gradient-bg {
38
- background: linear-gradient(135deg, #6C63FF 0%, #4F46E5 100%);
39
  }
40
-
41
- .token-card:hover {
42
- transform: translateY(-5px);
43
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
44
  }
45
-
46
- .task-item:hover {
47
- background-color: #E0E7FF;
48
  }
49
-
50
- .pulse {
51
- animation: pulse 2s infinite;
 
52
  }
53
-
54
- @keyframes pulse {
55
- 0% {
56
- box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.7);
57
- }
58
- 70% {
59
- box-shadow: 0 0 0 10px rgba(108, 99, 255, 0);
60
- }
61
- 100% {
62
- box-shadow: 0 0 0 0 rgba(108, 99, 255, 0);
63
- }
64
  }
65
  </style>
66
  </head>
67
- <body>
68
- <!-- Navigation -->
69
- <nav class="bg-white shadow-sm">
70
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
71
- <div class="flex justify-between h-16">
72
- <div class="flex items-center">
73
- <div class="flex-shrink-0 flex items-center">
74
- <i class="fas fa-link text-taskchain-primary text-2xl mr-2"></i>
75
- <span class="text-xl font-bold text-taskchain-dark">TaskChain</span>
76
- </div>
77
- </div>
78
- <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
79
- <a href="#features" class="text-gray-500 hover:text-taskchain-primary px-3 py-2 text-sm font-medium">Features</a>
80
- <a href="#how-it-works" class="text-gray-500 hover:text-taskchain-primary px-3 py-2 text-sm font-medium">How It Works</a>
81
- <a href="#tokenomics" class="text-gray-500 hover:text-taskchain-primary px-3 py-2 text-sm font-medium">Tokenomics</a>
82
- <a href="#faq" class="text-gray-500 hover:text-taskchain-primary px-3 py-2 text-sm font-medium">FAQ</a>
83
- <button class="bg-taskchain-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-taskchain-secondary transition duration-300">
84
- Get Started
85
- </button>
86
- </div>
87
- <div class="-mr-2 flex items-center md:hidden">
88
- <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-taskchain-primary">
89
- <span class="sr-only">Open main menu</span>
90
- <i class="fas fa-bars"></i>
91
- </button>
92
- </div>
93
- </div>
94
- </div>
95
-
96
- <!-- Mobile menu -->
97
- <div class="hidden md:hidden" id="mobile-menu">
98
- <div class="pt-2 pb-3 space-y-1">
99
- <a href="#features" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-taskchain-primary hover:bg-taskchain-light">Features</a>
100
- <a href="#how-it-works" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-taskchain-primary hover:bg-taskchain-light">How It Works</a>
101
- <a href="#tokenomics" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-taskchain-primary hover:bg-taskchain-light">Tokenomics</a>
102
- <a href="#faq" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-taskchain-primary hover:bg-taskchain-light">FAQ</a>
103
- <button class="block w-full text-left px-3 py-2 text-base font-medium text-white bg-taskchain-primary rounded-md">
104
- Get Started
105
- </button>
106
- </div>
107
- </div>
108
- </nav>
109
-
110
- <!-- Hero Section -->
111
- <div class="gradient-bg text-white">
112
- <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
113
- <div class="text-center">
114
- <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
115
- Revolutionizing the Gig Economy with Blockchain
116
  </h1>
117
- <p class="mt-6 max-w-lg mx-auto text-xl">
118
- TaskChain rewards freelancers instantly for completing micro-tasks on-chain.
119
- Get paid in crypto for every small job you complete.
120
- </p>
121
- <div class="mt-10 flex justify-center space-x-4">
122
- <button class="bg-white text-taskchain-primary px-6 py-3 rounded-md text-lg font-medium hover:bg-gray-100 transition duration-300">
123
- Start Earning
124
- </button>
125
- <button class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-medium hover:bg-white hover:text-taskchain-primary transition duration-300">
126
- Learn More
127
- </button>
128
- </div>
129
  </div>
130
- </div>
131
- </div>
132
-
133
- <!-- Stats Section -->
134
- <div class="bg-white py-12">
135
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
136
- <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
137
- <div class="text-center p-6 rounded-lg border border-gray-100 shadow-sm">
138
- <div class="text-4xl font-bold text-taskchain-primary">10K+</div>
139
- <div class="mt-2 text-gray-500">Micro-Tasks Completed</div>
140
- </div>
141
- <div class="text-center p-6 rounded-lg border border-gray-100 shadow-sm">
142
- <div class="text-4xl font-bold text-taskchain-primary">5K+</div>
143
- <div class="mt-2 text-gray-500">Active Freelancers</div>
144
- </div>
145
- <div class="text-center p-6 rounded-lg border border-gray-100 shadow-sm">
146
- <div class="text-4xl font-bold text-taskchain-primary">1M+</div>
147
- <div class="mt-2 text-gray-500">TKC Tokens Rewarded</div>
148
- </div>
149
- <div class="text-center p-6 rounded-lg border border-gray-100 shadow-sm">
150
- <div class="text-4xl font-bold text-taskchain-primary">24/7</div>
151
- <div class="mt-2 text-gray-500">Instant Payouts</div>
152
  </div>
153
  </div>
154
- </div>
155
- </div>
156
 
157
- <!-- Features Section -->
158
- <div id="features" class="py-16 bg-gray-50">
159
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
160
- <div class="text-center">
161
- <h2 class="text-3xl font-extrabold text-taskchain-dark sm:text-4xl">
162
- Why Choose TaskChain?
163
- </h2>
164
- <p class="mt-4 max-w-2xl mx-auto text-gray-500">
165
- The future of micro-task freelancing is here. Get paid fairly and instantly for your work.
166
- </p>
167
- </div>
168
-
169
- <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
170
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
171
- <div class="w-16 h-16 bg-taskchain-light rounded-full flex items-center justify-center mb-6">
172
- <i class="fas fa-bolt text-taskchain-primary text-2xl"></i>
173
  </div>
174
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">Instant Payments</h3>
175
- <p class="text-gray-500">
176
- No more waiting for payday. Get paid in TKC tokens the moment you complete a task.
177
- </p>
178
- </div>
179
-
180
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
181
- <div class="w-16 h-16 bg-taskchain-light rounded-full flex items-center justify-center mb-6">
182
- <i class="fas fa-lock text-taskchain-primary text-2xl"></i>
183
- </div>
184
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">Secure & Transparent</h3>
185
- <p class="text-gray-500">
186
- All transactions are recorded on the blockchain, ensuring complete transparency and security.
187
- </p>
188
- </div>
189
-
190
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
191
- <div class="w-16 h-16 bg-taskchain-light rounded-full flex items-center justify-center mb-6">
192
- <i class="fas fa-globe text-taskchain-primary text-2xl"></i>
193
  </div>
194
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">Global Access</h3>
195
- <p class="text-gray-500">
196
- Work from anywhere in the world. TaskChain is borderless and accessible to everyone.
197
- </p>
198
  </div>
199
-
200
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
201
- <div class="w-16 h-16 bg-taskchain-light rounded-full flex items-center justify-center mb-6">
202
- <i class="fas fa-hand-holding-usd text-taskchain-primary text-2xl"></i>
203
  </div>
204
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">Low Fees</h3>
205
- <p class="text-gray-500">
206
- Traditional platforms take huge cuts. TaskChain keeps fees minimal so you earn more.
207
- </p>
208
- </div>
209
-
210
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
211
- <div class="w-16 h-16 bg-taskchain-light rounded-full flex items-center justify-center mb-6">
212
- <i class="fas fa-tasks text-taskchain-primary text-2xl"></i>
213
  </div>
214
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">Diverse Tasks</h3>
215
- <p class="text-gray-500">
216
- From data entry to creative work, find micro-tasks that match your skills.
217
- </p>
218
- </div>
219
-
220
- <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
221
- <div class="w-16 h-16 bg-taskchain-light rounded-full flex items-center justify-center mb-6">
222
- <i class="fas fa-chart-line text-taskchain-primary text-2xl"></i>
223
  </div>
224
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">Token Appreciation</h3>
225
- <p class="text-gray-500">
226
- As the platform grows, your TKC tokens may increase in value over time.
227
- </p>
228
  </div>
229
  </div>
230
- </div>
231
- </div>
232
 
233
- <!-- How It Works Section -->
234
- <div id="how-it-works" class="py-16 bg-white">
235
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
236
- <div class="text-center">
237
- <h2 class="text-3xl font-extrabold text-taskchain-dark sm:text-4xl">
238
- How TaskChain Works
239
- </h2>
240
- <p class="mt-4 max-w-2xl mx-auto text-gray-500">
241
- Simple steps to start earning with TaskChain
242
- </p>
243
- </div>
244
-
245
- <div class="mt-16">
246
- <div class="relative">
247
- <!-- Timeline line -->
248
- <div class="hidden sm:block absolute h-full w-0.5 bg-taskchain-light left-1/2 transform -translate-x-1/2"></div>
249
-
250
- <!-- Steps -->
251
- <div class="relative space-y-8 sm:space-y-16">
252
- <!-- Step 1 -->
253
- <div class="flex flex-col sm:flex-row items-center">
254
- <div class="flex-1 sm:pr-16 order-2 sm:order-1">
255
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">1. Create Your Profile</h3>
256
- <p class="text-gray-500">
257
- Sign up in minutes with your crypto wallet. No lengthy forms or approval processes.
258
- Set up your skills and preferences to get matched with relevant tasks.
259
- </p>
260
- </div>
261
- <div class="flex-shrink-0 w-16 h-16 rounded-full bg-taskchain-primary text-white flex items-center justify-center mb-4 sm:mb-0 order-1 sm:order-2">
262
- <span class="text-xl font-bold">1</span>
263
- </div>
264
- </div>
265
-
266
- <!-- Step 2 -->
267
- <div class="flex flex-col sm:flex-row items-center">
268
- <div class="flex-1 sm:pl-16 order-2">
269
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">2. Browse Available Tasks</h3>
270
- <p class="text-gray-500">
271
- Our AI-powered dashboard shows you micro-tasks that match your skills.
272
- Filter by category, reward amount, or time commitment to find perfect gigs.
273
- </p>
274
- </div>
275
- <div class="flex-shrink-0 w-16 h-16 rounded-full bg-taskchain-primary text-white flex items-center justify-center mb-4 sm:mb-0 order-1">
276
- <span class="text-xl font-bold">2</span>
277
- </div>
278
- </div>
279
-
280
- <!-- Step 3 -->
281
- <div class="flex flex-col sm:flex-row items-center">
282
- <div class="flex-1 sm:pr-16 order-2 sm:order-1">
283
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">3. Complete Tasks</h3>
284
- <p class="text-gray-500">
285
- Work on tasks directly through our platform.
286
- Some tasks take minutes, others a few hours - choose what fits your schedule.
287
- </p>
288
- </div>
289
- <div class="flex-shrink-0 w-16 h-16 rounded-full bg-taskchain-primary text-white flex items-center justify-center mb-4 sm:mb-0 order-1 sm:order-2">
290
- <span class="text-xl font-bold">3</span>
291
- </div>
292
- </div>
293
-
294
- <!-- Step 4 -->
295
- <div class="flex flex-col sm:flex-row items-center">
296
- <div class="flex-1 sm:pl-16 order-2">
297
- <h3 class="text-xl font-bold text-taskchain-dark mb-3">4. Get Paid Instantly</h3>
298
- <p class="text-gray-500">
299
- Once your work is verified, TKC tokens are sent directly to your wallet immediately.
300
- No middlemen, no delays - just fair compensation for your effort.
301
- </p>
302
- </div>
303
- <div class="flex-shrink-0 w-16 h-16 rounded-full bg-taskchain-primary text-white flex items-center justify-center mb-4 sm:mb-0 order-1">
304
- <span class="text-xl font-bold">4</span>
305
- </div>
306
- </div>
307
  </div>
308
- </div>
309
- </div>
310
- </div>
311
- </div>
312
-
313
- <!-- Tokenomics Section -->
314
- <div id="tokenomics" class="py-16 bg-gray-50">
315
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
316
- <div class="text-center">
317
- <h2 class="text-3xl font-extrabold text-taskchain-dark sm:text-4xl">
318
- TaskChain Token (TKC) Economics
319
- </h2>
320
- <p class="mt-4 max-w-2xl mx-auto text-gray-500">
321
- A sustainable token model designed to reward workers and grow the ecosystem
322
- </p>
323
- </div>
324
-
325
- <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
326
- <div>
327
- <h3 class="text-xl font-bold text-taskchain-dark mb-6">Token Distribution</h3>
328
- <div class="bg-white p-6 rounded-xl shadow-sm">
329
- <canvas id="tokenDistributionChart" height="300"></canvas>
330
  </div>
331
  </div>
332
-
333
- <div>
334
- <h3 class="text-xl font-bold text-taskchain-dark mb-6">Token Utility</h3>
335
- <div class="space-y-4">
336
- <div class="bg-white p-6 rounded-xl shadow-sm">
337
- <div class="flex items-center">
338
- <div class="flex-shrink-0 w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
339
- <i class="fas fa-coins text-taskchain-primary"></i>
340
- </div>
341
- <div>
342
- <h4 class="font-bold text-taskchain-dark">Task Rewards</h4>
343
- <p class="text-gray-500 text-sm">70% of all tokens distributed to freelancers</p>
344
- </div>
345
- </div>
346
- </div>
347
-
348
- <div class="bg-white p-6 rounded-xl shadow-sm">
349
- <div class="flex items-center">
350
- <div class="flex-shrink-0 w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
351
- <i class="fas fa-vote-yea text-taskchain-primary"></i>
352
- </div>
353
- <div>
354
- <h4 class="font-bold text-taskchain-dark">Governance</h4>
355
- <p class="text-gray-500 text-sm">Token holders vote on platform improvements</p>
356
- </div>
357
- </div>
358
- </div>
359
-
360
- <div class="bg-white p-6 rounded-xl shadow-sm">
361
- <div class="flex items-center">
362
- <div class="flex-shrink-0 w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
363
- <i class="fas fa-percentage text-taskchain-primary"></i>
364
- </div>
365
- <div>
366
- <h4 class="font-bold text-taskchain-dark">Staking Rewards</h4>
367
- <p class="text-gray-500 text-sm">Earn additional tokens by staking TKC</p>
368
- </div>
369
- </div>
370
- </div>
371
-
372
- <div class="bg-white p-6 rounded-xl shadow-sm">
373
- <div class="flex items-center">
374
- <div class="flex-shrink-0 w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
375
- <i class="fas fa-exchange-alt text-taskchain-primary"></i>
376
- </div>
377
- <div>
378
- <h4 class="font-bold text-taskchain-dark">Platform Fees</h4>
379
- <p class="text-gray-500 text-sm">Low 2% fee on all transactions fuels ecosystem</p>
380
- </div>
381
- </div>
382
- </div>
383
  </div>
384
- </div>
385
- </div>
386
-
387
- <div class="mt-16">
388
- <h3 class="text-xl font-bold text-taskchain-dark mb-6">Current TaskChain Stats</h3>
389
- <div class="bg-white p-6 rounded-xl shadow-sm">
390
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
391
- <div class="text-center p-4 border border-gray-100 rounded-lg">
392
- <div class="text-2xl font-bold text-taskchain-primary">$0.25</div>
393
- <div class="text-gray-500">Current TKC Price</div>
394
- </div>
395
- <div class="text-center p-4 border border-gray-100 rounded-lg">
396
- <div class="text-2xl font-bold text-taskchain-primary">50M</div>
397
- <div class="text-gray-500">Circulating Supply</div>
398
- </div>
399
- <div class="text-center p-4 border border-gray-100 rounded-lg">
400
- <div class="text-2xl font-bold text-taskchain-primary">100M</div>
401
- <div class="text-gray-500">Total Supply</div>
402
- </div>
403
  </div>
404
  </div>
405
  </div>
406
- </div>
407
- </div>
408
 
409
- <!-- Task Marketplace Preview -->
410
- <div class="py-16 bg-white">
411
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
412
- <div class="text-center">
413
- <h2 class="text-3xl font-extrabold text-taskchain-dark sm:text-4xl">
414
- Task Marketplace Preview
415
- </h2>
416
- <p class="mt-4 max-w-2xl mx-auto text-gray-500">
417
- Browse sample micro-tasks available on TaskChain
418
- </p>
419
- </div>
420
-
421
- <div class="mt-12">
422
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
423
- <div class="p-4 bg-taskchain-light border-b border-gray-200">
424
- <div class="flex justify-between items-center">
425
- <h3 class="font-bold text-taskchain-dark">Available Micro-Tasks</h3>
426
- <div class="relative">
427
- <select class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:ring-1 focus:ring-taskchain-primary">
428
- <option>All Categories</option>
429
- <option>Data Entry</option>
430
- <option>Content Writing</option>
431
- <option>Graphic Design</option>
432
- <option>Programming</option>
433
- <option>Social Media</option>
434
- </select>
435
- <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
436
- <i class="fas fa-chevron-down"></i>
437
- </div>
438
- </div>
439
- </div>
440
  </div>
441
-
442
- <div class="divide-y divide-gray-200">
443
- <!-- Task Item 1 -->
444
- <div class="p-4 hover:bg-taskchain-light transition duration-200 cursor-pointer task-item">
445
- <div class="flex justify-between items-start">
446
- <div>
447
- <h4 class="font-bold text-taskchain-dark">Website Copy Editing (500 words)</h4>
448
- <div class="flex items-center mt-2">
449
- <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Content Writing</span>
450
- <span class="ml-2 text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 1-2 hours</span>
451
- </div>
452
- </div>
453
- <div class="text-right">
454
- <div class="text-xl font-bold text-taskchain-primary">250 TKC</div>
455
- <div class="text-gray-500 text-sm">~$62.50</div>
456
- </div>
457
- </div>
458
- </div>
459
-
460
- <!-- Task Item 2 -->
461
- <div class="p-4 hover:bg-taskchain-light transition duration-200 cursor-pointer task-item">
462
- <div class="flex justify-between items-start">
463
- <div>
464
- <h4 class="font-bold text-taskchain-dark">Social Media Post Design</h4>
465
- <div class="flex items-center mt-2">
466
- <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Graphic Design</span>
467
- <span class="ml-2 text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 30-60 mins</span>
468
- </div>
469
- </div>
470
- <div class="text-right">
471
- <div class="text-xl font-bold text-taskchain-primary">120 TKC</div>
472
- <div class="text-gray-500 text-sm">~$30.00</div>
473
- </div>
474
- </div>
475
- </div>
476
-
477
- <!-- Task Item 3 -->
478
- <div class="p-4 hover:bg-taskchain-light transition duration-200 cursor-pointer task-item">
479
- <div class="flex justify-between items-start">
480
- <div>
481
- <h4 class="font-bold text-taskchain-dark">Data Entry from PDF to Excel</h4>
482
- <div class="flex items-center mt-2">
483
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Data Entry</span>
484
- <span class="ml-2 text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 2-3 hours</span>
485
- </div>
486
- </div>
487
- <div class="text-right">
488
- <div class="text-xl font-bold text-taskchain-primary">180 TKC</div>
489
- <div class="text-gray-500 text-sm">~$45.00</div>
490
- </div>
491
  </div>
 
492
  </div>
493
-
494
- <!-- Task Item 4 -->
495
- <div class="p-4 hover:bg-taskchain-light transition duration-200 cursor-pointer task-item">
496
- <div class="flex justify-between items-start">
497
- <div>
498
- <h4 class="font-bold text-taskchain-dark">Simple JavaScript Bug Fix</h4>
499
- <div class="flex items-center mt-2">
500
- <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Programming</span>
501
- <span class="ml-2 text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 1 hour</span>
502
- </div>
503
- </div>
504
- <div class="text-right">
505
- <div class="text-xl font-bold text-taskchain-primary">300 TKC</div>
506
- <div class="text-gray-500 text-sm">~$75.00</div>
507
- </div>
508
  </div>
 
509
  </div>
510
-
511
- <!-- Task Item 5 -->
512
- <div class="p-4 hover:bg-taskchain-light transition duration-200 cursor-pointer task-item">
513
- <div class="flex justify-between items-start">
514
- <div>
515
- <h4 class="font-bold text-taskchain-dark">Instagram Hashtag Research</h4>
516
- <div class="flex items-center mt-2">
517
- <span class="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">Social Media</span>
518
- <span class="ml-2 text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 45 mins</span>
519
- </div>
520
- </div>
521
- <div class="text-right">
522
- <div class="text-xl font-bold text-taskchain-primary">80 TKC</div>
523
- <div class="text-gray-500 text-sm">~$20.00</div>
524
- </div>
525
  </div>
 
526
  </div>
527
- </div>
528
-
529
- <div class="p-4 bg-gray-50 border-t border-gray-200 text-center">
530
- <button class="bg-taskchain-primary text-white px-6 py-2 rounded-md font-medium hover:bg-taskchain-secondary transition duration-300">
531
- View All Tasks
532
- </button>
533
  </div>
534
  </div>
535
  </div>
536
  </div>
537
- </div>
538
 
539
- <!-- Testimonials -->
540
- <div class="py-16 bg-gray-50">
541
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
542
- <div class="text-center">
543
- <h2 class="text-3xl font-extrabold text-taskchain-dark sm:text-4xl">
544
- What Our Freelancers Say
545
- </h2>
546
- <p class="mt-4 max-w-2xl mx-auto text-gray-500">
547
- Real people earning real money with TaskChain
548
- </p>
 
 
 
 
 
549
  </div>
550
-
551
- <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
552
- <!-- Testimonial 1 -->
553
- <div class="bg-white p-8 rounded-xl shadow-sm">
554
- <div class="flex items-center mb-4">
555
- <div class="w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
556
- <i class="fas fa-user text-taskchain-primary"></i>
557
- </div>
558
- <div>
559
- <h4 class="font-bold text-taskchain-dark">Sarah K.</h4>
560
- <div class="flex text-yellow-400 mt-1">
561
- <i class="fas fa-star"></i>
562
- <i class="fas fa-star"></i>
563
- <i class="fas fa-star"></i>
564
- <i class="fas fa-star"></i>
565
- <i class="fas fa-star"></i>
566
- </div>
567
  </div>
568
  </div>
569
- <p class="text-gray-500">
570
- "I've been able to earn a full-time income just by completing micro-tasks in my spare time.
571
- The instant payments are life-changing compared to traditional freelancing platforms."
572
- </p>
573
- <div class="mt-4 text-sm text-gray-400">
574
- Content Writer, Philippines
575
- </div>
576
  </div>
577
-
578
- <!-- Testimonial 2 -->
579
- <div class="bg-white p-8 rounded-xl shadow-sm">
580
- <div class="flex items-center mb-4">
581
- <div class="w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
582
- <i class="fas fa-user text-taskchain-primary"></i>
583
- </div>
584
- <div>
585
- <h4 class="font-bold text-taskchain-dark">Miguel R.</h4>
586
- <div class="flex text-yellow-400 mt-1">
587
- <i class="fas fa-star"></i>
588
- <i class="fas fa-star"></i>
589
- <i class="fas fa-star"></i>
590
- <i class="fas fa-star"></i>
591
- <i class="fas fa-star-half-alt"></i>
592
- </div>
593
- </div>
594
- </div>
595
- <p class="text-gray-500">
596
- "As a student, TaskChain has been perfect for me. I can work when I have time between classes
597
- and the crypto payments help me avoid expensive bank transfer fees."
598
- </p>
599
- <div class="mt-4 text-sm text-gray-400">
600
- Graphic Designer, Mexico
601
  </div>
 
 
602
  </div>
603
-
604
- <!-- Testimonial 3 -->
605
- <div class="bg-white p-8 rounded-xl shadow-sm">
606
- <div class="flex items-center mb-4">
607
- <div class="w-12 h-12 rounded-full bg-taskchain-light flex items-center justify-center mr-4">
608
- <i class="fas fa-user text-taskchain-primary"></i>
609
- </div>
610
- <div>
611
- <h4 class="font-bold text-taskchain-dark">Aisha B.</h4>
612
- <div class="flex text-yellow-400 mt-1">
613
- <i class="fas fa-star"></i>
614
- <i class="fas fa-star"></i>
615
- <i class="fas fa-star"></i>
616
- <i class="fas fa-star"></i>
617
- <i class="fas fa-star"></i>
618
- </div>
619
- </div>
620
  </div>
621
- <p class="text-gray-500">
622
- "The transparency of blockchain payments gives me confidence I'll always get paid for my work.
623
- I've doubled my income since switching to TaskChain from other platforms."
624
- </p>
625
- <div class="mt-4 text-sm text-gray-400">
626
- Data Entry Specialist, Nigeria
 
627
  </div>
 
 
628
  </div>
629
  </div>
630
  </div>
631
- </div>
632
 
633
- <!-- FAQ Section -->
634
- <div id="faq" class="py-16 bg-white">
635
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
636
- <div class="text-center">
637
- <h2 class="text-3xl font-extrabold text-taskchain-dark sm:text-4xl">
638
- Frequently Asked Questions
639
- </h2>
640
- <p class="mt-4 max-w-2xl mx-auto text-gray-500">
641
- Everything you need to know about TaskChain
642
- </p>
643
  </div>
644
 
645
- <div class="mt-16 max-w-3xl mx-auto">
646
- <div class="space-y-4">
647
- <!-- FAQ Item 1 -->
648
- <div class="border border-gray-200 rounded-lg overflow-hidden">
649
- <button class="w-full flex justify-between items-center p-4 text-left font-medium text-taskchain-dark hover:bg-taskchain-light transition duration-300 faq-toggle">
650
- <span>What is TaskChain and how does it work?</span>
651
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
652
- </button>
653
- <div class="hidden faq-content p-4 border-t border-gray-200 text-gray-500">
654
- TaskChain is a blockchain-based platform that connects businesses with freelancers for micro-tasks.
655
- Businesses post small jobs (from 5 minutes to a few hours of work), freelancers complete them,
656
- and get paid instantly in TKC tokens which can be traded or converted to other cryptocurrencies.
657
- </div>
658
- </div>
659
-
660
- <!-- FAQ Item 2 -->
661
- <div class="border border-gray-200 rounded-lg overflow-hidden">
662
- <button class="w-full flex justify-between items-center p-4 text-left font-medium text-taskchain-dark hover:bg-taskchain-light transition duration-300 faq-toggle">
663
- <span>Do I need crypto experience to use TaskChain?</span>
664
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
665
- </button>
666
- <div class="hidden faq-content p-4 border-t border-gray-200 text-gray-500">
667
- No prior crypto experience is needed! We provide simple wallet setup guides and our platform
668
- makes receiving and managing your TKC tokens easy. You can focus on completing tasks while
669
- we handle the blockchain complexity for you.
670
- </div>
671
- </div>
672
-
673
- <!-- FAQ Item 3 -->
674
- <div class="border border-gray-200 rounded-lg overflow-hidden">
675
- <button class="w-full flex justify-between items-center p-4 text-left font-medium text-taskchain-dark hover:bg-taskchain-light transition duration-300 faq-toggle">
676
- <span>How do I cash out my TKC tokens?</span>
677
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
678
- </button>
679
- <div class="hidden faq-content p-4 border-t border-gray-200 text-gray-500">
680
- TKC tokens can be traded on several cryptocurrency exchanges. You can swap them for other
681
- cryptocurrencies like Bitcoin or Ethereum, or convert them to fiat currency through supported
682
- exchanges in your country. We're also working on direct fiat withdrawal options.
683
- </div>
684
- </div>
685
-
686
- <!-- FAQ Item 4 -->
687
- <div class="border border-gray-200 rounded-lg overflow-hidden">
688
- <button class="w-full flex justify-between items-center p-4 text-left font-medium text-taskchain-dark hover:bg-taskchain-light transition duration-300 faq-toggle">
689
- <span>What kind of tasks are available?</span>
690
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
691
- </button>
692
- <div class="hidden faq-content p-4 border-t border-gray-200 text-gray-500">
693
- We offer a wide variety of micro-tasks across categories including data entry, content writing,
694
- graphic design, programming, social media management, research, translation, and more. Tasks
695
- typically take between 15 minutes to 3 hours to complete.
696
- </div>
697
- </div>
698
-
699
- <!-- FAQ Item 5 -->
700
- <div class="border border-gray-200 rounded-lg overflow-hidden">
701
- <button class="w-full flex justify-between items-center p-4 text-left font-medium text-taskchain-dark hover:bg-taskchain-light transition duration-300 faq-toggle">
702
- <span>Is there a minimum withdrawal amount?</span>
703
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
704
- </button>
705
- <div class="hidden faq-content p-4 border-t border-gray-200 text-gray-500">
706
- No! One of the key benefits of TaskChain is that you can withdraw your earnings at any time,
707
- for any amount. Even if you've earned just 1 TKC from a single small task, you can withdraw it
708
- immediately with minimal gas fees.
709
- </div>
710
- </div>
711
-
712
- <!-- FAQ Item 6 -->
713
- <div class="border border-gray-200 rounded-lg overflow-hidden">
714
- <button class="w-full flex justify-between items-center p-4 text-left font-medium text-taskchain-dark hover:bg-taskchain-light transition duration-300 faq-toggle">
715
- <span>How does TaskChain compare to other freelancing platforms?</span>
716
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
717
- </button>
718
- <div class="hidden faq-content p-4 border-t border-gray-200 text-gray-500">
719
- Unlike traditional platforms, TaskChain offers: instant payments, lower fees (only 2% vs 20%+ on
720
- other sites), global access without restrictions, transparent payment tracking on blockchain,
721
- and the potential for token appreciation. We're specifically optimized for micro-tasks rather
722
- than large projects.
723
- </div>
724
  </div>
725
  </div>
726
 
727
- <div class="mt-12 text-center">
728
- <p class="text-gray-500">Still have questions?</p>
729
- <button class="mt-4 bg-taskchain-primary text-white px-6 py-2 rounded-md font-medium hover:bg-taskchain-secondary transition duration-300">
730
- Contact Support
731
- </button>
 
732
  </div>
733
  </div>
734
  </div>
735
- </div>
736
 
737
- <!-- CTA Section -->
738
- <div class="gradient-bg text-white">
739
- <div class="max-w-7xl mx-auto py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
740
- <div class="text-center">
741
- <h2 class="text-3xl font-extrabold sm:text-4xl">
742
- Ready to Start Earning with TaskChain?
743
- </h2>
744
- <p class="mt-6 max-w-2xl mx-auto text-xl">
745
- Join thousands of freelancers already benefiting from instant crypto payments for micro-tasks.
746
- </p>
747
- <div class="mt-10 flex justify-center space-x-4">
748
- <button class="bg-white text-taskchain-primary px-8 py-4 rounded-md text-lg font-bold hover:bg-gray-100 transition duration-300 pulse">
749
- Sign Up Now - It's Free
750
- </button>
751
- </div>
752
- <div class="mt-8 text-sm text-taskchain-light">
753
- No credit card required. Just connect your crypto wallet to get started.
754
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
755
  </div>
756
  </div>
757
- </div>
758
 
759
- <!-- Footer -->
760
- <footer class="bg-taskchain-dark text-white">
761
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
762
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
763
- <div>
764
- <h3 class="text-lg font-bold mb-4">TaskChain</h3>
765
- <p class="text-gray-300 text-sm">
766
- Revolutionizing the gig economy with blockchain-powered micro-task freelancing.
767
- </p>
768
- <div class="mt-4 flex space-x-4">
769
- <a href="#" class="text-gray-300 hover:text-white">
770
- <i class="fab fa-twitter"></i>
771
- </a>
772
- <a href="#" class="text-gray-300 hover:text-white">
773
- <i class="fab fa-discord"></i>
774
- </a>
775
- <a href="#" class="text-gray-300 hover:text-white">
776
- <i class="fab fa-telegram"></i>
777
- </a>
778
- <a href="#" class="text-gray-300 hover:text-white">
779
- <i class="fab fa-medium"></i>
780
- </a>
781
  </div>
 
 
782
  </div>
783
-
784
- <div>
785
- <h3 class="text-lg font-bold mb-4">For Freelancers</h3>
786
- <ul class="space-y-2">
787
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">How It Works</a></li>
788
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Browse Tasks</a></li>
789
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Earning Potential</a></li>
790
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Success Stories</a></li>
791
- </ul>
792
- </div>
793
-
794
- <div>
795
- <h3 class="text-lg font-bold mb-4">For Businesses</h3>
796
- <ul class="space-y-2">
797
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Post a Task</a></li>
798
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Pricing</a></li>
799
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Enterprise Solutions</a></li>
800
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">API Documentation</a></li>
801
- </ul>
802
- </div>
803
-
804
- <div>
805
- <h3 class="text-lg font-bold mb-4">Resources</h3>
806
- <ul class="space-y-2">
807
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Help Center</a></li>
808
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Blog</a></li>
809
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Community</a></li>
810
- <li><a href="#" class="text-gray-300 hover:text-white text-sm">Whitepaper</a></li>
811
- </ul>
812
- </div>
813
- </div>
814
-
815
- <div class="mt-12 pt-8 border-t border-gray-700">
816
- <div class="flex flex-col md:flex-row justify-between items-center">
817
- <div class="text-gray-300 text-sm">
818
- &copy; 2023 TaskChain. All rights reserved.
819
  </div>
820
- <div class="mt-4 md:mt-0 flex space-x-6">
821
- <a href="#" class="text-gray-300 hover:text-white text-sm">Privacy Policy</a>
822
- <a href="#" class="text-gray-300 hover:text-white text-sm">Terms of Service</a>
823
- <a href="#" class="text-gray-300 hover:text-white text-sm">Cookie Policy</a>
 
 
824
  </div>
 
 
825
  </div>
826
  </div>
827
  </div>
828
- </footer>
829
 
830
- <!-- Scripts -->
831
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
832
  <script>
833
- // Mobile menu toggle
834
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
835
- const menu = document.getElementById('mobile-menu');
836
- menu.classList.toggle('hidden');
837
- });
838
-
839
- // FAQ toggle functionality
840
- document.querySelectorAll('.faq-toggle').forEach(button => {
841
- button.addEventListener('click', () => {
842
- const content = button.nextElementSibling;
843
- const icon = button.querySelector('i');
844
-
845
- content.classList.toggle('hidden');
846
- icon.classList.toggle('rotate-180');
847
- });
 
 
848
  });
849
-
850
- // Token distribution chart
851
- const ctx = document.getElementById('tokenDistributionChart').getContext('2d');
852
- const tokenChart = new Chart(ctx, {
853
- type: 'doughnut',
854
- data: {
855
- labels: ['Freelancer Rewards', 'Platform Development', 'Marketing', 'Team & Advisors', 'Community & Ecosystem', 'Reserve'],
856
- datasets: [{
857
- data: [70, 10, 8, 7, 3, 2],
858
- backgroundColor: [
859
- '#6C63FF',
860
- '#4F46E5',
861
- '#A78BFA',
862
- '#8B5CF6',
863
- '#7C3AED',
864
- '#E0E7FF'
865
- ],
866
- borderWidth: 0
867
- }]
868
- },
869
- options: {
870
- responsive: true,
871
- plugins: {
872
- legend: {
873
- position: 'right',
874
- },
875
- tooltip: {
876
- callbacks: {
877
- label: function(context) {
878
- return `${context.label}: ${context.raw}%`;
879
- }
880
- }
881
- }
882
- },
883
- cutout: '70%'
884
- }
885
  });
886
-
887
- // Animate elements when they come into view
888
- const animateOnScroll = () => {
889
- const elements = document.querySelectorAll('.token-card, .task-item, .faq-toggle');
 
 
 
890
 
891
- elements.forEach(element => {
892
- const elementPosition = element.getBoundingClientRect().top;
893
- const windowHeight = window.innerHeight;
894
-
895
- if (elementPosition < windowHeight - 100) {
896
- element.classList.add('animate__animated', 'animate__fadeInUp');
897
- }
898
- });
899
- };
900
-
901
- window.addEventListener('scroll', animateOnScroll);
902
- window.addEventListener('load', animateOnScroll);
903
  </script>
904
  <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=stakmodsco/taskchain-token" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
905
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Crypto Mining Telegram Bot</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
  <style>
 
 
 
 
 
 
 
10
  .gradient-bg {
11
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
12
  }
13
+ .mining-active {
14
+ box-shadow: 0 0 15px rgba(74, 222, 128, 0.7);
 
 
15
  }
16
+ .coin-animation {
17
+ animation: float 3s ease-in-out infinite;
 
18
  }
19
+ @keyframes float {
20
+ 0% { transform: translateY(0px); }
21
+ 50% { transform: translateY(-10px); }
22
+ 100% { transform: translateY(0px); }
23
  }
24
+ .progress-bar {
25
+ transition: width 0.5s ease-in-out;
 
 
 
 
 
 
 
 
 
26
  }
27
  </style>
28
  </head>
29
+ <body class="gradient-bg text-gray-100 min-h-screen">
30
+ <div class="container mx-auto px-4 py-8">
31
+ <!-- Header -->
32
+ <header class="flex justify-between items-center mb-8">
33
+ <div class="flex items-center space-x-3">
34
+ <i class="fab fa-telegram text-3xl text-blue-400"></i>
35
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400">
36
+ CoinBeacon
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </h1>
 
 
 
 
 
 
 
 
 
 
 
 
38
  </div>
39
+ <div class="flex items-center space-x-4">
40
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
41
+ <i class="fab fa-telegram mr-2"></i> Connect Telegram
42
+ </button>
43
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
44
+ <i class="fas fa-user"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  </div>
46
  </div>
47
+ </header>
 
48
 
49
+ <!-- Main Dashboard -->
50
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
51
+ <!-- Mining Status Card -->
52
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-green-500">
53
+ <div class="flex justify-between items-start">
54
+ <div>
55
+ <h2 class="text-lg font-semibold mb-1">Mining Status</h2>
56
+ <p class="text-gray-400 text-sm">Active session</p>
 
 
 
 
 
 
 
 
57
  </div>
58
+ <div class="relative">
59
+ <div class="w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center mining-active">
60
+ <i class="fas fa-bolt text-green-500 text-xl"></i>
61
+ </div>
62
+ <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
63
+ <i class="fas fa-play text-white text-xs"></i>
64
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
65
  </div>
 
 
 
 
66
  </div>
67
+ <div class="mt-6">
68
+ <div class="flex justify-between mb-2">
69
+ <span class="text-sm text-gray-400">Current Coin</span>
70
+ <span class="text-sm font-medium">Bitcoin (BTC)</span>
71
  </div>
72
+ <div class="flex justify-between mb-2">
73
+ <span class="text-sm text-gray-400">Hash Rate</span>
74
+ <span class="text-sm font-medium">1.25 MH/s</span>
 
 
 
 
 
 
75
  </div>
76
+ <div class="flex justify-between">
77
+ <span class="text-sm text-gray-400">Active Miners</span>
78
+ <span class="text-sm font-medium">4,382</span>
 
 
 
 
 
 
79
  </div>
 
 
 
 
80
  </div>
81
  </div>
 
 
82
 
83
+ <!-- Earnings Card -->
84
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-blue-500">
85
+ <div class="flex justify-between items-start">
86
+ <div>
87
+ <h2 class="text-lg font-semibold mb-1">Total Earnings</h2>
88
+ <p class="text-gray-400 text-sm">Last 24 hours</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </div>
90
+ <div class="w-12 h-12 rounded-full bg-blue-900/30 flex items-center justify-center">
91
+ <i class="fas fa-wallet text-blue-500 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
  </div>
94
+ <div class="mt-6">
95
+ <div class="text-2xl font-bold mb-4">0.00234 BTC</div>
96
+ <div class="flex justify-between text-sm">
97
+ <span class="text-gray-400">≈ $87.42</span>
98
+ <span class="text-green-500">+2.4%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
+ <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden">
101
+ <div class="progress-bar h-full bg-gradient-to-r from-blue-500 to-blue-300 rounded-full" style="width: 65%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </div>
103
  </div>
104
  </div>
 
 
105
 
106
+ <!-- Top Coins Card -->
107
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-purple-500">
108
+ <div class="flex justify-between items-start">
109
+ <div>
110
+ <h2 class="text-lg font-semibold mb-1">Top Mining Coins</h2>
111
+ <p class="text-gray-400 text-sm">Most actively traded</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </div>
113
+ <div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center">
114
+ <i class="fas fa-coins text-purple-500 text-xl"></i>
115
+ </div>
116
+ </div>
117
+ <div class="mt-6 space-y-4">
118
+ <div class="flex items-center justify-between">
119
+ <div class="flex items-center space-x-3">
120
+ <div class="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center">
121
+ <i class="fab fa-bitcoin text-yellow-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </div>
123
+ <span class="font-medium">Bitcoin</span>
124
  </div>
125
+ <span class="text-green-500 text-sm">+3.2%</span>
126
+ </div>
127
+ <div class="flex items-center justify-between">
128
+ <div class="flex items-center space-x-3">
129
+ <div class="w-8 h-8 rounded-full bg-gray-400/20 flex items-center justify-center">
130
+ <i class="fab fa-ethereum text-gray-400"></i>
 
 
 
 
 
 
 
 
 
131
  </div>
132
+ <span class="font-medium">Ethereum</span>
133
  </div>
134
+ <span class="text-green-500 text-sm">+1.8%</span>
135
+ </div>
136
+ <div class="flex items-center justify-between">
137
+ <div class="flex items-center space-x-3">
138
+ <div class="w-8 h-8 rounded-full bg-blue-400/20 flex items-center justify-center">
139
+ <i class="fas fa-dollar-sign text-blue-400"></i>
 
 
 
 
 
 
 
 
 
140
  </div>
141
+ <span class="font-medium">Solana</span>
142
  </div>
143
+ <span class="text-red-500 text-sm">-0.5%</span>
 
 
 
 
 
144
  </div>
145
  </div>
146
  </div>
147
  </div>
 
148
 
149
+ <!-- Mining Control Section -->
150
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
151
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
152
+ <div class="mb-6 md:mb-0">
153
+ <h2 class="text-xl font-bold mb-2">Mining Controls</h2>
154
+ <p class="text-gray-400">Start mining the most profitable cryptocurrencies automatically</p>
155
+ </div>
156
+ <div class="flex space-x-4">
157
+ <button id="startMining" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-medium flex items-center">
158
+ <i class="fas fa-play mr-2"></i> Start Mining
159
+ </button>
160
+ <button id="stopMining" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-medium flex items-center opacity-50 cursor-not-allowed">
161
+ <i class="fas fa-stop mr-2"></i> Stop Mining
162
+ </button>
163
+ </div>
164
  </div>
165
+
166
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
167
+ <div class="bg-gray-700/50 p-4 rounded-lg">
168
+ <div class="flex items-center justify-between mb-3">
169
+ <span class="text-gray-400">Current Coin</span>
170
+ <div class="w-6 h-6 rounded-full bg-yellow-500/20 flex items-center justify-center">
171
+ <i class="fab fa-bitcoin text-yellow-500 text-xs"></i>
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
  </div>
174
+ <div class="text-xl font-bold">Bitcoin</div>
175
+ <div class="text-sm text-gray-400 mt-1">BTC</div>
 
 
 
 
 
176
  </div>
177
+ <div class="bg-gray-700/50 p-4 rounded-lg">
178
+ <div class="flex items-center justify-between mb-3">
179
+ <span class="text-gray-400">Hash Rate</span>
180
+ <i class="fas fa-tachometer-alt text-blue-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  </div>
182
+ <div class="text-xl font-bold">1.25 <span class="text-sm font-normal">MH/s</span></div>
183
+ <div class="text-sm text-green-500 mt-1">Optimal</div>
184
  </div>
185
+ <div class="bg-gray-700/50 p-4 rounded-lg">
186
+ <div class="flex items-center justify-between mb-3">
187
+ <span class="text-gray-400">Shares Accepted</span>
188
+ <i class="fas fa-check-circle text-green-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  </div>
190
+ <div class="text-xl font-bold">428</div>
191
+ <div class="text-sm text-gray-400 mt-1">Last hour</div>
192
+ </div>
193
+ <div class="bg-gray-700/50 p-4 rounded-lg">
194
+ <div class="flex items-center justify-between mb-3">
195
+ <span class="text-gray-400">Estimated Reward</span>
196
+ <i class="fas fa-coins text-yellow-400"></i>
197
  </div>
198
+ <div class="text-xl font-bold">0.000023 <span class="text-sm font-normal">BTC</span></div>
199
+ <div class="text-sm text-gray-400 mt-1">≈ $0.87</div>
200
  </div>
201
  </div>
202
  </div>
 
203
 
204
+ <!-- Mining Animation -->
205
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8 relative overflow-hidden">
206
+ <div class="flex justify-between items-center mb-6">
207
+ <h2 class="text-xl font-bold">Mining Visualization</h2>
208
+ <div class="flex items-center text-sm bg-gray-700 px-3 py-1 rounded-full">
209
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
210
+ <span>Live</span>
211
+ </div>
 
 
212
  </div>
213
 
214
+ <div class="mining-visualization h-64 rounded-lg bg-gray-900/50 border border-gray-700 flex items-center justify-center relative overflow-hidden">
215
+ <div class="absolute inset-0 flex items-center justify-center">
216
+ <div class="grid grid-cols-3 gap-8 opacity-20">
217
+ <div class="w-16 h-16 bg-blue-400/30 rounded-full coin-animation" style="animation-delay: 0s;"></div>
218
+ <div class="w-16 h-16 bg-green-400/30 rounded-full coin-animation" style="animation-delay: 0.5s;"></div>
219
+ <div class="w-16 h-16 bg-purple-400/30 rounded-full coin-animation" style="animation-delay: 1s;"></div>
220
+ <div class="w-16 h-16 bg-yellow-400/30 rounded-full coin-animation" style="animation-delay: 1.5s;"></div>
221
+ <div class="w-16 h-16 bg-red-400/30 rounded-full coin-animation" style="animation-delay: 0.3s;"></div>
222
+ <div class="w-16 h-16 bg-pink-400/30 rounded-full coin-animation" style="animation-delay: 0.8s;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </div>
224
  </div>
225
 
226
+ <div class="relative z-10 text-center">
227
+ <div class="w-24 h-24 mx-auto mb-6 bg-yellow-500/20 rounded-full flex items-center justify-center coin-animation">
228
+ <i class="fab fa-bitcoin text-yellow-500 text-4xl"></i>
229
+ </div>
230
+ <h3 class="text-2xl font-bold mb-2">Mining Bitcoin</h3>
231
+ <p class="text-gray-400 max-w-md mx-auto">Your device is contributing to the Bitcoin network and earning rewards</p>
232
  </div>
233
  </div>
234
  </div>
 
235
 
236
+ <!-- Transaction History -->
237
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
238
+ <div class="flex justify-between items-center mb-6">
239
+ <h2 class="text-xl font-bold">Recent Payouts</h2>
240
+ <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center">
241
+ View All <i class="fas fa-chevron-right ml-1"></i>
242
+ </button>
243
+ </div>
244
+
245
+ <div class="overflow-x-auto">
246
+ <table class="w-full">
247
+ <thead>
248
+ <tr class="text-gray-400 text-left border-b border-gray-700">
249
+ <th class="pb-3 font-medium">Date</th>
250
+ <th class="pb-3 font-medium">Coin</th>
251
+ <th class="pb-3 font-medium">Amount</th>
252
+ <th class="pb-3 font-medium">Value</th>
253
+ <th class="pb-3 font-medium">Status</th>
254
+ </tr>
255
+ </thead>
256
+ <tbody class="divide-y divide-gray-700">
257
+ <tr>
258
+ <td class="py-4">Jun 12, 2023</td>
259
+ <td class="py-4">
260
+ <div class="flex items-center">
261
+ <i class="fab fa-bitcoin text-yellow-500 mr-2"></i> BTC
262
+ </div>
263
+ </td>
264
+ <td class="py-4">0.00124</td>
265
+ <td class="py-4">$46.28</td>
266
+ <td class="py-4">
267
+ <span class="bg-green-900/30 text-green-500 px-3 py-1 rounded-full text-xs">Completed</span>
268
+ </td>
269
+ </tr>
270
+ <tr>
271
+ <td class="py-4">Jun 10, 2023</td>
272
+ <td class="py-4">
273
+ <div class="flex items-center">
274
+ <i class="fab fa-ethereum text-gray-400 mr-2"></i> ETH
275
+ </div>
276
+ </td>
277
+ <td class="py-4">0.042</td>
278
+ <td class="py-4">$78.12</td>
279
+ <td class="py-4">
280
+ <span class="bg-green-900/30 text-green-500 px-3 py-1 rounded-full text-xs">Completed</span>
281
+ </td>
282
+ </tr>
283
+ <tr>
284
+ <td class="py-4">Jun 8, 2023</td>
285
+ <td class="py-4">
286
+ <div class="flex items-center">
287
+ <i class="fas fa-dollar-sign text-blue-400 mr-2"></i> SOL
288
+ </div>
289
+ </td>
290
+ <td class="py-4">3.24</td>
291
+ <td class="py-4">$64.35</td>
292
+ <td class="py-4">
293
+ <span class="bg-yellow-900/30 text-yellow-500 px-3 py-1 rounded-full text-xs">Pending</span>
294
+ </td>
295
+ </tr>
296
+ </tbody>
297
+ </table>
298
  </div>
299
  </div>
 
300
 
301
+ <!-- Bot Instructions -->
302
+ <div class="mt-8 bg-gray-800 rounded-xl p-6 shadow-lg">
303
+ <h2 class="text-xl font-bold mb-4">How to Use the CoinBeacon Bot</h2>
304
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
305
+ <div class="bg-gray-700/50 p-5 rounded-lg">
306
+ <div class="w-12 h-12 rounded-full bg-blue-600/20 flex items-center justify-center mb-4">
307
+ <i class="fas fa-robot text-blue-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
  </div>
309
+ <h3 class="font-semibold mb-2">1. Connect Telegram</h3>
310
+ <p class="text-gray-400 text-sm">Start a chat with @CryptoMinerBot and link your account to begin mining.</p>
311
  </div>
312
+ <div class="bg-gray-700/50 p-5 rounded-lg">
313
+ <div class="w-12 h-12 rounded-full bg-green-600/20 flex items-center justify-center mb-4">
314
+ <i class="fas fa-play text-green-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  </div>
316
+ <h3 class="font-semibold mb-2">2. Start Mining</h3>
317
+ <p class="text-gray-400 text-sm">Use the /start command or click the button above to begin mining automatically.</p>
318
+ </div>
319
+ <div class="bg-gray-700/50 p-5 rounded-lg">
320
+ <div class="w-12 h-12 rounded-full bg-purple-600/20 flex items-center justify-center mb-4">
321
+ <i class="fas fa-wallet text-purple-400"></i>
322
  </div>
323
+ <h3 class="font-semibold mb-2">3. Withdraw Earnings</h3>
324
+ <p class="text-gray-400 text-sm">Use the /withdraw command to transfer your mined crypto to your wallet.</p>
325
  </div>
326
  </div>
327
  </div>
328
+ </div>
329
 
 
 
330
  <script>
331
+ // Simple mining control functionality
332
+ document.getElementById('startMining').addEventListener('click', function() {
333
+ this.classList.add('opacity-50', 'cursor-not-allowed');
334
+ this.classList.remove('bg-green-600', 'hover:bg-green-700');
335
+ this.innerHTML = '<i class="fas fa-check mr-2"></i> Mining Started';
336
+
337
+ document.getElementById('stopMining').classList.remove('opacity-50', 'cursor-not-allowed');
338
+ document.getElementById('stopMining').classList.add('bg-red-600', 'hover:bg-red-700');
339
+
340
+ // Simulate mining progress
341
+ let progress = 0;
342
+ const progressBar = document.querySelector('.progress-bar');
343
+ const interval = setInterval(() => {
344
+ progress += Math.random() * 2;
345
+ if(progress > 100) progress = 100;
346
+ progressBar.style.width = `${progress}%`;
347
+ }, 1000);
348
  });
349
+
350
+ document.getElementById('stopMining').addEventListener('click', function() {
351
+ this.classList.add('opacity-50', 'cursor-not-allowed');
352
+ this.classList.remove('bg-red-600', 'hover:bg-red-700');
353
+
354
+ document.getElementById('startMining').classList.remove('opacity-50', 'cursor-not-allowed');
355
+ document.getElementById('startMining').classList.add('bg-green-600', 'hover:bg-green-700');
356
+ document.getElementById('startMining').innerHTML = '<i class="fas fa-play mr-2"></i> Start Mining';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
357
  });
358
+
359
+ // Simulate changing mining stats
360
+ setInterval(() => {
361
+ const hashRate = document.querySelectorAll('.text-xl.font-bold')[1];
362
+ const currentRate = parseFloat(hashRate.textContent);
363
+ const newRate = (currentRate + (Math.random() * 0.2 - 0.1)).toFixed(2);
364
+ hashRate.textContent = `${newRate} <span class="text-sm font-normal">MH/s</span>`;
365
 
366
+ const shares = document.querySelectorAll('.text-xl.font-bold')[2];
367
+ const currentShares = parseInt(shares.textContent);
368
+ shares.textContent = currentShares + Math.floor(Math.random() * 3);
369
+
370
+ const reward = document.querySelectorAll('.text-xl.font-bold')[3];
371
+ const currentReward = parseFloat(reward.textContent);
372
+ const newReward = (currentReward + (Math.random() * 0.000001)).toFixed(6);
373
+ reward.textContent = `${newReward} <span class="text-sm font-normal">BTC</span>`;
374
+ }, 3000);
 
 
 
375
  </script>
376
  <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=stakmodsco/taskchain-token" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
377
  </html>