I'll help you create a comprehensive Bitcoin donation website with all the requested features. Here's the complete implementation: Bitcoin Donation Lottery

Bitcoin Donation Lottery

Donate BTC, earn points, and win prizes!

Donate Bitcoin

Send BTC to:

bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh

Verify Your Donation

Current Lottery

Next Draw In:

00d 00h 00m 00s

Current Prize Pool:

0.00 BTC

Leaderboard

Rank	Name	Points	Donated

:root { --primary: #f7931a; --primary-dark: #e07a0c; --secondary: #1a1a2e; --text: #333; --text-light: #f8f9fa; --bg: #f8f9fa; --card-bg: rgba(255, 255, 255, 0.8); --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } [data-theme="dark"] { --primary: #f7931a; --primary-dark: #e07a0c; --secondary: #f8f9fa; --text: #f8f9fa; --text-light: #333; --bg: #1a1a2e; --card-bg: rgba(26, 26, 46, 0.8); --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg); color: var(--text); transition: var(--transition); overflow-x: hidden; min-height: 100vh; } .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .bitcoin-loader { font-size: 5rem; color: var(--primary); animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 1000; } #themeBtn { background: var(--card-bg); border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: var(--shadow); color: var(--primary); font-size: 1.2rem; transition: var(--transition); } #themeBtn:hover { transform: scale(1.1); } .cursor, .cursor-follower { position: fixed; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 999; mix-blend-mode: difference; } .cursor { width: 8px; height: 8px; background-color: var(--primary); transition: width 0.2s, height 0.2s; } .cursor-follower { width: 30px; height: 30px; border: 2px solid var(--primary); transition: all 0.3s ease; } .cursor.active { width: 50px; height: 50px; opacity: 0.5; } .cursor-follower.active { width: 60px; height: 60px; background-color: rgba(247, 147, 26, 0.2); } #threejs-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .glass { background: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px; box-shadow: var(--shadow); padding: 2rem; margin: 1rem; transition: var(--transition); } header { text-align: center; margin: 2rem auto; max-width: 800px; } header h1 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary); } header p { font-size: 1.2rem; opacity: 0.8; } main { max-width: 1200px; margin: 0 auto; padding: 1rem; } section { margin-bottom: 2rem; } h2 { color: var(--primary); margin-bottom: 1.5rem; font-size: 1.8rem; } .wallet-info { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; } .wallet-address { flex: 1; min-width: 300px; } .wallet-address p:first-child { font-weight: bold; margin-bottom: 0.5rem; } #btcAddress { font-family: monospace; background-color: rgba(0, 0, 0, 0.1); padding: 0.5rem; border-radius: 5px; word-break: break-all; margin: 1rem 0; } #copyBtn { background-color: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; transition: var(--transition); } #copyBtn:hover { background-color: var(--primary-dark); } #qrcode { background-color: white; padding: 1rem; border-radius: 5px; box-shadow: var(--shadow); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; } .form-group input { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); color: var(--text); transition: var(--transition); } .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(247, 147, 26, 0.2); } button[type="submit"], .draw-btn { background-color: var(--primary); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 5px; cursor: pointer; font-weight: bold; transition: var(--transition); width: 100%; } button[type="submit"]:hover, .draw-btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); } .lottery-info { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } .countdown, .prize-pool { flex: 1; min-width: 250px; } .countdown h3, .prize-pool h3 { font-size: 1.2rem; margin-bottom: 1rem; } #countdown { display: flex; gap: 1rem; font-size: 1.5rem; font-weight: bold; } #prizeAmount { font-size: 1.5rem; font-weight: bold; color: var(--primary); } .leaderboard-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { padding: 1rem; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } th { background-color: rgba(247, 147, 26, 0.1); font-weight: bold; } tr:hover { background-color: rgba(0, 0, 0, 0.05); } @media (max-width: 768px) { header h1 { font-size: 2rem; } header p { font-size: 1rem; } .wallet-info { flex-direction: column; } .lottery-info { flex-direction: column; } } // Three.js Background let scene, camera, renderer, particles; const particleCount = 500; function initThreeJS() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('threejs-bg').appendChild(renderer.domElement); // Create particles const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); const sizes = new Float32Array(particleCount); for (let i = 0; i < particleCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 10; positions[i * 3 + 1] = (Math.random() - 0.5) * 10; positions[i * 3 + 2] = (Math.random() - 0.5) * 10; colors[i * 3] = 0.97; colors[i * 3 + 1] = 0.58; colors[i * 3 + 2] = 0.1; sizes[i] = Math.random() * 0.5; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true, transparent: true, opacity: 0.8, sizeAttenuation: true }); particles = new THREE.Points(geometry, material); scene.add(particles); window.addEventListener('resize', onWindowResize); animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); particles.rotation.x += 0.0005; particles.rotation.y += 0.001; renderer.render(scene, camera); } // Custom Cursor function initCustomCursor() { const cursor = document.querySelector('.cursor'); const cursorFollower = document.querySelector('.cursor-follower'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; setTimeout(() => { cursorFollower.style.left = e.clientX + 'px'; cursorFollower.style.top = e.clientY + 'px'; }, 100); }); document.querySelectorAll('a, button, input').forEach(el => { el.addEventListener('mouseenter', () => { cursor.classList.add('active'); cursorFollower.classList.add('active'); }); el.addEventListener('mouseleave', () => { cursor.classList.remove('active'); cursorFollower.classList.remove('active'); }); }); } // QR Code Generator function generateQRCode() { const btcAddress = document.getElementById('btcAddress').textContent; new QRCode(document.getElementById('qrcode'), { text: btcAddress, width: 150, height: 150, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); } // Theme Toggle function initThemeToggle() { const themeBtn = document.getElementById('themeBtn'); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); // Check for saved theme or use preferred color scheme const currentTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', currentTheme); // Update button icon updateThemeIcon(currentTheme); themeBtn.addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); updateThemeIcon(newTheme); }); } function updateThemeIcon(theme) { const themeBtn = document.getElementById('themeBtn'); if (theme === 'dark') { themeBtn.innerHTML = ''; } else { themeBtn.innerHTML = ''; } } // Countdown Timer function initCountdown() { // Set the date for the next draw (7 days from now) const drawDate = new Date(); drawDate.setDate(drawDate.getDate() + 7); function updateCountdown() { const now = new Date().getTime(); const distance = drawDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById('days').textContent = days.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); if (distance < 0) { clearInterval(countdownInterval); document.getElementById('countdown').innerHTML = 'DRAW IN PROGRESS!'; } } updateCountdown(); const countdownInterval = setInterval(updateCountdown, 1000); } // Donation Verification function initDonationVerification() { const verifyForm = document.getElementById('verifyForm'); verifyForm.addEventListener('submit', async (e) => { e.preventDefault(); const name = document.getElementById('name').value.trim(); const txid = document.getElementById('txid').value.trim(); if (!name || !txid) { showToast('Please fill in all fields', 'error'); return; } try { // Show loading state const submitBtn = verifyForm.querySelector('button[type="submit"]'); const originalBtnText = submitBtn.textContent; submitBtn.innerHTML = ' Verifying...'; submitBtn.disabled = true; // Verify transaction using BlockCypher API const response = await fetch(`https://api.blockcypher.com/v1/btc/main/txs/${txid}`); if (!response.ok) { throw new Error('Transaction not found or invalid'); } const data = await response.json(); // Check if transaction is confirmed if (data.confirmations < 1) { throw new Error('Transaction not yet confirmed'); } // Find our address in outputs const ourAddress = document.getElementById('btcAddress').textContent; const output = data.outputs.find(out => out.addresses && out.addresses.includes(ourAddress) ); if (!output) { throw new Error('Transaction not sent to our address'); } // Calculate donation amount in BTC const satoshis = output.value; const btcAmount = satoshis / 100000000; if (btcAmount < 0.00001) { throw new Error('Donation amount too small (min 0.00001 BTC)'); } // Calculate points (1 point per 0.0001 BTC) const points = Math.floor(btcAmount / 0.0001); // Save donation record const donation = { name, txid, amount: btcAmount, points, date: new Date().toISOString() }; let donations = JSON.parse(localStorage.getItem('donations') || '[]'); // Check if TXID already exists if (donations.some(d => d.txid === txid)) { throw new Error('This transaction has already been registered'); } donations.push(donation); localStorage.setItem('donations', JSON.stringify(donations)); // Update UI updateLeaderboard(); updatePrizePool(); // Show success message showToast(`Success! You earned ${points} points for donating ${btcAmount.toFixed(8)} BTC`, 'success'); // Reset form verifyForm.reset(); } catch (error) { showToast(error.message, 'error'); } finally { // Reset button state const submitBtn = verifyForm.querySelector('button[type="submit"]'); submitBtn.textContent = originalBtnText; submitBtn.disabled = false; } }); } // Leaderboard function updateLeaderboard() { const donations = JSON.parse(localStorage.getItem('donations') || '[]'); const leaderboardBody = document.getElementById('leaderboardBody'); // Clear existing rows leaderboardBody.innerHTML = ''; if (donations.length === 0) { const row = document.createElement('tr'); row.innerHTML = 'No donations yet'; leaderboardBody.appendChild(row); return; } // Group by name and sum points const participants = {}; donations.forEach(donation => { if (!participants[donation.name]) { participants[donation.name] = { name: donation.name, points: 0, totalDonated: 0 }; } participants[donation.name].points += donation.points; participants[donation.name].totalDonated += donation.amount; }); // Convert to array and sort by points const sortedParticipants = Object.values(participants).sort((a, b) => b.points - a.points); // Add rows to table sortedParticipants.forEach((participant, index) => { const row = document.createElement('tr'); row.innerHTML = ` ${index + 1} ${participant.name} ${participant.points} ${participant.totalDonated.toFixed(8)} BTC `; leaderboardBody.appendChild(row); }); } // Prize Pool function updatePrizePool() { const donations = JSON.parse(localStorage.getItem('donations') || '[]'); const totalDonated = donations.reduce((sum, donation) => sum + donation.amount, 0); // 10% of total donations goes to prize pool const prizePool = totalDonated * 0.1; document.getElementById('prizeAmount').textContent = prizePool.toFixed(8) + ' BTC'; } // Lottery Draw function initLotteryDraw() { const drawBtn = document.getElementById('drawBtn'); drawBtn.addEventListener('click', () => { const donations = JSON.parse(localStorage.getItem('donations') || '[]'); if (donations.length === 0) { showToast('No participants to draw from', 'error'); return; } // Group by name and sum points (for weighted lottery) const participants = {}; donations.forEach(donation => { if (!participants[donation.name]) { participants[donation.name] = 0; } participants[donation.name] += donation.points; }); // Create weighted entries array const entries = []; Object.entries(participants).forEach(([name, points]) => { for (let i = 0; i < points; i++) { entries.push(name); } }); // Draw random winner const winner = entries[Math.floor(Math.random() * entries.length)]; // Show winner showToast(`🎉 Winner: ${winner}! 🎉`, 'success', 10000); }); } // Toast Notifications function showToast(message, type = 'info', duration = 3000) { Toastify({ text: message, duration: duration, close: true, gravity: 'top', position: 'right', backgroundColor: type === 'error' ? '#ff4444' : type === 'success' ? '#00C851' : '#33b5e5', stopOnFocus: true }).showToast(); } // Copy BTC Address function initCopyButton() { const copyBtn = document.getElementById('copyBtn'); const btcAddress = document.getElementById('btcAddress').textContent; copyBtn.addEventListener('click', () => { navigator.clipboard.writeText(btcAddress) .then(() => showToast('BTC address copied to clipboard!', 'success')) .catch(() => showToast('Failed to copy address', 'error')); }); } // GSAP Animations function initAnimations() { gsap.registerPlugin(ScrollTrigger); // Animate sections on scroll gsap.utils.toArray('section').forEach(section => { gsap.from(section, { scrollTrigger: { trigger: section, start: 'top 80%', toggleActions: 'play none none none' }, opacity: 0, y: 50, duration: 0.8 }); }); // Header animation gsap.from('header', { y: -50, opacity: 0, duration: 1, delay: 0.5 }); } // Preloader function initPreloader() { window.addEventListener('load', () => { const preloader = document.querySelector('.preloader'); gsap.to(preloader, { opacity: 0, duration: 0.5, onComplete: () => { preloader.style.display = 'none'; } }); }); } // Initialize everything document.addEventListener('DOMContentLoaded', () => { initThreeJS(); initCustomCursor(); generateQRCode(); initThemeToggle(); initCountdown(); initDonationVerification(); initLotteryDraw(); initCopyButton(); initAnimations(); initPreloader(); // Load existing data updateLeaderboard(); updatePrizePool(); });