Spaces:
Running
Running
File size: 6,084 Bytes
e40e246 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | class CustomMiningDashboard extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.mining-card {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
transition: transform 0.3s ease;
}
.mining-card:hover {
transform: translateY(-5px);
}
.progress-bar {
height: 10px;
background: linear-gradient(90deg, #f6ad55 0%, #f687b3 100%);
animation: progress 2s ease-in-out infinite;
}
@keyframes progress {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
<div class="mining-card rounded-xl shadow-lg overflow-hidden border border-gray-700">
<div class="bg-gray-800 px-6 py-4 border-b border-gray-700">
<h2 class="text-xl font-bold flex items-center">
<i data-feather="cpu" class="mr-2 text-yellow-400"></i> Mining Dashboard
</h2>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-gray-800 rounded-lg p-4 shadow">
<div class="flex items-center justify-between mb-2">
<h3 class="text-lg font-semibold">Mining Status</h3>
<span id="miningStatus" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-900 text-green-200">
<span class="h-2 w-2 rounded-full bg-green-400 mr-1"></span>
Ready
</span>
</div>
<div class="flex space-x-4 mt-4">
<button id="startMiningBtn" onclick="startMining()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
<i data-feather="play" class="mr-2"></i> Start Mining
</button>
<button id="stopMiningBtn" onclick="stopMining()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md flex items-center hidden">
<i data-feather="stop-circle" class="mr-2"></i> Stop Mining
</button>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-4 shadow">
<h3 class="text-lg font-semibold mb-2">Mining Statistics</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-400">Hash Rate:</span>
<span class="font-mono" id="miningPowerValue">1.00</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Mined BTC:</span>
<span class="font-mono" id="minedAmount">0.00000000</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Estimated Daily:</span>
<span class="font-mono">0.00001234 BTC</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-4 shadow mb-6">
<h3 class="text-lg font-semibold mb-4">Mining Progress</h3>
<div class="mb-2 flex justify-between text-sm">
<span>Current Block: 789,456</span>
<span>Next Block ETA: 4m 23s</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2.5 mb-2">
<div class="progress-bar h-2.5 rounded-full" style="width: 45%"></div>
</div>
<div class="text-xs text-gray-400">Processing shares: 124/256</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<button onclick="upgradeMiningPower()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-md flex items-center justify-between">
<div class="flex items-center">
<i data-feather="zap" class="mr-2"></i>
<span>Upgrade Mining Power</span>
</div>
<span class="text-xs bg-blue-800 px-2 py-1 rounded">0.0001 BTC</span>
</button>
<button onclick="withdrawToWallet()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md flex items-center justify-between">
<div class="flex items-center">
<i data-feather="dollar-sign" class="mr-2"></i>
<span>Withdraw to Wallet</span>
</div>
<span class="text-xs bg-purple-800 px-2 py-1 rounded">Min 0.00005 BTC</span>
</button>
</div>
</div>
</div>
<script>feather.replace();</script>
`;
}
}
customElements.define('custom-mining-dashboard', CustomMiningDashboard); |