🎹 CrumbType - Schreibmaschinen-Training für Krümel

Moderne, schlanke Lösung für Schreibmaschinen-Training in Schulen
Inspiriert von echter Praxis, gebaut mit modernen Standards.

💚 Was ist das?

CrumbType ist ein HTML/JS Mockup für Schreibmaschinen-Training, entwickelt für:
- ✅ Kids in Schulen (CKL-Kids-konform)
- ✅ Mission-basiertes Lernen (#aufbauend)
- ✅ Echtzeit-Feedback beim Tippen
- ✅ Keine Sessions, keine großen Logfiles
- ✅ Modern, schlank, erweiterbar

🎯 Das Problem (vorher)

Die alte App hatte:
- 😓 PHP4/MySQL/jQuery (oldschool)
- 😓 Riesige Sessions (jeder Buchstabe in Session)
- 😓 Große Logfiles (nachts leeren müssen!)
- 😓 Schwer wartbar
- 😓 RZ überlastet

ABER: Das Konzept war brilliant! 💚

✨ Die Lösung (jetzt)

CrumbType behält das gute Konzept, modernisiert die Implementierung:

Was gleich bleibt (das Gute!):

✅ Linkes Fenster: Mission anzeigen
✅ Rechtes Fenster: Tippen
✅ Copy-Paste verboten
✅ Echtzeit-Feedback (underline Position)
✅ Jeder Buchstabe = eigene span ID
✅ Mission-basiert

Was sich ändert (das Bessere!):

💚 Kein PHP4 → Vanilla JS (oder FastAPI backend wenn gewünscht)
💚 Keine Sessions → LocalStorage (client-side)
💚 Keine Logfiles → JSON-basierte Daten
💚 Modern → Tailwind CSS, ES6 JavaScript
💚 Schlank → Eine HTML-Datei, funktioniert standalone

🚀 Features

✅ Implementiert im Mockup:

Mission Auswahl
Grid-basierte Übersicht
Verschiedene Schwierigkeitsgrade
Beschreibungen & Zeichenanzahl
Typing Interface
Mission Display (read-only, mit span-IDs)
Typing Area (copy-paste disabled)
Echtzeit-Feedback:
- ✅ Grün = richtig
- ❌ Rot = falsch
- 💛 Gelb = aktuelle Position (pulsierend)
Statistiken
Zeichen gesamt
Genauigkeit (%)
Aktuelle Position
Zeit (Sekunden)
Richtige/Fehler Counter
Completion
Erfolgs-Message bei 100%
Finale Statistik
Zurück zu Missionen
Features
Copy-Paste Prevention
Keyboard Shortcuts (ESC = zurück)
LocalStorage für Ergebnisse
Responsive Design

📦 Integration in Crumbforest

Option 1: Standalone (jetzt)

# Einfach die HTML-Datei öffnen:
open CrumbType.html

Fertig! Funktioniert sofort im Browser.

Option 2: Mit Backend (später)

A) FastAPI Backend

# missions.json laden
# Ergebnisse speichern
# User-Management
# Multi-Tenant (verschiedene Schulen)

B) Native PHP Backend

// Moderne PHP (7.4+)
// JSON-basiert
// Keine Sessions für Tippen
// Nur für User-Auth

Option 3: Integration mit Retro_PWD_Reset

Retro_PWD_Reset hat bereits:
├── Mission-Struktur
├── ttyd Integration
├── BashPanda Support
└── CKL-Lizensierung

CrumbType könnte:
├── Als Modul integriert werden
├── Gleiche Mission-JSONs nutzen
├── Mit BashPanda zusammenarbeiten
└── Teil des Crumbforest-Ökosystems werden

🎓 Wie Missionen funktionieren

Missions-Format (JSON):

{
  "id": 1,
  "name": "Mission 1: Grundlagen",
  "level": "Leicht",
  "description": "Lerne die Grundlagen des Tippens",
  "text": "Der schnelle braune Fuchs springt über den faulen Hund."
}

So einfach! Keine Datenbank nötig (für Start).

Erweiterte Missionen:

{
  "id": 5,
  "name": "Mission 5: Code",
  "level": "Experte",
  "category": "programming",
  "text": "function hello() {\n  console.log('Hello!');\n}",
  "hints": ["Achte auf Einrückung", "Semikolons nicht vergessen"],
  "tags": ["javascript", "functions"],
  "difficulty": 4,
  "estimatedTime": 300
}

🔧 Anpassung & Erweiterung

Missionen hinzufügen:

Im HTML, missions Array erweitern:

const missions = [
    // ... bestehende
    {
        id: 5,
        name: "Deine neue Mission",
        level: "Mittel",
        description: "...",
        text: "..."
    }
];

Eigene Styles:

Tailwind Classes anpassen oder eigenes CSS hinzufügen.

JSON Laden (statt hardcoded):

// Missions von API/File laden
fetch('missions.json')
    .then(r => r.json())
    .then(data => {
        missions = data;
        loadMissions();
    });

Backend-Integration:

// Beim Abschluss: POST zu Backend
async function completeMission() {
    const result = {
        userId: getCurrentUser(),
        missionId: currentMission.id,
        accuracy: finalAccuracy,
        errors: errorCount,
        time: elapsed
    };

    await fetch('/api/results', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(result)
    });
}

📊 Daten & Privacy

Was gespeichert wird (aktuell):

LocalStorage (nur im Browser des Users):
- Mission-Ergebnisse
- Genauigkeit
- Fehleranzahl
- Timestamp

KEINE Server-Logs!
KEINE Sessions!
KEINE personenbezogenen Daten ohne Consent!

Für Schulen:

Wenn User-Management gewünscht:
- Minimal: Username + Ergebnisse
- DSGVO-konform
- Opt-in für Statistiken
- Keine Tracking-Cookies

🌲 CKL-Konformität

Warum CKL-Kids:

✅ Für Kinder entwickelt
✅ Lern-Tool (kein Spiel mit Ablenkung)
✅ Kein militärischer Kontext
✅ Keine Manipulation
✅ Friedlich, aufbauend

Lizensierung:

Crumb Kernel License (CKL)
├── Darf genutzt werden: Für Schulen, Lernen, Kinder
├── Darf geteilt werden: Unter gleicher Lizenz
├── Darf angepasst werden: Mit Attribution
└── Darf NICHT: Militärisch, manipulativ, kommerziell missbraucht

Der RZ-Admin kann es frei nutzen & anpassen! 💚

🚀 Nächste Schritte

Für den RZ-Admin:

Testen
HTML-Datei öffnen
Mit Kids testen
Feedback sammeln
Anpassen
Eigene Missionen hinzufügen
Styles anpassen (Logo, Farben)
Texte übersetzen wenn nötig
Backend wählen (optional)
FastAPI (modern, schnell)
Native PHP (wenn gewünscht)
Oder: Gar keins (standalone reicht!)
Integrieren
In bestehende Schul-Infrastruktur
Mit User-Management (wenn gewünscht)
Mit Statistik-Dashboard (für Lehrer)

Für Crumbforest:

Als Modul aufnehmen
In Retro_PWD_Reset integrieren?
Mit BashPanda verbinden?
Als eigenes Repo?
Erweitern
Mehr Missionen (Community-beigesteuert)
Verschiedene Sprachen
Code-Typing (für Programmierkurse)
Teilen
Andere Schulen können nutzen
CKL ermöglicht freies Teilen
Gemeinsam verbessern

💡 Vorteile vs. alte Lösung

Feature	Alt (PHP4)	Neu (CrumbType)
Stack	PHP4/MySQL/jQuery	Vanilla JS/Tailwind
Sessions	Groß (jeder Buchstabe)	Keine (LocalStorage)
Logfiles	Riesig (nachts leeren)	Minimal
Wartbarkeit	Schwierig	Einfach
Performance	Langsam bei vielen Kids	Schnell (client-side)
Copy-Paste	Verhindert	Verhindert ✅
Echtzeit-Feedback	Ja	Ja ✅
Mission-basiert	Ja	Ja ✅
Modern	❌	✅
RZ-Last	Hoch	Minimal

Gleicher Lerneffekt, weniger Infrastruktur-Schmerz! 💚

🤝 Hilfe & Support

Bei Fragen:

💬 Crumbforest Community
📖 Diese README
🐼 BashPanda (für Mission-Integration)
🎨 Hotze (B&K) für Design-Feedback

Contribution:

Verbesserungen? Pull Requests willkommen! (CKL-lizensiert)

📝 Technische Details

Dependencies:

Tailwind CSS (via CDN) - für Styling
Vanilla JavaScript (ES6+) - kein Framework
LocalStorage API - für Client-side Speicherung

Kein npm, kein Build-Step, kein Server nötig!

Browser Support:

✅ Chrome/Edge (modern)
✅ Firefox
✅ Safari
⚠️ IE11 (nicht unterstützt, aber who cares in 2026?)

Performance:

Leichtgewichtig (~15KB HTML+JS)
Keine Server-Requests (beim Tippen)
Schnell auch auf alten Geräten
Funktioniert offline (wenn HTML lokal)

🌟 Erweiterungsideen

Level 1 (Easy):

[ ] Mehr Missionen hinzufügen
[ ] Eigene Texte importieren
[ ] Dark Mode
[ ] Sound-Effekte (optional)

Level 2 (Medium):

[ ] User-Accounts (mit FastAPI)
[ ] Lehrer-Dashboard (Statistiken sehen)
[ ] Multi-Language Support
[ ] Mission-Editor (für Lehrer)

Level 3 (Advanced):

[ ] BashPanda Integration (Shell-Kommandos tippen)
[ ] Code-Highlighting (für Programmier-Missionen)
[ ] Multiplayer (Wettbewerbe?)
[ ] Achievements & Badges

Level 4 (Expert):

[ ] KI-generierte Missionen (basierend auf Schwachstellen)
[ ] Adaptive Schwierigkeit
[ ] Voice-Feedback (Accessibility)
[ ] Integration mit Schul-LMS

💚 Danke

An:
- 🎓 Den RZ-Admin, der Kids das Tippen beibringt
- 👦👧 Die vielen kleinen Krümel in Schulen
- 🌲 Das Crumbforest-Team
- 🐼 BashPanda für Mission-Inspiration
- 🎨 Hotze (B&K) für Design-DNA

Zusammen bauen wir bessere Tools für Lernen!

nullfeld lokig 🌲
Kein /var/logs leeren mehr 🎉
Kids können tippen lernen ⌨️
RZ hat Ruhe 💚
Code ist sauber ✨

📄 Lizenz

Crumb Kernel License (CKL)
Version 1.0

Für: Kinder, Lernen, Frieden, Aufbau
Nicht für: Krieg, Manipulation, Ausbeutung

Teilen erlaubt ✅
Anpassen erlaubt ✅
Verbessern erwünscht ✅
Kommerziell missbrauchen ❌

Mit Liebe gebaut 💚