Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Access-Scrape | Operations Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'dark-bg': '#180E12', | |
| 'light-bg': '#DEDEDE', | |
| 'accent-blue': '#3F9BFF', | |
| 'accent-green': '#00D860', | |
| 'accent-yellow': '#FFFF00', | |
| 'accent-orange': '#FE3B03', | |
| 'accent-pink': '#FF00D9', | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'slide-in': 'slideIn 0.3s ease-out forwards', | |
| 'tilt': 'tilt 10s infinite linear' | |
| }, | |
| keyframes: { | |
| slideIn: { | |
| '0%': { transform: 'translateX(100%)', opacity: '0' }, | |
| '100%': { transform: 'translateX(0)', opacity: '1' } | |
| }, | |
| tilt: { | |
| '0%, 100%': { transform: 'rotate(-3deg)' }, | |
| '50%': { transform: 'rotate(3deg)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| transition: background-color 0.3s ease; | |
| } | |
| .mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .card-tilt { | |
| transform: rotate(-1deg); | |
| transition: transform 0.3s ease; | |
| } | |
| .card-tilt:hover { | |
| transform: rotate(1deg); | |
| } | |
| .neon-blue { | |
| box-shadow: 0 0 10px rgba(63, 155, 255, 0.7); | |
| } | |
| .neon-green { | |
| box-shadow: 0 0 10px rgba(0, 216, 96, 0.7); | |
| } | |
| .neon-yellow { | |
| box-shadow: 0 0 10px rgba(255, 255, 0, 0.7); | |
| } | |
| .neon-orange { | |
| box-shadow: 0 0 10px rgba(254, 59, 3, 0.7); | |
| } | |
| .neon-pink { | |
| box-shadow: 0 0 10px rgba(255, 0, 217, 0.7); | |
| } | |
| .pulse-success { | |
| animation: pulse-slow 2s infinite; | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, transparent, rgba(63, 155, 255, 0.1), transparent); | |
| } | |
| .kpi-card { | |
| transition: all 0.3s ease; | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .heatmap-cell { | |
| transition: transform 0.2s ease; | |
| } | |
| .heatmap-cell:hover { | |
| transform: scale(1.2); | |
| z-index: 10; | |
| } | |
| .data-grid-cell { | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .dark .data-grid-cell { | |
| border-bottom: 1px solid rgba(0,0,0,0.1); | |
| } | |
| .stat-badge { | |
| font-size: 0.7rem; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| } | |
| .slide-in-panel { | |
| animation: slideIn 0.4s forwards; | |
| } | |
| .rotate-3d { | |
| transform: perspective(1000px) rotateY(5deg) rotateX(5deg); | |
| } | |
| .grid-stack { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| .grid-stack { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light-bg dark:bg-dark-bg text-gray-800 dark:text-gray-200 transition-colors duration-300"> | |
| <!-- Theme Toggle --> | |
| <div class="fixed top-4 right-4 z-50"> | |
| <button id="themeToggle" class="bg-accent-blue text-white p-3 rounded-full shadow-lg hover:bg-accent-green transition-colors"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| </div> | |
| <!-- Main Layout --> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Top Bar --> | |
| <header class="bg-white dark:bg-gray-900 shadow-md py-3 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="sidebarToggle" class="mr-4 lg:hidden"> | |
| <i class="fas fa-bars text-xl text-accent-blue"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <div class="bg-accent-blue w-10 h-10 rounded-lg flex items-center justify-center mr-3"> | |
| <i class="fas fa-database text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-accent-blue">Access-<span class="text-accent-green">Scrape</span></h1> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <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"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="relative p-2"> | |
| <i class="fas fa-bell text-xl text-accent-yellow"></i> | |
| <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> | |
| </button> | |
| <div class="flex items-center"> | |
| <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> | |
| <span class="hidden md:block">Admin User</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <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"> | |
| <nav class="flex-1"> | |
| <ul class="space-y-2"> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg bg-accent-blue text-white"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700"> | |
| <i class="fas fa-tasks mr-3"></i> | |
| <span>Scrape Jobs</span> | |
| </a> | |
| </li> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700"> | |
| <i class="fas fa-plug mr-3"></i> | |
| <span>Plugins & Sources</span> | |
| </a> | |
| </li> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700"> | |
| <i class="fas fa-stream mr-3"></i> | |
| <span>Data Pipeline</span> | |
| </a> | |
| </li> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| <span>Analytics</span> | |
| </a> | |
| </li> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| <span>Logs & Alerts</span> | |
| </a> | |
| </li> | |
| <li class="sidebar-item"> | |
| <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-700"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Admin</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="mt-auto pt-4 border-t border-gray-700"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-400 text-sm">System Status</span> | |
| <span class="bg-accent-green text-white text-xs px-2 py-1 rounded">Operational</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div> | |
| <span class="text-sm text-gray-300">All systems normal</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-auto p-6"> | |
| <!-- KPI Header --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8"> | |
| <div class="kpi-card neon-green bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Success Rate</p> | |
| <h3 class="text-3xl font-bold text-accent-green mt-2">98.7%</h3> | |
| </div> | |
| <div class="bg-accent-green bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-check-circle text-accent-green text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Target: 95%</span> | |
| <span>+3.7%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-700 mt-1"> | |
| <div class="h-full bg-accent-green" style="width: 98.7%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="kpi-card neon-blue bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Avg Req/Sec</p> | |
| <h3 class="text-3xl font-bold text-accent-blue mt-2">42.3</h3> | |
| </div> | |
| <div class="bg-accent-blue bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-bolt text-accent-blue text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Target: 30</span> | |
| <span>+12.3</span> | |
| </div> | |
| <div class="progress-bar bg-gray-700 mt-1"> | |
| <div class="h-full bg-accent-blue" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="kpi-card neon-yellow bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Active Jobs</p> | |
| <h3 class="text-3xl font-bold text-accent-yellow mt-2">18</h3> | |
| </div> | |
| <div class="bg-accent-yellow bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-sync-alt text-accent-yellow text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Completed: 24</span> | |
| <span>Failed: 2</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="kpi-card neon-orange bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Error Rate</p> | |
| <h3 class="text-3xl font-bold text-accent-orange mt-2">1.3%</h3> | |
| </div> | |
| <div class="bg-accent-orange bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-exclamation-triangle text-accent-orange text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Target: <5%</span> | |
| <span>-3.7%</span> | |
| </div> | |
| <div class="progress-bar bg-gray-700 mt-1"> | |
| <div class="h-full bg-accent-orange" style="width: 1.3%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="kpi-card neon-pink bg-gradient-to-br from-gray-800 to-gray-900 p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-400">Data Volume</p> | |
| <h3 class="text-3xl font-bold text-accent-pink mt-2">4.2TB</h3> | |
| </div> | |
| <div class="bg-accent-pink bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-database text-accent-pink text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex justify-between text-sm text-gray-400"> | |
| <span>Daily: 120GB</span> | |
| <span>+14%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Panels --> | |
| <div class="flex flex-col lg:flex-row gap-6 mb-8"> | |
| <!-- Left Pane --> | |
| <div class="lg:w-7/12"> | |
| <!-- Jobs Panel --> | |
| <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-6"> | |
| <div class="bg-gradient-to-r from-accent-blue to-accent-green p-4"> | |
| <h2 class="text-xl font-bold text-white">Active Scrape Jobs</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-gray-400 text-sm"> | |
| <th class="pb-3">Job Name</th> | |
| <th class="pb-3">Source</th> | |
| <th class="pb-3">Progress</th> | |
| <th class="pb-3">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors"> | |
| <td class="py-3">E-commerce Product Scrape</td> | |
| <td class="py-3">amazon.com</td> | |
| <td class="py-3"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-green h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </td> | |
| <td class="py-3"> | |
| <span class="stat-badge bg-accent-green bg-opacity-20 text-accent-green">Running</span> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors"> | |
| <td class="py-3">Social Media Profiles</td> | |
| <td class="py-3">twitter.com</td> | |
| <td class="py-3"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-blue h-2.5 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </td> | |
| <td class="py-3"> | |
| <span class="stat-badge bg-accent-blue bg-opacity-20 text-accent-blue">Active</span> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors"> | |
| <td class="py-3">News Aggregation</td> | |
| <td class="py-3">nytimes.com</td> | |
| <td class="py-3"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-yellow h-2.5 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </td> | |
| <td class="py-3"> | |
| <span class="stat-badge bg-accent-yellow bg-opacity-20 text-accent-yellow">Starting</span> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-750 transition-colors"> | |
| <td class="py-3">Real Estate Listings</td> | |
| <td class="py-3">zillow.com</td> | |
| <td class="py-3"> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-orange h-2.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </td> | |
| <td class="py-3"> | |
| <span class="stat-badge bg-accent-orange bg-opacity-20 text-accent-orange">Finishing</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button class="bg-accent-blue hover:bg-accent-green text-white px-4 py-2 rounded-lg transition-colors"> | |
| View All Jobs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Pipeline --> | |
| <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gradient-to-r from-accent-pink to-accent-blue p-4"> | |
| <h2 class="text-xl font-bold text-white">Data Pipeline Overview</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex mb-4"> | |
| <button class="px-4 py-2 bg-accent-blue text-white rounded-l-lg">Raw</button> | |
| <button class="px-4 py-2 bg-gray-700 text-gray-300">Cleaned</button> | |
| <button class="px-4 py-2 bg-gray-700 text-gray-300 rounded-r-lg">Merged</button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div class="bg-gray-750 p-4 rounded-lg text-center"> | |
| <div class="text-2xl font-bold text-accent-pink">1.2M</div> | |
| <div class="text-gray-400 text-sm">Raw Records</div> | |
| </div> | |
| <div class="bg-gray-750 p-4 rounded-lg text-center"> | |
| <div class="text-2xl font-bold text-accent-green">980K</div> | |
| <div class="text-gray-400 text-sm">Cleaned</div> | |
| </div> | |
| <div class="bg-gray-750 p-4 rounded-lg text-center"> | |
| <div class="text-2xl font-bold text-accent-blue">850K</div> | |
| <div class="text-gray-400 text-sm">Merged</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-750 rounded-lg p-4"> | |
| <h3 class="font-bold mb-2">Field Completeness</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Product Name</span> | |
| <span>98%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-green h-2.5 rounded-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Price</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-green h-2.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Description</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-yellow h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Image URL</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-accent-orange h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Pane --> | |
| <div class="lg:w-5/12"> | |
| <!-- Plugins Panel --> | |
| <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden mb-6"> | |
| <div class="bg-gradient-to-r from-accent-green to-accent-yellow p-4"> | |
| <h2 class="text-xl font-bold text-gray-900">Plugin Management</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-bold mb-2">Recently Updated</h3> | |
| <div class="space-y-3"> | |
| <div class="card-tilt bg-gray-750 p-3 rounded-lg border-l-4 border-accent-blue"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Amazon Product Scraper</span> | |
| <span class="text-xs bg-accent-blue text-white px-2 py-1 rounded">v2.1</span> | |
| </div> | |
| <div class="text-sm text-gray-400 mt-1">Updated 2 hours ago</div> | |
| </div> | |
| <div class="card-tilt bg-gray-750 p-3 rounded-lg border-l-4 border-accent-green"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Twitter Profile Parser</span> | |
| <span class="text-xs bg-accent-green text-white px-2 py-1 rounded">v1.4</span> | |
| </div> | |
| <div class="text-sm text-gray-400 mt-1">Updated yesterday</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-bold mb-2">Create New Plugin</h3> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 bg-accent-blue hover:bg-accent-blue-dark text-white py-2 rounded-lg transition-colors"> | |
| From Template | |
| </button> | |
| <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg transition-colors"> | |
| Custom Build | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">Validation Status</h3> | |
| <div class="bg-gray-750 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-accent-green bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-accent-green"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Syntax Check</div> | |
| <div class="text-sm text-gray-400">No errors found</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-accent-green bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check text-accent-green"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Field Mapping</div> | |
| <div class="text-sm text-gray-400">All fields validated</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-accent-orange bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-exclamation-triangle text-accent-orange"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Pagination Rules</div> | |
| <div class="text-sm text-gray-400">Needs review</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Health --> | |
| <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gradient-to-r from-accent-orange to-accent-pink p-4"> | |
| <h2 class="text-xl font-bold text-white">System Health</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-gray-750 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div> | |
| <span class="font-medium">Proxy Pool</span> | |
| </div> | |
| <div class="text-2xl font-bold text-accent-green">98%</div> | |
| <div class="text-sm text-gray-400">Active: 248/250</div> | |
| </div> | |
| <div class="bg-gray-750 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div> | |
| <span class="font-medium">API Nodes</span> | |
| </div> | |
| <div class="text-2xl font-bold text-accent-green">100%</div> | |
| <div class="text-sm text-gray-400">All systems operational</div> | |
| </div> | |
| <div class="bg-gray-750 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-accent-yellow mr-2"></div> | |
| <span class="font-medium">Database</span> | |
| </div> | |
| <div class="text-2xl font-bold text-accent-yellow">87%</div> | |
| <div class="text-sm text-gray-400">Load: 4.2/5.0</div> | |
| </div> | |
| <div class="bg-gray-750 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-accent-green mr-2"></div> | |
| <span class="font-medium">Storage</span> | |
| </div> | |
| <div class="text-2xl font-bold text-accent-green">64%</div> | |
| <div class="text-sm text-gray-400">4.2TB/6.5TB used</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-750 rounded-lg p-4"> | |
| <h3 class="font-bold mb-3">Recent Alerts</h3> | |
| <div class="space-y-3"> | |
| <div class="flex"> | |
| <div class="w-2 bg-accent-yellow mr-3 rounded"></div> | |
| <div> | |
| <div class="font-medium">High DB Load</div> | |
| <div class="text-sm text-gray-400">Database load exceeded 85% at 14:32</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-2 bg-accent-orange mr-3 rounded"></div> | |
| <div> | |
| <div class="font-medium">Proxy Failure</div> | |
| <div class="text-sm text-gray-400">2 proxies marked as failed</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-gradient-to-r from-accent-blue to-accent-pink p-4"> | |
| <h2 class="text-xl font-bold text-white">Recent Activity</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="card-tilt bg-gray-750 p-4 rounded-lg neon-green"> | |
| <div class="flex items-start"> | |
| <div class="bg-accent-green bg-opacity-20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check-circle text-accent-green"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Job Completed</div> | |
| <div class="text-sm text-gray-400">E-commerce scrape finished successfully</div> | |
| <div class="text-xs text-gray-500 mt-1">5 minutes ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-tilt bg-gray-750 p-4 rounded-lg neon-blue"> | |
| <div class="flex items-start"> | |
| <div class="bg-accent-blue bg-opacity-20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-plus-circle text-accent-blue"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">New Plugin Added</div> | |
| <div class="text-sm text-gray-400">"Zillow Property Scraper" created</div> | |
| <div class="text-xs text-gray-500 mt-1">1 hour ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-tilt bg-gray-750 p-4 rounded-lg neon-yellow"> | |
| <div class="flex items-start"> | |
| <div class="bg-accent-yellow bg-opacity-20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation-triangle text-accent-yellow"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Data Anomaly</div> | |
| <div class="text-sm text-gray-400">Unusual pattern detected in Twitter data</div> | |
| <div class="text-xs text-gray-500 mt-1">2 hours ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const htmlElement = document.documentElement; | |
| // Check for saved theme preference or use OS preference | |
| const savedTheme = localStorage.getItem('theme'); | |
| const osDark = window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| if (savedTheme) { | |
| htmlElement.classList.toggle('dark', savedTheme === 'dark'); | |
| } else { | |
| htmlElement.classList.toggle('dark', osDark); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| htmlElement.classList.toggle('dark'); | |
| const isDark = htmlElement.classList.contains('dark'); | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| }); | |
| // Sidebar Toggle for Mobile | |
| const sidebarToggle = document.getElementById('sidebarToggle'); | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebarToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('-translate-x-full'); | |
| }); | |
| // Card animations | |
| document.querySelectorAll('.kpi-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.classList.add('shadow-lg'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.classList.remove('shadow-lg'); | |
| }); | |
| }); | |
| // Simulate pulse effect on success | |
| setTimeout(() => { | |
| document.querySelector('.neon-green').classList.add('pulse-success'); | |
| }, 2000); | |
| </script> | |
| <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> | |
| </html> |