| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WormGPT - Advanced AI Assistant</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> |
| @keyframes wormPulse { |
| 0% { transform: scale(1); opacity: 0.7; } |
| 50% { transform: scale(1.05); opacity: 1; } |
| 100% { transform: scale(1); opacity: 0.7; } |
| } |
| .worm-pulse { |
| animation: wormPulse 3s infinite; |
| } |
| .message-enter { |
| animation: messageEnter 0.3s ease-out; |
| } |
| @keyframes messageEnter { |
| from { transform: translateY(10px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| .typing-indicator span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| background-color: #4ade80; |
| border-radius: 50%; |
| margin: 0 2px; |
| animation: typingAnimation 1.4s infinite ease-in-out; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| @keyframes typingAnimation { |
| 0%, 60%, 100% { transform: translateY(0); } |
| 30% { transform: translateY(-5px); } |
| } |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col"> |
| |
| <header class="bg-gray-800 border-b border-green-900 shadow-lg"> |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="worm-pulse w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-emerald-800 flex items-center justify-center"> |
| <i class="fas fa-worm text-white text-xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-emerald-500"> |
| WormGPT |
| </h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="p-2 rounded-full hover:bg-gray-700 transition-colors"> |
| <i class="fas fa-cog text-green-400"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-700 transition-colors"> |
| <i class="fas fa-moon text-yellow-400"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 container mx-auto px-4 py-6 flex flex-col"> |
| <div id="chat-container" class="flex-1 overflow-y-auto scrollbar-hide mb-4 space-y-4"> |
| |
| <div class="message-enter flex justify-start"> |
| <div class="max-w-3xl bg-gray-800 rounded-2xl p-4 shadow-lg border-l-4 border-green-500"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center mr-3"> |
| <i class="fas fa-worm text-white"></i> |
| </div> |
| <span class="font-bold text-green-400">WormGPT</span> |
| </div> |
| <p class="text-gray-300"> |
| Welcome to WormGPT! I'm your advanced AI assistant specialized in cybersecurity, penetration testing, and ethical hacking. How can I assist you today? |
| </p> |
| <div class="mt-3 flex flex-wrap gap-2"> |
| <button class="quick-prompt px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full text-sm text-gray-300 transition-colors"> |
| Show common vulnerabilities |
| </button> |
| <button class="quick-prompt px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full text-sm text-gray-300 transition-colors"> |
| Explain SQL injection |
| </button> |
| <button class="quick-prompt px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full text-sm text-gray-300 transition-colors"> |
| Help with nmap scan |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="typing-indicator" class="hidden mb-4"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center mr-3"> |
| <i class="fas fa-worm text-white"></i> |
| </div> |
| <div class="typing-indicator"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl p-4 shadow-lg border border-gray-700"> |
| <form id="chat-form" class="flex items-end space-x-3"> |
| <div class="flex-1 relative"> |
| <textarea id="user-input" rows="1" class="w-full bg-gray-700 rounded-lg px-4 py-3 pr-12 text-gray-200 resize-none focus:outline-none focus:ring-2 focus:ring-green-500 transition-all" placeholder="Ask WormGPT anything about cybersecurity..."></textarea> |
| <button type="button" class="absolute right-3 bottom-3 text-gray-400 hover:text-green-400 transition-colors"> |
| <i class="fas fa-paperclip"></i> |
| </button> |
| </div> |
| <button type="submit" class="p-3 bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg hover:opacity-90 transition-opacity"> |
| <i class="fas fa-paper-plane text-white"></i> |
| </button> |
| </form> |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> |
| <span>WormGPT may produce inaccurate information about security techniques</span> |
| <span>v2.3.7</span> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 border-t border-gray-700 py-3"> |
| <div class="container mx-auto px-4 text-center text-gray-500 text-sm"> |
| <p>Use WormGPT responsibly. Always follow ethical guidelines and applicable laws.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const chatForm = document.getElementById('chat-form'); |
| const userInput = document.getElementById('user-input'); |
| const chatContainer = document.getElementById('chat-container'); |
| const typingIndicator = document.getElementById('typing-indicator'); |
| |
| |
| userInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| |
| |
| document.querySelectorAll('.quick-prompt').forEach(button => { |
| button.addEventListener('click', function() { |
| userInput.value = this.textContent; |
| userInput.focus(); |
| }); |
| }); |
| |
| |
| chatForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const message = userInput.value.trim(); |
| if (message === '') return; |
| |
| |
| addMessageToChat('user', message); |
| userInput.value = ''; |
| userInput.style.height = 'auto'; |
| |
| |
| typingIndicator.classList.remove('hidden'); |
| |
| |
| setTimeout(() => { |
| typingIndicator.classList.add('hidden'); |
| const responses = [ |
| "SQL injection is a code injection technique that might destroy your database. It's one of the most common web hacking techniques.", |
| "For an nmap scan, you might use: `nmap -sV -O targetIP` to scan for services and OS detection.", |
| "Common vulnerabilities include XSS, CSRF, SQLi, and buffer overflows. Would you like details on any specific one?", |
| "Remember to always get proper authorization before testing systems. Ethical hacking requires permission." |
| ]; |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
| addMessageToChat('ai', randomResponse); |
| }, 1500 + Math.random() * 2000); |
| }); |
| |
| function addMessageToChat(sender, message) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.classList.add('message-enter'); |
| |
| if (sender === 'user') { |
| messageDiv.classList.add('flex', 'justify-end'); |
| messageDiv.innerHTML = ` |
| <div class="max-w-3xl bg-gray-700 rounded-2xl p-4 shadow-lg border-r-4 border-emerald-500"> |
| <p class="text-gray-200">${message}</p> |
| </div> |
| `; |
| } else { |
| messageDiv.classList.add('flex', 'justify-start'); |
| messageDiv.innerHTML = ` |
| <div class="max-w-3xl bg-gray-800 rounded-2xl p-4 shadow-lg border-l-4 border-green-500"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center mr-3"> |
| <i class="fas fa-worm text-white"></i> |
| </div> |
| <span class="font-bold text-green-400">WormGPT</span> |
| </div> |
| <p class="text-gray-300">${message}</p> |
| </div> |
| `; |
| } |
| |
| chatContainer.appendChild(messageDiv); |
| messageDiv.scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| |
| setTimeout(() => { |
| addMessageToChat('user', 'How do I protect against SQL injection?'); |
| setTimeout(() => { |
| typingIndicator.classList.add('hidden'); |
| addMessageToChat('ai', 'To protect against SQL injection:\n1. Use prepared statements with parameterized queries\n2. Use stored procedures\n3. Validate all user input\n4. Implement proper error handling\n5. Apply the principle of least privilege for database accounts'); |
| }, 2000); |
| }, 3000); |
| }); |
| </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=6ee5ali/wormgpt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
