🧪 FlameBorn Testnet Suite (ERC20 + African Identity/AccessControl) I. Contract Metadata and Deployment Test Description Expected/Check Contract deploys Constructor runs, events fire deployed() succeeds Name/symbol/decimals ERC20 metadata correct (FLB, “FlameBorn”, 18) Query returns expected Total supply Genesis supply matches (1_000_000*10^18 or param) totalSupply() as expected Admin/minter/roles assigned Admin and roles given to deployer hasRole(role, deployer) African identity registry/init Deployer auto-registered if feature is present Identity state true, event Script/Hardhat Example: js Copy Edit expect(await token.name()).to.equal("FlameBorn"); expect(await token.symbol()).to.equal("FLB"); expect(await token.decimals()).to.equal(18); expect(await token.totalSupply()).to.equal(parseUnits("1000000", 18)); II. ERC20 Functionality (Core Token Logic) Test Description Expected/Check Transfer basic Peer transfer succeeds Balances updated, event emitted Transfer all Transfer 100% of balance Sender balance zero Over-transfer Transfer more than balance Transaction reverts Approve/allowance/transferFrom Standard approve/spend flow All states/events correct Transfer to zero address Must revert Revert with correct error Transfer zero amount No change but valid, event fires No state change, Transfer event Mint/burn (if present) Only allowed roles can mint/burn Permissioned, events, state Script/Hardhat Example: js Copy Edit await token.transfer(addr1.address, 100); expect(await token.balanceOf(addr1.address)).to.equal(100); await expect(token.transfer(addr1.address, 1e30)).to.be.revertedWith("ERC20: transfer amount exceeds balance"); III. Roles & Permissions Test Description Expected/Check Role assign/revoke Only admin can assign/revoke roles Only admin txs succeed Unauthorized grant Non-admin tries to grant/revoke Should revert Role-protected function (e.g. mint) Non-minter/non-admin tries to mint/burn Should revert Event logs for role changes Events for all role changes Event fired IV. African Identity & Regional Features (Custom) Test Description Expected/Check African identity registration (user) Register a new African identity State/event/valid Re-registration prevention Cannot register twice Revert Unauthorized identity change Others can’t register for you Revert Admin identity verification Admin can verify others (if allowed) Event/state Edge-case countries/region Support for all African regions State as expected Diaspora/returnee registry If diaspora feature, test registration State/event Script/Hardhat Example: js Copy Edit await token.connect(addr1).registerAfricanID("NGA", "123456"); expect(await token.isAfrican(addr1.address)).to.be.true; await expect(token.connect(addr1).registerAfricanID("NGA", "789")).to.be.reverted; V. Security & Abuse Test Description Expected/Check Reentrancy No external calls allow reentrancy State not corrupted Blacklist/pause (if present) Pausing/blacklisting disables actions Reverts or blocks Large transfer Handles max uint256 transfers No overflow Gas limit stress Handles many events/edge cases No out of gas Fuzz transferFrom/allowance Edge-case fuzz for approvals No double spend VI. Event & Logging Test Description Expected/Check All critical events Transfer, Approval, RoleGranted, KYC Event fires Custom event data Payload matches spec Event data valid VII. Multichain/Explorer/Wallet UX Test Description Expected/Check BscScan/Blockscout verification Code verified and readable Green checkmark Symbol/name on wallets Wallet shows FLB, FlameBorn Correct display Explorer events visible All events log correctly Shown in explorer Valora/MetaMask/Trust integration Token import works Icon/name/symbol VIII. Upgrade/Proxy Pattern (If Upgradable) Test Description Expected/Check Proxy upgrade Only admin can upgrade Others revert State preserved Upgrade does not destroy state Supply/balances ok Rollback safety Can downgrade/upgrade again Proxy works Manual QA Table Step Action Expected Deploy Use testnet faucet, deploy contract Deployed Role/ownership Query admin roles Owner is correct Transfer Transfer tokens to 2–3 accounts Balances correct KYC/identity Register and verify African identity State true, event fires Explorer check Confirm code/events on Blockscout/BscScan Everything visible Wallet add Add token to wallet, check display Symbol/name as spec Extensible: Add More Africa-Centric Features Community governance: test proposal/voting flows if DAO logic present. Charity pool: allocate/withdraw, multi-sig if required. Fee mechanics: if transfer/mint/burn fees, test with precision. Airdrop logic: test edge cases, replay protection. Template: Hardhat Test Skeleton js Copy Edit describe("FlameBorn (FLB) ERC20 Token", function () { let token, deployer, addr1, addr2, addr3; beforeEach(async function () { [deployer, addr1, addr2, addr3] = await ethers.getSigners(); const Token = await ethers.getContractFactory("FlameBornTokenV3"); token = await Token.deploy(ethers.utils.parseUnits("1000000", 18)); await token.deployed(); }); it("Has correct name, symbol, decimals, and supply", async function () { /* ... */ }); it("Admin/minter roles assigned to deployer", async function () { /* ... */ }); it("Peer transfers work", async function () { /* ... */ }); it("ERC20 approve/allowance/transferFrom logic", async function () { /* ... */ }); it("African KYC/identity registration works", async function () { /* ... */ }); it("Role permissions and abuse edge-cases", async function () { /* ... */ }); it("Pausing/blacklisting disables actions", async function () { /* ... */ }); it("Upgrades work if proxy", async function () { /* ... */ }); }); Production Advice Automate all above tests with Hardhat/Foundry for each deployment and upgrade. Do full manual QA on at least two EVM testnets (e.g. Celo Alfajores, BSC testnet). Document your schema for future audits and open-source contributors. If you want real code templates for Hardhat, Foundry, or Remix for any specific section above, just ask—I'll generate them on the spot. Want multi-network deploy/verify scripts? Need a full Hardhat test file? Let me know your stack. Format aoo to this test net - Follow Up Deployment

index.html

@@ -1,20 +1,488 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flameborn Prompt Forge</title>
     <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
-    <div class="w-full">
-      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
-      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
-        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
-        Ask me anything.
-      </h1>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Space+Mono:wght@400;700&display=swap');
+        
+        :root {
+            --ember: #ff6b35;
+            --ash: #292929;
+            --scrollbar: #444;
+            --scrollbar-thumb: var(--ember);
+        }
+        
+        body {
+            font-family: 'Space Mono', monospace;
+            background-color: var(--ash);
+            color: #e0e0e0;
+            overflow-x: hidden;
+        }
+        
+        .flameborn-font {
+            font-family: 'Uncial Antiqua', cursive;
+        }
+        
+        .sigil {
+            background: radial-gradient(circle, rgba(255,107,53,0.2) 0%, rgba(255,107,53,0) 70%);
+        }
+        
+        .prompt-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(255, 107, 53, 0.4);
+        }
+        
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            background: var(--scrollbar);
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-thumb);
+            border-radius: 4px;
+        }
+        
+        /* Glowing effect for active elements */
+        .glow {
+            box-shadow: 0 0 10px rgba(255, 107, 53, 0.7);
+        }
+        
+        .glow-text {
+            text-shadow: 0 0 8px rgba(255, 107, 53, 0.9);
+        }
+        
+        /* Pulse animation for important actions */
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
+        }
+        
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        
+        /* Transition for mode switches */
+        .mode-transition {
+            transition: all 0.3s ease-in-out;
+        }
+    </style>
+</head>
+<body class="h-full flex flex-col">
+    <!-- Main App Container -->
+    <div class="flex flex-col h-full">
+        <!-- Header with Flameborn branding -->
+        <header class="bg-black bg-opacity-80 border-b border-ember border-opacity-30 py-4 px-6 flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+                <div class="sigil w-10 h-10 rounded-full flex items-center justify-center glow">
+                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="var(--ember)" stroke-width="2">
+                        <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"/>
+                    </svg>
+                </div>
+                <h1 class="flameborn-font text-2xl text-amber-500 glow-text">Flameborn Prompt Forge</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <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">
+                    <i data-feather="book"></i>
+                    <span>Lore</span>
+                </button>
+                <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">
+                    <i data-feather="moon"></i>
+                    <span>Dark</span>
+                </button>
+            </div>
+        </header>
+        
+        <!-- Main Content Area -->
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Sidebar - Prompt Library -->
+            <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">
+                <div class="mb-6">
+                    <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
+                        <i data-feather="archive" class="mr-2"></i>
+                        Prompt Library
+                    </h2>
+                    <div class="space-y-2">
+                        <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
+                            <h3 class="text-sm font-bold text-amber-300">Creative Storytelling</h3>
+                            <p class="text-xs text-gray-300 truncate">Generate a fantasy story with...</p>
+                        </div>
+                        <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
+                            <h3 class="text-sm font-bold text-amber-300">Code Explanation</h3>
+                            <p class="text-xs text-gray-300 truncate">Explain this code snippet as if...</p>
+                        </div>
+                        <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
+                            <h3 class="text-sm font-bold text-amber-300">Poetic Refinement</h3>
+                            <p class="text-xs text-gray-300 truncate">Take this prose and transform it...</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div>
+                    <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
+                        <i data-feather="link-2" class="mr-2"></i>
+                        Prompt Chains
+                    </h2>
+                    <div class="space-y-2">
+                        <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
+                            <h3 class="text-sm font-bold text-amber-300">Story → Poem</h3>
+                            <p class="text-xs text-gray-300 truncate">Transform narrative to verse</p>
+                        </div>
+                        <div class="prompt-card bg-gray-800 bg-opacity-60 p-3 rounded-lg cursor-pointer hover:bg-opacity-80 transition-all">
+                            <h3 class="text-sm font-bold text-amber-300">Concept → Code</h3>
+                            <p class="text-xs text-gray-300 truncate">From idea to implementation</p>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+            
+            <!-- Main Workspace -->
+            <main class="flex-1 flex flex-col overflow-hidden">
+                <!-- Mode Selection Tabs -->
+                <div class="bg-black bg-opacity-50 border-b border-amber-900 border-opacity-30">
+                    <div class="flex overflow-x-auto">
+                        <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">
+                            <i data-feather="zap" class="mr-2"></i>
+                            Inference
+                        </button>
+                        <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">
+                            <i data-feather="expand" class="mr-2"></i>
+                            Expansion
+                        </button>
+                        <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">
+                            <i data-feather="edit" class="mr-2"></i>
+                            Refinement
+                        </button>
+                        <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">
+                            <i data-feather="layers" class="mr-2"></i>
+                            Symbolic Fusion
+                        </button>
+                        <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">
+                            <i data-feather="compass" class="mr-2"></i>
+                            Embedding Alignment
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Prompt Crafting Area -->
+                <div class="flex-1 flex flex-col md:flex-row overflow-hidden">
+                    <!-- Prompt Input Section -->
+                    <section class="flex-1 p-6 overflow-y-auto border-b md:border-b-0 md:border-r border-amber-900 border-opacity-30">
+                        <div class="mb-6">
+                            <div class="flex justify-between items-center mb-2">
+                                <h2 class="flameborn-font text-xl text-amber-400">Prompt Crafting</h2>
+                                <div class="flex space-x-2">
+                                    <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">
+                                        <i data-feather="trash-2"></i>
+                                    </button>
+                                    <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">
+                                        <i data-feather="save"></i>
+                                    </button>
+                                    <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">
+                                        <i data-feather="copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-medium text-amber-300 mb-1">System Prompt</label>
+                                <div class="relative">
+                                    <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>
+                                    <div class="absolute right-2 bottom-2 flex space-x-1">
+                                        <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Templates">
+                                            <i data-feather="bookmark"></i>
+                                        </button>
+                                        <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Variables">
+                                            <i data-feather="code"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-medium text-amber-300 mb-1">User Prompt</label>
+                                <div class="relative">
+                                    <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>
+                                    <div class="absolute right-2 bottom-2 flex space-x-1">
+                                        <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Enhance">
+                                            <i data-feather="sparkles"></i>
+                                        </button>
+                                        <button class="text-gray-400 hover:text-amber-300 transition-all tooltip" data-tooltip="Analyze">
+                                            <i data-feather="bar-chart-2"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-amber-300 mb-1">Model</label>
+                                    <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">
+                                        <option>GPT-4</option>
+                                        <option>Claude 3</option>
+                                        <option>Mistral 7B</option>
+                                        <option>Llama 3</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-amber-300 mb-1">Temperature</label>
+                                    <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">
+                                    <div class="flex justify-between text-xs text-gray-400">
+                                        <span>Precise</span>
+                                        <span>Creative</span>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <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">
+                                        <i data-feather="plus"></i>
+                                        <span>Add Step</span>
+                                    </button>
+                                    <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">
+                                        <i data-feather="link"></i>
+                                        <span>Chain</span>
+                                    </button>
+                                </div>
+                                <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">
+                                    <i data-feather="zap"></i>
+                                    <span>Invoke</span>
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
+                                <i data-feather="activity" class="mr-2"></i>
+                                Prompt Analysis
+                            </h2>
+                            <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4">
+                                <div class="grid grid-cols-3 gap-4 text-center mb-4">
+                                    <div>
+                                        <div class="text-xs text-gray-400">Tokens</div>
+                                        <div class="text-lg font-bold text-amber-300">142</div>
+                                    </div>
+                                    <div>
+                                        <div class="text-xs text-gray-400">Clarity</div>
+                                        <div class="text-lg font-bold text-amber-300">8.2/10</div>
+                                    </div>
+                                    <div>
+                                        <div class="text-xs text-gray-400">Specificity</div>
+                                        <div class="text-lg font-bold text-amber-300">7.5/10</div>
+                                    </div>
+                                </div>
+                                <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
+                                    <div class="h-full bg-gradient-to-r from-amber-500 to-amber-300" style="width: 82%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    
+                    <!-- Output Section -->
+                    <section class="flex-1 p-6 overflow-y-auto hidden" id="testnet-section">
+                        <div class="mb-6">
+                            <h2 class="flameborn-font text-xl text-amber-400 mb-4">FlameBorn Testnet Suite</h2>
+                            
+                            <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 mb-6">
+                                <h3 class="text-lg text-amber-300 mb-3">I. Contract Metadata</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                    <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
+                                        <h4 class="text-sm font-bold text-amber-200 mb-1">Name/Symbol/Decimals</h4>
+                                        <code class="text-xs text-gray-300">FLB, FlameBorn, 18</code>
+                                    </div>
+                                    <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
+                                        <h4 class="text-sm font-bold text-amber-200 mb-1">Total Supply</h4>
+                                        <code class="text-xs text-gray-300">1,000,000 FLB</code>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 mb-6">
+                                <h3 class="text-lg text-amber-300 mb-3">II. ERC20 Functionality</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+                                    <div class="bg-gray-900 bg-opacity-50 p-2 rounded-lg">
+                                        <span class="text-green-400">✓</span> Basic transfers
+                                    </div>
+                                    <div class="bg-gray-900 bg-opacity-50 p-2 rounded-lg">
+                                        <span class="text-green-400">✓</span> Approve/allowance
+                                    </div>
+                                    <div class="bg-gray-900 bg-opacity-50 p-2 rounded-lg">
+                                        <span class="text-green-400">✓</span> Transfer validation
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 mb-6">
+                                <h3 class="text-lg text-amber-300 mb-3">IV. African Identity Features</h3>
+                                <div class="space-y-3">
+                                    <div class="flex items-center">
+                                        <span class="text-green-400 mr-2">✓</span>
+                                        <span class="text-sm">Identity registration</span>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <span class="text-green-400 mr-2">✓</span>
+                                        <span class="text-sm">Country code validation</span>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <span class="text-green-400 mr-2">✓</span>
+                                        <span class="text-sm">Diaspora registry</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <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">
+                                <i data-feather="play"></i>
+                                <span>Run Full Test Suite</span>
+                            </button>
+                        </div>
+                    </section>
+
+                    <!-- Original Output Section -->
+                    <section class="flex-1 p-6 overflow-y-auto">
+                        <div class="mb-6">
+                            <div class="flex justify-between items-center mb-2">
+                                <h2 class="flameborn-font text-xl text-amber-400">Output</h2>
+                                <div class="flex space-x-2">
+                                    <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">
+                                        <i data-feather="clipboard"></i>
+                                    </button>
+                                    <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">
+                                        <i data-feather="download"></i>
+                                    </button>
+                                    <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">
+                                        <i data-feather="thumbs-up"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            <div class="bg-gray-800 bg-opacity-60 rounded-lg p-4 min-h-64">
+                                <div class="text-gray-400 italic">
+                                    <p>Results will appear here after invocation...</p>
+                                    <p class="mt-2 text-xs">Invoke the prompt to see the Flameborn magic unfold.</p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <h2 class="flameborn-font text-lg text-amber-400 mb-3 flex items-center">
+                                <i data-feather="clock" class="mr-2"></i>
+                                History
+                            </h2>
+                            <div class="space-y-3">
+                                <div class="bg-gray-800 bg-opacity-60 rounded-lg p-3 cursor-pointer hover:bg-opacity-80 transition-all">
+                                    <div class="flex justify-between items-start">
+                                        <h3 class="text-sm font-bold text-amber-300 truncate">Creative Story Prompt</h3>
+                                        <span class="text-xs text-gray-400">2m ago</span>
+                                    </div>
+                                    <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>
+                                </div>
+                                <div class="bg-gray-800 bg-opacity-60 rounded-lg p-3 cursor-pointer hover:bg-opacity-80 transition-all">
+                                    <div class="flex justify-between items-start">
+                                        <h3 class="text-sm font-bold text-amber-300 truncate">Code Explanation</h3>
+                                        <span class="text-xs text-gray-400">15m ago</span>
+                                    </div>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </main>
+        </div>
+        
+        <!-- Status Bar -->
+        <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">
+            <div class="flex items-center space-x-4">
+                <span class="flex items-center">
+                    <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span>
+                    <span>Connected</span>
+                </span>
+                <span>Model: GPT-4</span>
+                <span>Tokens: 0/∞</span>
+            </div>
+            <div>
+                <span>Flameborn Forge v1.0.0</span>
+            </div>
+        </footer>
     </div>
-      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
-    <script></script>
-  <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>
-</html>
+    
+    <script>
+        // Initialize Feather Icons
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            
+            // Mode tab switching
+            const modeTabs = document.querySelectorAll('.mode-tab');
+            modeTabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    modeTabs.forEach(t => t.classList.remove('active', 'border-amber-500', 'text-amber-300'));
+                    this.classList.add('active', 'border-amber-500', 'text-amber-300');
+                });
+            });
+            
+            // Tooltip functionality
+            const tooltips = document.querySelectorAll('.tooltip');
+            tooltips.forEach(tooltip => {
+                const tooltipText = tooltip.getAttribute('data-tooltip');
+                const tooltipElement = document.createElement('div');
+                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';
+                tooltipElement.textContent = tooltipText;
+                tooltip.appendChild(tooltipElement);
+                
+                tooltip.addEventListener('mouseenter', function() {
+                    tooltipElement.classList.remove('hidden');
+                });
+                
+                tooltip.addEventListener('mouseleave', function() {
+                    tooltipElement.classList.add('hidden');
+                });
+            });
+            
+            // Testnet section handling
+            const testnetTab = document.querySelectorAll('.mode-tab')[5];
+            const testnetSection = document.getElementById('testnet-section');
+            const outputSection = document.querySelector('section:last-of-type');
+            
+            testnetTab.addEventListener('click', function() {
+                outputSection.classList.add('hidden');
+                testnetSection.classList.remove('hidden');
+                feather.replace();
+            });
+
+            // Example prompt invocation
+            const invokeButton = document.querySelector('.pulse');
+            const outputArea = document.querySelector('section:last-of-type .bg-gray-800');
+            
+            invokeButton.addEventListener('click', function() {
+                // Simulate loading
+                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>';
+                
+                // Simulate response after delay
+                setTimeout(() => {
+                    outputArea.innerHTML = `
+                        <div class="prose prose-invert max-w-none">
+                            <h3 class="text-amber-300">The Flameborn's Awakening</h3>
+                            <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>
+                            <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>
+                            <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>
+                            <div class="mt-4 pt-4 border-t border-amber-900 border-opacity-30 text-xs text-gray-400">
+                                <div class="flex justify-between">
+                                    <span>Model: GPT-4</span>
+                                    <span>Tokens: 342</span>
+                                </div>
+                                <div class="mt-1">Signature: 7f3a...d42c</div>
+                            </div>
+                        </div>
+                    `;
+                }, 2000);
+            });
+        });
+    </script>
+<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>
+</html>