Hugging Face's logo

Spaces:
nmtalhp
/
comic-datat
Running

App Files Community
2
nmtalhp commited on
Commit
8e357c5
·
verified ·
1 Parent(s): 994c89a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +571 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Comic Datat
3
- emoji: 📊
4
- colorFrom: yellow
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: comic-datat
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,571 @@
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>ComicLab - Statistical Analysis Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ fontFamily: {
13
+ mono: ['IBM Plex Mono', 'monospace'],
14
+ },
15
+ colors: {
16
+ lab: {
17
+ dark: '#121212',
18
+ panel: '#1e1e1e',
19
+ border: '#333333',
20
+ accent: '#00ff88',
21
+ highlight: '#0088ff',
22
+ warning: '#ff6600',
23
+ danger: '#ff0033'
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ body {
32
+ background-color: #121212;
33
+ color: #e0e0e0;
34
+ font-family: 'IBM Plex Mono', monospace;
35
+ }
36
+ .data-panel {
37
+ border: 1px solid #333;
38
+ background-color: #1e1e1e;
39
+ }
40
+ .data-header {
41
+ border-bottom: 1px solid #333;
42
+ background-color: #1a1a1a;
43
+ }
44
+ .data-table {
45
+ font-size: 0.875rem;
46
+ }
47
+ .data-table th {
48
+ font-weight: 600;
49
+ text-transform: uppercase;
50
+ font-size: 0.75rem;
51
+ letter-spacing: 0.05em;
52
+ }
53
+ .data-table td, .data-table th {
54
+ padding: 0.5rem 1rem;
55
+ border-bottom: 1px solid #333333;
56
+ }
57
+ .data-value {
58
+ font-family: 'IBM Plex Mono', monospace;
59
+ font-weight: 600;
60
+ }
61
+ .positive-trend {
62
+ color: #00ff88;
63
+ }
64
+ .negative-trend {
65
+ color: #ff0033;
66
+ }
67
+ .neutral-trend {
68
+ color: #0088ff;
69
+ }
70
+ .status-indicator {
71
+ width: 10px;
72
+ height: 10px;
73
+ border-radius: 50%;
74
+ display: inline-block;
75
+ margin-right: 6px;
76
+ }
77
+ .trend-icon {
78
+ margin-right: 4px;
79
+ }
80
+ .section-divider {
81
+ border: none;
82
+ border-top: 1px solid #333;
83
+ margin: 1.5rem 0;
84
+ }
85
+ .metric-card {
86
+ background-color: #252525;
87
+ border-left: 4px solid;
88
+ padding: 0.75rem 1rem;
89
+ }
90
+ .metric-title {
91
+ font-size: 0.75rem;
92
+ text-transform: uppercase;
93
+ letter-spacing: 0.05em;
94
+ opacity: 0.7;
95
+ }
96
+ .metric-value {
97
+ font-size: 1.5rem;
98
+ line-height: 1;
99
+ margin: 0.25rem 0 0.5rem;
100
+ }
101
+ </style>
102
+ </head>
103
+ <body class="bg-lab-dark text-gray-300 font-mono">
104
+ <header class="border-b border-lab-border bg-lab-dark">
105
+ <div class="container mx-auto px-4 py-3">
106
+ <div class="flex items-center justify-between">
107
+ <div class="flex items-center space-x-2">
108
+ <span class="text-lab-accent font-bold text-xl">COMIC</span>
109
+ <span class="text-lab-highlight font-bold text-xl">LAB</span>
110
+ <span class="text-xs px-2 py-1 bg-lab-panel rounded">v2.4.8</span>
111
+ </div>
112
+ <div class="text-xs text-gray-400">
113
+ <span class="mr-4">Last updated: <span class="text-gray-100">2023-11-15 14:37:24 UTC</span></span>
114
+ <span>Data source: <span class="text-gray-100">primary_api/main</span></span>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </header>
119
+
120
+ <main class="container mx-auto px-4 py-6">
121
+ <!-- System Overview -->
122
+ <section class="mb-8">
123
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
124
+ <span class="status-indicator bg-lab-accent"></span>
125
+ <span>SYSTEM OVERVIEW</span>
126
+ </h2>
127
+
128
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
129
+ <div class="metric-card border-lab-accent">
130
+ <div class="metric-title">TOTAL COMICS</div>
131
+ <div class="metric-value">2,845</div>
132
+ <div class="text-xs flex items-center">
133
+ <span class="trend-icon">↗</span>
134
+ <span class="positive-trend">+4.7% (7d)</span>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="metric-card border-lab-highlight">
139
+ <div class="metric-title">ACTIVE READERS</div>
140
+ <div class="metric-value">854,291</div>
141
+ <div class="text-xs flex items-center">
142
+ <span class="trend-icon">↗</span>
143
+ <span class="positive-trend">+2.3% (7d)</span>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="metric-card border-yellow-500">
148
+ <div class="metric-title">DAILY READS</div>
149
+ <div class="metric-value">1,284,092</div>
150
+ <div class="text-xs flex items-center">
151
+ <span class="trend-icon">→</span>
152
+ <span class="neutral-trend">+0.1% (7d)</span>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="metric-card border-lab-warning">
157
+ <div class="metric-title">USER ENGAGEMENT</div>
158
+ <div class="metric-value">87.4%</div>
159
+ <div class="text-xs flex items-center">
160
+ <span class="trend-icon">↘</span>
161
+ <span class="negative-trend">-1.2% (7d)</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-xs mb-6">
167
+ <div class="text-center">
168
+ <span class="block text-sm mb-1">Avg. Session Duration</span>
169
+ <span class="data-value">7m 23s</span>
170
+ </div>
171
+ <div class="text-center">
172
+ <span class="block text-sm mb-1">Avg. Pages/Reader</span>
173
+ <span class="data-value">12.7</span>
174
+ </div>
175
+ <div class="text-center">
176
+ <span class="block text-sm mb-1">New Titles/Day</span>
177
+ <span class="data-value">4.7</span>
178
+ </div>
179
+ <div class="text-center">
180
+ <span class="block text-sm mb-1">API Response</span>
181
+ <span class="data-value text-lab-accent">96ms</span>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <hr class="section-divider">
187
+
188
+ <!-- Primary Rankings -->
189
+ <section class="mb-8">
190
+ <h2 class="text-xl font-semibold mb-4">TOP TITLES ANALYSIS</h2>
191
+
192
+ <div class="data-panel rounded-lg mb-6">
193
+ <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
194
+ <h3 class="font-semibold">POPULARITY INDEX [∑(reads×rating×engagement)]</h3>
195
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">filter: last 30d</span>
196
+ </div>
197
+
198
+ <div class="overflow-x-auto">
199
+ <table class="w-full data-table">
200
+ <thead>
201
+ <tr>
202
+ <th class="text-left">Rank</th>
203
+ <th class="text-left">Title ID</th>
204
+ <th class="text-left">Title</th>
205
+ <th class="text-right">Popularity</th>
206
+ <th class="text-right">Δ (7d)</th>
207
+ <th class="text-right">Reads</th>
208
+ <th class="text-right">Rating</th>
209
+ <th class="text-right">Engagement</th>
210
+ </tr>
211
+ </thead>
212
+ <tbody class="divide-y divide-lab-border">
213
+ <tr>
214
+ <td class="text-left">#1</td>
215
+ <td class="text-left text-lab-highlight">CM-4231-OP</td>
216
+ <td class="text-left">ONE PIECE - WANO KURI</td>
217
+ <td class="text-right data-value">9,842,719</td>
218
+ <td class="text-right positive-trend">+2.7%</td>
219
+ <td class="text-right">8,723,456</td>
220
+ <td class="text-right">4.83</td>
221
+ <td class="text-right">93.2%</td>
222
+ </tr>
223
+ <tr>
224
+ <td class="text-left">#2</td>
225
+ <td class="text-left text-lab-highlight">CM-5532-SL</td>
226
+ <td class="text-left">SOLO LEVELING: RANKER</td>
227
+ <td class="text-right data-value">7,482,156</td>
228
+ <td class="text-right positive-trend">+3.4%</td>
229
+ <td class="text-right">5,215,678</td>
230
+ <td class="text-right">4.91</td>
231
+ <td class="text-right">95.7%</td>
232
+ </tr>
233
+ <tr>
234
+ <td class="text-left">#3</td>
235
+ <td class="text-left text-lab-highlight">CM-3311-TG</td>
236
+ <td class="text-left">TOWER OF GOD - S3</td>
237
+ <td class="text-right data-value">6,123,845</td>
238
+ <td class="text-right positive-trend">+1.8%</td>
239
+ <td class="text-right">4,327,891</td>
240
+ <td class="text-right">4.72</td>
241
+ <td class="text-right">89.4%</td>
242
+ </tr>
243
+ <tr>
244
+ <td class="text-left">#4</td>
245
+ <td class="text-left text-lab-highlight">CM-7221-TB</td>
246
+ <td class="text-left">THE BEGINNING AFTER END</td>
247
+ <td class="text-right data-value">5,831,402</td>
248
+ <td class="text-right negative-trend">-0.9%</td>
249
+ <td class="text-right">3,982,456</td>
250
+ <td class="text-right">4.68</td>
251
+ <td class="text-right">92.1%</td>
252
+ </tr>
253
+ <tr>
254
+ <td class="text-left">#5</td>
255
+ <td class="text-left text-lab-highlight">CM-1123-OR</td>
256
+ <td class="text-left">OMNISCIENT READER</td>
257
+ <td class="text-right data-value">5,421,873</td>
258
+ <td class="text-right positive-trend">+5.3%</td>
259
+ <td class="text-right">3,765,432</td>
260
+ <td class="text-right">4.78</td>
261
+ <td class="text-right">94.5%</td>
262
+ </tr>
263
+ </tbody>
264
+ </table>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
269
+ <div class="data-panel rounded-lg">
270
+ <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
271
+ <h3 class="font-semibold">READER GROWTH RATE (LAST 30D)</h3>
272
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">new subscribers</span>
273
+ </div>
274
+
275
+ <div class="overflow-x-auto">
276
+ <table class="w-full data-table">
277
+ <thead>
278
+ <tr>
279
+ <th class="text-left">Rank</th>
280
+ <th class="text-left">Title ID</th>
281
+ <th class="text-left">Title</th>
282
+ <th class="text-right">New Readers</th>
283
+ <th class="text-right">Growth</th>
284
+ </tr>
285
+ </thead>
286
+ <tbody class="divide-y divide-lab-border">
287
+ <tr>
288
+ <td class="text-left">#1</td>
289
+ <td class="text-left text-lab-highlight">CM-5532-SL</td>
290
+ <td class="text-left">SOLO LEVELING: RANKER</td>
291
+ <td class="text-right data-value">124,567</td>
292
+ <td class="text-right positive-trend">+17.2%</td>
293
+ </tr>
294
+ <tr>
295
+ <td class="text-left">#2</td>
296
+ <td class="text-left text-lab-highlight">CM-1123-OR</td>
297
+ <td class="text-left">OMNISCIENT READER</td>
298
+ <td class="text-right data-value">98,721</td>
299
+ <td class="text-right positive-trend">+12.4%</td>
300
+ </tr>
301
+ <tr>
302
+ <td class="text-left">#3</td>
303
+ <td class="text-left text-lab-highlight">CM-4412-SS</td>
304
+ <td class="text-left">SSS-CLASS SUICIDE</td>
305
+ <td class="text-right data-value">87,456</td>
306
+ <td class="text-right positive-trend">+24.7%</td>
307
+ </tr>
308
+ </tbody>
309
+ </table>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="data-panel rounded-lg">
314
+ <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
315
+ <h3 class="font-semibold">NEGATIVE ENGAGEMENT (LAST 30D)</h3>
316
+ <span class="text-xs bg-lab-warning px-2 py-1 rounded">dropoff risk</span>
317
+ </div>
318
+
319
+ <div class="overflow-x-auto">
320
+ <table class="w-full data-table">
321
+ <thead>
322
+ <tr>
323
+ <th class="text-left">Rank</th>
324
+ <th class="text-left">Title ID</th>
325
+ <th class="text-left">Title</th>
326
+ <th class="text-right">Negative %</th>
327
+ <th class="text-right">Churn Risk</th>
328
+ </tr>
329
+ </thead>
330
+ <tbody class="divide-y divide-lab-border">
331
+ <tr>
332
+ <td class="text-left">#1</td>
333
+ <td class="text-left text-lab-highlight">CM-8874-BH</td>
334
+ <td class="text-left">BAD HERO</td>
335
+ <td class="text-right data-value negative-trend">43.2%</td>
336
+ <td class="text-right data-value negative-trend">High</td>
337
+ </tr>
338
+ <tr>
339
+ <td class="text-left">#2</td>
340
+ <td class="text-left text-lab-highlight">CM-1128-FK</td>
341
+ <td class="text-left">FLOP KNIGHT</td>
342
+ <td class="text-right data-value negative-trend">38.7%</td>
343
+ <td class="text-right data-value negative-trend">High</td>
344
+ </tr>
345
+ <tr>
346
+ <td class="text-left">#3</td>
347
+ <td class="text-left text-lab-highlight">CM-5521-MQ</td>
348
+ <td class="text-left">MOCK QUEST</td>
349
+ <td class="text-right data-value negative-trend">32.1%</td>
350
+ <td class="text-right data-value">Medium</td>
351
+ </tr>
352
+ </tbody>
353
+ </table>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <hr class="section-divider">
360
+
361
+ <!-- Engagement Metrics -->
362
+ <section class="mb-8">
363
+ <h2 class="text-xl font-semibold mb-4">ENGAGEMENT METRICS</h2>
364
+
365
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
366
+ <div class="data-panel rounded-lg">
367
+ <div class="data-header px-4 py-3 rounded-t-lg">
368
+ <h3 class="font-semibold">COMMENT ACTIVITY</h3>
369
+ </div>
370
+
371
+ <div class="p-4">
372
+ <div class="mb-3">
373
+ <div class="text-sm mb-1 flex justify-between">
374
+ <span>Avg. Comments/Title</span>
375
+ <span class="data-value">847</span>
376
+ </div>
377
+ <div class="h-1 bg-lab-border rounded-full">
378
+ <div class="h-1 bg-lab-highlight rounded-full" style="width: 65%"></div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="mb-3">
383
+ <div class="text-sm mb-1 flex justify-between">
384
+ <span>Most Discussed Title</span>
385
+ <span class="data-value text-lab-highlight">CM-4231-OP</span>
386
+ </div>
387
+ <div class="h-1 bg-lab-border rounded-full">
388
+ <div class="h-1 bg-lab-accent rounded-full" style="width: 92%"></div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="text-xs">
393
+ <div class="flex justify-between mb-1">
394
+ <span>Emotion Analysis (Pos/Neg):</span>
395
+ <span>78.2% / 21.8%</span>
396
+ </div>
397
+ <div class="flex justify-between">
398
+ <span>Avg. Reply Depth:</span>
399
+ <span>2.7</span>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="data-panel rounded-lg">
406
+ <div class="data-header px-4 py-3 rounded-t-lg">
407
+ <h3 class="font-semibold">SOCIAL SHARING</h3>
408
+ </div>
409
+
410
+ <div class="p-4">
411
+ <div class="mb-3">
412
+ <div class="text-sm mb-1 flex justify-between">
413
+ <span>Avg. Shares/Title</span>
414
+ <span class="data-value">324</span>
415
+ </div>
416
+ <div class="h-1 bg-lab-border rounded-full">
417
+ <div class="h-1 bg-lab-accent rounded-full" style="width: 45%"></div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="mb-3">
422
+ <div class="text-sm mb-1 flex justify-between">
423
+ <span>Most Shared Title</span>
424
+ <span class="data-value text-lab-highlight">CM-5532-SL</span>
425
+ </div>
426
+ <div class="h-1 bg-lab-border rounded-full">
427
+ <div class="h-1 bg-lab-highlight rounded-full" style="width: 88%"></div>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="text-xs grid grid-cols-3 gap-2">
432
+ <div>
433
+ <div class="mb-1">Twitter:</div>
434
+ <div class="data-value">62%</div>
435
+ </div>
436
+ <div>
437
+ <div class="mb-1">Discord:</div>
438
+ <div class="data-value">23%</div>
439
+ </div>
440
+ <div>
441
+ <div class="mb-1">Other:</div>
442
+ <div class="data-value">15%</div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="data-panel rounded-lg">
449
+ <div class="data-header px-4 py-3 rounded-t-lg">
450
+ <h3 class="font-semibold">READING PATTERNS</h3>
451
+ </div>
452
+
453
+ <div class="p-4">
454
+ <div class="mb-3">
455
+ <div class="text-sm mb-1 flex justify-between">
456
+ <span>Avg. Reading Time</span>
457
+ <span class="data-value">8m 17s</span>
458
+ </div>
459
+ <div class="h-1 bg-lab-border rounded-full">
460
+ <div class="h-1 bg-lab-highlight rounded-full" style="width: 55%"></div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="mb-3">
465
+ <div class="text-sm mb-1 flex justify-between">
466
+ <span>Peak Hours</span>
467
+ <span class="data-value">19:00-22:00</span>
468
+ </div>
469
+ <div class="h-1 bg-lab-border rounded-full">
470
+ <div class="h-1 bg-lab-accent rounded-full" style="width: 78%"></div>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="text-xs">
475
+ <div class="flex justify-between mb-1">
476
+ <span>Binge Readers:</span>
477
+ <span>34.2%</span>
478
+ </div>
479
+ <div class="flex justify-between">
480
+ <span>Weekly Readers:</span>
481
+ <span>61.7%</span>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="data-panel rounded-lg">
489
+ <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center">
490
+ <h3 class="font-semibold">GENRE PERFORMANCE ANALYSIS</h3>
491
+ <span class="text-xs bg-lab-panel px-2 py-1 rounded">reads/engagement</span>
492
+ </div>
493
+
494
+ <div class="overflow-x-auto">
495
+ <table class="w-full data-table">
496
+ <thead>
497
+ <tr>
498
+ <th class="text-left">Genre</th>
499
+ <th class="text-right">Total Titles</th>
500
+ <th class="text-right">Avg. Reads</th>
501
+ <th class="text-right">Engagement</th>
502
+ <th class="text-right">Completion</th>
503
+ <th class="text-right">New Titles/Day</th>
504
+ <th class="text-right">Rating</th>
505
+ <th class="text-right">Health</th>
506
+ </tr>
507
+ </thead>
508
+ <tbody class="divide-y divide-lab-border">
509
+ <tr>
510
+ <td class="text-left">Action</td>
511
+ <td class="text-right">782</td>
512
+ <td class="text-right data-value">342,156</td>
513
+ <td class="text-right">89.2%</td>
514
+ <td class="text-right positive-trend">92.1%</td>
515
+ <td class="text-right">1.7</td>
516
+ <td class="text-right">4.63</td>
517
+ <td class="text-right positive-trend">Excellent</td>
518
+ </tr>
519
+ <tr>
520
+ <td class="text-left">Fantasy</td>
521
+ <td class="text-right">521</td>
522
+ <td class="text-right data-value">287,432</td>
523
+ <td class="text-right">87.4%</td>
524
+ <td class="text-right positive-trend">90.3%</td>
525
+ <td class="text-right">1.2</td>
526
+ <td class="text-right">4.57</td>
527
+ <td class="text-right positive-trend">Good</td>
528
+ </tr>
529
+ <tr>
530
+ <td class="text-left">Romance</td>
531
+ <td class="text-right">387</td>
532
+ <td class="text-right data-value">154,789</td>
533
+ <td class="text-right">84.1%</td>
534
+ <td class="text-right positive-trend">88.9%</td>
535
+ <td class="text-right">0.8</td>
536
+ <td class="text-right">4.42</td>
537
+ <td class="text-right positive-trend">Good</td>
538
+ </tr>
539
+ <tr>
540
+ <td class="text-left">Horror</td>
541
+ <td class="text-right">143</td>
542
+ <td class="text-right data-value">98,765</td>
543
+ <td class="text-right">81.3%</td>
544
+ <td class="text-right negative-trend">79.2%</td>
545
+ <td class="text-right">0.3</td>
546
+ <td class="text-right">4.21</td>
547
+ <td class="text-right negative-trend">Caution</td>
548
+ </tr>
549
+ </tbody>
550
+ </table>
551
+ </div>
552
+ </div>
553
+ </section>
554
+ </main>
555
+
556
+ <footer class="border-t border-lab-border py-4 mt-8">
557
+ <div class="container mx-auto px-4">
558
+ <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400">
559
+ <div class="mb-2 md:mb-0">
560
+ <span class="mr-4">COMICLAB v2.4.8</span>
561
+ <span>DATA API v1.3.2</span>
562
+ </div>
563
+ <div>
564
+ <span class="mr-4">Last scan: 2023-11-15T14:37:24Z</span>
565
+ <span>Next update: 2023-11-15T15:37:24Z</span>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </footer>
570
+ <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=nmtalhp/comic-datat" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
571
+ </html>