Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Antimal Farm</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: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .miner-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-icon { | |
| display: block; | |
| } | |
| .logo-icon { | |
| display: none; | |
| } | |
| .grid-stack-item { | |
| transition: all 0.3s ease; | |
| } | |
| .grid-stack-item:hover { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .apexcharts-tooltip { | |
| background: #1e293b ; | |
| border: 1px solid #334155 ; | |
| color: #f8fafc ; | |
| } | |
| .apexcharts-menu { | |
| background: #1e293b ; | |
| border: 1px solid #334155 ; | |
| } | |
| .apexcharts-menu-item:hover { | |
| background: #334155 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white dark:bg-dark-800 shadow-lg flex flex-col w-64"> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="logo-icon p-2"> | |
| <i class="fas fa-bitcoin text-2xl text-primary-600"></i> | |
| </div> | |
| <span class="logo-text text-xl font-bold text-primary-600">Antminer Admin</span> | |
| </div> | |
| <button id="sidebar-toggle" class="text-gray-500 dark:text-gray-400 hover:text-primary-600"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4"> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <i class="fas fa-server"></i> | |
| <span class="sidebar-text">Miners</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <i class="fas fa-chart-line"></i> | |
| <span class="sidebar-text">Statistics</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <i class="fas fa-cog"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <i class="fas fa-history"></i> | |
| <span class="sidebar-text">History</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <i class="fas fa-bell"></i> | |
| <span class="sidebar-text">Alerts</span> | |
| </a> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="px-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider sidebar-text">Groups</h3> | |
| <div class="mt-2 space-y-1"> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <div class="h-2 w-2 rounded-full bg-green-500"></div> | |
| <span class="sidebar-text">Main Farm</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <div class="h-2 w-2 rounded-full bg-yellow-500"></div> | |
| <span class="sidebar-text">Backup Farm</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"> | |
| <div class="h-2 w-2 rounded-full bg-red-500"></div> | |
| <span class="sidebar-text">Testing</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ui-avatars.com/api/?name=Admin&background=0ea5e9&color=fff" alt="User" class="w-10 h-10 rounded-full"> | |
| <div class="sidebar-text"> | |
| <p class="font-medium">Admin</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Super Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white dark:bg-dark-800 shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <h1 class="text-2xl font-bold">Miner Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search miners..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-primary-600"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-primary-600"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Total Miners</p> | |
| <h3 class="text-2xl font-bold">42</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-500"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>3 new miners</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Total Hashrate</p> | |
| <h3 class="text-2xl font-bold">1.42 PH/s</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-red-500"> | |
| <i class="fas fa-arrow-down mr-1"></i> | |
| <span>2.5% from yesterday</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Active Miners</p> | |
| <h3 class="text-2xl font-bold">38</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-500"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>2 more active</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Selected Miners</p> | |
| <h3 class="text-2xl font-bold"><span id="selected-count">0</span> selected</h3> | |
| <div class="text-sm mt-1 space-y-1"> | |
| <div class="flex items-center text-gray-500 dark:text-gray-400"> | |
| <span>Avg. Hashrate: </span> | |
| <span id="avg-hashrate" class="ml-1">0 TH/s</span> | |
| </div> | |
| <div class="flex items-center text-gray-500 dark:text-gray-400"> | |
| <span>Avg. Temp: </span> | |
| <span id="avg-temp" class="ml-1">0°C</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Miner Controls --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow mb-6"> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700"> | |
| <h2 class="text-lg font-semibold">Miner Controls</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex flex-wrap gap-4 mb-4"> | |
| <div class="w-full"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pool Configuration</label> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex items-center space-x-1"> | |
| <input type="radio" id="pool-1" name="pool-select" class="text-primary-600 focus:ring-primary-500" checked> | |
| <label for="pool-1" class="text-sm text-gray-700 dark:text-gray-300">Pool 1</label> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <input type="radio" id="pool-2" name="pool-select" class="text-primary-600 focus:ring-primary-500"> | |
| <label for="pool-2" class="text-sm text-gray-700 dark:text-gray-300">Pool 2</label> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <input type="radio" id="pool-3" name="pool-select" class="text-primary-600 focus:ring-primary-500"> | |
| <label for="pool-3" class="text-sm text-gray-700 dark:text-gray-300">Pool 3</label> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex gap-2"> | |
| <input type="text" value="stratum+tcp://btc.pool.com:3333" class="flex-1 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"> | |
| <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"> | |
| Update | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Mining Mode</label> | |
| <div class="flex gap-2"> | |
| <button class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-bolt mr-1"></i> Normal | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> LPM | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-rocket mr-1"></i> Enhanced LPM | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Start Mining | |
| </button> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center"> | |
| <i class="fas fa-pause mr-2"></i> Pause | |
| </button> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center"> | |
| <i class="fas fa-stop mr-2"></i> Stop | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Reboot | |
| </button> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Configure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Miners Table --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold">Miners List</h2> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <option>All Groups</option> | |
| <option>Main Farm</option> | |
| <option>Backup Farm</option> | |
| <option>Testing</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| <button class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Miner | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> | |
| <thead class="bg-gray-50 dark:bg-gray-700"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"> | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">IP Address</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Model</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hashrate</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Temp</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Uptime</th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white dark:bg-dark-800 divide-y divide-gray-200 dark:divide-gray-700"> | |
| <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer select-none" | |
| data-miner-id="001" | |
| onclick="toggleMinerSelection(event, this)"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700" | |
| onclick="event.stopPropagation()"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer S19 Pro</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #001</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.101</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">S19 Pro</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div> | |
| 110 TH/s | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">72°C</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3d 12h</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer S19j Pro</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #002</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.102</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">S19j Pro</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div> | |
| 104 TH/s | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">68°C</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2d 18h</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer S17+</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #003</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.103</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">S17+</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-2 rounded-full bg-yellow-500 mr-2"></div> | |
| 73 TH/s | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">81°C</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">Warning</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1d 5h</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer T19</div> | |
| <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #004</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.104</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">T19</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <div class="flex items-center"> | |
| <div class="h-2 w-2 rounded-full bg-red-500 mr-2"></div> | |
| 0 TH/s | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">Offline</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700 dark:text-gray-300"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">42</span> results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-primary-50 border-primary-500 text-primary-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 1 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 2 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 3 | |
| </a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> | |
| ... | |
| </span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 8 | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Miner Details Modal --> | |
| <div class="fixed inset-0 overflow-y-auto z-50 hidden" id="miner-modal"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white dark:bg-dark-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="bg-white dark:bg-dark-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 dark:bg-primary-900/30 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-server text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title"> | |
| Antminer S19 Pro Details | |
| </h3> | |
| <div class="mt-2"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300">General Information</h4> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">IP Address:</span> | |
| <span class="text-gray-700 dark:text-gray-300">192.168.1.101</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">MAC Address:</span> | |
| <span class="text-gray-700 dark:text-gray-300">00:1A:2B:3C:4D:5E</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Firmware:</span> | |
| <span class="text-gray-700 dark:text-gray-300">v2.1.8</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Uptime:</span> | |
| <span class="text-gray-700 dark:text-gray-300">3 days 12 hours</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300">Mining Status</h4> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Hashrate:</span> | |
| <span class="text-gray-700 dark:text-gray-300">110 TH/s</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Temperature:</span> | |
| <span class="text-gray-700 dark:text-gray-300">72°C</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Fan Speed:</span> | |
| <span class="text-gray-700 dark:text-gray-300">4200 RPM</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Power:</span> | |
| <span class="text-gray-700 dark:text-gray-300">3250W</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300">Pool Configuration</h4> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Pool 1:</span> | |
| <span class="text-gray-700 dark:text-gray-300">stratum+tcp://btc.pool.com:3333</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Pool 2:</span> | |
| <span class="text-gray-700 dark:text-gray-300">stratum+tcp://backup.pool.com:3333</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-500 dark:text-gray-400">Pool 3:</span> | |
| <span class="text-gray-700 dark:text-gray-300">stratum+tcp://test.pool.com:3333</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-700 dark:text-gray-300">Miner Controls</h4> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-play mr-1"></i> Start | |
| </button> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-pause mr-1"></i> Pause | |
| </button> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-stop mr-1"></i> Stop | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-sync-alt mr-1"></i> Reboot | |
| </button> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| <i class="fas fa-cog mr-1"></i> Configure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Miner selection state | |
| let selectedMiners = new Set(); | |
| let lastSelectedIndex = -1; | |
| // Toggle miner selection | |
| function toggleMinerSelection(event, row) { | |
| const checkbox = row.querySelector('input[type="checkbox"]'); | |
| const minerId = row.dataset.minerId; | |
| // Handle shift key for range selection | |
| if (event.shiftKey && lastSelectedIndex !== -1) { | |
| const rows = Array.from(document.querySelectorAll('tbody tr')); | |
| const currentIndex = rows.indexOf(row); | |
| const start = Math.min(lastSelectedIndex, currentIndex); | |
| const end = Math.max(lastSelectedIndex, currentIndex); | |
| for (let i = start; i <= end; i++) { | |
| const row = rows[i]; | |
| const id = row.dataset.minerId; | |
| selectedMiners.add(id); | |
| row.classList.add('bg-primary-50', 'dark:bg-primary-900/20'); | |
| row.querySelector('input[type="checkbox"]').checked = true; | |
| } | |
| } | |
| // Handle ctrl/cmd key for multi-selection | |
| else if (event.ctrlKey || event.metaKey) { | |
| if (selectedMiners.has(minerId)) { | |
| selectedMiners.delete(minerId); | |
| row.classList.remove('bg-primary-50', 'dark:bg-primary-900/20'); | |
| checkbox.checked = false; | |
| } else { | |
| selectedMiners.add(minerId); | |
| row.classList.add('bg-primary-50', 'dark:bg-primary-900/20'); | |
| checkbox.checked = true; | |
| } | |
| } | |
| // Regular click (single selection behavior) | |
| else { | |
| clearAllSelections(); | |
| if (!selectedMiners.has(minerId)) { | |
| selectedMiners.add(minerId); | |
| row.classList.add('bg-primary-50', 'dark:bg-primary-900/20'); | |
| checkbox.checked = true; | |
| } else { | |
| checkbox.checked = false; | |
| } | |
| } | |
| lastSelectedIndex = Array.from(document.querySelectorAll('tbody tr')).indexOf(row); | |
| updateSelectionStats(); | |
| } | |
| function clearAllSelections() { | |
| selectedMiners.clear(); | |
| document.querySelectorAll('tbody tr').forEach(row => { | |
| row.classList.remove('bg-primary-50', 'dark:bg-primary-900/20'); | |
| row.querySelector('input[type="checkbox"]').checked = false; | |
| }); | |
| } | |
| function updateSelectionStats() { | |
| const selectedRows = Array.from(document.querySelectorAll('tbody tr')) | |
| .filter(row => selectedMiners.has(row.dataset.minerId)); | |
| // Update selected count | |
| document.getElementById('selected-count').textContent = selectedMiners.size; | |
| // Calculate averages | |
| if (selectedMiners.size > 0) { | |
| let totalHashrate = 0; | |
| let totalTemp = 0; | |
| let activeCount = 0; | |
| selectedRows.forEach(row => { | |
| const hashrateText = row.querySelector('td:nth-child(5)').textContent; | |
| const tempText = row.querySelector('td:nth-child(6)').textContent; | |
| if (hashrateText.includes('TH/s')) { | |
| totalHashrate += parseFloat(hashrateText); | |
| activeCount++; | |
| } | |
| if (tempText.includes('°C')) { | |
| totalTemp += parseFloat(tempText); | |
| } | |
| }); | |
| const avgHashrate = activeCount > 0 ? (totalHashrate / activeCount).toFixed(1) : 0; | |
| const avgTemp = selectedMiners.size > 0 ? (totalTemp / selectedMiners.size).toFixed(0) : 0; | |
| document.getElementById('avg-hashrate').textContent = `${avgHashrate} TH/s`; | |
| document.getElementById('avg-temp').textContent = `${avgTemp}°C`; | |
| } else { | |
| document.getElementById('avg-hashrate').textContent = '0 TH/s'; | |
| document.getElementById('avg-temp').textContent = '0°C'; | |
| } | |
| } | |
| // Toggle sidebar | |
| document.getElementById('sidebar-toggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| }); | |
| // Miner modal toggle (example) | |
| document.querySelectorAll('[data-miner-details]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.getElementById('miner-modal').classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Close modal | |
| document.querySelectorAll('[data-modal-close]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.getElementById('miner-modal').classList.add('hidden'); | |
| }); | |
| }); | |
| // Simulate API calls for miner controls | |
| function sendMinerCommand(command, minerIds = []) { | |
| console.log(`Sending ${command} command to miners:`, minerIds); | |
| // In a real app, this would make an API call to your backend | |
| // which would then communicate with the Antminer API | |
| // Show a success notification | |
| alert(`Successfully sent ${command} command to selected miners`); | |
| } | |
| // Bind miner control buttons | |
| document.querySelectorAll('[data-miner-command]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const command = this.getAttribute('data-miner-command'); | |
| const selectedMiners = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')) | |
| .map(checkbox => checkbox.closest('tr').getAttribute('data-miner-id')); | |
| if (selectedMiners.length === 0) { | |
| alert('Please select at least one miner'); | |
| return; | |
| } | |
| sendMinerCommand(command, selectedMiners); | |
| }); | |
| }); | |
| // Select all checkbox | |
| document.querySelector('th input[type="checkbox"]').addEventListener('change', function() { | |
| const rows = document.querySelectorAll('tbody tr'); | |
| if (this.checked) { | |
| rows.forEach(row => { | |
| const minerId = row.dataset.minerId; | |
| selectedMiners.add(minerId); | |
| row.classList.add('bg-primary-50', 'dark:bg-primary-900/20'); | |
| row.querySelector('input[type="checkbox"]').checked = true; | |
| }); | |
| } else { | |
| clearAllSelections(); | |
| } | |
| updateSelectionStats(); | |
| }); | |
| // Handle checkbox clicks separately from row clicks | |
| document.querySelectorAll('tbody input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const row = this.closest('tr'); | |
| const minerId = row.dataset.minerId; | |
| // Only modify this miner's selection state | |
| if (this.checked) { | |
| selectedMiners.add(minerId); | |
| row.classList.add('bg-primary-50', 'dark:bg-primary-900/20'); | |
| } else { | |
| selectedMiners.delete(minerId); | |
| row.classList.remove('bg-primary-50', 'dark:bg-primary-900/20'); | |
| } | |
| lastSelectedIndex = Array.from(document.querySelectorAll('tbody tr')).indexOf(row); | |
| updateSelectionStats(); | |
| }); | |
| }); | |
| </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=RobinsAIWorld/minordash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |