Spaces:
Running
Running
Download index.html from ZombieCleric94/hack: direct link, hf CLI and curl.
- Browser
- Download file 80.8 kB
-
https://huggingface.co/spaces/ZombieCleric94/hack/resolve/main/index.html
- Command line
-
hf download hf://spaces/ZombieCleric94/hack/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ZombieCleric94/hack/resolve/main/index.html
80.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HackLab - Ethical Hacking Platform</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 animations */ | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s infinite; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4f46e5; | |
| border-radius: 4px; | |
| } | |
| /* Challenge card hover effect */ | |
| .challenge-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Terminal styling */ | |
| .terminal { | |
| background-color: #1e1e1e; | |
| color: #33ff33; | |
| font-family: 'Courier New', monospace; | |
| border-radius: 0.5rem; | |
| position: relative; | |
| } | |
| .terminal-header { | |
| background-color: #333; | |
| border-top-left-radius: 0.5rem; | |
| border-top-right-radius: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .terminal-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| margin-right: 6px; | |
| } | |
| .terminal-content { | |
| padding: 1rem; | |
| overflow-y: auto; | |
| max-height: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-indigo-500 font-bold text-xl">Hack<span class="text-white">Lab</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#challenges" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Challenges</a> | |
| <a href="#leaderboard" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leaderboard</a> | |
| <a href="#training" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Training</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <div class="relative"> | |
| <button id="notifications-btn" class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 animate-pulse-slow"></span> | |
| </button> | |
| </div> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button id="user-menu-btn" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| <div id="user-menu" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-btn"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a> | |
| </div> | |
| </div> | |
| <button class="ml-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| Upgrade <i class="fas fa-crown ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-btn" type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="md:hidden hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a> | |
| <a href="#challenges" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Challenges</a> | |
| <a href="#leaderboard" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Leaderboard</a> | |
| <a href="#training" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Training</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium leading-none text-white">John Doe</div> | |
| <div class="text-sm font-medium leading-none text-gray-400">john@example.com</div> | |
| </div> | |
| <button class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3 px-2 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="bg-gradient-to-r from-gray-900 to-indigo-900 py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Master Ethical Hacking</span> | |
| <span class="block text-indigo-400">Through Real Challenges</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Join thousands of security enthusiasts in our gamified platform. Solve challenges, earn badges, and climb the leaderboard. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-indigo-900 hover:bg-indigo-800 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> | |
| <div class="terminal"> | |
| <div class="terminal-header"> | |
| <span class="terminal-btn bg-red-500"></span> | |
| <span class="terminal-btn bg-yellow-500"></span> | |
| <span class="terminal-btn bg-green-500"></span> | |
| <span class="text-white text-sm ml-2">root@hacklab:~</span> | |
| </div> | |
| <div class="terminal-content"> | |
| <p class="text-green-400">$ nmap -sV 192.168.1.100</p> | |
| <p>Starting Nmap 7.80 ( https://nmap.org )</p> | |
| <p>Nmap scan report for target.hacklab (192.168.1.100)</p> | |
| <p>Host is up (0.045s latency).</p> | |
| <p class="mt-2">PORT STATE SERVICE VERSION</p> | |
| <p>22/tcp open ssh OpenSSH 7.6p1</p> | |
| <p>80/tcp open http Apache httpd 2.4.29</p> | |
| <p>3306/tcp open mysql MySQL 5.7.29</p> | |
| <p class="mt-2">$ hydra -l admin -P wordlist.txt ftp://192.168.1.100</p> | |
| <p>[DATA] attacking ftp://192.168.1.100:21/</p> | |
| <p>[21][ftp] host: 192.168.1.100 login: admin password: s3cr3t</p> | |
| <p class="text-green-400 mt-2">1 of 1 target successfully completed, 1 valid password found</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Section --> | |
| <div class="bg-gray-800 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Community Growth</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Join our thriving security community | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="bg-gray-700 rounded-lg p-6 text-center"> | |
| <dt class="text-5xl font-extrabold text-indigo-400">25,000+</dt> | |
| <dd class="mt-1 text-lg font-medium text-gray-300">Security Enthusiasts</dd> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-6 text-center"> | |
| <dt class="text-5xl font-extrabold text-indigo-400">1,200+</dt> | |
| <dd class="mt-1 text-lg font-medium text-gray-300">Challenges</dd> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-6 text-center"> | |
| <dt class="text-5xl font-extrabold text-indigo-400">500+</dt> | |
| <dd class="mt-1 text-lg font-medium text-gray-300">Corporate Partners</dd> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-6 text-center"> | |
| <dt class="text-5xl font-extrabold text-indigo-400">98%</dt> | |
| <dd class="mt-1 text-lg font-medium text-gray-300">Satisfaction Rate</dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Challenges Section --> | |
| <section id="challenges" class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Practice</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Hands-on Security Challenges | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| Test your skills with our realistic security challenges across various categories. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm" role="group"> | |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-indigo-600 text-white"> | |
| All | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| Web | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| Binary | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| Crypto | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| Forensics | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-gray-700 text-gray-300 hover:bg-gray-600"> | |
| Network | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Challenge Card 1 --> | |
| <div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center justify-between"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-900 text-indigo-300"> | |
| Web Security | |
| </span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1">4.8</span> | |
| </div> | |
| </div> | |
| <h3 class="mt-3 text-xl font-bold text-white">SQL Injection Mastery</h3> | |
| <p class="mt-2 text-gray-300">Exploit SQL injection vulnerabilities to extract sensitive data from a vulnerable web application.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-shield text-indigo-400"></i> | |
| <span class="ml-2 text-sm text-gray-400">1,245 solvers</span> | |
| </div> | |
| <span class="text-sm font-medium text-indigo-400">Medium</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span class="ml-2 text-sm text-white">150 XP</span> | |
| </div> | |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 2 --> | |
| <div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center justify-between"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-900 text-red-300"> | |
| Binary Exploitation | |
| </span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1">4.9</span> | |
| </div> | |
| </div> | |
| <h3 class="mt-3 text-xl font-bold text-white">Buffer Overflow Basics</h3> | |
| <p class="mt-2 text-gray-300">Exploit a buffer overflow vulnerability in a C program to gain remote code execution.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-shield text-indigo-400"></i> | |
| <span class="ml-2 text-sm text-gray-400">892 solvers</span> | |
| </div> | |
| <span class="text-sm font-medium text-orange-400">Hard</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span class="ml-2 text-sm text-white">250 XP</span> | |
| </div> | |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 3 --> | |
| <div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center justify-between"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-900 text-green-300"> | |
| Cryptography | |
| </span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1">4.5</span> | |
| </div> | |
| </div> | |
| <h3 class="mt-3 text-xl font-bold text-white">RSA Implementation Flaw</h3> | |
| <p class="mt-2 text-gray-300">Break a custom RSA implementation by exploiting mathematical weaknesses in the key generation.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-shield text-indigo-400"></i> | |
| <span class="ml-2 text-sm text-gray-400">1,024 solvers</span> | |
| </div> | |
| <span class="text-sm font-medium text-green-400">Easy</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span class="ml-2 text-sm text-white">100 XP</span> | |
| </div> | |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 4 (Premium) --> | |
| <div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out relative"> | |
| <div class="absolute top-0 right-0 bg-indigo-600 text-white px-2 py-1 text-xs font-bold rounded-bl-lg"> | |
| PREMIUM | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex items-center justify-between"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-900 text-purple-300"> | |
| Network Security | |
| </span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1">4.7</span> | |
| </div> | |
| </div> | |
| <h3 class="mt-3 text-xl font-bold text-white">MITM Attack Simulation</h3> | |
| <p class="mt-2 text-gray-300">Perform a man-in-the-middle attack on a simulated network to intercept and modify traffic.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-shield text-indigo-400"></i> | |
| <span class="ml-2 text-sm text-gray-400">Premium only</span> | |
| </div> | |
| <span class="text-sm font-medium text-orange-400">Hard</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span class="ml-2 text-sm text-white">300 XP</span> | |
| </div> | |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| Upgrade to Access | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 5 --> | |
| <div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center justify-between"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-900 text-blue-300"> | |
| Forensics | |
| </span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1">4.6</span> | |
| </div> | |
| </div> | |
| <h3 class="mt-3 text-xl font-bold text-white">Memory Dump Analysis</h3> | |
| <p class="mt-2 text-gray-300">Analyze a memory dump to find evidence of malicious activity and extract hidden data.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-shield text-indigo-400"></i> | |
| <span class="ml-2 text-sm text-gray-400">756 solvers</span> | |
| </div> | |
| <span class="text-sm font-medium text-indigo-400">Medium</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span class="ml-2 text-sm text-white">200 XP</span> | |
| </div> | |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 6 --> | |
| <div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out"> | |
| <div class="p-5"> | |
| <div class="flex items-center justify-between"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-pink-900 text-pink-300"> | |
| Reverse Engineering | |
| </span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1">4.9</span> | |
| </div> | |
| </div> | |
| <h3 class="mt-3 text-xl font-bold text-white">Crackme Challenge</h3> | |
| <p class="mt-2 text-gray-300">Reverse engineer a binary to understand its serial validation algorithm and bypass it.</p> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user-shield text-indigo-400"></i> | |
| <span class="ml-2 text-sm text-gray-400">1,102 solvers</span> | |
| </div> | |
| <span class="text-sm font-medium text-orange-400">Hard</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| <span class="ml-2 text-sm text-white">250 XP</span> | |
| </div> | |
| <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="px-6 py-3 border border-indigo-600 text-indigo-400 font-medium rounded-md hover:bg-indigo-900 hover:text-white transition duration-150"> | |
| View All Challenges | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leaderboard Section --> | |
| <section id="leaderboard" class="py-12 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Competition</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Top Hackers Leaderboard | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| See how you stack up against the best security researchers. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="bg-gray-700 rounded-lg shadow overflow-hidden"> | |
| <div class="px-4 py-5 sm:px-6 bg-gray-900 border-b border-gray-600"> | |
| <h3 class="text-lg leading-6 font-medium text-white"> | |
| Monthly Rankings | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-300"> | |
| Updated in real-time as users solve challenges | |
| </p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-600"> | |
| <thead class="bg-gray-700"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"> | |
| Rank | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"> | |
| Hacker | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"> | |
| Points | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"> | |
| Challenges | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"> | |
| Badges | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-800 divide-y divide-gray-600"> | |
| <!-- Top 1 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold"> | |
| 1 | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white"> | |
| cyberqueen | |
| </div> | |
| <div class="text-sm text-gray-300"> | |
| @anna_hacker | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white font-bold">12,450</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">187</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200"> | |
| Elite | |
| </span> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200"> | |
| Pwner | |
| </span> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Top 2 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-gray-300 rounded-full flex items-center justify-center text-gray-800 font-bold"> | |
| 2 | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white"> | |
| rootkit | |
| </div> | |
| <div class="text-sm text-gray-300"> | |
| @mike_sec | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white font-bold">11,870</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">175</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200"> | |
| Elite | |
| </span> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-200"> | |
| Crypto | |
| </span> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Top 3 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-amber-600 rounded-full flex items-center justify-center text-white font-bold"> | |
| 3 | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white"> | |
| byte_bender | |
| </div> | |
| <div class="text-sm text-gray-300"> | |
| @lisa_reverse | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white font-bold">11,250</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">168</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200"> | |
| Elite | |
| </span> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-200"> | |
| Web | |
| </span> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Top 4 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full flex items-center justify-center text-white font-bold bg-gray-700"> | |
| 4 | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white"> | |
| shellshock | |
| </div> | |
| <div class="text-sm text-gray-300"> | |
| @david_pentest | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white font-bold">10,980</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">162</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200"> | |
| Elite | |
| </span> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200"> | |
| Pwner | |
| </span> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Top 5 --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full flex items-center justify-center text-white font-bold bg-gray-700"> | |
| 5 | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/90.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white"> | |
| sql_killer | |
| </div> | |
| <div class="text-sm text-gray-300"> | |
| @sarah_db | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white font-bold">10,750</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">159</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex space-x-1"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200"> | |
| Elite | |
| </span> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-900 text-indigo-200"> | |
| Network | |
| </span> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="bg-gray-700 rounded-lg p-4 w-full max-w-md"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-300 font-bold"> | |
| 42 | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white"> | |
| Your current rank | |
| </div> | |
| <div class="text-sm text-gray-300"> | |
| 8,240 points • 124 challenges solved | |
| </div> | |
| </div> | |
| <button class="ml-auto px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md"> | |
| View Profile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Training Section --> | |
| <section id="training" class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Learning Paths</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Structured Security Training | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| Follow our guided learning paths to systematically build your skills. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Training Path 1 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="p-5"> | |
| <div class="flex justify-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl text-center font-bold text-white">Web Security Fundamentals</h3> | |
| <p class="mt-2 text-base text-gray-300 text-center"> | |
| Master the OWASP Top 10 vulnerabilities and modern web defenses. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>12 Modules</span> | |
| <span>8-10 hours</span> | |
| </div> | |
| <div class="mt-2 w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="mt-1 text-xs text-right text-gray-400">45% completed</div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-white">Skills you'll gain:</h4> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">SQL Injection</span> | |
| <span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">XSS</span> | |
| <span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">CSRF</span> | |
| <span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">JWT</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 text-center"> | |
| <button class="text-indigo-400 hover:text-indigo-300 text-sm font-medium"> | |
| Continue Learning <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Training Path 2 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="p-5"> | |
| <div class="flex justify-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white"> | |
| <i class="fas fa-bug"></i> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl text-center font-bold text-white">Binary Exploitation</h3> | |
| <p class="mt-2 text-base text-gray-300 text-center"> | |
| Learn stack overflows, ROP chains, and modern binary protections. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>15 Modules</span> | |
| <span>12-15 hours</span> | |
| </div> | |
| <div class="mt-2 w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-red-600 h-2.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| <div class="mt-1 text-xs text-right text-gray-400">20% completed</div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-white">Skills you'll gain:</h4> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">Buffer Overflows</span> | |
| <span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">ROP Chains</span> | |
| <span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">ASLR Bypass</span> | |
| <span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">Shellcoding</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 text-center"> | |
| <button class="text-red-400 hover:text-red-300 text-sm font-medium"> | |
| Continue Learning <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Training Path 3 (Premium) --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg relative"> | |
| <div class="absolute top-0 right-0 bg-indigo-600 text-white px-2 py-1 text-xs font-bold rounded-bl-lg"> | |
| PREMIUM | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-center"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-network-wired"></i> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl text-center font-bold text-white">Advanced Network Attacks</h3> | |
| <p class="mt-2 text-base text-gray-300 text-center"> | |
| MITM, VLAN hopping, VPN exploitation, and enterprise network attacks. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>18 Modules</span> | |
| <span>15-20 hours</span> | |
| </div> | |
| <div class="mt-2 w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="mt-1 text-xs text-right text-gray-400">Not started</div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-white">Skills you'll gain:</h4> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">MITM</span> | |
| <span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">VPN Exploits</span> | |
| <span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">802.1Q</span> | |
| <span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">DNS Spoofing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3 bg-gray-700 border-t border-gray-600 text-center"> | |
| <button class="text-purple-400 hover:text-purple-300 text-sm font-medium"> | |
| Upgrade to Access <i class="fas fa-crown ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="px-6 py-3 border border-indigo-600 text-indigo-400 font-medium rounded-md hover:bg-indigo-900 hover:text-white transition duration-150"> | |
| Browse All Learning Paths | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Corporate Training Section --> | |
| <section class="py-12 bg-indigo-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h2 class="text-3xl tracking-tight font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Enterprise Security Training</span> | |
| </h2> | |
| <p class="mt-3 text-base text-indigo-200 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Equip your team with hands-on security skills through our corporate training programs. Customizable learning paths, reporting dashboards, and dedicated support. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| Request Demo | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-700 hover:bg-indigo-800 md:py-4 md:text-lg md:px-10"> | |
| Download Brochure | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md overflow-hidden"> | |
| <div class="bg-gray-800 p-6"> | |
| <h3 class="text-lg font-medium text-white">Corporate Plan Features</h3> | |
| <ul class="mt-4 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-300">Custom team learning paths</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-300">Progress tracking dashboard</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-300">Private challenges and labs</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-300">Dedicated support</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-300">API integration</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-3 text-base text-gray-300">Custom certification</p> | |
| </li> | |
| </ul> | |
| <div class="mt-6 bg-gray-700 rounded-lg p-4"> | |
| <h4 class="text-sm font-medium text-white">Trusted by security teams at:</h4> | |
| <div class="mt-3 grid grid-cols-3 gap-4"> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-8 opacity-70 hover:opacity-100" src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-8 opacity-70 hover:opacity-100" src="https://logo.clearbit.com/ibm.com" alt="IBM"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-8 opacity-70 hover:opacity-100" src="https://logo.clearbit.com/paypal.com" alt="PayPal"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="sm:flex sm:flex-col sm:align-center"> | |
| <h2 class="text-3xl tracking-tight font-extrabold text-white sm:text-4xl text-center"> | |
| Simple, transparent pricing | |
| </h2> | |
| <p class="mt-5 text-xl text-gray-300 text-center max-w-3xl mx-auto"> | |
| Choose the plan that fits your needs. Cancel anytime. | |
| </p> | |
| <div class="relative mt-6 bg-gray-800 rounded-lg p-0.5 flex self-center"> | |
| <button type="button" class="relative bg-gray-700 border-gray-800 rounded-md shadow-sm py-2 text-sm font-medium text-white whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"> | |
| Monthly billing | |
| </button> | |
| <button type="button" class="ml-0.5 relative border border-transparent rounded-md py-2 text-sm font-medium text-gray-300 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"> | |
| Yearly billing | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0"> | |
| <!-- Free Tier --> | |
| <div class="border border-gray-700 rounded-lg shadow-sm divide-y divide-gray-700 bg-gray-800"> | |
| <div class="p-6"> | |
| <h2 class="text-lg leading-6 font-medium text-white">Free</h2> | |
| <p class="mt-4 text-sm text-gray-300">Basic access to learn and practice</p> | |
| <p class="mt-8"> | |
| <span class="text-4xl font-extrabold text-white">$0</span> | |
| <span class="text-base font-medium text-gray-300">/month</span> | |
| </p> | |
| <button class="mt-8 block w-full bg-gray-700 border border-gray-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-gray-600"> | |
| Get started | |
| </button> | |
| </div> | |
| <div class="pt-6 pb-8 px-6"> | |
| <h3 class="text-xs font-medium text-gray-300 tracking-wide uppercase">What's included</h3> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Access to basic challenges</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Community leaderboard</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Basic learning paths</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-gray-400"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Premium challenges</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-gray-400"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Advanced learning paths</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-gray-400"> | |
| <i class="fas fa-times"></i> | |
| </div> | |
| <span class="text-sm text-gray-400">Private labs</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Pro Tier --> | |
| <div class="border-2 border-indigo-500 rounded-lg shadow-sm divide-y divide-gray-700 bg-gray-800"> | |
| <div class="p-6"> | |
| <h2 class="text-lg leading-6 font-medium text-white">Pro</h2> | |
| <p class="mt-4 text-sm text-gray-300">For serious security learners</p> | |
| <p class="mt-8"> | |
| <span class="text-4xl font-extrabold text-white">$19</span> | |
| <span class="text-base font-medium text-gray-300">/month</span> | |
| </p> | |
| <button class="mt-8 block w-full bg-indigo-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white hover:bg-indigo-700"> | |
| Upgrade now | |
| </button> | |
| </div> | |
| <div class="pt-6 pb-8 px-6"> | |
| <h3 class="text-xs font-medium text-gray-300 tracking-wide uppercase">What's included</h3> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">All basic features</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Access to premium challenges</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Advanced learning paths</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Private labs</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Priority support</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Downloadable certificates</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Enterprise Tier --> | |
| <div class="border border-gray-700 rounded-lg shadow-sm divide-y divide-gray-700 bg-gray-800"> | |
| <div class="p-6"> | |
| <h2 class="text-lg leading-6 font-medium text-white">Enterprise</h2> | |
| <p class="mt-4 text-sm text-gray-300">For teams and organizations</p> | |
| <p class="mt-8"> | |
| <span class="text-4xl font-extrabold text-white">Custom</span> | |
| </p> | |
| <button class="mt-8 block w-full bg-gray-700 border border-gray-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-gray-600"> | |
| Contact sales | |
| </button> | |
| </div> | |
| <div class="pt-6 pb-8 px-6"> | |
| <h3 class="text-xs font-medium text-gray-300 tracking-wide uppercase">What's included</h3> | |
| <ul class="mt-6 space-y-4"> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">All Pro features</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Team management</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Custom learning paths</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Private challenges</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Progress reporting</span> | |
| </li> | |
| <li class="flex space-x-3"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-400"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <span class="text-sm text-gray-300">Dedicated account manager</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-12 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| What our users say | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-700 rounded-lg p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-white">Sarah Johnson</div> | |
| <div class="text-indigo-300">Security Engineer @ TechCorp</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-300"> | |
| "HackLab's challenges helped me transition from web development to security. The hands-on approach is exactly what I needed to prepare for my OSCP." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex text-yellow-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="ml-2 text-sm text-gray-400">2 months ago</span> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-700 rounded-lg p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-lg font-medium text-white">Michael Chen</div> | |
| <div class="text-indigo-300">CTO @ SecureStart</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-300"> | |
| "We use HackLab for our entire security team's training. The corporate features save us countless hours compared to building our own training program." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex text-yellow-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="ml | |
| <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=ZombieCleric94/hack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |