HTML5 avancé

html

<template id="avenger-card-template">
  <style>
    :host {
      display: block;
      margin: 1rem 0;
    }

    .card {
      display: flex;
      align-items: center;
      padding: 1rem;
      border: 2px solid #E34F26;
      border-radius: 8px;
      background: rgba(227, 79, 38, 0.1);
      gap: 1rem;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(227, 79, 38, 0.3);
    }

    ::slotted([slot="avatar"]) {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      flex-shrink: 0;
    }
  </style>

  <div class="card">
    <slot name="avatar">
      <div class="default-avatar">🦸</div>
    </slot>
    <div class="content">
      <slot name="content">
        <h3>Avenger</h3>
        <p>Description par défaut</p>
      </slot>
    </div>
  </div>
</template>

<script>
class AvengerCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const template = document.getElementById('avenger-card-template');
    shadow.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    console.log('Avenger card connectée au DOM');
  }

  static get observedAttributes() {
    return ['name', 'power', 'description'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.updateContent();
    }
  }

  updateContent() {
    // Mise à jour du contenu basée sur les attributs
    const name = this.getAttribute('name') || 'Avenger';
    const power = this.getAttribute('power') || 'Unknown';

    this.shadowRoot.querySelector('slot[name="content"] h3').textContent = name;
    this.shadowRoot.querySelector('slot[name="content"] p').textContent = power;
  }
}

customElements.define('avenger-card', AvengerCard);
</script>

html

{
  "name": "S.H.I.E.L.D. Command Center",
  "short_name": "SHIELD",
  "description": "Interface de commandement S.H.I.E.L.D. avec capacités hors-ligne avancées",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1e3c72",
  "theme_color": "#E34F26",
  "orientation": "portrait",
  "scope": "/",
  "lang": "fr",
  "dir": "ltr",
  "categories": ["security", "productivity", "utilities"],
  "icons": [
    {
      "src": "icons/icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "icons/icon-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "shortcuts": [
    {
      "name": "Missions actives",
      "url": "/missions?status=active",
      "description": "Voir les missions en cours"
    },
    {
      "name": "Alertes urgentes",
      "url": "/alerts?priority=high",
      "description": "Alertes de sécurité prioritaires"
    },
    {
      "name": "Statut agents",
      "url": "/agents",
      "description": "État des agents sur le terrain"
    }
  ],
  "screenshots": [
    {
      "src": "screenshots/desktop-1280x720.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Interface principale desktop"
    },
    {
      "src": "screenshots/mobile-540x720.png",
      "sizes": "540x720",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Interface mobile responsive"
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=com.shield.command",
      "id": "com.shield.command"
    }
  ]
}

html

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');
});