hackinghardware / index.html
S-Dreamer's picture
Add 3 files
9e4da93 verified
<!DOCTYPE html>
<!-- Root element of the HTML document -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Sets the viewport to the device's width and sets the zoom level to 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Sets the title of the HTML document, which appears on the browser's title bar or tab -->
<title>HackerHardware.net - Hacking & Penetration Testing Tech</title>
<!-- Includes the Tailwind CSS framework -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Includes the Font Awesome icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Defines the CSS styles for the typewriter animation */
.typewriter {
overflow: hidden;
border-right: .15em solid #4ade80;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #4ade80; }
}
/* Defines the CSS styles for the terminal-like UI */
.terminal {
background-color: #111827;
color: #4ade80;
font-family: 'Courier New', monospace;
border-radius: 0.5rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.terminal-header {
background-color: #1f2937;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.terminal-body {
padding: 1.5rem;
height: 300px;
overflow-y: auto;
}
.command-line {
display: flex;
align-items: center;
}
.prompt {
color: #60a5fa;
margin-right: 0.5rem;
}
.cursor {
display: inline-block;
width: 10px;
height: 20px;
background-color: #4ade80;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Defines the CSS styles for the glow-on-hover effect */
.glow-on-hover {
transition: all 0.3s ease;
}
.glow-on-hover:hover {
box-shadow: 0 0 15px rgba(74, 222, 128, 0.6);
transform: translateY(-2px);
}
/* Defines the CSS styles for the hacker-themed text */
.hacker-text {
background: linear-gradient(90deg, #4ade80, #60a5fa, #a78bfa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<!-- Header -->
<header class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50">
<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-terminal text-green-400 text-2xl"></i>
<a href="#" class="text-xl font-bold hacker-text">HackerHardware.net</a>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-green-400 transition">Home</a>
<a href="#" class="hover:text-green-400 transition">Shop</a>
<a href="#" class="hover:text-green-400 transition">Tools</a>
<a href="#" class="hover:text-green-400 transition">Tutorials</a>
<a href="#" class="hover:text-green-400 transition">Forum</a>
</nav>
<div class="flex items-center space-x-4">
<button class="hover:text-green-400 transition">
<i class="fas fa-search"></i>
</button>
<button class="hover:text-green-400 transition">
<i class="fas fa-shopping-cart"></i>
</button>
<button class="md:hidden hover:text-green-400 transition">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="relative bg-gradient-to-b from-gray-800 to-gray-900 py-20">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-4">
<span class="hacker-text">Hacking Hardware</span> <br>
<span class="typewriter">For Professionals</span>
</h1>
<p class="text-gray-300 mb-6 text-lg">
The ultimate destination for penetration testing tools, hardware, and cybersecurity equipment.
Trusted by ethical hackers worldwide.
</p>
<div class="flex space-x-4">
<button class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium glow-on-hover transition">
Shop Now <i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="border border-green-500 text-green-400 hover:bg-green-900 hover:bg-opacity-30 px-6 py-3 rounded-lg font-medium glow-on-hover transition">
Learn More
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="terminal w-full max-w-lg">
<div class="terminal-header flex items-center px-4 py-2">
<div class="flex space-x-2 mr-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="text-sm text-gray-400">root@hackerhardware:~</div>
</div>
<div class="terminal-body">
<div class="mb-4">
<div class="command-line mb-2">
<span class="prompt">$</span>
<span>sudo apt-get install hacking-tools</span>
</div>
<p class="text-green-400">Reading package lists... Done</p>
<p class="text-green-400">Building dependency tree... Done</p>
<p class="text-green-400">The following NEW packages will be installed:</p>
<p class="text-blue-400 ml-4">wifi-pineapple hak5 rubber-ducky usb-kill raspberry-pi</p>
</div>
<div class="mb-4">
<div class="command-line mb-2">
<span class="prompt">$</span>
<span>ping hackerhardware.net</span>
</div>
<p>PING hackerhardware.net (192.168.1.1) 56(84) bytes of data.</p>
<p>64 bytes from hackerhardware.net: icmp_seq=1 ttl=64 time=0.023 ms</p>
<p>64 bytes from hackerhardware.net: icmp_seq=2 ttl=64 time=0.034 ms</p>
</div>
<div class="command-line">
<span class="prompt">$</span>
<span>_</span>
<span class="cursor"></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="py-16 bg-gray-900">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2 hacker-text">Featured Hardware</h2>
<p class="text-gray-400 max-w-2xl mx-auto">Top-rated penetration testing tools used by security professionals</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Product Template -->
<div class="bg-gray-800 rounded-lg overflow-hidden glow-on-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/61YVqHdFRxL._AC_SL1500_.jpg" alt="WiFi Pineapple" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-green-500 text-xs font-bold px-2 py-1 rounded">BEST SELLER</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">WiFi Pineapple Mark VII</h3>
<p class="text-gray-400 text-sm mb-3">Professional wireless auditing platform</p>
<div class="flex justify-between items-center">
<span class="text-green-400 font-bold">$199.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
<i class="fas fa-cart-plus mr-1"></i> Add
</button>
</div>
</div>
</div>
<!-- Repeat similar structure for other products -->
<div class="bg-gray-800 rounded-lg overflow-hidden glow-on-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/61+Q6RhR1VL._AC_SL1500_.jpg" alt="USB Rubber Ducky" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">USB Rubber Ducky</h3>
<p class="text-gray-400 text-sm mb-3">Keystroke injection attack platform</p>
<div class="flex justify-between items-center">
<span class="text-green-400 font-bold">$89.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
<i class="fas fa-cart-plus mr-1"></i> Add
</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden glow-on-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/71Yw5tU6KIL._AC_SL1500_.jpg" alt="Flipper Zero" class="w-full h-48 object-cover">
<div class="absolute top-2 right-2 bg-blue-500 text-xs font-bold px-2 py-1 rounded">NEW</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Flipper Zero</h3>
<p class="text-gray-400 text-sm mb-3">Multi-tool device for pentesters</p>
<div class="flex justify-between items-center">
<span class="text-green-400 font-bold">$169.00</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
<i class="fas fa-cart-plus mr-1"></i> Add
</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden glow-on-hover">
<div class="relative">
<img src="https://m.media-amazon.com/images/I/71Yw5tU6KIL._AC_SL1500_.jpg" alt="LAN Turtle" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">LAN Turtle</h3>
<p class="text-gray-400 text-sm mb-3">Covert network penetration tool</p>
<div class="flex justify-between items-center">
<span class="text-green-400 font-bold">$59.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
<i class="fas fa-cart-plus mr-1"></i> Add
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<button class="border border-green-500 text-green-400 hover:bg-green-900 hover:bg-opacity-30 px-6 py-3 rounded-lg font-medium glow-on-hover transition">
View All Products <i class="fas fa-chevron-right ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2 hacker-text">Why Choose HackerHardware.net?</h2>
<p class="text-gray-400 max-w-2xl mx-auto">We provide the best tools and resources for security professionals</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-900 <!-- Continuation of the code documentation -->
<div class="bg-gray-900 p-6 rounded-lg glow-on-hover">
<div class="text-green-400 text-4xl mb-4">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold mb-2">Trusted by Professionals</h3>
<p class="text-gray-400">Our products are used by security teams at Fortune 500 companies and government agencies worldwide.</p>
</div>
<div class="bg-gray-900 p-6 rounded-lg glow-on-hover">
<div class="text-green-400 text-4xl mb-4">
<i class="fas fa-lock"></i>
</div>
<h3 class="text-xl font-bold mb-2">Secure Shipping</h3>
<p class="text-gray-400">All packages are discreetly shipped with no external branding to protect your privacy.</p>
</div>
<div class="bg-gray-900 p-6 rounded-lg glow-on-hover">
<div class="text-green-400 text-4xl mb-4">
<i class="fas fa-book"></i>
</div>
<h3 class="text-xl font-bold mb-2">Free Resources</h3>
<p class="text-gray-400">Access our library of tutorials, whitepapers, and how-to guides to master your tools.</p>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-gradient-to-r from-gray-900 to-gray-800">
<div class="container mx-auto px-4 max-w-4xl">
<div class="bg-gray-800 rounded-lg p-8 glow-on-hover">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold mb-2 hacker-text">Join Our Hacker Community</h2>
<p class="text-gray-400">Get the latest updates on new products, security research, and exclusive deals.</p>
</div>
<div class="flex flex-col md:flex-row gap-4">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
<button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium whitespace-nowrap">
Subscribe <i class="fas fa-paper-plane ml-2"></i>
</button>
</div>
<p class="text-gray-500 text-xs mt-4 text-center">
We respect your privacy. No spam, ever.
</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 border-t border-gray-800 pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-terminal text-green-400 text-2xl"></i>
<span class="text-xl font-bold hacker-text">HackerHardware.net</span>
</div>
<p class="text-gray-400 mb-4">
The premier destination for ethical hacking tools and penetration testing hardware.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-green-400 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-400 transition">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-400 transition">
<i class="fab fa-discord"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-400 transition">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Shop</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Wireless Tools</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">USB Devices</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">RF Tools</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Bundles</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">New Arrivals</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Tutorials</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Forum</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Whitepapers</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Shipping Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Returns</a></li>
<li><a href="#" class="text-gray-400 hover:text-green-400 transition">Legal</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">
&copy; 2023 HackerHardware.net. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-green-400 text-sm transition">Privacy Policy</a>
<a href="#" class="text-gray-500 hover:text-green-400 text-sm transition">Terms of Service</a>
<a href="#" class="text-gray-500 hover:text-green-400 text-sm transition">Ethics Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Terminal typing effect
document.addEventListener('DOMContentLoaded', function() {
const commands = [
"nmap -sV -O 192.168.1.1/24",
"hydra -l admin -P wordlist.txt ssh://target",
"sqlmap -u 'http://target.com/page?id=1' --dbs",
"msfconsole -q -x 'use exploit/multi/handler; set payload windows/meterpreter/reverse_tcp; set LHOST 192.168.1.100; set LPORT 4444; exploit'"
];
const terminalBody = document.querySelector('.terminal-body');
const commandLine = terminalBody.querySelector('.command-line:last-child');
let currentCommand = 0;
function typeCommand() {
if (currentCommand >= commands.length) {
currentCommand = 0;
}
const command = commands[currentCommand];
let i = 0;
// Clear previous command
commandLine.innerHTML = '<span class="prompt">$</span><span></span><span class="cursor"></span>';
const commandText = commandLine.querySelector('span:nth-child(2)');
const typing = setInterval(() => {
if (i < command.length) {
commandText.textContent += command.charAt(i);
i++;
} else {
clearInterval(typing);
// Add output
setTimeout(() => {
const output = document.createElement('div');
output.className = 'mb-4 text-green-400';
output.textContent = 'Command executed successfully.';
terminalBody.insertBefore(output, commandLine);
terminalBody.scrollTop = terminalBody.scrollHeight;
currentCommand++;
setTimeout(typeCommand, 2000);
}, 1000);
}
}, 50);
}
// Start typing after initial delay
setTimeout(typeCommand, 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=S-Dreamer/hackinghardware" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>