|
|
<!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> |
