Add Intégration

Int%C3%A9gration.md

@@ -0,0 +1,99 @@
+# Intégration
+Le widget fonctionne sur n'importe quelle page HTML. Voir `demo.html` pour des exemples concrets.
+
+## Intégration en 2 étapes
+
+### 1. Ajouter le CSS et le JS
+
+Copier le bloc `<style>` et le bloc `<script>` depuis `ghost-inject.html` dans votre page.
+Adapter `API_URL` :
+
+```html
+<style id="ti-styles">
+  /* ... contenu de ghost-inject.html ... */
+</style>
+
+<script>
+  /* ... contenu de ghost-inject.html ... */
+  var API_URL = 'https://torrent-api.monsite.com';
+</script>
+```
+
+Le script se place de préférence juste avant `</body>`.
+
+### 2. Placer les widgets dans le HTML
+
+```html
+<!-- Compact -->
+<div class="torrent-indicator"
+     data-hash="3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0"
+     data-label="Ubuntu 24.04 LTS"></div>
+
+<!-- Large -->
+<div class="torrent-indicator"
+     data-hash="3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0"
+     data-label="Ubuntu 24.04 LTS"
+     data-layout="wide"></div>
+```
+
+---
+
+## Cas d'usage
+
+### Page de téléchargement
+
+```html
+<h2>Télécharger</h2>
+<div class="torrent-indicator"
+     data-magnet="magnet:?xt=urn:btih:3b245504..."
+     data-label="Ubuntu 24.04 LTS"
+     data-layout="wide"></div>
+<a href="magnet:?xt=urn:btih:3b245504...">Ouvrir le magnet</a>
+```
+
+### Tableau comparatif de plusieurs torrents
+
+```html
+<div style="display:flex; gap:16px; flex-wrap:wrap;">
+  <div class="torrent-indicator"
+       data-hash="3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0"
+       data-label="Ubuntu 24.04"></div>
+
+  <div class="torrent-indicator"
+       data-hash="9bb80f655e2a0490b1ed7b19b63a7b2acacffe0e"
+       data-label="Debian 12"></div>
+</div>
+```
+
+### Création dynamique via JavaScript
+
+```html
+<button onclick="addWidget()">Vérifier le torrent</button>
+<div id="result"></div>
+
+<script>
+function addWidget() {
+  var el = document.createElement('div');
+  el.className = 'torrent-indicator';
+  el.setAttribute('data-hash', '3b245504cf5f11bbdbe1201cea6a6bf45aee1bc0');
+  el.setAttribute('data-layout', 'wide');
+  document.getElementById('result').appendChild(el);
+  TorrentIndicator.init(el);
+}
+</script>
+```
+
+### Rafraîchissement manuel
+
+```js
+// Rafraîchir tous les widgets de la page
+TorrentIndicator.refreshAll();
+```
+
+---
+
+## Compatibilité
+
+- Navigateurs modernes (Chrome, Firefox, Safari, Edge)
+- Aucune dépendance externe
+- Fonctionne avec : sites statiques, WordPress, Joomla, Drupal, forums, etc.