# 📚 Demo-Beispiele Übersicht

Alle Demo-Beispiele zum BerlinSMS Captcha-Widget.

## 🎓 Tutorial-Demos (Schritt für Schritt)

Diese Demos folgen dem Tutorial und zeigen schrittweise die Implementierung:

### 1. [demo-form-noWidget.html](demo-form-noWidget.html)
**Schritt 1: Formular ohne Widget**
- Einfaches Kontaktformular ohne Captcha
- Zeigt den Ausgangspunkt

### 2. [demo-form-noSitekey.html](demo-form-noSitekey.html)
**Schritt 2: Widget ohne Sitekey**
- Captcha-Widget eingebunden, aber Sitekey fehlt
- Zeigt Fehlermeldung: "Captcha sitekey is required"

### 3. [demo-form-noCallback.html](demo-form-noCallback.html)
**Schritt 3: Widget ohne Callback**
- Captcha funktioniert, aber Submit-Button ist nicht gesperrt
- Zeigt warum Callback wichtig ist

### 4. [demo-form.html](demo-form.html)
**Schritt 4: Vollständig konfiguriert (data-Attribute)**
- Komplett eingerichtetes Captcha
- Verwendet `data-sitekey` und `data-callback`
- Submit-Button wird korrekt gesteuert

### 5. [demo-form-urlparams.html](demo-form-urlparams.html)
**Schritt 4 Alternative: Konfiguration per URL-Parameter**
- Gleiche Funktionalität wie demo-form.html
- Verwendet `?bsmsSitekey=...&callback=...` im Script-Tag
- Zeigt alternative Konfigurationsmethode

---

## 🚀 Vollständige Beispiele

### [simple.html](simple.html)
**Minimales Beispiel**
- Einfachste Implementierung
- Auto-Initialisierung mit data-Attributen
- Perfekt für den Schnellstart

### [demo.html](demo.html)
**Umfangreiches Beispiel**
- Vollständige Demo mit allen Features
- Code-Beispiele integriert
- Reset & Token-Anzeige Buttons
- Ideal zum Experimentieren

---

## 🆚 Vergleich: data-Attribute vs. URL-Parameter

| Feature | data-Attribute | URL-Parameter |
|---------|----------------|---------------|
| **Datei** | demo-form.html | demo-form-urlparams.html |
| **Sitekey** | `data-sitekey="..."` | `?bsmsSitekey=...` |
| **Callback** | `data-callback="..."` | `&callback=...` |
| **Mehrere Captchas** | ✅ Jedes individuell | ⚠️ Gleiche globale Config |
| **Überschreibbar** | ✅ Ja | ❌ Nein (data überschreibt URL) |
| **Empfehlung** | ✅ **Empfohlen** | ✓ Für einfache Fälle |

---

## 📖 Verwendung

### Lokal testen:

```bash
# Direkt im Browser öffnen:
plain-captcha/examples/demo-form.html
plain-captcha/examples/simple.html

# Oder mit Live-Server:
cd plain-captcha/examples
npx serve .
# Dann: http://localhost:3000/demo-form.html
```

### Via Visual Studio Development Server:

```
http://localhost:65118/plain-demo.html
http://localhost:65118/plain-simple.html
```

---

## 🎯 Welches Beispiel für welchen Zweck?

### Für Anfänger:
👉 **[simple.html](simple.html)** - Minimales, funktionierendes Beispiel

### Für Tutorials:
👉 **[demo-form-*.html](demo-form.html)** - Schrittweise Erklärung

### Für Entwickler:
👉 **[demo.html](demo.html)** - Vollständige Demo mit allen Features

### Für Tests:
👉 **Alle Dateien** - Zum Experimentieren und Ausprobieren

---

## 📚 Weitere Ressourcen

- **Tutorial:** [tutorial-captcha.md](../tutorial-captcha.md)
- **Dokumentation:** [README.md](../README.md)
- **Verwendungsbeispiele:** [USAGE-EXAMPLES.md](../USAGE-EXAMPLES.md)
- **NPM-Veröffentlichung:** [PUBLISH.md](../PUBLISH.md)

---

**Viel Erfolg beim Testen! 🚀**