script.js

const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
const particleCount = 150;

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

class Particle {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.radius = Math.random() * 2 + 1;
    this.dx = (Math.random() - 0.5) * 0.5;
    this.dy = (Math.random() - 0.5) * 0.5;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
    ctx.fillStyle = '#00ff44';
    ctx.fill();
  }
  update() {
    this.x += this.dx;
    this.y += this.dy;
    if(this.x < 0 || this.x > canvas.width) this.dx *= -1;
    if(this.y < 0 || this.y > canvas.height) this.dy *= -1;
    this.draw();
  }
}

for(let i=0;i<particleCount;i++) {
  particles.push(new Particle());
}

function animate() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  particles.forEach(p => p.update());
  requestAnimationFrame(animate);
}
animate();

const loginBtn = document.getElementById('loginBtn');
const loginModal = document.getElementById('loginModal');
const closeModal = document.getElementById('closeModal');

loginBtn.addEventListener('click', ()=> loginModal.classList.remove('hidden'));
closeModal.addEventListener('click', ()=> loginModal.classList.add('hidden'));