Here's a donation page with Three.js for visual effects: Support Our Cause

Support Our Mission

Your donation helps us continue our important work.

body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; overflow: hidden; background: linear-gradient(135deg, #1a1a2e, #16213e); color: white; } .container { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; height: 100vh; } .donation-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 15px; padding: 2rem; width: 90%; max-width: 500px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); text-align: center; } h1 { margin-bottom: 1rem; } .donation-options { display: flex; justify-content: space-between; margin: 2rem 0; } .donation-amount { background: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 0.8rem 1.5rem; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; } .donation-amount:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-3px); } .custom-amount { display: flex; flex-direction: column; gap: 1rem; } input { padding: 0.8rem; border-radius: 5px; border: none; background: rgba(255, 255, 255, 0.2); color: white; } #donate-btn { background: #4CAF50; color: white; border: none; padding: 1rem; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } #donate-btn:hover { background: #45a049; transform: translateY(-3px); } #three-canvas { position: fixed; top: 0; left: 0; z-index: 1; } // Three.js setup const canvas = document.getElementById('three-canvas'); const renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // Create floating particles const particlesGeometry = new THREE.BufferGeometry(); const particleCount = 1000; const posArray = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 10; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.02, color: 0x4CAF50, transparent: true, opacity: 0.8 }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); // Animation loop function animate() { requestAnimationFrame(animate); particlesMesh.rotation.x += 0.0005; particlesMesh.rotation.y += 0.0005; renderer.render(scene, camera); } animate(); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Donation functionality const amountButtons = document.querySelectorAll('.donation-amount'); const customAmountInput = document.getElementById('custom-amount'); const donateButton = document.getElementById('donate-btn'); let selectedAmount = 0; amountButtons.forEach(button => { button.addEventListener('click', () => { amountButtons.forEach(btn => btn.style.background = 'rgba(255, 255, 255, 0.2)'); button.style.background = 'rgba(76, 175, 80, 0.6)'; selectedAmount = parseInt(button.dataset.amount); customAmountInput.value = ''; }); }); customAmountInput.addEventListener('input', () => { amountButtons.forEach(btn => btn.style.background = 'rgba(255, 255, 255, 0.2)'); selectedAmount = parseInt(customAmountInput.value) || 0; }); donateButton.addEventListener('click', () => { const amount = selectedAmount || parseInt(customAmountInput.value) || 0; if (amount > 0) { alert(`Thank you for your donation of $${amount}!`); // In a real implementation, you would process the payment here } else { alert('Please select or enter a valid donation amount.'); } });