<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Earnable</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background: #000;
            position: relative;
        }

        h1 {
            font-size: 48px;
            color: white;
            z-index: 10;
            position: relative;
            text-decoration: none; /* Removed the underline */
            cursor: pointer;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* Soft glow effect */
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="background"></canvas>
    <h1 onclick="location.href='mailto:info@earnable.gg';">info@earnable.gg</h1>

    <script>
        const canvas = document.getElementById('background');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particles = [];
        const colors = ['#006400', '#00FF00', '#008000'];  // Dark and bright greens

        // Particle class to simulate fluid motion
        class Particle {
            constructor(x, y, radius, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.speedX = Math.random() * 0.5 - 0.25; // Random horizontal speed
                this.speedY = Math.random() * 0.5 - 0.25; // Random vertical speed
                this.alpha = Math.random() * 0.3 + 0.5; // Set initial transparency
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(0, 100, 0, ${this.alpha})`;  // Semi-transparent green
                ctx.fill();
                ctx.closePath();
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                // Particle movement with wraparound effect
                if (this.x - this.radius > canvas.width) {
                    this.x = 0;
                } else if (this.x + this.radius < 0) {
                    this.x = canvas.width;
                }

                if (this.y - this.radius > canvas.height) {
                    this.y = 0;
                } else if (this.y + this.radius < 0) {
                    this.y = canvas.height;
                }
            }
        }

        // Initialize particles
        function initParticles() {
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const radius = Math.random() * 3 + 1; // Random radius between 1 and 4
                const color = colors[Math.floor(Math.random() * colors.length)];
                particles.push(new Particle(x, y, radius, color));
            }
        }

        // Animate the particles with smooth movement
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas before redrawing
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });
            requestAnimationFrame(animate);
        }

        // Resize the canvas when the window is resized
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        initParticles();
        animate();  // Start the animation
    </script>
</body>
</html>
