RezepteMix by Paule89DE and Chatty 💙

Statische HTML-Oberfläche für eine Thermomix-ähnliche Attrappe auf der Makers United Chemnitz 2026. Das Projekt zeigt DI-Day-Wechselrezepte als Rezeptkarten und simuliert anschließend einen Zubereitungsvorgang mit Sound, Fortschritt, Rezeptpunkten und QR-Code.

Start

Das Projekt braucht keinen Webserver.

Einfach index.html direkt im Browser öffnen.

Für den Betrieb werden nur diese Dateien und Ordner benötigt:

index.html
assets/
seiten/

Die materialsammlung/ ist nur Quellmaterial und wird von der laufenden Webseite nicht geladen.

Ablauf

1. index.html zeigt das Hauptmenü mit Rezeptkarten.
2. Die Karten können per Finger oder Maus horizontal gewischt werden.
3. Ein kurzer Tipp auf eine seitliche Karte zentriert sie.
4. Die mittige Karte wird durch kurzes Gedrückthalten gestartet.
5. Die passende Rezeptseite aus seiten/ öffnet sich.
6. Dort startet man die Zubereitung per Button.
7. Der Mixsound läuft, Rezeptpunkte werden als Status angezeigt.
8. Nach dem Mixen erscheint die Fertigansicht mit QR-Code.
9. Nach 30 Sekunden springt die Seite zurück zu index.html.

Ordnerstruktur

assets/
  css/
    style.css
  js/
    app.js
    recipes.js
  media/
    fertig.mp3
    mixen.mp3
    rezeptmix-sequence.mp3
    qrcodes/
    rezeptbilder/

seiten/
  *.html

assets/js/recipes.js ist die zentrale Rezeptliste. Dort werden Titel, Bild, QR-Code, Dauer, Schwierigkeit, Kurzbeschreibung und Rezeptpunkte gepflegt.

assets/js/app.js enthält die Logik für Menü, Wischbedienung, Gedrückthalten-Start, Zubereitungsablauf, Fortschritt und Rücksprung.

assets/css/style.css enthält das komplette Styling.

Audio

Die Zubereitung nutzt assets/media/rezeptmix-sequence.mp3. Diese Datei enthält den Mixsound und direkt danach den Fertigton in einer einzigen Audiodatei. Dadurch reicht ein Nutzerklick, um die Wiedergabe im Browser freizugeben.

Die Einzeldateien mixen.mp3 und fertig.mp3 liegen zusätzlich in assets/media/, falls die Sequenz später neu gebaut werden soll.

Rezept ändern

Ein bestehendes Rezept wird in assets/js/recipes.js angepasst.

Wichtige Felder:

{
  slug: "firefox",
  title: "Chrome zu Firefox",
  image: "assets/media/rezeptbilder/soup-600x750-crop-39-6-56-5.png",
  qr: "assets/media/qrcodes/firefox.png",
  duration: "10 min",
  difficulty: "Einfach",
  summary: "Firefox installieren, Browserdaten importieren und Datenschutz verbessern.",
  steps: ["Firefox herunterladen", "Installation starten"]
}

Der slug muss zur passenden HTML-Datei in seiten/ passen, zum Beispiel:

seiten/firefox.html

Neues Rezept hinzufügen

1. Rezeptbild nach assets/media/rezeptbilder/ kopieren.
2. QR-Code nach assets/media/qrcodes/ kopieren.
3. Rezept in assets/js/recipes.js ergänzen.
4. Eine vorhandene HTML-Datei aus seiten/ kopieren.
5. In der kopierten Datei data-recipe="..." auf den neuen slug setzen.
6. Die neue Datei als seiten/<slug>.html speichern.

Die HTML-Dateien enthalten fast keine Rezeptdaten. Die Inhalte kommen zentral aus recipes.js.

Hinweise für Firefox

Wenn nach Änderungen noch altes Verhalten sichtbar ist, die Seite hart neu laden:

Strg + F5

Das ist besonders nach Änderungen an assets/js/app.js oder assets/js/recipes.js wichtig.