Hugging Face's logo

Spaces:
cyrilsnare
/
data-tweakaz
Running

App Files Community
cyrilsnare commited on
Commit
6bdf102
·
verified ·
1 Parent(s): b09ef78

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +745 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Data Tweakaz
3
- emoji: 📚
4
- colorFrom: yellow
5
- colorTo: purple
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: data-tweakaz
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,745 @@
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>Access-Scrape | Operations Dashboard</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'dark-bg': '#180E12',
15
+ 'light-bg': '#DEDEDE',
16
+ 'accent-blue': '#3F9BFF',
17
+ 'accent-green': '#00D860',
18
+ 'accent-yellow': '#FFFF00',
19
+ 'accent-orange': '#FE3B03',
20
+ 'accent-pink': '#FF00D9',
21
+ },
22
+ animation: {
23
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
24
+ 'slide-in': 'slideIn 0.3s ease-out forwards',
25
+ 'tilt': 'tilt 10s infinite linear'
26
+ },
27
+ keyframes: {
28
+ slideIn: {
29
+ '0%': { transform: 'translateX(100%)', opacity: '0' },
30
+ '100%': { transform: 'translateX(0)', opacity: '1' }
31
+ },
32
+ tilt: {
33
+ '0%, 100%': { transform: 'rotate(-3deg)' },
34
+ '50%': { transform: 'rotate(3deg)' }
35
+ }
36
+ }
37
+ }
38
+ }
39
+ }
40
+ </script>
41
+ <style>
42
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400&display=swap');
43
+
44
+ body {
45
+ font-family: 'Inter', sans-serif;
46
+ transition: background-color 0.3s ease;
47
+ }
48
+
49
+ .mono {
50
+ font-family: 'JetBrains Mono', monospace;
51
+ }
52
+
53
+ .card-tilt {
54
+ transform: rotate(-1deg);
55
+ transition: transform 0.3s ease;
56
+ }
57
+
58
+ .card-tilt:hover {
59
+ transform: rotate(1deg);
60
+ }
61
+
62
+ .neon-blue {
63
+ box-shadow: 0 0 10px rgba(63, 155, 255, 0.7);
64
+ }
65
+
66
+ .neon-green {
67
+ box-shadow: 0 0 10px rgba(0, 216, 96, 0.7);
68
+ }
69
+
70
+ .neon-yellow {
71
+ box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
72
+ }
73
+
74
+ .neon-orange {
75
+ box-shadow: 0 0 10px rgba(254, 59, 3, 0.7);
76
+ }
77
+
78
+ .neon-pink {
79
+ box-shadow: 0 0 10px rgba(255, 0, 217, 0.7);
80
+ }
81
+
82
+ .pulse-success {
83
+ animation: pulse-slow 2s infinite;
84
+ }
85
+
86
+ .sidebar-item:hover {
87
+ background: linear-gradient(90deg, transparent, rgba(63, 155, 255, 0.1), transparent);
88
+ }
89
+
90
+ .kpi-card {
91
+ transition: all 0.3s ease;
92
+ }
93
+
94
+ .kpi-card:hover {
95
+ transform: translateY(-5px);
96
+ }
97
+
98
+ .progress-bar {
99
+ height: 8px;
100
+ border-radius: 4px;
101
+ overflow: hidden;
102
+ }
103
+
104
+ .heatmap-cell {
105
+ transition: transform 0.2s ease;
106
+ }
107
+
108
+ .heatmap-cell:hover {
109
+ transform: scale(1.2);
110
+ z-index: 10;
111
+ }
112
+
113
+ .data-grid-cell {
114
+ border-bottom: 1px solid rgba(255,255,255,0.1);
115
+ }
116
+
117
+ .dark .data-grid-cell {
118
+ border-bottom: 1px solid rgba(0,0,0,0.1);
119
+ }
120
+
121
+ .stat-badge {
122
+ font-size: 0.7rem;
123
+ padding: 2px 8px;
124
+ border-radius: 12px;
125
+ }
126
+
127
+ .slide-in-panel {
128
+ animation: slideIn 0.4s forwards;
129
+ }
130
+
131
+ .rotate-3d {
132
+ transform: perspective(1000px) rotateY(5deg) rotateX(5deg);
133
+ }
134
+
135
+ .grid-stack {
136
+ display: grid;
137
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
138
+ gap: 1.5rem;
139
+ }
140
+
141
+ @media (max-width: 768px) {
142
+ .grid-stack {
143
+ grid-template-columns: 1fr;
144
+ }
145
+ }
146
+ </style>
147
+ </head>
148
+ <body class="bg-light-bg dark:bg-dark-bg text-gray-800 dark:text-gray-200 transition-colors duration-300">
149
+ <!-- Theme Toggle -->
150
+ <div class="fixed top-4 right-4 z-50">
151
+ <button id="themeToggle" class="bg-accent-blue text-white p-3 rounded-full shadow-lg hover:bg-accent-green transition-colors">
152
+ <i class="fas fa-moon dark:hidden"></i>
153
+ <i class="fas fa-sun hidden dark:block"></i>
154
+ </button>
155
+ </div>
156
+
157
+ <!-- Main Layout -->
158
+ <div class="flex flex-col h-screen">
159
+ <!-- Top Bar -->
160
+ <header class="bg-white dark:bg-gray-900 shadow-md py-3 px-6 flex items-center justify-between">
161
+ <div class="flex items-center">
162
+ <button id="sidebarToggle" class="mr-4 lg:hidden">
163
+ <i class="fas fa-bars text-xl text-accent-blue"></i>
164
+ </button>
165
+ <div class="flex items-center">
166
+ <div class="bg-accent-blue w-10 h-10 rounded-lg flex items-center justify-center mr-3">
167
+ <i class="fas fa-database text-white text-xl"></i>
168
+ </div>
169
+ <h1 class="text-2xl font-bold text-accent-blue">Access-<span class="text-accent-green">Scrape</span></h1>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="flex items-center space-x-4">
174
+ <div class="relative">
175
+ <input type="text" placeholder="Search..." class="bg-gray-100 dark:bg-gray-800 rounded-full py-2 px-4 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-accent-blue">
176
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
177
+ </div>
178
+ <button class="relative p-2">
179
+ <i class="fas fa-bell text-xl text-accent-yellow"></i>
180
+ <span class="absolute top-0 right-0 bg-accent-orange text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
181
+ </button>
182
+ <div class="flex items-center">
183
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-accent-blue to-accent-green flex items-center justify-center text-white font-bold mr-2">AS</div>
184
+ <span class="hidden md:block">Admin User</span>
185
+ </div>
186
+ </div>
187
+ </header>
188
+
189
+ <div class="flex flex-1 overflow-hidden">
190
+ <!-- Sidebar -->
191
+ <aside id="sidebar" class="bg-gray-800 dark:bg-gray-900 w-64 py-6 px-4 flex flex-col transform -translate-x-full lg:transform-none fixed lg:static h-full z-40 transition-transform duration-300">
192
+ <nav class="flex-1">
193
+ <ul class="space-y-2">
194
+ <li class="sidebar-item">
195
+ <a href="#" class="flex items-center p-3 rounded-lg bg-accent-blue text-white">
196
+ <i class="fas fa-chart-line mr-3"></i>
197
+ <span>Dashboard</span>
198
+ </a>
199
+ </li>
200
+ <li class="sidebar-item">
201
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700">
202
+ <i class="fas fa-tasks mr-3"></i>
203
+ <span>Scrape Jobs</span>
204
+ </a>
205
+ </li>
206
+ <li class="sidebar-item">
207
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700">
208
+ <i class="fas fa-plug mr-3"></i>
209
+ <span>Plugins & Sources</span>
210
+ </a>
211
+ </li>
212
+ <li class="sidebar-item">
213
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700">
214
+ <i class="fas fa-stream mr-3"></i>
215
+ <span>Data Pipeline</span>
216
+ </a>
217
+ </li>
218
+ <li class="sidebar-item">
219
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700">
220
+ <i class="fas fa-chart-pie mr-3"></i>
221
+ <span>Analytics</span>
222
+ </a>
223
+ </li>
224
+ <li class="sidebar-item">
225
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700">
226
+ <i class="fas fa-file-alt mr-3"></i>
227
+ <span>Logs & Alerts</span>
228
+ </a>
229
+ </li>
230
+ <li class="sidebar-item">
231
+ <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700">
232
+ <i class="fas fa-cog mr-3"></i>
233
+ <span>Admin</span>
234
+ </a>
235
+ </li>
236
+ </ul>
237
+ </nav>
238
+
239
+ <div class="mt-auto pt-4 border-t border-gray-700">
240
+ <div class="flex items-center justify-between mb-2">
241
+ <span class="text-gray-400 text-sm">System Status</span>
242
+ <span class="bg-accent-green text-white text-xs px-2 py-1 rounded">Operational</span>
243
+ </div>
244
+ <div class="flex items-center">
245
+ <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div>
246
+ <span class="text-sm text-gray-300">All systems normal</span>
247
+ </div>
248
+ </div>
249
+ </aside>
250
+
251
+ <!-- Main Content -->
252
+ <main class="flex-1 overflow-auto p-6">
253
+ <!-- KPI Header -->
254
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
255
+ <div class="kpi-card neon-green bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg">
256
+ <div class="flex justify-between items-start">
257
+ <div>
258
+ <p class="text-gray-400">Success Rate</p>
259
+ <h3 class="text-3xl font-bold text-accent-green mt-2">98.7%</h3>
260
+ </div>
261
+ <div class="bg-accent-green bg-opacity-20 p-3 rounded-full">
262
+ <i class="fas fa-check-circle text-accent-green text-xl"></i>
263
+ </div>
264
+ </div>
265
+ <div class="mt-3">
266
+ <div class="flex justify-between text-sm text-gray-400">
267
+ <span>Target: 95%</span>
268
+ <span>+3.7%</span>
269
+ </div>
270
+ <div class="progress-bar bg-gray-700 mt-1">
271
+ <div class="h-full bg-accent-green" style="width: 98.7%"></div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="kpi-card neon-blue bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg">
277
+ <div class="flex justify-between items-start">
278
+ <div>
279
+ <p class="text-gray-400">Avg Req/Sec</p>
280
+ <h3 class="text-3xl font-bold text-accent-blue mt-2">42.3</h3>
281
+ </div>
282
+ <div class="bg-accent-blue bg-opacity-20 p-3 rounded-full">
283
+ <i class="fas fa-bolt text-accent-blue text-xl"></i>
284
+ </div>
285
+ </div>
286
+ <div class="mt-3">
287
+ <div class="flex justify-between text-sm text-gray-400">
288
+ <span>Target: 30</span>
289
+ <span>+12.3</span>
290
+ </div>
291
+ <div class="progress-bar bg-gray-700 mt-1">
292
+ <div class="h-full bg-accent-blue" style="width: 80%"></div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="kpi-card neon-yellow bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg">
298
+ <div class="flex justify-between items-start">
299
+ <div>
300
+ <p class="text-gray-400">Active Jobs</p>
301
+ <h3 class="text-3xl font-bold text-accent-yellow mt-2">18</h3>
302
+ </div>
303
+ <div class="bg-accent-yellow bg-opacity-20 p-3 rounded-full">
304
+ <i class="fas fa-sync-alt text-accent-yellow text-xl"></i>
305
+ </div>
306
+ </div>
307
+ <div class="mt-3">
308
+ <div class="flex justify-between text-sm text-gray-400">
309
+ <span>Completed: 24</span>
310
+ <span>Failed: 2</span>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="kpi-card neon-orange bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg">
316
+ <div class="flex justify-between items-start">
317
+ <div>
318
+ <p class="text-gray-400">Error Rate</p>
319
+ <h3 class="text-3xl font-bold text-accent-orange mt-2">1.3%</h3>
320
+ </div>
321
+ <div class="bg-accent-orange bg-opacity-20 p-3 rounded-full">
322
+ <i class="fas fa-exclamation-triangle text-accent-orange text-xl"></i>
323
+ </div>
324
+ </div>
325
+ <div class="mt-3">
326
+ <div class="flex justify-between text-sm text-gray-400">
327
+ <span>Target: <5%</span>
328
+ <span>-3.7%</span>
329
+ </div>
330
+ <div class="progress-bar bg-gray-700 mt-1">
331
+ <div class="h-full bg-accent-orange" style="width: 1.3%"></div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="kpi-card neon-pink bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg">
337
+ <div class="flex justify-between items-start">
338
+ <div>
339
+ <p class="text-gray-400">Data Volume</p>
340
+ <h3 class="text-3xl font-bold text-accent-pink mt-2">4.2TB</h3>
341
+ </div>
342
+ <div class="bg-accent-pink bg-opacity-20 p-3 rounded-full">
343
+ <i class="fas fa-database text-accent-pink text-xl"></i>
344
+ </div>
345
+ </div>
346
+ <div class="mt-3">
347
+ <div class="flex justify-between text-sm text-gray-400">
348
+ <span>Daily: 120GB</span>
349
+ <span>+14%</span>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Main Panels -->
356
+ <div class="flex flex-col lg:flex-row gap-6 mb-8">
357
+ <!-- Left Pane -->
358
+ <div class="lg:w-7/12">
359
+ <!-- Jobs Panel -->
360
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-6">
361
+ <div class="bg-gradient-to-r from-accent-blue to-accent-green p-4">
362
+ <h2 class="text-xl font-bold text-white">Active Scrape Jobs</h2>
363
+ </div>
364
+ <div class="p-4">
365
+ <div class="overflow-x-auto">
366
+ <table class="w-full">
367
+ <thead>
368
+ <tr class="text-left text-gray-400 text-sm">
369
+ <th class="pb-3">Job Name</th>
370
+ <th class="pb-3">Source</th>
371
+ <th class="pb-3">Progress</th>
372
+ <th class="pb-3">Status</th>
373
+ </tr>
374
+ </thead>
375
+ <tbody>
376
+ <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors">
377
+ <td class="py-3">E-commerce Product Scrape</td>
378
+ <td class="py-3">amazon.com</td>
379
+ <td class="py-3">
380
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
381
+ <div class="bg-accent-green h-2.5 rounded-full" style="width: 75%"></div>
382
+ </div>
383
+ </td>
384
+ <td class="py-3">
385
+ <span class="stat-badge bg-accent-green bg-opacity-20 text-accent-green">Running</span>
386
+ </td>
387
+ </tr>
388
+ <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors">
389
+ <td class="py-3">Social Media Profiles</td>
390
+ <td class="py-3">twitter.com</td>
391
+ <td class="py-3">
392
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
393
+ <div class="bg-accent-blue h-2.5 rounded-full" style="width: 42%"></div>
394
+ </div>
395
+ </td>
396
+ <td class="py-3">
397
+ <span class="stat-badge bg-accent-blue bg-opacity-20 text-accent-blue">Active</span>
398
+ </td>
399
+ </tr>
400
+ <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors">
401
+ <td class="py-3">News Aggregation</td>
402
+ <td class="py-3">nytimes.com</td>
403
+ <td class="py-3">
404
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
405
+ <div class="bg-accent-yellow h-2.5 rounded-full" style="width: 15%"></div>
406
+ </div>
407
+ </td>
408
+ <td class="py-3">
409
+ <span class="stat-badge bg-accent-yellow bg-opacity-20 text-accent-yellow">Starting</span>
410
+ </td>
411
+ </tr>
412
+ <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors">
413
+ <td class="py-3">Real Estate Listings</td>
414
+ <td class="py-3">zillow.com</td>
415
+ <td class="py-3">
416
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
417
+ <div class="bg-accent-orange h-2.5 rounded-full" style="width: 90%"></div>
418
+ </div>
419
+ </td>
420
+ <td class="py-3">
421
+ <span class="stat-badge bg-accent-orange bg-opacity-20 text-accent-orange">Finishing</span>
422
+ </td>
423
+ </tr>
424
+ </tbody>
425
+ </table>
426
+ </div>
427
+ <div class="mt-4 flex justify-end">
428
+ <button class="bg-accent-blue hover:bg-accent-green text-white px-4 py-2 rounded-lg transition-colors">
429
+ View All Jobs
430
+ </button>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Data Pipeline -->
436
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
437
+ <div class="bg-gradient-to-r from-accent-pink to-accent-blue p-4">
438
+ <h2 class="text-xl font-bold text-white">Data Pipeline Overview</h2>
439
+ </div>
440
+ <div class="p-4">
441
+ <div class="flex mb-4">
442
+ <button class="px-4 py-2 bg-accent-blue text-white rounded-l-lg">Raw</button>
443
+ <button class="px-4 py-2 bg-gray-700 text-gray-300">Cleaned</button>
444
+ <button class="px-4 py-2 bg-gray-700 text-gray-300 rounded-r-lg">Merged</button>
445
+ </div>
446
+
447
+ <div class="grid grid-cols-3 gap-4 mb-4">
448
+ <div class="bg-gray-750 p-4 rounded-lg text-center">
449
+ <div class="text-2xl font-bold text-accent-pink">1.2M</div>
450
+ <div class="text-gray-400 text-sm">Raw Records</div>
451
+ </div>
452
+ <div class="bg-gray-750 p-4 rounded-lg text-center">
453
+ <div class="text-2xl font-bold text-accent-green">980K</div>
454
+ <div class="text-gray-400 text-sm">Cleaned</div>
455
+ </div>
456
+ <div class="bg-gray-750 p-4 rounded-lg text-center">
457
+ <div class="text-2xl font-bold text-accent-blue">850K</div>
458
+ <div class="text-gray-400 text-sm">Merged</div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="bg-gray-750 rounded-lg p-4">
463
+ <h3 class="font-bold mb-2">Field Completeness</h3>
464
+ <div class="space-y-3">
465
+ <div>
466
+ <div class="flex justify-between text-sm mb-1">
467
+ <span>Product Name</span>
468
+ <span>98%</span>
469
+ </div>
470
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
471
+ <div class="bg-accent-green h-2.5 rounded-full" style="width: 98%"></div>
472
+ </div>
473
+ </div>
474
+ <div>
475
+ <div class="flex justify-between text-sm mb-1">
476
+ <span>Price</span>
477
+ <span>92%</span>
478
+ </div>
479
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
480
+ <div class="bg-accent-green h-2.5 rounded-full" style="width: 92%"></div>
481
+ </div>
482
+ </div>
483
+ <div>
484
+ <div class="flex justify-between text-sm mb-1">
485
+ <span>Description</span>
486
+ <span>78%</span>
487
+ </div>
488
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
489
+ <div class="bg-accent-yellow h-2.5 rounded-full" style="width: 78%"></div>
490
+ </div>
491
+ </div>
492
+ <div>
493
+ <div class="flex justify-between text-sm mb-1">
494
+ <span>Image URL</span>
495
+ <span>65%</span>
496
+ </div>
497
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
498
+ <div class="bg-accent-orange h-2.5 rounded-full" style="width: 65%"></div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+
507
+ <!-- Right Pane -->
508
+ <div class="lg:w-5/12">
509
+ <!-- Plugins Panel -->
510
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-6">
511
+ <div class="bg-gradient-to-r from-accent-green to-accent-yellow p-4">
512
+ <h2 class="text-xl font-bold text-gray-900">Plugin Management</h2>
513
+ </div>
514
+ <div class="p-4">
515
+ <div class="mb-4">
516
+ <h3 class="font-bold mb-2">Recently Updated</h3>
517
+ <div class="space-y-3">
518
+ <div class="card-tilt bg-gray-750 p-3 rounded-lg border-l-4 border-accent-blue">
519
+ <div class="flex justify-between">
520
+ <span class="font-medium">Amazon Product Scraper</span>
521
+ <span class="text-xs bg-accent-blue text-white px-2 py-1 rounded">v2.1</span>
522
+ </div>
523
+ <div class="text-sm text-gray-400 mt-1">Updated 2 hours ago</div>
524
+ </div>
525
+ <div class="card-tilt bg-gray-750 p-3 rounded-lg border-l-4 border-accent-green">
526
+ <div class="flex justify-between">
527
+ <span class="font-medium">Twitter Profile Parser</span>
528
+ <span class="text-xs bg-accent-green text-white px-2 py-1 rounded">v1.4</span>
529
+ </div>
530
+ <div class="text-sm text-gray-400 mt-1">Updated yesterday</div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="mb-4">
536
+ <h3 class="font-bold mb-2">Create New Plugin</h3>
537
+ <div class="flex space-x-3">
538
+ <button class="flex-1 bg-accent-blue hover:bg-accent-blue-dark text-white py-2 rounded-lg transition-colors">
539
+ From Template
540
+ </button>
541
+ <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg transition-colors">
542
+ Custom Build
543
+ </button>
544
+ </div>
545
+ </div>
546
+
547
+ <div>
548
+ <h3 class="font-bold mb-2">Validation Status</h3>
549
+ <div class="bg-gray-750 rounded-lg p-4">
550
+ <div class="flex items-center mb-3">
551
+ <div class="w-8 h-8 rounded-full bg-accent-green bg-opacity-20 flex items-center justify-center mr-3">
552
+ <i class="fas fa-check text-accent-green"></i>
553
+ </div>
554
+ <div>
555
+ <div class="font-medium">Syntax Check</div>
556
+ <div class="text-sm text-gray-400">No errors found</div>
557
+ </div>
558
+ </div>
559
+ <div class="flex items-center mb-3">
560
+ <div class="w-8 h-8 rounded-full bg-accent-green bg-opacity-20 flex items-center justify-center mr-3">
561
+ <i class="fas fa-check text-accent-green"></i>
562
+ </div>
563
+ <div>
564
+ <div class="font-medium">Field Mapping</div>
565
+ <div class="text-sm text-gray-400">All fields validated</div>
566
+ </div>
567
+ </div>
568
+ <div class="flex items-center">
569
+ <div class="w-8 h-8 rounded-full bg-accent-orange bg-opacity-20 flex items-center justify-center mr-3">
570
+ <i class="fas fa-exclamation-triangle text-accent-orange"></i>
571
+ </div>
572
+ <div>
573
+ <div class="font-medium">Pagination Rules</div>
574
+ <div class="text-sm text-gray-400">Needs review</div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- System Health -->
583
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
584
+ <div class="bg-gradient-to-r from-accent-orange to-accent-pink p-4">
585
+ <h2 class="text-xl font-bold text-white">System Health</h2>
586
+ </div>
587
+ <div class="p-4">
588
+ <div class="grid grid-cols-2 gap-4 mb-4">
589
+ <div class="bg-gray-750 p-4 rounded-lg">
590
+ <div class="flex items-center mb-2">
591
+ <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div>
592
+ <span class="font-medium">Proxy Pool</span>
593
+ </div>
594
+ <div class="text-2xl font-bold text-accent-green">98%</div>
595
+ <div class="text-sm text-gray-400">Active: 248/250</div>
596
+ </div>
597
+ <div class="bg-gray-750 p-4 rounded-lg">
598
+ <div class="flex items-center mb-2">
599
+ <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div>
600
+ <span class="font-medium">API Nodes</span>
601
+ </div>
602
+ <div class="text-2xl font-bold text-accent-green">100%</div>
603
+ <div class="text-sm text-gray-400">All systems operational</div>
604
+ </div>
605
+ <div class="bg-gray-750 p-4 rounded-lg">
606
+ <div class="flex items-center mb-2">
607
+ <div class="w-3 h-3 rounded-full bg-accent-yellow mr-2"></div>
608
+ <span class="font-medium">Database</span>
609
+ </div>
610
+ <div class="text-2xl font-bold text-accent-yellow">87%</div>
611
+ <div class="text-sm text-gray-400">Load: 4.2/5.0</div>
612
+ </div>
613
+ <div class="bg-gray-750 p-4 rounded-lg">
614
+ <div class="flex items-center mb-2">
615
+ <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div>
616
+ <span class="font-medium">Storage</span>
617
+ </div>
618
+ <div class="text-2xl font-bold text-accent-green">64%</div>
619
+ <div class="text-sm text-gray-400">4.2TB/6.5TB used</div>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="bg-gray-750 rounded-lg p-4">
624
+ <h3 class="font-bold mb-3">Recent Alerts</h3>
625
+ <div class="space-y-3">
626
+ <div class="flex">
627
+ <div class="w-2 bg-accent-yellow mr-3 rounded"></div>
628
+ <div>
629
+ <div class="font-medium">High DB Load</div>
630
+ <div class="text-sm text-gray-400">Database load exceeded 85% at 14:32</div>
631
+ </div>
632
+ </div>
633
+ <div class="flex">
634
+ <div class="w-2 bg-accent-orange mr-3 rounded"></div>
635
+ <div>
636
+ <div class="font-medium">Proxy Failure</div>
637
+ <div class="text-sm text-gray-400">2 proxies marked as failed</div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <!-- Recent Activity -->
648
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
649
+ <div class="bg-gradient-to-r from-accent-blue to-accent-pink p-4">
650
+ <h2 class="text-xl font-bold text-white">Recent Activity</h2>
651
+ </div>
652
+ <div class="p-4">
653
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
654
+ <div class="card-tilt bg-gray-750 p-4 rounded-lg neon-green">
655
+ <div class="flex items-start">
656
+ <div class="bg-accent-green bg-opacity-20 p-2 rounded-full mr-3">
657
+ <i class="fas fa-check-circle text-accent-green"></i>
658
+ </div>
659
+ <div>
660
+ <div class="font-medium">Job Completed</div>
661
+ <div class="text-sm text-gray-400">E-commerce scrape finished successfully</div>
662
+ <div class="text-xs text-gray-500 mt-1">5 minutes ago</div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <div class="card-tilt bg-gray-750 p-4 rounded-lg neon-blue">
668
+ <div class="flex items-start">
669
+ <div class="bg-accent-blue bg-opacity-20 p-2 rounded-full mr-3">
670
+ <i class="fas fa-plus-circle text-accent-blue"></i>
671
+ </div>
672
+ <div>
673
+ <div class="font-medium">New Plugin Added</div>
674
+ <div class="text-sm text-gray-400">"Zillow Property Scraper" created</div>
675
+ <div class="text-xs text-gray-500 mt-1">1 hour ago</div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <div class="card-tilt bg-gray-750 p-4 rounded-lg neon-yellow">
681
+ <div class="flex items-start">
682
+ <div class="bg-accent-yellow bg-opacity-20 p-2 rounded-full mr-3">
683
+ <i class="fas fa-exclamation-triangle text-accent-yellow"></i>
684
+ </div>
685
+ <div>
686
+ <div class="font-medium">Data Anomaly</div>
687
+ <div class="text-sm text-gray-400">Unusual pattern detected in Twitter data</div>
688
+ <div class="text-xs text-gray-500 mt-1">2 hours ago</div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </main>
696
+ </div>
697
+ </div>
698
+
699
+ <script>
700
+ // Theme Toggle
701
+ const themeToggle = document.getElementById('themeToggle');
702
+ const htmlElement = document.documentElement;
703
+
704
+ // Check for saved theme preference or use OS preference
705
+ const savedTheme = localStorage.getItem('theme');
706
+ const osDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
707
+
708
+ if (savedTheme) {
709
+ htmlElement.classList.toggle('dark', savedTheme === 'dark');
710
+ } else {
711
+ htmlElement.classList.toggle('dark', osDark);
712
+ }
713
+
714
+ themeToggle.addEventListener('click', () => {
715
+ htmlElement.classList.toggle('dark');
716
+ const isDark = htmlElement.classList.contains('dark');
717
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
718
+ });
719
+
720
+ // Sidebar Toggle for Mobile
721
+ const sidebarToggle = document.getElementById('sidebarToggle');
722
+ const sidebar = document.getElementById('sidebar');
723
+
724
+ sidebarToggle.addEventListener('click', () => {
725
+ sidebar.classList.toggle('-translate-x-full');
726
+ });
727
+
728
+ // Card animations
729
+ document.querySelectorAll('.kpi-card').forEach(card => {
730
+ card.addEventListener('mouseenter', () => {
731
+ card.classList.add('shadow-lg');
732
+ });
733
+
734
+ card.addEventListener('mouseleave', () => {
735
+ card.classList.remove('shadow-lg');
736
+ });
737
+ });
738
+
739
+ // Simulate pulse effect on success
740
+ setTimeout(() => {
741
+ document.querySelector('.neon-green').classList.add('pulse-success');
742
+ }, 2000);
743
+ </script>
744
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cyrilsnare/data-tweakaz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
745
+ </html>