From 52d78a6cf9daa470474da3ce2fd802293da4607b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20QUEROL?= <kawa@not.obvious>
Date: Sun, 8 Mar 2026 01:42:33 +0100
Subject: [PATCH] =?UTF-8?q?Add=20Int=C3=A9gration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Int%C3%A9gration.md | 99 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 Int%C3%A9gration.md

diff --git a/Int%C3%A9gration.md b/Int%C3%A9gration.md
new file mode 100644
index 0000000..f1b5667
--- /dev/null
+++ b/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.