Hugging Face's logo

Spaces:
privateuserh
/
privatemnn-fbv1-01
Running

App Files Community
privatemnn-fbv1-01 / index.html
privateuserh's picture
privateuserh
Add 2 files
343c844 verified
raw
history blame contribute delete
53.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FB Miner Pro | Fractal Bitcoin 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: {
fb: {
primary: '#6D28D9',
dark: '#5B21B6',
light: '#EDE9FE',
},
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, #6D28D9, #5B21B6, #6D28D9);
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: #6D28D9;
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(109, 40, 217, 0.05);
}
.difficulty-indicator {
width: 100%;
height: 4px;
background: linear-gradient(to right, #6D28D9, #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="fas fa-project-diagram text-fb-primary text-2xl mr-2"></i>
<span class="text-xl font-bold">FB<span class="text-fb-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">
<!-- 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-fb-primary bg-opacity-20 p-3 rounded-full">
<i class="fas fa-microchip text-fb-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">FB/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">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">0.0128 <span class="text-sm text-gray-400">FB</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-fb-primary focus:border-fb-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-fb-primary focus:border-fb-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-solo.fairpool.network" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-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-fb-primary focus:border-fb-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="privatemnrfb" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-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-fb-primary focus:border-fb-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">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-fb-primary focus:ring-fb-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-fb-primary focus:border-fb-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-fb-primary focus:border-fb-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-bg 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-fb-primary focus:ring-fb-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-fb-primary focus:ring-fb-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-fb-primary focus:border-fb-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-fb-primary hover:bg-fb-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-fb-primary bg-opacity-20 p-2 rounded-full">
<i class="fas fa-wallet text-fb-primary"></i>
</div>
<div class="ml-3 flex-grow">
<input type="text" value="bc1q3azkahp4tl72hflssdfz2rp3h383erjyj848ny" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="FB Address">
<input type="text" value="privatemnrfb" 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-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 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">1.24 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">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 1 miner</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">
<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">0.0128 FB</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>
<script>
// Initialize earnings chart
const ctx = document.getElementById('earningsChart').getContext('2d');
const earningsChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'FB Earnings',
data: [0.015, 0.018, 0.022, 0.025, 0.028, 0.032, 0.035, 0.038, 0.042, 0.045, 0.048, 0.052],
borderColor: '#6D28D9',
backgroundColor: 'rgba(109, 40, 217, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true,
pointBackgroundColor: '#6D28D9',
pointBorderColor: '#fff',
pointHoverRadius: 5,
pointHoverBackgroundColor: '#6D28D9',
pointHoverBorderColor: '#fff',
pointHitRadius: 10,
pointBorderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: '#1F2937',
titleColor: '#E5E7EB',
bodyColor: '#D1D5DB',
borderColor: '#4B5563',
borderWidth: 1,
displayColors: false,
callbacks: {
label: function(context) {
return `Earnings: ${context.parsed.y.toFixed(3)} FB`;
}
}
}
},
scales: {
x: {
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: '#9CA3AF'
}
},
y: {
grid: {
color: 'rgba(255, 255, 255, 0.05)'
},
ticks: {
color: '#9CA3AF',
callback: function(value) {
return value.toFixed(2) + ' FB';
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
// 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 = 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.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('FB') && !el.textContent.includes('792,451')) {
el.textContent = `${estimatedPayout} FB`;
// Update USD equivalent
const usdEquivalent = (parseFloat(estimatedPayout) * 295).toFixed(2); // Assuming $295/FB
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="FB 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
});
// 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-bg');
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;
}
alert(`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-bg');
saveConfig.classList.add('bg-green-600');
// Reset button after 3 seconds
setTimeout(() => {
saveConfig.innerHTML = 'Save Configuration';
saveConfig.classList.remove('bg-green-600');
saveConfig.classList.add('gradient-bg');
}, 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/privatemnn-fbv1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>