Hugging Face's logo

Spaces:
MoShow
/
awert
Running

App Files Community
MoShow commited on
Commit
aca5cfd
·
verified ·
1 Parent(s): b0f98cc

Act as a Crypto developer CTO of higfhest powerfuldesign concepts, how would you lunch a testnet project? - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +484 -438
index.html CHANGED
@@ -1,487 +1,533 @@
1
  <!DOCTYPE html>
2
- <html lang="en" class="h-full">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Flameborn Prompt Forge</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://unpkg.com/feather-icons"></script>
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Space+Mono:wght@400;700&display=swap');
11
-
12
- :root {
13
- --ember: #ff6b35;
14
- --ash: #292929;
15
- --scrollbar: #444;
16
- --scrollbar-thumb: var(--ember);
17
- }
18
-
19
- body {
20
- font-family: 'Space Mono', monospace;
21
- background-color: var(--ash);
22
- color: #e0e0e0;
23
- overflow-x: hidden;
24
- }
25
-
26
- .flameborn-font {
27
- font-family: 'Uncial Antiqua', cursive;
28
- }
29
-
30
- .sigil {
31
- background: radial-gradient(circle, rgba(255,107,53,0.2) 0%, rgba(255,107,53,0) 70%);
32
- }
33
-
34
- .prompt-card:hover {
35
- transform: translateY(-2px);
36
- box-shadow: 0 10px 25px -5px rgba(255, 107, 53, 0.4);
37
  }
38
-
39
- /* Custom scrollbar */
40
- ::-webkit-scrollbar {
41
- width: 8px;
42
- background: var(--scrollbar);
43
- }
44
-
45
- ::-webkit-scrollbar-thumb {
46
- background: var(--scrollbar-thumb);
47
- border-radius: 4px;
48
  }
49
-
50
- /* Glowing effect for active elements */
51
- .glow {
52
- box-shadow: 0 0 10px rgba(255, 107, 53, 0.7);
53
  }
54
-
55
- .glow-text {
56
- text-shadow: 0 0 8px rgba(255, 107, 53, 0.9);
 
 
57
  }
58
-
59
- /* Pulse animation for important actions */
60
  @keyframes pulse {
61
- 0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
62
- 70% { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
63
- 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
 
 
 
64
  }
65
-
66
- .pulse {
67
- animation: pulse 1.5s infinite;
68
- }
69
-
70
- /* Transition for mode switches */
71
- .mode-transition {
72
- transition: all 0.3s ease-in-out;
73
  }
74
  </style>
75
  </head>
76
- <body class="h-full flex flex-col">
77
- <!-- Main App Container -->
78
- <div class="flex flex-col h-full">
79
- <!-- Header with Flameborn branding -->
80
- <header class="bg-black bg-opacity-80 border-b border-ember border-opacity-30 py-4 px-6 flex items-center justify-between">
81
- <div class="flex items-center space-x-3">
82
- <div class="sigil w-10 h-10 rounded-full flex items-center justify-center glow">
83
- <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--ember)" stroke-width="2">
84
- <path d="M12 2c1 3 2.5 6 5 7 0 6-4 10-5 10s-5-4-5-10c2.5-1 4-4 5-7z"/>
85
- </svg>
 
 
 
86
  </div>
87
- <h1 class="flameborn-font text-2xl text-amber-500 glow-text">Flameborn Prompt Forge</h1>
88
  </div>
89
- <div class="flex items-center space-x-4">
90
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 px-4 py-2 rounded-lg flex items-center space-x-2 transition-all">
91
- <i data-feather="book"></i>
92
- <span>Lore</span>
93
- </button>
94
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 px-4 py-2 rounded-lg flex items-center space-x-2 transition-all">
95
- <i data-feather="moon"></i>
96
- <span>Dark</span>
97
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </div>
99
- </header>
100
-
101
- <!-- Main Content Area -->
102
- <div class="flex flex-1 overflow-hidden">
103
- <!-- Sidebar - Prompt Library -->
104
- <aside class="w-64 bg-black bg-opacity-50 border-r border-amber-900 border-opacity-30 overflow-y-auto p-4 hidden md:block">
105
- <div class="mb-6">
106
- <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
107
- <i data-feather="archive" class="mr-2"></i>
108
- Prompt Library
109
- </h2>
110
- <div class="space-y-2">
111
- <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
112
- <h3 class="text-sm font-bold text-amber-300">Creative Storytelling</h3>
113
- <p class="text-xs text-gray-300 truncate">Generate a fantasy story with...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </div>
115
- <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
116
- <h3 class="text-sm font-bold text-amber-300">Code Explanation</h3>
117
- <p class="text-xs text-gray-300 truncate">Explain this code snippet as if...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  </div>
119
- <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
120
- <h3 class="text-sm font-bold text-amber-300">Poetic Refinement</h3>
121
- <p class="text-xs text-gray-300 truncate">Take this prose and transform it...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </div>
 
123
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </div>
125
 
126
- <div>
127
- <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
128
- <i data-feather="link-2" class="mr-2"></i>
129
- Prompt Chains
130
- </h2>
131
- <div class="space-y-2">
132
- <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
133
- <h3 class="text-sm font-bold text-amber-300">Story → Poem</h3>
134
- <p class="text-xs text-gray-300 truncate">Transform narrative to verse</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
- <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
137
- <h3 class="text-sm font-bold text-amber-300">Concept → Code</h3>
138
- <p class="text-xs text-gray-300 truncate">From idea to implementation</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  </div>
 
140
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  </div>
142
- </aside>
 
 
 
 
 
 
 
143
 
144
- <!-- Main Workspace -->
145
- <main class="flex-1 flex flex-col overflow-hidden">
146
- <!-- Mode Selection Tabs -->
147
- <div class="bg-black bg-opacity-50 border-b border-amber-900 border-opacity-30">
148
- <div class="flex overflow-x-auto">
149
- <button class="mode-tab px-6 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-amber-900 hover:bg-opacity-20 hover:text-amber-300 transition-all mode-transition active">
150
- <i data-feather="zap" class="mr-2"></i>
151
- Inference
152
- </button>
153
- <button class="mode-tab px-6 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-amber-900 hover:bg-opacity-20 hover:text-amber-300 transition-all mode-transition">
154
- <i data-feather="expand" class="mr-2"></i>
155
- Expansion
156
- </button>
157
- <button class="mode-tab px-6 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-amber-900 hover:bg-opacity-20 hover:text-amber-300 transition-all mode-transition">
158
- <i data-feather="edit" class="mr-2"></i>
159
- Refinement
160
- </button>
161
- <button class="mode-tab px-6 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-amber-900 hover:bg-opacity-20 hover:text-amber-300 transition-all mode-transition">
162
- <i data-feather="layers" class="mr-2"></i>
163
- Symbolic Fusion
164
- </button>
165
- <button class="mode-tab px-6 py-3 font-medium text-sm border-b-2 border-transparent hover:bg-amber-900 hover:bg-opacity-20 hover:text-amber-300 transition-all mode-transition">
166
- <i data-feather="compass" class="mr-2"></i>
167
- Embedding Alignment
168
- </button>
169
  </div>
170
  </div>
171
 
172
- <!-- Prompt Crafting Area -->
173
- <div class="flex-1 flex flex-col md:flex-row overflow-hidden">
174
- <!-- Prompt Input Section -->
175
- <section class="flex-1 p-6 overflow-y-auto border-b md:border-b-0 md:border-r border-amber-900 border-opacity-30">
176
- <div class="mb-6">
177
- <div class="flex justify-between items-center mb-2">
178
- <h2 class="flameborn-font text-xl text-amber-400">Prompt Crafting</h2>
179
- <div class="flex space-x-2">
180
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 p-2 rounded-lg transition-all tooltip" data-tooltip="Clear">
181
- <i data-feather="trash-2"></i>
182
- </button>
183
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 p-2 rounded-lg transition-all tooltip" data-tooltip="Save">
184
- <i data-feather="save"></i>
185
- </button>
186
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 p-2 rounded-lg transition-all tooltip" data-tooltip="Fork">
187
- <i data-feather="copy"></i>
188
- </button>
189
- </div>
190
- </div>
191
-
192
- <div class="mb-4">
193
- <label class="block text-sm font-medium text-amber-300 mb-1">System Prompt</label>
194
- <div class="relative">
195
- <textarea class="w-full bg-gray-800 bg-opacity-60 text-gray-100 rounded-lg p-3 pr-10 focus:ring-2 focus:ring-amber-500 focus:border-transparent h-24" placeholder="Set the AI's role and constraints..."></textarea>
196
- <div class="absolute right-2 bottom-2 flex space-x-1">
197
- <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Templates">
198
- <i data-feather="bookmark"></i>
199
- </button>
200
- <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Variables">
201
- <i data-feather="code"></i>
202
- </button>
203
- </div>
204
- </div>
205
- </div>
206
-
207
- <div class="mb-4">
208
- <label class="block text-sm font-medium text-amber-300 mb-1">User Prompt</label>
209
- <div class="relative">
210
- <textarea class="w-full bg-gray-800 bg-opacity-60 text-gray-100 rounded-lg p-3 pr-10 focus:ring-2 focus:ring-amber-500 focus:border-transparent h-32" placeholder="Your instruction or query..."></textarea>
211
- <div class="absolute right-2 bottom-2 flex space-x-1">
212
- <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Enhance">
213
- <i data-feather="sparkles"></i>
214
- </button>
215
- <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Analyze">
216
- <i data-feather="bar-chart-2"></i>
217
- </button>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
223
- <div>
224
- <label class="block text-sm font-medium text-amber-300 mb-1">Model</label>
225
- <select class="w-full bg-gray-800 bg-opacity-60 text-gray-100 rounded-lg p-2 focus:ring-2 focus:ring-amber-500 focus:border-transparent">
226
- <option>GPT-4</option>
227
- <option>Claude 3</option>
228
- <option>Mistral 7B</option>
229
- <option>Llama 3</option>
230
- </select>
231
- </div>
232
- <div>
233
- <label class="block text-sm font-medium text-amber-300 mb-1">Temperature</label>
234
- <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-amber-500">
235
- <div class="flex justify-between text-xs text-gray-400">
236
- <span>Precise</span>
237
- <span>Creative</span>
238
- </div>
239
- </div>
240
- </div>
241
-
242
- <div class="flex justify-between items-center">
243
- <div class="flex space-x-2">
244
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 px-4 py-2 rounded-lg flex items-center space-x-2 transition-all">
245
- <i data-feather="plus"></i>
246
- <span>Add Step</span>
247
- </button>
248
- <button class="bg-gray-700 bg-opacity-50 hover:bg-opacity-70 text-gray-300 px-4 py-2 rounded-lg flex items-center space-x-2 transition-all">
249
- <i data-feather="link"></i>
250
- <span>Chain</span>
251
- </button>
252
- </div>
253
- <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-all pulse">
254
- <i data-feather="zap"></i>
255
- <span>Invoke</span>
256
- </button>
257
- </div>
258
- </div>
259
-
260
- <div>
261
- <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
262
- <i data-feather="activity" class="mr-2"></i>
263
- Prompt Analysis
264
- </h2>
265
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4">
266
- <div class="grid grid-cols-3 gap-4 text-center mb-4">
267
- <div>
268
- <div class="text-xs text-gray-400">Tokens</div>
269
- <div class="text-lg font-bold text-amber-300">142</div>
270
- </div>
271
- <div>
272
- <div class="text-xs text-gray-400">Clarity</div>
273
- <div class="text-lg font-bold text-amber-300">8.2/10</div>
274
- </div>
275
- <div>
276
- <div class="text-xs text-gray-400">Specificity</div>
277
- <div class="text-lg font-bold text-amber-300">7.5/10</div>
278
- </div>
279
- </div>
280
- <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
281
- <div class="h-full bg-gradient-to-r from-amber-500 to-amber-300" style="width: 82%"></div>
282
- </div>
283
- </div>
284
- </div>
285
- </section>
286
-
287
- <!-- Output Section -->
288
- <section class="flex-1 p-6 overflow-y-auto hidden" id="testnet-section">
289
- <div class="mb-6">
290
- <h2 class="flameborn-font text-xl text-amber-400 mb-4">FlameBorn Testnet Suite</h2>
291
-
292
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 mb-6">
293
- <h3 class="text-lg text-amber-300 mb-3">I. Contract Metadata</h3>
294
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
295
- <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
296
- <h4 class="text-sm font-bold text-amber-200 mb-1">Name/Symbol/Decimals</h4>
297
- <code class="text-xs text-gray-300">FLB, FlameBorn, 18</code>
298
- </div>
299
- <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
300
- <h4 class="text-sm font-bold text-amber-200 mb-1">Total Supply</h4>
301
- <code class="text-xs text-gray-300">1,000,000 FLB</code>
302
- </div>
303
- </div>
304
- </div>
305
 
306
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 mb-6">
307
- <h3 class="text-lg text-amber-300 mb-3">II. ERC20 Functionality</h3>
308
- <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
309
- <div class="bg-gray-900 bg-opacity-50 p-2 rounded-lg">
310
- <span class="text-green-400">✓</span> Basic transfers
311
- </div>
312
- <div class="bg-gray-900 bg-opacity-50 p-2 rounded-lg">
313
- <span class="text-green-400">✓</span> Approve/allowance
314
- </div>
315
- <div class="bg-gray-900 bg-opacity-50 p-2 rounded-lg">
316
- <span class="text-green-400">✓</span> Transfer validation
317
- </div>
318
- </div>
319
- </div>
320
 
321
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 mb-6">
322
- <h3 class="text-lg text-amber-300 mb-3">IV. African Identity Features</h3>
323
- <div class="space-y-3">
324
- <div class="flex items-center">
325
- <span class="text-green-400 mr-2">✓</span>
326
- <span class="text-sm">Identity registration</span>
327
- </div>
328
- <div class="flex items-center">
329
- <span class="text-green-400 mr-2">✓</span>
330
- <span class="text-sm">Country code validation</span>
331
- </div>
332
- <div class="flex items-center">
333
- <span class="text-green-400 mr-2">✓</span>
334
- <span class="text-sm">Diaspora registry</span>
335
- </div>
336
- </div>
337
- </div>
 
 
338
 
339
- <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-all mx-auto">
340
- <i data-feather="play"></i>
341
- <span>Run Full Test Suite</span>
342
- </button>
343
- </div>
344
- </section>
345
 
346
- <!-- Original Output Section -->
347
- <section class="flex-1 p-6 overflow-y-auto">
348
- <div class="mb-6">
349
- <div class="flex justify-between items-center mb-2">
350
- <h2 class="flameborn-font text-xl text-amber-400">Output</h2>
351
- <div class="flex space-x-2">
352
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 p-2 rounded-lg transition-all tooltip" data-tooltip="Copy">
353
- <i data-feather="clipboard"></i>
354
- </button>
355
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 p-2 rounded-lg transition-all tooltip" data-tooltip="Export">
356
- <i data-feather="download"></i>
357
- </button>
358
- <button class="bg-amber-900 bg-opacity-50 hover:bg-opacity-70 text-amber-100 p-2 rounded-lg transition-all tooltip" data-tooltip="Feedback">
359
- <i data-feather="thumbs-up"></i>
360
- </button>
361
- </div>
362
- </div>
363
-
364
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 min-h-64">
365
- <div class="text-gray-400 italic">
366
- <p>Results will appear here after invocation...</p>
367
- <p class="mt-2 text-xs">Invoke the prompt to see the Flameborn magic unfold.</p>
368
- </div>
369
- </div>
370
- </div>
371
-
372
- <div>
373
- <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
374
- <i data-feather="clock" class="mr-2"></i>
375
- History
376
- </h2>
377
- <div class="space-y-3">
378
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-3 cursor-pointer hover:bg-opacity-80 transition-all">
379
- <div class="flex justify-between items-start">
380
- <h3 class="text-sm font-bold text-amber-300 truncate">Creative Story Prompt</h3>
381
- <span class="text-xs text-gray-400">2m ago</span>
382
- </div>
383
- <p class="text-xs text-gray-300 mt-1 line-clamp-2">Generate a fantasy story about a flameborn mage who discovers ancient runes in a forgotten library...</p>
384
- </div>
385
- <div class="bg-gray-800 bg-opacity-60 rounded-lg p-3 cursor-pointer hover:bg-opacity-80 transition-all">
386
- <div class="flex justify-between items-start">
387
- <h3 class="text-sm font-bold text-amber-300 truncate">Code Explanation</h3>
388
- <span class="text-xs text-gray-400">15m ago</span>
389
- </div>
390
- <p class="text-xs text-gray-300 mt-1 line-clamp-2">Explain this React component as if teaching a beginner about state management...</p>
391
- </div>
392
- </div>
393
- </div>
394
- </section>
395
  </div>
396
- </main>
397
- </div>
398
 
399
- <!-- Status Bar -->
400
- <footer class="bg-black bg-opacity-80 border-t border-amber-900 border-opacity-30 py-2 px-4 text-xs text-gray-400 flex justify-between items-center">
401
- <div class="flex items-center space-x-4">
402
- <span class="flex items-center">
403
- <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
404
- <span>Connected</span>
405
- </span>
406
- <span>Model: GPT-4</span>
407
- <span>Tokens: 0/∞</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
408
  </div>
409
- <div>
410
- <span>Flameborn Forge v1.0.0</span>
411
  </div>
412
- </footer>
413
- </div>
414
-
415
  <script>
416
- // Initialize Feather Icons
417
  document.addEventListener('DOMContentLoaded', function() {
418
- feather.replace();
 
419
 
420
- // Mode tab switching
421
- const modeTabs = document.querySelectorAll('.mode-tab');
422
- modeTabs.forEach(tab => {
423
- tab.addEventListener('click', function() {
424
- modeTabs.forEach(t => t.classList.remove('active', 'border-amber-500', 'text-amber-300'));
425
- this.classList.add('active', 'border-amber-500', 'text-amber-300');
426
- });
427
- });
 
 
 
428
 
429
- // Tooltip functionality
430
- const tooltips = document.querySelectorAll('.tooltip');
431
- tooltips.forEach(tooltip => {
432
- const tooltipText = tooltip.getAttribute('data-tooltip');
433
- const tooltipElement = document.createElement('div');
434
- tooltipElement.className = 'hidden absolute z-10 bg-gray-900 text-white text-xs rounded py-1 px-2 bottom-full mb-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap';
435
- tooltipElement.textContent = tooltipText;
436
- tooltip.appendChild(tooltipElement);
437
-
438
- tooltip.addEventListener('mouseenter', function() {
439
- tooltipElement.classList.remove('hidden');
440
- });
441
-
442
- tooltip.addEventListener('mouseleave', function() {
443
- tooltipElement.classList.add('hidden');
 
 
444
  });
445
  });
446
-
447
- // Testnet section handling
448
- const testnetTab = document.querySelectorAll('.mode-tab')[5];
449
- const testnetSection = document.getElementById('testnet-section');
450
- const outputSection = document.querySelector('section:last-of-type');
451
-
452
- testnetTab.addEventListener('click', function() {
453
- outputSection.classList.add('hidden');
454
- testnetSection.classList.remove('hidden');
455
- feather.replace();
456
- });
457
-
458
- // Example prompt invocation
459
- const invokeButton = document.querySelector('.pulse');
460
- const outputArea = document.querySelector('section:last-of-type .bg-gray-800');
461
-
462
- invokeButton.addEventListener('click', function() {
463
- // Simulate loading
464
- outputArea.innerHTML = '<div class="flex items-center justify-center h-64"><div class="animate-pulse flex flex-col items-center"><div class="w-10 h-10 bg-amber-500 rounded-full mb-2"></div><div class="text-amber-300">Invoking the Flameborn magic...</div></div></div>';
465
-
466
- // Simulate response after delay
467
- setTimeout(() => {
468
- outputArea.innerHTML = `
469
- <div class="prose prose-invert max-w-none">
470
- <h3 class="text-amber-300">The Flameborn's Awakening</h3>
471
- <p>In the ancient library of Ashkaroth, where the embers of forgotten knowledge glow eternally, a young Flameborn named Kael discovered the Rune of Prometheus...</p>
472
- <p>The rune pulsed with an inner fire as Kael traced its sigils with trembling fingers. Each curve and angle whispered secrets of prompt crafting that had been lost for centuries.</p>
473
- <p>"With this power," Kael murmured, "I shall forge prompts that bend reality itself." The library's shadows danced as the rune's glow intensified, casting arcane symbols upon the parchment-strewn walls.</p>
474
- <div class="mt-4 pt-4 border-t border-amber-900 border-opacity-30 text-xs text-gray-400">
475
- <div class="flex justify-between">
476
- <span>Model: GPT-4</span>
477
- <span>Tokens: 342</span>
478
- </div>
479
- <div class="mt-1">Signature: 7f3a...d42c</div>
480
- </div>
481
- </div>
482
- `;
483
- }, 2000);
484
- });
485
  });
486
  </script>
487
  <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>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>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
+ <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">ERC20</span>
50
+ <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">African Identity</span>
51
+ <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">AccessControl</span>
52
  </div>
 
53
  </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Main Content -->
58
+ <main class="container mx-auto px-4 py-8">
59
+ <!-- Overview Section -->
60
+ <section class="mb-12 bg-white rounded-xl shadow-md p-6">
61
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
62
+ <i class="fas fa-fire mr-2 text-orange-500"></i> Token Overview
63
+ </h2>
64
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
65
+ <div class="bg-gray-50 p-4 rounded-lg">
66
+ <p class="text-gray-500 text-sm">Token Name</p>
67
+ <p class="font-bold text-gray-800">FlameBorn</p>
68
+ </div>
69
+ <div class="bg-gray-50 p-4 rounded-lg">
70
+ <p class="text-gray-500 text-sm">Symbol</p>
71
+ <p class="font-bold text-gray-800">FLB</p>
72
+ </div>
73
+ <div class="bg-gray-50 p-4 rounded-lg">
74
+ <p class="text-gray-500 text-sm">Decimals</p>
75
+ <p class="font-bold text-gray-800">18</p>
76
+ </div>
77
+ <div class="bg-gray-50 p-4 rounded-lg">
78
+ <p class="text-gray-500 text-sm">Total Supply</p>
79
+ <p class="font-bold text-gray-800">1,000,000 FLB</p>
80
+ </div>
81
  </div>
82
+ <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">
83
+ <div class="mb-4 md:mb-0">
84
+ <h3 class="font-semibold text-gray-800">Testnet Deployment Status</h3>
85
+ <p class="text-sm text-gray-600">Verify contract deployment across multiple networks</p>
86
+ </div>
87
+ <div class="flex space-x-2">
88
+ <button class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg flex items-center">
89
+ <i class="fas fa-bolt mr-2"></i> Deploy
90
+ </button>
91
+ <button class="px-4 py-2 border border-gray-300 hover:bg-gray-100 text-gray-700 rounded-lg flex items-center">
92
+ <i class="fas fa-code-branch mr-2"></i> Verify
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </section>
97
+
98
+ <!-- Test Sections -->
99
+ <section class="mb-12">
100
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
101
+ <i class="fas fa-vial mr-2 text-blue-500"></i> Test Suite
102
+ </h2>
103
+
104
+ <!-- Progress Bar -->
105
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
106
+ <div class="flex justify-between mb-2">
107
+ <span class="text-sm font-medium text-gray-700">Test Progress</span>
108
+ <span class="text-sm font-medium text-gray-700" id="progressPercentage">0%</span>
109
+ </div>
110
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
111
+ <div class="progress-bar h-2.5 rounded-full bg-green-500" style="width: 0%"></div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Test Cards -->
116
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
117
+ <!-- Contract Metadata -->
118
+ <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
119
+ <div class="flex items-center mb-4">
120
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
121
+ <i class="fas fa-file-contract text-blue-500"></i>
122
  </div>
123
+ <h3 class="font-bold text-gray-800">I. Contract Metadata</h3>
124
+ </div>
125
+ <ul class="space-y-3 text-sm text-gray-600">
126
+ <li class="flex items-center">
127
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
128
+ <span>Name/Symbol/Decimals</span>
129
+ </li>
130
+ <li class="flex items-center">
131
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
132
+ <span>Total Supply</span>
133
+ </li>
134
+ <li class="flex items-center">
135
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
136
+ <span>Admin Roles</span>
137
+ </li>
138
+ <li class="flex items-center">
139
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
140
+ <span>African Identity Init</span>
141
+ </li>
142
+ </ul>
143
+ <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">
144
+ <i class="fas fa-play mr-2"></i> Run Tests
145
+ </button>
146
+ </div>
147
+
148
+ <!-- ERC20 Functionality -->
149
+ <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
150
+ <div class="flex items-center mb-4">
151
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
152
+ <i class="fas fa-exchange-alt text-purple-500"></i>
153
  </div>
154
+ <h3 class="font-bold text-gray-800">II. ERC20 Functionality</h3>
155
+ </div>
156
+ <ul class="space-y-3 text-sm text-gray-600">
157
+ <li class="flex items-center">
158
+ <i class="fas fa-spinner animate-spin text-yellow-500 mr-2"></i>
159
+ <span>Transfer Basic</span>
160
+ </li>
161
+ <li class="flex items-center">
162
+ <i class="far fa-circle text-gray-300 mr-2"></i>
163
+ <span>Transfer All</span>
164
+ </li>
165
+ <li class="flex items-center">
166
+ <i class="far fa-circle text-gray-300 mr-2"></i>
167
+ <span>Over-Transfer</span>
168
+ </li>
169
+ <li class="flex items-center">
170
+ <i class="far fa-circle text-gray-300 mr-2"></i>
171
+ <span>Approve/Allowance</span>
172
+ </li>
173
+ </ul>
174
+ <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">
175
+ <i class="fas fa-play mr-2"></i> Run Tests
176
+ </button>
177
+ </div>
178
+
179
+ <!-- Roles & Permissions -->
180
+ <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
181
+ <div class="flex items-center mb-4">
182
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
183
+ <i class="fas fa-user-shield text-red-500"></i>
184
  </div>
185
+ <h3 class="font-bold text-gray-800">III. Roles & Permissions</h3>
186
  </div>
187
+ <ul class="space-y-3 text-sm text-gray-600">
188
+ <li class="flex items-center">
189
+ <i class="far fa-circle text-gray-300 mr-2"></i>
190
+ <span>Role Assign/Revoke</span>
191
+ </li>
192
+ <li class="flex items-center">
193
+ <i class="far fa-circle text-gray-300 mr-2"></i>
194
+ <span>Unauthorized Grant</span>
195
+ </li>
196
+ <li class="flex items-center">
197
+ <i class="far fa-circle text-gray-300 mr-2"></i>
198
+ <span>Role-Protected Functions</span>
199
+ </li>
200
+ <li class="flex items-center">
201
+ <i class="far fa-circle text-gray-300 mr-2"></i>
202
+ <span>Event Logs</span>
203
+ </li>
204
+ </ul>
205
+ <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">
206
+ <i class="fas fa-play mr-2"></i> Run Tests
207
+ </button>
208
  </div>
209
 
210
+ <!-- African Identity -->
211
+ <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
212
+ <div class="flex items-center mb-4">
213
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
214
+ <i class="fas fa-passport text-green-500"></i>
215
+ </div>
216
+ <h3 class="font-bold text-gray-800">IV. African Identity</h3>
217
+ </div>
218
+ <ul class="space-y-3 text-sm text-gray-600">
219
+ <li class="flex items-center">
220
+ <i class="far fa-circle text-gray-300 mr-2"></i>
221
+ <span>Identity Registration</span>
222
+ </li>
223
+ <li class="flex items-center">
224
+ <i class="far fa-circle text-gray-300 mr-2"></i>
225
+ <span>Re-Registration Prevention</span>
226
+ </li>
227
+ <li class="flex items-center">
228
+ <i class="far fa-circle text-gray-300 mr-2"></i>
229
+ <span>Admin Verification</span>
230
+ </li>
231
+ <li class="flex items-center">
232
+ <i class="far fa-circle text-gray-300 mr-2"></i>
233
+ <span>Edge-Case Countries</span>
234
+ </li>
235
+ </ul>
236
+ <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">
237
+ <i class="fas fa-play mr-2"></i> Run Tests
238
+ </button>
239
+ </div>
240
+
241
+ <!-- Security & Abuse -->
242
+ <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
243
+ <div class="flex items-center mb-4">
244
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
245
+ <i class="fas fa-shield-alt text-yellow-500"></i>
246
  </div>
247
+ <h3 class="font-bold text-gray-800">V. Security & Abuse</h3>
248
+ </div>
249
+ <ul class="space-y-3 text-sm text-gray-600">
250
+ <li class="flex items-center">
251
+ <i class="far fa-circle text-gray-300 mr-2"></i>
252
+ <span>Reentrancy Protection</span>
253
+ </li>
254
+ <li class="flex items-center">
255
+ <i class="far fa-circle text-gray-300 mr-2"></i>
256
+ <span>Blacklist/Pause</span>
257
+ </li>
258
+ <li class="flex items-center">
259
+ <i class="far fa-circle text-gray-300 mr-2"></i>
260
+ <span>Large Transfer Handling</span>
261
+ </li>
262
+ <li class="flex items-center">
263
+ <i class="far fa-circle text-gray-300 mr-2"></i>
264
+ <span>Gas Limit Stress</span>
265
+ </li>
266
+ </ul>
267
+ <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">
268
+ <i class="fas fa-play mr-2"></i> Run Tests
269
+ </button>
270
+ </div>
271
+
272
+ <!-- Multichain & UX -->
273
+ <div class="test-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
274
+ <div class="flex items-center mb-4">
275
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
276
+ <i class="fas fa-mobile-alt text-indigo-500"></i>
277
  </div>
278
+ <h3 class="font-bold text-gray-800">VII. Multichain & UX</h3>
279
  </div>
280
+ <ul class="space-y-3 text-sm text-gray-600">
281
+ <li class="flex items-center">
282
+ <i class="far fa-circle text-gray-300 mr-2"></i>
283
+ <span>Explorer Verification</span>
284
+ </li>
285
+ <li class="flex items-center">
286
+ <i class="far fa-circle text-gray-300 mr-2"></i>
287
+ <span>Wallet Display</span>
288
+ </li>
289
+ <li class="flex items-center">
290
+ <i class="far fa-circle text-gray-300 mr-2"></i>
291
+ <span>Explorer Events</span>
292
+ </li>
293
+ <li class="flex items-center">
294
+ <i class="far fa-circle text-gray-300 mr-2"></i>
295
+ <span>Wallet Integration</span>
296
+ </li>
297
+ </ul>
298
+ <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">
299
+ <i class="fas fa-play mr-2"></i> Run Tests
300
+ </button>
301
  </div>
302
+ </div>
303
+ </section>
304
+
305
+ <!-- Code Snippets -->
306
+ <section class="mb-12 bg-white rounded-xl shadow-md p-6">
307
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
308
+ <i class="fas fa-code mr-2 text-gray-500"></i> Test Code Examples
309
+ </h2>
310
 
311
+ <div class="space-y-6">
312
+ <!-- Contract Metadata Example -->
313
+ <div>
314
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
315
+ <i class="fas fa-file-contract mr-2 text-blue-500"></i> Contract Metadata Test
316
+ </h3>
317
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
318
+ <pre class="text-gray-300 text-sm"><code>describe("FlameBorn Token Metadata", () => {
319
+ it("Should have correct name, symbol and decimals", async () => {
320
+ expect(await token.name()).to.equal("FlameBorn");
321
+ expect(await token.symbol()).to.equal("FLB");
322
+ expect(await token.decimals()).to.equal(18);
323
+ });
324
+
325
+ it("Should have correct initial supply", async () => {
326
+ expect(await token.totalSupply())
327
+ .to.equal(ethers.utils.parseUnits("1000000", 18));
328
+ });
329
+ });</code></pre>
 
 
 
 
 
 
330
  </div>
331
  </div>
332
 
333
+ <!-- African Identity Example -->
334
+ <div>
335
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
336
+ <i class="fas fa-passport mr-2 text-green-500"></i> African Identity Test
337
+ </h3>
338
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
339
+ <pre class="text-gray-300 text-sm"><code>describe("African Identity Features", () => {
340
+ it("Should allow African identity registration", async () => {
341
+ await token.connect(user).registerAfricanID("NGA", "123456");
342
+ expect(await token.isAfrican(user.address)).to.be.true;
343
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
 
345
+ it("Should prevent re-registration", async () => {
346
+ await token.connect(user).registerAfricanID("KEN", "789012");
347
+ await expect(
348
+ token.connect(user).registerAfricanID("ZAF", "345678")
349
+ ).to.be.revertedWith("Already registered");
350
+ });
 
 
 
 
 
 
 
 
351
 
352
+ it("Should allow admin verification", async () => {
353
+ await token.connect(admin).verifyAfricanIdentity(user.address, true);
354
+ expect(await token.isVerified(user.address)).to.be.true;
355
+ });
356
+ });</code></pre>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Transfer Example -->
361
+ <div>
362
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
363
+ <i class="fas fa-exchange-alt mr-2 text-purple-500"></i> Transfer Functionality Test
364
+ </h3>
365
+ <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
366
+ <pre class="text-gray-300 text-sm"><code>describe("Token Transfers", () => {
367
+ it("Should transfer tokens between accounts", async () => {
368
+ await token.transfer(recipient.address, 100);
369
+ expect(await token.balanceOf(recipient.address)).to.equal(100);
370
+ });
371
 
372
+ it("Should fail when transferring more than balance", async () => {
373
+ await expect(
374
+ token.transfer(recipient.address, ethers.constants.MaxUint256)
375
+ ).to.be.revertedWith("ERC20: transfer amount exceeds balance");
376
+ });
 
377
 
378
+ it("Should emit Transfer event", async () => {
379
+ await expect(token.transfer(recipient.address, 50))
380
+ .to.emit(token, "Transfer")
381
+ .withArgs(owner.address, recipient.address, 50);
382
+ });
383
+ });</code></pre>
384
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
385
  </div>
386
+ </div>
387
+ </section>
388
 
389
+ <!-- Manual QA Section -->
390
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
391
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
392
+ <i class="fas fa-clipboard-check mr-2 text-orange-500"></i> Manual QA Checklist
393
+ </h2>
394
+
395
+ <div class="overflow-x-auto">
396
+ <table class="min-w-full divide-y divide-gray-200">
397
+ <thead class="bg-gray-50">
398
+ <tr>
399
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Step</th>
400
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
401
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expected</th>
402
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
403
+ </tr>
404
+ </thead>
405
+ <tbody class="bg-white divide-y divide-gray-200">
406
+ <tr>
407
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
408
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deploy</td>
409
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Use testnet faucet, deploy contract</td>
410
+ <td class="px-6 py-4 whitespace-nowrap">
411
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
412
+ Completed
413
+ </span>
414
+ </td>
415
+ </tr>
416
+ <tr>
417
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
418
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Role/ownership</td>
419
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Query admin roles</td>
420
+ <td class="px-6 py-4 whitespace-nowrap">
421
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
422
+ Pending
423
+ </span>
424
+ </td>
425
+ </tr>
426
+ <tr>
427
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
428
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transfer</td>
429
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transfer tokens to 2–3 accounts</td>
430
+ <td class="px-6 py-4 whitespace-nowrap">
431
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
432
+ Not Started
433
+ </span>
434
+ </td>
435
+ </tr>
436
+ <tr>
437
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</td>
438
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">KYC/identity</td>
439
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Register and verify African identity</td>
440
+ <td class="px-6 py-4 whitespace-nowrap">
441
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
442
+ Not Started
443
+ </span>
444
+ </td>
445
+ </tr>
446
+ <tr>
447
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5</td>
448
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Explorer check</td>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Confirm code/events on Blockscout/BscScan</td>
450
+ <td class="px-6 py-4 whitespace-nowrap">
451
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
452
+ Not Started
453
+ </span>
454
+ </td>
455
+ </tr>
456
+ </tbody>
457
+ </table>
458
+ </div>
459
+ </section>
460
+ </main>
461
+
462
+ <!-- Footer -->
463
+ <footer class="gradient-bg text-white py-8">
464
+ <div class="container mx-auto px-4">
465
+ <div class="flex flex-col md:flex-row justify-between items-center">
466
+ <div class="mb-4 md:mb-0">
467
+ <h2 class="text-xl font-bold flex items-center">
468
+ <div class="africa-map w-8 h-8 mr-2"></div>
469
+ FlameBorn Testnet Suite
470
+ </h2>
471
+ <p class="text-sm opacity-80 mt-1">ERC20 Token with African Identity Features</p>
472
+ </div>
473
+ <div class="flex space-x-4">
474
+ <a href="#" class="hover:opacity-75 transition-opacity">
475
+ <i class="fab fa-github text-xl"></i>
476
+ </a>
477
+ <a href="#" class="hover:opacity-75 transition-opacity">
478
+ <i class="fab fa-twitter text-xl"></i>
479
+ </a>
480
+ <a href="#" class="hover:opacity-75 transition-opacity">
481
+ <i class="fab fa-discord text-xl"></i>
482
+ </a>
483
+ <a href="#" class="hover:opacity-75 transition-opacity">
484
+ <i class="fab fa-medium text-xl"></i>
485
+ </a>
486
+ </div>
487
  </div>
488
+ <div class="border-t border-white border-opacity-20 mt-6 pt-6 text-sm text-center md:text-left">
489
+ <p>© 2023 FlameBorn Project. All rights reserved.</p>
490
  </div>
491
+ </div>
492
+ </footer>
493
+
494
  <script>
495
+ // Simulate progress bar animation
496
  document.addEventListener('DOMContentLoaded', function() {
497
+ const progressBar = document.querySelector('.progress-bar');
498
+ const progressPercentage = document.getElementById('progressPercentage');
499
 
500
+ // Simulate loading progress
501
+ let progress = 0;
502
+ const interval = setInterval(() => {
503
+ progress += 5;
504
+ if (progress > 25) {
505
+ clearInterval(interval);
506
+ } else {
507
+ progressBar.style.width = `${progress}%`;
508
+ progressPercentage.textContent = `${progress}%`;
509
+ }
510
+ }, 300);
511
 
512
+ // Add click handlers for test buttons
513
+ document.querySelectorAll('.test-card button').forEach(button => {
514
+ button.addEventListener('click', function() {
515
+ const card = this.closest('.test-card');
516
+ const spinner = card.querySelector('.fa-spinner');
517
+
518
+ if (spinner) {
519
+ // Show loading state
520
+ spinner.classList.remove('fa-spinner', 'animate-spin', 'text-yellow-500');
521
+ spinner.classList.add('fa-check-circle', 'text-green-500');
522
+
523
+ // Update progress
524
+ progress += 10;
525
+ if (progress > 100) progress = 100;
526
+ progressBar.style.width = `${progress}%`;
527
+ progressPercentage.textContent = `${progress}%`;
528
+ }
529
  });
530
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
531
  });
532
  </script>
533
  <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>