Torrent Tracker Dashboard - Copy this Html, Tailwind Component to your project
no this one, but add Active Torrents, Total Torrents <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BitTorrent Tracker Statistics</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50"> <nav class="bg-gray-800 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <div class="flex items-center"> <img src="https://images.unsplash.com/photo-1633419461186-7d40a38105ec?ixlib=rb-4.0.3" alt="Logo" class="h-8 w-8 rounded"> <span class="ml-2 text-xl font-semibold">Torrent Tracker</span> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-4"> <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-gray-900">Statistics</a> <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700">Torrents</a> <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700">Users</a> </div> </div> </div> </div> </nav> <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="px-4 py-6 sm:px-0"> <div class="flex justify-between items-center mb-6"> <h1 class="text-3xl font-bold text-gray-900">BitTorrent Tracker Statistics</h1> <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> </svg> Refresh Stats </button> </div> <div class="bg-white shadow-sm rounded-lg overflow-hidden"> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Info Hash</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Seeders</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Leechers</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Downloaded</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <tr class="hover:bg-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">abc123def456</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">125</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">45</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.5 TB</td> </tr> <tr class="hover:bg-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">xyz789uvw123</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">89</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">23</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.8 TB</td> </tr> <tr class="hover:bg-gray-50"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">pqr456stu789</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">234</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">67</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.2 TB</td> </tr> </tbody> </table> </div> </div> </div> </main> </body> </html>