Hugging Face's logo

Spaces:
MoShow
/
awert
Running

App Files Community
MoShow commited on
Commit
678f466
·
verified ·
1 Parent(s): fbbb9a5

So the name is Iko Ikang (Words of the Flame/Fire), add more advanced African styling and concepts, it must be engaing more than any chatbot ever developed, it must captivattes African youths and make them talk to it infifnitely.. the AI that will be manning it is acleed MoStar AI - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +314 -754
index.html CHANGED
@@ -3,809 +3,369 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>FlameBorn Testnet Suite</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, #f97316 0%, #ef4444 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  }
13
- .test-card:hover {
14
- transform: translateY(-5px);
15
- box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2);
16
  }
17
- .progress-bar {
18
- transition: width 0.5s ease-in-out;
 
19
  }
20
- .africa-map {
21
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJDMTAuMDkgMiA4LjUgMy4xNSA4LjUgNC41QzguNSA1Ljg1IDEwLjA5IDcgMTIgN0MxMy45MSA3IDE1LjUgNS44NSAxNS41IDQuNUMxNS41IDMuMTUgMTMuOTEgMiAxMiAyTTkgOGMtMi4zNyAwLTQuNS43OS00LjUgMi41QzQuNSAxMi4yMSA2LjYzIDEzIDkgMTNTMTMuNSAxMi4yMSAxMy41IDEwLjVDMTMuNSA4Ljc5IDExLjM3IDggOSA4TTkgMTVDNi4xMyAxNSAyIDE1LjkyIDIgMTcuNVYyMEgxNlYxNy41QzE2IDE1LjkyIDExLjg3IDE1IDkgMTVNMTUgOEMyMC4zMyA4IDIxLjUgMTEuNTcgMjEuNSAxNC41QzIxLjUgMTUuNDMgMjEuNDQgMTYgMjAuNSAxNkMxOS4zMiAxNiAxOSAxNC44NiAxOSAxNFYxMkMxOSAxMC45NCAxOS4zMiA5Ljg5IDIwLjUgOUMyMC45NiA5IDIxLjE3IDkgMjEuNSA5QzIxLjUgOS4xOSAyMS41IDkuNTcgMjEuNSA5Ljc3QzIxLjUgMTAuMzggMjEuNSAxMC44OCAyMS41IDEwLjk4QzIxLjUgMTEuMDggMjEuNSAxMS4xMyAyMS41IDExLjEzQzIxLjUgMTEuMTMgMjEuNSAxMS4xIDIxLjUgMTFDMTkuNjUgMTEgMTguNSA5LjQzIDE4LjUgOC41QzE4LjUgNy41NyAxOS42NSA2IDE1IDZDMTAuMzUgNiAxMS41IDcuNTcgMTEuNSA4LjVDMTEuNSA5LjQzIDEwLjM1IDExIDguNSAxMUM4LjUgMTEgOC41IDExLjEzIDguNSAxMS4xM0M4LjUgMTEuMTMgOC41IDExLjA4IDguNSAxMC45OEM4LjUgMTAuODggOC41IDEwLjM4IDguNSA5Ljc3QzguNSA5LjU3IDguNSA5LjE5IDguNSA5QzguODMgOSA5LjA0IDkgOS41IDlDMTAuNjggOS4xMSAxMSAxMC4yNiAxMSAxMlYxNEMxMSAxNC44NiAxMC42OCAxNiA5LjUgMTZDOC41NiAxNiA4LjUgMTUuNDMgOC41IDE0LjVDOC41IDExLjU3IDkuNjcgOCAxNSA4WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
22
- background-repeat: no-repeat;
23
- background-position: center;
24
- background-size: contain;
25
  }
26
- @keyframes pulse {
 
27
  0%, 100% {
28
- opacity: 1;
29
  }
30
  50% {
31
- opacity: 0.5;
32
  }
33
  }
34
- .animate-pulse {
35
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
  </style>
38
  </head>
39
- <body class="bg-gray-100 min-h-screen">
40
- <!-- Header -->
41
- <header class="gradient-bg text-white shadow-lg">
42
- <div class="container mx-auto px-4 py-6">
43
- <div class="flex flex-col md:flex-row justify-between items-center">
44
- <div class="flex items-center mb-4 md:mb-0">
45
- <div class="africa-map w-10 h-10 mr-3"></div>
46
- <h1 class="text-2xl md:text-3xl font-bold">FlameBorn Testnet Suite</h1>
47
- </div>
48
- <div class="flex items-center space-x-4">
49
- <button id="connectWallet" class="px-3 py-1 bg-white text-orange-600 rounded-full text-sm font-medium hover:bg-opacity-100 transition-all">
50
- <i class="fas fa-wallet mr-1"></i> Connect Wallet
51
- </button>
52
- <div class="relative group">
53
- <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium flex items-center">
54
- <span class="w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse"></span>
55
- Testnet LIVE
56
- </span>
57
- <div class="absolute hidden group-hover:block bg-gray-800 text-xs p-2 rounded shadow-lg z-10 w-48">
58
- ChainID: 9818 (FlameBorn Testnet)<br>
59
- RPC: https://rpc.flameborn.io<br>
60
- Faucet: /faucet
61
- </div>
62
- </div>
63
- <a href="#deploy" class="px-3 py-1 bg-white text-orange-600 rounded-full text-sm font-medium hover:bg-opacity-100 transition-all">
64
- <i class="fas fa-rocket mr-1"></i> Quick Deploy
65
- </a>
66
- <a href="https://github.com/flameborn/testnet" target="_blank" class="px-3 py-1 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full text-sm font-medium transition-all">
67
- <i class="fab fa-github mr-1"></i> GitHub
68
- </a>
69
- </div>
70
- </div>
71
- </div>
72
- </header>
73
-
74
- <!-- Main Content -->
75
- <main class="container mx-auto px-4 py-8">
76
- <!-- Network Status Section -->
77
- <section class="mb-6 bg-white rounded-xl shadow-md p-6">
78
- <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
79
- <i class="fas fa-network-wired mr-2 text-blue-500"></i> Network Status
80
- </h2>
81
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
82
- <div class="bg-gray-50 p-4 rounded-lg">
83
- <p class="text-gray-500 text-sm">Current Block</p>
84
- <p class="font-bold text-gray-800" id="currentBlock">Loading...</p>
85
- </div>
86
- <div class="bg-gray-50 p-4 rounded-lg">
87
- <p class="text-gray-500 text-sm">Gas Price</p>
88
- <p class="font-bold text-gray-800" id="gasPrice">Loading...</p>
89
- </div>
90
- <div class="bg-gray-50 p-4 rounded-lg">
91
- <p class="text-gray-500 text-sm">Chain ID</p>
92
- <p class="font-bold text-gray-800">9818</p>
93
- </div>
94
- <div class="bg-gray-50 p-4 rounded-lg">
95
- <p class="text-gray-500 text-sm">Node Status</p>
96
- <p class="font-bold text-gray-800 flex items-center">
97
- <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
98
- Synced
99
- </p>
100
- </div>
101
  </div>
102
- </section>
103
-
104
- <!-- Overview Section -->
105
- <section class="mb-12 bg-white rounded-xl shadow-md p-6">
106
- <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
107
- <i class="fas fa-fire mr-2 text-orange-500"></i> Token Overview
108
- </h2>
109
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
110
- <div class="bg-gray-50 p-4 rounded-lg">
111
- <p class="text-gray-500 text-sm">Token Name</p>
112
- <p class="font-bold text-gray-800">FlameBorn</p>
113
- </div>
114
- <div class="bg-gray-50 p-4 rounded-lg">
115
- <p class="text-gray-500 text-sm">Symbol</p>
116
- <p class="font-bold text-gray-800">FLB</p>
117
- </div>
118
- <div class="bg-gray-50 p-4 rounded-lg">
119
- <p class="text-gray-500 text-sm">Decimals</p>
120
- <p class="font-bold text-gray-800">18</p>
121
- </div>
122
- <div class="bg-gray-50 p-4 rounded-lg">
123
- <p class="text-gray-500 text-sm">Total Supply</p>
124
- <p class="font-bold text-gray-800">1,000,000 FLB</p>
125
- </div>
126
- </div>
127
- <div class="flex flex-col md:flex-row justify-between items-center bg-gradient-to-r from-orange-50 to-red-50 p-4 rounded-lg">
128
- <div class="mb-4 md:mb-0">
129
- <h3 class="font-semibold text-gray-800">Testnet Deployment Status</h3>
130
- <p class="text-sm text-gray-600">Verify contract deployment across multiple networks</p>
131
- </div>
132
- <div class="flex space-x-2">
133
- <button class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg flex items-center">
134
- <i class="fas fa-bolt mr-2"></i> Deploy
135
  </button>
136
- <button class="px-4 py-2 border border-gray-300 hover:bg-gray-100 text-gray-700 rounded-lg flex items-center">
137
- <i class="fas fa-code-branch mr-2"></i> Verify
138
  </button>
139
  </div>
140
  </div>
141
- </section>
142
-
143
- <!-- Test Sections -->
144
- <section class="mb-12">
145
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
146
- <i class="fas fa-vial mr-2 text-blue-500"></i> Test Suite
147
- </h2>
148
 
149
- <!-- Progress Bar -->
150
- <div class="bg-white rounded-xl shadow-md p-6 mb-8">
151
- <div class="flex justify-between mb-2">
152
- <span class="text-sm font-medium text-gray-700">Test Progress</span>
153
- <span class="text-sm font-medium text-gray-700" id="progressPercentage">0%</span>
154
- </div>
155
- <div class="w-full bg-gray-200 rounded-full h-2.5">
156
- <div class="progress-bar h-2.5 rounded-full bg-green-500" style="width: 0%"></div>
157
  </div>
 
158
  </div>
159
 
160
- <!-- Network Selector -->
161
- <div class="bg-white rounded-xl shadow-md p-4 mb-6 flex flex-wrap items-center justify-between">
162
- <div class="mb-4 md:mb-0">
163
- <h3 class="font-semibold text-gray-800">Select Test Network</h3>
164
- <p class="text-sm text-gray-600">Run tests across multiple EVM chains</p>
165
- </div>
166
- <div class="flex flex-wrap gap-2">
167
- <button class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm flex items-center">
168
- <i class="fas fa-fire mr-1"></i> FlameBorn
169
  </button>
170
- <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm flex items-center">
171
- <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-4 h-4 mr-1"> Sepolia
172
- </button>
173
- <button class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm flex items-center">
174
- <img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="w-4 h-4 mr-1"> Mumbai
175
- </button>
176
- <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm flex items-center">
177
- <img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-4 h-4 mr-1"> BSC Testnet
178
- </button>
179
- </div>
180
- </div>
181
-
182
- <!-- Test Cards -->
183
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
184
- <!-- Contract Metadata -->
185
- <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
186
- <div class="flex items-center mb-4">
187
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
188
- <i class="fas fa-file-contract text-blue-500"></i>
189
- </div>
190
- <h3 class="font-bold text-gray-800">I. Contract Metadata</h3>
191
- </div>
192
- <ul class="space-y-3 text-sm text-gray-600">
193
- <li class="flex items-center">
194
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
195
- <span>Name/Symbol/Decimals</span>
196
- </li>
197
- <li class="flex items-center">
198
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
199
- <span>Total Supply</span>
200
- </li>
201
- <li class="flex items-center">
202
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
203
- <span>Admin Roles</span>
204
- </li>
205
- <li class="flex items-center">
206
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
207
- <span>African Identity Init</span>
208
- </li>
209
- </ul>
210
- <button class="mt-4 w-full py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-sm font-medium flex items-center justify-center">
211
- <i class="fas fa-play mr-2"></i> Run Tests
212
- </button>
213
- </div>
214
-
215
- <!-- ERC20 Functionality -->
216
- <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
217
- <div class="flex items-center mb-4">
218
- <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
219
- <i class="fas fa-exchange-alt text-purple-500"></i>
220
- </div>
221
- <h3 class="font-bold text-gray-800">II. ERC20 Functionality</h3>
222
- </div>
223
- <ul class="space-y-3 text-sm text-gray-600">
224
- <li class="flex items-center">
225
- <i class="fas fa-spinner animate-spin text-yellow-500 mr-2"></i>
226
- <span>Transfer Basic</span>
227
- </li>
228
- <li class="flex items-center">
229
- <i class="far fa-circle text-gray-300 mr-2"></i>
230
- <span>Transfer All</span>
231
- </li>
232
- <li class="flex items-center">
233
- <i class="far fa-circle text-gray-300 mr-2"></i>
234
- <span>Over-Transfer</span>
235
- </li>
236
- <li class="flex items-center">
237
- <i class="far fa-circle text-gray-300 mr-2"></i>
238
- <span>Approve/Allowance</span>
239
- </li>
240
- </ul>
241
- <button class="mt-4 w-full py-2 bg-purple-50 hover:bg-purple-100 text-purple-600 rounded-lg text-sm font-medium flex items-center justify-center">
242
- <i class="fas fa-play mr-2"></i> Run Tests
243
- </button>
244
- </div>
245
-
246
- <!-- Roles & Permissions -->
247
- <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
248
- <div class="flex items-center mb-4">
249
- <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
250
- <i class="fas fa-user-shield text-red-500"></i>
251
- </div>
252
- <h3 class="font-bold text-gray-800">III. Roles & Permissions</h3>
253
- </div>
254
- <ul class="space-y-3 text-sm text-gray-600">
255
- <li class="flex items-center">
256
- <i class="far fa-circle text-gray-300 mr-2"></i>
257
- <span>Role Assign/Revoke</span>
258
- </li>
259
- <li class="flex items-center">
260
- <i class="far fa-circle text-gray-300 mr-2"></i>
261
- <span>Unauthorized Grant</span>
262
- </li>
263
- <li class="flex items-center">
264
- <i class="far fa-circle text-gray-300 mr-2"></i>
265
- <span>Role-Protected Functions</span>
266
- </li>
267
- <li class="flex items-center">
268
- <i class="far fa-circle text-gray-300 mr-2"></i>
269
- <span>Event Logs</span>
270
- </li>
271
- </ul>
272
- <button class="mt-4 w-full py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg text-sm font-medium flex items-center justify-center">
273
- <i class="fas fa-play mr-2"></i> Run Tests
274
- </button>
275
- </div>
276
-
277
- <!-- African Identity -->
278
- <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
279
- <div class="flex items-center mb-4">
280
- <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
281
- <i class="fas fa-passport text-green-500"></i>
282
- </div>
283
- <h3 class="font-bold text-gray-800">IV. African Identity</h3>
284
- </div>
285
- <ul class="space-y-3 text-sm text-gray-600">
286
- <li class="flex items-center">
287
- <i class="far fa-circle text-gray-300 mr-2"></i>
288
- <span>Identity Registration</span>
289
- </li>
290
- <li class="flex items-center">
291
- <i class="far fa-circle text-gray-300 mr-2"></i>
292
- <span>Re-Registration Prevention</span>
293
- </li>
294
- <li class="flex items-center">
295
- <i class="far fa-circle text-gray-300 mr-2"></i>
296
- <span>Admin Verification</span>
297
- </li>
298
- <li class="flex items-center">
299
- <i class="far fa-circle text-gray-300 mr-2"></i>
300
- <span>Edge-Case Countries</span>
301
- </li>
302
- </ul>
303
- <button class="mt-4 w-full py-2 bg-green-50 hover:bg-green-100 text-green-600 rounded-lg text-sm font-medium flex items-center justify-center">
304
- <i class="fas fa-play mr-2"></i> Run Tests
305
- </button>
306
- </div>
307
-
308
- <!-- Security & Abuse -->
309
- <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
310
- <div class="flex items-center mb-4">
311
- <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
312
- <i class="fas fa-shield-alt text-yellow-500"></i>
313
- </div>
314
- <h3 class="font-bold text-gray-800">V. Security & Abuse</h3>
315
- </div>
316
- <ul class="space-y-3 text-sm text-gray-600">
317
- <li class="flex items-center">
318
- <i class="far fa-circle text-gray-300 mr-2"></i>
319
- <span>Reentrancy Protection</span>
320
- </li>
321
- <li class="flex items-center">
322
- <i class="far fa-circle text-gray-300 mr-2"></i>
323
- <span>Blacklist/Pause</span>
324
- </li>
325
- <li class="flex items-center">
326
- <i class="far fa-circle text-gray-300 mr-2"></i>
327
- <span>Large Transfer Handling</span>
328
- </li>
329
- <li class="flex items-center">
330
- <i class="far fa-circle text-gray-300 mr-2"></i>
331
- <span>Gas Limit Stress</span>
332
- </li>
333
- </ul>
334
- <button class="mt-4 w-full py-2 bg-yellow-50 hover:bg-yellow-100 text-yellow-600 rounded-lg text-sm font-medium flex items-center justify-center">
335
- <i class="fas fa-play mr-2"></i> Run Tests
336
- </button>
337
- </div>
338
-
339
- <!-- Multichain & UX -->
340
- <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
341
- <div class="flex items-center mb-4">
342
- <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
343
- <i class="fas fa-mobile-alt text-indigo-500"></i>
344
- </div>
345
- <h3 class="font-bold text-gray-800">VII. Multichain & UX</h3>
346
- </div>
347
- <ul class="space-y-3 text-sm text-gray-600">
348
- <li class="flex items-center">
349
- <i class="far fa-circle text-gray-300 mr-2"></i>
350
- <span>Explorer Verification</span>
351
- </li>
352
- <li class="flex items-center">
353
- <i class="far fa-circle text-gray-300 mr-2"></i>
354
- <span>Wallet Display</span>
355
- </li>
356
- <li class="flex items-center">
357
- <i class="far fa-circle text-gray-300 mr-2"></i>
358
- <span>Explorer Events</span>
359
- </li>
360
- <li class="flex items-center">
361
- <i class="far fa-circle text-gray-300 mr-2"></i>
362
- <span>Wallet Integration</span>
363
- </li>
364
- </ul>
365
- <button class="mt-4 w-full py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 rounded-lg text-sm font-medium flex items-center justify-center">
366
- <i class="fas fa-play mr-2"></i> Run Tests
367
- </button>
368
- </div>
369
- </div>
370
- </section>
371
-
372
- <!-- Contract Verification -->
373
- <section class="mb-12 bg-white rounded-xl shadow-md p-6">
374
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
375
- <i class="fas fa-check-circle mr-2 text-green-500"></i> Contract Verification
376
- </h2>
377
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
378
- <div class="bg-gray-50 p-6 rounded-lg">
379
- <h3 class="font-semibold text-gray-700 mb-4">Verify Contract</h3>
380
- <div class="space-y-4">
381
- <div>
382
- <label class="block text-sm font-medium text-gray-700 mb-1">Contract Address</label>
383
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500">
384
- </div>
385
- <div>
386
- <label class="block text-sm font-medium text-gray-700 mb-1">Compiler Version</label>
387
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500">
388
- <option>0.8.19</option>
389
- <option>0.8.20</option>
390
- <option>0.8.21</option>
391
- </select>
392
- </div>
393
- <button class="w-full py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-md font-medium">
394
- Verify & Publish
395
  </button>
396
  </div>
397
  </div>
398
- <div class="bg-gray-50 p-6 rounded-lg">
399
- <h3 class="font-semibold text-gray-700 mb-4">Verified Contracts</h3>
400
- <div class="overflow-x-auto">
401
- <table class="min-w-full divide-y divide-gray-200">
402
- <thead>
403
- <tr>
404
- <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Address</th>
405
- <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Date</th>
406
- </tr>
407
- </thead>
408
- <tbody class="divide-y divide-gray-200">
409
- <tr>
410
- <td class="px-4 py-2 text-sm text-gray-500">0x8f7a...3e4b</td>
411
- <td class="px-4 py-2 text-sm text-gray-500">2023-11-15</td>
412
- </tr>
413
- <tr>
414
- <td class="px-4 py-2 text-sm text-gray-500">0x5b32...9d1f</td>
415
- <td class="px-4 py-2 text-sm text-gray-500">2023-11-14</td>
416
- </tr>
417
- </tbody>
418
- </table>
419
- </div>
420
- </div>
421
- </div>
422
- </section>
423
-
424
- <!-- Faucet Section -->
425
- <section class="mb-12 bg-white rounded-xl shadow-md p-6" id="faucet">
426
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
427
- <i class="fas fa-faucet mr-2 text-blue-500"></i> Testnet Faucet
428
- </h2>
429
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
430
- <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg">
431
- <h3 class="font-semibold text-gray-700 mb-4">Request Test Tokens</h3>
432
- <div class="space-y-4">
433
- <div>
434
- <label class="block text-sm font-medium text-gray-700 mb-1">Wallet Address</label>
435
- <input type="text" id="faucetAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
436
- </div>
437
- <div>
438
- <label class="block text-sm font-medium text-gray-700 mb-1">Token Type</label>
439
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
440
- <option>FLB (Native Token)</option>
441
- <option>Test USDT</option>
442
- <option>Test USDC</option>
443
- </select>
444
- </div>
445
- <button id="requestFaucet" class="w-full py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md font-medium">
446
- Request 1000 FLB
447
- </button>
448
- </div>
449
- </div>
450
- <div class="bg-gray-50 p-6 rounded-lg">
451
- <h3 class="font-semibold text-gray-700 mb-4">Faucet Stats</h3>
452
- <div class="space-y-4">
453
- <div class="flex justify-between">
454
- <span class="text-sm text-gray-600">Total Distributed</span>
455
- <span class="font-medium">5,420,000 FLB</span>
456
- </div>
457
- <div class="flex justify-between">
458
- <span class="text-sm text-gray-600">Requests Today</span>
459
- <span class="font-medium">142</span>
460
- </div>
461
- <div class="flex justify-between">
462
- <span class="text-sm text-gray-600">Your Daily Limit</span>
463
- <span class="font-medium">5,000 FLB</span>
464
- </div>
465
- </div>
466
- </div>
467
- </div>
468
- </section>
469
-
470
- <!-- Code Snippets -->
471
- <section class="mb-12 bg-white rounded-xl shadow-md p-6">
472
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
473
- <i class="fas fa-code mr-2 text-gray-500"></i> Test Code Examples
474
- </h2>
475
-
476
- <div class="space-y-6">
477
- <!-- Contract Metadata Example -->
478
- <div>
479
- <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
480
- <i class="fas fa-file-contract mr-2 text-blue-500"></i> Contract Metadata Test
481
- </h3>
482
- <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
483
- <pre class="text-gray-300 text-sm"><code>describe("FlameBorn Token Metadata", () => {
484
- it("Should have correct name, symbol and decimals", async () => {
485
- expect(await token.name()).to.equal("FlameBorn");
486
- expect(await token.symbol()).to.equal("FLB");
487
- expect(await token.decimals()).to.equal(18);
488
- });
489
-
490
- it("Should have correct initial supply", async () => {
491
- expect(await token.totalSupply())
492
- .to.equal(ethers.utils.parseUnits("1000000", 18));
493
- });
494
- });</code></pre>
495
- </div>
496
- </div>
497
 
498
- <!-- African Identity Example -->
499
- <div>
500
- <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
501
- <i class="fas fa-passport mr-2 text-green-500"></i> African Identity Test
502
- </h3>
503
- <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
504
- <pre class="text-gray-300 text-sm"><code>describe("African Identity Features", () => {
505
- it("Should allow African identity registration", async () => {
506
- await token.connect(user).registerAfricanID("NGA", "123456");
507
- expect(await token.isAfrican(user.address)).to.be.true;
508
- });
509
-
510
- it("Should prevent re-registration", async () => {
511
- await token.connect(user).registerAfricanID("KEN", "789012");
512
- await expect(
513
- token.connect(user).registerAfricanID("ZAF", "345678")
514
- ).to.be.revertedWith("Already registered");
515
- });
516
-
517
- it("Should allow admin verification", async () => {
518
- await token.connect(admin).verifyAfricanIdentity(user.address, true);
519
- expect(await token.isVerified(user.address)).to.be.true;
520
- });
521
- });</code></pre>
522
- </div>
523
- </div>
524
-
525
- <!-- Transfer Example -->
526
- <div>
527
- <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
528
- <i class="fas fa-exchange-alt mr-2 text-purple-500"></i> Transfer Functionality Test
529
- </h3>
530
- <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
531
- <pre class="text-gray-300 text-sm"><code>describe("Token Transfers", () => {
532
- it("Should transfer tokens between accounts", async () => {
533
- await token.transfer(recipient.address, 100);
534
- expect(await token.balanceOf(recipient.address)).to.equal(100);
535
- });
536
-
537
- it("Should fail when transferring more than balance", async () => {
538
- await expect(
539
- token.transfer(recipient.address, ethers.constants.MaxUint256)
540
- ).to.be.revertedWith("ERC20: transfer amount exceeds balance");
541
- });
542
-
543
- it("Should emit Transfer event", async () => {
544
- await expect(token.transfer(recipient.address, 50))
545
- .to.emit(token, "Transfer")
546
- .withArgs(owner.address, recipient.address, 50);
547
- });
548
- });</code></pre>
549
  </div>
 
550
  </div>
551
  </div>
552
- </section>
553
 
554
- <!-- Leaderboard Section -->
555
- <section class="bg-white rounded-xl shadow-md p-6 mb-8">
556
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
557
- <i class="fas fa-trophy mr-2 text-yellow-500"></i> Testnet Leaderboard
558
- </h2>
559
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
560
- <div class="bg-gradient-to-br from-orange-50 to-red-50 p-4 rounded-lg">
561
- <h3 class="font-semibold text-gray-800 mb-2">Top Developers</h3>
562
- <ol class="space-y-2 text-sm">
563
- <li class="flex justify-between">
564
- <span>0x8f7a...3e4b</span>
565
- <span class="font-medium">142 tests</span>
566
- </li>
567
- <li class="flex justify-between">
568
- <span>0x5b32...9d1f</span>
569
- <span class="font-medium">118 tests</span>
570
- </li>
571
- <li class="flex justify-between">
572
- <span>0x1c7d...4a2e</span>
573
- <span class="font-medium">97 tests</span>
574
- </li>
575
- </ol>
576
- </div>
577
- <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
578
- <h3 class="font-semibold text-gray-800 mb-2">Bug Bounties</h3>
579
- <ol class="space-y-2 text-sm">
580
- <li class="flex justify-between">
581
- <span>Critical</span>
582
- <span class="font-medium">5,000 FLB</span>
583
- </li>
584
- <li class="flex justify-between">
585
- <span>High</span>
586
- <span class="font-medium">2,500 FLB</span>
587
- </li>
588
- <li class="flex justify-between">
589
- <span>Medium</span>
590
- <span class="font-medium">1,000 FLB</span>
591
- </li>
592
- </ol>
593
- </div>
594
- <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
595
- <h3 class="font-semibold text-gray-800 mb-2">Network Stats</h3>
596
- <ul class="space-y-2 text-sm">
597
- <li class="flex justify-between">
598
- <span>Total Tests</span>
599
- <span class="font-medium">1,842</span>
600
- </li>
601
- <li class="flex justify-between">
602
- <span>Contracts Deployed</span>
603
- <span class="font-medium">317</span>
604
- </li>
605
- <li class="flex justify-between">
606
- <span>Unique Users</span>
607
- <span class="font-medium">189</span>
608
- </li>
609
- </ul>
610
  </div>
 
 
611
  </div>
612
- </section>
613
-
614
- <!-- Manual QA Section -->
615
- <section class="bg-white rounded-xl shadow-md p-6 mb-12">
616
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
617
- <i class="fas fa-clipboard-check mr-2 text-orange-500"></i> Manual QA Checklist
618
- </h2>
619
-
620
- <div class="overflow-x-auto">
621
- <table class="min-w-full divide-y divide-gray-200">
622
- <thead class="bg-gray-50">
623
- <tr>
624
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Step</th>
625
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
626
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expected</th>
627
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
628
- </tr>
629
- </thead>
630
- <tbody class="bg-white divide-y divide-gray-200">
631
- <tr>
632
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
633
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deploy</td>
634
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Use testnet faucet, deploy contract</td>
635
- <td class="px-6 py-4 whitespace-nowrap">
636
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
637
- Completed
638
- </span>
639
- </td>
640
- </tr>
641
- <tr>
642
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
643
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Role/ownership</td>
644
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Query admin roles</td>
645
- <td class="px-6 py-4 whitespace-nowrap">
646
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
647
- Pending
648
- </span>
649
- </td>
650
- </tr>
651
- <tr>
652
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
653
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transfer</td>
654
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transfer tokens to 2–3 accounts</td>
655
- <td class="px-6 py-4 whitespace-nowrap">
656
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
657
- Not Started
658
- </span>
659
- </td>
660
- </tr>
661
- <tr>
662
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</td>
663
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">KYC/identity</td>
664
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Register and verify African identity</td>
665
- <td class="px-6 py-4 whitespace-nowrap">
666
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
667
- Not Started
668
- </span>
669
- </td>
670
- </tr>
671
- <tr>
672
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5</td>
673
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Explorer check</td>
674
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Confirm code/events on Blockscout/BscScan</td>
675
- <td class="px-6 py-4 whitespace-nowrap">
676
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
677
- Not Started
678
- </span>
679
- </td>
680
- </tr>
681
- </tbody>
682
- </table>
683
- </div>
684
- </section>
685
- </main>
686
-
687
- <!-- Footer -->
688
- <footer class="gradient-bg text-white py-8">
689
- <div class="container mx-auto px-4">
690
- <div class="flex flex-col md:flex-row justify-between items-center">
691
- <div class="mb-4 md:mb-0">
692
- <h2 class="text-xl font-bold flex items-center">
693
- <div class="africa-map w-8 h-8 mr-2"></div>
694
- FlameBorn Testnet Suite
695
- </h2>
696
- <p class="text-sm opacity-80 mt-1">ERC20 Token with African Identity Features</p>
697
- </div>
698
- <div class="flex space-x-4">
699
- <a href="#" class="hover:opacity-75 transition-opacity">
700
- <i class="fab fa-github text-xl"></i>
701
- </a>
702
- <a href="#" class="hover:opacity-75 transition-opacity">
703
- <i class="fab fa-twitter text-xl"></i>
704
- </a>
705
- <a href="#" class="hover:opacity-75 transition-opacity">
706
- <i class="fab fa-discord text-xl"></i>
707
- </a>
708
- <a href="#" class="hover:opacity-75 transition-opacity">
709
- <i class="fab fa-medium text-xl"></i>
710
- </a>
711
  </div>
 
 
712
  </div>
713
- <div class="border-t border-white border-opacity-20 mt-6 pt-6 text-sm text-center md:text-left">
714
- <div class="flex flex-col md:flex-row justify-between">
715
- <div class="mb-4 md:mb-0">
716
- <p>© 2023 FlameBorn Project. All rights reserved.</p>
717
- <p class="text-xs opacity-70 mt-1">Testnet tokens have no monetary value</p>
718
- </div>
719
- <div class="flex flex-wrap gap-x-4 gap-y-2 justify-center md:justify-end">
720
- <a href="#" class="hover:underline">Terms</a>
721
- <a href="#" class="hover:underline">Privacy</a>
722
- <a href="#" class="hover:underline">Bug Bounty</a>
723
- <a href="#" class="hover:underline">Documentation</a>
724
- <a href="#" class="hover:underline">Audit Reports</a>
725
- </div>
726
  </div>
 
 
727
  </div>
728
  </div>
729
- </footer>
730
-
731
  <script>
732
- // Wallet connection
733
- document.getElementById('connectWallet').addEventListener('click', async () => {
734
- if (window.ethereum) {
735
- try {
736
- const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
737
- console.log('Connected:', accounts[0]);
738
- document.getElementById('connectWallet').innerHTML =
739
- `<i class="fas fa-check-circle mr-1"></i> ${accounts[0].slice(0, 6)}...${accounts[0].slice(-4)}`;
740
- document.getElementById('faucetAddress').value = accounts[0];
741
- } catch (error) {
742
- console.error('User rejected request:', error);
743
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
744
  } else {
745
- alert('Please install MetaMask!');
 
746
  }
747
- });
748
-
749
- // Faucet request
750
- document.getElementById('requestFaucet').addEventListener('click', () => {
751
- const address = document.getElementById('faucetAddress').value;
752
- if (!address) {
753
- alert('Please enter a wallet address');
754
- return;
 
 
 
 
 
 
 
 
 
 
755
  }
756
- if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
757
- alert('Invalid Ethereum address');
758
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
759
  }
760
- alert(`1000 FLB requested for ${address}. This is a simulation - on a real testnet, tokens would be sent.`);
761
- });
762
-
763
- // Simulate network status updates
764
- function updateNetworkStatus() {
765
- document.getElementById('currentBlock').textContent =
766
- Math.floor(Math.random() * 1000000).toLocaleString();
767
- document.getElementById('gasPrice').textContent =
768
- `${(Math.random() * 50).toFixed(2)} Gwei`;
769
- }
770
- setInterval(updateNetworkStatus, 5000);
771
- updateNetworkStatus();
772
-
773
- // Simulate progress bar animation
774
- document.addEventListener('DOMContentLoaded', function() {
775
- const progressBar = document.querySelector('.progress-bar');
776
- const progressPercentage = document.getElementById('progressPercentage');
777
 
778
- // Simulate loading progress
779
- let progress = 0;
780
- const interval = setInterval(() => {
781
- progress += 5;
782
- if (progress > 25) {
783
- clearInterval(interval);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
784
  } else {
785
- progressBar.style.width = `${progress}%`;
786
- progressPercentage.textContent = `${progress}%`;
787
  }
788
- }, 300);
789
 
790
- // Add click handlers for test buttons
791
- document.querySelectorAll('.test-card button').forEach(button => {
792
- button.addEventListener('click', function() {
793
- const card = this.closest('.test-card');
794
- const spinner = card.querySelector('.fa-spinner');
795
-
796
- if (spinner) {
797
- // Show loading state
798
- spinner.classList.remove('fa-spinner', 'animate-spin', 'text-yellow-500');
799
- spinner.classList.add('fa-check-circle', 'text-green-500');
800
-
801
- // Update progress
802
- progress += 10;
803
- if (progress > 100) progress = 100;
804
- progressBar.style.width = `${progress}%`;
805
- progressPercentage.textContent = `${progress}%`;
806
- }
807
- });
808
- });
809
  });
810
  </script>
811
  <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=MoShow/awert" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Infinite Skills - African Voice Assistant</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
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f5f5f5;
15
+ }
16
+
17
+ .african-pattern-bg {
18
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2U5YzQwMCIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjwvc3ZnPg==');
19
+ opacity: 0.1;
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ z-index: -1;
26
+ }
27
+
28
+ .voice-wave {
29
+ position: relative;
30
+ height: 60px;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+
36
+ .voice-wave span {
37
+ display: block;
38
+ width: 4px;
39
+ height: 20px;
40
+ background: #e9c400;
41
+ margin: 0 2px;
42
+ border-radius: 10px;
43
+ animation: voice-wave 1.5s infinite ease-in-out;
44
+ }
45
+
46
+ .voice-wave span:nth-child(2) {
47
+ animation-delay: 0.2s;
48
  }
49
+
50
+ .voice-wave span:nth-child(3) {
51
+ animation-delay: 0.4s;
52
  }
53
+
54
+ .voice-wave span:nth-child(4) {
55
+ animation-delay: 0.6s;
56
  }
57
+
58
+ .voice-wave span:nth-child(5) {
59
+ animation-delay: 0.8s;
 
 
60
  }
61
+
62
+ @keyframes voice-wave {
63
  0%, 100% {
64
+ transform: scaleY(0.5);
65
  }
66
  50% {
67
+ transform: scaleY(2);
68
  }
69
  }
70
+
71
+ .response-bubble {
72
+ position: relative;
73
+ background: #f8f9fa;
74
+ border-radius: 18px;
75
+ padding: 12px 16px;
76
+ margin: 8px 0;
77
+ max-width: 80%;
78
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
79
+ }
80
+
81
+ .response-bubble:after {
82
+ content: '';
83
+ position: absolute;
84
+ bottom: -10px;
85
+ left: 20px;
86
+ border-width: 10px 10px 0;
87
+ border-style: solid;
88
+ border-color: #f8f9fa transparent;
89
+ }
90
+
91
+ .user-bubble {
92
+ background: #e9c400;
93
+ color: white;
94
+ align-self: flex-end;
95
+ }
96
+
97
+ .user-bubble:after {
98
+ right: 20px;
99
+ left: auto;
100
+ border-width: 10px 10px 0;
101
+ border-style: solid;
102
+ border-color: #e9c400 transparent;
103
+ }
104
+
105
+ .typing-indicator {
106
+ display: flex;
107
+ padding: 8px 12px;
108
+ background: #f8f9fa;
109
+ border-radius: 18px;
110
+ align-self: flex-start;
111
+ margin: 8px 0;
112
+ }
113
+
114
+ .typing-indicator span {
115
+ width: 6px;
116
+ height: 6px;
117
+ background: #6c757d;
118
+ border-radius: 50%;
119
+ margin: 0 2px;
120
+ animation: typing 1s infinite ease-in-out;
121
+ }
122
+
123
+ .typing-indicator span:nth-child(2) {
124
+ animation-delay: 0.2s;
125
+ }
126
+
127
+ .typing-indicator span:nth-child(3) {
128
+ animation-delay: 0.4s;
129
+ }
130
+
131
+ @keyframes typing {
132
+ 0%, 100% {
133
+ transform: translateY(0);
134
+ }
135
+ 50% {
136
+ transform: translateY(-5px);
137
+ }
138
  }
139
  </style>
140
  </head>
141
+ <body class="min-h-screen bg-gray-100">
142
+ <div class="african-pattern-bg"></div>
143
+
144
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
145
+ <header class="text-center mb-8">
146
+ <h1 class="text-4xl font-bold text-yellow-700 mb-2">Infinite Skills</h1>
147
+ <p class="text-lg text-gray-600">African Context Voice Assistant</p>
148
+ <div class="mt-4 flex justify-center">
149
+ <div class="w-16 h-1 bg-yellow-600 rounded-full"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  </div>
151
+ </header>
152
+
153
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
154
+ <div class="bg-yellow-600 py-4 px-6 flex items-center">
155
+ <div class="w-12 h-12 rounded-full bg-yellow-700 flex items-center justify-center text-white">
156
+ <i class="fas fa-headphones text-2xl"></i>
157
+ </div>
158
+ <div class="ml-4">
159
+ <h3 class="text-white font-semibold">African Voice Assistant</h3>
160
+ <p class="text-yellow-100 text-sm">Ready to assist you</p>
161
+ </div>
162
+ <div class="ml-auto flex space-x-2">
163
+ <button class="w-8 h-8 rounded-full bg-yellow-700 text-white flex items-center justify-center">
164
+ <i class="fas fa-cog"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  </button>
166
+ <button class="w-8 h-8 rounded-full bg-yellow-700 text-white flex items-center justify-center">
167
+ <i class="fas fa-times"></i>
168
  </button>
169
  </div>
170
  </div>
 
 
 
 
 
 
 
171
 
172
+ <div class="p-4 h-96 overflow-y-auto flex flex-col" id="chat-container">
173
+ <div class="response-bubble">
174
+ <p>Hello my brother/sister! How can I help you today? Remember I understand African context only.</p>
 
 
 
 
 
175
  </div>
176
+ <!-- Chat messages will appear here -->
177
  </div>
178
 
179
+ <div class="border-t border-gray-200 p-4 bg-gray-50">
180
+ <div class="flex items-center">
181
+ <button id="voice-btn" class="w-12 h-12 rounded-full bg-yellow-600 text-white flex items-center justify-center hover:bg-yellow-700 transition">
182
+ <i class="fas fa-microphone text-xl"></i>
 
 
 
 
 
183
  </button>
184
+ <div class="ml-4 flex-1 relative">
185
+ <input type="text" id="user-input" placeholder="Speak or type your request..." class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent">
186
+ <button id="send-btn" class="absolute right-3 top-3 text-gray-400 hover:text-yellow-600">
187
+ <i class="fas fa-paper-plane"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  </button>
189
  </div>
190
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
 
192
+ <div class="mt-4 flex justify-center hidden" id="voice-wave">
193
+ <div class="voice-wave">
194
+ <span></span>
195
+ <span></span>
196
+ <span></span>
197
+ <span></span>
198
+ <span></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  </div>
200
+ <p class="ml-3 text-gray-600">Listening for African context...</p>
201
  </div>
202
  </div>
203
+ </div>
204
 
205
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
206
+ <div class="bg-white p-4 rounded-lg shadow-md">
207
+ <div class="text-yellow-600 mb-2">
208
+ <i class="fas fa-globe-africa text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  </div>
210
+ <h3 class="font-semibold text-gray-800">African Context</h3>
211
+ <p class="text-gray-600 text-sm mt-1">Understands local dialects, proverbs and cultural references</p>
212
  </div>
213
+ <div class="bg-white p-4 rounded-lg shadow-md">
214
+ <div class="text-yellow-600 mb-2">
215
+ <i class="fas fa-comments text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
+ <h3 class="font-semibold text-gray-800">Local Languages</h3>
218
+ <p class="text-gray-600 text-sm mt-1">Supports Pidgin, Swahili, Yoruba and more in English voice</p>
219
  </div>
220
+ <div class="bg-white p-4 rounded-lg shadow-md">
221
+ <div class="text-yellow-600 mb-2">
222
+ <i class="fas fa-lightbulb text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
223
  </div>
224
+ <h3 class="font-semibold text-gray-800">Smart Assistance</h3>
225
+ <p class="text-gray-600 text-sm mt-1">Provides solutions relevant to African lifestyle</p>
226
  </div>
227
  </div>
228
+ </div>
229
+
230
  <script>
231
+ document.addEventListener('DOMContentLoaded', function() {
232
+ const voiceBtn = document.getElementById('voice-btn');
233
+ const sendBtn = document.getElementById('send-btn');
234
+ const userInput = document.getElementById('user-input');
235
+ const chatContainer = document.getElementById('chat-container');
236
+ const voiceWave = document.getElementById('voice-wave');
237
+
238
+ // African context responses
239
+ const africanResponses = {
240
+ "greeting": ["Nna, how you dey?", "Sawubona my brother/sister!", "Kedu! How far?", "Akwaba! How you dey do?"],
241
+ "help": ["I fit help you with African matters only o!", "Abeg, ask me anything about our African way.", "I sabi African matters pass, wetin you wan know?"],
242
+ "time": ["Time dey go like NEPA bill for Nigeria!", "E be like say time don dey for {current_time}. No waste am!"],
243
+ "joke": ["Why the chicken cross the road? To show the goat say road no be only for am!", "Wetin dey worry lion? Nothing, na just him nature!"],
244
+ "proverb": ["The child who is not embraced by the village will burn it down to feel its warmth.", "Until the lions have their own historians, the history of the hunt will always glorify the hunter."],
245
+ "food": ["You wan chop amala with ewedu? Or maybe fufu and egusi soup?", "Jollof rice na the real deal, no be small thing!"],
246
+ "weather": ["Sun dey bake like plantain for roadside!", "Rain dey fall like say heaven don open!"],
247
+ "default": ["Abeg, I no understand. Make you repeat am.", "Oga, na African matters I sabi. Try again."]
248
+ };
249
+
250
+ // Speech recognition setup
251
+ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
252
+ let recognition;
253
+
254
+ if (SpeechRecognition) {
255
+ recognition = new SpeechRecognition();
256
+ recognition.continuous = false;
257
+ recognition.interimResults = false;
258
+ recognition.lang = 'en-US';
259
+
260
+ recognition.onstart = function() {
261
+ voiceWave.classList.remove('hidden');
262
+ voiceBtn.innerHTML = '<i class="fas fa-microphone-slash text-xl"></i>';
263
+ };
264
+
265
+ recognition.onend = function() {
266
+ voiceWave.classList.add('hidden');
267
+ voiceBtn.innerHTML = '<i class="fas fa-microphone text-xl"></i>';
268
+ };
269
+
270
+ recognition.onresult = function(event) {
271
+ const transcript = event.results[0][0].transcript;
272
+ userInput.value = transcript;
273
+ processUserInput(transcript);
274
+ };
275
+
276
+ recognition.onerror = function(event) {
277
+ console.error('Speech recognition error', event.error);
278
+ addMessage("System", "Abeg, I no hear you well. Try again.", false);
279
+ voiceWave.classList.add('hidden');
280
+ voiceBtn.innerHTML = '<i class="fas fa-microphone text-xl"></i>';
281
+ };
282
  } else {
283
+ voiceBtn.disabled = true;
284
+ voiceBtn.title = "Speech recognition not supported in your browser";
285
  }
286
+
287
+ // Event listeners
288
+ voiceBtn.addEventListener('click', toggleVoiceRecognition);
289
+ sendBtn.addEventListener('click', () => processUserInput(userInput.value));
290
+ userInput.addEventListener('keypress', (e) => {
291
+ if (e.key === 'Enter') {
292
+ processUserInput(userInput.value);
293
+ }
294
+ });
295
+
296
+ function toggleVoiceRecognition() {
297
+ if (recognition) {
298
+ if (voiceWave.classList.contains('hidden')) {
299
+ recognition.start();
300
+ } else {
301
+ recognition.stop();
302
+ }
303
+ }
304
  }
305
+
306
+ function processUserInput(input) {
307
+ if (!input.trim()) return;
308
+
309
+ // Add user message to chat
310
+ addMessage("You", input, true);
311
+ userInput.value = '';
312
+
313
+ // Show typing indicator
314
+ const typingIndicator = document.createElement('div');
315
+ typingIndicator.className = 'typing-indicator';
316
+ typingIndicator.innerHTML = '<span></span><span></span><span></span>';
317
+ chatContainer.appendChild(typingIndicator);
318
+ chatContainer.scrollTop = chatContainer.scrollHeight;
319
+
320
+ // Simulate processing delay
321
+ setTimeout(() => {
322
+ // Remove typing indicator
323
+ chatContainer.removeChild(typingIndicator);
324
+
325
+ // Generate response
326
+ const response = generateAfricanResponse(input);
327
+ addMessage("African Assistant", response, false);
328
+ }, 1500);
329
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
 
331
+ function addMessage(sender, message, isUser) {
332
+ const messageDiv = document.createElement('div');
333
+ messageDiv.className = isUser ? 'response-bubble user-bubble' : 'response-bubble';
334
+ messageDiv.innerHTML = `<p><strong>${sender}:</strong> ${message}</p>`;
335
+ chatContainer.appendChild(messageDiv);
336
+ chatContainer.scrollTop = chatContainer.scrollHeight;
337
+ }
338
+
339
+ function generateAfricanResponse(input) {
340
+ input = input.toLowerCase();
341
+
342
+ // Get current time for time-related responses
343
+ const now = new Date();
344
+ const currentTime = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
345
+
346
+ // Check for keywords and respond accordingly
347
+ if (input.includes('hello') || input.includes('hi') || input.includes('how you')) {
348
+ return getRandomResponse(africanResponses.greeting);
349
+ } else if (input.includes('help') || input.includes('assist')) {
350
+ return getRandomResponse(africanResponses.help);
351
+ } else if (input.includes('time') || input.includes('what time')) {
352
+ return africanResponses.time[0].replace('{current_time}', currentTime);
353
+ } else if (input.includes('joke') || input.includes('make me laugh')) {
354
+ return getRandomResponse(africanResponses.joke);
355
+ } else if (input.includes('proverb') || input.includes('wise word')) {
356
+ return getRandomResponse(africanResponses.proverb);
357
+ } else if (input.includes('food') || input.includes('chop') || input.includes('eat')) {
358
+ return getRandomResponse(africanResponses.food);
359
+ } else if (input.includes('weather') || input.includes('rain') || input.includes('sun')) {
360
+ return getRandomResponse(africanResponses.weather);
361
  } else {
362
+ return getRandomResponse(africanResponses.default);
 
363
  }
364
+ }
365
 
366
+ function getRandomResponse(responses) {
367
+ return responses[Math.floor(Math.random() * responses.length)];
368
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  });
370
  </script>
371
  <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=MoShow/awert" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>