Hugging Face's logo

Spaces:
privateuserh
/
privatemnr-fb
Running

App Files Community
privatemnr-fb / index.html
privateuserh's picture
privateuserh
Add 2 files
c16665d verified
raw
history blame contribute delete
67.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FractalMiner Pro | FB & BCH Mining Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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: {
fractal: {
primary: '#6D28D9',
dark: '#5B21B6',
light: '#EDE9FE',
},
bch: {
primary: '#8DC351',
dark: '#6DA130',
light: '#E8F5E9',
},
dark: {
850: '#1E293B'
}
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'spin-slow': 'spin 4s linear infinite',
}
}
}
}
</script>
<style>
@keyframes gradientWave {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.gradient-fractal {
background: linear-gradient(270deg, #6D28D9, #5B21B6, #6D28D9);
background-size: 200% 200%;
animation: gradientWave 8s ease infinite;
}
.gradient-bch {
background: linear-gradient(270deg, #8DC351, #6DA130, #8DC351);
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%;
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);
}
.token-selector {
position: relative;
display: inline-block;
}
.token-option {
transition: all 0.3s ease;
}
.token-option:hover {
transform: scale(1.05);
}
.token-option.active {
border: 2px solid;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.coin-icon {
width: 24px;
height: 24px;
display: inline-block;
border-radius: 50%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.fractal-logo {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%236D28D9" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>');
}
.bch-logo {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%238DC351" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-13h-2v6h2v-6zm0 8h-2v2h2v-2z"/></svg>');
}
</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="fas fa-project-diagram text-fractal-primary text-2xl mr-2"></i>
<span class="text-xl font-bold">Fractal<span class="text-fractal-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>
</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">
<!-- Token Selection -->
<div class="flex justify-center mb-8">
<div class="bg-gray-800 rounded-full p-1 flex">
<div class="token-selector">
<button class="token-option active bg-gray-700 text-white px-4 py-2 rounded-full font-medium flex items-center mr-1" data-token="fractal">
<span class="coin-icon fractal-logo mr-2"></span>
Fractal Bitcoin (FB)
</button>
</div>
<div class="token-selector">
<button class="token-option bg-gray-800 text-gray-300 px-4 py-2 rounded-full font-medium flex items-center" data-token="bch">
<span class="coin-icon bch-logo mr-2"></span>
Bitcoin Cash (BCH)
</button>
</div>
</div>
</div>
<!-- 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 fractal-hashrate">1.24 <span class="text-sm text-gray-400">TH/s</span></p>
<p class="text-2xl font-bold mt-1 bch-hashrate hidden">2.56 <span class="text-sm text-gray-400">TH/s</span></p>
</div>
<div class="bg-fractal-primary bg-opacity-20 p-3 rounded-full fractal-icon">
<i class="fas fa-microchip text-fractal-primary text-xl"></i>
</div>
<div class="bg-bch-primary bg-opacity-20 p-3 rounded-full bch-icon hidden">
<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 bg-fractal-primary fractal-progress" style="width: 65%"></div>
<div class="hashrate-progress bg-bch-primary bch-progress hidden" style="width: 78%"></div>
</div>
<p class="text-xs text-gray-400 mt-1 fractal-capacity">65% of your capacity</p>
<p class="text-xs text-gray-400 mt-1 bch-capacity hidden">78% 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 fractal-earnings">0.0042 <span class="text-sm text-gray-400">FB/day</span></p>
<p class="text-2xl font-bold mt-1 bch-earnings hidden">0.0038 <span class="text-sm text-gray-400">BCH/day</span></p>
</div>
<div class="bg-fractal-primary bg-opacity-20 p-3 rounded-full fractal-icon">
<i class="fas fa-coins text-fractal-primary text-xl"></i>
</div>
<div class="bg-bch-primary bg-opacity-20 p-3 rounded-full bch-icon hidden">
<i class="fas fa-coins text-bch-primary text-xl"></i>
</div>
</div>
<div class="mt-4">
<p class="text-xs text-gray-400 fractal-usd">≈ $1.24 USD/day</p>
<p class="text-xs text-gray-400 bch-usd hidden">≈ $1.14 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">1 <span class="text-sm text-gray-400">/ 1</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">Primary worker 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 fractal-payout">0.0128 <span class="text-sm text-gray-400">FB</span></p>
<p class="text-2xl font-bold mt-1 bch-payout hidden">0.0114 <span class="text-sm text-gray-400">BCH</span></p>
</div>
<div class="bg-fractal-primary bg-opacity-20 p-3 rounded-full fractal-icon">
<i class="fas fa-wallet text-fractal-primary text-xl"></i>
</div>
<div class="bg-bch-primary bg-opacity-20 p-3 rounded-full bch-icon hidden">
<i class="fas fa-wallet text-bch-primary text-xl"></i>
</div>
</div>
<div class="mt-4">
<p class="text-xs text-gray-400 fractal-payout-info">Auto payout every block</p>
<p class="text-xs text-gray-400 bch-payout-info hidden">Auto payout every 6 blocks</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-fractal 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 fractal-hashrate">1.24 TH/s</p>
<p class="text-xl font-mono bch-hashrate hidden">2.56 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 class="fractal-block">792,451</span>
<span class="bch-block hidden">840,127</span>
</div>
<div class="w-full bg-gray-600 rounded-full h-2.5">
<div class="gradient-fractal h-2.5 rounded-full fractal-progress" style="width: 84%"></div>
<div class="gradient-bch h-2.5 rounded-full bch-progress hidden" style="width: 72%"></div>
</div>
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span class="fractal-progress-text">84% complete</span>
<span class="bch-progress-text hidden">72% 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-fractal-primary focus:border-fractal-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-fractal-primary focus:border-fractal-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+tcp://pool.fractalbitcoin.net" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-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-fractal-primary focus:border-fractal-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="fractalminer" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-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="" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
</div>
</div>
<div class="mt-6">
<button id="saveConfig" class="gradient-fractal 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">Network Configuration</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-network-wired text-purple-400"></i>
</div>
<div class="ml-3">
<h4 class="text-sm font-medium">Port Configuration</h4>
<p class="text-xs text-gray-400 mt-1">Configure mining port for incoming connections</p>
</div>
</div>
<div class="mt-3">
<div class="flex items-center mb-2">
<input id="portToggle" type="checkbox" class="h-4 w-4 text-fractal-primary focus:ring-fractal-primary border-gray-600 rounded">
<label for="portToggle" class="ml-2 block text-xs text-gray-300">Enable Port Forwarding</label>
</div>
<div class="mt-2">
<label class="block text-xs font-medium text-gray-400 mb-1">Port Number</label>
<input type="number" id="miningPort" value="3333" class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2">
</div>
<div class="mt-2">
<label class="block text-xs font-medium text-gray-400 mb-1">Protocol</label>
<select class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2">
<option selected>TCP</option>
<option>UDP</option>
<option>Both</option>
</select>
</div>
</div>
<button id="openPortBtn" class="mt-3 gradient-fractal text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
Open Port
</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-shield-alt text-blue-400"></i>
</div>
<div class="ml-3">
<h4 class="text-sm font-medium">Security Settings</h4>
<p class="text-xs text-gray-400 mt-1">Configure firewall and access control</p>
</div>
</div>
<div class="mt-3">
<div class="flex items-center mb-2">
<input id="firewallToggle" type="checkbox" class="h-4 w-4 text-fractal-primary focus:ring-fractal-primary border-gray-600 rounded" checked>
<label for="firewallToggle" class="ml-2 block text-xs text-gray-300">Enable Firewall Protection</label>
</div>
<div class="flex items-center mb-2">
<input id="ipRestrictToggle" type="checkbox" class="h-4 w-4 text-fractal-primary focus:ring-fractal-primary border-gray-600 rounded">
<label for="ipRestrictToggle" class="ml-2 block text-xs text-gray-300">Restrict by IP Address</label>
</div>
<div class="mt-2">
<label class="block text-xs font-medium text-gray-400 mb-1">Allowed IPs (comma separated)</label>
<input type="text" id="allowedIPs" class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2" placeholder="192.168.1.1, 10.0.0.5">
</div>
</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-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-fractal-primary hover:bg-fractal-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-fractal-primary bg-opacity-20 p-2 rounded-full">
<i class="fas fa-wallet text-fractal-primary"></i>
</div>
<div class="ml-3 flex-grow">
<input type="text" value="FB1q3azkahp4tl72hflssdfz2rp3h383erjyj848ny" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="FB Address">
<input type="text" value="fractalminer" 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="100" 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-fractal 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 Worker</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 fractal-hashrate">1.24 TH/s</div>
<div class="text-sm font-mono bch-hashrate hidden">2.56 TH/s</div>
<div class="text-xs text-gray-400 mt-1">Efficiency: 98%</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 fractal-block">792,451</p>
<p class="text-xl font-mono bch-block hidden">840,127</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 class="fractal-progress-text">84% complete</span>
<span class="bch-progress-text hidden">72% complete</span>
</div>
<div class="w-full bg-gray-600 rounded-full h-2.5">
<div class="gradient-fractal h-2.5 rounded-full fractal-progress" style="width: 84%"></div>
<div class="gradient-bch h-2.5 rounded-full bch-progress hidden" style="width: 72%"></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 class="fractal-difficulty">+8.5% increase</span>
<span class="bch-difficulty hidden">+5.2% increase</span>
</div>
<div class="w-full bg-gray-600 rounded-full h-2.5">
<div class="gradient-fractal h-2.5 rounded-full fractal-difficulty-bar" style="width: 65%"></div>
<div class="gradient-bch h-2.5 rounded-full bch-difficulty-bar hidden" style="width: 55%"></div>
</div>
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span>Based on 1 miner</span>
<span class="fractal-block-time">Avg block time: 15.2 min</span>
<span class="bch-block-time hidden">Avg block time: 10.5 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">
<canvas id="earningsChart"></canvas>
</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 fractal-payout">0.0128 FB</p>
<p class="text-xl font-mono bch-payout hidden">0.0114 BCH</p>
<p class="text-xs text-gray-400 mt-1 fractal-usd">≈ $3.78 USD</p>
<p class="text-xs text-gray-400 mt-1 bch-usd hidden">≈ $3.42 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 fractal-payout-info">Block 792,451</p>
<p class="text-xs text-gray-400 mt-1 bch-payout-info hidden">Block 840,127</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>
<script>
// Initialize Chart.js
const ctx = document.getElementById('earningsChart').getContext('2d');
let earningsChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['6h ago', '5h ago', '4h ago', '3h ago', '2h ago', '1h ago', 'Now'],
datasets: [
{
label: 'Fractal Bitcoin (FB)',
data: [0.0021, 0.0028, 0.0032, 0.0035, 0.0038, 0.0040, 0.0042],
borderColor: '#6D28D9',
backgroundColor: 'rgba(109, 40, 217, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
},
{
label: 'Bitcoin Cash (BCH)',
data: [0.0018, 0.0023, 0.0027, 0.0030, 0.0033, 0.0036, 0.0038],
borderColor: '#8DC351',
backgroundColor: 'rgba(141, 195, 81, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true,
hidden: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#E5E7EB',
font: {
size: 12
}
}
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: '#1F2937',
titleColor: '#E5E7EB',
bodyColor: '#D1D5DB',
borderColor: '#4B5563',
borderWidth: 1
}
},
scales: {
x: {
grid: {
color: '#374151'
},
ticks: {
color: '#9CA3AF'
}
},
y: {
grid: {
color: '#374151'
},
ticks: {
color: '#9CA3AF',
callback: function(value) {
return value + ' FB';
}
}
}
}
}
});
// Token selection functionality
const tokenOptions = document.querySelectorAll('.token-option');
tokenOptions.forEach(option => {
option.addEventListener('click', function() {
// Remove active class from all options
tokenOptions.forEach(opt => {
opt.classList.remove('active');
opt.classList.add('bg-gray-800');
opt.classList.remove('bg-gray-700');
});
// Add active class to clicked option
this.classList.add('active');
this.classList.remove('bg-gray-800');
this.classList.add('bg-gray-700');
const selectedToken = this.dataset.token;
// Update mining toggle button color
const miningToggle = document.getElementById('miningToggle');
if (selectedToken === 'fractal') {
miningToggle.classList.remove('gradient-bch');
miningToggle.classList.add('gradient-fractal');
// Update save config button
document.getElementById('saveConfig').classList.remove('gradient-bch');
document.getElementById('saveConfig').classList.add('gradient-fractal');
// Update wallet save button
document.getElementById('saveWalletAddresses').classList.remove('gradient-bch');
document.getElementById('saveWalletAddresses').classList.add('gradient-fractal');
// Update port open button
document.getElementById('openPortBtn').classList.remove('gradient-bch');
document.getElementById('openPortBtn').classList.add('gradient-fractal');
// Update pool address
document.getElementById('poolAddress').value = 'stratum+tcp://pool.fractalbitcoin.net';
} else {
miningToggle.classList.remove('gradient-fractal');
miningToggle.classList.add('gradient-bch');
// Update save config button
document.getElementById('saveConfig').classList.remove('gradient-fractal');
document.getElementById('saveConfig').classList.add('gradient-bch');
// Update wallet save button
document.getElementById('saveWalletAddresses').classList.remove('gradient-fractal');
document.getElementById('saveWalletAddresses').classList.add('gradient-bch');
// Update port open button
document.getElementById('openPortBtn').classList.remove('gradient-fractal');
document.getElementById('openPortBtn').classList.add('gradient-bch');
// Update pool address
document.getElementById('poolAddress').value = 'stratum+tcp://pool.bitcoincash.net';
}
// Toggle visibility of token-specific elements
document.querySelectorAll('.fractal-data').forEach(el => {
el.classList.toggle('hidden', selectedToken !== 'fractal');
});
document.querySelectorAll('.bch-data').forEach(el => {
el.classList.toggle('hidden', selectedToken !== 'bch');
});
// Update chart visibility
if (selectedToken === 'fractal') {
earningsChart.data.datasets[0].hidden = false;
earningsChart.data.datasets[1].hidden = true;
earningsChart.options.scales.y.ticks.callback = function(value) {
return value + ' FB';
};
} else {
earningsChart.data.datasets[0].hidden = true;
earningsChart.data.datasets[1].hidden = false;
earningsChart.options.scales.y.ticks.callback = function(value) {
return value + ' BCH';
};
}
earningsChart.update();
});
});
// 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';
// 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';
// 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 = 1; // 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.querySelectorAll('.fractal-progress').forEach(el => {
el.style.width = `${blockCompletion}%`;
});
document.querySelectorAll('.bch-progress').forEach(el => {
el.style.width = `${blockCompletion * 0.85}%`;
});
document.querySelectorAll('.countdown-timer').forEach(el => {
el.textContent = `≈ ${Math.floor(remainingTime / 60)}:${(remainingTime % 60).toString().padStart(2, '0')} min remaining`;
});
// Update progress text
document.querySelectorAll('.fractal-progress-text').forEach(el => {
el.textContent = `${Math.floor(blockCompletion)}% complete`;
});
document.querySelectorAll('.bch-progress-text').forEach(el => {
el.textContent = `${Math.floor(blockCompletion * 0.85)}% complete`;
});
// Update next block difficulty indicator
const nextDifficultyPos = Math.floor(nextBlockDifficulty * 100);
document.querySelectorAll('.fractal-difficulty-bar').forEach(el => {
el.style.width = `${nextDifficultyPos}%`;
});
document.querySelectorAll('.bch-difficulty-bar').forEach(el => {
el.style.width = `${nextDifficultyPos * 0.85}%`;
});
// Update difficulty text
const difficultyChange = (nextBlockDifficulty - currentDifficulty) / currentDifficulty * 100;
document.querySelectorAll('.fractal-difficulty').forEach(el => {
el.textContent = `${difficultyChange > 0 ? '+' : ''}${difficultyChange.toFixed(1)}%`;
});
document.querySelectorAll('.bch-difficulty').forEach(el => {
el.textContent = `${(difficultyChange * 0.6 > 0 ? '+' : '')}${(difficultyChange * 0.6).toFixed(1)}%`;
});
}
}
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);
// Update FB hashrate
document.querySelectorAll('.fractal-hashrate').forEach(el => {
if (el.textContent.includes('TH/s')) {
el.textContent = `${Math.max(0.8, newHashrate)} TH/s`;
} else if (el.textContent.includes('FB')) {
const estimatedPayout = (0.0001 * currentHashrate * (1 + blockCompletion / 100)).toFixed(4);
el.textContent = `${estimatedPayout} FB`;
// Update USD equivalent
const usdEquivalent = (parseFloat(estimatedPayout) * 295).toFixed(2); // Assuming $295/FB
if (el.nextElementSibling && el.nextElementSibling.classList.contains('fractal-usd')) {
el.nextElementSibling.textContent = `≈ $${usdEquivalent} USD`;
}
}
});
// Update BCH hashrate
document.querySelectorAll('.bch-hashrate').forEach(el => {
if (el.textContent.includes('TH/s')) {
el.textContent = `${Math.max(1.6, newHashrate * 2.1)} TH/s`;
} else if (el.textContent.includes('BCH')) {
const estimatedPayout = (0.00009 * currentHashrate * 2.1 * (1 + blockCompletion / 100)).toFixed(4);
el.textContent = `${estimatedPayout} BCH`;
// Update USD equivalent
const usdEquivalent = (parseFloat(estimatedPayout) * 300).toFixed(2); // Assuming $300/BCH
if (el.nextElementSibling && el.nextElementSibling.classList.contains('bch-usd')) {
el.nextElementSibling.textContent = `≈ $${usdEquivalent} USD`;
}
}
});
// 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 block numbers
document.querySelectorAll('.fractal-block').forEach(el => {
const currentBlock = parseInt(el.textContent.replace(/,/g, ''));
if (blockCompletion >= 100) {
el.textContent = (currentBlock + 1).toLocaleString();
}
});
document.querySelectorAll('.bch-block').forEach(el => {
const currentBlock = parseInt(el.textContent.replace(/,/g, ''));
if (blockCompletion >= 100) {
el.textContent = (currentBlock + 1).toLocaleString();
}
});
// Update payout amounts
document.querySelectorAll('.fractal-payout').forEach(el => {
const currentPayout = parseFloat(el.textContent);
const newPayout = (currentPayout + (Math.random() * 0.001 - 0.0005)).toFixed(4);
el.textContent = `${Math.max(0.01, newPayout)} FB`;
});
document.querySelectorAll('.bch-payout').forEach(el => {
const currentPayout = parseFloat(el.textContent);
const newPayout = (currentPayout + (Math.random() * 0.0009 - 0.00045)).toFixed(4);
el.textContent = `${Math.max(0.01, newPayout)} BCH`;
});
// Update earnings chart with new data point
if (blockCompletion >= 100) {
const chartData = earningsChart.data.datasets[0].data;
const bchChartData = earningsChart.data.datasets[1].data;
// Remove first element and add new one at the end
chartData.shift();
bchChartData.shift();
// Add new random value based on current hashrate
const fbValue = parseFloat(document.querySelector('.fractal-earnings').textContent);
const bchValue = parseFloat(document.querySelector('.bch-earnings').textContent);
chartData.push(fbValue);
bchChartData.push(bchValue);
earningsChart.update();
}
}
}, 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';
const selectedToken = document.querySelector('.token-option.active').dataset.token;
const placeholder = selectedToken === 'fractal' ? 'FB Address' : 'BCH Address';
const prefix = selectedToken === 'fractal' ? 'FB' : 'BCH';
newAddress.innerHTML = `
<div class="flex items-center">
<div class="flex-shrink-0 bg-${selectedToken}-primary bg-opacity-20 p-2 rounded-full">
<i class="fas fa-wallet text-${selectedToken}-primary"></i>
</div>
<div class="ml-3 flex-grow">
<input type="text" placeholder="${placeholder}" 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;
}
const selectedToken = document.querySelector('.token-option.active').dataset.token;
const tokenName = selectedToken === 'fractal' ? 'Fractal Bitcoin (FB)' : 'Bitcoin Cash (BCH)';
alert(`${tokenName} 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
});
// Port opening functionality
const openPortBtn = document.getElementById('openPortBtn');
const portToggle = document.getElementById('portToggle');
const miningPort = document.getElementById('miningPort');
openPortBtn.addEventListener('click', function() {
if (!portToggle.checked) {
alert('Please enable port forwarding first');
return;
}
const port = parseInt(miningPort.value);
if (isNaN(port) || port < 1 || port > 65535) {
alert('Please enter a valid port number (1-65535)');
return;
}
// Simulate port opening (in a real app, this would make an API call)
alert(`Attempting to open port ${port} for mining...\n\nNote: This is a simulation. In a real application, this would:\n1. Configure your router's port forwarding\n2. Adjust firewall settings\n3. Start listening for mining connections`);
// Update UI to show port is open
openPortBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Port Open';
openPortBtn.classList.remove('gradient-fractal', 'gradient-bch');
openPortBtn.classList.add('bg-green-600');
// Disable the button for 5 seconds to simulate the operation
openPortBtn.disabled = true;
setTimeout(() => {
openPortBtn.disabled = false;
}, 5000);
});
// Save configuration
const saveConfig = document.getElementById('saveConfig');
saveConfig.addEventListener('click', function() {
const poolAddress = document.getElementById('poolAddress').value;
const poolPort = document.getElementById('poolPort').value;
const username = document.getElementById('minerUsername').value;
if (!poolAddress || !poolPort || !username) {
alert('Please fill in all required fields');
return;
}
const selectedToken = document.querySelector('.token-option.active').dataset.token;
const tokenName = selectedToken === 'fractal' ? 'Fractal Bitcoin' : 'Bitcoin Cash';
alert(`${tokenName} mining configuration saved successfully!\n\nPool: ${poolAddress}:${poolPort}\nUsername: ${username}\n\nNote: This is a simulation. In a real application, this would save your settings.`);
// Update UI to show success
saveConfig.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Configuration Saved';
saveConfig.classList.remove('gradient-fractal', 'gradient-bch');
saveConfig.classList.add('bg-green-600');
// Reset button after 3 seconds
setTimeout(() => {
saveConfig.innerHTML = 'Save Configuration';
saveConfig.classList.remove('bg-green-600');
const selectedToken = document.querySelector('.token-option.active').dataset.token;
saveConfig.classList.add(selectedToken === 'fractal' ? 'gradient-fractal' : 'gradient-bch');
}, 3000);
});
</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/privatemnr-fb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>