Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ComicLab - Statistical Analysis Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| mono: ['IBM Plex Mono', 'monospace'], | |
| }, | |
| colors: { | |
| lab: { | |
| dark: '#121212', | |
| panel: '#1e1e1e', | |
| border: '#333333', | |
| accent: '#00ff88', | |
| highlight: '#0088ff', | |
| warning: '#ff6600', | |
| danger: '#ff0033' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #121212; | |
| color: #e0e0e0; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| .data-panel { | |
| border: 1px solid #333; | |
| background-color: #1e1e1e; | |
| } | |
| .data-header { | |
| border-bottom: 1px solid #333; | |
| background-color: #1a1a1a; | |
| } | |
| .data-table { | |
| font-size: 0.875rem; | |
| } | |
| .data-table th { | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.05em; | |
| } | |
| .data-table td, .data-table th { | |
| padding: 0.5rem 1rem; | |
| border-bottom: 1px solid #333333; | |
| } | |
| .data-value { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .positive-trend { | |
| color: #00ff88; | |
| } | |
| .negative-trend { | |
| color: #ff0033; | |
| } | |
| .neutral-trend { | |
| color: #0088ff; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .trend-icon { | |
| margin-right: 4px; | |
| } | |
| .section-divider { | |
| border: none; | |
| border-top: 1px solid #333; | |
| margin: 1.5rem 0; | |
| } | |
| .metric-card { | |
| background-color: #252525; | |
| border-left: 4px solid; | |
| padding: 0.75rem 1rem; | |
| } | |
| .metric-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| opacity: 0.7; | |
| } | |
| .metric-value { | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| margin: 0.25rem 0 0.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-lab-dark text-gray-300 font-mono"> | |
| <header class="border-b border-lab-border bg-lab-dark"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-lab-accent font-bold text-xl">COMIC</span> | |
| <span class="text-lab-highlight font-bold text-xl">LAB</span> | |
| <span class="text-xs px-2 py-1 bg-lab-panel rounded">v2.4.8</span> | |
| </div> | |
| <div class="text-xs text-gray-400"> | |
| <span class="mr-4">Last updated: <span class="text-gray-100">2023-11-15 14:37:24 UTC</span></span> | |
| <span>Data source: <span class="text-gray-100">primary_api/main</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- System Overview --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <span class="status-indicator bg-lab-accent"></span> | |
| <span>SYSTEM OVERVIEW</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="metric-card border-lab-accent"> | |
| <div class="metric-title">TOTAL COMICS</div> | |
| <div class="metric-value">2,845</div> | |
| <div class="text-xs flex items-center"> | |
| <span class="trend-icon">↗</span> | |
| <span class="positive-trend">+4.7% (7d)</span> | |
| </div> | |
| </div> | |
| <div class="metric-card border-lab-highlight"> | |
| <div class="metric-title">ACTIVE READERS</div> | |
| <div class="metric-value">854,291</div> | |
| <div class="text-xs flex items-center"> | |
| <span class="trend-icon">↗</span> | |
| <span class="positive-trend">+2.3% (7d)</span> | |
| </div> | |
| </div> | |
| <div class="metric-card border-yellow-500"> | |
| <div class="metric-title">DAILY READS</div> | |
| <div class="metric-value">1,284,092</div> | |
| <div class="text-xs flex items-center"> | |
| <span class="trend-icon">→</span> | |
| <span class="neutral-trend">+0.1% (7d)</span> | |
| </div> | |
| </div> | |
| <div class="metric-card border-lab-warning"> | |
| <div class="metric-title">USER ENGAGEMENT</div> | |
| <div class="metric-value">87.4%</div> | |
| <div class="text-xs flex items-center"> | |
| <span class="trend-icon">↘</span> | |
| <span class="negative-trend">-1.2% (7d)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-xs mb-6"> | |
| <div class="text-center"> | |
| <span class="block text-sm mb-1">Avg. Session Duration</span> | |
| <span class="data-value">7m 23s</span> | |
| </div> | |
| <div class="text-center"> | |
| <span class="block text-sm mb-1">Avg. Pages/Reader</span> | |
| <span class="data-value">12.7</span> | |
| </div> | |
| <div class="text-center"> | |
| <span class="block text-sm mb-1">New Titles/Day</span> | |
| <span class="data-value">4.7</span> | |
| </div> | |
| <div class="text-center"> | |
| <span class="block text-sm mb-1">API Response</span> | |
| <span class="data-value text-lab-accent">96ms</span> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Primary Rankings --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">TOP TITLES ANALYSIS</h2> | |
| <div class="data-panel rounded-lg mb-6"> | |
| <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-semibold">POPULARITY INDEX [∑(reads×rating×engagement)]</h3> | |
| <span class="text-xs bg-lab-panel px-2 py-1 rounded">filter: last 30d</span> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full data-table"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Rank</th> | |
| <th class="text-left">Title ID</th> | |
| <th class="text-left">Title</th> | |
| <th class="text-right">Popularity</th> | |
| <th class="text-right">Δ (7d)</th> | |
| <th class="text-right">Reads</th> | |
| <th class="text-right">Rating</th> | |
| <th class="text-right">Engagement</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-lab-border"> | |
| <tr> | |
| <td class="text-left">#1</td> | |
| <td class="text-left text-lab-highlight">CM-4231-OP</td> | |
| <td class="text-left">ONE PIECE - WANO KURI</td> | |
| <td class="text-right data-value">9,842,719</td> | |
| <td class="text-right positive-trend">+2.7%</td> | |
| <td class="text-right">8,723,456</td> | |
| <td class="text-right">4.83</td> | |
| <td class="text-right">93.2%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#2</td> | |
| <td class="text-left text-lab-highlight">CM-5532-SL</td> | |
| <td class="text-left">SOLO LEVELING: RANKER</td> | |
| <td class="text-right data-value">7,482,156</td> | |
| <td class="text-right positive-trend">+3.4%</td> | |
| <td class="text-right">5,215,678</td> | |
| <td class="text-right">4.91</td> | |
| <td class="text-right">95.7%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#3</td> | |
| <td class="text-left text-lab-highlight">CM-3311-TG</td> | |
| <td class="text-left">TOWER OF GOD - S3</td> | |
| <td class="text-right data-value">6,123,845</td> | |
| <td class="text-right positive-trend">+1.8%</td> | |
| <td class="text-right">4,327,891</td> | |
| <td class="text-right">4.72</td> | |
| <td class="text-right">89.4%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#4</td> | |
| <td class="text-left text-lab-highlight">CM-7221-TB</td> | |
| <td class="text-left">THE BEGINNING AFTER END</td> | |
| <td class="text-right data-value">5,831,402</td> | |
| <td class="text-right negative-trend">-0.9%</td> | |
| <td class="text-right">3,982,456</td> | |
| <td class="text-right">4.68</td> | |
| <td class="text-right">92.1%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#5</td> | |
| <td class="text-left text-lab-highlight">CM-1123-OR</td> | |
| <td class="text-left">OMNISCIENT READER</td> | |
| <td class="text-right data-value">5,421,873</td> | |
| <td class="text-right positive-trend">+5.3%</td> | |
| <td class="text-right">3,765,432</td> | |
| <td class="text-right">4.78</td> | |
| <td class="text-right">94.5%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="data-panel rounded-lg"> | |
| <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-semibold">READER GROWTH RATE (LAST 30D)</h3> | |
| <span class="text-xs bg-lab-panel px-2 py-1 rounded">new subscribers</span> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full data-table"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Rank</th> | |
| <th class="text-left">Title ID</th> | |
| <th class="text-left">Title</th> | |
| <th class="text-right">New Readers</th> | |
| <th class="text-right">Growth</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-lab-border"> | |
| <tr> | |
| <td class="text-left">#1</td> | |
| <td class="text-left text-lab-highlight">CM-5532-SL</td> | |
| <td class="text-left">SOLO LEVELING: RANKER</td> | |
| <td class="text-right data-value">124,567</td> | |
| <td class="text-right positive-trend">+17.2%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#2</td> | |
| <td class="text-left text-lab-highlight">CM-1123-OR</td> | |
| <td class="text-left">OMNISCIENT READER</td> | |
| <td class="text-right data-value">98,721</td> | |
| <td class="text-right positive-trend">+12.4%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#3</td> | |
| <td class="text-left text-lab-highlight">CM-4412-SS</td> | |
| <td class="text-left">SSS-CLASS SUICIDE</td> | |
| <td class="text-right data-value">87,456</td> | |
| <td class="text-right positive-trend">+24.7%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg"> | |
| <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-semibold">NEGATIVE ENGAGEMENT (LAST 30D)</h3> | |
| <span class="text-xs bg-lab-warning px-2 py-1 rounded">dropoff risk</span> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full data-table"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Rank</th> | |
| <th class="text-left">Title ID</th> | |
| <th class="text-left">Title</th> | |
| <th class="text-right">Negative %</th> | |
| <th class="text-right">Churn Risk</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-lab-border"> | |
| <tr> | |
| <td class="text-left">#1</td> | |
| <td class="text-left text-lab-highlight">CM-8874-BH</td> | |
| <td class="text-left">BAD HERO</td> | |
| <td class="text-right data-value negative-trend">43.2%</td> | |
| <td class="text-right data-value negative-trend">High</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#2</td> | |
| <td class="text-left text-lab-highlight">CM-1128-FK</td> | |
| <td class="text-left">FLOP KNIGHT</td> | |
| <td class="text-right data-value negative-trend">38.7%</td> | |
| <td class="text-right data-value negative-trend">High</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">#3</td> | |
| <td class="text-left text-lab-highlight">CM-5521-MQ</td> | |
| <td class="text-left">MOCK QUEST</td> | |
| <td class="text-right data-value negative-trend">32.1%</td> | |
| <td class="text-right data-value">Medium</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Engagement Metrics --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">ENGAGEMENT METRICS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="data-panel rounded-lg"> | |
| <div class="data-header px-4 py-3 rounded-t-lg"> | |
| <h3 class="font-semibold">COMMENT ACTIVITY</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="text-sm mb-1 flex justify-between"> | |
| <span>Avg. Comments/Title</span> | |
| <span class="data-value">847</span> | |
| </div> | |
| <div class="h-1 bg-lab-border rounded-full"> | |
| <div class="h-1 bg-lab-highlight rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-sm mb-1 flex justify-between"> | |
| <span>Most Discussed Title</span> | |
| <span class="data-value text-lab-highlight">CM-4231-OP</span> | |
| </div> | |
| <div class="h-1 bg-lab-border rounded-full"> | |
| <div class="h-1 bg-lab-accent rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Emotion Analysis (Pos/Neg):</span> | |
| <span>78.2% / 21.8%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Avg. Reply Depth:</span> | |
| <span>2.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg"> | |
| <div class="data-header px-4 py-3 rounded-t-lg"> | |
| <h3 class="font-semibold">SOCIAL SHARING</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="text-sm mb-1 flex justify-between"> | |
| <span>Avg. Shares/Title</span> | |
| <span class="data-value">324</span> | |
| </div> | |
| <div class="h-1 bg-lab-border rounded-full"> | |
| <div class="h-1 bg-lab-accent rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-sm mb-1 flex justify-between"> | |
| <span>Most Shared Title</span> | |
| <span class="data-value text-lab-highlight">CM-5532-SL</span> | |
| </div> | |
| <div class="h-1 bg-lab-border rounded-full"> | |
| <div class="h-1 bg-lab-highlight rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs grid grid-cols-3 gap-2"> | |
| <div> | |
| <div class="mb-1">Twitter:</div> | |
| <div class="data-value">62%</div> | |
| </div> | |
| <div> | |
| <div class="mb-1">Discord:</div> | |
| <div class="data-value">23%</div> | |
| </div> | |
| <div> | |
| <div class="mb-1">Other:</div> | |
| <div class="data-value">15%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg"> | |
| <div class="data-header px-4 py-3 rounded-t-lg"> | |
| <h3 class="font-semibold">READING PATTERNS</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="text-sm mb-1 flex justify-between"> | |
| <span>Avg. Reading Time</span> | |
| <span class="data-value">8m 17s</span> | |
| </div> | |
| <div class="h-1 bg-lab-border rounded-full"> | |
| <div class="h-1 bg-lab-highlight rounded-full" style="width: 55%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="text-sm mb-1 flex justify-between"> | |
| <span>Peak Hours</span> | |
| <span class="data-value">19:00-22:00</span> | |
| </div> | |
| <div class="h-1 bg-lab-border rounded-full"> | |
| <div class="h-1 bg-lab-accent rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Binge Readers:</span> | |
| <span>34.2%</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Weekly Readers:</span> | |
| <span>61.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg"> | |
| <div class="data-header px-4 py-3 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-semibold">GENRE PERFORMANCE ANALYSIS</h3> | |
| <span class="text-xs bg-lab-panel px-2 py-1 rounded">reads/engagement</span> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full data-table"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Genre</th> | |
| <th class="text-right">Total Titles</th> | |
| <th class="text-right">Avg. Reads</th> | |
| <th class="text-right">Engagement</th> | |
| <th class="text-right">Completion</th> | |
| <th class="text-right">New Titles/Day</th> | |
| <th class="text-right">Rating</th> | |
| <th class="text-right">Health</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-lab-border"> | |
| <tr> | |
| <td class="text-left">Action</td> | |
| <td class="text-right">782</td> | |
| <td class="text-right data-value">342,156</td> | |
| <td class="text-right">89.2%</td> | |
| <td class="text-right positive-trend">92.1%</td> | |
| <td class="text-right">1.7</td> | |
| <td class="text-right">4.63</td> | |
| <td class="text-right positive-trend">Excellent</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Fantasy</td> | |
| <td class="text-right">521</td> | |
| <td class="text-right data-value">287,432</td> | |
| <td class="text-right">87.4%</td> | |
| <td class="text-right positive-trend">90.3%</td> | |
| <td class="text-right">1.2</td> | |
| <td class="text-right">4.57</td> | |
| <td class="text-right positive-trend">Good</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Romance</td> | |
| <td class="text-right">387</td> | |
| <td class="text-right data-value">154,789</td> | |
| <td class="text-right">84.1%</td> | |
| <td class="text-right positive-trend">88.9%</td> | |
| <td class="text-right">0.8</td> | |
| <td class="text-right">4.42</td> | |
| <td class="text-right positive-trend">Good</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Horror</td> | |
| <td class="text-right">143</td> | |
| <td class="text-right data-value">98,765</td> | |
| <td class="text-right">81.3%</td> | |
| <td class="text-right negative-trend">79.2%</td> | |
| <td class="text-right">0.3</td> | |
| <td class="text-right">4.21</td> | |
| <td class="text-right negative-trend">Caution</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="border-t border-lab-border py-4 mt-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400"> | |
| <div class="mb-2 md:mb-0"> | |
| <span class="mr-4">COMICLAB v2.4.8</span> | |
| <span>DATA API v1.3.2</span> | |
| </div> | |
| <div> | |
| <span class="mr-4">Last scan: 2023-11-15T14:37:24Z</span> | |
| <span>Next update: 2023-11-15T15:37:24Z</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <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> | |
| </html> |