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); | |
| } | |
| .address-row { | |
| transition: all 0.3s ease; | |
| } | |
| .address-row:hover { | |
| background-color: rgba(10, 193, 142, 0.05); | |
| } | |
| .difficulty-indicator { | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(to right, #0AC18E, #F59E0B, #EF4444); | |
| border-radius: 2px; | |
| margin-top: 4px; | |
| } | |
| .difficulty-marker { | |
| height: 10px; | |
| width: 2px; | |
| background-color: white; | |
| position: absolute; | |
| top: -3px; | |
| } | |
| .countdown-timer { | |
| font-family: monospace; | |
| font-size: 1.1rem; | |
| } | |
| .storage-capacity { | |
| height: 8px; | |
| background-color: #1F2937; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .storage-used { | |
| height: 100%; | |
| background-color: #3B82F6; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| </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">/ 3</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">All workers online</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">Auto payout every block</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 class="countdown-timer">≈ 12:45 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-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">Auto Payout Settings</h4> | |
| <p class="text-xs text-gray-400 mt-1">Configure automatic payouts every block</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex items-center mb-2"> | |
| <input id="autoPayoutToggle" type="checkbox" class="h-4 w-4 text-bch-primary focus:ring-bch-primary border-gray-600 rounded" checked> | |
| <label for="autoPayoutToggle" class="ml-2 block text-xs text-gray-300">Enable Auto Payout</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="secondaryMinerPayout" type="checkbox" class="h-4 w-4 text-bch-primary focus:ring-bch-primary border-gray-600 rounded" checked> | |
| <label for="secondaryMinerPayout" class="ml-2 block text-xs text-gray-300">Include Secondary Miner</label> | |
| </div> | |
| <div class="mt-2"> | |
| <label class="block text-xs font-medium text-gray-400 mb-1">Payout Mode</label> | |
| <select class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2"> | |
| <option selected>Every Block (Solo Mining)</option> | |
| <option>Pool Recommended Interval</option> | |
| <option>Custom Interval</option> | |
| </select> | |
| </div> | |
| </div> | |
| </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-server text-blue-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium">Secondary Miner</h4> | |
| <p class="text-xs text-gray-400 mt-1">Connect to additional mining device</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 space-y-2"> | |
| <input type="text" id="secondaryMinerUrl" class="bg-gray-700 p-2 rounded-md text-xs w-full" placeholder="Pool URL (e.g., stratum+tcp://pool.example.com:3333)"> | |
| <input type="text" id="secondaryMinerUser" class="bg-gray-700 p-2 rounded-md text-xs w-full" placeholder="Username"> | |
| <input type="password" id="secondaryMinerPass" class="bg-gray-700 p-2 rounded-md text-xs w-full" placeholder="Password"> | |
| <div class="flex items-center mt-1"> | |
| <input id="soloMiningToggle" type="checkbox" class="h-4 w-4 text-bch-primary focus:ring-bch-primary border-gray-600 rounded"> | |
| <label for="soloMiningToggle" class="ml-2 block text-xs text-gray-300">Solo Mining Mode</label> | |
| </div> | |
| </div> | |
| <button id="connectSecondaryMiner" class="mt-2 gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full"> | |
| Connect Miner | |
| </button> | |
| </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-sd-card text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium">Storage Capacity</h4> | |
| <p class="text-xs text-gray-400 mt-1">SD Card mining storage</p> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="storage-capacity"> | |
| <div class="storage-used" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>32.5 GB used</span> | |
| <span>50 GB total</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wallet Addresses & 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 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold">Wallet Addresses</h2> | |
| <button id="addWalletAddress" class="text-xs bg-bch-primary hover:bg-bch-dark text-white px-3 py-1 rounded-md"> | |
| <i class="fas fa-plus mr-1"></i> Add Address | |
| </button> | |
| </div> | |
| <div class="divide-y divide-gray-700" id="walletAddresses"> | |
| <!-- Address 1 --> | |
| <div class="address-row px-6 py-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-bch-primary bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-wallet text-bch-primary"></i> | |
| </div> | |
| <div class="ml-3 flex-grow"> | |
| <input type="text" value="bitcoincash:qz27vk58s8dgs9q0wpegn0pz4v7khe5g5w5w5w5w5w" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="BCH Address"> | |
| <input type="text" value="miner_user1" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2" placeholder="Pool Username"> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-400 mr-2">Payout %:</span> | |
| <input type="number" min="0" max="100" value="60" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center"> | |
| <span class="text-xs text-gray-400 ml-1">%</span> | |
| <button class="ml-auto text-red-400 hover:text-red-300 text-xs"> | |
| <i class="fas fa-trash-alt"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Address 2 --> | |
| <div class="address-row 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-wallet text-purple-400"></i> | |
| </div> | |
| <div class="ml-3 flex-grow"> | |
| <input type="text" value="bitcoincash:qp4k8fjt6u8f9d5z2x3c4v5b6n7m8k9l0" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="BCH Address"> | |
| <input type="text" value="miner_user2" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2" placeholder="Pool Username"> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-400 mr-2">Payout %:</span> | |
| <input type="number" min="0" max="100" value="30" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center"> | |
| <span class="text-xs text-gray-400 ml-1">%</span> | |
| <button class="ml-auto text-red-400 hover:text-red-300 text-xs"> | |
| <i class="fas fa-trash-alt"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Address 3 --> | |
| <div class="address-row 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-wallet text-blue-400"></i> | |
| </div> | |
| <div class="ml-3 flex-grow"> | |
| <input type="text" value="bitcoincash:qr9v8w7x6y5z4u3v2w1x0y9z8u7v6w5x4" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="BCH Address"> | |
| <input type="text" value="miner_user3" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2" placeholder="Pool Username"> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-400 mr-2">Payout %:</span> | |
| <input type="number" min="0" max="100" value="10" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center"> | |
| <span class="text-xs text-gray-400 ml-1">%</span> | |
| <button class="ml-auto text-red-400 hover:text-red-300 text-xs"> | |
| <i class="fas fa-trash-alt"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-700"> | |
| <button id="saveWalletAddresses" class="gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full"> | |
| Save Wallet Configuration | |
| </button> | |
| </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">Primary Miner</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: Just now</p> | |
| <div class="difficulty-indicator mt-1 relative"> | |
| <div class="difficulty-marker" style="left: 30%;"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">Current difficulty: Medium</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono">1.24 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">Secondary Miner #1</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: 2 minutes ago</p> | |
| <div class="difficulty-indicator mt-1 relative"> | |
| <div class="difficulty-marker" style="left: 65%;"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">Current difficulty: High</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono">0.85 TH/s</div> | |
| <div class="text-xs text-gray-400 mt-1">Efficiency: 96%</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">Secondary Miner #2</p> | |
| <p class="text-xs text-gray-400 mt-1">Last active: 15 minutes ago</p> | |
| <div class="difficulty-indicator mt-1 relative"> | |
| <div class="difficulty-marker" style="left: 15%;"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">Current difficulty: Low</div> | |
| </div> | |
| <div class="ml-auto"> | |
| <div class="text-sm font-mono">0.62 TH/s</div> | |
| <div class="text-xs text-gray-400 mt-1">Efficiency: 95%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Block Tracking & Earnings --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- Current Block Tracking --> | |
| <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">Current Block Tracking</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Block Height</p> | |
| <p class="text-xl font-mono">792,451</p> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Shares Found</p> | |
| <p class="text-xl font-mono">1,284</p> | |
| </div> | |
| <div class="bg-gray-700 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 class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>Block Progress</span> | |
| <span>84% complete</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>Estimated completion</span> | |
| <span class="countdown-timer">12:45 min remaining</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>Next Block Difficulty</span> | |
| <span>+8.5% increase</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: 65%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Based on 3 miners</span> | |
| <span>Avg block time: 15.2 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Earnings Chart --> | |
| <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">Earnings Overview</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="h-64 mb-4"> | |
| <!-- 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 class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Estimated Payout</p> | |
| <p class="text-xl font-mono">0.0128 BCH</p> | |
| <p class="text-xs text-gray-400 mt-1">≈ $3.78 USD</p> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <p class="text-gray-400 text-sm">Next Payout In</p> | |
| <p class="text-xl font-mono countdown-timer">12:45 min</p> | |
| <p class="text-xs text-gray-400 mt-1">Block 792,451</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-400 mb-1"> | |
| <span>Storage Usage</span> | |
| <span>32.5/50 GB (65%)</span> | |
| </div> | |
| <div class="storage-capacity"> | |
| <div class="storage-used" style="width: 65%"></div> | |
| </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> | |
| <label for="minerPoolUrl" class="block text-sm font-medium text-gray-400">Pool Connection URL</label> | |
| <input type="text" id="minerPoolUrl" 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="stratum+tcp://pool.example.com:3333"> | |
| </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 and difficulty adjustments | |
| let currentDifficulty = 0.5; // 0-1 scale | |
| let nextBlockDifficulty = 0.6; | |
| let blockCompletion = 84; | |
| let remainingTime = 12 * 60 + 45; // 12 minutes 45 seconds in seconds | |
| // Countdown timer function | |
| function updateCountdown() { | |
| if (isMining && blockCompletion < 100) { | |
| remainingTime--; | |
| if (remainingTime <= 0) { | |
| // Block completed, reset for next block | |
| blockCompletion = 0; | |
| remainingTime = Math.floor(15 * 60 * (1 + Math.random() * 0.2 - 0.1)); // Random block time around 15 minutes | |
| // Switch to next block's difficulty | |
| currentDifficulty = nextBlockDifficulty; | |
| // Calculate new difficulty for next block based on miners and block time | |
| const minerCount = 3; // From active workers | |
| const avgBlockTime = 15.2; // In minutes | |
| const difficultyAdjustment = (minerCount / 3) * (15 / avgBlockTime); | |
| nextBlockDifficulty = Math.min(1, Math.max(0, currentDifficulty * difficultyAdjustment * (1 + Math.random() * 0.1 - 0.05))); | |
| } | |
| // Update block completion | |
| blockCompletion = 100 - (remainingTime / (15 * 60)) * 100; | |
| document.querySelector('.mining-animation .gradient-bg').style.width = `${blockCompletion}%`; | |
| document.querySelector('.mining-animation .countdown-timer').textContent = `≈ ${Math.floor(remainingTime / 60)}:${(remainingTime % 60).toString().padStart(2, '0')} min remaining`; | |
| // Update block tracking section | |
| document.querySelectorAll('.countdown-timer').forEach(el => { | |
| el.textContent = `${Math.floor(remainingTime / 60)}:${(remainingTime % 60).toString().padStart(2, '0')} min remaining`; | |
| }); | |
| // Update next block difficulty indicator | |
| const nextDifficultyPos = Math.floor(nextBlockDifficulty * 100); | |
| document.querySelectorAll('.gradient-bg').forEach(el => { | |
| if (el.parentElement.classList.contains('bg-gray-600') && !el.parentElement.classList.contains('storage-capacity')) { | |
| el.style.width = `${nextDifficultyPos}%`; | |
| } | |
| }); | |
| } | |
| } | |
| setInterval(updateCountdown, 1000); | |
| setInterval(() => { | |
| if (isMining) { | |
| // Update mining stats | |
| 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`; | |
| // Update shares found (more active when closer to block completion) | |
| const currentShares = parseInt(stats[1].textContent.replace(/,/g, '')); | |
| const shareIncrease = Math.floor(5 + (blockCompletion / 100) * 20 * Math.random()); | |
| stats[1].textContent = (currentShares + shareIncrease).toLocaleString(); | |
| 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`; | |
| } | |
| }); | |
| // Update difficulty indicators | |
| const difficultyMarkers = document.querySelectorAll('.difficulty-marker'); | |
| difficultyMarkers.forEach(marker => { | |
| const newPos = Math.min(100, Math.max(0, (currentDifficulty * 100) + (Math.random() * 10 - 5))); | |
| marker.style.left = `${newPos}%`; | |
| // Update difficulty text | |
| const difficultyText = marker.closest('.flex.items-center').querySelector('.text-xs.text-gray-400'); | |
| if (newPos < 33) { | |
| difficultyText.textContent = 'Current difficulty: Low'; | |
| } else if (newPos < 66) { | |
| difficultyText.textContent = 'Current difficulty: Medium'; | |
| } else { | |
| difficultyText.textContent = 'Current difficulty: High'; | |
| } | |
| }); | |
| // Update estimated payout based on hashrate and shares | |
| const estimatedPayout = (0.0001 * currentHashrate * (1 + blockCompletion / 100)).toFixed(4); | |
| document.querySelectorAll('.text-xl.font-mono').forEach(el => { | |
| if (el.textContent.includes('BCH') && !el.textContent.includes('792,451')) { | |
| el.textContent = `${estimatedPayout} BCH`; | |
| // Update USD equivalent | |
| const usdEquivalent = (parseFloat(estimatedPayout) * 295).toFixed(2); // Assuming $295/BCH | |
| el.nextElementSibling.textContent = `≈ $${usdEquivalent} USD`; | |
| } | |
| }); | |
| } | |
| }, 3000); | |
| // Wallet address management | |
| const addWalletAddress = document.getElementById('addWalletAddress'); | |
| const walletAddresses = document.getElementById('walletAddresses'); | |
| const saveWalletAddresses = document.getElementById('saveWalletAddresses'); | |
| addWalletAddress.addEventListener('click', function() { | |
| // Check if we already have 3 addresses | |
| if (document.querySelectorAll('.address-row').length >= 3) { | |
| alert('Maximum of 3 wallet addresses allowed'); | |
| return; | |
| } | |
| const newAddress = document.createElement('div'); | |
| newAddress.className = 'address-row px-6 py-4'; | |
| newAddress.innerHTML = ` | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full"> | |
| <i class="fas fa-wallet text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3 flex-grow"> | |
| <input type="text" placeholder="BCH Address" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2"> | |
| <input type="text" placeholder="Pool Username" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2"> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-400 mr-2">Payout %:</span> | |
| <input type="number" min="0" max="100" value="0" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center"> | |
| <span class="text-xs text-gray-400 ml-1">%</span> | |
| <button class="ml-auto text-red-400 hover:text-red-300 text-xs remove-address"> | |
| <i class="fas fa-trash-alt"></i> Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| walletAddresses.appendChild(newAddress); | |
| // Add event listener to the new remove button | |
| newAddress.querySelector('.remove-address').addEventListener('click', function() { | |
| walletAddresses.removeChild(newAddress); | |
| }); | |
| }); | |
| // Add event listeners to existing remove buttons | |
| document.querySelectorAll('.address-row button').forEach(button => { | |
| if (button.textContent.includes('Remove')) { | |
| button.addEventListener('click', function() { | |
| walletAddresses.removeChild(button.closest('.address-row')); | |
| }); | |
| } | |
| }); | |
| saveWalletAddresses.addEventListener('click', function() { | |
| const addresses = []; | |
| let totalPercentage = 0; | |
| document.querySelectorAll('.address-row').forEach(row => { | |
| const address = row.querySelector('input[type="text"]').value; | |
| const username = row.querySelectorAll('input[type="text"]')[1].value; | |
| const percentage = parseInt(row.querySelector('input[type="number"]').value); | |
| if (address) { | |
| addresses.push({ address, username, percentage }); | |
| totalPercentage += percentage; | |
| } | |
| }); | |
| if (addresses.length === 0) { | |
| alert('Please add at least one wallet address'); | |
| return; | |
| } | |
| if (totalPercentage !== 100) { | |
| alert('Total payout percentage must equal 100%'); | |
| return; | |
| } | |
| alert('Wallet addresses and payout percentages saved successfully!\n\nPayout distribution:\n' + | |
| addresses.map(a => `${a.address} (${a.username}): ${a.percentage}%`).join('\n')); | |
| // In a real app, you would send this to your backend | |
| }); | |
| // Secondary miner connection | |
| const connectSecondaryMiner = document.getElementById('connectSecondaryMiner'); | |
| connectSecondaryMiner.addEventListener('click', function() { | |
| const poolUrl = document.getElementById('secondaryMinerUrl').value; | |
| const username = document.getElementById('secondaryMinerUser').value; | |
| const isSolo = document.getElementById('soloMiningToggle').checked; | |
| if (poolUrl && username) { | |
| const mode = isSolo ? 'SOLO mining mode' : 'POOL mining mode'; | |
| alert(`Connecting secondary miner to:\n${poolUrl}\nUsername: ${username}\nMode: ${mode}`); | |
| // In a real app, you would initiate the connection here | |
| } else { | |
| alert('Please enter both Pool URL and Username'); | |
| } | |
| }); | |
| // 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 minerIP = document.getElementById('minerIP').value; | |
| const minerPoolUrl = document.getElementById('minerPoolUrl').value; | |
| if (wifiSSID && minerIP && minerPoolUrl) { | |
| alert(`Connecting to secondary miner via WiFi:\nSSID: ${wifiSSID}\nMiner IP: ${minerIP}\nPool URL: ${minerPoolUrl}`); | |
| // In a real app, you would initiate the connection here | |
| wirelessModal.classList.add('hidden'); | |
| } else { | |
| alert('Please enter WiFi SSID, Miner IP and Pool URL'); | |
| } | |
| }); | |
| // 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-1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |