| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>AI Tokenomics Advisor</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #6e8efb, #a777e3); |
| | } |
| | .token-card { |
| | transition: all 0.3s ease; |
| | box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| | } |
| | .token-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
| | } |
| | .chat-container { |
| | height: 500px; |
| | overflow-y: auto; |
| | scrollbar-width: thin; |
| | scrollbar-color: #a777e3 #f1f1f1; |
| | } |
| | .chat-container::-webkit-scrollbar { |
| | width: 6px; |
| | } |
| | .chat-container::-webkit-scrollbar-track { |
| | background: #f1f1f1; |
| | } |
| | .chat-container::-webkit-scrollbar-thumb { |
| | background-color: #a777e3; |
| | border-radius: 20px; |
| | } |
| | .pulse { |
| | animation: pulse 2s infinite; |
| | } |
| | @keyframes pulse { |
| | 0% { |
| | opacity: 1; |
| | } |
| | 50% { |
| | opacity: 0.5; |
| | } |
| | 100% { |
| | opacity: 1; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100 font-sans"> |
| | <div class="min-h-screen flex flex-col"> |
| | |
| | <header class="gradient-bg text-white py-6 px-4 shadow-lg"> |
| | <div class="container mx-auto flex justify-between items-center"> |
| | <div class="flex items-center space-x-3"> |
| | <i class="fas fa-coins text-3xl"></i> |
| | <h1 class="text-2xl font-bold">AI Tokenomics Advisor</h1> |
| | </div> |
| | <div class="hidden md:flex space-x-4"> |
| | <button class="px-4 py-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition">Dashboard</button> |
| | <button class="px-4 py-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition">Reports</button> |
| | <button class="px-4 py-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30 transition">Settings</button> |
| | </div> |
| | <button class="md:hidden text-2xl"> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="flex-grow container mx-auto px-4 py-8"> |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="lg:col-span-1 space-y-6"> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 token-card"> |
| | <h2 class="text-xl font-semibold text-gray-800 mb-4">Token Quick Stats</h2> |
| | <div class="space-y-4"> |
| | <div> |
| | <p class="text-sm text-gray-500">Total Supply</p> |
| | <p class="text-lg font-bold">1,000,000,000</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Circulating Supply</p> |
| | <p class="text-lg font-bold">350,000,000 (35%)</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Market Cap</p> |
| | <p class="text-lg font-bold">$5,250,000</p> |
| | </div> |
| | <div class="pt-4"> |
| | <div class="h-2 bg-gray-200 rounded-full"> |
| | <div class="h-2 bg-purple-500 rounded-full" style="width: 35%"></div> |
| | </div> |
| | <p class="text-xs text-gray-500 mt-1">Circulating vs Total Supply</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 token-card"> |
| | <h2 class="text-xl font-semibold text-gray-800 mb-4">Allocation Breakdown</h2> |
| | <div class="space-y-3"> |
| | <div class="flex justify-between"> |
| | <span class="text-sm">Team</span> |
| | <span class="text-sm font-medium">20%</span> |
| | </div> |
| | <div class="h-2 bg-gray-200 rounded-full"> |
| | <div class="h-2 bg-blue-500 rounded-full" style="width: 20%"></div> |
| | </div> |
| | |
| | <div class="flex justify-between"> |
| | <span class="text-sm">Ecosystem</span> |
| | <span class="text-sm font-medium">30%</span> |
| | </div> |
| | <div class="h-2 bg-gray-200 rounded-full"> |
| | <div class="h-2 bg-green-500 rounded-full" style="width: 30%"></div> |
| | </div> |
| | |
| | <div class="flex justify-between"> |
| | <span class="text-sm">Investors</span> |
| | <span class="text-sm font-medium">25%</span> |
| | </div> |
| | <div class="h-2 bg-gray-200 rounded-full"> |
| | <div class="h-2 bg-yellow-500 rounded-full" style="width: 25%"></div> |
| | </div> |
| | |
| | <div class="flex justify-between"> |
| | <span class="text-sm">Community</span> |
| | <span class="text-sm font-medium">25%</span> |
| | </div> |
| | <div class="h-2 bg-gray-200 rounded-full"> |
| | <div class="h-2 bg-red-500 rounded-full" style="width: 25%"></div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 token-card"> |
| | <h2 class="text-xl font-semibold text-gray-800 mb-4">Vesting Schedule</h2> |
| | <div class="space-y-4"> |
| | <div> |
| | <p class="text-sm text-gray-500">Team</p> |
| | <p class="text-sm">12 months cliff, 36 months linear</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Investors</p> |
| | <p class="text-sm">6 months cliff, 18 months linear</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Advisors</p> |
| | <p class="text-sm">6 months cliff, 12 months linear</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Community</p> |
| | <p class="text-sm">No vesting</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="lg:col-span-2"> |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden h-full flex flex-col"> |
| | |
| | <div class="gradient-bg text-white p-4"> |
| | <div class="flex items-center space-x-3"> |
| | <div class="relative"> |
| | <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center"> |
| | <i class="fas fa-robot text-purple-600 text-xl"></i> |
| | </div> |
| | <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white"></span> |
| | </div> |
| | <div> |
| | <h2 class="font-bold">Tokenomics Advisor AI</h2> |
| | <p class="text-xs opacity-80">Online - Ready to assist</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="chat-container p-4 flex-grow bg-gray-50"> |
| | <div class="space-y-4" id="chat-messages"> |
| | |
| | <div class="flex items-start space-x-3"> |
| | <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> |
| | <i class="fas fa-robot text-purple-600"></i> |
| | </div> |
| | <div class="bg-white p-3 rounded-lg shadow-sm max-w-[80%]"> |
| | <p class="text-sm">Hello! I'm your AI Tokenomics Advisor. I can help you analyze and optimize your token economy. How can I assist you today?</p> |
| | <p class="text-xs text-gray-500 mt-2">Here are some things I can help with:</p> |
| | <div class="mt-2 space-y-1"> |
| | <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded hover:bg-purple-100 transition" onclick="quickQuestion('How can I improve my token distribution?')"> |
| | Improve token distribution |
| | </button> |
| | <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded hover:bg-purple-100 transition" onclick="quickQuestion('What vesting schedule should I use?')"> |
| | Vesting schedule advice |
| | </button> |
| | <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded hover:bg-purple-100 transition" onclick="quickQuestion('How to prevent token dumping?')"> |
| | Prevent token dumping |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="border-t p-4 bg-white"> |
| | <div class="flex items-center space-x-2"> |
| | <input type="text" id="user-input" placeholder="Ask about tokenomics..." class="flex-grow px-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-purple-200"> |
| | <button id="send-btn" class="w-10 h-10 rounded-full gradient-bg text-white flex items-center justify-center hover:opacity-90 transition"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </div> |
| | <div class="flex justify-between mt-2 px-2"> |
| | <div class="flex space-x-2"> |
| | <button class="text-xs text-gray-500 hover:text-purple-600 transition" onclick="quickQuestion('Show me token metrics')"> |
| | <i class="fas fa-chart-line mr-1"></i> Metrics |
| | </button> |
| | <button class="text-xs text-gray-500 hover:text-purple-600 transition" onclick="quickQuestion('Analyze my tokenomics')"> |
| | <i class="fas fa-search mr-1"></i> Analyze |
| | </button> |
| | </div> |
| | <button class="text-xs text-gray-500 hover:text-purple-600 transition" id="clear-chat"> |
| | <i class="fas fa-trash-alt mr-1"></i> Clear |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <footer class="bg-gray-800 text-white py-6 px-4"> |
| | <div class="container mx-auto"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="mb-4 md:mb-0"> |
| | <h2 class="text-xl font-bold flex items-center"> |
| | <i class="fas fa-coins mr-2"></i> Tokenomics Advisor |
| | </h2> |
| | <p class="text-sm text-gray-400 mt-1">AI-powered token economy optimization</p> |
| | </div> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="hover:text-purple-300 transition"><i class="fab fa-twitter"></i></a> |
| | <a href="#" class="hover:text-purple-300 transition"><i class="fab fa-discord"></i></a> |
| | <a href="#" class="hover:text-purple-300 transition"><i class="fab fa-github"></i></a> |
| | <a href="#" class="hover:text-purple-300 transition"><i class="fas fa-envelope"></i></a> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400 text-center"> |
| | <p>© 2023 AI Tokenomics Advisor. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| | </div> |
| |
|
| | <script> |
| | |
| | const userInput = document.getElementById('user-input'); |
| | const sendBtn = document.getElementById('send-btn'); |
| | const chatMessages = document.getElementById('chat-messages'); |
| | const clearChatBtn = document.getElementById('clear-chat'); |
| | |
| | |
| | function quickQuestion(question) { |
| | userInput.value = question; |
| | sendMessage(); |
| | } |
| | |
| | |
| | function sendMessage() { |
| | const message = userInput.value.trim(); |
| | if (message === '') return; |
| | |
| | |
| | addMessage(message, 'user'); |
| | userInput.value = ''; |
| | |
| | |
| | const typingIndicator = document.createElement('div'); |
| | typingIndicator.className = 'flex items-start space-x-3'; |
| | typingIndicator.innerHTML = ` |
| | <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> |
| | <i class="fas fa-robot text-purple-600"></i> |
| | </div> |
| | <div class="bg-white p-3 rounded-lg shadow-sm max-w-[80%]"> |
| | <div class="flex space-x-2"> |
| | <div class="w-2 h-2 rounded-full bg-purple-400 pulse"></div> |
| | <div class="w-2 h-2 rounded-full bg-purple-400 pulse" style="animation-delay: 0.2s"></div> |
| | <div class="w-2 h-2 rounded-full bg-purple-400 pulse" style="animation-delay: 0.4s"></div> |
| | </div> |
| | </div> |
| | `; |
| | chatMessages.appendChild(typingIndicator); |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | |
| | |
| | setTimeout(() => { |
| | |
| | chatMessages.removeChild(typingIndicator); |
| | |
| | |
| | const response = generateAIResponse(message); |
| | addMessage(response, 'ai'); |
| | }, 1500); |
| | } |
| | |
| | |
| | function addMessage(message, sender) { |
| | const messageDiv = document.createElement('div'); |
| | messageDiv.className = 'flex items-start space-x-3'; |
| | |
| | if (sender === 'user') { |
| | messageDiv.innerHTML = ` |
| | <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
| | <i class="fas fa-user text-blue-600"></i> |
| | </div> |
| | <div class="bg-blue-50 p-3 rounded-lg shadow-sm max-w-[80%]"> |
| | <p class="text-sm">${message}</p> |
| | </div> |
| | `; |
| | } else { |
| | messageDiv.innerHTML = ` |
| | <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> |
| | <i class="fas fa-robot text-purple-600"></i> |
| | </div> |
| | <div class="bg-white p-3 rounded-lg shadow-sm max-w-[80%]"> |
| | <p class="text-sm">${message}</p> |
| | </div> |
| | `; |
| | } |
| | |
| | chatMessages.appendChild(messageDiv); |
| | chatMessages.scrollTop = chatMessages.scrollHeight; |
| | } |
| | |
| | |
| | function generateAIResponse(message) { |
| | const responses = { |
| | "How can I improve my token distribution?": "Based on your current allocation, I'd recommend increasing the community allocation to at least 30% and reducing team allocation to 15%. This creates better decentralization and community engagement. Also consider adding a staking mechanism to incentivize long-term holding.", |
| | "What vesting schedule should I use?": "For a balanced approach:\n\n- Team: 12 month cliff, then 24-36 month linear vesting\n- Investors: 6 month cliff, then 12-18 month linear vesting\n- Advisors: 6 month cliff, then 12 month linear vesting\n\nThis prevents immediate dumping while allowing gradual distribution.", |
| | "How to prevent token dumping?": "Several strategies:\n1. Implement vesting schedules\n2. Add staking rewards with lock-up periods\n3. Create utility beyond speculation\n4. Gradual release of tokens\n5. Community incentives for long-term holders\n\nWould you like me to analyze your specific case?", |
| | "Show me token metrics": "Here are your key token metrics:\n\n- Circulating Supply: 35% (good for initial liquidity)\n- Market Cap: $5.25M\n- FDV: $15M\n\nYour inflation rate is currently 2% monthly from vesting releases. Consider adjusting vesting schedules if this is too aggressive.", |
| | "Analyze my tokenomics": "Analyzing your tokenomics...\n\nStrengths:\n- Good initial circulating supply\n- Clear allocation breakdown\n\nAreas for improvement:\n1. Team allocation is slightly high (20%)\n2. No staking mechanism implemented\n3. Ecosystem fund could be better structured\n\nI can provide detailed recommendations if you'd like." |
| | }; |
| | |
| | if (responses[message]) { |
| | return responses[message]; |
| | } else { |
| | return "I can provide expert advice on token distribution, vesting schedules, economic models, and preventing token dumping. Could you clarify your question about: '" + message + "'?"; |
| | } |
| | } |
| | |
| | |
| | sendBtn.addEventListener('click', sendMessage); |
| | userInput.addEventListener('keypress', (e) => { |
| | if (e.key === 'Enter') { |
| | sendMessage(); |
| | } |
| | }); |
| | clearChatBtn.addEventListener('click', () => { |
| | chatMessages.innerHTML = ` |
| | <div class="flex items-start space-x-3"> |
| | <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> |
| | <i class="fas fa-robot text-purple-600"></i> |
| | </div> |
| | <div class="bg-white p-3 rounded-lg shadow-sm max-w-[80%]"> |
| | <p class="text-sm">Hello! I'm your AI Tokenomics Advisor. I can help you analyze and optimize your token economy. How can I assist you today?</p> |
| | </div> |
| | </div> |
| | `; |
| | }); |
| | </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=ket2/ai-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
