purpletoolkit / index.html
S-Dreamer's picture
Add 3 files
9336efd verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 Purple Team Toolkit</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>
/* Custom CSS for specific elements */
.gradient-bg {
background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
}
.module-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.terminal {
font-family: 'Courier New', monospace;
background-color: #1e1e1e;
color: #00ff00;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Animation for alerts */
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.alert-slide {
animation: slideIn 0.3s ease-out;
}
</style>
</head>
<body class="bg-gray-100 text-gray-800">
<!-- Header/Navigation -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-shield-alt text-2xl"></i>
<h1 class="text-xl font-bold">ESP32 Purple Toolkit</h1>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-6">
<li><a href="#dashboard" class="hover:text-purple-200 transition">Dashboard</a></li>
<li><a href="#modules" class="hover:text-purple-200 transition">Modules</a></li>
<li><a href="#settings" class="hover:text-purple-200 transition">Settings</a></li>
<li><a href="#logs" class="hover:text-purple-200 transition">Logs</a></li>
</ul>
</nav>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<span class="status-indicator bg-green-400"></span>
<span class="text-sm">Connected</span>
</div>
<button class="md:hidden" id="mobile-menu-button">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden bg-purple-800" id="mobile-menu">
<ul class="px-4 py-2 space-y-2">
<li><a href="#dashboard" class="block py-2 hover:bg-purple-700 px-2 rounded">Dashboard</a></li>
<li><a href="#modules" class="block py-2 hover:bg-purple-700 px-2 rounded">Modules</a></li>
<li><a href="#settings" class="block py-2 hover:bg-purple-700 px-2 rounded">Settings</a></li>
<li><a href="#logs" class="block py-2 hover:bg-purple-700 px-2 rounded">Logs</a></li>
</ul>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-6">
<!-- System Status Bar -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<div class="flex flex-wrap items-center justify-between">
<div class="flex items-center space-x-4 mb-2 md:mb-0">
<div>
<span class="text-sm text-gray-500">Device</span>
<p class="font-medium">ESP32-WROOM</p>
</div>
<div>
<span class="text-sm text-gray-500">IP</span>
<p class="font-medium">192.168.1.100</p>
</div>
<div>
<span class="text-sm text-gray-500">Uptime</span>
<p class="font-medium">2h 45m</p>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-microchip text-purple-500 mr-2"></i>
<div class="w-24 bg-gray-200 rounded-full h-2.5">
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>
<span class="text-xs ml-2">45%</span>
</div>
<div class="flex items-center">
<i class="fas fa-memory text-purple-500 mr-2"></i>
<div class="w-24 bg-gray-200 rounded-full h-2.5">
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 68%"></div>
</div>
<span class="text-xs ml-2">68%</span>
</div>
</div>
</div>
</div>
<!-- Dashboard Section -->
<section id="dashboard" class="mb-8">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="fas fa-tachometer-alt mr-2 text-purple-600"></i> Dashboard
</h2>
<!-- Quick Actions -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<button class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition flex flex-col items-center justify-center">
<i class="fas fa-bolt text-yellow-500 text-2xl mb-2"></i>
<span class="text-sm font-medium">Quick Deploy</span>
</button>
<button class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition flex flex-col items-center justify-center">
<i class="fas fa-network-wired text-blue-500 text-2xl mb-2"></i>
<span class="text-sm font-medium">Network Scan</span>
</button>
<button class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition flex flex-col items-center justify-center">
<i class="fas fa-terminal text-green-500 text-2xl mb-2"></i>
<span class="text-sm font-medium">Shell Access</span>
</button>
<button class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition flex flex-col items-center justify-center">
<i class="fas fa-cog text-gray-500 text-2xl mb-2"></i>
<span class="text-sm font-medium">Settings</span>
</button>
</div>
<!-- Alerts -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-semibold">Recent Alerts</h3>
<button class="text-sm text-purple-600 hover:text-purple-800">View All</button>
</div>
<div class="space-y-2">
<div class="alert-slide bg-white p-3 rounded-lg shadow flex items-start">
<div class="bg-red-100 p-2 rounded-full mr-3">
<i class="fas fa-exclamation-circle text-red-500"></i>
</div>
<div>
<p class="font-medium">Unauthorized access attempt</p>
<p class="text-sm text-gray-600">From IP: 192.168.1.15 at 14:32:45</p>
</div>
</div>
<div class="alert-slide bg-white p-3 rounded-lg shadow flex items-start">
<div class="bg-yellow-100 p-2 rounded-full mr-3">
<i class="fas fa-exclamation-triangle text-yellow-500"></i>
</div>
<div>
<p class="font-medium">High CPU usage detected</p>
<p class="text-sm text-gray-600">Reached 92% at 14:15:30</p>
</div>
</div>
</div>
</div>
</section>
<!-- Modules Section -->
<section id="modules" class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold flex items-center">
<i class="fas fa-cubes mr-2 text-purple-600"></i> Modules
</h2>
<div class="relative">
<input type="text" placeholder="Search modules..." class="pl-8 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<!-- Module Tabs -->
<div class="mb-6">
<div class="flex overflow-x-auto space-x-1 pb-2">
<button class="tab-button px-4 py-2 rounded-t-lg bg-purple-600 text-white" data-tab="all">All</button>
<button class="tab-button px-4 py-2 rounded-t-lg bg-gray-200 hover:bg-gray-300" data-tab="recon">Recon</button>
<button class="tab-button px-4 py-2 rounded-t-lg bg-gray-200 hover:bg-gray-300" data-tab="exploitation">Exploitation</button>
<button class="tab-button px-4 py-2 rounded-t-lg bg-gray-200 hover:bg-gray-300" data-tab="post-exploit">Post-Exploit</button>
<button class="tab-button px-4 py-2 rounded-t-lg bg-gray-200 hover:bg-gray-300" data-tab="reporting">Reporting</button>
</div>
</div>
<!-- Module Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Recon Module -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="recon">
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-binoculars text-blue-500 mr-2"></i> Network Scanner
</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Recon</span>
</div>
<p class="text-gray-600 text-sm mb-4">Scan local network for devices, open ports, and services.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="status-indicator bg-green-400"></span>
<span class="text-xs">Active</span>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition">Configure</button>
</div>
</div>
</div>
<!-- Exploitation Module -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="exploitation">
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-bug text-red-500 mr-2"></i> Vulnerability Exploiter
</h3>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Exploitation</span>
</div>
<p class="text-gray-600 text-sm mb-4">Execute known exploits against identified vulnerabilities.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="status-indicator bg-yellow-400"></span>
<span class="text-xs">Standby</span>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded text-sm transition">Activate</button>
</div>
</div>
</div>
<!-- Post-Exploit Module -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="post-exploit">
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-user-secret text-purple-500 mr-2"></i> Persistence Manager
</h3>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Post-Exploit</span>
</div>
<p class="text-gray-600 text-sm mb-4">Establish and maintain persistent access to compromised systems.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="status-indicator bg-gray-400"></span>
<span class="text-xs">Inactive</span>
</div>
<button class="bg-purple-500 hover:bg-purple-600 text-white px-3 py-1 rounded text-sm transition">Enable</button>
</div>
</div>
</div>
<!-- Reporting Module -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="reporting">
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-file-alt text-green-500 mr-2"></i> Report Generator
</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Reporting</span>
</div>
<p class="text-gray-600 text-sm mb-4">Generate comprehensive reports of findings and activities.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="status-indicator bg-green-400"></span>
<span class="text-xs">Ready</span>
</div>
<button class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm transition">Generate</button>
</div>
</div>
</div>
<!-- Additional Modules -->
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="recon">
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-wifi text-blue-500 mr-2"></i> WiFi Analyzer
</h3>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Recon</span>
</div>
<p class="text-gray-600 text-sm mb-4">Analyze nearby WiFi networks, signal strength, and security.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="status-indicator bg-green-400"></span>
<span class="text-xs">Active</span>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition">View Data</button>
</div>
</div>
</div>
<div class="module-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300" data-category="exploitation">
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg flex items-center">
<i class="fas fa-key text-red-500 mr-2"></i> Credential Harvester
</h3>
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Exploitation</span>
</div>
<p class="text-gray-600 text-sm mb-4">Capture and analyze credentials from network traffic.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="status-indicator bg-yellow-400"></span>
<span class="text-xs">Monitoring</span>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded text-sm transition">Configure</button>
</div>
</div>
</div>
</div>
</section>
<!-- Terminal Section -->
<section id="terminal" class="mb-8">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="fas fa-terminal mr-2 text-purple-600"></i> Command Terminal
</h2>
<div class="terminal rounded-lg overflow-hidden shadow-lg">
<div class="bg-gray-800 px-4 py-2 flex justify-between items-center">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<span class="text-gray-300 text-sm">ESP32 Purple Toolkit - Terminal</span>
<div class="w-8"></div> <!-- Spacer for alignment -->
</div>
<div class="p-4 h-64 overflow-y-auto" id="terminal-output">
<p class="text-green-400">$ Welcome to ESP32 Purple Toolkit Terminal</p>
<p class="text-green-400">$ System ready - 2 active modules</p>
<p class="text-green-400">$ Last scan completed at 14:30:22</p>
<p class="text-green-400">$ </p>
</div>
<div class="bg-gray-800 px-4 py-3 flex">
<span class="text-green-400 mr-2">$</span>
<input type="text" class="bg-gray-700 text-green-400 px-2 py-1 w-full focus:outline-none" id="terminal-input" placeholder="Enter command...">
</div>
</div>
</section>
<!-- Settings Section -->
<section id="settings" class="mb-8">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="fas fa-cog mr-2 text-purple-600"></i> Settings
</h2>
<div class="bg-white rounded-lg shadow-md p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Network Settings -->
<div>
<h3 class="text-lg font-semibold mb-4 flex items-center">
<i class="fas fa-wifi mr-2 text-blue-500"></i> Network Configuration
</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">WiFi Mode</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Station (Client)</option>
<option>Access Point</option>
<option>Both</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">SSID</label>
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="PurpleTeam_AP">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<div class="relative">
<input type="password" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="s3cur3p@ss">
<button class="absolute right-3 top-2 text-gray-500 hover:text-gray-700">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
</div>
</div>
<!-- System Settings -->
<div>
<h3 class="text-lg font-semibold mb-4 flex items-center">
<i class="fas fa-microchip mr-2 text-purple-500"></i> System Preferences
</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Device Name</label>
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="ESP32-Purple-01">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Operation Mode</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option>Stealth</option>
<option>Standard</option>
<option>Aggressive</option>
</select>
</div>
<div class="flex items-center">
<input type="checkbox" id="auto-update" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="auto-update" class="ml-2 block text-sm text-gray-700">Enable auto-update</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="logging" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
<label for="logging" class="ml-2 block text-sm text-gray-700">Enable activity logging</label>
</div>
</div>
</div>
</div>
<div class="mt-6 pt-6 border-t border-gray-200 flex justify-end space-x-3">
<button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
Cancel
</button>
<button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
Save Changes
</button>
</div>
</div>
</section>
<!-- Logs Section -->
<section id="logs" class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold flex items-center">
<i class="fas fa-clipboard-list mr-2 text-purple-600"></i> Activity Logs
</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-sm flex items-center">
<i class="fas fa-download mr-1"></i> Export
</button>
<button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded text-sm flex items-center">
<i class="fas fa-trash-alt mr-1"></i> Clear
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Module</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:32:45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Network Scanner</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Scan completed</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 devices found</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Success</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:30:22</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Vulnerability Exploiter</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Exploit attempted</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CVE-2023-1234 on 192.168.1.15</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Partial</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:28:10</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">WiFi Analyzer</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Channel analysis</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 networks detected</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Success</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:25:37</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Credential Harvester</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Credentials captured</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 sets from HTTP traffic</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Monitoring</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:20:15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">System</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">High CPU alert</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Reached 92% utilization</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Warning</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
<div class="flex-1 flex justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700"> Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> entries </p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a>
<a href="#" aria-current="page" class="z-10 bg-purple-50 border-purple-500 text-purple-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a>
</nav>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="gradient-bg text-white py-6">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<div class="flex items-center space-x-2">
<i class="fas fa-shield-alt text-xl"></i>
<span class="font-bold">ESP32 Purple Toolkit</span>
</div>
<p class="text-sm mt-1">v2.3.1 | Firmware Build #4721</p>
</div>
<div class="flex space-x-6">
<a href="#" class="hover:text-purple-200 transition"><i class="fab fa-github text-xl"></i></a>
<a href="#" class="hover:text-purple-200 transition"><i class="fab fa-discord text-xl"></i></a>
<a href="#" class="hover:text-purple-200 transition"><i class="fas fa-book text-xl"></i></a>
</div>
</div>
<div class="mt-6 pt-6 border-t border-purple-400 text-sm text-center md:text-left">
<p>© 2023 Purple Team Operations. All rights reserved. For authorized use only.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Tab functionality
const tabButtons = document.querySelectorAll('.tab-button');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
tabButtons.forEach(btn => {
btn.classList.remove('bg-purple-600', 'text-white');
btn.classList.add('bg-gray-200', 'hover:bg-gray-300');
});
// Add active class to clicked button
this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
this.classList.add('bg-purple-600', 'text-white');
// Filter modules based on tab
const tab = this.getAttribute('data-tab');
const modules = document.querySelectorAll('.module-card');
if (tab === 'all') {
modules.forEach(module => module.style.display = 'block');
} else {
modules.forEach(module => {
if (module.getAttribute('data-category') === tab) {
module.style.display = 'block';
} else {
module.style.display = 'none';
}
});
}
});
});
// Terminal input functionality
const terminalInput = document.getElementById('terminal-input');
const terminalOutput = document.getElementById('terminal-output');
terminalInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const command = this.value;
this.value = '';
// Add command to output
const commandLine = document.createElement('p');
commandLine.innerHTML = `<span class="text-green-400">$ ${command}</span>`;
terminalOutput.appendChild(commandLine);
// Process command (simulated)
let response = '';
if (command === 'help') {
response = 'Available commands: scan, exploit, harvest, clear, help';
} else if (command === 'scan') {
response = 'Starting network scan...\nScan complete: 12 devices found';
} else if (command === 'clear') {
terminalOutput.innerHTML = '<p class="text-green-400">$ Terminal cleared</p>';
return;
} else {
response = `Command not recognized: ${command}`;
}
const responseLine = document.createElement('p');
responseLine.innerHTML = `<span class="text-green-400">${response}</span>`;
terminalOutput.appendChild(responseLine);
// Scroll to bottom
terminalOutput.scrollTop = terminalOutput.scrollHeight;
}
});
// Simulate some alerts
setTimeout(() => {
const alertsContainer = document.querySelector('#dashboard .space-y-2');
const newAlert = document.createElement('div');
newAlert.className = 'alert-slide bg-white p-3 rounded-lg shadow flex items-start';
newAlert.innerHTML = `
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-info-circle text-blue-500"></i>
</div>
<div>
<p class="font-medium">New device detected</p>
<p class="text-sm text-gray-600">MAC: 00:1A:2B:3C:4D:5E at 14:35:22</p>
</div>
`;
alertsContainer.prepend(newAlert);
}, 5000);
</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/purpletoolkit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>