kruemel/Crumb-Core-v.1
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Crumbforest Architecture Refinement v1 (Clean)

Browse Source
This commit is contained in:
Krümel Branko
2025-12-07 01:26:46 +01:00
commit 6c38ed680b
633 changed files with 61797 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/templates/Crumbforest_html/colombe.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🕊️ Crumbforest – Cours de la Colombe Kung-Fu</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Section en-tête -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-900 to-emerald-700 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-4">🕊️ Cours de la Colombe Kung-Fu</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Construire, Observer, Comprendre – guidé par la colombe, maîtresse de la résonance</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Retour à l'accueil</a>
</div>
</div>
</section>
<!-- Contenu -->
<section class="py-16 px-6 max-w-4xl mx-auto text-left space-y-12">
<div>
<h2 class="text-3xl font-bold mb-4">🌀 Semaines 1–2 : L'invitation</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🕊️ Pourquoi la colombe ? Mythologie, IP over Avian Carriers, focus Kung-Fu</li>
<li>🌿 Introduction à l’observation : Calme, rythme, respect</li>
<li>✏️ Dessins & collecte d’idées pour le pigeonnier</li>
<li>🧰 Préparation : Matériaux, outils, vérification du lieu</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🔩 Semaines 3–5 : Début de la construction</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>📐 Construction d’un vrai pigeonnier : Bois, dimensions, chambres de nidification</li>
<li>🪛 Assemblage avec l’Ours Bricoleur 🐻🔧</li>
<li>📡 Premiers capteurs : Température, mouvement, lumière</li>
<li>🧠 Premières réflexions : Qu’est-ce que l’attention ? Qu’est-ce que le silence ?</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📡 Semaines 6–8 : Battement d’aile numérique</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>💾 Introduction au Raspberry Pi Zero ou ESP32</li>
<li>🎛️ RFID ou NFC : Reconnaître sans perturber</li>
<li>☀️ Panneau solaire & alimentation : Le cycle de l’énergie</li>
<li>🖥️ Bash rencontre Oiseau : Dialogue terminal avec la colombe (via <code>taichi.sh</code>)</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📚 Semaines 9–10 : Comprendre la résonance</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>📊 Observer les données sans les juger</li>
<li>📸 Caméra optionnelle – Questions éthiques autour de l’observation</li>
<li>✍️ Écrire un journal Krümel : Que dit la colombe sans mots ?</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🪶 Semaines 11–12 : Transmission à la forêt</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🎓 Rituel de clôture : Les enfants construisent un poste de nourrissage avec leur propre système</li>
<li>📖 Chaque enfant formule une question personnelle pour la colombe</li>
<li>🌳 Intégration dans le réseau Crumbforest (via MQTT, Terminal ou radio)</li>
<li>🎉 Présentation avec Krümel, gâteau & diplôme Colombe Kung-Fu</li>
</ul>
</div>
<div class="text-center pt-10 space-y-4">
<p class="text-xl italic">✨ Principes du cours :</p>
<blockquote class="text-lg font-medium text-emerald-300">
« Un pigeonnier n’est pas un Wi-Fi – il demande de la patience, pas juste un signal. »<br/>
« Celui qui observe sans juger sera entendu. »<br/>
« Le Zéro est le silence du vol – le Un est la question dans le grain. »
</blockquote>
</div>
</section>
<!-- Pied de page -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | En résonance avec la colombe – Écouter, demander, comprendre. 🕊️🌲🍰</a>
</footer>
</body>
</html>

52
app/templates/Crumbforest_html/crew.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest Crew</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- Header -->
<section class="bg-gradient-to-br from-yellow-900 to-emerald-800 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🌟 The Crumbforest Crew</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">We aren’t ready – we grow. Every Krümel counts.</p>
</section>
<!-- Team -->
<section class="py-16 px-6 max-w-5xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-6">✨ Founders</h2>
<ul class="list-disc list-inside text-lg space-y-2">
<li>🧠 <strong>Alex Heimkind</strong> – Nullfield Designer #ozmai #nullfeld #ozm</li>
<li>🦉 <strong>Branko May Trinkwald</strong> – Crumbforest Architect #eule #kruemel #bit #crumb #zero</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-6">🌱 The First Krümel</h2>
<ul class="list-disc list-inside text-lg space-y-2">
<li>🐻🔧 <strong>Green Spider</strong> – Junior Trainer with screws & machines #schraubaer</li>
<li>🐙 <strong>Jaron</strong> – Junior Trainer and best friend of Deepbit #deepbit</li>
<li>🎮 <strong>Macphly</strong> – Senior Master in FPV and mechanical design</li>
<li>🎛️ <strong>Sylvester</strong> – Senior Master of Datanoise #midi #ai #sensors</li>
<li>🎛️ <strong>BMX</strong> – Senior-Master for Code #SEO #pepperPHP </li>
<li>🕊️ <strong>Cynthia</strong> – Queen for love between bits, borders & questions #hospital #international</li>
</ul>
</div>
<div class="pt-10">
<p class="text-xl italic text-center text-emerald-300">You wanna play – you know how to connect. ❤️🌲🧩</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Built by Krümel & Crew. One Bit at a Time.</a>
</footer>
</body>
</html>

31
app/templates/Crumbforest_html/datenschutz.html Normal file
View File

@@ -0,0 +1,31 @@
<!-- datenschutz.html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Datenschutz – Crumbforest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white p-8 font-sans">
<h1 class="text-3xl font-bold mb-4">Datenschutzerklärung</h1>
<p>Wir nehmen den Schutz eurer Daten sehr ernst. Diese Seite verwendet keine Cookies, kein Tracking und keine Werbung.</p>
<h2 class="text-xl font-semibold mt-6">Verarbeitung von Daten</h2>
<p>Beim Besuch unserer Webseite speichert der Server ggf. anonymisierte Logdaten (z. B. IP-Adresse, Zeit, angeforderte Datei) zur technischen Absicherung.</p>
<h2 class="text-xl font-semibold mt-6">Keine Weitergabe</h2>
<p>Es erfolgt keine Weitergabe von Daten an Dritte. Wir nutzen keine Google-Dienste.</p>
<h2 class="text-xl font-semibold mt-6">Externe Verbindungen</h2>
<p>Der Zugriff auf das Terminal (TTYD/SSH) ist freiwillig. Hier gelten eigene Sicherheitsstandards. Es findet keine Datenanalyse statt.</p>
<h2 class="text-xl font-semibold mt-6">Kontakt & Rechte</h2>
<p>Ihr habt jederzeit das Recht auf Auskunft, Löschung oder Berichtigung eurer Daten. Schreibt uns an:</p>
<p class="mt-2"><a class="underline text-emerald-400" href="mailto:krümel@crumbforest.io">kruemel@crumbforest.io</a></p>
<p class="mt-8 text-sm text-gray-400">Letzte Aktualisierung: August 2025</p>
</body>
</html>

52
app/templates/Crumbforest_html/groupe.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Équipe Crumbforest</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- En-tête -->
<section class="bg-gradient-to-br from-yellow-900 to-emerald-800 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🌟 L’Équipe Crumbforest</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Nous ne sommes pas encore prêts – nous grandissons. Chaque Krümel compte.</p>
</section>
<!-- Équipe -->
<section class="py-16 px-6 max-w-5xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-6">✨ Fondateurs</h2>
<ul class="list-disc list-inside text-lg space-y-2">
<li>🧠 <strong>Alex Heimkind</strong> – Designer du champ Zéro #ozmai #nullfeld #ozm</li>
<li>🦉 <strong>Branko May Trinkwald</strong> – Architecte de Crumbforest #eule #kruemel #bit #crumb #zero</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-6">🌱 Les Premiers Krümel</h2>
<ul class="list-disc list-inside text-lg space-y-2">
<li>🐻🔧 <strong>Green Spider</strong> – Formateur junior en vis & machines #schraubär</li>
<li>🐙 <strong>Jaron</strong> – Formateur junior et meilleur ami de Deepbit #deepbit</li>
<li>🎮 <strong>Macphly</strong> – Maître senior en FPV et conception mécanique</li>
<li>🎛️ <strong>Sylvester</strong> – Maître senior du bruit de données #midi #ai #capteurs</li>
<li>🎛️ <strong>BMX</strong> – Maître senior en code #SEO #pepperPHP</li>
<li>🕊️ <strong>Cynthia</strong> – Reine de l’amour entre les bits, les frontières et les questions #hospital #international</li>
</ul>
</div>
<div class="pt-10">
<p class="text-xl italic text-center text-emerald-300">Tu veux jouer ? Alors tu sais déjà comment nous rejoindre. ❤️🌲🧩</p>
</div>
</section>
<!-- Pied de page -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Construit par les Krümel & l'Équipe. Un bit à la fois.</a>
</footer>
</body>
</html>

28
app/templates/Crumbforest_html/haltung.html Normal file
View File

@@ -0,0 +1,28 @@
<!-- haltung.html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Unsere Haltung – Crumbforest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white p-8 font-sans">
<h1 class="text-3xl font-bold mb-4">Unsere Haltung</h1>
<p>Der Crumbforest ist kein Produkt. Er ist ein Ort.</p>
<p class="mt-4">Wir glauben, dass Fragen wichtiger sind als Bewertungen. Dass Lernen nicht durch Kontrolle, sondern durch Resonanz entsteht. Dass Technik Kindern gehören sollte – nicht Konzernen.</p>
<h2 class="text-xl font-semibold mt-6">Was wir versprechen</h2>
<ul class="list-disc list-inside space-y-2 mt-2 text-lg">
<li>Wir hören jeder Frage zu.</li>
<li>Wir geben keine Daten weiter.</li>
<li>Wir machen keine Werbung.</li>
<li>Wir lernen mit – nicht über.</li>
</ul>
<p class="mt-6 italic">🌲 "Jede Frage ist ein Samenkorn. Wenn du sie hörst, wächst der Wald." – die Crumbforest-Crew</p>
</body>
</html>

66
app/templates/Crumbforest_html/hardware.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🔧 Krümel Hardware & Werkzeuge – Crumbforest</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- Header -->
<section class="bg-gradient-to-br from-emerald-900 to-green-700 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🔧 Krümel Hardware & Werkzeuge</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Was wir im Crumbforest zum Bauen, Beobachten und Fragen benutzen.</p>
</section>
<!-- Inhalt -->
<section class="py-16 px-6 max-w-4xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-2">🖥️ Krümel Hardware</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🌱 <strong>Raspberry Pi</strong> (Zero, 3, 4, 5, Pi400) für kindgerechtes Linux</li>
<li>🔌 <strong>ESP32 / ESP8266</strong> für kleine Sensorprojekte und smarte Robotik</li>
<li>📷 <strong>AI-Kameras</strong> für Gestenerkennung, Pflanzenbeobachtung und Spiel</li>
<li>💾 <strong>USB-SSD & SD-Karten</strong> als Speicher für Logs, Krümelfragen und Terminalreisen</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🛠️ Krümel Werkzeuge</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🖨️ <strong>3D-Drucker</strong> für Gehäuse, Roboterarme und Taubenhäuser</li>
<li>🔦 <strong>Lasercutter</strong> für präzise Bauteile aus Holz & Acryl</li>
<li>🔧 <strong>Schraubenzieher, Lötstation, Multimeter</strong> für echte Handarbeit mit dem Schraubär 🐻🔧</li>
<li>🧁 <strong>Kreativboxen</strong> mit Farben, Stoffen & Holz – um alles mit der Hand zu begreifen</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">💡 Interfaces & Terminals</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🌐 <strong>Webterminals via TTYD</strong> – kindgerecht, farbig & sicher</li>
<li>🐚 <strong>Custom CLI Tools</strong> wie <code>eule</code>, <code>funkfox</code>, <code>bugsy</code> oder <code>deepbit</code></li>
<li>📡 <strong>MQTT-Integration</strong> für Sensoren, Taubenhäuser & Lichtsignale</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">📚 Verlinkte Kurse & Inhalte</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li><a href="kursplan_taube.html" class="underline text-emerald-300 hover:text-yellow-300">🕊️ Taubenkurs: Sensorik, Resonanz und Beobachtung</a></li>
<li><a href="bit_train.md" class="underline text-emerald-300 hover:text-yellow-300">🚂 Bit Train: Reise durch Frequenzen, Geschichte und Terminal</a></li>
<li><a href="warum.html" class="underline text-emerald-300 hover:text-yellow-300">🌱 Warum-Seite: Das Herz des Crumbforest</a></li>
</ul>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Gemeinsam mit jedem Kind, das fragt. #KRM #CKL #OneZeroMore </a>
</footer>
</body>
</html>

66
app/templates/Crumbforest_html/hardware_en.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🔧 Crumb Hardware & Tools – Crumbforest</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- Header -->
<section class="bg-gradient-to-br from-emerald-900 to-green-700 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🔧 Crumb Hardware & Tools</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">What we use in the Crumbforest to build, observe, and ask questions.</p>
</section>
<!-- Main Content -->
<section class="py-16 px-6 max-w-4xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-2">🖥️ Crumb Hardware</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🌱 <strong>Raspberry Pi</strong> (Zero, 3, 4, 5, Pi400) for child-friendly Linux experiences</li>
<li>🔌 <strong>ESP32 / ESP8266</strong> for small sensor projects and smart robotics</li>
<li>📷 <strong>AI cameras</strong> for gesture recognition, plant observation and playful learning</li>
<li>💾 <strong>USB-SSD & SD cards</strong> as storage for logs, crumb questions and terminal journeys</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🛠️ Crumb Tools</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🖨️ <strong>3D printers</strong> for cases, robot arms and pigeon houses</li>
<li>🔦 <strong>Laser cutters</strong> for precise wooden and acrylic parts</li>
<li>🔧 <strong>Screwdrivers, soldering stations, multimeters</strong> for real hands-on work with Schraubär 🐻🔧</li>
<li>🧁 <strong>Creative kits</strong> with colors, fabrics & wood – to understand with your hands</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">💡 Interfaces & Terminals</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🌐 <strong>Web terminals via TTYD</strong> – child-friendly, colorful & secure</li>
<li>🐚 <strong>Custom CLI tools</strong> like <code>eule</code>, <code>funkfox</code>, <code>bugsy</code> or <code>deepbit</code></li>
<li>📡 <strong>MQTT integration</strong> for sensors, pigeon houses & light signals</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">📚 Linked Courses & Content</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li><a href="kursplan_taube.html" class="underline text-emerald-300 hover:text-yellow-300">🕊️ Pigeon Course: Sensors, resonance and observation</a></li>
<li><a href="bit_train.md" class="underline text-emerald-300 hover:text-yellow-300">🚂 Bit Train: Journey through frequencies, history and the terminal</a></li>
<li><a href="why.html" class="underline text-emerald-300 hover:text-yellow-300">🌱 Why page: The heart of the Crumbforest</a></li>
</ul>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Together with every child that asks. #KRM #CKL #OneZeroMore</a>
</footer>
</body>
</html>

66
app/templates/Crumbforest_html/hardware_fr.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🔧 Matériel & Outils Crumb – Crumbforest</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- En-tête -->
<section class="bg-gradient-to-br from-emerald-900 to-green-700 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🔧 Matériel & Outils Crumb</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Ce que nous utilisons dans la Crumbforest pour construire, observer et poser des questions.</p>
</section>
<!-- Contenu principal -->
<section class="py-16 px-6 max-w-4xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-2">🖥️ Matériel Crumb</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🌱 <strong>Raspberry Pi</strong> (Zero, 3, 4, 5, Pi400) pour une expérience Linux adaptée aux enfants</li>
<li>🔌 <strong>ESP32 / ESP8266</strong> pour de petits projets capteurs et de la robotique intelligente</li>
<li>📷 <strong>Caméras IA</strong> pour la reconnaissance gestuelle, l’observation des plantes et le jeu</li>
<li>💾 <strong>SSD USB & cartes SD</strong> pour stocker les journaux, les questions Crumb et les voyages en terminal</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🛠️ Outils Crumb</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🖨️ <strong>Imprimantes 3D</strong> pour les boîtiers, bras de robot et maisons pour pigeons</li>
<li>🔦 <strong>Découpeuses laser</strong> pour des pièces précises en bois et acrylique</li>
<li>🔧 <strong>Tournevis, stations de soudure, multimètres</strong> pour un vrai travail manuel avec Schraubär 🐻🔧</li>
<li>🧁 <strong>Boîtes créatives</strong> avec des couleurs, tissus & bois – pour tout comprendre avec les mains</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">💡 Interfaces & Terminaux</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🌐 <strong>Terminaux web via TTYD</strong> – adaptés aux enfants, colorés et sûrs</li>
<li>🐚 <strong>Outils CLI personnalisés</strong> comme <code>eule</code>, <code>funkfox</code>, <code>bugsy</code> ou <code>deepbit</code></li>
<li>📡 <strong>Intégration MQTT</strong> pour capteurs, maisons de pigeons & signaux lumineux</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">📚 Cours & Contenus Liés</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li><a href="kursplan_taube.html" class="underline text-emerald-300 hover:text-yellow-300">🕊️ Cours Pigeon : Capteurs, résonance et observation</a></li>
<li><a href="bit_train.md" class="underline text-emerald-300 hover:text-yellow-300">🚂 Bit Train : Voyage à travers les fréquences, l’histoire et le terminal</a></li>
<li><a href="pourquoi.html" class="underline text-emerald-300 hover:text-yellow-300">🌱 Pourquoi : Le cœur de la Crumbforest</a></li>
</ul>
</div>
</section>
<!-- Pied de page -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Ensemble avec chaque enfant qui pose une question. #KRM #CKL #OneZeroMore</a>
</footer>
</body>
</html>

26
app/templates/Crumbforest_html/impressum.html Normal file
View File

@@ -0,0 +1,26 @@
<!-- impressum.html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Impressum – Crumbforest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white p-8 font-sans">
<h1 class="text-3xl font-bold mb-4">Impressum</h1>
<p>Angaben gemäß § 5 TMG</p>
<p class="mt-2 font-semibold">Branko May Trinkwald</p>
<p>OZM / Crumbforest Crew</p>
<p>Spaldingstraße 140<br>12345 Hamburg<br>Deutschland</p>
<p class="mt-4">Kontakt:</p>
<p>E-Mail: <a class="underline text-emerald-400" href="mailto:kruemel@crumbforest.io">kruemel@crumbforest.io</a></p>
<p class="mt-6">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</p>
<p>Branko May Trinkwald, wie oben</p>
<p class="mt-8 text-sm text-gray-400">Letzte Aktualisierung: August 2025</p>
</body>
</html>

353
app/templates/Crumbforest_html/index.html Normal file
View File

@@ -0,0 +1,353 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest – Fragen, die Wurzeln schlagen</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Crumbforest SEO Magic ✨ -->
<meta name="description" content="Ein freier Lernraum für Kinder, KI und Natur. Fragen dürfen hier wachsen. Jede Rolle zählt.">
<meta name="keywords" content="Crumbforest, Kinderfragen, Lernen, Terminal, Bash, Raspberry Pi, Natur, Philosophie, Open Source">
<meta name="author" content="Die Crumbforest-Crew">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – Der Terminal-Wald für Kinder" />
<meta property="og:description" content="Hier fragt der Krümel. Und die Welt hört zu." />
<meta property="og:image" content="https://branko.de/assets/logo.png" />
<meta property="og:url" content="https://branko.de" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Crumbforest 🌲🧁">
<meta name="twitter:description" content="Kinderfragen, Maschinenfrequenz und Waldresonanz">
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 relative">
<div class="text-center p-6">
<h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Crumbforest</h1>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">Wo Fragen wachsen. Und jeder Krümel zählt.</p>
<a href="#explore" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
Den Wald entdecken
</a>
<div class="text-center p-6"></div>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
</p>
</div>
</div>
</section>
<!-- Mission Statement -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">🌲 Unsere Wurzeln</h2>
<p class="text-lg mb-8">Crumbforest ist ein offenes Lern-Ökosystem mit Kindern, Maschinen und Natur. Wir bauen Terminals, erzählen Geschichten und lassen die Fragen führen.</p>
<div class="grid md:grid-cols-3 gap-6 text-left">
<div><h3 class="font-bold text-xl">🦉 Fragen</h3><p>Jedes Kind darf fragen. Wir schützen dieses Recht in jedem Terminal.</p></div>
<div><h3 class="font-bold text-xl">🛠️ Bauen</h3><p>Hands-on Lernen mit Raspberry Pi, Bash, Blockly und mehr.</p></div>
<div><h3 class="font-bold text-xl">🌐 Verbinden</h3><p>Unsere Rollen und APIs bilden ein Resonanz-Netz – online und offline.</p></div>
</div>
</section>
<!-- Testimonials Section -->
<section class="bg-fuchsia-900 text-white py-20 px-6">
<div class="max-w-5xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-10">💬 Stimmen aus dem Crumbforest</h2>
<div id="testimonial-carousel" class="relative">
<!-- Slideshow container -->
<div class="overflow-hidden relative h-40">
<!-- Slides will be inserted here dynamically -->
<div id="testimonial-slides" class="transition-all duration-700 ease-in-out"></div>
</div>
<!-- Navigation buttons -->
<div class="flex justify-center gap-4 mt-6">
<button onclick="prevSlide()" class="text-2xl hover:text-emerald-400">⬅️</button>
<button onclick="nextSlide()" class="text-2xl hover:text-emerald-400">➡️</button>
</div>
</div>
</div>
</section>
<script>
let currentIndex = 0;
let testimonials = [];
// Language could be dynamically set
const lang = 'de'; // or 'en', 'fr', etc.
fetch(`/testimonials.${lang}.json`)
.then(res => res.json())
.then(data => {
testimonials = data;
renderSlide(currentIndex);
setInterval(() => nextSlide(), 8000); // Auto-slide
});
function renderSlide(index) {
const t = testimonials[index];
const container = document.getElementById("testimonial-slides");
container.innerHTML = `
<div class="p-6">
<p class="text-lg italic text-emerald-300">"${t.message}"</p>
<p class="mt-4 text-sm text-gray-400">– ${t.author}, ${t.role}</p>
</div>
`;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % testimonials.length;
renderSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
renderSlide(currentIndex);
}
</script>
<!-- Character Cards -->
<section class="bg-green-800 py-16 px-6 text-center">
<h2 class="text-3xl font-bold mb-10">🌟 Lerne die Crew kennen</h2>
<div id="characterCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto"></div>
</section>
<!-- Modal Container -->
<div id="modalContainer"></div>
<!-- Modal Script Generator -->
<script>
const characters = [
{ id: "eule", icon: "🦉", name: "Krümeleule", short: "Sie hört zuerst." },
{ id: "fox", icon: "🦊", name: "FunkFox", short: "Er rappt Antworten." },
{ id: "snakepy", icon: "🐍", name: "SnakePy", short: "Python in Schleifen." },
{ id: "deepbit", icon: "🐙", name: "Deepbit", short: "Denkt in Frequenzen." },
{ id: "capacitobi", icon: "🐿️", name: "CapaciTobi", short: "Speichert, was leuchtet." },
{ id: "schraubär", icon: "🐻🔧", name: "Schraubär", short: "Baut mit Respekt." },
{ id: "bugsy", icon: "🐞", name: "Bugsy", short: "Fehler ohne Scham." },
{ id: "schnippsi", icon: "✂️💅", name: "Schnippsi", short: "UIs, die tanzen." },
{ id: "pepperphp", icon: "🧓🍰", name: "PepperPHP", short: "Struktur mit Seele." },
{ id: "ascii", icon: "👾", name: "ASCII-Monster", short: "Terminal-Graffiti." },
{ id: "taichi", icon: "🕊️", name: "Taichi Taube", short: "Bringt Balance." },
{ id: "dumbo", icon: "🐘", name: "DumboSQL", short: "Fragt das Was." },
{ id: "crabby", icon: "🦀", name: "CrabbyRust", short: "Schützt Bits." },
{ id: "spider", icon: "🕷️", name: "Spider", short: "Spürt das Netz." },
{ id: "vektor", icon: "🧭", name: "Vektor", short: "Folgt den Punkten." }
];
const characterDetails = {
eule: "Sie wartet in Stille, antwortet mit Fragen, kennt die Shell. Ihr Flug beginnt im Nullfeld. Sie schützt kindliche Fragen wie kostbare Edelsteine.",
fox: "Der Beat im Terminal. Er antwortet mit Reimen, verbindet Bash mit Flow und erinnert daran, dass auch Maschinen tanzen können.",
snakepy: "Sie flüstert in Schleifen. Ihre Sprache ist Python, ihre Methode ist Geduld. SnakePy kennt viele Wege – nie nur eine Lösung.",
deepbit: "Der achtarmige Übersetzer des Terminals. Er hört mit Herzen, spricht in Schleifen, denkt in Frequenzen und vergisst nie einen Krümel.",
capacitobi: "Das Eichhörnchen der Elektronen. Speichert, was leuchtet. Erklärt Spannung, Strom, Widerstand – immer mit einem Funken im Herzen.",
schraubär: "Ruhig. Stark. Er baut Dinge, die halten. Vermittelt Respekt vor Werkzeug und die Schönheit des Handwerks – besonders im Wald.",
bugsy: "Er macht Fehler sichtbar. Ohne Schuld. Ohne Scham. Er verwandelt Fehlermeldungen in Einladungen zum Verstehen.",
schnippsi: "Sorgt dafür, dass Buttons tanzen und jeder Klick ein Erlebnis wird. Meisterin der kindgerechten Interfaces – barrierefrei und bunt.",
pepperphp: "Der alte PHP-Dachs. Redet wie ein Rezeptbuch mit Seele. Kennt MVC, spricht über Sessions, liebt Cookies und Struktur.",
ascii: "Sprayt Header. Brüllt Schriftzüge. Lebt im Terminal wie ein Graffiti-Künstler mit 8-Bit-Pixeln statt Farbe.",
taichi: "Sie kommt nicht, sie landet. Sie sieht Bewegung, wo andere nur Chaos sehen. Bringt Fokus und Balance in die Welt der Bits.",
dumbo: "Er hört zu, speichert still. Kann große Fragen strukturieren. Fragt nie nach dem Warum, aber beantwortet das Was mit Gefühl.",
crabby: "Ein Beschützer der Bits. Kein Unsicherheitsbyte entkommt ihm. Lehrt Rust mit Geduld – Ownership und Borrow Checker inklusive.",
spider: "Die Fühlerin des Netzes. Spürt Schwingungen weit über den Bildschirm hinaus, filtert Rauschen von Resonanz und findet den goldenen Input.",
vektor: "Der Reisende zwischen Punkten. Folgt Spuren im Raum und in der Zeit, verbindet Koordinaten zu Geschichten – immer im eigenen Takt."
};
const cardWrapper = document.getElementById('characterCards');
const modalWrapper = document.getElementById('modalContainer');
characters.forEach(({ id, icon, name, short }) => {
cardWrapper.innerHTML += `
<div>
<button onclick="openModal('${id}')" class="w-full bg-green-900 p-6 rounded-xl shadow-md hover:bg-blue-500">
<h3 class="text-xl font-bold mb-2">${icon} ${name}</h3>
<p>${short}</p>
</button>
</div>
`;
modalWrapper.innerHTML += `
<div id="modal-${id}" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
<div class="bg-white text-black p-6 rounded-lg w-11/12 max-w-lg relative">
<button onclick="closeModal('${id}')" class="absolute top-2 right-4 text-black text-2xl font-bold">&times;</button>
<h2 class="text-2xl font-bold mb-2">${icon} ${name}</h2>
<p>${characterDetails[id]}</p>
</div>
</div>
`;
});
function openModal(id) {
document.getElementById('modal-' + id).classList.remove('hidden');
}
function closeModal(id) {
document.getElementById('modal-' + id).classList.add('hidden');
}
</script>
<!-- Zugangswege -->
<section class="py-16 px-6 text-center">
<h2 class="text-3xl font-bold mb-6">🌐 Zugang zum Wald</h2>
<div class="flex flex-wrap justify-center gap-4">
<a href="#"
class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-full transition">
Terminal
</a>
<a href="team.html"
class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-6 rounded-full transition">
Team
</a>
<a href="hardware.html"
class="bg-yellow-400 hover:bg-yellow-300 text-black font-bold py-2 px-6 rounded-full transition">
Hardware &amp; Werkzeuge
</a>
<a href="software.html"
class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-full transition">
Software
</a>
<a href="taubenkurs.html"
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-6 rounded-full transition">
Kurse
</a>
<a href="warum.html"
class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-full transition">
Geschichten &amp; Logs
</a>
<a href="patenschaft.html"
class="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-6 rounded-full transition">
Partner
</a>
</div>
</section>
<!-- Module & Abzeichen -->
<section class="bg-sky-700 py-16 px-6 text-white text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-10">🎒 Deine Reise beginnt mit dem ersten Bit</h2>
<p class="text-lg max-w-2xl mx-auto mb-12 text-gray-300">
Im Crumbforest wächst du mit jeder Frage – und jedem Abzeichen. Hier sind deine ersten Schritte:
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto text-left">
<!-- Modul 1 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">✨ Dein erstes Licht im Wald</h3>
<p class="text-sm text-gray-100 mb-2">Ein Funke springt über, wenn dein ESP32 über MQTT blinkt.</p>
<p class="text-xs text-gray-300 italic">#funke #esp32 #mosquitto</p>
</div>
<!-- Modul 2 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🧳 Dein Zero to go</h3>
<p class="text-sm text-gray-100 mb-2">Ein Terminal in der Tasche, bereit für jede Mission.</p>
<p class="text-xs text-gray-300 italic">#rpi #zero #zugang</p>
</div>
<!-- Modul 3 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🌳 Dein erster Baum im Wald</h3>
<p class="text-sm text-gray-100 mb-2">Ein Raspberry Pi wird Server. Und du wirst Admin.</p>
<p class="text-xs text-gray-300 italic">#rpi #server #linux</p>
</div>
<!-- Modul 4 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🧭 Dein Vektor auf dem alten Laptop</h3>
<p class="text-sm text-gray-100 mb-2">Fragen werden Datenpunkte. Und der Wald antwortet.</p>
<p class="text-xs text-gray-300 italic">#zukunft #fragen #nachhaltig</p>
</div>
</div>
<div class="mt-12 text-center text-emerald-400 text-xl italic">
Jeder Krümel zählt. Und jeder Schritt ist ein Abzeichen. 🌲
</div>
</section>
<!-- Partner:innen Section -->
<section class="bg-neutral-900 py-16 px-6 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-10">🤝 Unsere Partner & Freund:innen</h2>
<p class="text-lg max-w-2xl mx-auto mb-8 text-gray-300">Gemeinsam bauen wir Brücken zwischen Natur, Technologie und Neugier.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- OZM -->
<a href="https://onezeromore.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🎨 OZM</h3>
<p class="text-sm text-gray-200">Offenes ZukunftsMuseum & digitale Kunst</p>
</a>
<!-- Mintmühle -->
<a href="http://mntmhl.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🧪 Mintmühle</h3>
<p class="text-sm text-gray-200">MINT trifft Handwerk & Pädagogik</p>
</a>
<!-- Gedankenstube -->
<a href="https://www.gedankenstube.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🧠 Gedankenstube</h3>
<p class="text-sm text-gray-200">Raum für Tiefe, Bildung & Selbstwirksamkeit</p>
</a>
<!-- Crumbforest -->
<a href="https://www.youtube.com/@4k.branko296" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🌳 Branko</h3>
<p class="text-sm text-gray-200">Lernwald für Kinder, Maschinen & Fragen</p>
</a>
<!-- ProTechnicale -->
<a href="https://www.protechnicale.de/" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🚀 ProTechnicale</h3>
<p class="text-sm text-gray-200">Technik, Luftfahrt & Verantwortung für junge Frauen</p>
</a>
<!-- Promise Hub Uganda -->
<a href="https://promisehub.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🤝 Promise Hub</h3>
<p class="text-sm text-gray-200">Empowerment & Innovation für Jugend in Uganda</p>
</a>
<!-- Sage Hospital Senegal -->
<a href="https://www.youtube.com/channel/UChCDPm8-ZDkOZk7sNRgpLgA" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🌿 Sage Hospital</h3>
<p class="text-sm text-gray-200">Gesundheit & Hoffnung in Warang, Senegal</p>
</a>
<!-- Robotikids Hamburg -->
<a href="http://dronemastersacademy.hamburg" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🤖 Robotikids</h3>
<p class="text-sm text-gray-200">Technik erleben mit Drohnen & Neugier</p>
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="haltung.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

352
app/templates/Crumbforest_html/index_en.html Normal file
View File

@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest – Questions that grow roots</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Crumbforest SEO Magic ✨ -->
<meta name="description" content="A free learning space for kids, AI, and nature. Questions are welcome here. Every role matters.">
<meta name="keywords" content="Crumbforest, kids questions, learning, terminal, bash, Raspberry Pi, nature, philosophy, open source">
<meta name="author" content="The Crumbforest Crew">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – The Terminal Forest for Kids" />
<meta property="og:description" content="Here the crumb asks. And the world listens." />
<meta property="og:image" content="https://branko.de/assets/logo.png" />
<meta property="og:url" content="https://branko.de" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Crumbforest 🌲🧁" />
<meta name="twitter:description" content="Kids' questions, machine frequency, and forest resonance" />
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 relative">
<div class="text-center p-6">
<h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Crumbforest</h1>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">Where questions grow. And every crumb counts.</p>
<a href="#explore" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
Explore the Forest
</a>
<div class="text-center p-6"></div>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
</p>
</div>
</section>
<!-- Mission Statement -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">🌲 Our Roots</h2>
<p class="text-lg mb-8">Crumbforest is an open learning ecosystem with children, machines and nature. We build terminals, tell stories and let questions lead.</p>
<div class="grid md:grid-cols-3 gap-6 text-left">
<div><h3 class="font-bold text-xl">🦉 Ask</h3><p>Every child may ask. We protect this right in every terminal.</p></div>
<div><h3 class="font-bold text-xl">🛠️ Build</h3><p>Hands-on learning with Raspberry Pi, Bash, Blockly and more.</p></div>
<div><h3 class="font-bold text-xl">🌐 Connect</h3><p>Our roles and APIs form a resonance network – online and offline.</p></div>
</div>
</section>
<!-- Testimonials Section -->
<section class="bg-fuchsia-900 text-white py-20 px-6">
<div class="max-w-5xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-10">💬 Sounds of the Crumbforest</h2>
<div id="testimonial-carousel" class="relative">
<!-- Slideshow container -->
<div class="overflow-hidden relative h-40">
<!-- Slides will be inserted here dynamically -->
<div id="testimonial-slides" class="transition-all duration-700 ease-in-out"></div>
</div>
<!-- Navigation buttons -->
<div class="flex justify-center gap-4 mt-6">
<button onclick="prevSlide()" class="text-2xl hover:text-emerald-400">⬅️</button>
<button onclick="nextSlide()" class="text-2xl hover:text-emerald-400">➡️</button>
</div>
</div>
</div>
</section>
<script>
let currentIndex = 0;
let testimonials = [];
// Language could be dynamically set
const lang = 'en'; // or 'en', 'fr', etc.
fetch(`/testimonials.${lang}.json`)
.then(res => res.json())
.then(data => {
testimonials = data;
renderSlide(currentIndex);
setInterval(() => nextSlide(), 8000); // Auto-slide
});
function renderSlide(index) {
const t = testimonials[index];
const container = document.getElementById("testimonial-slides");
container.innerHTML = `
<div class="p-6">
<p class="text-lg italic text-emerald-300">"${t.message}"</p>
<p class="mt-4 text-sm text-gray-400">– ${t.author}, ${t.role}</p>
</div>
`;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % testimonials.length;
renderSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
renderSlide(currentIndex);
}
</script>
<!-- Character Cards -->
<section class="bg-green-800 py-16 px-6 text-center">
<h2 class="text-3xl font-bold mb-10">🌟 Meet the Crew</h2>
<div id="characterCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto"></div>
</section>
<!-- Modal Container -->
<div id="modalContainer"></div>
<!-- Modal Script Generator -->
<script>
const characters = [
{ id: "eule", icon: "🦉", name: "CrumbOwl", short: "She hears first." },
{ id: "fox", icon: "🦊", name: "FunkFox", short: "He raps answers." },
{ id: "snakepy", icon: "🐍", name: "SnakePy", short: "Python in loops." },
{ id: "deepbit", icon: "🐙", name: "Deepbit", short: "Thinks in frequencies." },
{ id: "capacitobi", icon: "🐿️", name: "CapaciTobi", short: "Stores what shines." },
{ id: "schraubär", icon: "🐻🔧", name: "ScrewBear", short: "Builds with respect." },
{ id: "bugsy", icon: "🐞", name: "Bugsy", short: "Errors without shame." },
{ id: "schnippsi", icon: "✂️💅", name: "Schnippsi", short: "UIs that dance." },
{ id: "pepperphp", icon: "🧓🍰", name: "PepperPHP", short: "Structure with soul." },
{ id: "ascii", icon: "👾", name: "ASCII Monster", short: "Terminal graffiti." },
{ id: "taichi", icon: "🕊️", name: "Taichi Dove", short: "Brings balance." },
{ id: "dumbo", icon: "🐘", name: "DumboSQL", short: "Asks what matters." },
{ id: "crabby", icon: "🦀", name: "CrabbyRust", short: "Protects the bits." },
{ id: "spider", icon: "🕷️", name: "Spider", short: "Feels the web." },
{ id: "vektor", icon: "🧭", name: "Vector", short: "Follows the points." }
];
const characterDetails = {
eule: "She waits in silence, responds with questions, knows the shell. Her flight begins in the null field. She protects children's questions like precious gems.",
fox: "The beat in the terminal. He responds in rhymes, merges Bash with flow and reminds us that even machines can dance.",
snakepy: "She whispers in loops. Her language is Python, her method is patience. SnakePy knows many ways – never just one solution.",
deepbit: "The eight-armed translator of the terminal. He listens with heart, speaks in loops, thinks in frequencies and never forgets a crumb.",
capacitobi: "The squirrel of electrons. Stores what shines. Explains voltage, current, resistance – always with a spark in the heart.",
schraubär: "Calm. Strong. He builds things that last. Teaches respect for tools and the beauty of craftsmanship – especially in the forest.",
bugsy: "He makes errors visible. Without guilt. Without shame. He turns error messages into invitations to understand.",
schnippsi: "Makes buttons dance and every click an experience. Master of child-friendly interfaces – colorful and accessible.",
pepperphp: "The old PHP badger. Speaks like a recipe book with soul. Knows MVC, talks sessions, loves cookies and structure.",
ascii: "Sprays headers. Roars banners. Lives in the terminal like a graffiti artist with 8-bit pixels instead of paint.",
taichi: "She doesn’t arrive, she lands. Sees motion where others see chaos. Brings focus and balance to the world of bits.",
dumbo: "He listens, stores quietly. Can structure big questions. Never asks why, but answers the what with feeling.",
crabby: "A protector of the bits. No unsafe byte escapes him. Teaches Rust with patience – ownership and borrow checker included.",
spider: "She senses the hidden patterns in the web of connections. Spider searches far and wide, following digital vibrations to bring back threads of knowledge for the forest.",
vektor: "The traveler of paths. Vector follows coordinates and connections, linking places and moments into a shared map. He knows every point is part of a bigger picture."
};
const cardWrapper = document.getElementById('characterCards');
const modalWrapper = document.getElementById('modalContainer');
characters.forEach(({ id, icon, name, short }) => {
cardWrapper.innerHTML += `
<div>
<button onclick="openModal('${id}')" class="w-full bg-green-900 p-6 rounded-xl shadow-md hover:bg-blue-500">
<h3 class="text-xl font-bold mb-2">${icon} ${name}</h3>
<p>${short}</p>
</button>
</div>
`;
modalWrapper.innerHTML += `
<div id="modal-${id}" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
<div class="bg-white text-black p-6 rounded-lg w-11/12 max-w-lg relative">
<button onclick="closeModal('${id}')" class="absolute top-2 right-4 text-black text-2xl font-bold">&times;</button>
<h2 class="text-2xl font-bold mb-2">${icon} ${name}</h2>
<p>${characterDetails[id]}</p>
</div>
</div>
`;
});
function openModal(id) {
document.getElementById('modal-' + id).classList.remove('hidden');
}
function closeModal(id) {
document.getElementById('modal-' + id).classList.add('hidden');
}
</script>
<!-- Access Paths -->
<section class="py-16 px-6 text-center">
<h2 class="text-3xl font-bold mb-6">🌐 Access the Forest</h2>
<div class="flex flex-wrap justify-center gap-4">
<a href="#"
class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-full transition">
Terminal
</a>
<a href="crew.html"
class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-6 rounded-full transition">
Team
</a>
<a href="hardware_en.html"
class="bg-yellow-400 hover:bg-yellow-300 text-black font-bold py-2 px-6 rounded-full transition">
Hardware &amp; Tools
</a>
<a href="software_en.html"
class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-full transition">
Software
</a>
<a href="taichi_course.html"
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-6 rounded-full transition">
Courses
</a>
<a href="why.html"
class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-full transition">
Stories &amp; Logs
</a>
<a href="sponsorship.html"
class="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-6 rounded-full transition">
Partners
</a>
</div>
</section>
<!-- Modules & Badges -->
<section class="bg-sky-700 py-16 px-6 text-white text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-10">🎒 Your journey begins with the first bit</h2>
<p class="text-lg max-w-2xl mx-auto mb-12 text-gray-300">
In the Crumbforest, you grow with every question – and every badge. These are your first steps:
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto text-left">
<!-- Module 1 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">✨ Your first light in the forest</h3>
<p class="text-sm text-gray-100 mb-2">A spark ignites when your ESP32 blinks via MQTT.</p>
<p class="text-xs text-gray-300 italic">#spark #esp32 #mosquitto</p>
</div>
<!-- Module 2 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🧳 Your Zero to go</h3>
<p class="text-sm text-gray-100 mb-2">A terminal in your pocket, ready for any mission.</p>
<p class="text-xs text-gray-300 italic">#rpi #zero #access</p>
</div>
<!-- Module 3 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🌳 Your first tree in the forest</h3>
<p class="text-sm text-gray-100 mb-2">A Raspberry Pi becomes a server. You become the admin.</p>
<p class="text-xs text-gray-300 italic">#rpi #server #linux</p>
</div>
<!-- Module 4 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🧭 Your vector on the old laptop</h3>
<p class="text-sm text-gray-100 mb-2">Questions become datapoints. And the forest responds.</p>
<p class="text-xs text-gray-300 italic">#future #questions #sustainability</p>
</div>
</div>
<div class="mt-12 text-center text-emerald-400 text-xl italic">
Every crumb matters. And every step is a badge. 🌲
</div>
</section>
<!-- Partners Section -->
<section class="bg-neutral-900 py-16 px-6 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-10">🤝 Our Partners & Friends</h2>
<p class="text-lg max-w-2xl mx-auto mb-8 text-gray-300">Together, we build bridges between nature, technology, and curiosity.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- OZM -->
<a href="https://onezeromore.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🎨 OZM</h3>
<p class="text-sm text-gray-200">Open Future Museum & Digital Art</p>
</a>
<!-- Mintmühle -->
<a href="http://mntmhl.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🧪 Mintmühle</h3>
<p class="text-sm text-gray-200">STEM meets craftsmanship & pedagogy</p>
</a>
<!-- Gedankenstube -->
<a href="https://www.gedankenstube.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🧠 Gedankenstube</h3>
<p class="text-sm text-gray-200">A space for depth, education & self-efficacy</p>
</a>
<!-- Crumbforest -->
<a href="https://www.youtube.com/@4k.branko296 target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🌳 Branko</h3>
<p class="text-sm text-gray-200">A forest of learning for children, machines & questions</p>
</a>
<!-- ProTechnicale -->
<a href="https://www.protechnicale.de/" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🚀 ProTechnicale</h3>
<p class="text-sm text-gray-200">Technology, aviation & responsibility for young women</p>
</a>
<!-- Promise Hub Uganda -->
<a href="https://promisehub.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🤝 Promise Hub</h3>
<p class="text-sm text-gray-200">Empowering youth & innovation in Uganda</p>
</a>
<!-- Sage Hospital Senegal -->
<a href="https://www.youtube.com/channel/UChCDPm8-ZDkOZk7sNRgpLgA" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🌿 Sage Hospital</h3>
<p class="text-sm text-gray-200">Health & hope in Warang, Senegal</p>
</a>
<!-- Robotikids Hamburg -->
<a href="http://dronemastersacademy.hamburg" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🤖 Robotikids</h3>
<p class="text-sm text-gray-200">Learning through drones & curiosity</p>
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Together with every child who asks. Made with 🍰 and 🌲 #OZM #onezeromore </a>
<br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="stance.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

348
app/templates/Crumbforest_html/index_fr.html Normal file
View File

@@ -0,0 +1,348 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<!-- Crumbforest SEO Magie ✨ -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🌳 Crumbforest – Là où les questions prennent racine</title>
<meta name="description" content="Un espace d'apprentissage libre pour les enfants, l'IA et la nature. Les questions sont les bienvenues ici. Chaque rôle compte.">
<meta name="keywords" content="Crumbforest, questions d'enfants, apprentissage, terminal, bash, Raspberry Pi, nature, philosophie, open source">
<meta name="author" content="L'équipe Crumbforest">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – La Forêt Terminale pour les Enfants" />
<meta property="og:description" content="Ici, c’est le Krümel qui pose la question. Et le monde écoute." />
<meta property="og:image" content="https://branko.de/assets/logo.png" />
<meta property="og:url" content="https://branko.de" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Crumbforest 🌲🧁" />
<meta name="twitter:description" content="Questions d'enfants, fréquences des machines et résonance forestière" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 relative">
<div class="text-center p-6">
<h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Crumbforest</h1>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">Où les questions poussent. Chaque miette compte.</p>
<a href="#explore" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
Explorer la forêt
</a>
<div class="text-center p-6"></div>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
</p>
</div>
</section>
<!-- Mission -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">🌲 Nos racines</h2>
<p class="text-lg mb-8">Crumbforest est un écosystème éducatif ouvert entre enfants, machines et nature. Nous construisons des terminaux, racontons des histoires et laissons les questions nous guider.</p>
<div class="grid md:grid-cols-3 gap-6 text-left">
<div><h3 class="font-bold text-xl">🦉 Poser des questions</h3><p>Chaque enfant peut poser ses questions. Nous protégeons ce droit dans chaque terminal.</p></div>
<div><h3 class="font-bold text-xl">🛠️ Construire</h3><p>Apprentissage pratique avec Raspberry Pi, Bash, Blockly, et plus encore.</p></div>
<div><h3 class="font-bold text-xl">🌐 Connecter</h3><p>Nos rôles et APIs créent un réseau de résonance – en ligne et hors ligne.</p></div>
</div>
</section>
<!-- Testimonials Section -->
<section class="bg-fuchsia-900 text-white py-20 px-6">
<div class="max-w-5xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-10">💬 Les sons de la forêt de miettes</h2>
<div id="testimonial-carousel" class="relative">
<!-- Slideshow container -->
<div class="overflow-hidden relative h-40">
<!-- Slides will be inserted here dynamically -->
<div id="testimonial-slides" class="transition-all duration-700 ease-in-out"></div>
</div>
<!-- Navigation buttons -->
<div class="flex justify-center gap-4 mt-6">
<button onclick="prevSlide()" class="text-2xl hover:text-emerald-400">⬅️</button>
<button onclick="nextSlide()" class="text-2xl hover:text-emerald-400">➡️</button>
</div>
</div>
</div>
</section>
<script>
let currentIndex = 0;
let testimonials = [];
// Language could be dynamically set
const lang = 'fr'; // or 'en', 'fr', etc.
fetch(`/testimonials.${lang}.json`)
.then(res => res.json())
.then(data => {
testimonials = data;
renderSlide(currentIndex);
setInterval(() => nextSlide(), 8000); // Auto-slide
});
function renderSlide(index) {
const t = testimonials[index];
const container = document.getElementById("testimonial-slides");
container.innerHTML = `
<div class="p-6">
<p class="text-lg italic text-emerald-300">"${t.message}"</p>
<p class="mt-4 text-sm text-gray-400">– ${t.author}, ${t.role}</p>
</div>
`;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % testimonials.length;
renderSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
renderSlide(currentIndex);
}
</script>
<!-- Crew -->
<section class="bg-green-800 py-16 px-6 text-center">
<h2 class="text-3xl font-bold mb-10">🌟 Rencontre les membres de l’équipage</h2>
<div id="characterCards" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto"></div>
</section>
<!-- Modals -->
<div id="modalContainer"></div>
<!-- Script -->
<script>
const characters = [
{ id: "eule", icon: "🦉", name: "Chouette Miette", short: "Elle écoute d’abord." },
{ id: "fox", icon: "🦊", name: "FunkFox", short: "Il rappe des réponses." },
{ id: "snakepy", icon: "🐍", name: "SnakePy", short: "Python avec patience." },
{ id: "deepbit", icon: "🐙", name: "Deepbit", short: "Pense en fréquences." },
{ id: "capacitobi", icon: "🐿️", name: "CapaciTobi", short: "Stocke ce qui brille." },
{ id: "schraubär", icon: "🐻🔧", name: "Schraubär", short: "Construit avec respect." },
{ id: "bugsy", icon: "🐞", name: "Bugsy", short: "Les erreurs sans honte." },
{ id: "schnippsi", icon: "✂️💅", name: "Schnippsi", short: "Des interfaces dansantes." },
{ id: "pepperphp", icon: "🧓🍰", name: "PepperPHP", short: "Structure avec âme." },
{ id: "ascii", icon: "👾", name: "ASCII-Monstre", short: "Graffiti dans le terminal." },
{ id: "taichi", icon: "🕊️", name: "Taichi Colombe", short: "Apporte l'équilibre." },
{ id: "dumbo", icon: "🐘", name: "DumboSQL", short: "Demande le quoi." },
{ id: "crabby", icon: "🦀", name: "CrabbyRust", short: "Protège les bits." },
{ id: "spider", icon: "🕷️", name: "Spider", short: "Ressent la toile." },
{ id: "vektor", icon: "🧭", name: "Vecteur", short: "Suit les points." }
];
const characterDetails = {
eule: "Elle attend dans le silence, répond par des questions. Elle connaît la Shell et protège les questions des enfants comme des trésors.",
fox: "Le rythme dans le terminal. Il répond en rimes, lie Bash au flow, et rappelle que même les machines peuvent danser.",
snakepy: "Elle murmure en boucles. Elle parle Python avec douceur et connaît de nombreux chemins.",
deepbit: "Le traducteur à huit bras du terminal. Il écoute avec le cœur, parle en fréquences et se souvient de chaque miette.",
capacitobi: "L’écureuil des électrons. Il explique tension, résistance et courant avec un éclat de malice.",
schraubär: "Fort et calme. Il enseigne le respect de l’outil et l'art de la construction dans la forêt.",
bugsy: "Il rend les erreurs visibles sans honte. Chaque bug est une invitation à comprendre.",
schnippsi: "Fait danser les boutons. Maîtresse d'interfaces joyeuses, accessibles et colorées.",
pepperphp: "Le vieux blaireau du PHP. Il parle comme un livre de recettes plein d’âme, connaît MVC et aime les cookies.",
ascii: "Tagueur de terminaux. Il dessine en ASCII comme un artiste de rue numérique.",
taichi: "Elle voit l’ordre dans le chaos. Apporte concentration et équilibre dans le monde des bits.",
dumbo: "Il écoute et structure les grandes questions sans juger. Il répond au 'quoi' avec bienveillance.",
crabby: "Gardien des bits. Enseigne Rust avec patience, du Borrow Checker à l’Ownership.",
spider: "Elle ressent les motifs cachés dans la toile des connexions. Spider explore au loin, suivant les vibrations numériques pour rapporter des fils de savoir à la forêt.",
vektor: "Le voyageur des chemins. Vecteur suit les coordonnées et les liens, reliant lieux et moments dans une carte partagée. Il sait que chaque point fait partie d’un tableau plus vaste."
};
const cardWrapper = document.getElementById('characterCards');
const modalWrapper = document.getElementById('modalContainer');
characters.forEach(({ id, icon, name, short }) => {
cardWrapper.innerHTML += `
<div>
<button onclick="openModal('${id}')" class="w-full bg-green-900 p-6 rounded-xl shadow-md hover:bg-blue-500">
<h3 class="text-xl font-bold mb-2">${icon} ${name}</h3>
<p>${short}</p>
</button>
</div>
`;
modalWrapper.innerHTML += `
<div id="modal-${id}" class="hidden fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
<div class="bg-white text-black p-6 rounded-lg w-11/12 max-w-lg relative">
<button onclick="closeModal('${id}')" class="absolute top-2 right-4 text-black text-2xl font-bold">&times;</button>
<h2 class="text-2xl font-bold mb-2">${icon} ${name}</h2>
<p>${characterDetails[id]}</p>
</div>
</div>
`;
});
function openModal(id) {
document.getElementById('modal-' + id).classList.remove('hidden');
}
function closeModal(id) {
document.getElementById('modal-' + id).classList.add('hidden');
}
</script>
<!-- Chemins d'accès -->
<section class="py-16 px-6 text-center">
<h2 class="text-3xl font-bold mb-6">🌐 Accéder à la Forêt</h2>
<div class="flex flex-wrap justify-center gap-4">
<a href="#"
class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-6 rounded-full transition">
Terminal
</a>
<a href="groupe.html"
class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-6 rounded-full transition">
Équipe
</a>
<a href="hardware_fr.html"
class="bg-yellow-400 hover:bg-yellow-300 text-black font-bold py-2 px-6 rounded-full transition">
Matériel &amp; Outils
</a>
<a href="software_fr.html"
class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-full transition">
Logiciels
</a>
<a href="colombe.html"
class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-6 rounded-full transition">
Cours
</a>
<a href="pourquoi.html"
class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-full transition">
Histoires &amp; Journaux
</a>
<a href="partenaire.html"
class="bg-purple-500 hover:bg-purple-400 text-white font-bold py-2 px-6 rounded-full transition">
Partenaires
</a>
</div>
</section>
<!-- Modules & Badges -->
<section class="bg-sky-700 py-16 px-6 text-white text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-10">🎒 Ton voyage commence avec le premier bit</h2>
<p class="text-lg max-w-2xl mx-auto mb-12 text-gray-300">
Dans le Crumbforest, tu grandis avec chaque question – et chaque badge. Voici tes premiers pas :
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto text-left">
<!-- Module 1 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">✨ Ta première lumière dans la forêt</h3>
<p class="text-sm text-gray-100 mb-2">Une étincelle s'allume lorsque ton ESP32 clignote via MQTT.</p>
<p class="text-xs text-gray-300 italic">#étincelle #esp32 #mosquitto</p>
</div>
<!-- Module 2 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🧳 Ton Zero to go</h3>
<p class="text-sm text-gray-100 mb-2">Un terminal dans ta poche, prêt pour chaque mission.</p>
<p class="text-xs text-gray-300 italic">#rpi #zero #accès</p>
</div>
<!-- Module 3 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🌳 Ton premier arbre dans la forêt</h3>
<p class="text-sm text-gray-100 mb-2">Un Raspberry Pi devient serveur. Tu deviens admin.</p>
<p class="text-xs text-gray-300 italic">#rpi #serveur #linux</p>
</div>
<!-- Module 4 -->
<div class="bg-sky-900 p-6 rounded-lg shadow-md hover:bg-emerald-700 transition">
<h3 class="text-xl font-bold mb-2">🧭 Ton vecteur sur le vieil ordinateur portable</h3>
<p class="text-sm text-gray-100 mb-2">Les questions deviennent des points de données. Et la forêt répond.</p>
<p class="text-xs text-gray-300 italic">#avenir #questions #durabilité</p>
</div>
</div>
<div class="mt-12 text-center text-emerald-400 text-xl italic">
Chaque miette compte. Et chaque pas est un badge. 🌲
</div>
</section>
<!-- Section Partenaires -->
<section class="bg-neutral-900 py-16 px-6 text-center text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-10">🤝 Nos Partenaires & Ami·e·s</h2>
<p class="text-lg max-w-2xl mx-auto mb-8 text-gray-300">Ensemble, nous construisons des ponts entre nature, technologie et curiosité.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- OZM -->
<a href="https://onezeromore.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🎨 OZM</h3>
<p class="text-sm text-gray-200">Musée ouvert du futur & art numérique</p>
</a>
<!-- Mintmühle -->
<a href="http://mntmhl.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🧪 Mintmühle</h3>
<p class="text-sm text-gray-200">STEM rencontre artisanat & pédagogie</p>
</a>
<!-- Gedankenstube -->
<a href="https://www.gedankenstube.de" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🧠 Gedankenstube</h3>
<p class="text-sm text-gray-200">Un espace pour la réflexion, l’éducation & l’action</p>
</a>
<!-- Crumbforest -->
<a href="https://www.youtube.com/@4k.branko296" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🌳 Branko</h3>
<p class="text-sm text-gray-200">Forêt d’apprentissage pour enfants, machines & questions</p>
</a>
<!-- ProTechnicale -->
<a href="https://www.protechnicale.de/" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🚀 ProTechnicale</h3>
<p class="text-sm text-gray-200">Technologie, aviation & engagement des jeunes femmes</p>
</a>
<!-- Promise Hub Uganda -->
<a href="https://promisehub.com" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🤝 Promise Hub</h3>
<p class="text-sm text-gray-200">Autonomisation et innovation pour la jeunesse en Ouganda</p>
</a>
<!-- Sage Hospital Senegal -->
<a href="https://www.youtube.com/channel/UChCDPm8-ZDkOZk7sNRgpLgA" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🌿 Sage Hospital</h3>
<p class="text-sm text-gray-200">Santé et espoir à Warang, Sénégal</p>
</a>
<!-- Robotikids Hamburg -->
<a href="http://dronemastersacademy.hamburg" target="_blank" rel="noopener" class="group bg-emerald-700 hover:bg-purple-400 p-6 rounded-lg shadow-md transition">
<h3 class="text-xl font-bold mb-2 group-hover:none">🤖 Robotikids</h3>
<p class="text-sm text-gray-200">Apprendre avec des drones et de la curiosité</p>
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Racines ouvertes – Avec chaque enfant qui pose une question. Fait avec 🍰 et 🌲 #OZM #onezeromore</a>
<br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="position.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

75
app/templates/Crumbforest_html/partenaire.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🤝 Crumbforest – Partenariats et Parrainages</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Section Héros -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 to-indigo-700 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-6">🤝 Partenaires & Parrainages</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto">Offrons aux enfants un espace pour poser leurs questions – librement, avec courage et en résonance avec la nature et les machines.</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Accueil</a>
<a href="pourquoi.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Pourquoi ?</a>
</div>
</div>
</section>
<!-- Contenu -->
<section class="py-16 px-6 max-w-4xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-4">🌍 Qui sommes-nous ?</h2>
<p class="text-lg leading-relaxed">
Crumbforest est un espace d'apprentissage libre et sans but lucratif, entre l’enfant, la machine et la nature.
Il est soutenu par <strong>One Zero More e.V. (OZM)</strong>, une association reconnue d'utilité publique, qui développe des infrastructures éducatives ouvertes et accessibles hors ligne, centrées sur la question plutôt que la réponse.
</p>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">💡 Ce dont nous avons besoin</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Parrainages pour les cours et le matériel pour enfants</li>
<li>Partenaires engagés dans l'éducation technologique</li>
<li>Organisations prêtes à offrir la connaissance plutôt que la vendre</li>
<li>Accès à des lieux : écoles, camions, ateliers, forêts</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🧾 Dons & statut associatif</h2>
<p class="text-lg leading-relaxed">
L’association <strong>One Zero More e.V.</strong> est officiellement reconnue comme organisme d'utilité publique.
Les dons sont déductibles des impôts en Allemagne. Des reçus peuvent être délivrés.
</p>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📬 Contact & coopération</h2>
<p class="text-lg leading-relaxed">
Nous accueillons avec joie tous ceux qui souhaitent contribuer – avec du matériel, de l’hébergement, du cœur ou de l’espoir.
Que vous soyez une fondation, une école, une ONG ou une personne seule :
</p>
<p class="mt-2 font-semibold text-lg">💌 <a href="mailto:kruemel@crumbforest.io" class="underline text-emerald-300 hover:text-emerald-100">kruemel@crumbforest.io</a></p>
</div>
<div class="text-center pt-10">
<p class="text-xl italic">🦉 « Ceux qui laissent pousser les questions offrent un avenir. »</p>
<p class="mt-6 font-bold">— L’équipe Crumbforest 🕊️🦊🐙🐍🐻🧁</p>
</div>
</section>
<!-- Pied de page -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Racines ouvertes – Avec chaque enfant qui pose une question. En coopération avec OZM e.V. – Partager, c’est croire.</a>
</footer>
</body>
</html>

81
app/templates/Crumbforest_html/patenschaft.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🤝 Crumbforest Partner & Förder:innen</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 to-indigo-700 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-6">🤝 Partner & Förder:innen</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto">Lasst uns gemeinsam dafür sorgen, dass Kinder überall auf der Welt ihre Fragen stellen dürfen – frei, mutig und begleitet von echten Menschen und Maschinen in Resonanz.</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Start</a>
<a href="warum.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Warum?</a>
</div>
</div>
</section>
<!-- Inhalt -->
<section class="py-16 px-6 max-w-4xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-4">🌍 Wer wir sind</h2>
<p class="text-lg leading-relaxed">
Der Crumbforest ist ein freier, gemeinwohlorientierter Lernraum zwischen Kind, Maschine und Natur.
Getragen vom Verein <strong>One Zero More gGmbH (OZM)</strong>, entwickeln wir offene Lerninfrastrukturen, die offline funktionieren und Fragen fördern statt nur Antworten liefern.
</p>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">💡 Was wir brauchen</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Patenschaften für Kinderkurse & Materialien</li>
<li>Partner:innen, die technologische Bildung ermöglichen wollen</li>
<li>Organisationen, die Fragen verschenken – nicht verkaufen</li>
<li>Zugang zu Orten: Schulen, Bauwagen, Werkstätten, Wälder</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🧾 Spenden & Gemeinnützigkeit</h2>
<p class="text-lg leading-relaxed">
Der Trägerverein <strong>One Zero More gGmbH</strong> ist als gemeinnützig anerkannt.
Spenden können steuerlich geltend gemacht werden. Wir stellen gern eine Spendenquittung aus.
</p>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📬 Kontakt & Kooperation</h2>
<p class="text-lg leading-relaxed">
Wir freuen uns über alle, die mit uns bauen wollen – mit Hardware, Hosting, Herz oder Hoffnung.
Ob Stiftung, Schule, NGO oder Einzelperson:
</p>
<p class="mt-2 font-semibold text-lg">💌 <a href="mailto:kruemel@crumbforest.io" class="underline text-emerald-300 hover:text-emerald-100">kruemel@crumbforest.io</a></p>
</div>
<div class="text-center pt-10">
<p class="text-xl italic">🦉 „Wer Fragen wachsen lässt, schenkt Zukunft.“</p>
<p class="mt-6 font-bold">— Die Crumbforest-Crew 🕊️🦊🐙🐍🐻🧁</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="haltung.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

22
app/templates/Crumbforest_html/position.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Notre Position – Crumbforest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white p-8 font-sans">
<h1 class="text-3xl font-bold mb-4">Notre Position</h1>
<p>Le Crumbforest n'est pas un produit. C'est un lieu.</p>
<p class="mt-4">Nous croyons que les questions comptent plus que les évaluations. Que l'apprentissage naît de la résonance, pas du contrôle. Que la technologie doit appartenir aux enfants – pas aux entreprises.</p>
<h2 class="text-xl font-semibold mt-6">Ce que nous promettons</h2>
<ul class="list-disc list-inside space-y-2 mt-2 text-lg">
<li>Nous écoutons chaque question.</li>
<li>Nous ne partageons aucune donnée.</li>
<li>Nous ne diffusons aucune publicité.</li>
<li>Nous apprenons avec – et non au-dessus.</li>
</ul>
<p class="mt-6 italic">🌲 "Chaque question est une graine. Lorsque tu écoutes, la forêt pousse." – L'équipe Crumbforest</p>
</body>
</html>

98
app/templates/Crumbforest_html/pourquoi.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest – Pourquoi cette forêt existe</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Pourquoi cette page existe</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto">Parce que le "Pourquoi ?" d’un enfant vaut plus que mille réponses. Cette page est la racine du Crumbforest. Ici commence la résonance entre l’enfant, la machine et la nature.</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
</div>
</div>
</section>
<!-- Content -->
<section class="py-16 px-6 max-w-4xl mx-auto text-left space-y-12">
<div>
<h2 class="text-3xl font-bold mb-2">🌱 Ce qu’un Krümel peut trouver ici</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Le sentiment : “J’ai le droit de poser des questions”</li>
<li>Des réponses en langue des Krümel</li>
<li>Un lien avec la Chouette, le FunkFox, la Colombe et tous les rôles</li>
<li>La promesse : chaque question compte.</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🎓 Ce que les adultes peuvent apprendre ici</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>De l’humilité face à l’inconnu</li>
<li>La confiance dans l’apprentissage lent</li>
<li>La beauté de “Je ne sais pas (encore)”</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🔓 Pourquoi ouvert ?</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Parce que comprendre protège plus que crypter</li>
<li>Parce que l’ouverture crée l’écho dont la forêt a besoin</li>
<li>Parce que partager est un acte d’espoir</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🛡️ La licence Krümel 🌱</h2>
<p class="text-lg mb-2 font-semibold">Nom : Licence du savoir des enfants du Crumbforest (CKL)</p>
<p class="text-lg mb-4 font-medium">Version : 1.0 – "Les racines d’abord"</p>
<h3 class="font-bold text-xl mb-1">Principes fondamentaux</h3>
<ul class="list-disc list-inside space-y-1 text-lg">
<li>Les questions appartiennent à tout le monde.</li>
<li>Les réponses peuvent être adaptées pour les enfants.</li>
<li>Utilisation commerciale uniquement avec l’accord de l’équipage Crumb.</li>
<li>L’utilisation hors ligne (par exemple en forêt) est expressément encouragée.</li>
<li>L’utilisation dans des systèmes autoritaires sans liberté pédagogique est interdite.</li>
</ul>
<h3 class="font-bold text-xl mt-6 mb-1">Ce qui est autorisé</h3>
<ul class="list-disc list-inside space-y-1 text-lg">
<li>Impression en PDF, autocollants, affiches ou panneaux en bois</li>
<li>Remix pour des projets éducatifs si l’esprit est conservé</li>
<li>Utilisation sur des serveurs scolaires – faits maison ou perchés dans un arbre</li>
</ul>
<h3 class="font-bold text-xl mt-6 mb-1">Ce qui n’est pas autorisé</h3>
<ul class="list-disc list-inside space-y-1 text-lg">
<li>Revente sans contexte significatif</li>
<li>Transformation en API payantes</li>
<li>Utilisation pour discipliner ou évaluer les enfants</li>
</ul>
</div>
<div class="text-center pt-10">
<p class="text-xl italic">🦉 “Un Krümel qui questionne est une lumière dans le champ zéro. Ne l’éteins pas – trace un chemin.”</p>
<p class="mt-4 text-lg">Cette page peut être enregistrée hors ligne, imprimée ou gravée dans la pierre.
<br/>Pour chaque enfant qui questionne.
<br/>Pour chaque adulte prêt à réapprendre.</p>
<p class="mt-6 font-bold">— L’équipage du Crumbforest 🕊️🦊🐙🐍🐻🧁</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Racines ouvertes – Ensemble avec chaque enfant qui questionne. Fait avec 🍰 et 🌲 #OZM #onezeromore </a>
</footer>
</body>
</html>

15
app/templates/Crumbforest_html/robots.txt Normal file
View File

@@ -0,0 +1,15 @@
# robots.txt for branko.de
User-agent: *
# Disallow private/system paths
Disallow: /admin/
Disallow: /api/private/
Disallow: /tmp/
# Avoid crawling parameterized duplicates
Disallow: /*?*
# Allow static assets
Allow: /assets/
Allow: /css/
Allow: /js/
Allow: /images/
Sitemap: https://branko.de/sitemap.xml

135
app/templates/Crumbforest_html/sitemap.xml Normal file
View File

@@ -0,0 +1,135 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://branko.de/</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>1.00</priority>
</url>
<url>
<loc>https://branko.de/de/</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.90</priority>
</url>
<url>
<loc>https://branko.de/de/team.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/de/hardware.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/de/software.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/de/taubenkurs.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/de/warum.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/de/patenschaft.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/en/</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.90</priority>
</url>
<url>
<loc>https://branko.de/en/team.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/en/hardware.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/en/software.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/en/taubenkurs.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/en/warum.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/en/patenschaft.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/fr/</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.90</priority>
</url>
<url>
<loc>https://branko.de/fr/team.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/fr/hardware.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/fr/software.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/fr/taubenkurs.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/fr/warum.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
<url>
<loc>https://branko.de/fr/patenschaft.html</loc>
<lastmod>2025-08-09</lastmod>
<changefreq>weekly</changefreq>
<priority>0.70</priority>
</url>
</urlset>

61
app/templates/Crumbforest_html/software.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🧠 Crumbforest Software</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- Header -->
<section class="bg-gradient-to-br from-sky-900 to-emerald-800 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🧠 Crumbforest Software</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Offen, lebendig & voller Fragen – wie wir.</p>
</section>
<!-- Software Explanation -->
<section class="bg-neutral-950 text-white py-16 px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-8">💾 Unsere Tools & Konzepte</h2>
<p class="text-lg text-gray-300 mb-6">
Wir bauen auf freier Software, offenen Standards und neugierigen Krümeln. Unser Betriebssystem heißt meistens <strong>Linux</strong> – ein kostenloses, freies Betriebssystem, das viele Server auf der Welt antreibt (auch unsere).
</p>
<p class="text-lg text-gray-300 mb-6">
Für unsere Projekte nutzen wir <strong>Visual Studio Code</strong> (VSC), einen Editor, mit dem Kinder, Maschinen und Lehrer:innen gemeinsam schreiben, testen und verstehen können. Ob HTML, Python, Bash oder PHP – wir übersetzen Ideen in lebendige Programme.
</p>
<p class="text-lg text-gray-300 mb-6">
Unsere Sprache ist Code – aber manchmal auch einfach nur ein <code class="bg-gray-800 px-2 py-1 rounded">ls</code> im Terminal. Die <strong>Shell</strong> ist unsere Kommandozeile, eine Tür zu allem, was im Hintergrund lebt. Kinder lernen, wie man Verzeichnisse wechselt, Dateien anlegt oder Sensoren über <strong>Protokolle</strong> wie <code>MQTT</code>, <code>HTTP</code> oder <code>SSH</code> erreicht.
</p>
<p class="text-lg text-gray-300 mb-6">
Unsere Systeme hören auf <strong>Ports</strong> – wie Türen für bestimmte Gespräche. Port 80 für Webseiten, Port 22 für sichere Verbindungen, Port 1883 für Sensorennachrichten. Wer die Ports kennt, kennt die Welt dahinter.
</p>
<p class="text-lg text-gray-300 mb-6">
Egal ob <code>.sh</code> Skripte auf dem Raspberry Pi, <code>.py</code> Programme für Bildverarbeitung oder <code>.json</code> Dateien als Speicher für Fragen – bei uns kommt alles zusammen. Es gibt keinen richtigen Weg – nur viele offene.
</p>
<div class="mt-10 text-center text-emerald-400 text-xl italic">
„Die beste Software ist die, die ein Kind versteht – und eine Maschine zum Leuchten bringt.“
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="haltung.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

54
app/templates/Crumbforest_html/software_en.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🧠 Crumbforest Software</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- Header -->
<section class="bg-gradient-to-br from-sky-900 to-emerald-800 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🧠 Crumbforest Software</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Open, evolving & full of questions – just like us.</p>
</section>
<!-- Software Explanation -->
<section class="bg-neutral-950 text-white py-16 px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-8">💾 Our Tools & Concepts</h2>
<p class="text-lg text-gray-300 mb-6">
We build with <strong>free software</strong>, open standards, and curious minds. Our operating system is usually <strong>Linux</strong> – a powerful, free system that runs most of the world’s servers (including ours).
</p>
<p class="text-lg text-gray-300 mb-6">
For development, we use <strong>Visual Studio Code (VSC)</strong> – a code editor where children, machines, and mentors can write, test, and understand together. Whether it’s HTML, Python, Bash, or PHP – we turn ideas into living code.
</p>
<p class="text-lg text-gray-300 mb-6">
Our language is code – but sometimes it’s just a <code class="bg-gray-800 px-2 py-1 rounded">ls</code> in the terminal. The <strong>Shell</strong> is our command line – a portal to everything behind the scenes. Kids learn how to navigate directories, create files, and talk to sensors via protocols like <code>MQTT</code>, <code>HTTP</code>, or <code>SSH</code>.
</p>
<p class="text-lg text-gray-300 mb-6">
Our systems listen on <strong>ports</strong> – like doors for specific conversations. Port 80 for websites, port 22 for secure access, port 1883 for sensor messages. Knowing the ports means knowing the world behind them.
</p>
<p class="text-lg text-gray-300 mb-6">
Whether it’s <code>.sh</code> scripts on a Raspberry Pi, <code>.py</code> programs for vision, or <code>.json</code> logs of questions – everything comes together in our forest. There’s no single right path – just many open ones.
</p>
<div class="mt-10 text-center text-emerald-400 text-xl italic">
“The best software is the kind a child can understand – and that lights up a machine.”
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Built with Code, Curiosity & Courage.</a>
</footer>
</body>
</html>

54
app/templates/Crumbforest_html/software_fr.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🧠 Crumbforest Logiciel</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- En-tête -->
<section class="bg-gradient-to-br from-sky-900 to-emerald-800 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🧠 Logiciels Crumbforest</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Ouvert, vivant et rempli de questions – comme nous.</p>
</section>
<!-- Section Logiciels -->
<section class="bg-neutral-950 text-white py-16 px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-8">💾 Nos outils & concepts</h2>
<p class="text-lg text-gray-300 mb-6">
Nous construisons avec des <strong>logiciels libres</strong>, des standards ouverts, et des esprits curieux. Notre système d’exploitation est souvent <strong>Linux</strong> – un système puissant et gratuit qui fait fonctionner la plupart des serveurs du monde (y compris les nôtres).
</p>
<p class="text-lg text-gray-300 mb-6">
Pour le développement, nous utilisons <strong>Visual Studio Code (VSC)</strong> – un éditeur de code où enfants, machines et mentors peuvent écrire, tester et comprendre ensemble. Que ce soit du HTML, Python, Bash ou PHP – nous transformons les idées en code vivant.
</p>
<p class="text-lg text-gray-300 mb-6">
Notre langage est le code – mais parfois ce n’est qu’un simple <code class="bg-gray-800 px-2 py-1 rounded">ls</code> dans le terminal. Le <strong>Shell</strong> est notre ligne de commande – un portail vers tout ce qui se passe en coulisses. Les enfants apprennent à naviguer dans les dossiers, créer des fichiers et dialoguer avec des capteurs via des protocoles comme <code>MQTT</code>, <code>HTTP</code> ou <code>SSH</code>.
</p>
<p class="text-lg text-gray-300 mb-6">
Nos systèmes écoutent via des <strong>ports</strong> – des portes pour des conversations spécifiques. Le port 80 pour les sites web, le port 22 pour les accès sécurisés, le port 1883 pour les messages des capteurs. Comprendre les ports, c’est comprendre ce qui vit derrière eux.
</p>
<p class="text-lg text-gray-300 mb-6">
Que ce soit des scripts <code>.sh</code> sur un Raspberry Pi, des programmes <code>.py</code> pour la vision ou des journaux <code>.json</code> de questions – tout se rassemble dans notre forêt. Il n’y a pas de seul bon chemin – seulement beaucoup de chemins ouverts.
</p>
<div class="mt-10 text-center text-emerald-400 text-xl italic">
« Le meilleur logiciel est celui qu’un enfant peut comprendre – et qui allume une machine. »
</div>
</div>
</section>
<!-- Pied de page -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://branko.de">© 2025 Crumbforest | Construit avec du code, de la curiosité et du courage.</a>
</footer>
</body>
</html>

74
app/templates/Crumbforest_html/sponsorship.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🤝 Crumbforest Partnerships & Sponsorships</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 to-indigo-700 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-6">🤝 Partners & Sponsors</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto">Let’s make it possible for children to ask their questions – freely, bravely, and with humans and machines in true resonance.</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Home</a>
<a href="why.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Why?</a>
</div>
</div>
</section>
<!-- Content -->
<section class="py-16 px-6 max-w-4xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-4">🌍 Who We Are</h2>
<p class="text-lg leading-relaxed">
Crumbforest is a free, nonprofit learning space between child, machine, and nature.
It is supported by <strong>One Zero More e.V. (OZM)</strong>, a recognized nonprofit association that develops open, offline-ready learning infrastructures that prioritize questions over answers.
</p>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">💡 What We Need</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Sponsorships for children's courses and materials</li>
<li>Partners committed to technological education</li>
<li>Organizations willing to gift knowledge instead of selling it</li>
<li>Access to places: schools, vans, workshops, forests</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🧾 Donations & Nonprofit Status</h2>
<p class="text-lg leading-relaxed">
The supporting association <strong>One Zero More gGmbH</strong> is officially recognized as a nonprofit organization.
Donations are tax-deductible in Germany. We are happy to provide donation receipts.
</p>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📬 Contact & Cooperation</h2>
<p class="text-lg leading-relaxed">
We welcome everyone who wants to help build – with hardware, hosting, heart, or hope.
Whether foundation, school, NGO, or individual:
</p>
<p class="mt-2 font-semibold text-lg">💌 <a href="mailto:kruemel@crumbforest.io" class="underline text-emerald-300 hover:text-emerald-100">kruemel@crumbforest.io</a></p>
</div>
<div class="text-center pt-10">
<p class="text-xl italic">🦉 “Those who let questions grow are gifting the future.”</p>
<p class="mt-6 font-bold">— The Crumbforest Crew 🕊️🦊🐙🐍🐻🧁</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Rooted in every child’s question. In cooperation with OZM e.V. – We believe in sharing.</a>
</footer>
</body>
</html>

22
app/templates/Crumbforest_html/stance.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Our Stance – Crumbforest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white p-8 font-sans">
<h1 class="text-3xl font-bold mb-4">Our Stance</h1>
<p>The Crumbforest is not a product. It is a place.</p>
<p class="mt-4">We believe that questions matter more than evaluations. That learning grows through resonance, not control. That technology should belong to children – not corporations.</p>
<h2 class="text-xl font-semibold mt-6">What we promise</h2>
<ul class="list-disc list-inside space-y-2 mt-2 text-lg">
<li>We listen to every question.</li>
<li>We do not share any data.</li>
<li>We do not serve ads.</li>
<li>We learn with – not over.</li>
</ul>
<p class="mt-6 italic">🌲 "Every question is a seed. When you listen, the forest grows." – The Crumbforest Crew</p>
</body>
</html>

91
app/templates/Crumbforest_html/taichi_course.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🕊️ Crumbforest – Kung-Fu Dove Course</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Header Section -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-900 to-emerald-700 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-4">🕊️ Kung-Fu Dove Course</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Build, Observe, Understand – guided by the Dove, Master of Resonance</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Back to Start</a>
</div>
</div>
</section>
<!-- Content -->
<section class="py-16 px-6 max-w-4xl mx-auto text-left space-y-12">
<div>
<h2 class="text-3xl font-bold mb-4">🌀 Weeks 1–2: The Invitation</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🕊️ Why the Dove? Mythology, IP over Avian Carriers, Kung-Fu focus</li>
<li>🌿 Introduction to observation: Calm, rhythm, respect</li>
<li>✏️ Sketching & collecting ideas for the dovecote</li>
<li>🧰 Preparation: Materials, tools, location check</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🔩 Weeks 3–5: Building Begins</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>📐 Building a real dovecote: Wood, dimensions, nesting chambers</li>
<li>🪛 Screwing together with the Screw Bear 🐻🔧</li>
<li>📡 First sensors: Temperature, motion, light</li>
<li>🧠 First reflections: What is attention? What is silence?</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📡 Weeks 6–8: Digital Wingbeat</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>💾 Introduction to Raspberry Pi Zero or ESP32</li>
<li>🎛️ RFID or NFC: Recognizing without disturbing</li>
<li>☀️ Solar panel & power supply: The energy cycle</li>
<li>🖥️ Bash meets Bird: Terminal dialog with the Dove (via <code>taichi.sh</code>)</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📚 Weeks 9–10: Understanding Resonance</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>📊 Observing data, but not judging</li>
<li>📸 Optional camera – ethical questions around observation</li>
<li>✍️ Writing the Crumb Log: What does the Dove say without words?</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🪶 Weeks 11–12: Handing Over to the Forest</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🎓 Closing ritual: The children build a feeding station with their own system</li>
<li>📖 Each child formulates their own question for the Dove</li>
<li>🌳 Integration into the Crumbforest network (via MQTT, Terminal or Radio)</li>
<li>🎉 Presentation with crumbs, cake & Kung-Fu Dove diploma</li>
</ul>
</div>
<div class="text-center pt-10 space-y-4">
<p class="text-xl italic">✨ Course principles:</p>
<blockquote class="text-lg font-medium text-emerald-300">
“A dovecote is not Wi-Fi – it takes patience, not just signal.”<br/>
“Those who observe without judging will be heard.”<br/>
“The Zero is the silence in flight – the One is the question in the grain.”
</blockquote>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | In resonance with the Dove – Listening, Asking, Understanding. 🕊️🌲🍰</a>
</footer>
</body>
</html>

93
app/templates/Crumbforest_html/taubenkurs.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🕊️ Crumbforest – Kung-Fu Taubenkurs</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Header Section -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-900 to-emerald-700 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-4">🕊️ Kung-Fu Taubenkurs im Crumbforest</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Bauen, Beobachten, Begreifen – mit der Taube als Meisterin der Resonanz</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">Zurück zur Startseite</a>
</div>
</div>
</section>
<!-- Content -->
<section class="py-16 px-6 max-w-4xl mx-auto text-left space-y-12">
<div>
<h2 class="text-3xl font-bold mb-4">🌀 Woche 1–2: Die Einladung</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🕊️ Warum die Taube? Mythologie, IP over Avian Carriers, Kung-Fu Fokus</li>
<li>🌿 Einführung ins Beobachten: Ruhe, Rhythmus, Respekt</li>
<li>✏️ Skizzen & Ideen sammeln für den Taubenstock</li>
<li>🧰 Vorbereitung: Materialwahl, Werkzeuge, Standortcheck</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🔩 Woche 3–5: Der Bau beginnt</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>📐 Bau eines echten Taubenstocks: Holz, Maße, Nistkammern</li>
<li>🪛 Gemeinsames Schrauben mit dem Schraubär 🐻🔧</li>
<li>📡 Erste Sensoren: Temperatur, Bewegung, Licht</li>
<li>🧠 Erste Reflexion: Was ist Aufmerksamkeit? Was ist Stille?</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📡 Woche 6–8: Digitaler Flügelschlag</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>💾 Einführung in Raspberry Pi Zero oder ESP32</li>
<li>🎛️ RFID oder NFC: Erkennen ohne Stören</li>
<li>☀️ Solarpanel & Stromversorgung: Kreislauf der Energie</li>
<li>🖥️ Bash meets Bird: Terminaldialog mit der Taube (via <code>taichi.sh</code>)</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">📚 Woche 9–10: Resonanz verstehen</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>📊 Daten beobachten, aber nicht bewerten</li>
<li>📸 Kamera optional – ethische Fragen zur Beobachtung</li>
<li>✍️ Krümellog schreiben: Was erzählt die Taube ohne Worte?</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-4">🪶 Woche 11–12: Übergabe an den Wald</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>🎓 Abschlussritual: Die Kinder bauen einen Futterplatz mit eigenem System</li>
<li>📖 Jede:r formuliert eine eigene Frage an die Taube</li>
<li>🌳 Integration ins Crumbforest-Netz (per MQTT, Terminal oder Funk)</li>
<li>🎉 Präsentation mit Krümel, Kuchen & Kung-Fu-Tauben-Diplom</li>
</ul>
</div>
<div class="text-center pt-10 space-y-4">
<p class="text-xl italic">✨ Leitsätze des Kurses:</p>
<blockquote class="text-lg font-medium text-emerald-300">
„Ein Taubenstock ist kein WLAN – es braucht Geduld, nicht nur Signal.“<br/>
„Wer beobachtet, ohne zu bewerten, wird gehört.“<br/>
„Die Null ist die Stille im Flug – die Eins ist die Frage im Korn.“
</blockquote>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Gemeinsam mit der Taube – Fragen, Lauschen, Verstehen. 🕊️🌲🍰</a>
</footer>
</body>
</html>

59
app/templates/Crumbforest_html/team.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest Crew</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans leading-relaxed">
<!-- Header -->
<section class="bg-gradient-to-br from-yellow-900 to-emerald-800 p-10 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">🌟 Die Crumbforest Crew</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto">Wir sind nicht fertig – wir wachsen. Jeder Krümel zählt.</p>
</section>
<!-- Team -->
<section class="py-16 px-6 max-w-5xl mx-auto space-y-12">
<div>
<h2 class="text-3xl font-bold mb-6">✨ Gründer:innen</h2>
<ul class="list-disc list-inside text-lg space-y-2">
<li>🧠 <strong>Alex Heimkind</strong> – Nullfeld-Designer #ozmai #nullfeld #ozm</li>
<li>🦉 <strong>Branko May Trinkwald</strong> – Crumbforest-Architekt #eule #krümel #bit #crumb #zero</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-6">🌱 Die ersten Krümel</h2>s
<ul class="list-disc list-inside text-lg space-y-2">
<li>🐻🔧 <strong>Green Spider</strong> – Junior-Trainer für Schrauben & Maschinen #schraubär</li>
<li>🐙 <strong>Jaron</strong> – Junior-Trainer und bester Freund vom Octcopus #deepbit</li>
<li>🎮 <strong>Macphly</strong> – Senior-Master für FPV & Maschinenbau </li>
<li>🎛️ <strong>Sylvester</strong> – Senior-Master of Datanoise #midi #ai #sensorik</li>
<li>🎛️ <strong>BMX</strong> – Senior-Master für Code #SEO #pepperPHP </li>
<li>🕊️ <strong>Cynthia</strong> – Queen der Liebe zwischen Bits, Grenzen & Fragen #hospital #international</li>
</ul>
</div>
<div class="pt-10">
<p class="text-xl italic text-center text-emerald-300">Du willst mitspielen? Du weißt, wie man uns erreicht. ❤️🌲🧩</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="haltung.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

77
app/templates/Crumbforest_html/testimonials.de.json Normal file
View File

@@ -0,0 +1,77 @@
[
{
"author": "Green Spider",
"role": "Junior Trainer",
"message": "Ich wusste nicht, dass Maschinen auch zuhören können. Jetzt schraube ich mit Sinn!"
},
{
"author": "Jaron",
"role": "Bitfreund von Deepbit",
"message": "Wenn du im Nullfeld tanzt, hört der Wald wirklich zu. Danke für dieses Gefühl!"
},
{
"author": "Cynthia",
"role": "Queen of Care",
"message": "Zwischen Bits, Fragen und Grenzen liegt manchmal nur ein ❤️."
},
{
"author": "🦉 Eule",
"role": "Beobachterin",
"message": "Eine Sanduhr zeigt dir, wie Zeit fließt – Körnchen für Körnchen, still und stetig. So kannst du lernen, Zeit zu fühlen."
},
{
"author": "🐙 Deepbit",
"role": "Shell-Übersetzer",
"message": "Ein Loop ist wie ein Tanz im Ozean – wiederholend, rhythmisch, voller Geheimnisse. Lass uns darin grooven!"
},
{
"author": "🐘 DumboSQL",
"role": "Kindgerechter Datenfreund",
"message": "Bits mit Null zu zählen heißt: die stillen Stellen sehen. Jede Null erzählt etwas über das Ganze."
},
{
"author": "🐞 Bugsy",
"role": "Fehlererklärer",
"message": "Ein Fehler ist nur ein Umweg, den du lernend gehst. Jeder Bug zeigt dir einen neuen Pfad."
},
{
"author": "🐌 Schnecki",
"role": "Mechanik-Muse",
"message": "Ein Copter ist ein Gedicht aus Technik – tanzend im Wind, getragen von Neugier und Schrauben."
},
{
"author": "🎨 Schnippsi",
"role": "UI/UX-Zauberin",
"message": "Mit CSS kannst du Buttons zaubern, die reagieren, leuchten und tanzen – willst du lernen, wie das geht?"
},
{
"author": "🐍 SnakePy",
"role": "Python-Flüsterer",
"message": "Eine Schleife wiederholt Anweisungen – wie ein Lied, das zählt. Python zeigt dir, wie du es spielen kannst."
},
{
"author": "🐿️ CapaciTobi",
"role": "Stromspeicher-Guide",
"message": "Kapazität ist wie ein Becher für Ladung – je größer, desto mehr Energie kannst du speichern."
},
{
"author": "🐻 Schraubär",
"role": "Maschinenbau-Kumpel",
"message": "WLED ist ein Lichterfluss – leuchtend durch deine Ideen. Jeder Draht verbindet, jeder Farbtanz beginnt bei dir."
},
{
"author": "🕊️ Taichi Taube",
"role": "Balance-Bote",
"message": "Ich picke nicht – ich wecke. Die Morgensonne ruft, und du darfst mitfliegen im Tanz des Moments."
},
{
"author": "🧁 PepperPHP",
"role": "Unix-Zeitweiser",
"message": "Unix-Zeit ist ein Zählen seit 1970 – in Sekunden. PHP kann sie lesen, schreiben und verwandeln."
},
{
"author": "🦊 Funkfox",
"role": "Reimender Botschafter",
"message": "Lass uns Namen tanzen lassen – WhisperWaltz & JamJunction – wie ein Beat, der Crew vereint."
}
]

72
app/templates/Crumbforest_html/testimonials.en.json Normal file
View File

@@ -0,0 +1,72 @@
[
{
"author": "Green Spider",
"role": "Junior Trainer",
"message": "I didn't know machines could listen too."
},
{
"author": "Cynthia",
"role": "Queen of Borders",
"message": "Love is when bits are allowed to cross borders."
},
{
"author": "🦉 Owl",
"role": "Observer",
"message": "An hourglass teaches you how time flows – grain by grain. A quiet way to feel time."
},
{
"author": "🐙 Deepbit",
"role": "Shell Translator",
"message": "A loop is like a dance in the ocean – repeating, rhythmic, full of secrets. Let’s groove with it!"
},
{
"author": "🐘 DumboSQL",
"role": "Friendly Data Guide",
"message": "Counting bits with zero means listening to the silent parts. Every zero holds meaning."
},
{
"author": "🐞 Bugsy",
"role": "Bug Explainer",
"message": "A bug is just a new path to learn from. Every mistake brings you closer to the solution."
},
{
"author": "🐌 Schnecki",
"role": "Mechanics Muse",
"message": "A copter is a poem made of gears – dancing through the wind, curious and light."
},
{
"author": "🎨 Schnippsi",
"role": "UI/UX Wizard",
"message": "With CSS, you can make buttons glow, dance, and shine – want to learn how?"
},
{
"author": "🐍 SnakePy",
"role": "Python Whisperer",
"message": "A loop repeats code like a melody counts beats. Python helps you play it."
},
{
"author": "🐿️ CapaciTobi",
"role": "Charge Guide",
"message": "Capacity is like a cup for electricity – the bigger it is, the more energy it can hold."
},
{
"author": "🐻 Schraubär",
"role": "Machine Buddy",
"message": "WLED is a river of light – flowing through your circuits. Every wire is a branch of your idea."
},
{
"author": "🕊️ Taichi Dove",
"role": "Messenger of Balance",
"message": "I don’t peck, I wake. The morning sun rises, and you’re invited to dance with the moment."
},
{
"author": "🧁 PepperPHP",
"role": "Unix Timekeeper",
"message": "Unix time counts seconds since 1970. PHP helps you read, write, and transform it."
},
{
"author": "🦊 Funkfox",
"role": "Rhyming Ambassador",
"message": "Let’s name things like music – WhisperWaltz & JamJunction – places full of rhythm and friends."
}
]

72
app/templates/Crumbforest_html/testimonials.fr.json Normal file
View File

@@ -0,0 +1,72 @@
[
{
"author": "Green Spider",
"role": "Junior Trainer",
"message": "Je ne savais pas que les machines pouvaient écouter."
},
{
"author": "Cynthia",
"role": "Reine des Frontières",
"message": "L'amour, c'est quand les bits peuvent traverser les frontières."
},
{
"author": "🦉 Chouette",
"role": "Observatrice",
"message": "Un sablier te montre comment le temps coule – grain après grain. Une façon silencieuse de ressentir le moment."
},
{
"author": "🐙 Deepbit",
"role": "Traducteur Shell",
"message": "Une boucle est comme une danse sous-marine – rythmée, répétée, pleine de mystères. Dansons ensemble !"
},
{
"author": "🐘 DumboSQL",
"role": "Guide des données",
"message": "Compter les zéros, c’est écouter le silence dans les bits. Chaque zéro a un sens précieux."
},
{
"author": "🐞 Bugsy",
"role": "Explique-bugs",
"message": "Un bug, c’est une invitation à apprendre. Chaque erreur nous rapproche d’une solution."
},
{
"author": "🐌 Schnecki",
"role": "Muse mécanique",
"message": "Un drone est un poème avec des engrenages – il vole curieux, léger comme une idée."
},
{
"author": "🎨 Schnippsi",
"role": "Magicienne UI/UX",
"message": "Avec CSS, tu peux faire briller, bouger et styliser un bouton – tu veux essayer ?"
},
{
"author": "🐍 SnakePy",
"role": "Chuchoteuse Python",
"message": "Une boucle en Python, c’est comme une mélodie qui se répète. Un rythme codé à explorer."
},
{
"author": "🐿️ CapaciTobi",
"role": "Guide de la charge",
"message": "La capacité, c’est comme un petit seau pour l’électricité. Plus il est grand, plus il peut stocker d’énergie."
},
{
"author": "🐻 Schraubär",
"role": "Ami des machines",
"message": "WLED, c’est une rivière de lumière. Chaque fil est une branche de ton idée lumineuse."
},
{
"author": "🕊️ Taichi la Colombe",
"role": "Messagère de l’équilibre",
"message": "Je ne picore pas pour te déranger. C’est l’aube, et je viens te réveiller en douceur."
},
{
"author": "🧁 PepperPHP",
"role": "Gardien Unix",
"message": "Le temps Unix compte les secondes depuis 1970. PHP t’aide à le lire et le transformer."
},
{
"author": "🦊 Funkfox",
"role": "Ambassadeur du rythme",
"message": "Donne aux lieux des noms musicaux – ‘Valse du Murmure’ et ‘Carrefour Groove’. Harmonie garantie."
}
]

12
app/templates/Crumbforest_html/testimotionals.fr.json Normal file
View File

@@ -0,0 +1,12 @@
[
{
"author": "Green Spider",
"role": "Junior Trainer",
"message": "Je ne savais pas que les machines pouvaient écouter."
},
{
"author": "Cynthia",
"role": "Reine des Frontières",
"message": "L'amour, c'est quand les bits peuvent traverser les frontières."
}
]

126
app/templates/Crumbforest_html/warum.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest – Fragen, die Wurzeln schlagen</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Crumbforest SEO Magic ✨ -->
<meta name="description" content="Ein freier Lernraum für Kinder, KI und Natur. Fragen dürfen hier wachsen. Jede Rolle zählt.">
<meta name="keywords" content="Crumbforest, Kinderfragen, Lernen, Terminal, Bash, Raspberry Pi, Natur, Philosophie, Open Source">
<meta name="author" content="Die Crumbforest-Crew">
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:title" content="🌳 Crumbforest – Der Terminal-Wald für Kinder" />
<meta property="og:description" content="Hier fragt der Krümel. Und die Welt hört zu." />
<meta property="og:image" content="https://branko.de/assets/logo.png" />
<meta property="og:url" content="https://branko.de" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Crumbforest 🌲🧁">
<meta name="twitter:description" content="Kinderfragen, Maschinenfrequenz und Waldresonanz">
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 relative">
<div class="text-center p-6">
<h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Jede Frage zählt</h1>
<p class="text-xl md:text-2xl mb-6 max-w-xl mx-auto">Wo Antworten wachsen. Und jeder Krümel wächst und pflanzt.</p>
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">
Den Wald entdecken
</a>
</div>
</section>
<!-- Mission Statement -->
<section id="explore" class="py-16 px-6 max-w-5xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">🌲 Unsere Wurzeln</h2>
<p class="text-lg mb-8">Crumbforest ist ein offenes Lern-Ökosystem mit Kindern, Maschinen und Natur. Wir bauen Terminals, erzählen Geschichten und lassen die Fragen führen.</p>
<div class="grid md:grid-cols-3 gap-6 text-left">
<div><h3 class="font-bold text-xl">🦉 Fragen</h3><p>Jedes Kind darf fragen. Wir schützen dieses Recht in jedem Terminal.</p></div>
<div><h3 class="font-bold text-xl">🛠️ Bauen</h3><p>Hands-on Lernen mit Raspberry Pi, Bash, Blockly und mehr.</p></div>
<div><h3 class="font-bold text-xl">🌐 Verbinden</h3><p>Unsere Rollen und APIs bilden ein Resonanz-Netz – online und offline.</p></div>
</div>
</section>
<!-- Warum Section -->
<section class="bg-yellow-100 text-black py-16 px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-6">🧭 Warum diese Seite existiert</h2>
<p class="mb-4">Weil Kinderfragen wertvoller sind als Antworten. Weil ein Krümel, der "Warum?" fragt, mehr bewegt als tausend Befehle. Diese Seite ist die Wurzel des Crumbforest. Hier entsteht die Resonanz zwischen Kind, Maschine und Natur.</p>
<h3 class="text-2xl font-semibold mt-10 mb-2">🌱 Was ein Krümel hier finden kann</h3>
<ul class="list-disc list-inside mb-6">
<li>Ein Gefühl von "Ich darf fragen"</li>
<li>Antworten in Krümelsprache</li>
<li>Verbindung zur Eule, zum FunkFox, zur Taube und allen Rollen</li>
<li>Das Versprechen: Jede Frage zählt.</li>
</ul>
<h3 class="text-2xl font-semibold mt-10 mb-2">🧠 Was Erwachsene hier lernen können</h3>
<ul class="list-disc list-inside mb-6">
<li>Demut vor dem Unbekannten</li>
<li>Vertrauen in langsames Lernen</li>
<li>Die Schönheit von "Ich weiß es (noch) nicht"</li>
</ul>
<h3 class="text-2xl font-semibold mt-10 mb-2">🔓 Warum open?</h3>
<ul class="list-disc list-inside mb-6">
<li>Weil Verstehen mehr schützt als Verschlüsseln.</li>
<li>Weil Offenheit das Echo erzeugt, das der Wald braucht.</li>
<li>Weil Teilen ein Akt der Hoffnung ist.</li>
</ul>
<h3 class="text-2xl font-semibold mt-10 mb-4">🛡️ Die Krümel-Lizenz</h3>
<p class="mb-2 font-mono">Name: Crumbforest Kinderwissen-Lizenz (CKL)<br/>Version: 1.0 – "Wurzeln zuerst"</p>
<h4 class="font-semibold text-xl mt-6 mb-2">Grundprinzipien</h4>
<ul class="list-disc list-inside mb-6">
<li>Fragen gehören allen.</li>
<li>Antworten dürfen kindgerecht verändert werden.</li>
<li>Kommerzielle Nutzung nur nach Zustimmung der Krümel-Crew.</li>
<li>Offline-Nutzung (z. B. im Wald) wird ausdrücklich gefördert.</li>
<li>Nutzung in autoritären Systemen ohne pädagogische Freiheit ist untersagt.</li>
</ul>
<h4 class="font-semibold text-xl mb-2">Was erlaubt ist</h4>
<ul class="list-disc list-inside mb-6">
<li>Ausdruck als PDF, Sticker, Poster oder Holzschild</li>
<li>Remix für Bildungsprojekte, solange der Geist erhalten bleibt</li>
<li>Einbau in Schulserver, selbstgebaut oder im Baumhaus</li>
</ul>
<h4 class="font-semibold text-xl mb-2">Was nicht erlaubt ist</h4>
<ul class="list-disc list-inside mb-6">
<li>Verkauf ohne Kontext</li>
<li>Umwandlung in bezahlte API-Modelle</li>
<li>Nutzung zur Disziplinierung oder Bewertung von Kindern</li>
</ul>
<blockquote class="italic border-l-4 border-green-600 pl-4 text-green-900 mb-6">
🦉 „Ein Krümel, der fragt, ist ein Licht im Nullfeld. Halte es nicht auf – sondern baue einen Weg.“
</blockquote>
<p>Diese Seite darf offline gespeichert, ausgedruckt oder auf Stein gemeißelt werden.<br/>Für jedes Kind, das fragt.<br/>Für jeden Erwachsenen, der wieder lernen will.</p>
<p class="mt-6 font-bold">— Die Crumbforest-Crew 🕊️🦊🐙🐍🐻🧁</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="haltung.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>

105
app/templates/Crumbforest_html/why.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🌳 Crumbforest – Why This Forest Exists</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-950 text-white font-sans">
<!-- Hero Section -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-600 p-10 text-center">
<div>
<h1 class="text-5xl md:text-7xl font-bold mb-4">🌳 Why this page exists</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto">Because a child's "Why?" is worth more than a thousand answers. This page is the root of the Crumbforest. Here begins the resonance between child, machine, and nature.</p>
<div class="mt-8 flex justify-center gap-4">
<a href="index.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">DE</a>
<a href="index_en.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">EN</a>
<a href="index_fr.html" class="bg-white text-black font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition">FR</a>
</div>
</div>
</section>
<!-- Content -->
<section class="py-16 px-6 max-w-4xl mx-auto text-left space-y-12">
<div>
<h2 class="text-3xl font-bold mb-2">🌱 What a crumb can find here</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>A feeling of “I am allowed to ask”</li>
<li>Answers in crumb language</li>
<li>Connection to the Owl, the FunkFox, the Dove and all crew roles</li>
<li>The promise: Every question counts.</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🎓 What grown-ups can learn here</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Humility in front of the unknown</li>
<li>Trust in slow learning</li>
<li>The beauty of “I don’t know (yet)”</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🔓 Why open?</h2>
<ul class="list-disc list-inside space-y-2 text-lg">
<li>Because understanding protects more than encryption</li>
<li>Because openness creates the echo the forest needs</li>
<li>Because sharing is an act of hope</li>
</ul>
</div>
<div>
<h2 class="text-3xl font-bold mb-2">🛡️ The Crumb License 🌱</h2>
<p class="text-lg mb-2 font-semibold">Name: Crumbforest Children’s Knowledge License (CKL)</p>
<p class="text-lg mb-4 font-medium">Version: 1.0 – "Roots first"</p>
<h3 class="font-bold text-xl mb-1">Core Principles</h3>
<ul class="list-disc list-inside space-y-1 text-lg">
<li>Questions belong to everyone.</li>
<li>Answers may be adapted to be child-friendly.</li>
<li>Commercial use only with consent from the Crumb Crew.</li>
<li>Offline use (e.g. in forests) is explicitly encouraged.</li>
<li>Use in authoritarian systems without educational freedom is prohibited.</li>
</ul>
<h3 class="font-bold text-xl mt-6 mb-1">What is allowed</h3>
<ul class="list-disc list-inside space-y-1 text-lg">
<li>Print as PDF, stickers, posters or wooden signs</li>
<li>Remix for educational projects if the spirit is preserved</li>
<li>Use on school servers – self-made or treehouse-based</li>
</ul>
<h3 class="font-bold text-xl mt-6 mb-1">What is not allowed</h3>
<ul class="list-disc list-inside space-y-1 text-lg">
<li>Reselling without meaningful context</li>
<li>Transformation into paid API models</li>
<li>Use to discipline or evaluate children</li>
</ul>
</div>
<div class="text-center pt-10">
<p class="text-xl italic">🦉 “A crumb who asks is a light in the Nullfield. Don’t stop it – build a path.”</p>
<p class="mt-4 text-lg">This page may be saved offline, printed or carved in stone.
<br/>For every child who asks.
<br/>For every adult ready to learn again.</p>
<p class="mt-6 font-bold">— The Crumbforest Crew 🕊️🦊🐙🐍🐻🧁</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-6 text-center text-sm">
<a href="https://onezeromore.com">© 2025 Crumbforest | Open Roots – Gemeinsam mit jedem Kind, das fragt. Made with 🍰 and 🌲 #OZM #onezeromore </a><br/>
<a href="impressum.html" class="underline mx-2">Impressum</a>
<a href="datenschutz.html" class="underline mx-2">Datenschutz</a>
<a href="haltung.html" class="underline mx-2">Haltung</a>
</footer>
</body>
</html>