Bauplan: Tools, die sich anpassen lassen
Die Tools der Galerie entstehen alle aus demselben Bausatz. Darum bedienen sie sich gleich und lassen sich gleich umbauen. Dieselben Regeln kannst du für deine eigenen Tools nutzen.
Die Galerie umfasst 26 Tools in Deutsch und Englisch. Sie teilen sich einen gemeinsamen Bausatz, der in jede Datei eingebaut wird. Jede Datei bleibt trotzdem ein einzelnes, lesbares Tool, das du wie jedes andere ändern kannst.
Was jedes Galerie-Tool mitbringt
| Grundfunktion | Was du davon hast | So bittest du in deiner Beschreibung darum |
|---|---|---|
| Startvorlagen | Beim ersten Öffnen fragt das Tool „Womit möchtest du starten?“ und bietet zwei bis vier Varianten für verschiedene Gruppen an. So siehst du sofort, was es für dich kann. | „Biete beim ersten Start drei Varianten mit je einem Satz Beschreibung an.“ |
| Anpassen ohne Code | Listen, Texte, Zeiten und Farben änderst du in einem Bildschirm „Anpassen“. Gespeichert wird nur, was du geändert hast. | „Alle Einstellungen aus KONFIG lassen sich im Tool unter ‚Anpassen‘ ändern und werden getrennt von den Daten gespeichert.“ |
| Rückgängig und Wiederholen | Nach dem Löschen oder Ändern erscheint zehn Sekunden lang „Rückgängig“. Strg+Z und Strg+Y gehen auch. Nur das Löschen aller Daten fragt vorher. | „Rückgängig statt Rückfrage: zehn Sekunden lang ‚Rückgängig‘ in der Meldung, dazu Strg+Z und Strg+Y.“ |
| Sichern | Export aller Daten als JSON, dazu ein lesbarer Export als CSV, wo er nützt. | „Export als JSON und CSV, Import einer JSON-Datei.“ |
| Weitergeben ohne private Einträge | Die Einstellungen lassen sich als Vorlage weitergeben, ohne die Daten. Ein Verein gibt so seine Anwesenheitsliste weiter, ohne die Mitglieder mitzuschicken. | „Ein eigener Knopf kopiert nur die Einstellungen, ohne Daten.“ |
| Laden durch Einfügen | Eine Sicherung lässt sich auch als Text einfügen, nicht nur als Datei. Auf dem Handy ist das oft einfacher. | „Import auch durch Einfügen von Text in ein Feld.“ |
| Hilfe | Zwei Sätze Erklärung, die Tastenkürzel (? öffnet die Hilfe) und ein fertiger Text für „Mit KI ändern“ zum Kopieren. | „Eine Hilfe mit Tastenkürzeln und einer Vorlage, mit der ich das Tool per KI anpassen kann.“ |
| Ton, Vibration, Wachhalten | Abläufe sind hörbar und fühlbar, der Bildschirm bleibt an, solange etwas läuft. Alles ist abschaltbar. | „Ton synthetisch per WebAudio (keine Dateien), Vibration, Bildschirm wachhalten, alles abschaltbar.“ |
| Vollbild und Nacht-Ansicht | Vollbild für Bühne und Übung, eine stark gedimmte Nacht-Ansicht mit warmem Rot und ohne Animation. | „Ein Knopf für Vollbild und eine Nacht-Ansicht (sehr dunkel, warmes Rot).“ |
| Strenge Prüfung eingehender Nachrichten | Nur bekannte Arten, geprüfte Felder, keine Doppelten, Anzeige nur als Text. Fremde Daten können nichts kaputtmachen. | „Prüfe jede eingehende Nachricht streng und ignoriere alles Unbekannte.“ |
| Läuft auch allein | Ohne Toolbox läuft das Tool in jedem Browser, nur ohne Verknüpfungen. | „Prüfe window.ARTEFAKT, bevor du es nutzt.“ |
Der Block ANPASSEN
Ganz oben in jeder Galerie-Datei steht ein Block, der nur Daten enthält: Listen, Texte, Zahlen, Farben und die Startvorlagen. Programmcode steht erst darunter. Das hat drei Vorteile: Du findest alle Einstellungen an einer Stelle, „Mit KI ändern“ kann gezielt nur diesen Block ändern, und der Rest des Tools bleibt dabei unberührt.
<script>
/* ===== ANPASSEN – alles in diesem Block darf geändert werden ===== */
const KONFIG = {
version: 1,
muster: [
{ name: '4-7-8', phasen: [['ein', 4], ['halten', 7], ['aus', 8]] },
{ name: 'Box 4-4-4-4', phasen: [['ein', 4], ['halten', 4], ['aus', 4], ['pause', 4]] }
],
standardMuster: '4-7-8', // Muster beim Öffnen
dauerMin: 3, // Länge einer Sitzung in Minuten
ton: 'leise', // 'aus' | 'leise' | 'mittel' | 'laut'
vibration: true,
ansicht: 'normal', // 'normal' | 'nacht'
// Zusammenspiel mit anderen Tools
ziele: { erledigt: 'Gewohnheits-Kette' }, // wohin das Tool meldet; leer = aus
vonAussen: ['standardMuster', 'dauerMin'], // was andere Tools einstellen dürfen
akzent: '' // eigene Akzentfarbe, z. B. '#6fb3c8'; leer = Bernstein
};
// Startvorlagen: zeigen beim ersten Öffnen, wofür das Tool gut ist
const VARIANTEN = {
ruhig: { name: 'Ruhig werden', beschreibung: 'Vor einer Prüfung: 4-7-8, drei Minuten.', konfig: { standardMuster: '4-7-8', dauerMin: 3 } },
schlaf: { name: 'Einschlafen', beschreibung: 'Im Bett: Nacht-Ansicht, ohne Ton.', konfig: { dauerMin: 5, ansicht: 'nacht', ton: 'aus' } }
};
/* ===== ENDE ANPASSEN ===== */
</script>| Eintrag | Wofür |
|---|---|
| version | Version der Einstellungen. Steigt, wenn sich ihr Aufbau ändert. |
| ziele | Ziel-Namen je Nachrichtenart, zum Beispiel { erledigt: 'Gewohnheits-Kette' }. Leer lassen schaltet das Senden ab. |
| vonAussen | Liste der Einstellungen, die andere Tools für einen Lauf vorgeben dürfen (siehe Nachrichtenart „start“). Alles andere bleibt unangetastet. |
| ton, vibration, ansicht | Gemeinsame Schalter für Ton, Vibration und Ansicht (normal, nacht). |
| akzent | Eigene Akzentfarbe als #rrggbb, passend zur Farbe der Kassette im Regal. |
| VARIANTEN | Startvorlagen: Name, ein Satz Beschreibung und die Einstellungen, die sie ändern. |
Einstellungen und Daten getrennt speichern
Die Galerie-Tools speichern zwei Dinge getrennt: deine Anpassung (nur die Abweichungen vom Block ANPASSEN) und deine Daten. Beide tragen eine Versionsnummer. So kann eine neue Fassung des Tools neue Standardwerte mitbringen, ohne deine Anpassung zu überschreiben, und alte Daten werden beim Laden umgezogen.
const PRAEFIX = 'mein-tool:';
const notfall = {}; // Rückfall, wenn localStorage fehlt oder voll ist
function lesen(k, standard) {
try { const r = localStorage.getItem(PRAEFIX + k); if (r != null) return JSON.parse(r); } catch {}
return k in notfall ? notfall[k] : standard;
}
function schreiben(k, wert) {
notfall[k] = wert;
try { localStorage.setItem(PRAEFIX + k, JSON.stringify(wert)); return true; }
catch { hinweis('Gerade kann nicht gespeichert werden. Bitte sichere deine Daten.'); return false; }
}
// Daten mit Version: neue Fassungen übernehmen alte Daten
const VERSION = 2;
const alt = lesen('daten', null);
let daten = alt ? umziehen(alt.daten, alt.v || 1) : startDaten();
function umziehen(d, v) {
if (v < 2) d.eintraege = (d.eintraege || []).map(e => ({ ...e, erledigt: !!e.erledigt }));
return d;
}
function speichern() { schreiben('daten', { v: VERSION, daten }); }Sichern im gemeinsamen Format
Eine Sicherung aus einem Galerie-Tool ist eine lesbare JSON-Datei. Fehlt das Feld daten, sind es nur Einstellungen: genau das, was „Weitergeben ohne private Einträge“ erzeugt. Das Tool lädt nur Sicherungen, deren format und tool passen.
{
"format": "artefakt-galerie",
"tool": "F02", // Kennung des Tools
"name": "Atem-Taktgeber",
"v": 1, // Version der Daten
"gespeichert": "2026-10-04T19:30:00.000Z",
"konfig": { "dauerMin": 5 }, // nur, was vom Block ANPASSEN abweicht
"daten": { … } // fehlt beim Weitergeben ohne private Einträge
}Prompt: dein Tool nach dem Bauplan
Mit dieser Vorlage bekommst du ein Tool, das sich wie ein Galerie-Tool bedienen und anpassen lässt. Fülle die eckigen Klammern aus. Lass Punkte weg, die du nicht brauchst, die Liste ist absichtlich vollständig.
Erstelle mir ein Tool als EINE einzige HTML-Datei für die Artefakt Toolbox, gebaut nach dem Bauplan der Artefakt-Galerie.
Ziel: [Was soll das Tool tun? Ein Satz.]
Funktionen: 1. [ … ] 2. [ … ] 3. [ … ]
Aufbau:
- Ganz oben ein Skript-Block „ANPASSEN“ nur mit Daten: const KONFIG = { version: 1, … } mit allen Listen, Texten, Zahlen und Farben, dazu ton ('aus' | 'leise' | 'mittel' | 'laut'), vibration, ansicht ('normal' | 'nacht'), akzent. Darunter const VARIANTEN mit drei Startvorlagen für [Gruppe 1], [Gruppe 2], [Gruppe 3], je mit name, beschreibung (ein Satz) und den Einstellungen, die sie ändern. Kommentare in einfacher Sprache. Der Programmcode steht erst unter diesem Block.
- Beim ersten Start: „Womit möchtest du starten?“ mit den Varianten.
- Ein Bildschirm „Anpassen“ ändert alle Einstellungen aus KONFIG ohne Code. Gespeichert werden nur die Abweichungen, getrennt von den Daten.
- Rückgängig und Wiederholen (Strg+Z, Strg+Y), nach jedem Löschen oder Ändern zehn Sekunden „Rückgängig“ in der Meldung. Nur „Alle Daten löschen“ fragt vorher, mit eigenem Dialog.
- Menü „Daten“: Export als JSON (alles) und CSV, „Einstellungen weitergeben“ (nur Einstellungen, keine Daten, in die Zwischenablage), Import als Datei UND durch Einfügen von Text.
- Hilfe (Taste ?): zwei Sätze, Tastenkürzel, und eine Vorlage zum Kopieren: „Ändere im Tool [Name] nur den Block ANPASSEN. Mein Wunsch: …“.
- Leere Zustände erklären in einem Satz, was hier erscheint, mit Knopf für den ersten Eintrag.
Technik: localStorage mit Präfix und Versionsnummer, jeder Zugriff in try/catch, Rückfall auf den Arbeitsspeicher mit Hinweis. Uhren rechnen mit Zeitstempeln. Ton nur synthetisch per WebAudio, Vibration und Bildschirm wachhalten nur, wenn verfügbar, Fehler werden still hingenommen. Formate über Intl. Sortieren mit Knöpfen hoch/runter statt Ziehen. Eigene Dialoge statt alert/confirm, mit Esc und Fokus-Rückgabe. Keine externen Dateien, Schriften oder Bibliotheken, funktioniert offline. Mobil zuerst, dunkles Design mit Bernstein-Akzent, hell über prefers-color-scheme, „Bewegung reduzieren“ beachten, Tippflächen mindestens 48 px. Alle Texte auf Deutsch, Anzeige fremder Daten nur mit textContent. Code lesbar lassen, nicht verkleinern.
Ausgabe: die komplette Datei in einem einzigen Code-Block.Soll das Tool außerdem mit anderen Tools zusammenarbeiten, ergänze die Angaben von der Seite „Gemeinsame Nachrichten“.
Galerie-Tools umbauen
Du kannst jedes Galerie-Tool so weit anpassen, wie du willst. Meist reicht dafür „Anpassen“ im Tool. Für alles Weitere hat jede Hilfe eine fertige Vorlage für „Mit KI ändern“:
Ändere im Tool „Atem-Taktgeber“ nur den Block ANPASSEN ganz oben in der Datei (KONFIG und VARIANTEN). Mein Wunsch: [z. B. „Füge ein Muster 4-4 hinzu und eine Variante ‚Vor dem Laufen‘ mit zwei Minuten.“]
Lass den restlichen Code unverändert und gib die komplette Datei zurück.- Behalte den Namen bei. Er ist die Adresse für andere Tools, und die Toolbox erkennt die Datei als neue Version desselben Tools.
- Ändere zuerst nur den Block ANPASSEN. Der Code darunter ist für alle Galerie-Tools gleich aufgebaut und geprüft.
- Jedes Galerie-Tool gibt es je Sprache als eigene Datei. Die deutsche Fassung sendet an deutsche Namen. Wer Sprachen mischt, ändert die Ziele unter „Anpassen“.
- Der Code ist bewusst nicht verkleinert, damit du und „Mit KI ändern“ ihn lesen könnt. Rund 35 KB davon sind der gemeinsame Bausatz.
Siehe auch: Gemeinsame Nachrichten · Tools beschreiben