Hugging Face's logo

Spaces:
ian992
/
test
Running

App Files Community
ian992 commited on
Commit
c455bfd
·
verified ·
1 Parent(s): 6b9c625

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1349 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1349 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Shodan - Search Engine for the Internet of Things</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary: #4f46e5;
12
+ --primary-dark: #4338ca;
13
+ --secondary: #10b981;
14
+ }
15
+
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
18
+ }
19
+ .gradient-text {
20
+ background: linear-gradient(90deg, #4f46e5, #10b981);
21
+ -webkit-background-clip: text;
22
+ background-clip: text;
23
+ color: transparent;
24
+ }
25
+ .search-box {
26
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
27
+ backdrop-filter: blur(4px);
28
+ -webkit-backdrop-filter: blur(4px);
29
+ border-radius: 10px;
30
+ border: 1px solid rgba(255, 255, 255, 0.18);
31
+ }
32
+ .result-card {
33
+ transition: all 0.3s ease;
34
+ border-left: 4px solid var(--primary);
35
+ }
36
+ .result-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
39
+ }
40
+ .map-container {
41
+ height: 500px;
42
+ background-color: #e5e7eb;
43
+ position: relative;
44
+ overflow: hidden;
45
+ border-radius: 12px;
46
+ }
47
+ .map-placeholder {
48
+ position: absolute;
49
+ top: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ height: 100%;
53
+ 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;
54
+ background-size: cover;
55
+ opacity: 0.7;
56
+ }
57
+ .glow {
58
+ box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
59
+ }
60
+ .nav-link {
61
+ position: relative;
62
+ }
63
+ .nav-link:after {
64
+ content: '';
65
+ position: absolute;
66
+ width: 0;
67
+ height: 2px;
68
+ bottom: -2px;
69
+ left: 0;
70
+ background-color: var(--primary);
71
+ transition: width 0.3s ease;
72
+ }
73
+ .nav-link:hover:after {
74
+ width: 100%;
75
+ }
76
+ .tab-content {
77
+ display: none;
78
+ }
79
+ .tab-content.active {
80
+ display: block;
81
+ animation: fadeIn 0.5s ease;
82
+ }
83
+ @keyframes fadeIn {
84
+ from { opacity: 0; }
85
+ to { opacity: 1; }
86
+ }
87
+ .device-tag {
88
+ display: inline-block;
89
+ padding: 0.25rem 0.5rem;
90
+ border-radius: 9999px;
91
+ font-size: 0.75rem;
92
+ font-weight: 600;
93
+ }
94
+ .pulse {
95
+ animation: pulse 2s infinite;
96
+ }
97
+ @keyframes pulse {
98
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
99
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
100
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
101
+ }
102
+ .host-details {
103
+ position: fixed;
104
+ top: 0;
105
+ right: -100%;
106
+ width: 50%;
107
+ height: 100vh;
108
+ background: white;
109
+ box-shadow: -5px 0 15px rgba(0,0,0,0.1);
110
+ transition: right 0.3s ease;
111
+ z-index: 1000;
112
+ overflow-y: auto;
113
+ }
114
+ .host-details.active {
115
+ right: 0;
116
+ }
117
+ .overlay {
118
+ position: fixed;
119
+ top: 0;
120
+ left: 0;
121
+ right: 0;
122
+ bottom: 0;
123
+ background: rgba(0,0,0,0.5);
124
+ z-index: 999;
125
+ display: none;
126
+ }
127
+ .overlay.active {
128
+ display: block;
129
+ }
130
+ .banner-data {
131
+ font-family: monospace;
132
+ white-space: pre-wrap;
133
+ background: #f8f9fa;
134
+ padding: 1rem;
135
+ border-radius: 0.5rem;
136
+ overflow-x: auto;
137
+ }
138
+ .vulnerability {
139
+ border-left: 4px solid #ef4444;
140
+ }
141
+ .port-item {
142
+ transition: all 0.2s ease;
143
+ }
144
+ .port-item:hover {
145
+ background: #f3f4f6;
146
+ }
147
+ </style>
148
+ </head>
149
+ <body class="bg-gray-50 font-sans antialiased">
150
+ <!-- Navigation -->
151
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
+ <div class="flex justify-between h-16">
154
+ <div class="flex items-center">
155
+ <div class="flex-shrink-0 flex items-center">
156
+ <span class="text-indigo-600 font-bold text-2xl">SHODAN</span>
157
+ </div>
158
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
159
+ <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>
160
+ <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>
161
+ <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>
162
+ <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>
163
+ <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>
164
+ </div>
165
+ </div>
166
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
167
+ <button class="text-gray-600 hover:text-gray-900">
168
+ <i class="fas fa-search"></i>
169
+ </button>
170
+ <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">
171
+ Sign In
172
+ </button>
173
+ </div>
174
+ <div class="-mr-2 flex items-center sm:hidden">
175
+ <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">
176
+ <span class="sr-only">Open main menu</span>
177
+ <i class="fas fa-bars"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </nav>
183
+
184
+ <!-- Mobile Menu -->
185
+ <div class="hidden sm:hidden bg-white shadow-lg" id="mobile-menu">
186
+ <div class="pt-2 pb-3 space-y-1">
187
+ <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>
188
+ <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>
189
+ <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>
190
+ <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>
191
+ <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>
192
+ </div>
193
+ <div class="pt-4 pb-3 border-t border-gray-200">
194
+ <div class="flex items-center px-4">
195
+ <button class="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
196
+ Sign In
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Main Content -->
203
+ <main>
204
+ <!-- Home Tab -->
205
+ <div id="home" class="tab-content active">
206
+ <!-- Hero Section -->
207
+ <div class="gradient-bg text-white relative overflow-hidden">
208
+ <div class="absolute inset-0 opacity-20">
209
+ <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-600"></div>
210
+ </div>
211
+ <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">
212
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6">
213
+ The <span class="gradient-text">Search Engine</span> for the Internet of Things
214
+ </h1>
215
+ <p class="max-w-3xl mx-auto text-xl text-indigo-100">
216
+ Discover how the Internet is being used and explore connected devices from around the world in real-time.
217
+ </p>
218
+
219
+ <!-- Search Box -->
220
+ <div class="mt-12 max-w-3xl mx-auto">
221
+ <div class="search-box bg-white/10 rounded-lg overflow-hidden backdrop-blur-sm">
222
+ <div class="flex">
223
+ <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">
224
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-4 font-medium transition duration-300">
225
+ <i class="fas fa-search mr-2"></i> Search
226
+ </button>
227
+ </div>
228
+ </div>
229
+ <div class="mt-6 flex flex-wrap justify-center gap-3">
230
+ <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>
231
+ <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>
232
+ <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>
233
+ <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>
234
+ <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>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div>
239
+ </div>
240
+
241
+ <!-- Stats Section -->
242
+ <div class="bg-white py-16 relative">
243
+ <div class="absolute inset-0 overflow-hidden opacity-10">
244
+ <div class="absolute inset-0 bg-[url('https://shodan.io/static/img/bg-grid.png')]"></div>
245
+ </div>
246
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
247
+ <div class="text-center mb-16">
248
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
249
+ Global <span class="gradient-text">IoT Intelligence</span>
250
+ </h2>
251
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
252
+ Shodan indexes billions of devices and services across the Internet
253
+ </p>
254
+ </div>
255
+
256
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
257
+ <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition">
258
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-indigo-100 text-indigo-600 mb-4">
259
+ <i class="fas fa-network-wired text-2xl"></i>
260
+ </div>
261
+ <div class="text-4xl font-bold text-indigo-600">3.5B+</div>
262
+ <div class="mt-2 text-gray-600">Devices indexed</div>
263
+ </div>
264
+ <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition">
265
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-green-100 text-green-600 mb-4">
266
+ <i class="fas fa-globe text-2xl"></i>
267
+ </div>
268
+ <div class="text-4xl font-bold text-green-600">190+</div>
269
+ <div class="mt-2 text-gray-600">Countries covered</div>
270
+ </div>
271
+ <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition">
272
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-purple-100 text-purple-600 mb-4">
273
+ <i class="fas fa-plug text-2xl"></i>
274
+ </div>
275
+ <div class="text-4xl font-bold text-purple-600">100+</div>
276
+ <div class="mt-2 text-gray-600">Services supported</div>
277
+ </div>
278
+ <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition">
279
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 mb-4">
280
+ <i class="fas fa-clock text-2xl"></i>
281
+ </div>
282
+ <div class="text-4xl font-bold text-blue-600">24/7</div>
283
+ <div class="mt-2 text-gray-600">Real-time monitoring</div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Map Section -->
290
+ <div class="bg-gray-100 py-16">
291
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
292
+ <div class="text-center mb-12">
293
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
294
+ Global Network <span class="gradient-text">Visualization</span>
295
+ </h2>
296
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
297
+ Explore devices and services across the world in real-time with our interactive maps.
298
+ </p>
299
+ </div>
300
+
301
+ <div class="map-container rounded-lg overflow-hidden relative">
302
+ <div class="map-placeholder"></div>
303
+ <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 to-transparent"></div>
304
+ <div class="absolute inset-0 flex items-center justify-center">
305
+ <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">
306
+ <i class="fas fa-map-marked-alt mr-2"></i> View Live Map
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
312
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
313
+ <div class="flex items-start">
314
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full">
315
+ <i class="fas fa-server text-indigo-600 text-xl"></i>
316
+ </div>
317
+ <div class="ml-4">
318
+ <h3 class="text-lg font-medium text-gray-900">Network Infrastructure</h3>
319
+ <p class="mt-2 text-gray-600">Discover routers, switches and other networking equipment exposed to the Internet.</p>
320
+ <div class="mt-4">
321
+ <span class="device-tag bg-indigo-100 text-indigo-800">Routers</span>
322
+ <span class="device-tag bg-indigo-100 text-indigo-800 ml-2">Switches</span>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
328
+ <div class="flex items-start">
329
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
330
+ <i class="fas fa-shield-alt text-green-600 text-xl"></i>
331
+ </div>
332
+ <div class="ml-4">
333
+ <h3 class="text-lg font-medium text-gray-900">Security Research</h3>
334
+ <p class="mt-2 text-gray-600">Identify vulnerable systems and exposed services that could be potential attack vectors.</p>
335
+ <div class="mt-4">
336
+ <span class="device-tag bg-green-100 text-green-800">Vulnerabilities</span>
337
+ <span class="device-tag bg-green-100 text-green-800 ml-2">Exploits</span>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
343
+ <div class="flex items-start">
344
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
345
+ <i class="fas fa-chart-line text-purple-600 text-xl"></i>
346
+ </div>
347
+ <div class="ml-4">
348
+ <h3 class="text-lg font-medium text-gray-900">Market Intelligence</h3>
349
+ <p class="mt-2 text-gray-600">Gather data on technology adoption, market trends and competitive analysis.</p>
350
+ <div class="mt-4">
351
+ <span class="device-tag bg-purple-100 text-purple-800">Analytics</span>
352
+ <span class="device-tag bg-purple-100 text-purple-800 ml-2">Trends</span>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Recent Results Section -->
362
+ <div class="bg-white py-16">
363
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
364
+ <div class="text-center mb-12">
365
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
366
+ Recently <span class="gradient-text">Discovered</span> Devices
367
+ </h2>
368
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
369
+ Examples of devices and services found in the last 24 hours.
370
+ </p>
371
+ </div>
372
+
373
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
374
+ <div class="result-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
375
+ <div class="p-6">
376
+ <div class="flex items-center">
377
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full">
378
+ <i class="fas fa-video text-indigo-600"></i>
379
+ </div>
380
+ <div class="ml-4">
381
+ <h3 class="text-lg font-medium text-gray-900">Security Camera</h3>
382
+ <div class="flex items-center mt-1">
383
+ <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> United States</span>
384
+ <span class="mx-2 text-gray-300">•</span>
385
+ <span class="text-gray-600"><i class="fas fa-plug mr-1"></i> HTTP</span>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ <div class="mt-4">
390
+ <div class="flex items-center text-sm text-gray-500 mb-2">
391
+ <i class="fas fa-network-wired mr-2"></i>
392
+ <span>192.168.1.100</span>
393
+ </div>
394
+ <div class="flex items-center text-sm text-gray-500 mb-2">
395
+ <i class="fas fa-ethernet mr-2"></i>
396
+ <span>Port: 80</span>
397
+ </div>
398
+ <div class="flex items-center text-sm text-gray-500">
399
+ <i class="fas fa-building mr-2"></i>
400
+ <span>Comcast Cable</span>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ <div class="bg-gray-50 px-6 py-4">
405
+ <div class="flex justify-between items-center">
406
+ <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 2 hours ago</span>
407
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center transition" onclick="showHostDetails('camera')">
408
+ View Details <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
409
+ </button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="result-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
415
+ <div class="p-6">
416
+ <div class="flex items-center">
417
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
418
+ <i class="fas fa-database text-green-600"></i>
419
+ </div>
420
+ <div class="ml-4">
421
+ <h3 class="text-lg font-medium text-gray-900">Database Server</h3>
422
+ <div class="flex items-center mt-1">
423
+ <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Germany</span>
424
+ <span class="mx-2 text-gray-300">•</span>
425
+ <span class="text-gray-600"><i class="fas fa-plug mr-1"></i> MySQL</span>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <div class="mt-4">
430
+ <div class="flex items-center text-sm text-gray-500 mb-2">
431
+ <i class="fas fa-network-wired mr-2"></i>
432
+ <span>89.58.12.34</span>
433
+ </div>
434
+ <div class="flex items-center text-sm text-gray-500 mb-2">
435
+ <i class="fas fa-ethernet mr-2"></i>
436
+ <span>Port: 3306</span>
437
+ </div>
438
+ <div class="flex items-center text-sm text-gray-500">
439
+ <i class="fas fa-building mr-2"></i>
440
+ <span>Hetzner Online GmbH</span>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ <div class="bg-gray-50 px-6 py-4">
445
+ <div class="flex justify-between items-center">
446
+ <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 5 hours ago</span>
447
+ <button class="text-green-600 hover:text-green-800 text-sm font-medium flex items-center transition" onclick="showHostDetails('database')">
448
+ View Details <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
449
+ </button>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="result-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition">
455
+ <div class="p-6">
456
+ <div class="flex items-center">
457
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
458
+ <i class="fas fa-print text-purple-600"></i>
459
+ </div>
460
+ <div class="ml-4">
461
+ <h3 class="text-lg font-medium text-gray-900">Network Printer</h3>
462
+ <div class="flex items-center mt-1">
463
+ <span class="text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Japan</span>
464
+ <span class="mx-2 text-gray-300">•</span>
465
+ <span class="text-gray-600"><i class="fas fa-plug mr-1"></i> LPD</span>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ <div class="mt-4">
470
+ <div class="flex items-center text-sm text-gray-500 mb-2">
471
+ <i class="fas fa-network-wired mr-2"></i>
472
+ <span>210.153.84.10</span>
473
+ </div>
474
+ <div class="flex items-center text-sm text-gray-500 mb-2">
475
+ <i class="fas fa-ethernet mr-2"></i>
476
+ <span>Port: 515</span>
477
+ </div>
478
+ <div class="flex items-center text-sm text-gray-500">
479
+ <i class="fas fa-building mr-2"></i>
480
+ <span>NTT Communications</span>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ <div class="bg-gray-50 px-6 py-4">
485
+ <div class="flex justify-between items-center">
486
+ <span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 8 hours ago</span>
487
+ <button class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center transition" onclick="showHostDetails('printer')">
488
+ View Details <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="mt-12 text-center">
496
+ <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">
497
+ <i class="fas fa-search mr-2"></i> Explore More Results
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <!-- Features Section -->
504
+ <div class="bg-gray-100 py-16">
505
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
506
+ <div class="text-center mb-16">
507
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
508
+ Powerful <span class="gradient-text">Features</span>
509
+ </h2>
510
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
511
+ Everything you need to explore and analyze the Internet of Things
512
+ </p>
513
+ </div>
514
+
515
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
516
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
517
+ <div class="flex">
518
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-lg">
519
+ <i class="fas fa-bolt text-indigo-600 text-2xl"></i>
520
+ </div>
521
+ <div class="ml-4">
522
+ <h3 class="text-xl font-bold text-gray-900">Real-time Search</h3>
523
+ <p class="mt-3 text-gray-600">
524
+ Find devices as they come online with our constantly updated database. Filter by location, organization, service type and more.
525
+ </p>
526
+ <div class="mt-6">
527
+ <div class="flex items-center text-sm text-indigo-600 font-medium">
528
+ <span>Learn more</span>
529
+ <i class="fas fa-chevron-right ml-1"></i>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
537
+ <div class="flex">
538
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-lg">
539
+ <i class="fas fa-map-marked-alt text-green-600 text-2xl"></i>
540
+ </div>
541
+ <div class="ml-4">
542
+ <h3 class="text-xl font-bold text-gray-900">Interactive Maps</h3>
543
+ <p class="mt-3 text-gray-600">
544
+ Visualize device distributions geographically. See hotspots of activity and track changes over time with our mapping tools.
545
+ </p>
546
+ <div class="mt-6">
547
+ <div class="flex items-center text-sm text-green-600 font-medium">
548
+ <span>Learn more</span>
549
+ <i class="fas fa-chevron-right ml-1"></i>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
557
+ <div class="flex">
558
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-lg">
559
+ <i class="fas fa-code text-purple-600 text-2xl"></i>
560
+ </div>
561
+ <div class="ml-4">
562
+ <h3 class="text-xl font-bold text-gray-900">Developer API</h3>
563
+ <p class="mt-3 text-gray-600">
564
+ Integrate Shodan data into your applications with our comprehensive API. Get programmatic access to all search features.
565
+ </p>
566
+ <div class="mt-6">
567
+ <div class="flex items-center text-sm text-purple-600 font-medium">
568
+ <span>Learn more</span>
569
+ <i class="fas fa-chevron-right ml-1"></i>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition">
577
+ <div class="flex">
578
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
579
+ <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
580
+ </div>
581
+ <div class="ml-4">
582
+ <h3 class="text-xl font-bold text-gray-900">Security Monitoring</h3>
583
+ <p class="mt-3 text-gray-600">
584
+ Monitor your organization's network footprint. Get alerts when new devices appear or when vulnerabilities are detected.
585
+ </p>
586
+ <div class="mt-6">
587
+ <div class="flex items-center text-sm text-blue-600 font-medium">
588
+ <span>Learn more</span>
589
+ <i class="fas fa-chevron-right ml-1"></i>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <!-- CTA Section -->
600
+ <div class="gradient-bg text-white relative overflow-hidden">
601
+ <div class="absolute inset-0 opacity-20">
602
+ <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-600"></div>
603
+ </div>
604
+ <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">
605
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
606
+ Ready to explore the <span class="gradient-text">Internet of Things</span>?
607
+ </h2>
608
+ <p class="mt-6 max-w-3xl mx-auto text-xl text-indigo-100">
609
+ Get started with Shodan today and discover what's connected to the Internet.
610
+ </p>
611
+ <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
612
+ <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">
613
+ Sign Up for Free
614
+ </button>
615
+ <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">
616
+ Learn More
617
+ </button>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- Explore Tab -->
624
+ <div id="explore" class="tab-content">
625
+ <div class="bg-white py-16">
626
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
627
+ <div class="text-center mb-16">
628
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl">
629
+ Explore the <span class="gradient-text">Internet</span>
630
+ </h1>
631
+ <p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto">
632
+ Discover devices, services and vulnerabilities across the global network
633
+ </p>
634
+ </div>
635
+
636
+ <!-- Search Filters -->
637
+ <div class="bg-gray-50 p-6 rounded-xl mb-12">
638
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
639
+ <div>
640
+ <label class="block text-sm font-medium text-gray-700 mb-1">Device Type</label>
641
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
642
+ <option>All Devices</option>
643
+ <option>Webcams</option>
644
+ <option>Routers</option>
645
+ <option>Printers</option>
646
+ <option>Servers</option>
647
+ <option>IoT Devices</option>
648
+ </select>
649
+ </div>
650
+ <div>
651
+ <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
652
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
653
+ <option>All Countries</option>
654
+ <option>United States</option>
655
+ <option China</option>
656
+ <option>Germany</option>
657
+ <option>United Kingdom</option>
658
+ <option>Japan</option>
659
+ </select>
660
+ </div>
661
+ <div>
662
+ <label class="block text-sm font-medium text-gray-700 mb-1">Service</label>
663
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
664
+ <option>All Services</option>
665
+ <option>HTTP</option>
666
+ <option>SSH</option>
667
+ <option>FTP</option>
668
+ <option>MySQL</option>
669
+ <option>RDP</option>
670
+ </select>
671
+ </div>
672
+ <div>
673
+ <label class="block text-sm font-medium text-gray-700 mb-1">Vulnerability</label>
674
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
675
+ <option>All</option>
676
+ <option>Critical</option>
677
+ <option>High</option>
678
+ <option>Medium</option>
679
+ <option>Low</option>
680
+ </select>
681
+ </div>
682
+ </div>
683
+ <div class="mt-6 flex justify-end">
684
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md text-sm font-medium">
685
+ Apply Filters
686
+ </button>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Explore Categories -->
691
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
692
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200">
693
+ <div class="p-6">
694
+ <div class="flex items-center">
695
+ <div class="flex-shrink-0 bg-indigo-100 p极客时间3 rounded-full">
696
+ <i class="fas fa-video text-indigo-600"></i>
697
+ </div>
698
+ <div class="ml-4">
699
+ <h3 class="text-lg font-medium text-gray-900">Webcams</h3>
700
+ <p class="mt-1 text-sm text-gray-600">Explore live public webcams from around the world</p>
701
+ </div>
702
+ </div>
703
+ <div class="mt-4">
704
+ <div class="flex justify-between items-center text-sm text-gray-500">
705
+ <span>Devices Found</span>
706
+ <span class="font-medium">1,245,789</span>
707
+ </div>
708
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
709
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ <div class="bg-gray-50 px-6 py-4">
714
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
715
+ Explore Webcams
716
+ </button>
717
+ </div>
718
+ </div>
719
+
720
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200">
721
+ <div class="p-6">
722
+ <div class="flex items-center">
723
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
724
+ <i class="fas fa-server text-green-600"></i>
725
+ </极客时间div>
726
+ <div class="ml-4">
727
+ <h3 class="text-lg font-medium text-gray-900">Servers</h3>
728
+ <p class="mt-1 text-sm text-gray-600">Discover exposed servers and services</p>
729
+ </div>
730
+ </div>
731
+ <div class="mt-4">
732
+ <div class="flex justify-between items-center text-sm text-gray-500">
733
+ <span>Devices Found</span>
734
+ <span class="font-medium">856,432</span>
735
+ </div>
736
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
737
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 55%"></div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ <div class="bg-gray-50 px-6 py-4">
742
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium">
743
+ Explore Servers
744
+ </button>
745
+ </div>
746
+ </div>
747
+
748
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200">
749
+ <div class="p-6">
750
+ <div class="flex items-center">
751
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
752
+ <i class="fas fa-network-wired text-purple-600"></i>
753
+ </div>
754
+ <div class="ml-4">
755
+ <h3 class="text-lg font-medium text-gray-900">Network Devices</h3>
756
+ <p class="mt-1 text-sm text-gray-600">Routers, switches and other networking equipment</p>
757
+ </div>
758
+ </div>
759
+ <div class="mt-4">
760
+ <div class="flex justify-between items-center text-sm text-gray-500">
761
+ <span>Devices Found</span>
762
+ <span class="font-medium">2,345,678</span>
763
+ </div>
764
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
765
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 85%"></div>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ <div class="bg-gray-50 px-6 py-4">
770
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">
771
+ Explore Network Devices
772
+ </button>
773
+ </div>
774
+ </div>
775
+
776
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200">
777
+ <div class="p-6">
778
+ <div class="flex items-center">
779
+ <div class="flex-shrink-0 bg-red-100 p-3 rounded-full">
780
+ <i class="fas fa-bug text-red-600"></i>
781
+ </div>
782
+ <div class="ml-4">
783
+ <h3 class="text-lg font-medium text-gray-900">Vulnerable Devices</h3>
784
+ <p class="mt-1 text-sm text-gray-600">Systems with known vulnerabilities</p>
785
+ </div>
786
+ </div>
787
+ <div class="mt-4">
788
+ <div class="flex justify-between items-center text-sm text-gray-500">
789
+ <span>Devices Found</span>
790
+ <span class="font-medium">456,789</span>
791
+ </div>
792
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
793
+ <div class="bg-red-600 h极客时间-2.5 rounded-full" style="width: 35%"></div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ <div class="bg-gray-50 px-6 py-4">
798
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium">
799
+ Explore Vulnerabilities
800
+ </button>
801
+ </div>
802
+ </div>
803
+
804
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200">
805
+ <div class="p-6">
806
+ <div class="flex items-center">
807
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
808
+ <i class="fas fa-industry text-blue-600"></i>
809
+ </div>
810
+ <div class="ml-4">
811
+ <h3 class="text-lg font-medium text-gray-900">Industrial Systems</h3>
812
+ <p class="mt-1 text-sm text-gray-600">SCADA, ICS and other industrial equipment</p>
813
+ </div>
814
+ </div>
815
+ <div class="mt-4">
816
+ <div class="flex justify-between items-center text-sm text-gray-500">
817
+ <span>Devices Found</span>
818
+ <span class="font-medium">123,456</span>
819
+ </div>
820
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
821
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div>
822
+ </div>
823
+ </div>
824
+ </div>
825
+ <div class="bg-gray-50 px-6 py-4">
826
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
827
+ Explore Industrial Systems
828
+ </button>
829
+ </div>
830
+ </div>
831
+
832
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition border border-gray-200">
833
+ <div class="p-6">
834
+ <div class="flex items-center">
835
+ <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-full">
836
+ <i class="fas fa-home text-yellow-600"></i>
837
+ </div>
838
+ <div class="ml-4">
839
+ <h3 class="text-lg font-medium text-gray-900">Smart Home</h3>
840
+ <p class="mt-1 text-sm text-gray-600">IoT devices for home automation</p>
841
+ </div>
842
+ </div>
843
+ <div class="mt-4">
844
+ <div class="flex justify-between items-center text-sm text-gray-500">
845
+ <span>Devices Found</span>
846
+ <span class="font-medium">789,012</span>
847
+ </div>
848
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2">
849
+ <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 45%"></div>
850
+ </div>
851
+ </div>
852
+ </div>
853
+ <div class="bg-gray-50 px-6 py-4">
854
+ <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md text-sm font-medium">
855
+ Explore Smart Home
856
+ </button>
857
+ </div>
858
+ </div>
859
+ </div>
860
+
861
+ <div class="mt-16 text-center">
862
+ <h3 class="text-2xl font-bold text-gray-900">Can't find what you're looking for?</h3>
863
+ <p class="mt-4 max-w-2xl text-lg text-gray-600 mx-auto">
864
+ Use our advanced search to find specific devices and services across the Internet
865
+ </p>
866
+ <div class="mt-8">
867
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg text-lg font-medium">
868
+ <i class="fas fa-search mr-2"></i> Advanced Search
869
+ </button>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </div>
875
+
876
+ <!-- Maps Tab -->
877
+ <div id="maps" class="tab-content">
878
+ <div class="bg-white py-16">
879
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
880
+ <div class="text-center mb-16">
881
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl">
882
+ Interactive <span class="gradient-text">Maps</span>
883
+ </h1>
884
+ <p class="极客时间mt-6 max-w-2xl text-xl text-gray-600 mx-auto">
885
+ Visualize device distributions and network activity geographically
886
+ </p>
887
+ </div>
888
+
889
+ <div class="map-container rounded-xl overflow-hidden mb-12">
890
+ <div class="map-placeholder"></div>
891
+ <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 to-transparent"></div>
892
+ <div class="absolute top-6 left-6 bg-white p-4 rounded-lg shadow-lg">
893
+ <h3 class="font-medium text-gray-900 mb极客时间-2">Global Device Distribution</h3>
894
+ <极客时间div class="flex items-center space-x-4">
895
+ <div>
896
+ <div class="flex items-center">
897
+ <div class="w-3 h-3 rounded-full bg-indigo-600 mr-2"></div>
898
+ <span class="text-sm text-gray-600">Webcams</span>
899
+ </div>
900
+ <div class="flex items-center mt-1">
901
+ <div class="w-3 h-3 rounded-full bg-green-600 mr-2"></div>
902
+ <span class="text-sm text-gray-600">Servers</span>
903
+ </div>
904
+ </div>
905
+ <div>
906
+ <div class="flex items-center">
907
+ <div class="w-3 h-3 rounded-full bg-purple-600 mr-2"></div>
908
+ <span class="text-sm text-gray-600">Network</span>
909
+ </div>
910
+ <div class="flex items-center mt-1">
911
+ <div class="w-3 h-3 rounded-full bg-red-600 mr-2"></div>
912
+ <span class="text-sm text-gray-600">Vulnerable</span>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </div>
917
+ <div class="absolute bottom-6 left-6 right-6 bg-white p-4 rounded-lg shadow-lg">
918
+ <div class="flex items-center justify-between">
919
+ <div>
920
+ <h4 class="font-medium text-gray-900">Current View</h4>
921
+ <p class="text-sm text-gray-600">North America • 1,245,789 devices</p>
922
+ </div>
923
+ <div class="flex space-x-2">
924
+ <button class="bg-gray-100 hover:bg-gray-200 p-2 rounded-md">
925
+ <i class="fas fa-search-plus text-gray-600"></i>
926
+ </button>
927
+ <button class="bg-gray-100 hover:bg-gray-200 p-2 rounded-md">
928
+ <i class="fas fa-search-minus text-gray-600"></i>
929
+ </button>
930
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
931
+ Filter Devices
932
+ </button>
933
+ </div>
934
+ </div>
935
+ </div>
936
+ </div>
937
+
938
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
939
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
940
+ <div class="flex items-center mb-4">
941
+ <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-md">
942
+ <i class="fas fa-globe-americas text-indigo-600"></i>
943
+ </div>
944
+ <div class="ml-4">
945
+ <h3 class="text-lg font-medium text-gray-900">Global Heatmap</h3>
946
+ </div>
947
+ </div>
948
+ <p class="text-gray-600 mb-4">
949
+ Visualize device density across the world with our interactive heatmap. Identify hotspots of activity and track changes over time.
950
+ </p>
951
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
952
+ View Heatmap <i class="fas fa-arrow-right ml-1"></i>
953
+ </button>
954
+ </div>
955
+
956
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
957
+ <div class="flex items-center mb-4">
958
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-md">
959
+ <i class="fas fa-chart-line text-green-600"></i>
960
+ </div>
961
+ <div class="ml-4">
962
+ <h3 class="text-lg font-medium text-gray-900">Trend Analysis</h极客时间3>
963
+ </div>
964
+ </div>
965
+ <p class="text-gray-600 mb-4">
966
+ Analyze how device distributions change over time. Compare different regions and identify emerging trends in IoT adoption.
967
+ </p>
968
+ <button class="text-green-600 hover:text-green-800 text-sm font-medium">
969
+ View Trends <i class="fas fa-arrow-right ml-1"></i>
970
+ </button>
971
+ </div>
972
+
973
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
974
+ <div class="flex items-center mb-4">
975
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
976
+ <i class="fas fa-shield-alt text-purple-600"></i>
977
+ </div>
978
+ <div class="ml-4">
979
+ <h3 class="text-lg font-medium text-gray-900">Security Map</h3>
980
+ </div>
981
+ </div>
982
+ <p class="text-gray-600 mb-4">
983
+ Identify regions with high concentrations of vulnerable devices. Monitor security postures across different countries and networks.
984
+ </p>
985
+ <button class="text-purple-600 hover:text-purple-800 text-sm font-medium">
986
+ View Security Map <i class="fas fa-arrow-right ml-1"></i>
987
+ </button>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="bg-gray-50 p-8 rounded-xl">
992
+ <div class="text-center mb-8">
993
+ <h3 class="text-2xl font-bold text-gray-900">Custom Map Reports</h3>
994
+ <p class="mt-4 max-w-2xl text-lg text-gray-600 mx-auto">
995
+ Generate detailed reports for specific regions, networks or device types
996
+ </p>
997
+ </div>
998
+
999
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1000
+ <div>
1001
+ <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
1002
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
1003
+ <option>Device Distribution</option>
1004
+ <option>Vulnerability Analysis</option>
1005
+ <option>Network Growth</option>
1006
+ <option>Service Adoption</option>
1007
+ </select>
1008
+ </div>
1009
+ <div>
1010
+ <label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
1011
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
1012
+ <option>Worldwide</option>
1013
+ <option>North America</option>
1014
+ <option>Europe</option>
1015
+ <option>Asia</option>
1016
+ <option>South America</option>
1017
+ </select>
1018
+ </div>
1019
+ <div>
1020
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label>
1021
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
1022
+ <option>Last 24 hours</option>
1023
+ <option>Last 7 days</option>
1024
+ <option>Last 30 days</option>
1025
+ <option>Last year</option>
1026
+ </select>
1027
+ </div>
1028
+ <div>
1029
+ <label class="block text-sm font-medium text-gray-700 mb-1">Device Type</label>
1030
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
1031
+ <option>All Devices</option>
1032
+ <option>Webcams</option>
1033
+ <option>Servers</option>
1034
+ <option>Network Devices</option>
1035
+ </select>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <div class="mt-8 text-center">
1040
+ <button class="bg-indigo-600 hover:bg-indigo-7极客时间00 text-white px-8 py-3 rounded-lg text-lg font-medium">
1041
+ Generate Report
1042
+ </button>
1043
+ </div>
1044
+ </div>
1045
+ </div>
1046
+ </div>
1047
+ </div>
1048
+
1049
+ <!-- API Tab -->
1050
+ <div id="api" class="tab-content">
1051
+ <div class="bg-white py-16">
1052
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1053
+ <div class="text-center mb-16">
1054
+ <h1 class="text-4极客时间xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl">
1055
+ Shodan <span class="gradient-text">API</span>
1056
+ </h1>
1057
+ <p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto">
1058
+ Programmatic access to the world's most comprehensive Internet intelligence platform
1059
+ </p>
1060
+ </div>
1061
+
1062
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
1063
+ <div>
1064
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">API Features</h2>
1065
+ <div class="space-y-6">
1066
+ <div class="flex">
1067
+ <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-md">
1068
+ <i class="fas fa-code text-indigo-600"></i>
1069
+ </div>
1070
+ <div class="ml-4">
1071
+ <h3 class="text-lg font-medium text-gray-900">Full Search Capabilities</h3>
1072
+ <p class="mt-1 text-gray-600">
1073
+ Access all search filters and capabilities through our REST API. Query by device type, location, organization and more.
1074
+ </p>
1075
+ </div>
1076
+ </div>
1077
+ <div class="flex">
1078
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-md">
1079
+ <i class="fas fa-database text-green-600"></i>
1080
+ </div>
1081
+ <div class="ml-4">
1082
+ <h3 class="text-lg font-medium text-gray-900">Comprehensive Data</h3>
1083
+ <p class="mt-1 text-gray-600">
1084
+ Get detailed information about each device including banners, services, vulnerabilities and geographic data.
1085
+ </p>
1086
+ </div>
1087
+ </div>
1088
+ <div class="flex">
1089
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
1090
+ <i class="fas fa-bolt text-purple-600"></i>
1091
+ </div>
1092
+ <div class="ml-4">
1093
+ <h3 class="text-lg font-medium text-gray-900">Real-time Updates</h3>
1094
+ <p class="mt-1 text-gray-600">
1095
+ Our API provides access to the most up-to-date information as new devices come online.
1096
+ </p>
1097
+ </div>
1098
+ </div>
1099
+ <div class="flex">
1100
+ <div class="flex极客时间-shrink-0 bg-blue-100 p-2 rounded-md">
1101
+ <i class="fas fa-shield-alt text-blue-600"></i>
1102
+ </div>
1103
+ <div class="ml-4">
1104
+ <h3 class="text-lg font-medium text-gray-900">Security Intelligence</h3>
1105
+ <p class="mt-1 text-gray-600">
1106
+ Identify vulnerable systems and monitor your organization's network footprint programmatically.
1107
+ </极客时间p>
1108
+ </div>
1109
+ </div>
1110
+ </div>
1111
+ </div>
1112
+
1113
+ <div class="bg-gray-50 p-8 rounded-xl">
1114
+ <div class="flex items-center mb-6">
1115
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full">
1116
+ <i class="fas fa-key text-indigo-600 text-xl"></i>
1117
+ </div>
1118
+ <div class="ml-4">
1119
+ <h3 class="text-xl font-bold text-gray-900">API Plans</h3>
1120
+ <p class="mt-1 text-gray-600">Choose the plan that fits your needs</p>
1121
+ </div>
1122
+ </div>
1123
+
1124
+ <div class="space-y-4">
1125
+ <div class="bg-white p-6 rounded-lg shadow-sm">
1126
+ <div class="flex justify-between items-start">
1127
+ <div>
1128
+ <h4 class极客时间="font-medium text-gray-900">Developer</h4>
1129
+ <p class="text-sm text-gray-600">$49/month</p>
1130
+ </div>
1131
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Popular</span>
1132
+ </div>
1133
+ <ul class="mt-4 space-y-2 text-sm text-gray-600">
1134
+ <li class="flex items-center">
1135
+ <i class="fas fa-check text-green-500 mr-2"></i>
1136
+ <span>100,000 query credits/month</span>
1137
+ </li>
1138
+ <li class="flex items-center">
1139
+ <i class="fas fa-check text-green-500 mr-2"></i>
1140
+ <span>Full search capabilities</span>
1141
+ </li>
1142
+ <li class="flex items-center">
1143
+ <i class="fas fa-check text-green-500 mr-2"></i>
1144
+ <span>API access</span>
1145
+ </li>
1146
+ <li class="flex items-center">
1147
+ <i class="fas fa-check text-green-500 mr-2"></i>
1148
+ <span>Email support</span>
1149
+ </li>
1150
+ </ul>
1151
+ <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">
1152
+ Get Started
1153
+ </button>
1154
+ </div>
1155
+
1156
+ <div class="bg-white p-6 rounded-lg shadow-sm">
1157
+ <div>
1158
+ <h4 class="font-medium text-gray-900">Enterprise</h4>
1159
+ <p class="text-sm text-gray-600">Custom pricing</p>
1160
+ </div>
1161
+ <ul class="mt-4 space-y-2 text-sm text-gray-600">
1162
+ <li class="flex items-center">
1163
+ <i class="fas fa-check text-green-500 mr-2"></i>
1164
+ <span>Unlimited query credits</span>
1165
+ </li>
1166
+ <li class="flex items-center">
1167
+ <i class="fas fa-check text-green-500 mr-2"></i>
1168
+ <span>Advanced search filters</span>
1169
+ </li>
1170
+ <li class="flex items-center">
1171
+ <i class="fas fa-check text-green-500 mr-2"></i>
1172
+ <span>Priority API access</span>
1173
+ </li>
1174
+ <li class="flex items-center">
1175
+ <i class="fas fa-check text-green-500 mr-2"></i>
1176
+ <span>Dedicated support</span>
1177
+ </li>
1178
+ <li class="flex items-center">
1179
+ <i class="fas fa-check text-green-500 mr-2"></i>
1180
+ <span>Custom integrations</span>
1181
+ </li>
1182
+ </ul>
1183
+ <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">
1184
+ Contact Sales
1185
+ </button>
1186
+ </div>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+
1191
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
1192
+ <div class="p-6">
1193
+ <div class="flex items-center mb-6">
1194
+ <div class="flex-shrink-0 bg-indigo-600 p-3 rounded-full">
1195
+ <i class="fas fa-terminal text-white"></i>
1196
+ </div>
1197
+ <div class="ml-4">
1198
+ <h3 class="text-xl font-bold text-white">API Example</h3>
1199
+ <p class="mt-1 text-indigo-200">Search for webcams in the United States</p>
1200
+ </div>
1201
+ </div>
1202
+
1203
+ <div class="bg-gray-800 p-4 rounded-lg">
1204
+ <div class="flex items-center text-sm text-gray-400 mb-2">
1205
+ <span class="text-green-400 mr-2">$</span>
1206
+ <span>curl "https://api.shodan.io/shodan/host/search?key=YOUR_API_KEY&query=webcam country:US"</span>
1207
+ </div>
1208
+ <pre class="text-gray-300 text-sm overflow-x-auto mt-4">
1209
+ {
1210
+ "matches": [
1211
+ {
1212
+ "ip": 1234567890,
1213
+ "port": 80,
1214
+ "org": "Comcast Cable",
1215
+ "location": {
1216
+ "city": "Chicago",
1217
+ "country_code": "US"
1218
+ },
1219
+ "product": "IP Camera",
1220
+ "data": "HTTP/1.1 200 OK\r\nServer: IP Camera"
1221
+ },
1222
+ ...
1223
+ ],
1224
+ "total": 1245789
1225
+ }</pre>
1226
+ </div>
1227
+
1228
+ <div class="mt-6 flex flex-wrap gap-3">
1229
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
1230
+ <i class="fas fa-book mr-1"></i> Documentation
1231
+ </button>
1232
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py极客时间-2 rounded-md text-sm font-medium">
1233
+ <i class="fas fa-code mr-1"></i> Code Examples
1234
+ </button>
1235
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm font-medium">
1236
+ <i class="fas fa-tools mr-1"></i> API Tools
1237
+ </button>
1238
+ </div>
1239
+ </div>
1240
+ </div>
1241
+
1242
+ <div class="mt-16 text-center">
1243
+ <h3 class="text-2xl font-bold text-gray-900">Ready to integrate Shodan into your application?</h3>
1244
+ <p class="mt-4 max-w-2xl text-lg text-gray-600 mx-auto">
1245
+ Get started with our API today and add Internet intelligence to your products
1246
+ </p>
1247
+ <div class="mt-8">
1248
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg text-lg font-medium">
1249
+ Get API Key
1250
+ </button>
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+ </div>
1256
+
1257
+ <!-- Enterprise Tab -->
1258
+ <div id="enterprise" class="tab-content">
1259
+ <div class="bg-white py-16">
1260
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1261
+ <div class="text-center mb-16">
1262
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl lg:text-6xl">
1263
+ Shodan <span class="gradient-text">Enterprise</span>
1264
+ </h1>
1265
+ <p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto">
1266
+ Comprehensive Internet intelligence solutions for large organizations
1267
+ </p>
1268
+ </div>
1269
+
1270
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
1271
+ <div>
1272
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Enterprise Solutions</h2>
1273
+ <div class="space-y-6">
1274
+ <div class="flex">
1275
+ <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-md">
1276
+ <i class="fas fa-building text-indigo-600"></i>
1277
+ </div>
1278
+ <div class="ml-4">
1279
+ <h3 class="text-lg font-medium text-gray-900">Network Monitoring</h3>
1280
+ <p class="mt-1 text-gray-600">
1281
+ Continuously monitor your organization's Internet footprint. Get alerts when new devices appear or when vulnerabilities are detected.
1282
+ </p>
1283
+ </div>
1284
+ </div>
1285
+ <div class="flex">
1286
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-md">
1287
+ <i class="fas fa-shield-alt text-green-600"></i>
1288
+ </div>
1289
+ <div class="ml-4">
1290
+ <h3 class="text-lg font-medium text-gray-900">Threat Intelligence</h3>
1291
+ <p class="mt-1 text-gray-600">
1292
+ Identify potential threats targeting your organization. Discover exposed systems before attackers do.
1293
+ </p>
1294
+ </div>
1295
+ </div>
1296
+ <div class="flex">
1297
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
1298
+ <i class="fas fa-chart-pie text-purple-600"></i>
1299
+ </div>
1300
+ <div class="ml-4">
1301
+ <h3 class="text-lg font-medium text-gray-900">Asset Management</h3>
1302
+ <p class="mt-1 text-gray-600">
1303
+ Maintain an accurate inventory of all Internet-facing assets. Track changes and identify shadow IT.
1304
+ </p>
1305
+ </div>
1306
+ </div>
1307
+ <div class="flex">
1308
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-md">
1309
+ <i class="fas fa-users text-blue-600"></极客时间i>
1310
+ </div>
1311
+ <div class="ml-4">
1312
+ <h3 class="text-lg font-medium text-gray-900">Team Collaboration</h3>
1313
+ <p class="mt-1 text-gray-600">
1314
+ Share findings and collaborate with your security team. Assign tasks and track remediation efforts.
1315
+ </p>
1316
+ </div>
1317
+ </div>
1318
+ </div>
1319
+ </div>
1320
+
1321
+ <div class="bg-indigo-50 p-8 rounded-xl">
1322
+ <div class="flex items-center mb-6">
1323
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full">
1324
+ <i class="fas fa-star text-indigo-600 text-xl"></i>
1325
+ </div>
1326
+ <div class="ml-4">
1327
+ <h3 class="text-xl font-bold text-gray-900">Enterprise Features</h3>
1328
+ <p class="mt-1 text-gray-600">Exclusive benefits for enterprise customers</p>
1329
+ </div>
1330
+ </div>
1331
+
1332
+ <ul class="space-y-4">
1333
+ <li class="flex items-start">
1334
+ <div class="flex-shrink-0 mt-1">
1335
+ <i class="fas fa-check-circle text-indigo-600"></i>
1336
+ </div>
1337
+ <div class="ml-3">
1338
+ <p class="text-sm text-gray-700">Unlimited API queries and exports</p>
1339
+ </div>
1340
+ </li>
1341
+ <li class="flex items-start">
1342
+ <div class="flex-shrink-0 mt-1">
1343
+ <i class="fas fa-check-circle text-indigo-600"></i>
1344
+ </div>
1345
+ <div class="ml-3">
1346
+ <p class="text-sm text-gray-700">Custom data feeds and integrations</p>
1347
+ </div>
1348
+ </
1349
+ </html>