Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CookieCoin Miner</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"> | |
| <style> | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .coin-spin { | |
| animation: spin 4s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotateY(0deg); } | |
| 100% { transform: rotateY(360deg); } | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cookie-bite text-3xl text-yellow-400 mr-3"></i> | |
| <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-yellow-200"> | |
| CookieCoin | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-gray-800 px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-network-wired text-yellow-400 mr-2"></i> | |
| <span id="network-status" class="text-sm">Syncing...</span> | |
| </div> | |
| <div class="bg-gray-800 px-4 py-2 rounded-full"> | |
| <span id="current-time" class="text-sm">00:00:00</span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="gradient-bg rounded-2xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Mining Dashboard</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm opacity-75">Current Session</span> | |
| <div class="w-3 h-3 rounded-full bg-green-400 animate-pulse"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm opacity-75">CookieCoins</span> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| </div> | |
| <div class="text-2xl font-bold" id="coin-balance">0.00</div> | |
| <div class="text-xs opacity-50 mt-1">≈ $0.00</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm opacity-75">Mining Rate</span> | |
| <i class="fas fa-bolt text-yellow-400"></i> | |
| </div> | |
| <div class="text-2xl font-bold" id="mining-rate">0.5</div> | |
| <div class="text-xs opacity-50 mt-1">CC/min</div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm opacity-75">Active Sites</span> | |
| <i class="fas fa-globe text-yellow-400"></i> | |
| </div> | |
| <div class="text-2xl font-bold" id="active-sites">0</div> | |
| <div class="text-xs opacity-50 mt-1">Mining</div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm opacity-75">Session Progress</span> | |
| <span class="text-sm" id="session-time">00:00:00</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div class="bg-yellow-400 h-2.5 rounded-full progress-bar" id="session-progress" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="claim-btn" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full flex items-center pulse"> | |
| <i class="fas fa-gem mr-2"></i> | |
| Claim CookieCoins | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-800 rounded-2xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4">Top Earning Sites</h2> | |
| <div class="space-y-3" id="top-sites"> | |
| <div class="flex items-center justify-between py-2 px-3 bg-gray-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-globe text-sm"></i> | |
| </div> | |
| <span>No data yet</span> | |
| </div> | |
| <span class="text-yellow-400">0 CC</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-800 rounded-2xl p-6 shadow-lg sticky top-8"> | |
| <h2 class="text-xl font-bold mb-6">CookieCoin</h2> | |
| <div class="flex justify-center mb-6"> | |
| <div class="relative w-32 h-32 flex items-center justify-center"> | |
| <div class="absolute inset-0 rounded-full bg-yellow-400 opacity-20 blur-lg"></div> | |
| <div class="relative w-24 h-24 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg coin-spin"> | |
| <span class="text-2xl font-bold text-gray-900">CC</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <span class="text-sm opacity-75 block">Current Value</span> | |
| <span class="font-bold">1 CC = $0.0012</span> | |
| </div> | |
| <div> | |
| <span class="text-sm opacity-75 block">Total Mined</span> | |
| <span class="font-bold" id="total-mined">0 CC</span> | |
| </div> | |
| <div> | |
| <span class="text-sm opacity-75 block">Network Hashrate</span> | |
| <span class="font-bold">4.2 TH/s</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-semibold mb-3">How it works</h3> | |
| <ul class="space-y-3 text-sm"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-cookie text-yellow-400 mt-1 mr-2"></i> | |
| <span>We analyze browser cookies to determine time spent on sites</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-clock text-yellow-400 mt-1 mr-2"></i> | |
| <span>More time = More CookieCoins (CC) mined</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-chart-line text-yellow-400 mt-1 mr-2"></i> | |
| <span>Productive sites earn bonus mining rates</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <button id="connect-wallet" class="w-full mt-8 bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fab fa-ethereum mr-2"></i> | |
| Connect Wallet | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize variables | |
| let coinBalance = 0; | |
| let miningRate = 0.5; // Base mining rate (CC per minute) | |
| let activeSites = 0; | |
| let sessionSeconds = 0; | |
| let totalMined = 0; | |
| let miningInterval; | |
| let sessionInterval; | |
| // DOM elements | |
| const coinBalanceEl = document.getElementById('coin-balance'); | |
| const miningRateEl = document.getElementById('mining-rate'); | |
| const activeSitesEl = document.getElementById('active-sites'); | |
| const sessionTimeEl = document.getElementById('session-time'); | |
| const sessionProgressEl = document.getElementById('session-progress'); | |
| const claimBtn = document.getElementById('claim-btn'); | |
| const topSitesEl = document.getElementById('top-sites'); | |
| const totalMinedEl = document.getElementById('total-mined'); | |
| const currentTimeEl = document.getElementById('current-time'); | |
| const networkStatusEl = document.getElementById('network-status'); | |
| const connectWalletBtn = document.getElementById('connect-wallet'); | |
| // Update current time | |
| function updateCurrentTime() { | |
| const now = new Date(); | |
| currentTimeEl.textContent = now.toLocaleTimeString(); | |
| } | |
| setInterval(updateCurrentTime, 1000); | |
| updateCurrentTime(); | |
| // Simulate network status changes | |
| setTimeout(() => { | |
| networkStatusEl.textContent = "Online"; | |
| }, 2000); | |
| // Start mining session | |
| function startMiningSession() { | |
| // Simulate detecting active sites from cookies | |
| activeSites = Math.floor(Math.random() * 5) + 1; | |
| activeSitesEl.textContent = activeSites; | |
| // Adjust mining rate based on active sites | |
| miningRate = 0.5 + (activeSites * 0.2); | |
| miningRateEl.textContent = miningRate.toFixed(1); | |
| // Start session timer | |
| sessionInterval = setInterval(() => { | |
| sessionSeconds++; | |
| const hours = Math.floor(sessionSeconds / 3600); | |
| const minutes = Math.floor((sessionSeconds % 3600) / 60); | |
| const seconds = sessionSeconds % 60; | |
| sessionTimeEl.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| // Update progress bar (max 1 hour session) | |
| const progressPercent = Math.min((sessionSeconds / 3600) * 100, 100); | |
| sessionProgressEl.style.width = `${progressPercent}%`; | |
| // Change color when session is complete | |
| if (progressPercent >= 100) { | |
| sessionProgressEl.classList.remove('bg-yellow-400'); | |
| sessionProgressEl.classList.add('bg-green-400'); | |
| claimBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600'); | |
| claimBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| claimBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Session Complete!'; | |
| } | |
| }, 1000); | |
| // Start mining coins | |
| miningInterval = setInterval(() => { | |
| const coinsMined = miningRate / 60; // Convert rate to per second | |
| coinBalance += coinsMined; | |
| totalMined += coinsMined; | |
| coinBalanceEl.textContent = coinBalance.toFixed(2); | |
| totalMinedEl.textContent = `${totalMined.toFixed(2)} CC`; | |
| // Update estimated USD value | |
| const usdValue = coinBalance * 0.0012; | |
| document.querySelector('#coin-balance + .text-xs').textContent = `≈ $${usdValue.toFixed(4)}`; | |
| }, 1000); | |
| // Simulate top earning sites | |
| updateTopSites(); | |
| } | |
| // Update top earning sites | |
| function updateTopSites() { | |
| const sites = [ | |
| { name: "GitHub", icon: "fab fa-github", coins: (Math.random() * 5 + 1).toFixed(2) }, | |
| { name: "Stack Overflow", icon: "fab fa-stack-overflow", coins: (Math.random() * 4 + 1).toFixed(2) }, | |
| { name: "Medium", icon: "fab fa-medium", coins: (Math.random() * 3 + 1).toFixed(2) }, | |
| { name: "YouTube", icon: "fab fa-youtube", coins: (Math.random() * 2).toFixed(2) }, | |
| { name: "Twitter", icon: "fab fa-twitter", coins: (Math.random() * 1).toFixed(2) } | |
| ].sort((a, b) => b.coins - a.coins); | |
| topSitesEl.innerHTML = ''; | |
| sites.forEach(site => { | |
| const siteEl = document.createElement('div'); | |
| siteEl.className = 'flex items-center justify-between py-2 px-3 bg-gray-700 rounded-lg'; | |
| siteEl.innerHTML = ` | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3"> | |
| <i class="${site.icon} text-sm"></i> | |
| </div> | |
| <span>${site.name}</span> | |
| </div> | |
| <span class="text-yellow-400">${site.coins} CC</span> | |
| `; | |
| topSitesEl.appendChild(siteEl); | |
| }); | |
| } | |
| // Claim coins | |
| claimBtn.addEventListener('click', () => { | |
| if (coinBalance > 0) { | |
| // Show success animation | |
| claimBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Claimed!'; | |
| claimBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600', 'pulse'); | |
| claimBtn.classList.add('bg-green-500', 'hover:bg-green-600'); | |
| // Reset session | |
| setTimeout(() => { | |
| clearInterval(miningInterval); | |
| clearInterval(sessionInterval); | |
| sessionSeconds = 0; | |
| sessionTimeEl.textContent = '00:00:00'; | |
| sessionProgressEl.style.width = '0%'; | |
| sessionProgressEl.classList.remove('bg-green-400'); | |
| sessionProgressEl.classList.add('bg-yellow-400'); | |
| claimBtn.innerHTML = '<i class="fas fa-gem mr-2"></i> Claim CookieCoins'; | |
| claimBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); | |
| claimBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600', 'pulse'); | |
| // Start new session | |
| startMiningSession(); | |
| }, 2000); | |
| } | |
| }); | |
| // Connect wallet | |
| connectWalletBtn.addEventListener('click', () => { | |
| connectWalletBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...'; | |
| setTimeout(() => { | |
| connectWalletBtn.innerHTML = '<i class="fab fa-ethereum mr-2"></i> 0x7f...3a4b'; | |
| connectWalletBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600'); | |
| connectWalletBtn.classList.add('bg-blue-600', 'hover:bg-blue-700'); | |
| }, 1500); | |
| }); | |
| // Start initial session | |
| startMiningSession(); | |
| </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=Juno360219/cookie-coin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |