HTML5
Architecture Avancée

class HologramInterface {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.mouseX = 0;
    this.mouseY = 0;
    this.particles = [];
    this.time = 0;
    
    this.initParticles();
    this.bindEvents();
    this.render();
  }
  
  initParticles() {
    for (let i = 0; i < 50; i++) {
      this.particles.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        vx: (Math.random() - 0.5) * 2,
        vy: (Math.random() - 0.5) * 2,
        size: Math.random() * 3 + 1,
        color: `hsl(${120 + Math.random() * 60}, 70%, 50%)`
      });
    }
  }
  
  bindEvents() {
    this.canvas.addEventListener('mousemove', (e) => {
      const rect = this.canvas.getBoundingClientRect();
      this.mouseX = e.clientX - rect.left;
      this.mouseY = e.clientY - rect.top;
    });
    
    this.canvas.addEventListener('click', (e) => {
      this.createRipple(this.mouseX, this.mouseY);
    });
  }
  
  createRipple(x, y) {
    // Effet de ripple au clic
    for (let i = 0; i < 20; i++) {
      const angle = (i / 20) * Math.PI * 2;
      this.particles.push({
        x: x,
        y: y,
        vx: Math.cos(angle) * 5,
        vy: Math.sin(angle) * 5,
        size: 2,
        color: '#00FF94',
        life: 60
      });
    }
  }
  
  drawGrid() {
    this.ctx.strokeStyle = 'rgba(0, 217, 255, 0.2)';
    this.ctx.lineWidth = 1;
    
    const gridSize = 30;
    for (let x = 0; x < this.canvas.width; x += gridSize) {
      this.ctx.beginPath();
      this.ctx.moveTo(x, 0);
      this.ctx.lineTo(x, this.canvas.height);
      this.ctx.stroke();
    }
    
    for (let y = 0; y < this.canvas.height; y += gridSize) {
      this.ctx.beginPath();
      this.ctx.moveTo(0, y);
      this.ctx.lineTo(this.canvas.width, y);
      this.ctx.stroke();
    }
  }
  
  drawCursor() {
    const radius = 20;
    const pulseRadius = radius + Math.sin(this.time * 0.1) * 5;
    
    this.ctx.strokeStyle = '#00FF94';
    this.ctx.lineWidth = 2;
    this.ctx.beginPath();
    this.ctx.arc(this.mouseX, this.mouseY, pulseRadius, 0, Math.PI * 2);
    this.ctx.stroke();
    
    // Croix au centre
    this.ctx.beginPath();
    this.ctx.moveTo(this.mouseX - 10, this.mouseY);
    this.ctx.lineTo(this.mouseX + 10, this.mouseY);
    this.ctx.moveTo(this.mouseX, this.mouseY - 10);
    this.ctx.lineTo(this.mouseX, this.mouseY + 10);
    this.ctx.stroke();
  }
  
  updateParticles() {
    for (let i = this.particles.length - 1; i >= 0; i--) {
      const p = this.particles[i];
      
      p.x += p.vx;
      p.y += p.vy;
      
      // Rebond sur les bords
      if (p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
      if (p.y < 0 || p.y > this.canvas.height) p.vy *= -1;
      
      // Attraction vers la souris
      const dx = this.mouseX - p.x;
      const dy = this.mouseY - p.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance < 100) {
        p.vx += dx * 0.0001;
        p.vy += dy * 0.0001;
      }
      
      // Vie limitée pour les ripples
      if (p.life !== undefined) {
        p.life--;
        if (p.life <= 0) {
          this.particles.splice(i, 1);
          continue;
        }
      }
      
      // Dessiner la particule
      this.ctx.fillStyle = p.color;
      this.ctx.beginPath();
      this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
      this.ctx.fill();
    }
  }
  
  drawHUD() {
    // Interface HUD style S.H.I.E.L.D.
    this.ctx.strokeStyle = '#00D9FF';
    this.ctx.fillStyle = '#00D9FF';
    this.ctx.font = '14px monospace';
    this.ctx.lineWidth = 2;
    
    // Coin supérieur gauche
    this.ctx.strokeRect(10, 10, 200, 80);
    this.ctx.fillText('S.H.I.E.L.D. SYSTEM', 20, 30);
    this.ctx.fillText(`PARTICLES: ${this.particles.length}`, 20, 50);
    this.ctx.fillText(`CURSOR: ${this.mouseX}, ${this.mouseY}`, 20, 70);
    
    // Coin supérieur droit
    const rightX = this.canvas.width - 150;
    this.ctx.strokeRect(rightX, 10, 140, 60);
    this.ctx.fillText('STATUS: ONLINE', rightX + 10, 30);
    this.ctx.fillText(`TIME: ${this.time}`, rightX + 10, 50);
  }
  
  render() {
    this.time++;
    
    // Nettoyer le canvas avec un effet de trail
    this.ctx.fillStyle = 'rgba(15, 20, 25, 0.1)';
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
    this.drawGrid();
    this.updateParticles();
    this.drawCursor();
    this.drawHUD();
    
    requestAnimationFrame(() => this.render());
  }
}

// Initialiser l'interface quand le DOM est prêt
document.addEventListener('DOMContentLoaded', () => {
  new HologramInterface('hologram');
});