keyhunter-pro / index.html
Hur1el's picture
can you add backend and frontend of this code
65975b4 verified
Raw
History Blame Contribute Delete
17.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KeyHunter Pro - Advanced Private Key Discovery System</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');
:root {
--primary: #6366f1;
--secondary: #10b981;
--accent: #f59e0b;
--dark: #1f2937;
--darker: #111827;
}
body {
font-family: 'JetBrains Mono', monospace;
overflow-x: hidden;
}
.title-font {
font-family: 'Orbitron', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 50%, #374151 100%);
}
.card-glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.cyber-border {
position: relative;
border: 2px solid transparent;
background: linear-gradient(var(--darker), var(--darker)) padding-box,
linear-gradient(45deg, var(--primary), var(--secondary), var(--accent)) border-box;
}
.stats-counter {
transition: all 0.3s ease;
}
.component-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body class="gradient-bg text-gray-100 min-h-screen">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<div class="relative z-10">
<!-- Navigation -->
<nav class="border-b border-gray-700/30 bg-gray-900/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="key" class="h-8 w-8 text-indigo-500"></i>
<span class="ml-2 title-font text-xl font-bold">KeyHunter Pro</span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-indigo-900/50">Dashboard</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700/50">Workers</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700/50">Results</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700/50">Settings</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="relative py-16 overflow-hidden">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="title-font text-4xl md:text-6xl font-extrabold tracking-tight">
<span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-emerald-400">Private Key Discovery</span>
<span class="block text-white mt-2">At Industrial Scale</span>
</h1>
<p class="mt-6 max-w-2xl mx-auto text-lg text-gray-300">
Advanced distributed system for cryptographic key space exploration with enterprise-grade reliability and performance monitoring.
</p>
</div>
</div>
</div>
<!-- System Components Grid -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h2 class="title-font text-3xl font-bold text-center mb-12">System Architecture Components</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Candidate Generator -->
<div class="card-glass p-6 component-card transition-all duration-300">
<div class="flex items-center mb-4">
<div class="cyber-border rounded-full p-3 mr-4">
<i data-feather="cpu" class="h-6 w-6 text-indigo-400"></i>
</div>
<h3 class="text-xl font-semibold">Candidate Generator</h3>
</div>
<p class="text-gray-300 text-sm">Produces private-key candidates with high throughput and deterministic sequences for reproducibility across distributed systems.</p>
<div class="mt-4 flex items-center text-sm text-emerald-400">
<i data-feather="activity" class="h-4 w-4 mr-1"></i>
<span>2.4M keys/sec</span>
</div>
</div>
<!-- Key Transformation -->
<div class="card-glass p-6 component-card transition-all duration-300">
<div class="flex items-center mb-4">
<div class="cyber-border rounded-full p-3 mr-4">
<i data-feather="settings" class="h-6 w-6 text-amber-500"></i>
</div>
<h3 class="text-xl font-semibold">Key Transformation</h3>
</div>
<p class="text-gray-300 text-sm">Elliptic-curve point multiplication and address encoding pipeline using optimized secp256k1 implementations for maximum performance.</p>
<div class="mt-4 flex items-center text-sm text-amber-400">
<i data-feather="zap" class="h-4 w-4 mr-1"></i>
<span>GPU Accelerated</span>
</div>
</div>
<!-- Checker/Comparator -->
<div class="card-glass p-6 component-card transition-all duration-300">
<div class="flex items-center mb-4">
<div class="cyber-border rounded-full p-3 mr-4">
<i data-feather="search" class="h-6 w-6 text-red-400"></i>
</div>
<h3 class="text-xl font-semibold">Checker/Comparator</h3>
</div>
<p class="text-gray-300 text-sm">Batch comparison against target addresses with efficient memory management and reduced overhead through optimized data structures.</p>
<div class="mt-4 flex items-center text-sm text-red-400">
<i data-feather="target" class="h-4 w-4 mr-1"></i>
<span>12 Targets Active</span>
</div>
</div>
<!-- I/O Batching -->
<div class="card-glass p-6 component-card transition-all duration-300">
<div class="flex items-center mb-4">
<div class="cyber-border rounded-full p-3 mr-4">
<i data-feather="layers" class="h-6 w-6 text-blue-400"></i>
</div>
<h3 class="text-xl font-semibold">I/O Batching Layer</h3>
</div>
<p class="text-gray-300 text-sm">Streamlined data flow between components with intelligent batching to minimize syscall overhead and maximize throughput.</p>
<div class="mt-4 flex items-center text-sm text-blue-400">
<i data-feather="database" class="h-4 w-4 mr-1"></i>
<span>512KB Batch Size</span>
</div>
</div>
<!-- Parallelization -->
<div class="card-glass p-6 component-card transition-all duration-300">
<div class="flex items-center mb-4">
<div class="cyber-border rounded-full p-3 mr-4">
<i data-feather="grid" class="h-6 w-6 text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold">Parallelization</h3>
</div>
<p class="text-gray-300 text-sm">Distributed workload coordination across CPU/GPU/FPGA clusters with dynamic range assignment and result aggregation.</p>
<div class="mt-4 flex items-center text-sm text-purple-400">
<i data-feather="server" class="h-4 w-4 mr-1"></i>
<span>24 Workers Active</span>
</div>
</div>
<!-- Result Handling -->
<div class="card-glass p-6 component-card transition-all duration-300">
<div class="flex items-center mb-4">
<div class="cyber-border rounded-full p-3 mr-4">
<i data-feather="shield" class="h-6 w-6 text-green-400"></i>
</div>
<h3 class="text-xl font-semibold">Result Handling</h3>
</div>
<p class="text-gray-300 text-sm">Secure verification pipeline with independent double-checking and safe handling policies to prevent accidental exposure.</p>
<div class="mt-4 flex items-center text-sm text-green-400">
<i data-feather="lock" class="h-4 w-4 mr-1"></i>
<span>Zero Trust Policy</span>
</div>
</div>
</div>
</div>
<!-- Live Stats Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="card-glass p-8">
<h2 class="title-font text-2xl font-bold mb-6">Live System Performance</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center stats-counter">
<div class="text-3xl font-bold text-indigo-400">24.7M</div>
<div class="text-sm text-gray-400 mt-1">Keys/Sec Total</div>
</div>
<div class="text-center stats-counter">
<div class="text-3xl font-bold text-emerald-400">98.7%</div>
<div class="text-sm text-gray-400 mt-1">Uptime</div>
</div>
<div class="text-center stats-counter">
<div class="text-3xl font-bold text-amber-400">2.1P</div>
<div class="text-sm text-gray-400 mt-1">Keys Processed</div>
</div>
<div class="text-center stats-counter">
<div class="text-3xl font-bold text-red-400">0</div>
<div class="text-sm text-gray-400 mt-1">Matches Found</div>
</div>
</div>
<div class="mt-8 bg-gray-800/50 rounded-lg p-4">
<div class="flex justify-between text-sm text-gray-400 mb-2">
<span>Current Range Progress</span>
<span>42.8%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="bg-gradient-to-r from-indigo-500 to-emerald-400 h-2 rounded-full" style="width: 42.8%"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="border-t border-gray-700/30 mt-20">
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center">
<i data-feather="key" class="h-6 w-6 text-indigo-500"></i>
<span class="ml-2 title-font font-semibold">KeyHunter Pro</span>
</div>
<div class="mt-4 md:mt-0 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="github" class="h-5 w-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter" class="h-5 w-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="mail" class="h-5 w-5"></i>
</a>
</div>
</div>
<div class="mt-8 text-center text-sm text-gray-400">
<p>© 2024 KeyHunter Pro. Advanced cryptographic exploration system.</p>
</div>
</div>
</footer>
</div>
<!-- Control Panel -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="card-glass p-8">
<h2 class="title-font text-2xl font-bold mb-6">System Controls</h2>
<div class="flex flex-wrap gap-4">
<button id="startScanBtn" class="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg transition-colors">
<i data-feather="play" class="h-4 w-4 mr-2 inline"></i>Start Scan
</button>
<button id="stopScanBtn" class="px-6 py-3 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors">
<i data-feather="square" class="h-4 w-4 mr-2 inline"></i>Stop Scan
</button>
<button id="addTargetBtn" class="px-6 py-3 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg transition-colors">
<i data-feather="plus" class="h-4 w-4 mr-2 inline"></i>Add Target
</button>
</div>
</div>
</div>
<!-- Workers Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="card-glass p-8">
<h2 class="title-font text-2xl font-bold mb-6">Worker Status</h2>
<div id="workersContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Workers will be dynamically populated -->
</div>
</div>
</div>
<!-- Targets Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="card-glass p-8">
<h2 class="title-font text-2xl font-bold mb-6">Target Addresses</h2>
<div id="targetsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Targets will be dynamically populated -->
</div>
</div>
</div>
<script src="/static/frontend.js"></script>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x6366f1,
backgroundColor: 0x111827,
points: 12.00,
maxDistance: 22.00,
spacing: 16.00
});
// Initialize Feather Icons
feather.replace();
// Simple animation for stats counters
document.addEventListener('DOMContentLoaded', function() {
const counters = document.querySelectorAll('.stats-counter');
counters.forEach(counter => {
counter.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.05)';
});
counter.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
});
</script>
</body>
</html>