| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Shodan - Search Engine for the Internet of Things</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> |
| | :root { |
| | --primary: #4f46e5; |
| | --primary-dark: #4338ca; |
| | --secondary: #10b981; |
| | } |
| | |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%); |
| | } |
| | .gradient-text { |
| | background: linear-gradient(90deg, #4f46e5, #10b981); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| | .search-box { |
| | box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); |
| | backdrop-filter: blur(4px); |
| | -webkit-backdrop-filter: blur(4px); |
| | border-radius: 10px; |
| | border: 1px solid rgba(255, 255, 255, 0.18); |
| | } |
| | .result-card { |
| | transition: all 0.3s ease; |
| | border-left: 4px solid var(--primary); |
| | } |
| | .result-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); |
| | } |
| | .map-container { |
| | height: 500px; |
| | background-color: #e5e7eb; |
| | position: relative; |
| | overflow: hidden; |
| | border-radius: 12px; |
| | } |
| | .map-placeholder { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | background: url('https://maps.googleapis.com/maps/api/staticmap?center=37.0902,-95.7129&zoom=4&size=800x400&maptype=roadmap&style=feature:all|element:labels|visibility:off') no-repeat center center; |
| | background-size: cover; |
| | opacity: 0.7; |
| | } |
| | .glow { |
| | box-shadow: 0 0 15px rgba(79, 70, 229, 0.5); |
| | } |
| | .nav-link { |
| | position: relative; |
| | } |
| | .nav-link:after { |
| | content: ''; |
| | position: absolute; |
| | width: 0; |
| | height: 2px; |
| | bottom: -2px; |
| | left: 0; |
| | background-color: var(--primary); |
| | transition: width 0.3s ease; |
| | } |
| | .nav-link:hover:after { |
| | width: 100%; |
| | } |
| | .tab-content { |
| | display: none; |
| | } |
| | .tab-content.active { |
| | display: block; |
| | animation: fadeIn 0.5s ease; |
| | } |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | .device-tag { |
| | display: inline-block; |
| | padding: 0.25rem 0.5rem; |
| | border-radius: 9999px; |
| | font-size: 0.75rem; |
| | font-weight: 600; |
| | } |
| | .pulse { |
| | animation: pulse 2s infinite; |
| | } |
| | @keyframes pulse { |
| | 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); } |
| | 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } |
| | 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } |
| | } |
| | .host-details { |
| | position: fixed; |
| | top: 0; |
| | right: -100%; |
| | width: 50%; |
| | height: 100vh; |
| | background: white; |
| | box-shadow: -5px 0 15px rgba(0,0,0,0.1); |
| | transition: right 0.3s ease; |
| | z-index: 1000; |
| | overflow-y: auto; |
| | } |
| | .host-details.active { |
| | right: 0; |
| | } |
| | .overlay { |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background: rgba(0,0,0,0.5); |
| | z-index: 999; |
| | display: none; |
| | } |
| | .overlay.active { |
| | display: block; |
| | } |
| | .banner-data { |
| | font-family: monospace; |
| | white-space: pre-wrap; |
| | background: #f8f9fa; |
| | padding: 1rem; |
| | border-radius: 0.5rem; |
| | overflow-x: auto; |
| | } |
| | .vulnerability { |
| | border-left: 4px solid #ef4444; |
| | } |
| | .port-item { |
| | transition: all 0.2s ease; |
| | } |
| | .port-item:hover { |
| | background: #f3f4f6; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 font-sans antialiased"> |
| | |
| | <nav class="bg-white shadow-sm sticky top-0 z-50"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between h-16"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 flex items-center"> |
| | <span class="text-indigo-600 font-bold text-2xl">SHODAN</span> |
| | </div> |
| | <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
| | <a href="#" class="nav-link text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium" onclick="showTab('home')">Home</a> |
| | <a href="#" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium" onclick="showTab('explore')">Explore</a> |
| | <a href="#" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium" onclick="showTab('maps')">Maps</a> |
| | <a href="#" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium" onclick="showTab('api')">API</a> |
| | <a href="#" class="nav-link text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium" onclick="showTab('enterprise')">Enterprise</a> |
| | </div> |
| | </div> |
| | <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4"> |
| | <button class="text-gray-600 hover:text-gray-900"> |
| | <i class="fas fa-search"></i> |
| | </button> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 transform hover:scale-105"> |
| | Sign In |
| | </button> |
| | </div> |
| | <div class="-mr-2 flex items-center sm:hidden"> |
| | <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> |
| | <span class="sr-only">Open main menu</span> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <div class="hidden sm:hidden bg-white shadow-lg" id="mobile-menu"> |
| | <div class="pt-2 pb-3 space-y-1"> |
| | <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-indigo-500 text-base font-medium text-indigo-700 bg-indigo-50">Home</a> |
| | <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Explore</a> |
| | <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Maps</a> |
| | <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">API</a> |
| | <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Enterprise</a> |
| | </div> |
| | <div class="pt-4 pb-3 border-t border-gray-200"> |
| | <div class="flex items-center px-4"> |
| | <button class="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Sign In |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <main> |
| | |
| | <div id="home" class="tab-content active"> |
| | |
| | <div class="gradient-bg text-white relative overflow-hidden"> |
| | <div class="absolute inset-0 opacity-20"> |
| | <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-600"></div> |
| | </div> |
| | <div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center relative z-10"> |
| | <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6"> |
| | The <span class="gradient-text">Search Engine</span> for the Internet of Things |
| | </h1> |
| | <p class="max-w-3xl mx-auto text-xl text-indigo-100"> |
| | Discover how the Internet is being used and explore connected devices from around the world in real-time. |
| | </p> |
| | |
| | |
| | <div class="mt-12 max-w-3xl mx-auto"> |
| | <div class="search-box bg-white/10 rounded-lg overflow-hidden backdrop-blur-sm"> |
| | <div class="flex"> |
| | <input type="text" placeholder="Search the Internet (e.g., webcam, port:21, city:Chicago)..." class="flex-grow px-6 py-4 focus:outline-none bg-transparent text-white placeholder-indigo-200"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-4 font-medium transition duration-300"> |
| | <i class="fas fa-search mr-2"></i> Search |
| | </button> |
| | </div> |
| | </div> |
| | <div class="mt-6 flex flex-wrap justify-center gap-3"> |
| | <span class="px-3 py-1 bg-white/10 rounded-full text-sm text-indigo-100 hover:bg-white/20 cursor-pointer transition">webcam</span> |
| | <span class="px-3 py-1 bg-white/10 rounded-full text-sm text-indigo-100 hover:bg-white/20 cursor-pointer transition">port:21</span> |
| | <span class="px-3 py-1 bg-white/10 rounded-full text-sm text-indigo-100 hover:bg-white/20 cursor-pointer transition">city:Chicago</span> |
| | <span class="px-3 py-1 bg-white/10 rounded-full text-sm text-indigo-100 hover:bg-white/20 cursor-pointer transition">nginx</span> |
| | <span class="px-3 py-1 bg-white/10 rounded-full text-sm text-indigo-100 hover:bg-white/20 cursor-pointer transition">iot</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white py-16 relative"> |
| | <div class="absolute inset-0 overflow-hidden opacity-10"> |
| | <div class="absolute inset-0 bg-[url('https://shodan.io/static/img/bg-grid.png')]"></div> |
| | </div> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| | Global <span class="gradient-text">IoT Intelligence</span> |
| | </h2> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Shodan indexes billions of devices and services across the Internet |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> |
| | <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-indigo-100 text-indigo-600 mb-4"> |
| | <i class="fas fa-network-wired text-2xl"></i> |
| | </div> |
| | <div class="text-4xl font-bold text-indigo-600">3.5B+</div> |
| | <div class="mt-2 text-gray-600">Devices indexed</div> |
| | </div> |
| | <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-green-100 text-green-600 mb-4"> |
| | <i class="fas fa-globe text-2xl"></i> |
| | </div> |
| | <div class="text-4xl font-bold text-green-600">190+</div> |
| | <div class="mt-2 text-gray-600">Countries covered</div> |
| | </div> |
| | <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-purple-100 text-purple-600 mb-4"> |
| | <i class="fas fa-plug text-2xl"></i> |
| | </div> |
| | <div class="text-4xl font-bold text-purple-600">100+</div> |
| | <div class="mt-2 text-gray-600">Services supported</div> |
| | </div> |
| | <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 mb-4"> |
| | <i class="fas fa-clock text-2xl"></i> |
| | </div> |
| | <div class="text-4xl font-bold text-blue-600">24/7</div> |
| | <div class="mt-2 text-gray-600">Real-time monitoring</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-gray-100 py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| | Global Network <span class="gradient-text">Visualization</span> |
| | </h2> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Explore devices and services across the world in real-time with our interactive maps. |
| | </p> |
| | </div> |
| | |
| | <div class="map-container rounded-lg overflow-hidden relative"> |
| | <div class="map-placeholder"></div> |
| | <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 to-transparent"></div> |
| | <div class="absolute inset-0 flex items-center justify-center"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-lg text-lg font-medium transition duration-300 transform hover:scale-105 glow"> |
| | <i class="fas fa-map-marked-alt mr-2"></i> View Live Map |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> |
| | <i class="fas fa-server text-indigo-600 text-xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Network Infrastructure</h3> |
| | <p class="mt-2 text-gray-600">Discover routers, switches and other networking equipment exposed to the Internet.</p> |
| | <div class="mt-4"> |
| | <span class="device-tag bg-indigo-100 text-indigo-800">Routers</span> |
| | <span class="device-tag bg-indigo-100 text-indigo-800 ml-2">Switches</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 bg-green-100 p-3 rounded-full"> |
| | <i class="fas fa-shield-alt text-green-600 text-xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Security Research</h3> |
| | <p class="mt-2 text-gray-600">Identify vulnerable systems and exposed services that could be potential attack vectors.</p> |
| | <div class="mt-4"> |
| | <span class="device-tag bg-green-100 text-green-800">Vulnerabilities</span> |
| | <span class="device-tag bg-green-100 text-green-800 ml-2">Exploits</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full"> |
| | <i class="fas fa-chart-line text-purple-600 text-xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Market Intelligence</h3> |
| | <p class="mt-2 text-gray-600">Gather data on technology adoption, market trends and competitive analysis.</p> |
| | <div class="mt-4"> |
| | <span class="device-tag bg-purple-100 text-purple-800">Analytics</span> |
| | <span class="device-tag bg-purple-100 text-purple-800 ml-2">Trends</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-12"> |
| | <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| | Recently <span class="gradient-text">Discovered</span> Devices |
| | </h2> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Examples of devices and services found in the last 24 hours. |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <div class="result-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> |
| | <i class="fas fa-video text-indigo-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Security Camera</h3> |
| | <div class="flex items-center mt-1"> |
| | <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> United States</span> |
| | <span class="mx-2 text-gray-300">•</span> |
| | <span class="text-gray-600"><i class="fas fa-plug mr-1"></i> HTTP</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex items-center text-sm text-gray-500 mb-2"> |
| | <i class="fas fa-network-wired mr-2"></i> |
| | <span>192.168.1.100</span> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500 mb-2"> |
| | <i class="fas fa-ethernet mr-2"></i> |
| | <span>Port: 80</span> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fas fa-building mr-2"></i> |
| | <span>Comcast Cable</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 2 hours ago</span> |
| | <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center transition" onclick="showHostDetails('camera')"> |
| | View Details <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="result-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-green-100 p-3 rounded-full"> |
| | <i class="fas fa-database text-green-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Database Server</h3> |
| | <div class="flex items-center mt-1"> |
| | <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Germany</span> |
| | <span class="mx-2 text-gray-300">•</span> |
| | <span class="text-gray-600"><i class="fas fa-plug mr-1"></i> MySQL</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex items-center text-sm text-gray-500 mb-2"> |
| | <i class="fas fa-network-wired mr-2"></i> |
| | <span>89.58.12.34</span> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500 mb-2"> |
| | <i class="fas fa-ethernet mr-2"></i> |
| | <span>Port: 3306</span> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fas fa-building mr-2"></i> |
| | <span>Hetzner Online GmbH</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 5 hours ago</span> |
| | <button class="text-green-600 hover:text-green-800 text-sm font-medium flex items-center transition" onclick="showHostDetails('database')"> |
| | View Details <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="result-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full"> |
| | <i class="fas fa-print text-purple-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Network Printer</h3> |
| | <div class="flex items-center mt-1"> |
| | <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Japan</span> |
| | <span class="mx-2 text-gray-300">•</span> |
| | <span class="text-gray-600"><i class="fas fa-plug mr-1"></i> LPD</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex items-center text-sm text-gray-500 mb-2"> |
| | <i class="fas fa-network-wired mr-2"></i> |
| | <span>210.153.84.10</span> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500 mb-2"> |
| | <i class="fas fa-ethernet mr-2"></i> |
| | <span>Port: 515</span> |
| | </div> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fas fa-building mr-2"></i> |
| | <span>NTT Communications</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 8 hours ago</span> |
| | <button class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center transition" onclick="showHostDetails('printer')"> |
| | View Details <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-12 text-center"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-lg text-lg font-medium transition duration-300 transform hover:scale-105"> |
| | <i class="fas fa-search mr-2"></i> Explore More Results |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-gray-100 py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| | Powerful <span class="gradient-text">Features</span> |
| | </h2> |
| | <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Everything you need to explore and analyze the Internet of Things |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-lg"> |
| | <i class="fas fa-bolt text-indigo-600 text-2xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-gray-900">Real-time Search</h3> |
| | <p class="mt-3 text-gray-600"> |
| | Find devices as they come online with our constantly updated database. Filter by location, organization, service type and more. |
| | </p> |
| | <div class="mt-6"> |
| | <div class="flex items-center text-sm text-indigo-600 font-medium"> |
| | <span>Learn more</span> |
| | <i class="fas fa-chevron-right ml-1"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-green-100 p-3 rounded-lg"> |
| | <i class="fas fa-map-marked-alt text-green-600 text-2xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-gray-900">Interactive Maps</h3> |
| | <p class="mt-3 text-gray-600"> |
| | Visualize device distributions geographically. See hotspots of activity and track changes over time with our mapping tools. |
| | </p> |
| | <div class="mt-6"> |
| | <div class="flex items-center text-sm text-green-600 font-medium"> |
| | <span>Learn more</span> |
| | <i class="fas fa-chevron-right ml-1"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-purple-100 p-3 rounded-lg"> |
| | <i class="fas fa-code text-purple-600 text-2xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-gray-900">Developer API</h3> |
| | <p class="mt-3 text-gray-600"> |
| | Integrate Shodan data into your applications with our comprehensive API. Get programmatic access to all search features. |
| | </p> |
| | <div class="mt-6"> |
| | <div class="flex items-center text-sm text-purple-600 font-medium"> |
| | <span>Learn more</span> |
| | <i class="fas fa-chevron-right ml-1"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg"> |
| | <i class="fas fa-shield-alt text-blue-600 text-2xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-gray-900">Security Monitoring</h3> |
| | <p class="mt-3 text-gray-600"> |
| | Monitor your organization's network footprint. Get alerts when new devices appear or when vulnerabilities are detected. |
| | </p> |
| | <div class="mt-6"> |
| | <div class="flex items-center text-sm text-blue-600 font-medium"> |
| | <span>Learn more</span> |
| | <i class="fas fa-chevron-right ml-1"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="gradient-bg text-white relative overflow-hidden"> |
| | <div class="absolute inset-0 opacity-20"> |
| | <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-600"></div> |
| | </div> |
| | <div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center relative z-10"> |
| | <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> |
| | Ready to explore the <span class="gradient-text">Internet of Things</span>? |
| | </h2> |
| | <p class="mt-6 max-w-3xl mx-auto text-xl text-indigo-100"> |
| | Get started with Shodan today and discover what's connected to the Internet. |
| | </p> |
| | <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4"> |
| | <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg text-lg font-medium hover:bg-gray-100 transition duration-300 transform hover:scale-105"> |
| | Sign Up for Free |
| | </button> |
| | <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300 transform hover:scale-105"> |
| | Learn More |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="explore" class="tab-content"> |
| | <div class="bg-white py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl"> |
| | Explore the <span class="gradient-text">Internet</span> |
| | </h1> |
| | <p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Discover devices, services and vulnerabilities across the global network |
| | </p> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 p-6 rounded-xl mb-12"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Device Type</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>All Devices</option> |
| | <option>Webcams</option> |
| | <option>Routers</option> |
| | <option>Printers</option> |
| | <option>Servers</option> |
| | <option>IoT Devices</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Country</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>All Countries</option> |
| | <option>United States</option> |
| | <option China</option> |
| | <option>Germany</option> |
| | <option>United Kingdom</option> |
| | <option>Japan</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Service</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>All Services</option> |
| | <option>HTTP</option> |
| | <option>SSH</option> |
| | <option>FTP</option> |
| | <option>MySQL</option> |
| | <option>RDP</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Vulnerability</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>All</option> |
| | <option>Critical</option> |
| | <option>High</option> |
| | <option>Medium</option> |
| | <option>Low</option> |
| | </select> |
| | </div> |
| | </div> |
| | <div class="mt-6 flex justify-end"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md text-sm font-medium"> |
| | Apply Filters |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-indigo-100 p极客时间3 rounded-full"> |
| | <i class="fas fa-video text-indigo-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Webcams</h3> |
| | <p class="mt-1 text-sm text-gray-600">Explore live public webcams from around the world</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center text-sm text-gray-500"> |
| | <span>Devices Found</span> |
| | <span class="font-medium">1,245,789</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| | <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Explore Webcams |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-green-100 p-3 rounded-full"> |
| | <i class="fas fa-server text-green-600"></i> |
| | </极客时间div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Servers</h3> |
| | <p class="mt-1 text-sm text-gray-600">Discover exposed servers and services</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center text-sm text-gray-500"> |
| | <span>Devices Found</span> |
| | <span class="font-medium">856,432</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| | <div class="bg-green-600 h-2.5 rounded-full" style="width: 55%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Explore Servers |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full"> |
| | <i class="fas fa-network-wired text-purple-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Network Devices</h3> |
| | <p class="mt-1 text-sm text-gray-600">Routers, switches and other networking equipment</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center text-sm text-gray-500"> |
| | <span>Devices Found</span> |
| | <span class="font-medium">2,345,678</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| | <div class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Explore Network Devices |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-red-100 p-3 rounded-full"> |
| | <i class="fas fa-bug text-red-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Vulnerable Devices</h3> |
| | <p class="mt-1 text-sm text-gray-600">Systems with known vulnerabilities</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center text-sm text-gray-500"> |
| | <span>Devices Found</span> |
| | <span class="font-medium">456,789</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| | <div class="bg-red-600 h极客时间-2.5 rounded-full" style="width: 35%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <button class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Explore Vulnerabilities |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full"> |
| | <i class="fas fa-industry text-blue-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Industrial Systems</h3> |
| | <p class="mt-1 text-sm text-gray-600">SCADA, ICS and other industrial equipment</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center text-sm text-gray-500"> |
| | <span>Devices Found</span> |
| | <span class="font-medium">123,456</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| | <div class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Explore Industrial Systems |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200"> |
| | <div class="p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-full"> |
| | <i class="fas fa-home text-yellow-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Smart Home</h3> |
| | <p class="mt-1 text-sm text-gray-600">IoT devices for home automation</p> |
| | </div> |
| | </div> |
| | <div class="mt-4"> |
| | <div class="flex justify-between items-center text-sm text-gray-500"> |
| | <span>Devices Found</span> |
| | <span class="font-medium">789,012</span> |
| | </div> |
| | <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| | <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 45%"></div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Explore Smart Home |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-16 text-center"> |
| | <h3 class="text-2xl font-bold text-gray-900">Can't find what you're looking for?</h3> |
| | <p class="mt-4 max-w-2xl text-lg text-gray-600 mx-auto"> |
| | Use our advanced search to find specific devices and services across the Internet |
| | </p> |
| | <div class="mt-8"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg text-lg font-medium"> |
| | <i class="fas fa-search mr-2"></i> Advanced Search |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="maps" class="tab-content"> |
| | <div class="bg-white py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl"> |
| | Interactive <span class="gradient-text">Maps</span> |
| | </h1> |
| | <p class="极客时间mt-6 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Visualize device distributions and network activity geographically |
| | </p> |
| | </div> |
| | |
| | <div class="map-container rounded-xl overflow-hidden mb-12"> |
| | <div class="map-placeholder"></div> |
| | <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 to-transparent"></div> |
| | <div class="absolute top-6 left-6 bg-white p-4 rounded-lg shadow-lg"> |
| | <h3 class="font-medium text-gray-900 mb极客时间-2">Global Device Distribution</h3> |
| | <极客时间div class="flex items-center space-x-4"> |
| | <div> |
| | <div class="flex items-center"> |
| | <div class="w-3 h-3 rounded-full bg-indigo-600 mr-2"></div> |
| | <span class="text-sm text-gray-600">Webcams</span> |
| | </div> |
| | <div class="flex items-center mt-1"> |
| | <div class="w-3 h-3 rounded-full bg-green-600 mr-2"></div> |
| | <span class="text-sm text-gray-600">Servers</span> |
| | </div> |
| | </div> |
| | <div> |
| | <div class="flex items-center"> |
| | <div class="w-3 h-3 rounded-full bg-purple-600 mr-2"></div> |
| | <span class="text-sm text-gray-600">Network</span> |
| | </div> |
| | <div class="flex items-center mt-1"> |
| | <div class="w-3 h-3 rounded-full bg-red-600 mr-2"></div> |
| | <span class="text-sm text-gray-600">Vulnerable</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-6 left-6 right-6 bg-white p-4 rounded-lg shadow-lg"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h4 class="font-medium text-gray-900">Current View</h4> |
| | <p class="text-sm text-gray-600">North America • 1,245,789 devices</p> |
| | </div> |
| | <div class="flex space-x-2"> |
| | <button class="bg-gray-100 hover:bg-gray-200 p-2 rounded-md"> |
| | <i class="fas fa-search-plus text-gray-600"></i> |
| | </button> |
| | <button class="bg-gray-100 hover:bg-gray-200 p-2 rounded-md"> |
| | <i class="fas fa-search-minus text-gray-600"></i> |
| | </button> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Filter Devices |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> |
| | <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-md"> |
| | <i class="fas fa-globe-americas text-indigo-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Global Heatmap</h3> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | Visualize device density across the world with our interactive heatmap. Identify hotspots of activity and track changes over time. |
| | </p> |
| | <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> |
| | View Heatmap <i class="fas fa-arrow-right ml-1"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex-shrink-0 bg-green-100 p-2 rounded-md"> |
| | <i class="fas fa-chart-line text-green-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Trend Analysis</h极客时间3> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | Analyze how device distributions change over time. Compare different regions and identify emerging trends in IoT adoption. |
| | </p> |
| | <button class="text-green-600 hover:text-green-800 text-sm font-medium"> |
| | View Trends <i class="fas fa-arrow-right ml-1"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition"> |
| | <div class="flex items-center mb-4"> |
| | <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md"> |
| | <i class="fas fa-shield-alt text-purple-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Security Map</h3> |
| | </div> |
| | </div> |
| | <p class="text-gray-600 mb-4"> |
| | Identify regions with high concentrations of vulnerable devices. Monitor security postures across different countries and networks. |
| | </p> |
| | <button class="text-purple-600 hover:text-purple-800 text-sm font-medium"> |
| | View Security Map <i class="fas fa-arrow-right ml-1"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl"> |
| | <div class="text-center mb-8"> |
| | <h3 class="text-2xl font-bold text-gray-900">Custom Map Reports</h3> |
| | <p class="mt-4 max-w-2xl text-lg text-gray-600 mx-auto"> |
| | Generate detailed reports for specific regions, networks or device types |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>Device Distribution</option> |
| | <option>Vulnerability Analysis</option> |
| | <option>Network Growth</option> |
| | <option>Service Adoption</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Region</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>Worldwide</option> |
| | <option>North America</option> |
| | <option>Europe</option> |
| | <option>Asia</option> |
| | <option>South America</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>Last 24 hours</option> |
| | <option>Last 7 days</option> |
| | <option>Last 30 days</option> |
| | <option>Last year</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Device Type</label> |
| | <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> |
| | <option>All Devices</option> |
| | <option>Webcams</option> |
| | <option>Servers</option> |
| | <option>Network Devices</option> |
| | </select> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8 text-center"> |
| | <button class="bg-indigo-600 hover:bg-indigo-7极客时间00 text-white px-8 py-3 rounded-lg text-lg font-medium"> |
| | Generate Report |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="api" class="tab-content"> |
| | <div class="bg-white py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h1 class="text-4极客时间xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl"> |
| | Shodan <span class="gradient-text">API</span> |
| | </h1> |
| | <p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Programmatic access to the world's most comprehensive Internet intelligence platform |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16"> |
| | <div> |
| | <h2 class="text-2xl font-bold text-gray-900 mb-6">API Features</h2> |
| | <div class="space-y-6"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-md"> |
| | <i class="fas fa-code text-indigo-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Full Search Capabilities</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Access all search filters and capabilities through our REST API. Query by device type, location, organization and more. |
| | </p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-green-100 p-2 rounded-md"> |
| | <i class="fas fa-database text-green-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Comprehensive Data</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Get detailed information about each device including banners, services, vulnerabilities and geographic data. |
| | </p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md"> |
| | <i class="fas fa-bolt text-purple-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Real-time Updates</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Our API provides access to the most up-to-date information as new devices come online. |
| | </p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex极客时间-shrink-0 bg-blue-100 p-2 rounded-md"> |
| | <i class="fas fa-shield-alt text-blue-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Security Intelligence</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Identify vulnerable systems and monitor your organization's network footprint programmatically. |
| | </极客时间p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl"> |
| | <div class="flex items-center mb-6"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> |
| | <i class="fas fa-key text-indigo-600 text-xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-gray-900">API Plans</h3> |
| | <p class="mt-1 text-gray-600">Choose the plan that fits your needs</p> |
| | </div> |
| | </div> |
| | |
| | <div class="space-y-4"> |
| | <div class="bg-white p-6 rounded-lg shadow-sm"> |
| | <div class="flex justify-between items-start"> |
| | <div> |
| | <h4 class极客时间="font-medium text-gray-900">Developer</h4> |
| | <p class="text-sm text-gray-600">$49/month</p> |
| | </div> |
| | <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Popular</span> |
| | </div> |
| | <ul class="mt-4 space-y-2 text-sm text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>100,000 query credits/month</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Full search capabilities</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>API access</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Email support</span> |
| | </li> |
| | </ul> |
| | <button class="w-full mt-6 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | Get Started |
| | </button> |
| | </div> |
| | |
| | <div class="bg-white p-6 rounded-lg shadow-sm"> |
| | <div> |
| | <h4 class="font-medium text-gray-900">Enterprise</h4> |
| | <p class="text-sm text-gray-600">Custom pricing</p> |
| | </div> |
| | <ul class="mt-4 space-y-2 text-sm text-gray-600"> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Unlimited query credits</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Advanced search filters</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Priority API access</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Dedicated support</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i class="fas fa-check text-green-500 mr-2"></i> |
| | <span>Custom integrations</span> |
| | </li> |
| | </ul> |
| | <button class="w-full mt-6 bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium"> |
| | Contact Sales |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-900 rounded-xl overflow-hidden"> |
| | <div class="p-6"> |
| | <div class="flex items-center mb-6"> |
| | <div class="flex-shrink-0 bg-indigo-600 p-3 rounded-full"> |
| | <i class="fas fa-terminal text-white"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-white">API Example</h3> |
| | <p class="mt-1 text-indigo-200">Search for webcams in the United States</p> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-gray-800 p-4 rounded-lg"> |
| | <div class="flex items-center text-sm text-gray-400 mb-2"> |
| | <span class="text-green-400 mr-2">$</span> |
| | <span>curl "https://api.shodan.io/shodan/host/search?key=YOUR_API_KEY&query=webcam country:US"</span> |
| | </div> |
| | <pre class="text-gray-300 text-sm overflow-x-auto mt-4"> |
| | { |
| | "matches": [ |
| | { |
| | "ip": 1234567890, |
| | "port": 80, |
| | "org": "Comcast Cable", |
| | "location": { |
| | "city": "Chicago", |
| | "country_code": "US" |
| | }, |
| | "product": "IP Camera", |
| | "data": "HTTP/1.1 200 OK\r\nServer: IP Camera" |
| | }, |
| | ... |
| | ], |
| | "total": 1245789 |
| | }</pre> |
| | </div> |
| | |
| | <div class="mt-6 flex flex-wrap gap-3"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | <i class="fas fa-book mr-1"></i> Documentation |
| | </button> |
| | <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py极客时间-2 rounded-md text-sm font-medium"> |
| | <i class="fas fa-code mr-1"></i> Code Examples |
| | </button> |
| | <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm font-medium"> |
| | <i class="fas fa-tools mr-1"></i> API Tools |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-16 text-center"> |
| | <h3 class="text-2xl font-bold text-gray-900">Ready to integrate Shodan into your application?</h3> |
| | <p class="mt-4 max-w-2xl text-lg text-gray-600 mx-auto"> |
| | Get started with our API today and add Internet intelligence to your products |
| | </p> |
| | <div class="mt-8"> |
| | <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg text-lg font-medium"> |
| | Get API Key |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="enterprise" class="tab-content"> |
| | <div class="bg-white py-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="text-center mb-16"> |
| | <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl"> |
| | Shodan <span class="gradient-text">Enterprise</span> |
| | </h1> |
| | <p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto"> |
| | Comprehensive Internet intelligence solutions for large organizations |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16"> |
| | <div> |
| | <h2 class="text-2xl font-bold text-gray-900 mb-6">Enterprise Solutions</h2> |
| | <div class="space-y-6"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-md"> |
| | <i class="fas fa-building text-indigo-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Network Monitoring</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Continuously monitor your organization's Internet footprint. Get alerts when new devices appear or when vulnerabilities are detected. |
| | </p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-green-100 p-2 rounded-md"> |
| | <i class="fas fa-shield-alt text-green-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Threat Intelligence</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Identify potential threats targeting your organization. Discover exposed systems before attackers do. |
| | </p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md"> |
| | <i class="fas fa-chart-pie text-purple-600"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Asset Management</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Maintain an accurate inventory of all Internet-facing assets. Track changes and identify shadow IT. |
| | </p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 bg-blue-100 p-2 rounded-md"> |
| | <i class="fas fa-users text-blue-600"></极客时间i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Team Collaboration</h3> |
| | <p class="mt-1 text-gray-600"> |
| | Share findings and collaborate with your security team. Assign tasks and track remediation efforts. |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-indigo-50 p-8 rounded-xl"> |
| | <div class="flex items-center mb-6"> |
| | <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> |
| | <i class="fas fa-star text-indigo-600 text-xl"></i> |
| | </div> |
| | <div class="ml-4"> |
| | <h3 class="text-xl font-bold text-gray-900">Enterprise Features</h3> |
| | <p class="mt-1 text-gray-600">Exclusive benefits for enterprise customers</p> |
| | </div> |
| | </div> |
| | |
| | <ul class="space-y-4"> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <i class="fas fa-check-circle text-indigo-600"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm text-gray-700">Unlimited API queries and exports</p> |
| | </div> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="flex-shrink-0 mt-1"> |
| | <i class="fas fa-check-circle text-indigo-600"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm text-gray-700">Custom data feeds and integrations</p> |
| | </div> |
| | </ |
| | </html> |
