script.js

/* script.js — complete premium interactivity */
(function() {
  'use strict';

  // ----- CANVAS BACKGROUND -----
  const canvas = document.getElementById('bgCanvas');
  const ctx = canvas.getContext('2d');
  let w, h;

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

  const PARTICLES = 110;
  const particles = [];
  for (let i = 0; i < PARTICLES; i++) {
    particles.push({
      x: Math.random() * w,
      y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.5,
      vy: (Math.random() - 0.5) * 0.5,
      radius: Math.random() * 1.8 + 0.8,
      phase: Math.random() * Math.PI * 2,
    });
  }

  const NODES = 28;
  const nodes = [];
  for (let i = 0; i < NODES; i++) {
    nodes.push({
      x: Math.random() * w,
      y: Math.random() * h,
      radius: Math.random() * 2 + 1.5,
      vx: (Math.random() - 0.5) * 0.2,
      vy: (Math.random() - 0.5) * 0.2,
    });
  }

  const LIGHTS = 8;
  const lights = [];
  for (let i = 0; i < LIGHTS; i++) {
    lights.push({
      x: Math.random() * w,
      y: Math.random() * h,
      radius: Math.random() * 120 + 60,
      speed: 0.002 + Math.random() * 0.005,
      angle: Math.random() * Math.PI * 2,
      driftX: (Math.random() - 0.5) * 0.3,
      driftY: (Math.random() - 0.5) * 0.3,
    });
  }

  let time = 0;

  function drawBackground() {
    time += 0.003;
    ctx.clearRect(0, 0, w, h);

    const grad = ctx.createRadialGradient(w * 0.2, h * 0.1, 0, w * 0.5, h * 0.4, w * 0.9);
    grad.addColorStop(0, '#0f1a2e');
    grad.addColorStop(0.6, '#080b1a');
    grad.addColorStop(1, '#02040a');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, w, h);

    ctx.strokeStyle = 'rgba(0, 245, 255, 0.018)';
    ctx.lineWidth = 0.5;
    const step = 56;
    const offsetX = (time * 2) % step;
    const offsetY = (time * 1.2) % step;
    for (let x = -step + offsetX; x < w + step; x += step) {
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
      ctx.stroke();
    }
    for (let y = -step + offsetY; y < h + step; y += step) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
      ctx.stroke();
    }

    lights.forEach(function(light) {
      light.angle += light.speed;
      light.x += Math.sin(light.angle * 0.7) * 0.2 + light.driftX * 0.1;
      light.y += Math.cos(light.angle * 0.5) * 0.2 + light.driftY * 0.1;
      if (light.x < -100) light.x = w + 100;
      if (light.x > w + 100) light.x = -100;
      if (light.y < -100) light.y = h + 100;
      if (light.y > h + 100) light.y = -100;
      const grd = ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, light.radius);
      grd.addColorStop(0, 'rgba(109, 93, 255, 0.04)');
      grd.addColorStop(0.4, 'rgba(0, 245, 255, 0.025)');
      grd.addColorStop(1, 'transparent');
      ctx.fillStyle = grd;
      ctx.beginPath();
      ctx.arc(light.x, light.y, light.radius, 0, Math.PI * 2);
      ctx.fill();
    });

    for (let i = 0; i < 2; i++) {
      const yPos = (h * 0.2 + i * h * 0.4 + Math.sin(time * 0.2 + i * 2) * 40) % h;
      const gradBeam = ctx.createLinearGradient(0, yPos, w, yPos + 30);
      gradBeam.addColorStop(0, 'rgba(0,245,255,0)');
      gradBeam.addColorStop(0.3, 'rgba(0,245,255,0.02)');
      gradBeam.addColorStop(0.7, 'rgba(109,93,255,0.02)');
      gradBeam.addColorStop(1, 'rgba(0,245,255,0)');
      ctx.fillStyle = gradBeam;
      ctx.fillRect(0, yPos, w, 30);
    }

    particles.forEach(function(p) {
      p.x += p.vx + Math.sin(time * 0.4 + p.phase) * 0.08;
      p.y += p.vy + Math.cos(time * 0.3 + p.phase) * 0.08;
      if (p.x < 0) p.x = w;
      if (p.x > w) p.x = 0;
      if (p.y < 0) p.y = h;
      if (p.y > h) p.y = 0;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(126, 232, 255, ' + (0.15 + 0.1 * Math.sin(time + p.phase)) + ')';
      ctx.fill();
    });

    nodes.forEach(function(n) {
      n.x += n.vx + Math.sin(time * 0.2 + n.x * 0.001) * 0.06;
      n.y += n.vy + Math.cos(time * 0.25 + n.y * 0.001) * 0.06;
      if (n.x < 0) n.x = w;
      if (n.x > w) n.x = 0;
      if (n.y < 0) n.y = h;
      if (n.y > h) n.y = 0;
    });

    ctx.lineWidth = 0.7;
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        const dx = nodes[i].x - nodes[j].x;
        const dy = nodes[i].y - nodes[j].y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 180) {
          const alpha = 0.12 * (1 - dist / 180);
          ctx.strokeStyle = 'rgba(0, 245, 255, ' + alpha + ')';
          ctx.beginPath();
          ctx.moveTo(nodes[i].x, nodes[i].y);
          ctx.lineTo(nodes[j].x, nodes[j].y);
          ctx.stroke();
        }
      }
    }

    nodes.forEach(function(n) {
      ctx.beginPath();
      ctx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(0, 245, 255, 0.35)';
      ctx.shadowColor = '#00f5ff';
      ctx.shadowBlur = 12;
      ctx.fill();
      ctx.shadowBlur = 0;
      ctx.beginPath();
      ctx.arc(n.x, n.y, n.radius * 0.4, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255,255,255,0.5)';
      ctx.fill();
    });

    ctx.strokeStyle = 'rgba(109, 93, 255, 0.03)';
    ctx.lineWidth = 0.4;
    for (let i = 0; i < 16; i++) {
      const x1 = (i * 97 + time * 8) % w;
      const y1 = (i * 131 + time * 5) % h;
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo((x1 + 40) % w, (y1 + 30) % h);
      ctx.stroke();
    }
  }

  function animateCanvas() {
    drawBackground();
    requestAnimationFrame(animateCanvas);
  }
  animateCanvas();

  // ----- CURSOR GLOW -----
  const cursorGlow = document.getElementById('cursorGlow');
  document.addEventListener('mousemove', function(e) {
    if (cursorGlow) {
      cursorGlow.style.left = e.clientX + 'px';
      cursorGlow.style.top = e.clientY + 'px';
    }
    updateCardTilt(e);
  });

  document.addEventListener('touchstart', function() {
    if (cursorGlow) cursorGlow.style.opacity = '0';
  });
  document.addEventListener('touchmove', function() {
    if (cursorGlow) cursorGlow.style.opacity = '0';
  });

  // ----- 3D CARD TILT -----
  const card = document.getElementById('glassCard');
  const wrapper = document.getElementById('cardWrapper');

  function updateCardTilt(e) {
    if (!wrapper || !card) return;
    const rect = wrapper.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    const deltaX = (e.clientX - centerX) / rect.width;
    const deltaY = (e.clientY - centerY) / rect.height;
    card.style.transform = 'rotateY(' + (deltaX * 7) + 'deg) rotateX(' + (-deltaY * 7) + 'deg)';
  }

  if (wrapper) {
    wrapper.addEventListener('mouseleave', function() {
      if (card) card.style.transform = 'rotateY(0deg) rotateX(0deg)';
    });
  }

  // ----- RIPPLE EFFECT -----
  document.querySelectorAll('.glass-touch').forEach(function(el) {
    el.addEventListener('click', function(e) {
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const ripple = document.createElement('span');
      ripple.className = 'ripple-effect';
      const size = Math.min(rect.width, rect.height) * 0.6;
      ripple.style.width = ripple.style.height = size + 'px';
      ripple.style.left = x - size / 2 + 'px';
      ripple.style.top = y - size / 2 + 'px';
      this.style.position = 'relative';
      this.style.overflow = 'hidden';
      this.appendChild(ripple);
      setTimeout(function() {
        if (ripple.parentNode) ripple.remove();
      }, 700);
    });
  });

  // ----- COPY BUTTONS -----
  document.querySelectorAll('.copy-btn').forEach(function(btn) {
    btn.addEventListener('click', function(e) {
      e.stopPropagation();
      const text = this.getAttribute('data-copy');
      if (!text) return;

      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(function() {
          const orig = this.textContent;
          this.textContent = '✓';
          setTimeout(function() {
            this.textContent = orig;
          }.bind(this), 1200);
        }.bind(this)).catch(function() {
          fallbackCopy(text, this);
        }.bind(this));
      } else {
        fallbackCopy(text, this);
      }
    });
  });

  function fallbackCopy(text, btn) {
    const input = document.createElement('input');
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    input.remove();
    const orig = btn.textContent;
    btn.textContent = '✓';
    setTimeout(function() {
      btn.textContent = orig;
    }, 1200);
  }

  // ----- LIVE CLOCK & DATE (Bangladesh Time UTC+6) -----
  function updateClock() {
    const now = new Date();
    const utcTime = now.getTime() + (now.getTimezoneOffset() * 60000);
    const bdTime = new Date(utcTime + (6 * 60 * 60 * 1000));

    const hours = String(bdTime.getHours()).padStart(2, '0');
    const minutes = String(bdTime.getMinutes()).padStart(2, '0');
    const seconds = String(bdTime.getSeconds()).padStart(2, '0');

    const clockEl = document.getElementById('liveClock');
    if (clockEl) {
      clockEl.textContent = hours + ':' + minutes + ':' + seconds;
    }

    const dateEl = document.getElementById('liveDate');
    if (dateEl) {
      const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      const dayName = days[bdTime.getDay()];
      const day = bdTime.getDate();
      const month = months[bdTime.getMonth()];
      const year = bdTime.getFullYear();
      dateEl.textContent = dayName + ', ' + day + ' ' + month + ' ' + year;
    }
  }

  updateClock();
  setInterval(updateClock, 1000);

  // ----- REVEAL ON LOAD -----
  window.addEventListener('load', function() {
    const cardEl = document.getElementById('glassCard');
    if (cardEl) cardEl.classList.add('visible');
  });

  // ----- RESIZE -----
  window.addEventListener('resize', function() {
    resizeCanvas();
    particles.forEach(function(p) {
      p.x = Math.random() * w;
      p.y = Math.random() * h;
    });
    nodes.forEach(function(n) {
      n.x = Math.random() * w;
      n.y = Math.random() * h;
    });
  });

  // ----- THEME TOGGLE (double-click profile) -----
  let theme = 'dark';
  const profileImg = document.getElementById('profileImg');
  if (profileImg) {
    profileImg.addEventListener('dblclick', function() {
      const body = document.body;
      const glassCard = document.querySelector('.glass-card');
      if (theme === 'dark') {
        body.style.background = '#f0f4ff';
        body.style.color = '#111';
        if (glassCard) {
          glassCard.style.background = 'rgba(255,255,255,0.25)';
          glassCard.style.borderColor = 'rgba(255,255,255,0.3)';
        }
        theme = 'light';
      } else {
        body.style.background = '#0b0d1a';
        body.style.color = '#fff';
        if (glassCard) {
          glassCard.style.background = 'rgba(255,255,255,0.05)';
          glassCard.style.borderColor = 'rgba(255,255,255,0.08)';
        }
        theme = 'dark';
      }
    });
  }

  console.log('🚀 AI Business Card · Mehedi Hasan');
})();