Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BCH Miner Pro | Bitcoin Cash Mining Platform</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: { | |
| bch: { | |
| primary: '#0AC18E', | |
| dark: '#038C5A', | |
| light: '#D1F7E8', | |
| }, | |
| dark: { | |
| 850: '#1E293B' | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes gradientWave { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(270deg, #0AC18E, #038C5A, #0AC18E); | |
| background-size: 200% 200%; | |
| animation: gradientWave 8s ease infinite; | |
| } | |
| .mining-animation { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .mining-animation::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0) 30%, | |
| rgba(255, 255, 255, 0.3) 45%, | |
| rgba(255, 255, 255, 0) 60%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| transform: rotate(30deg); | |
| animation: shine 3s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { left: -50%; } | |
| 100% { left: 150%; } | |
| } | |
| .hashrate-meter { | |
| position: relative; | |
| height: 8px; | |
| background-color: #e5e7eb; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .hashrate-progress { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| background-color: #0AC18E; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| .floating-btn { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 50; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .modal-enter { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .modal-enter-active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .modal-exit { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .modal-exit-active { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 border-b border-gray-700"> | |
| <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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fab fa-bitcoin text-bch-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">BCH<span class="text-bch-primary">Miner</span>Pro</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Mining Pool</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Statistics</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Payouts</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Support</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none" id="user-menu"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-800 rounded-lg p-6 shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm font-medium">Current Hashrate</p> | |
| <p class="text-2xl font-bold mt-1">1.24 <span class="text-sm text-gray-400">TH/s</span></p> | |
| </div> | |
| <div class="bg-bch-primary bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-microchip text-bch-primary text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="hashrate-meter"> | |
| <div class="hashrate-progress" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">65% of your capacity</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm font-medium">Estimated Earnings</p> | |
| <p class="text-2xl font-bold mt-1">0.0042 <span class="text-sm text-gray-400">BCH/day</span></p> | |
| </div> | |
| <div class="bg-blue-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-coins text-blue-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-xs text-gray-400">≈ $1.24 USD/day</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm font-medium">Active Workers</p> | |
| <p class="text-2xl font-bold mt-1">3 <span class="text-sm text-gray-400">/ 5</span></p> | |
| </div> | |
| <div class="bg-green-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-server text-green-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-xs text-gray-400">2 workers offline</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm font-medium">Next Payout</p> | |
| <p class="text-2xl font-bold mt-1">0.0128 <span class="text-sm text-gray-400">BCH</span></p> | |
| </div> | |
| <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full"> | |
| <i class="fas fa-wallet text-purple-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-xs text-gray-400">Threshold: 0.01 BCH</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mining Control Panel --> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden mb-8"> | |
| <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold">Mining Control Panel</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200"> | |
| <span class="w-2 h-2 mr-1 rounded-full bg-green-400"></span> | |
| Pool Connected | |
| </span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="mining-animation bg-gray-700 rounded-lg p-6 mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-lg font-medium">Mining Status</h3> | |
| <p class="text-gray-400 text-sm">Real-time mining performance</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> | |
| </div> | |
| <button id="miningToggle" class="gradient-bg text-white px-4 py-2 rounded-md font-medium flex items-center"> | |
| <i class="fas fa-power-off mr-2"></i> Mining Active | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Hashrate</p> | |
| <p class="text-xl font-mono">1.24 TH/s</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Shares</p> | |
| <p class="text-xl font-mono">1,284</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Efficiency</p> | |
| <p class="text-xl font-mono">98.7%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>Current Block</span> | |
| <span>792,451</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> | |
| <div class="gradient-bg h-2.5 rounded-full" style="width: 84%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>84% complete</span> | |
| <span>≈ 12 min remaining</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-6"> | |
| <h3 class="text-lg font-medium mb-4">Mining Configuration</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Mining Intensity</label> | |
| <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| <option selected>Auto (Recommended)</option> | |
| <option value="low">Low (25%)</option> | |
| <option value="medium">Medium (50%)</option> | |
| <option value="high">High (75%)</option> | |
| <option value="max">Maximum (100%)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Power Mode</label> | |
| <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| <option selected>Balanced</option> | |
| <option value="efficiency">Efficiency Mode</option> | |
| <option value="performance">Performance Mode</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Pool Address</label> | |
| <input type="text" id="poolAddress" value="stratum.bchminerpro.com" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Pool Port</label> | |
| <input type="text" id="poolPort" value="3333" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Username</label> | |
| <input type="text" id="minerUsername" value="your_miner_username" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">Password</label> | |
| <input type="password" id="minerPassword" value="x" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="saveConfig" class="gradient-bg text-white px-4 py-2 rounded-md font-medium w-full"> | |
| Save Configuration | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-700 rounded-lg p-6 h-full"> | |
| <h3 class="text-lg font-medium mb-4">Quick Start</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-bch-primary bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-download text-bch-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium">Download Miner</h4> | |
| <p class="text-xs text-gray-400 mt-1">Get the latest version of our optimized miner</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full"> | |
| Download Now | |
| </button> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-user-plus text-blue-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium">Invite Friends</h4> | |
| <p class="text-xs text-gray-400 mt-1">Earn 5% of their mining rewards</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex"> | |
| <input type="text" class="bg-gray-700 border border-gray-600 text-white text-sm rounded-l-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" value="https://bchminer.pro/ref/abc123" readonly> | |
| <button class="bg-bch-primary text-white px-3 rounded-r-md"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-purple-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-wallet text-purple-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium">Your Wallet</h4> | |
| <p class="text-xs text-gray-400 mt-1">Manage your BCH wallet address</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <input type="text" id="bchWalletAddress" value="bitcoincash:qz27vk58s8dgs9q0wpegn0pz4v7khe5g5w5w5w5w5w" class="bg-gray-700 p-3 rounded-md text-xs font-mono w-full"> | |
| <button id="updateWallet" class="mt-2 gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full"> | |
| Update Address | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-gem text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium">Premium Features</h4> | |
| <p class="text-xs text-gray-400 mt-1">Unlock advanced mining options</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 bg-yellow-600 hover:bg-yellow-700 text-white text-sm px-3 py-1.5 rounded-md font-medium w-full"> | |
| Upgrade Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity & Workers --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-700"> | |
| <h2 class="text-lg font-semibold">Recent Activity</h2> | |
| </div> | |
| <div class="divide-y divide-gray-700"> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-check-circle text-green-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">New share accepted</p> | |
| <p class="text-xs text-gray-400 mt-1">2 minutes ago</p> | |
| </div> | |
| <div class="ml-auto text-sm font-mono text-bch-primary"> | |
| +0.000012 BCH | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-server text-blue-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker reconnected</p> | |
| <p class="text-xs text-gray-400 mt-1">15 minutes ago</p> | |
| </div> | |
| <div class="ml-auto text-sm text-gray-400"> | |
| Worker #3 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Stale share detected</p> | |
| <p class="text-xs text-gray-400 mt-1">32 minutes ago</p> | |
| </div> | |
| <div class="ml-auto text-sm text-gray-400"> | |
| Worker #1 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-coins text-purple-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Payout processed</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| <div class="ml-auto text-sm font-mono text-bch-primary"> | |
| 0.0428 BCH | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-power-off text-red-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker disconnected</p> | |
| <p class="text-xs text-gray-400 mt-1">3 hours ago</p> | |
| </div> | |
| <div class="ml-auto text-sm text-gray-400"> | |
| Worker #2 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-700"> | |
| <h2 class="text-lg font-semibold">Your Workers</h2> | |
| </div> | |
| <div class="divide-y divide-gray-700"> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="relative"> | |
| <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded-full"> | |
| <i class="fas fa-server text-green-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker #1</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: Just now</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono">0.52 TH/s</div> | |
| <div class="text-xs text-gray-400 mt-1">Efficiency: 98%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="relative"> | |
| <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded-full"> | |
| <i class="fas fa-server text-green-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker #2</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: 2 minutes ago</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono">0.48 TH/s</div> | |
| <div class="text-xs text-gray-400 mt-1">Efficiency: 97%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="relative"> | |
| <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded-full"> | |
| <i class="fas fa-server text-green-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker #3</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: 15 minutes ago</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono">0.24 TH/s</div> | |
| <div class="text-xs text-gray-400 mt-1">Efficiency: 95%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="bg-gray-700 p-2 rounded-full"> | |
| <i class="fas fa-server text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker #4</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: 3 hours ago</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono text-gray-500">Offline</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="bg-gray-700 p-2 rounded-full"> | |
| <i class="fas fa-server text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Worker #5</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: 1 day ago</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono text-gray-500">Offline</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Earnings Chart --> | |
| <div class="bg-gray-800 rounded-lg shadow overflow-hidden mb-8"> | |
| <div class="px-6 py-4 border-b border-gray-700"> | |
| <h2 class="text-lg font-semibold">Earnings Overview</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="h-80"> | |
| <!-- Chart placeholder - in a real app you would use Chart.js or similar --> | |
| <div class="bg-gray-700 rounded-lg flex items-center justify-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-line text-4xl text-gray-500 mb-2"></i> | |
| <p class="text-gray-400">Earnings chart will be displayed here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Floating Action Button --> | |
| <button id="wirelessBtn" class="floating-btn bg-bch-primary hover:bg-bch-dark text-white rounded-full p-4 transition-all duration-300"> | |
| <i class="fas fa-wifi text-xl"></i> | |
| </button> | |
| <!-- Wireless Connection Modal --> | |
| <div id="wirelessModal" class="fixed inset-0 overflow-y-auto z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <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 bg-gray-900 bg-opacity-75 transition-opacity" aria-hidden="true"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="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-bch-primary bg-opacity-20 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-wifi text-bch-primary"></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-white" id="modal-title"> | |
| Connect to Secondary Miner | |
| </h3> | |
| <div class="mt-4 space-y-4"> | |
| <div> | |
| <label for="wifiSSID" class="block text-sm font-medium text-gray-400">WiFi SSID</label> | |
| <input type="text" id="wifiSSID" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="Enter WiFi network name"> | |
| </div> | |
| <div> | |
| <label for="wifiPassword" class="block text-sm font-medium text-gray-400">WiFi Password</label> | |
| <input type="password" id="wifiPassword" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="Enter WiFi password"> | |
| </div> | |
| <div> | |
| <label for="minerIP" class="block text-sm font-medium text-gray-400">Miner IP Address</label> | |
| <input type="text" id="minerIP" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="192.168.1.100"> | |
| </div> | |
| <div> | |
| <label for="minerPort" class="block text-sm font-medium text-gray-400">Miner Port</label> | |
| <input type="text" id="minerPort" value="4028" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button id="connectWireless" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-bch-primary text-base font-medium text-white hover:bg-bch-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bch-primary sm:ml-3 sm:w-auto sm:text-sm"> | |
| Connect | |
| </button> | |
| <button id="cancelWireless" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-700 text-base font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 border-t border-gray-700"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">BCH Miner Pro</h3> | |
| <p class="text-gray-300 text-sm">The most efficient Bitcoin Cash mining platform with low fees and instant payouts.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">Documentation</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">API Reference</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">Mining Calculator</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">Network Status</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">About Us</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">Blog</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">Careers</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white text-sm">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-xs text-gray-400">© 2023 BCH Miner Pro. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mining toggle functionality | |
| const miningToggle = document.getElementById('miningToggle'); | |
| let isMining = true; | |
| miningToggle.addEventListener('click', function() { | |
| isMining = !isMining; | |
| if (isMining) { | |
| miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Mining Active'; | |
| miningToggle.classList.remove('bg-red-600'); | |
| miningToggle.classList.add('gradient-bg'); | |
| // Show mining animation | |
| document.querySelector('.mining-animation').classList.remove('bg-gray-600'); | |
| document.querySelector('.mining-animation').classList.add('bg-gray-700'); | |
| // Update status indicator | |
| document.querySelector('.mining-animation .relative .flex').innerHTML = ` | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> | |
| `; | |
| } else { | |
| miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Start Mining'; | |
| miningToggle.classList.remove('gradient-bg'); | |
| miningToggle.classList.add('bg-red-600'); | |
| // Hide mining animation | |
| document.querySelector('.mining-animation').classList.remove('bg-gray-700'); | |
| document.querySelector('.mining-animation').classList.add('bg-gray-600'); | |
| // Update status indicator | |
| document.querySelector('.mining-animation .relative .flex').innerHTML = ` | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span> | |
| `; | |
| } | |
| }); | |
| // Simulate hashrate fluctuations | |
| setInterval(() => { | |
| if (isMining) { | |
| const stats = document.querySelectorAll('.mining-animation .font-mono'); | |
| const currentHashrate = parseFloat(stats[0].textContent); | |
| const newHashrate = (currentHashrate + (Math.random() * 0.2 - 0.1)).toFixed(2); | |
| stats[0].textContent = `${Math.max(0.8, newHashrate)} TH/s`; | |
| const currentEfficiency = parseFloat(stats[2].textContent); | |
| const newEfficiency = (currentEfficiency + (Math.random() * 1 - 0.5)).toFixed(1); | |
| stats[2].textContent = `${Math.max(95, newEfficiency)}%`; | |
| // Update workers' hashrate | |
| const workers = document.querySelectorAll('.bg-gray-800 .font-mono'); | |
| workers.forEach(worker => { | |
| if (worker.textContent.includes('TH/s')) { | |
| const current = parseFloat(worker.textContent); | |
| const newRate = (current + (Math.random() * 0.05 - 0.025)).toFixed(2); | |
| worker.textContent = `${Math.max(0.2, newRate)} TH/s`; | |
| } | |
| }); | |
| } | |
| }, 3000); | |
| // Update BCH wallet address | |
| const updateWallet = document.getElementById('updateWallet'); | |
| const bchWalletAddress = document.getElementById('bchWalletAddress'); | |
| updateWallet.addEventListener('click', function() { | |
| const newAddress = bchWalletAddress.value.trim(); | |
| if (newAddress) { | |
| alert(`Wallet address updated to:\n${newAddress}`); | |
| // In a real app, you would send this to your backend | |
| } else { | |
| alert('Please enter a valid BCH address'); | |
| } | |
| }); | |
| // Save mining configuration | |
| const saveConfig = document.getElementById('saveConfig'); | |
| saveConfig.addEventListener('click', function() { | |
| const poolAddress = document.getElementById('poolAddress').value; | |
| const poolPort = document.getElementById('poolPort').value; | |
| const minerUsername = document.getElementById('minerUsername').value; | |
| const minerPassword = document.getElementById('minerPassword').value; | |
| if (poolAddress && poolPort && minerUsername) { | |
| alert(`Mining configuration saved:\nPool: ${poolAddress}:${poolPort}\nUsername: ${minerUsername}`); | |
| // In a real app, you would send this to your backend | |
| } else { | |
| alert('Please fill in all required fields'); | |
| } | |
| }); | |
| // Wireless connection modal | |
| const wirelessBtn = document.getElementById('wirelessBtn'); | |
| const wirelessModal = document.getElementById('wirelessModal'); | |
| const cancelWireless = document.getElementById('cancelWireless'); | |
| const connectWireless = document.getElementById('connectWireless'); | |
| wirelessBtn.addEventListener('click', function() { | |
| wirelessModal.classList.remove('hidden'); | |
| }); | |
| cancelWireless.addEventListener('click', function() { | |
| wirelessModal.classList.add('hidden'); | |
| }); | |
| connectWireless.addEventListener('click', function() { | |
| const wifiSSID = document.getElementById('wifiSSID').value; | |
| const wifiPassword = document.getElementById('wifiPassword').value; | |
| const minerIP = document.getElementById('minerIP').value; | |
| const minerPort = document.getElementById('minerPort').value; | |
| if (wifiSSID && minerIP) { | |
| alert(`Connecting to secondary miner via WiFi:\nSSID: ${wifiSSID}\nMiner IP: ${minerIP}:${minerPort}`); | |
| // In a real app, you would initiate the connection here | |
| wirelessModal.classList.add('hidden'); | |
| } else { | |
| alert('Please enter at least WiFi SSID and Miner IP'); | |
| } | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(event) { | |
| if (event.target === wirelessModal) { | |
| wirelessModal.classList.add('hidden'); | |
| } | |
| }); | |
| </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=privateuserh/privatemnn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |