So funktioniert die Koordinationsleiter-App

Übung finden und filtern

Die Startseite zeigt den Katalog als Karten mit kleinem Diagramm, Name, Schwierigkeit und Kategorien. Drei Filter lassen sich kombinieren, dazu eine Suche:

• Kategorie (Chips oben): Vorwärts, Rückwärts, Seitwärts, Sprünge, Einbeinig, Mit Armen, Mit Ball, Kombinationen, Eigene. Eine Übung kann mehreren Kategorien angehören.
• Sportart (zweite Leiste): Fußball, American Football, Basketball, Handball, Tennis & Boxen, Kinder & Schule. Eigene Sportarten lassen sich anlegen und mit Übungen füllen.
• Schwierigkeit: 1 leicht (Anfänger, Kinder), 2 mittel, 3 schwer (mehrere Elemente gleichzeitig).
• Suche: Name, weitere Namen (z. B. „Ickey Shuffle“, „2 in 1 out“) und Beschreibung.

Filter wirken zusammen als „und“: Sprünge + Basketball + mittel zeigt nur Übungen, die alle drei Bedingungen erfüllen. Die Zahl unter den Filtern nennt, wie viele übrig sind. Die Hilfe in der App (#/hilfe) zeigt zwei Matrizen, wie viele Übungen es je Sportart und Kategorie pro Stufe gibt.

Auf dem Handy: nach links oder rechts wischen wechselt die Kategorie; in der Übungsansicht wechselt es zur nächsten oder vorherigen Übung der zuletzt gesehenen Liste.

Bild, Animation und Ton

Eine Übung öffnen zeigt oben die Bühne, daneben die Schrittliste, darunter Beschreibung, Tipps und Varianten.

• Bild: alle Bodenkontakte als nummerierte Fußabdrücke; die Nummer ist die Zählzeit. Ideal zum Erklären am Platz und zum Drucken.
• Animation: Füße, Arme und Ball bewegen sich Zählzeit für Zählzeit. Tempo-Regler von 10 bis 360 Schritten pro Minute, Schleife, Einzelschritt vor und zurück (Knöpfe oder Pfeiltasten), Leertaste startet und pausiert.
• Spiegeln: tauscht den Führungsfuß (links zuerst statt rechts zuerst). Symmetrische Übungen wie beidbeinige Sprünge ändern sich dabei nicht.
• Ton: ein Klick pro Zählzeit, linker Fuß tiefer, rechter höher, Sprung als Doppelton, Prellen als Bass. Auf iPhone und iPad muss der Stummschalter aus sein; der Knopf „Ton testen“ schaltet den Ton nach einem echten Tippen frei.
• Leiterlänge: in den Einstellungen (Zahnrad) lässt sich die Zahl der Felder der eigenen Leiter eintragen (3 bis 20). Alle Diagramme, Animationen, Pläne und Drucke rechnen damit.

Die Einstellungen merken sich außerdem Standardansicht (Bild oder Animation), Schleife, Ton, Design (hell, dunkel, System) und Sprache. Wer „Bewegung reduzieren“ im Betriebssystem eingeschaltet hat, bekommt das Bild als Standard.

Trainingsplan anlegen und abspielen

Ein Plan (#/plaene) ist eine geordnete Liste von Übungen mit je Führungsfuß, Tempo, Dauer und Pause bis zur nächsten Übung.

Vorlagen

Die Plan-Seite bietet fertige Pläne aus dem Katalog: den ganzen Katalog, je Schwierigkeit, je Kategorie und Stufe, je Sportart. Vorlagen sind schreibgeschützt und lassen sich ansehen, starten, drucken oder „Als eigenen Plan kopieren“. Das Dropdown filtert nach Eigene, Schwierigkeit, Sportart, Kategorie.

Eigenen Plan bauen

1. „Neuer Plan“ oder eine Vorlage kopieren; Namen eingeben.
2. Übungen über das Suchfeld hinzufügen oder aus einer Übungsansicht mit „Zum Plan hinzufügen“.
3. Reihenfolge mit dem Griff ⋮⋮ ziehen (Maus und Finger) oder mit den Pfeilen.
4. Je Übung in der Zeile: Fuß-Chip (rechts zuerst, links zuerst, beide Seiten), Tempo-Regler, Dauer als Durchgänge durch die Leiter oder als Sekunden, Pause.
5. Der Block „Für alle Übungen“ setzt einen Wert für den ganzen Plan und zugleich als Standard für neue Pläne. Übungen, die davon abweichen, tragen einen Punkt „•“.

Beide Seiten (Standard): die Übung wird je Seite ausgeführt, abwechselnd rechts zuerst und links zuerst; eingestellte Durchgänge oder Sekunden gelten pro Seite. Bei symmetrischen Übungen entfällt das, der Editor zeigt „symmetrisch“.

Abspielen

„Start“ öffnet den Abspieler: Animation im Tempo der Übung, Countdown der Durchgänge oder Sekunden, in der Pause das Diagramm der nächsten Übung, Signal bei 3-2-1 und beim Seitenwechsel (wenn Ton an ist). Das Display bleibt wach. Übungen lassen sich überspringen; läuft der Plan bis „Geschafft!“, wird das Training im Protokoll gezählt (Abschnitt Premium).

Pläne liegen im Browser und lassen sich als Link teilen; wer den Link öffnet, bekommt den Plan in seine eigene Liste.

Drucken und PDF

Drei Druckansichten, immer hell und für A4 gesetzt. Die Ausgabe läuft über den Druckdialog des Browsers, dort steht „Als PDF speichern“ bereit, auch am Handy.

• Trainingsplan („Drucken“ in der Plan-Ansicht): Tabelle mit Fuß, Tempo, Dauer, Zeit und Pause, dahinter ein Übungsblatt je Übung.
• Übungsblatt („Drucken“ in der Übungsansicht): großes Diagramm, Schrittfolge, Tipps und Varianten.
• Übersicht („Drucken“ in der Liste): die gerade gefilterte Auswahl oder der ganze Katalog.

In der Druckleiste wechselt „Mit Erläuterungen“ (Diagramm, Beschreibung, Schrittfolge, Tipps) zu „Nur Grafik“ (Name und Diagramm, drei bis vier pro Zeile, gut für Aushänge). Seitenumbrüche laufen nie durch ein Diagramm.

Eigene Übung anlegen

„Neue Übung“ (Kategorie „Eigene“ oder #/neu) öffnet den Editor. Jede Katalog-Übung lässt sich außerdem mit „Bearbeiten (Kopie)“ als Vorlage in den Editor laden. Eigene Übungen erscheinen in der Kategorie „Eigene“, bekommen Vorschaubild, Animation, Ton und Druck wie alle anderen und lassen sich in Pläne aufnehmen.

Schritt für Schritt im grafischen Editor

1. Grunddaten: Name eintragen (die Kennung wird daraus abgeleitet), Schwierigkeit, Kategorien und Sportarten als Chips wählen.
2. Ablauf: Blickrichtung, Füße (beide, nur links, nur rechts), Felder pro Zyklus, Arme an oder aus, Ball (keiner, Hand, Fuß). „Felder pro Zyklus“ sagt, um wie viele Felder das Muster pro Durchlauf wandert: Zweier-Lauf 1, Einer-Lauf 2, Icky Shuffle 2.
3. Zählzeiten: Jede Zeile der Liste ist eine Zählzeit. Für die gewählte zeigt das Leiterraster beide Füße nach dieser Zählzeit. Oben wählen, was ein Klick setzt (linker Fuß, rechter Fuß, beide = Sprung, Ball), dann auf ein Feld tippen: Spalte L oder R neben der Leiter, C im Feld; halbe Zeilen stehen für Positionen zwischen zwei Sprossen. „Anheben“ nimmt den Fuß vom Boden, „keinen Fuß bewegen“ lässt die Zählzeit nur für Arme oder Ball stehen. Mit „+ Zählzeit“, Duplizieren und den Pfeilen baut man den Zyklus; Armhaltung, Ball und Prellen, Blickrichtung, eigener Schritttext und Dauer erscheinen je nach Übung darunter.
4. Vorschau: Rechts entsteht sofort das Schrittdiagramm oder die Animation mit Schrittliste; ein Klick auf einen Schritt wählt seine Zählzeit. Rote Meldungen nennen, was noch fehlt.
5. Texte und Speichern: Beschreibung, Tipps und Varianten eintragen, dann „Speichern (im Browser)“ oder „Link teilen“. Eine Katalog-Übung als Ausgangspunkt gibt es über „Vorlage laden“.

Unter „JSON (für Fortgeschrittene)“ steht dieselbe Übung als Text, in beide Richtungen synchron; nur dort lassen sich Startpositionen, Winkel als Blickrichtung und eine feste Leiterlänge setzen. Die Vorschau aktualisiert sich live, Fehler werden unter dem Text genannt. Die vollständige Beschreibung aller Felder steht unten im Übungsformat.

Eigene Übungen liegen im Browser (localStorage). Wer sie dauerhaft sichern oder auf einem zweiten Gerät haben will, nutzt den Teilen-Link oder das Konto.

Teilen-Link: der Link ist die Datenbank

„Link teilen“ gibt es an jeder Übung, jedem Plan und im Editor. Die komplette Definition wird als Text in den Link geschrieben (Base64-URL-kodiert hinter #/teilen/… bzw. #/plan/teilen/…). Es wird nichts auf einem Server gespeichert; der Link lässt sich per Messenger oder Mail weitergeben.

• Wer eine geteilte Übung öffnet, sieht sie sofort und kann sie mit „In meine Übungen übernehmen“ speichern.
• Ein geteilter Plan landet beim Öffnen in der eigenen Planliste (erneutes Öffnen erzeugt kein Duplikat). Enthält er eigene Übungen, sind sie eingebettet und werden unter „Eigene“ angelegt.
• Grenze: Messenger kürzen sehr lange Links. Dann hilft ein Kurzlink-Dienst oder der Marktplatz.

Katalog-Übungen haben kurze, feste Adressen (#/u/<id>), Kategorien #/k/<id>, Sportarten #/s/<id>; die lassen sich wie jede Seite verlinken.

Konto, Online speichern, Marktplatz

Alles bisher Beschriebene geht ohne Konto. Das Konto (#/konto) ergänzt drei Dinge:

• Online speichern: eigene Übungen und Pläne auf dem Server sichern, um sie auf anderen Geräten zu übernehmen oder zu veröffentlichen. Lokal bleibt führend; „Online speichern“ aktualisiert einen vorhandenen Eintrag statt ihn zu verdoppeln. 200 Einträge je Konto und Art (Premium: 2000).
• Marktplatz (Reiter „Markt“, #/markt): veröffentlichte Übungen und Pläne anderer Nutzer durchsuchen (Teilwort, Kategorie, Schwierigkeit, „neu“ oder „beliebt“), ansehen und „Übernehmen“. Lesen geht ohne Konto. Veröffentlichen geht direkt an der eigenen Übung mit „Veröffentlichen“, zurückziehen ebenso.
• Gruppen (Premium, nächster Abschnitt): Pläne eines Trainers automatisch bei allen Mitgliedern.

Anmeldung

Es gibt kein eigenes Passwort. Die Anmeldung läuft über einen Anbieter (derzeit Google; Facebook und netID sind vorbereitet). Gespeichert werden nur Anbieter-Kennung, Anzeigename, E-Mail und Bild-Adresse. Der Browser bekommt ein Sitzungs-Cookie, keine Zugangstoken. „Abmelden“ beendet die Sitzung, „Überall abmelden“ alle Sitzungen des Kontos.

Kein Aufruf ohne Handlung: Beim Start, in Übungen, Plänen und Einstellungen spricht die App nicht mit dem Server. Erst Login, Marktplatz öffnen, Suchen, Übernehmen, Speichern oder Veröffentlichen lösen Aufrufe aus.

Premium und Codes

Frei bleibt alles, was eine Einzelperson braucht. Premium richtet sich an Vereine, Schulen und Unternehmen und bietet:

Abschluss und Kündigung laufen über Stripe (Konto → Premium → „Abo verwalten“ öffnet das Kundenportal). Der Preis steht im Konto; als Kleinunternehmer nach § 19 UStG wird keine Umsatzsteuer berechnet. Vor dem Abschluss bestätigst du mit einem Häkchen, dass Premium sofort beginnt und du die AGB und die Widerrufsbelehrung gelesen hast. Kündigen geht monatlich bzw. jährlich zum Ende des bezahlten Zeitraums: im Kundenportal oder jederzeit über den Kündigungsknopf „Verträge hier kündigen“ auf d-solve.de (§ 312k BGB) mit sofortiger Eingangsbestätigung per E-Mail.

Buch- und Aktionscodes

Unter #/code (Menü „Code einlösen“) lässt sich ein Code aus dem Buch oder einer Aktion einlösen. Vorteil derzeit: Werbefreiheit, je nach Code auch Premium für eine Anzahl Tage. Ohne Konto gilt der Vorteil in diesem Browser, mit Konto auf allen Geräten.

Feedback

Menü „Feedback“ (#/feedback): Art, Nachricht, optional E-Mail; geschützt durch Cloudflare Turnstile, verschickt an [email protected].

Das Übungsformat

Eine Übung ist ein JSON-Objekt. Der Editor und der Server prüfen dieselben Regeln; alles, was hier nicht steht, wird ignoriert. Beispiel Icky Shuffle:

{
  "id": "icky-shuffle",
  "name": "Icky Shuffle",
  "aliases": ["Ickey Shuffle", "2 in 1 out"],
  "categories": ["vorwaerts", "kombination"],
  "sports": ["fussball", "football"],
  "difficulty": 2,
  "facing": "forward",
  "feet": ["l", "r"],
  "arms": false,
  "ball": null,
  "start": { "l": "-1L", "r": "-1L" },
  "cycle": {
    "fields": 2,
    "beats": [
      { "r": "0C" },
      { "l": "0C" },
      { "r": "0.5R" },
      { "l": "1C" },
      { "r": "1C" },
      { "l": "1.5L" }
    ]
  },
  "description": "…",
  "tips": ["…"],
  "variations": ["…"]
}

Positionen

Eine Position ist ein Text "<Feld><Seite>", z. B. "0C", "1L", "-1R", "0.5R", oder das Wort "up".

• Feld: Zahl relativ zum Anfang des aktuellen Zyklus. 0 = erstes Feld des Zyklus, 1 = nächstes, -1 = Startzone vor der Leiter. Dezimalzahlen sind erlaubt (0.5 = auf Höhe der Sprosse zwischen Feld 0 und 1).
• Seite: C im Feld, L links neben der Leiter, R rechts daneben (Groß- oder Kleinschreibung egal).
• "up": Fuß angehoben, wird nicht gezeichnet (z. B. Kniehebelauf, Einbeinformen).

Zyklus (cycle)

cycle.beats ist die Liste der Zählzeiten eines Durchlaufs, cycle.fields (Zahl > 0) die Anzahl Felder, um die sich das Muster pro Durchlauf nach vorn verschiebt. Die App wiederholt die Zählzeiten, addiert jedes Mal fields auf alle Feldnummern und hört auf, sobald ein Fuß (oder der Ball am Fuß) über das letzte Feld hinaus müsste. Danach kommt automatisch ein Abschluss-Schritt „Ende“ in die Zone hinter der Leiter. Mehr als 400 Schritte sind ein Fehler („ist cycle.fields zu klein?“); passt kein einziger Schritt auf die Leiter, ebenfalls.

Zählzeit (ein Eintrag in beats)

Übung (oberste Ebene)

Grenzen auf dem Server: 24 KB je Übung, 256 KB je Plan, 200 Einträge je Konto und Art (Premium 2000).

Datenschutz: was wo gespeichert wird

Verbindlich ist die Datenschutzerklärung von d-solve.de, Abschnitt 10. Hier die technischen Fakten.

Im Browser (localStorage, bleibt auf dem Gerät)

Nur für die Sitzung (sessionStorage, weg beim Schließen des Tabs): kl-context (zuletzt gesehene Liste fürs Wischen), kl-plan-filter, kl-markt-tab, kl-providers (verfügbare Login-Anbieter), kl-after-login, kl-editor-prefill, kl-feedback-from.

Auf dem Server (kl-api.d-solve.de, Cloudflare D1 in der EU/West-Region)

• users: Anbieter, Anbieter-Kennung, Anzeigename, E-Mail, Bild-Adresse, Premium-Ende, Stripe-Kunden-ID, Vorteile (z. B. werbefrei).
• sessions: Hash der Sitzungskennung aus dem Cookie __Host-kl_session (HttpOnly, Secure, SameSite=Lax; 30 Tage gleitend, höchstens 90), Zeitpunkte. Während des Logins zusätzlich zehn Minuten das Cookie kl_login.
• exercises, plans: nur, was mit „Online speichern“ oder „Veröffentlichen“ abgelegt wurde, mit Besitzer und Autorname.
• codes, redemptions: Code, Zeitpunkt, mit Konto die Zuordnung.
• groups, group_members, group_plans: Gruppe, Mitglieder, geteilte Pläne, Freigabe-Schalter.
• log: Trainingsprotokoll (Datum, Dauer, Plan, Anzahl und IDs der Übungen, ggf. Gruppe); nur mit Premium oder eingeschalteter Freigabe in einer Gruppe.

Keine Cookies und keine Aufrufe an den Server ohne Anmeldung oder Marktplatz. Keine Analyse-Skripte. Anzeigen von Google laden erst nach ausdrücklicher Zustimmung und nur, wenn sie konfiguriert sind. Zahlungen laufen vollständig bei Stripe.

Selbst hosten

Die App ist statisch: ein Ordner mit HTML, CSS und JavaScript, ohne Build-Schritt und ohne externe Abhängigkeiten. Jeder Webspace reicht.

1. Den Ordner public/projects/koordinationsleiter/ aus dem Repository der Website kopieren und auf einen Webserver legen (auch GitHub Pages, Netlify, Cloudflare Pages).
2. In config.js alles abschalten, was keinen Server hat: apiBase: "" (kein Konto, kein Marktplatz), feedbackEndpoint: "", donateUrl: "". Über features lassen sich Bereiche wie Pläne, Druck, Sportarten oder Werbung einzeln ausblenden.
3. Eigene Übungen für alle: Objekt im Übungsformat in exercises.js ergänzen, englische Texte unter derselben id in exercises.en.js.
4. Fußzeile und Rechtstexte in index.html auf den eigenen Betreiber ändern.

Wer Konto und Marktplatz will, deployt zusätzlich den Cloudflare Worker aus workers/koordinationsleiter-api (D1-Datenbank, Social-Login, optional Stripe) auf einer Subdomain derselben Website und trägt dessen Adresse als apiBase ein. Die Einrichtung steht in der README des Projekts.

Lizenz, Quellen der Übungen und technische Details: README im Repository.