Öffentliche Widgets

Diese Seite zeigt alle öffentlich verfügbaren Widgets im Widget-Storm System. Öffentliche Widgets können von jedem registrierten Nutzer frei in eigene Projekte eingebunden werden.

Showcase — Widgets zum Ausprobieren

Diese Widgets sind Live-Demos — sie laufen direkt hier auf dieser Seite. Jedes Widget ist vollständig parametrierbar und kann in eigene Projekte eingebunden werden.

<?php $wg->get("wg_countdown", "WidgetStormSystem", '{"target":"2026-06-30T00:00:00","title":"Nächster Meilenstein"}'); ?>
Countdown wg_countdown
Live-Countdown zu einem beliebigen Datum. Aktualisiert sich jede Sekunde.
Nächster Meilenstein
--Tage
:
--Std
:
--Min
:
--Sek
<?php $wg->get("wg_dice", "WidgetStormSystem", '{"sides":6}'); ?>
Würfel wg_dice
Interaktiver Würfel mit Animation. Klick oder Button zum Würfeln.
<?php $wg->get("wg_flipcard", "WidgetStormSystem", '{"front":"Was ist das?","back":"Widgets für das Web — seit 2008.","fronticon":"★"}'); ?>
Flip-Karte wg_flipcard
Karte mit Vorder- und Rückseite. Klick zum Umdrehen.
★
Was ist das?
Klick zum Umdrehen
Widgets für das Web — seit 2008.
<?php $wg->get("wg_progress", "WidgetStormSystem", '{"percent":78,"label":"Projektfortschritt","animate":true}'); ?>
Fortschrittsbalken wg_progress
Animierter Fortschrittsbalken mit Label und Prozentzahl.
Projektfortschritt 0% 
<?php $wg->get("wg_typing", "WidgetStormSystem", '{"text":"Widget Storm — Bausteine für das Web, seit 2008.","speed":50,"loop":true}'); ?>
Schreibmaschine wg_typing
Typewriter-Effekt — Text wird buchstabenweise getippt.
|

Kostenlose Widgets mit echtem Mehrwert (erfüllen unsere Enterprise-Richtlinien)

Widgets mit eingebauter Sicherheit, Persistenz und Authentifizierung — bereit für den produktiven Einsatz. Demos ausprobieren ↓

<?php $wg->get("wg_todo", "WidgetStormSystem", '{"key":"IHR_KEY","title":"Meine Aufgaben"}'); ?>
ToDo-Liste wg_todo
Persistente Aufgabenliste mit eingebauter Authentifizierung, AES-256-Verschlüsselung und Brute-Force-Schutz — komplett ohne Backend.
  • AES-256-Verschlüsselung — Daten liegen verschlüsselt auf der Platte
  • Schlüsselbasierte Authentifizierung mit Brute-Force-Schutz
  • SQLite oder Dateisystem — automatische Erkennung
  • Preflight-Checks — prüft Berechtigungen und Abhängigkeiten vor dem Setup
  • Kein Backend, kein Framework, keine Datenbank-Konfiguration
Aufgaben 2 offen, 1 erledigt
  • ☐ Parameter anpassen
  • ☐ Widget einbinden
  • ☑ Widget-Storm entdecken

Mit dem Admin-Schlüssel können Sie diese Liste direkt im Browser bearbeiten — kein separates Backend nötig. Ohne Schlüssel bleibt sie serverseitig geschützt.

🔒 Schreibgeschützt SQLite + AES-256 
<?php $wg->get("wg_guestbook", "WidgetStormSystem", '{"key":"IHR_KEY","title":"Mein Gästebuch"}'); ?>
Gästebuch wg_guestbook
Moderiertes Gästebuch mit Besucher-Interaktion, Honeypot-Spam-Schutz, IP-Rate-Limiting und AES-256-Verschlüsselung.
  • AES-256-Verschlüsselung — Daten verschlüsselt auf der Platte
  • Moderationsmodus — Einträge erst nach Freischaltung sichtbar
  • Honeypot-Spam-Schutz — unsichtbares Feld fängt Bots ab
  • IP-basiertes Rate-Limiting — max. 3 Einträge pro Stunde, IP nur als Hash
  • Brute-Force-Schutz für Admin-Zugang mit Lockout
  • Kein Backend, kein Framework, keine Datenbank-Konfiguration
Gästebuch 2 Einträge
  • Widget-Storm 16.03.2026 00:11
    Willkommen im G&auml;stebuch! Hinterlassen Sie gerne einen Eintrag.
  • Besucher 16.03.2026 00:11
    Tolle Website &mdash; weiter so!
✓ Moderiert SQLite + AES-256

Demos — Verstehen, wie Widgets funktionieren können

Entdecken Sie einige unserer Widgets, die Enterprise-Richtlinien erfüllen, hier auf der Seite in einer geöffneten Variante — von der Ersteinrichtung über den Bearbeitungsmodus bis zur Besucheransicht.

ToDo-Liste wg_demo_todo

Rechts sehen Sie alle drei Zustände des ToDo-Widgets:

1. Ersteinrichtung — Beim ersten Aufruf generiert das Widget einen Admin-Schlüssel und richtet den verschlüsselten Speicher ein. Der Schlüssel wird einmalig angezeigt.

2. Bearbeitungsmodus — Mit dem Schlüssel können Aufgaben hinzugefügt, abgehakt und gelöscht werden. Alle Änderungen werden AES-256-verschlüsselt gespeichert.

3. Besucheransicht — Ohne Schlüssel ist die Liste schreibgeschützt. Über das Schloss-Symbol kann der Admin sich direkt im Browser freischalten.

Alles passiert im Widget selbst — kein Backend, kein Framework, keine Konfiguration.

1. Ersteinrichtung
ToDo-Liste — Einrichtung

Widget wurde eingerichtet. Ihr Admin-Schlüssel:

a1b2c3d4e5f6a7b8c9d0e1f2

So verwenden Sie den Schlüssel:

<?php $wg->get("wg_todo", "WidgetStormSystem",
  '{"uid":"meine_liste","key":"a1b2c3d4e5f6a7b8c9d0e1f2","title":"Meine Aufgaben"}'); ?>

Oder einfach als URL-Parameter anhängen:

https://ihre-seite.de/seite?wg_todo_key=a1b2c3d4e5f6a7b8c9d0e1f2

Mit key → Bearbeitungsmodus.
Ohne key → schreibgeschützte Ansicht.

Speicher: SQLite oder Datei + AES-256-Verschlüsselung.

2. Bearbeitungsmodus (mit Admin-Schlüssel)
ToDo-Liste 2 offen, 1 erledigt
  • ☐Widget einbinden
  • ☐Parameter anpassen
  • ☑Widget-Storm entdecken
✎ Bearbeitungsmodus SQLite + AES-256
3. Besucheransicht (ohne Schlüssel)
ToDo-Liste 2 offen, 1 erledigt
  • ☐Widget einbinden
  • ☐Parameter anpassen
  • ☑Widget-Storm entdecken

Mit dem Admin-Schlüssel können Sie diese Liste direkt im Browser bearbeiten — kein separates Backend nötig. Ohne Schlüssel bleibt sie serverseitig geschützt.

🔒 Schreibgeschützt SQLite + AES-256
Gästebuch wg_demo_guestbook

Rechts sehen Sie alle drei Zustände des Gästebuch-Widgets:

1. Ersteinrichtung — Das Widget generiert einen Admin-Schlüssel und erklärt Spam-Schutz, Moderation und Verschlüsselung.

2. Moderationsansicht — Der Admin sieht alle Einträge, auch ausstehende. Freischalten oder Löschen mit einem Klick.

3. Besucheransicht — Besucher sehen nur freigeschaltete Einträge und können selbst schreiben. Ein Honeypot und Rate-Limiting schützen vor Spam.

IP-Adressen werden nur als SHA-256-Hash gespeichert — Datenschutz ist eingebaut, nicht nachgerüstet.

1. Ersteinrichtung
Gästebuch — Einrichtung

Gästebuch eingerichtet. Ihr Admin-Schlüssel:

f1e2d3c4b5a6f7e8d9c0b1a2

So verwenden Sie den Schlüssel:

<?php $wg->get("wg_guestbook", "WidgetStormSystem",
  '{"uid":"mein_gb","key":"f1e2d3c4b5a6f7e8d9c0b1a2","title":"Gästebuch"}'); ?>

Oder als URL-Parameter:

https://ihre-seite.de/seite?wg_guestbook_key=f1e2d3c4b5a6f7e8d9c0b1a2

Mit key → Moderationsmodus.
Ohne key → Besucheransicht.

Speicher: SQLite oder Datei + AES-256.
Spam-Schutz: Honeypot + Rate-Limiting.
Moderation: Einträge erst nach Freischaltung sichtbar.

2. Moderationsansicht (mit Admin-Schlüssel)
Gästebuch 2 Einträge · 1 ausstehend
  • Neuer Besucherausstehendgerade eben
    Bin gespannt auf mehr Widgets!
  • Widget-Storm16.03.2026 01:00
    Willkommen im Gästebuch!
⚙ Moderation SQLite + AES-256
3. Besucheransicht (ohne Schlüssel)
Gästebuch 1 Eintrag
  • Widget-Storm16.03.2026 01:00
    Willkommen im Gästebuch!

Mit dem Admin-Schlüssel können Sie Einträge direkt im Browser moderieren — kein separates Backend nötig. Ohne Schlüssel bleibt die Moderation serverseitig geschützt.

✓ Moderiert SQLite + AES-256

Tutorial-Widgets

Diese Widgets verwenden wir in unserem Tutorial. Sie können sie ebenso frei in Ihren eigenen Projekten einsetzen.

<?php $wg->get("wg_badge", "WidgetStormSystem", '{"text":"Neu","variant":"success"}'); ?>
Badge wg_badge
Farbiges Label für Status, Tags oder Hinweise.
Neu 
<?php $wg->get("wg_button", "WidgetStormSystem", '{"text":"Klick mich","variant":"primary","size":"md"}'); ?>
Button wg_button
Konfigurierbarer Button in verschiedenen Varianten und Größen.
Klick mich 
<?php $wg->get("wg_card", "WidgetStormSystem", '{"title":"Beispiel-Karte","description":"Eine Karte mit Titel und Beschreibung."}'); ?>
Card wg_card
Inhaltskarte mit Titel, Beschreibung und optionalem Footer.
Beispiel-Karte
Eine Karte mit Titel und Beschreibung.
<?php $wg->get("wg_codeview", "WidgetStormSystem", '{"lang":"php","caption":"PHP-Beispiel","code":"<?php echo "Hallo Welt"; ?>"}'); ?>
Codeview wg_codeview
Syntax-hervorgehobene Code-Anzeige mit Sprachauswahl.
PHP 
<?php echo "Hallo Welt"; ?>
PHP-Beispiel
<?php $wg->get("wg_diagram", "WidgetStormSystem", '{"variant":"lifecycle"}'); ?>
Diagram wg_diagram
Einfache Diagramm-Darstellung für Datenvisualisierung.
📝
Developer
PHP + CSS + JS
→
📤
wghandler
Upload & Encrypt
→
🗄
Server
DB + CodeVault
🌐
User-Website
Rendered Widget
←
🔗
wgclient
CSS | JS | PHP
←
⚡
Render
evaleval() führt hier den Widget-Code aus, der von authentifizierten Autoren in der Datenbank hinterlegt wurde. Kein User-Input erreicht eval() — es ist die Engine hinter der PHP-in-CSS Bridge und der dynamischen Widget-Komposition. + compose
<?php $wg->get("wg_liveeditor", "WidgetStormSystem", '{"code":"<b>Live</b> bearbeiten","lang":"html"}'); ?>
Live-Editor wg_liveeditor
Interaktiver Code-Editor mit Live-Vorschau.
Parameter bearbeiten
Live-Vorschau
Widget wird geladen…
<?php $wg->get("wg_section", "WidgetStormSystem", '{"title":"Abschnitt","contenthtml":"Inhalt eines gestalteten Bereichs."}'); ?>
Section wg_section
Gestalteter Inhaltsbereich mit Titel und optionaler Hintergrundfarbe.

Abschnitt

Inhalt eines gestalteten Bereichs.
<?php $wg->get("wg_step", "WidgetStormSystem", '{"number":"1","title":"Erster Schritt","contenthtml":"Hier beginnt die Anleitung."}'); ?>
Step wg_step
Nummerierter Schritt für Anleitungen und Tutorials.
1
Erster Schritt
Hier beginnt die Anleitung.
<?php $wg->get("wg_tabpanel", "WidgetStormSystem", '{"tabs":[{"label":"Tab A","content":"Inhalt A"},{"label":"Tab B","content":"Inhalt B"}]}'); ?>
Tabpanel wg_tabpanel
Tab-basierte Navigation zwischen Inhaltsbereichen.
Inhalt A
Inhalt B

Widgets auf Ihrer Website nutzen

Um Widgets in Ihre eigene Website einzubinden, benötigen Sie einen wgclient — eine personalisierte PHP-Datei, die als Brücke zwischen Ihrer Website und dem Widget-Storm System dient.

  1. Registrieren Sie sich in der Widget-Storm Station
  2. Melden Sie sich mit Ihren Zugangsdaten an
  3. Laden Sie Ihren persönlichen wgclient.php herunter
  4. Platzieren Sie die Datei zusammen mit wghandler.php auf Ihrem Webserver
Zur Station →