# Intégration hors Ghost

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.