Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HackerHardware.net | Cutting-edge tech for hackers</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| hacker: { | |
| primary: '#0f172a', | |
| secondary: '#1e293b', | |
| accent: '#00ff9d', | |
| text: '#e2e8f0', | |
| highlight: '#3b82f6' | |
| } | |
| }, | |
| fontFamily: { | |
| mono: ['IBM Plex Mono', 'monospace'], | |
| sans: ['Inter', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .terminal-input { | |
| background: rgba(30, 41, 59, 0.7); | |
| border: 1px solid #334155; | |
| color: #00ff9d; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| .terminal-input:focus { | |
| outline: none; | |
| border-color: #00ff9d; | |
| box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.2); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 255, 157, 0.25); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.5); | |
| } | |
| .circuit-bg { | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23334155' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #00ff9d; | |
| white-space: nowrap; | |
| 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: #00ff9d; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-hacker-primary text-hacker-text font-sans"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-hacker-secondary bg-opacity-90 backdrop-blur-sm border-b border-hacker-accent"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between py-4"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-hacker-accent flex items-center justify-center mr-3"> | |
| <i class="fas fa-microchip text-hacker-primary text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold font-mono tracking-tight"> | |
| HACKER<span class="text-hacker-accent">HARDWARE</span> | |
| </h1> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-hacker-accent transition-colors">Products</a> | |
| <a href="#" class="hover:text-hacker-accent transition-colors">Categories</a> | |
| <a href="#" class="hover:text-hacker-accent transition-colors">Deals</a> | |
| <a href="#" class="hover:text-hacker-accent transition-colors">Community</a> | |
| <a href="#" class="hover:text-hacker-accent transition-colors">Support</a> | |
| </nav> | |
| <!-- Icons --> | |
| <div class="flex items-center space-x-5"> | |
| <div class="hidden md:block relative"> | |
| <input type="text" placeholder="Search hardware..." class="terminal-input px-4 py-2 rounded-full w-64 bg-hacker-secondary border border-gray-700"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| <a href="#" class="hover:text-hacker-accent transition-colors"> | |
| <i class="fas fa-user text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-hacker-accent transition-colors relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-hacker-accent text-hacker-primary text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </a> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden circuit-bg"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-hacker-primary to-black opacity-80"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 relative z-10"> | |
| <div class="max-w-2xl"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-6 font-mono"> | |
| <span class="typewriter">HACK THE FUTURE</span> | |
| </h2> | |
| <p class="text-xl md:text-2xl mb-8 leading-relaxed"> | |
| Premium hardware for cybersecurity professionals, ethical hackers, and tech enthusiasts. Unleash your potential with cutting-edge tools. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-8 py-3 bg-hacker-accent text-hacker-primary font-bold rounded-full hover:bg-opacity-90 transition-all transform hover:-translate-y-1"> | |
| Explore Products <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#" class="px-8 py-3 border-2 border-hacker-accent text-hacker-accent font-bold rounded-full hover:bg-hacker-accent hover:text-hacker-primary transition-all"> | |
| View Deals | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-hacker-primary to-transparent"></div> | |
| </section> | |
| <!-- Featured Categories --> | |
| <section class="py-16 bg-hacker-secondary"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Hardware Categories</h2> | |
| <p class="max-w-2xl mx-auto text-gray-400">Specialized tools for every aspect of cybersecurity and penetration testing</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Category Card --> | |
| <div class="bg-hacker-primary rounded-xl overflow-hidden border border-gray-800 hover:border-hacker-accent transition-all"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-hacker-accent bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-laptop-code text-hacker-accent text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Penetration Testing</h3> | |
| <p class="text-gray-400 mb-4">Tools for network security assessment and vulnerability scanning</p> | |
| <a href="#" class="text-hacker-accent font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Category Card --> | |
| <div class="bg-hacker-primary rounded-xl overflow-hidden border border-gray-800 hover:border-hacker-accent transition-all"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-wifi text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Wireless Hacking</h3> | |
| <p class="text-gray-400 mb-4">Antennas, adapters, and tools for wireless security testing</p> | |
| <a href="#" class="text-hacker-accent font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Category Card --> | |
| <div class="bg-hacker-primary rounded-xl overflow-hidden border border-gray-800 hover:border-hacker-accent transition-all"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-microchip text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Embedded Systems</h3> | |
| <p class="text-gray-400 mb-4">Development boards, programmers, and debugging tools</p> | |
| <a href="#" class="text-hacker-accent font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Category Card --> | |
| <div class="bg-hacker-primary rounded-xl overflow-hidden border border-gray-800 hover:border-hacker-accent transition-all"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Physical Security</h3> | |
| <p class="text-gray-400 mb-4">Lockpicking tools, RFID devices, and access control systems</p> | |
| <a href="#" class="text-hacker-accent font-medium flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-12"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-2">Featured Hardware</h2> | |
| <p class="text-gray-400">Top-rated tools by cybersecurity professionals</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="#" class="px-6 py-2 border border-hacker-accent text-hacker-accent rounded-full hover:bg-hacker-accent hover:text-hacker-primary transition-colors"> | |
| View All Products | |
| </a> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Product Card --> | |
| <div class="product-card bg-hacker-secondary rounded-xl overflow-hidden border border-gray-800 transition-all duration-300"> | |
| <div class="relative"> | |
| <div class="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| HOT | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" alt="Hacking Device" class="w-full h-56 object-cover"> | |
| </div> | |
| <div class="p-5"> | |
| <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 tool</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-sm ml-2">(128)</span> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-xl font-bold">$299.99</span> | |
| <button class="bg-hacker-accent text-hacker-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"> | |
| <i class="fas fa-shopping-cart"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card --> | |
| <div class="product-card bg-hacker-secondary rounded-xl overflow-hidden border border-gray-800 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" alt="Hacking Device" class="w-full h-56 object-cover"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold text-lg mb-1">Proxmark3 RDV4</h3> | |
| <p class="text-gray-400 text-sm mb-3">RFID/NFC tool for security research</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-sm ml-2">(94)</span> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-xl font-bold">$249.99</span> | |
| <button class="bg-hacker-accent text-hacker-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"> | |
| <i class="fas fa-shopping-cart"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card --> | |
| <div class="product-card bg-hacker-secondary rounded-xl overflow-hidden border border-gray-800 transition-all duration-300"> | |
| <div class="relative"> | |
| <div class="absolute top-4 right-4 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| NEW | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1592899677977-53c9a5ed1b5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" alt="Hacking Device" class="w-full h-56 object-cover"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="font-bold text-lg mb-1">Hak5 USB Drive</h3> | |
| <p class="text-gray-400 text-sm mb-3">Programmable USB attack platform</p> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-sm ml-2">(201)</span> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-xl font-bold">$89.99</span> | |
| <button class="bg-hacker-accent text-hacker-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"> | |
| <i class="fas fa-shopping-cart"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card --> | |
| <div class="product-card bg-hacker-secondary rounded-xl overflow-hidden border border-gray-800 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1622737133809-d95047b9e673?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" alt="Hacking Device" class="w-full h-56 object-cover"> | |
| </div> | |
| <div class="p-5"> | |
| <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 items-center mb-3"> | |
| <div class="flex text-amber-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-sm ml-2">(176)</span> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-xl font-bold">$169.99</span> | |
| <button class="bg-hacker-accent text-hacker-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"> | |
| <i class="fas fa-shopping-cart"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-hacker-secondary"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="w-20 h-20 mx-auto rounded-full bg-hacker-accent bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-envelope text-hacker-accent text-3xl"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4">Join the Hacker Community</h2> | |
| <p class="text-gray-400 mb-8">Subscribe to our newsletter for exclusive deals, new product alerts, and security research insights.</p> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <input type="email" placeholder="Your email address" class="terminal-input flex-grow px-5 py-3 rounded-lg bg-hacker-primary border border-gray-700"> | |
| <button class="px-6 py-3 bg-hacker-accent text-hacker-primary font-bold rounded-lg hover:bg-opacity-90 transition-colors"> | |
| Subscribe Now | |
| </button> | |
| </div> | |
| <p class="text-gray-500 text-sm mt-3">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-hacker-primary border-t border-gray-800 pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> | |
| <!-- Column 1 --> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-hacker-accent flex items-center justify-center mr-3"> | |
| <i class="fas fa-microchip text-hacker-primary text-xl"></i> | |
| </div> | |
| <h2 class="text-xl font-bold font-mono"> | |
| HACKER<span class="text-hacker-accent">HARDWARE</span> | |
| </h2> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Providing cutting-edge hardware tools for cybersecurity professionals, ethical hackers, and technology enthusiasts since 2015. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-hacker-secondary flex items-center justify-center hover:bg-hacker-accent transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-hacker-secondary flex items-center justify-center hover:bg-hacker-accent transition-colors"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-hacker-secondary flex items-center justify-center hover:bg-hacker-accent transition-colors"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-hacker-secondary flex items-center justify-center hover:bg-hacker-accent transition-colors"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Quick Links</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Categories</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Deals & Bundles</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Best Sellers</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Support</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">FAQs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Shipping Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Returns & Warranty</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-hacker-accent transition-colors">Documentation</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Contact Info</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-hacker-accent mt-1 mr-3"></i> | |
| <span class="text-gray-400">123 Tech Street, Cyber City</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone text-hacker-accent mt-1 mr-3"></i> | |
| <span class="text-gray-400">+1 (555) 123-4567</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope text-hacker-accent mt-1 mr-3"></i> | |
| <span class="text-gray-400">support@hackerhardware.net</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center"> | |
| <p class="text-gray-500"> | |
| © 2023 HackerHardware.net. All rights reserved. Designed for security research and educational purposes only. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add animation to product cards when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('product-card'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.product-card').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| // Terminal input focus effect | |
| const terminalInputs = document.querySelectorAll('.terminal-input'); | |
| terminalInputs.forEach(input => { | |
| input.addEventListener('focus', function() { | |
| this.parentElement.classList.add('glow'); | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.parentElement.classList.remove('glow'); | |
| }); | |
| }); | |
| }); | |
| </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/hacker-hardware" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |