Hugging Face's logo

Spaces:
aigodking
/
aigodking-space
Running

App Files Community
aigodking commited on
Commit
4fd3070
·
verified ·
1 Parent(s): 70796fe

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +581 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aigodking Space
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: green
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: aigodking-space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,581 @@
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>The Digital Collector - Herholdts.co.za Scraper</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #4338ca 0%, #10b981 100%);
12
+ }
13
+ .crawl-level-indicator {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .crawl-level-indicator:hover {
17
+ transform: scale(1.05);
18
+ }
19
+ .progress-ring__circle {
20
+ transition: stroke-dashoffset 0.35s;
21
+ transform: rotate(-90deg);
22
+ transform-origin: 50% 50%;
23
+ }
24
+ .module-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .module-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ }
31
+ .tab-content {
32
+ display: none;
33
+ opacity: 0;
34
+ transform: translateY(10px);
35
+ }
36
+ .tab-content.active {
37
+ display: block;
38
+ opacity: 1;
39
+ transform: translateY(0);
40
+ transition: opacity 0.3s ease, transform 0.3s ease;
41
+ }
42
+ .custom-scrollbar::-webkit-scrollbar {
43
+ width: 6px;
44
+ height: 6px;
45
+ }
46
+ .custom-scrollbar::-webkit-scrollbar-track {
47
+ background: #f1f1f1;
48
+ }
49
+ .custom-scrollbar::-webkit-scrollbar-thumb {
50
+ background: #888;
51
+ border-radius: 3px;
52
+ }
53
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
54
+ background: #555;
55
+ }
56
+ .loading-spinner {
57
+ animation: spin 1s linear infinite;
58
+ }
59
+ @keyframes spin {
60
+ 0% { transform: rotate(0deg); }
61
+ 100% { transform: rotate(360deg); }
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-50 min-h-screen">
66
+ <!-- Navigation -->
67
+ <nav class="bg-white shadow-sm">
68
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
69
+ <div class="flex justify-between h-16">
70
+ <div class="flex items-center">
71
+ <div class="flex-shrink-0 flex items-center">
72
+ <i class="fas fa-spider text-blue-600 text-2xl mr-2"></i>
73
+ <span class="text-xl font-bold text-gray-900">The Digital Collector</span>
74
+ </div>
75
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
76
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-tab active" data-tab="dashboard">
77
+ Dashboard
78
+ </a>
79
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-tab" data-tab="new-crawl">
80
+ New Crawl
81
+ </a>
82
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-tab" data-tab="results">
83
+ Results
84
+ </a>
85
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium nav-tab" data-tab="modules">
86
+ Modules
87
+ </a>
88
+ </div>
89
+ </div>
90
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
91
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
92
+ <i class="fas fa-user-circle mr-2"></i> Account
93
+ </button>
94
+ </div>
95
+ <div class="-mr-2 flex items-center sm:hidden">
96
+ <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-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
97
+ <span class="sr-only">Open main menu</span>
98
+ <i class="fas fa-bars"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Mobile menu -->
105
+ <div class="sm:hidden hidden" id="mobile-menu">
106
+ <div class="pt-2 pb-3 space-y-1">
107
+ <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-tab active" data-tab="dashboard">Dashboard</a>
108
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-tab" data-tab="new-crawl">New Crawl</a>
109
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-tab" data-tab="results">Results</a>
110
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium nav-tab" data-tab="modules">Modules</a>
111
+ </div>
112
+ <div class="pt-4 pb-3 border-t border-gray-200">
113
+ <div class="flex items-center px-4">
114
+ <div class="flex-shrink-0">
115
+ <i class="fas fa-user-circle text-gray-400 text-2xl"></i>
116
+ </div>
117
+ <div class="ml-3">
118
+ <div class="text-base font-medium text-gray-800">User Account</div>
119
+ <div class="text-sm font-medium text-gray-500">user@example.com</div>
120
+ </div>
121
+ </div>
122
+ <div class="mt-3 space-y-1">
123
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a>
124
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a>
125
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </nav>
130
+
131
+ <!-- Main Content -->
132
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
133
+ <!-- Dashboard Tab -->
134
+ <div class="tab-content active" id="dashboard-content">
135
+ <div class="mb-8">
136
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">Dashboard</h1>
137
+ <p class="text-gray-600">Monitor your crawling activities and system status</p>
138
+ </div>
139
+
140
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
141
+ <!-- Stats Cards -->
142
+ <div class="bg-white overflow-hidden shadow rounded-lg">
143
+ <div class="px-4 py-5 sm:p-6">
144
+ <div class="flex items-center">
145
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
146
+ <i class="fas fa-globe text-white text-xl"></i>
147
+ </div>
148
+ <div class="ml-5 w-0 flex-1">
149
+ <dt class="text-sm font-medium text-gray-500 truncate">Active Crawls</dt>
150
+ <dd class="flex items-baseline">
151
+ <div class="text-2xl font-semibold text-gray-900">1</div>
152
+ </dd>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="bg-white overflow-hidden shadow rounded-lg">
159
+ <div class="px-4 py-5 sm:p-6">
160
+ <div class="flex items-center">
161
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
162
+ <i class="fas fa-database text-white text-xl"></i>
163
+ </div>
164
+ <div class="ml-5 w-0 flex-1">
165
+ <dt class="text-sm font-medium text-gray-500 truncate">Products Collected</dt>
166
+ <dd class="flex items-baseline">
167
+ <div class="text-2xl font-semibold text-gray-900">0</div>
168
+ </dd>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="bg-white overflow-hidden shadow rounded-lg">
175
+ <div class="px-4 py-5 sm:p-6">
176
+ <div class="flex items-center">
177
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
178
+ <i class="fas fa-clock text-white text-xl"></i>
179
+ </div>
180
+ <div class="ml-5 w-0 flex-1">
181
+ <dt class="text-sm font-medium text-gray-500 truncate">Scheduled Jobs</dt>
182
+ <dd class="flex items-baseline">
183
+ <div class="text-2xl font-semibold text-gray-900">0</div>
184
+ </dd>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="bg-white overflow-hidden shadow rounded-lg">
191
+ <div class="px-4 py-5 sm:p-6">
192
+ <div class="flex items-center">
193
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
194
+ <i class="fas fa-exclamation-triangle text-white text-xl"></i>
195
+ </div>
196
+ <div class="ml-5 w-0 flex-1">
197
+ <dt class="text-sm font-medium text-gray-500 truncate">Errors Today</dt>
198
+ <dd class="flex items-baseline">
199
+ <div class="text-2xl font-semibold text-gray-9">0</div>
200
+ </dd>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Recent Activity -->
208
+ <div class="bg-white shadow rounded-lg mb-8">
209
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
210
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Activity</h3>
211
+ </div>
212
+ <div class="bg-white overflow-hidden">
213
+ <ul class="divide-y divide-gray-200">
214
+ <li class="px-6 py-4">
215
+ <div class="flex items-center">
216
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
217
+ <i class="fas fa-info-circle text-blue-600"></i>
218
+ </div>
219
+ <div class="ml-4">
220
+ <div class="text-sm font-medium text-gray-900">New Herholdts.co.za crawler template created</div>
221
+ <div class="text-sm text-gray-500">Specialized template for product extraction</div>
222
+ </div>
223
+ <div class="ml-auto text-sm text-gray-500">Just now</div>
224
+ </div>
225
+ </li>
226
+ <li class="px-6 py-4">
227
+ <div class="flex items-center">
228
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
229
+ <i class="fas fa-check-circle text-green-600"></i>
230
+ </div>
231
+ <div class="ml-4">
232
+ <div class="text-sm font-medium text-gray-900">System updated</div>
233
+ <div class="text-sm text-gray-500">Version 1.3.2 installed</div>
234
+ </div>
235
+ <div class="ml-auto text-sm text-gray-500">1 hour ago</div>
236
+ </div>
237
+ </li>
238
+ <li class="px-6 py-4">
239
+ <div class="flex items-center">
240
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
241
+ <i class="fas fa-check-circle text-green-600"></i>
242
+ </div>
243
+ <div class="ml-4">
244
+ <div class="text-sm font-medium text-gray-900">Data exported</div>
245
+ <div class="text-sm text-gray-500">example_data.csv - 3.2MB</div>
246
+ </div>
247
+ <div class="ml-auto text-sm text-gray-500">Yesterday</div>
248
+ </div>
249
+ </li>
250
+ </ul>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- System Status -->
255
+ <div class="bg-white shadow rounded-lg">
256
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
257
+ <h3 class="text-lg leading-6 font-medium text-gray-900">System Status</h3>
258
+ </div>
259
+ <div class="px-4 py-5 sm:p-6">
260
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
261
+ <div>
262
+ <h4 class="text-sm font-medium text-gray-500 mb-2">CPU Usage</h4>
263
+ <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
264
+ <div class="absolute top-0 left-0 h-full bg-blue-500" style="width: 35%"></div>
265
+ </div>
266
+ <div class="mt-1 text-sm text-gray-500">35% - 4 cores @ 2.8GHz</div>
267
+ </div>
268
+ <div>
269
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Memory Usage</h4>
270
+ <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
271
+ <div class="absolute top-0 left-0 h-full bg-green-500" style="width: 42%"></div>
272
+ </div>
273
+ <div class="mt-1 text-sm text-gray-500">42% - 3.2GB / 7.6GB</div>
274
+ </div>
275
+ <div>
276
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Disk Usage</h4>
277
+ <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
278
+ <div class="absolute top-0 left-0 h-full bg-yellow-500" style="width: 28%"></div>
279
+ </div>
280
+ <div class="mt-1 text-sm text-gray-500">28% - 56GB / 200GB</div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- New Crawl Tab -->
288
+ <div class="tab-content" id="new-crawl-content">
289
+ <div class="mb-8">
290
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">New Web Crawl</h1>
291
+ <p class="text-gray-600">Configure and launch a new web crawling job</p>
292
+ </div>
293
+
294
+ <div class="flex flex-col lg:flex-row gap-6">
295
+ <div class="lg:w-2/3">
296
+ <div class="bg-white shadow rounded-lg overflow-hidden">
297
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
298
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Herholdts.co.za Product Crawler</h3>
299
+ </div>
300
+ <div class="px-4 py-5 sm:p-6">
301
+ <form id="crawl-form">
302
+ <div class="grid grid-cols-1 gap-6">
303
+ <!-- Basic Settings -->
304
+ <div>
305
+ <label for="url" class="block text-sm font-medium text-gray-700">Target Website</label>
306
+ <div class="mt-1 flex rounded-md shadow-sm">
307
+ <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
308
+ https://
309
+ </span>
310
+ <input type="text" name="url" id="url" class="focus:ring-blue-500 focus:border-blue-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" value="herholdts.co.za" readonly>
311
+ </div>
312
+ </div>
313
+
314
+ <div>
315
+ <label for="crawl-name" class="block text-sm font-medium text-gray-700">Crawl Name</label>
316
+ <input type="text" name="crawl-name" id="crawl-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="Herholdts Products - Full Extraction">
317
+ </div>
318
+
319
+ <!-- Data Points to Collect -->
320
+ <div>
321
+ <label class="block text-sm font-medium text-gray-700 mb-2">Data Points to Collect</label>
322
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
323
+ <div class="flex items-start">
324
+ <div class="flex items-center h-5">
325
+ <input id="collect-title" name="collect-title" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
326
+ </div>
327
+ <div class="ml-3 text-sm">
328
+ <label for="collect-title" class="font-medium text-gray-700">Product Title</label>
329
+ </div>
330
+ </div>
331
+ <div class="flex items-start">
332
+ <div class="flex items-center h-5">
333
+ <input id="collect-price" name="collect-price" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
334
+ </div>
335
+ <div class="ml-3 text-sm">
336
+ <label for="collect-price" class="font-medium text-gray-700">Price</label>
337
+ </div>
338
+ </div>
339
+ <div class="flex items-start">
340
+ <div class="flex items-center h-5">
341
+ <input id="collect-description" name="collect-description" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
342
+ </div>
343
+ <div class="ml-3 text-sm">
344
+ <label for="collect-description" class="font-medium text-gray-700">Description</label>
345
+ </div>
346
+ </div>
347
+ <div class="flex items-start">
348
+ <div class="flex items-center h-5">
349
+ <input id="collect-images" name="collect-images" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
350
+ </div>
351
+ <div class="ml-3 text-sm">
352
+ <label for="collect-images" class="font-medium text-gray-700">Images</label>
353
+ </div>
354
+ </div>
355
+ <div class="flex items-start">
356
+ <div class="flex items-center h-5">
357
+ <input id="collect-sku" name="collect-sku" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
358
+ </div>
359
+ <div class="ml-3 text-sm">
360
+ <label for="collect-sku" class="font-medium text-gray-700">SKU/Code</label>
361
+ </div>
362
+ </div>
363
+ <div class="flex items-start">
364
+ <div class="flex items-center h-5">
365
+ <input id="collect-categories" name="collect-categories" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
366
+ </div>
367
+ <div class="ml-3 text-sm">
368
+ <label for="collect-categories" class="font-medium text-gray-700">Categories</label>
369
+ </div>
370
+ </div>
371
+ <div class="flex items-start">
372
+ <div class="flex items-center h-5">
373
+ <input id="collect-specs" name="collect-specs" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
374
+ </div>
375
+ <div class="ml-3 text-sm">
376
+ <label for="collect-specs" class="font-medium text-gray-700">Specifications</label>
377
+ </div>
378
+ </div>
379
+ <div class="flex items-start">
380
+ <div class="flex items-center h-5">
381
+ <input id="collect-availability" name="collect-availability" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
382
+ </div>
383
+ <div class="ml-3 text-sm">
384
+ <label for="collect-availability" class="font-medium text-gray-700">Availability</label>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Pagination Handling -->
391
+ <div class="border-t border-gray-200 pt-4">
392
+ <div class="flex items-center">
393
+ <input id="handle-pagination" name="handle-pagination" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
394
+ <label for="handle-pagination" class="ml-3 block text-sm font-medium text-gray-700">Auto-handle pagination</label>
395
+ </div>
396
+ <p class="mt-1 text-sm text-gray-500">Automatically follow pagination links to collect all products</p>
397
+ </div>
398
+
399
+ <!-- Advanced Options -->
400
+ <div class="border-t border-gray-200 pt-4">
401
+ <div class="flex items-center justify-between">
402
+ <h3 class="text-lg font-medium text-gray-900">Advanced Options</h3>
403
+ <button type="button" class="text-blue-600 hover:text-blue-500 text-sm font-medium" id="toggle-advanced">
404
+ Show Advanced
405
+ </button>
406
+ </div>
407
+
408
+ <div class="mt-4 space-y-4 hidden" id="advanced-options">
409
+ <!-- Crawl Speed -->
410
+ <div>
411
+ <label class="block text-sm font-medium text-gray-700">Crawl Speed</label>
412
+ <div class="mt-2">
413
+ <div class="flex items-center space-x-4">
414
+ <div class="flex items-center">
415
+ <input id="speed-slow" name="crawl-speed" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" value="slow">
416
+ <label for="speed-slow" class="ml-2 block text-sm text-gray-700">Slow (stealth)</label>
417
+ </div>
418
+ <div class="flex items-center">
419
+ <input id="speed-medium" name="crawl-speed" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" value="medium" checked>
420
+ <label for="speed-medium" class="ml-2 block text-sm text-gray-700">Medium</label>
421
+ </div>
422
+ <div class="flex items-center">
423
+ <input id="speed-fast" name="crawl-speed" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" value="fast">
424
+ <label for="speed-fast" class="ml-2 block text-sm text-gray-700">Fast</label>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Respect Robots.txt -->
431
+ <div class="flex items-start">
432
+ <div class="flex items-center h-5">
433
+ <input id="respect-robots" name="respect-robots" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
434
+ </div>
435
+ <div class="ml-3 text-sm">
436
+ <label for="respect-robots" class="font-medium text-gray-700">Respect robots.txt</label>
437
+ <p class="text-gray-500">Follow the website's crawling rules</p>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- JavaScript Rendering -->
442
+ <div class="flex items-start">
443
+ <div class="flex items-center h-5">
444
+ <input id="js-rendering" name="js-rendering" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
445
+ </div>
446
+ <div class="ml-3 text-sm">
447
+ <label for="js-rendering" class="font-medium text-gray-700">JavaScript Rendering</label>
448
+ <p class="text-gray-500">Execute JavaScript on pages (slower but more complete)</p>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Custom Headers -->
453
+ <div>
454
+ <label for="custom-headers" class="block text-sm font-medium text-gray-700">Custom Headers (JSON)</label>
455
+ <textarea id="custom-headers" name="custom-headers" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder='{"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)", "Accept-Language": "en-US"}'></textarea>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="mt-8 flex justify-end">
462
+ <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
463
+ Cancel
464
+ </button>
465
+ <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="start-crawl-btn">
466
+ <i class="fas fa-spider mr-2"></i> Start Crawling
467
+ </button>
468
+ </div>
469
+ </form>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="lg:w-1/3">
475
+ <div class="bg-white shadow rounded-lg overflow-hidden">
476
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
477
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Crawl Preview</h3>
478
+ </div>
479
+ <div class="px-4 py-5 sm:p-6">
480
+ <div class="rounded-lg border-2 border-dashed border-gray-300 p-4">
481
+ <div class="text-center">
482
+ <i class="fas fa-eye text-gray-400 text-3xl mb-2"></i>
483
+ <h4 class="text-sm font-medium text-gray-700">Crawl Configuration Preview</h4>
484
+ <p class="mt-1 text-sm text-gray-500">Adjust settings to see how they affect your crawl</p>
485
+ </div>
486
+ <div class="mt-4 space-y-3" id="preview-config">
487
+ <div class="flex justify-between text-sm">
488
+ <span class="text-gray-500">Target URL:</span>
489
+ <span class="font-medium text-gray-900">herholdts.co.za</span>
490
+ </div>
491
+ <div class="flex justify-between text-sm">
492
+ <span class="text-gray-500">Data Points:</span>
493
+ <span class="font-medium text-gray-900">8 selected</span>
494
+ </div>
495
+ <div class="flex justify-between text-sm">
496
+ <span class="text-gray-500">Pagination:</span>
497
+ <span class="font-medium text-gray-900">Enabled</span>
498
+ </div>
499
+ <div class="flex justify-between text-sm">
500
+ <span class="text-gray-500">Speed:</span>
501
+ <span class="font-medium text-gray-900">Medium</span>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <div class="mt-6">
507
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Sample Output Structure</h4>
508
+ <div class="bg-gray-50 p-3 rounded-md text-xs font-mono overflow-x-auto custom-scrollbar" style="max-height: 200px;">
509
+ <pre>{
510
+ "products": [
511
+ {
512
+ "title": "Product Name",
513
+ "price": "R1,299.00",
514
+ "original_price": "R1,499.00",
515
+ "description": "Detailed product description...",
516
+ "images": [
517
+ "https://herholdts.co.za/image1.jpg",
518
+ "https://herholdts.co.za/image2.jpg"
519
+ ],
520
+ "sku": "PROD12345",
521
+ "categories": ["Category 1", "Subcategory 1"],
522
+ "specifications": {
523
+ "Material": "Stainless Steel",
524
+ "Dimensions": "30 x 20 x 15 cm",
525
+ "Weight": "1.5 kg"
526
+ },
527
+ "availability": "In Stock",
528
+ "url": "https://herholdts.co.za/product-url"
529
+ }
530
+ ],
531
+ "metadata": {
532
+ "crawl_date": "2023-06-20",
533
+ "pages_crawled": 24,
534
+ "products_found": 142
535
+ }
536
+ }</pre>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+
545
+ <!-- Results Tab -->
546
+ <div class="tab-content" id="results-content">
547
+ <div class="mb-8">
548
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">Crawl Results</h1>
549
+ <p class="text-gray-600">View and manage your collected product data from Herholdts.co.za</p>
550
+ </div>
551
+
552
+ <div class="flex flex-col lg:flex-row gap-6">
553
+ <div class="lg:w-1/4">
554
+ <div class="bg-white shadow rounded-lg overflow-hidden h-full">
555
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
556
+ <div class="flex items-center justify-between">
557
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Saved Crawls</h3>
558
+ <button type="button" class="text-blue-600 hover:text-blue-500 text-sm font-medium">
559
+ <i class="fas fa-sync-alt"></i>
560
+ </button>
561
+ </div>
562
+ </div>
563
+ <div class="px-4 py-5 sm:p-6 overflow-y-auto custom-scrollbar" style="max-height: 500px;">
564
+ <div class="space-y-3" id="saved-crawls-list">
565
+ <div class="p-3 border rounded-lg cursor-pointer hover:bg-gray-50 saved-crawl selected" data-id="herholdts-20230620">
566
+ <div class="flex justify-between">
567
+ <h4 class="font-medium text-gray-900">Herholdts Full</h4>
568
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
569
+ </div>
570
+ <div class="text-xs text-gray-500 mt-1">20 Jun 2023 • 142 products</div>
571
+ </div>
572
+ <div class="p-3 border rounded-lg cursor-pointer hover:bg-gray-50 saved-crawl" data-id="herholdts-test-20230615">
573
+ <div class="flex justify-between">
574
+ <h4 class="font-medium text-gray-900">Herholdts Test</h4>
575
+ <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">Completed</span>
576
+ </div>
577
+ <div class="text-xs text-gray-500 mt-1">15 Jun 2023 • 87 products</div>
578
+ </div>
579
+ <div class="p-3 border rounded-lg cursor-pointer hover:bg-gray-50 saved-crawl" data-id="herholdts-office-20230610">
580
+ <
581
+ </html>