GPT 6 Astra for Computer Use

Erstelle eine vollständige, interaktive HTML-Webseite in einer einzigen Datei mit dem Titel „Midnight Letterpress Accident Laboratory“. Gib ausschließlich das fertige HTML-Dokument aus, mit vollständig eingebettetem CSS und JavaScript. Die Seite muss sich direkt in einem modernen Browser öffnen und funktionieren, ohne externe Abhängigkeiten, CDNs, Bibliotheken, Schriftarten, Bild-Links, SVG-Dateien oder andere Assets. Dies ist eine responsive Webseite, kein festes 16:9-Bild und keine Canvas-Komposition; sie muss sich elegant an Desktop-, Tablet- und Mobilbildschirme anpassen. Baue einen haptischen experimentellen Buchdruck-Simulator, in dem die Benutzer einen Druck zusammenstellen, indem sie einzelne Bleiletter-Blöcke auf ein zentrales Blatt ziehen, sie drehen und neu positionieren und anschließend Tintenmenge, Pressdruck und Papierfeuchtigkeit einstellen, bevor sie einen großen mechanischen Presshebel betätigen. Das gedruckte Ergebnis muss prozedural auf diese Parameter reagieren: Zu viel Tinte verursacht Verlaufen und verstopfte Punzen, zu wenig Tinte erzeugt trockene, ausgefranste Kanten, der Druck verändert Vertiefungen und Verformungen, Feuchtigkeit verstärkt Ausfransungen und beschädigt die Papierfasern, eine ungenaue Platzierung der Lettern erzeugt Passerfehler, und wiederholte Abdrücke erzeugen versetzte Schatten und Geisterbilder. Ermögliche mehrere Farbdurchgänge ausschließlich mit Zinnoberrot, Ultramarinblau und Säuregelb, mit realistischer Überdruckmischung, sichtbarer Ebenenreihenfolge, individueller Ebenensichtbarkeit, schrittweisem Rückgängigmachen/Wiederholen und der Möglichkeit, die Papierecke anzuheben, um den sich entwickelnden Druck darunter zu enthüllen. Halte die zentrale visuelle Dramatik rund um den Moment fest, in dem die Presswalze gerade angehoben wurde und der fertige Druck kurz vor seiner Enthüllung steht. Das zentrale Papier muss sich wie eine theatralische Bühne anfühlen. Ordne Letternblöcke, Farbwalzen, Pinzetten, Passerstifte, Papierreste, Messanzeigen und Bedienelemente asymmetrisch darum herum an. Verwende ein Fundament aus elfenbeinfarbenem Knochenpapier und bleigrauem Material, beleuchtet von einer warmweißen Arbeitslampe, die diagonal von oben links scheint. Rendere alles mit CSS, HTML-Elementen, Canvas und prozeduralen Texturen in einem rauen physischen Siebdruck- und Handmade-Collage-Stil: ausgefranste Kanten, faserige Papierkörnung, ungleichmäßiges Pigment, Halftone-Flecken, zerkratztes Metall, Tintenschmierer, Klebebandfragmente, leichte Perspektive, ungenaue Passung und geschichtete Schatten. Vermeide glänzende Verläufe, sterile SaaS-Gestaltung, generische Karten, neonfarbene Cyberpunk-Farben, fotorealistische Bilder, Emojis, Stock-Illustrationen und perfekt saubere Vektorgeometrie. Füge ein umfangreiches Inventar beweglicher Lettern mit Buchstaben, Satzzeichen, Ziffern und mehreren dekorativen Blöcken hinzu. Benutzer müssen Blöcke aus dem Inventar in den Satzbereich ziehen, mehrere Blöcke auswählen, sie mit Griffen oder Tastaturkürzeln drehen, mit den Pfeiltasten verschieben, löschen oder duplizieren und den Textinhalt bearbeiten können, ohne das Erscheinungsbild des physischen Blocks zu verlieren. Füge ein- und ausschaltbare Fanghilfen hinzu, bewahre jedoch kleine manuelle Unregelmäßigkeiten. Biete klare Zustände für Hover, Aktiv, Ausgewählt, Deaktiviert und Fokus. Unterstütze Zeiger- und Touch-Interaktion, sinnvolle Tastatursteuerung, zugängliche Beschriftungen und sichtbare Fokusindikatoren. Erstelle drei haptische Steuerelemente für Tintenmenge, Druck und Feuchtigkeit, deren Werte die Papiervorschau, die Textursimulation, Messanzeigen, Warnbeschriftungen und das Verhalten der Maschine in Echtzeit aktualisieren. Das System soll bei extremen Kombinationen spielerische Unfallzustände zeigen, etwa heftige Tintenblüten, doppelte Buchstaben, verrutschte Lettern, zerklüftete Faserbrüche, Walzenrattern und verspritzte Passermarken, wobei die Komposition lesbar bleibt. Füge ein kompaktes Experimentprotokoll hinzu, das jeden Abdruck und seine Parameter aufzeichnet. Benutzer müssen eine Durchgangsfarbe auswählen, den Hebel durch einen überzeugenden Bogen ziehen können, einen kurzen, aber detaillierten Presszyklus beobachten und anschließend das Papier zurückziehen können. Die Animation soll Hebelwiderstand, Maschinenvibration, Walzenbewegung, Papierkompression, Staubpartikel, leichtes Lampenflackern und eine spannungsvolle Pause vor der Enthüllung enthalten. Berücksichtige prefers-reduced-motion. Mache Rückgängigmachen und Wiederholen über Platzierung, Drehung, Parameteränderungen, Drucken, Farbdurchgänge und Enthüllungsaktionen hinweg wirklich funktionsfähig. Füge die Steuerelemente Zurücksetzen, Zufallsunfall, Neu einfärben, Durchgang hinzufügen, Rückgängig und Wiederholen hinzu sowie einen kurzen Einführungshinweis, der nach der ersten Interaktion verschwindet. Starte die Seite mit einem faszinierenden teilweise komponierten Poster, damit die erste Ansicht visuell reich wirkt, aber lasse jedes wichtige Element bearbeitbar. Füge dezentes, soundähnliches visuelles Feedback hinzu, ohne Audio-Assets zu verwenden. Sorge, wo praktikabel, für deterministische prozedurale Texturen, damit das Rückgängigmachen dasselbe Erscheinungsbild wiederherstellt. Das Erlebnis soll feierlich, handgemacht, angespannt und schelmisch unkontrollierbar wirken statt lediglich dekorativ. Priorisiere ausgefeilte Interaktionsdetails, überzeugende Parameterkopplung, geschichtete prozedurale Druckartefakte, präzises Animationstiming und eine hervorragende responsive Komposition. Verwende semantisches HTML und sauberes, gut strukturiertes Vanilla JavaScript. Die abschließende Antwort darf ausschließlich das vollständige, ausführbare HTML-Dokument enthalten.

Erstelle eine vollständige, ausgefeilte interaktive HTML-Webseite in einer einzigen Datei mit dem Titel „Midnight Ramen Soundscape Theater“. Gib ausschließlich das fertige HTML-Dokument aus, mit vollständig eingebettetem CSS und JavaScript. Es muss direkt in einem modernen Browser ohne Build-Schritt und ohne externe Abhängigkeiten, Bibliotheken, Schriftarten, Bilder, Audiodateien, CDN-Ressourcen, Netzwerkanfragen oder verknüpfte Assets laufen. Baue eine ausdrucksstarke interaktive Szene in einem surrealen Mitternachts-Ramen-Laden. Das zentrale Objekt ist ein durchgehendes Bündel elastischer Nudeln, gerendert mit Canvas, SVG oder einer sorgfältig integrierten Kombination aus beidem. Das Nudelbündel soll diagonal durch den Vordergrund verlaufen und sich physisch greifbar anfühlen: Benutzer können es überall mit der Maus oder per Touch greifen, ziehen, dehnen, peitschen, über sich selbst falten und loslassen. Implementiere überzeugende Federphysik mit Trägheit, Dämpfung, Gravitation, mehreren verbundenen Segmenten, Kollisionsreaktion und sichtbarer Sekundärbewegung. Halte die Simulation auch bei aggressivem Ziehen, schnellen Richtungswechseln, Änderungen der Viewport-Größe oder wiederholten Interaktionen stabil. Ordne mindestens drei unterschiedliche Ramen-Schalen und mehrere Zutaten entlang eines geschwungenen Bogens durch die Komposition an, um einen starken visuellen Rhythmus rund um die diagonale Nudel zu erzeugen. Jede Schale soll ihr eigenes illustriertes Brühemuster, ihre eigene Farbidentität, Beschriftung und Klangcharakter haben. Wenn die Nudel eine Schale berührt oder in sie fällt, löse eine synchronisierte audiovisuelle Reaktion aus: einen einzigartigen, mit der Web Audio API synthetisierten perkussiven Beat, eine aufsteigende Dampfwolke, Partikelspritzer in Frühlingszwiebelgrün, Brühewellen, kleine Tropfen, ein Zittern der Siebdruck-Passermarken und animierte handschriftliche Onomatopoesie im japanischen Stil wie „ZURU!“, „PON!“, „JUU!“ oder „BASHAN!“, die aus gestaltetem Text statt aus externen Schriftarten erzeugt wird. Die Kollisionsintensität muss Lautstärke, Tonhöhe, Partikelanzahl, Wellengröße, Skalierung der Schrift und Animationskraft beeinflussen. Audio darf erst nach der ersten Interaktion des Benutzers beginnen und muss eine klare Stummschalten-/Ton-an-Steuerung enthalten. Der visuelle Höhepunkt soll ein Standbild evozieren, in dem die Nudel dramatisch durch die Luft gespannt ist, während die Brühe unmittelbar vor dem Spritzen schwebt. Unterstütze dies mit einem Steuerelement „SPRITZER EINFRIEREN“ und der Leertaste: Beim Aktivieren des Einfriermodus soll eine kurze, markante Übergangsanimation ausgeführt, die physische Szene ohne Verlust ihres Zustands angehalten, die schwebenden Tropfen und die Spannung der gedehnten Nudel hervorgehoben, eine kräftige kinetische Typografie im Poster-Stil angezeigt und ein dezentes prozedurales Schimmern der Linien beibehalten werden, damit die Seite lebendig bleibt. Durch erneutes Drücken der Leertaste oder des Steuerelements soll die Szene nahtlos fortgesetzt werden. Füge eine Zurücksetzen-Steuerung, eine kompakte Klangstatusanzeige und eine zurückhaltende Live-Anzeige für „Tempo/Impact“ hinzu, die von den jüngsten Kollisionen gesteuert wird. Tastatursteuerungen müssen in einem kleinen integrierten Hilfe-Panel auffindbar sein: Leertaste schaltet das Einfrieren um, R setzt zurück, M schaltet den Ton stumm und die Pfeiltasten wenden gerichtete Impulse auf die Nudel an. Verwende eine visuell anspruchsvolle Verbindung aus Vintage-Siebdruck-Posterdesign und prozeduraler Linienanimation. Ein tiefes Indigoblau soll den Hintergrund dominieren, unterbrochen von lokal begrenzter Herdfeuer-Wärme rund um die Schalen und Kollisionspunkte. Verwende geschichtete Sonderfarben – Zinnoberrot, Ingwergelb, Frühlingszwiebelgrün, warmes Cremeweiß und fast Schwarz – mit Halftone-Texturen, rauen Tintenrändern, leichter Farbfehlpassung, kräftigen grafischen Schatten und animierten Konturlinien. Das Ergebnis soll handgemacht und theatralisch statt glänzend oder fotorealistisch wirken. Füge dezenten Umgebungsdampf, flackernden Herdschein, treibende Körnung und bewegte Linien hinzu, bewahre jedoch starken Kontrast und gut lesbare Bedienelemente. Vermeide generische Neon-Cyberpunk-Gestaltung. Mache die Komposition für breite Desktop-, Tablet- und Mobilbildschirme responsive; dies ist eine Webseite, erzwinge daher kein festes 16:9-Seitenverhältnis. Passe Schalenpositionen, Typografie, Bedienelemente, Simulationsgrenzen und Touch-Ziele fließend an, ohne wichtige Inhalte abzuschneiden. Verwende Pointer Events für eine einheitliche Verarbeitung von Maus, Stift und Touch. Verhindere das Scrollen der Seite nur, während die Nudel aktiv manipuliert wird. Berücksichtige prefers-reduced-motion, indem du die Umgebungsanimation reduzierst, während die Kerninteraktion funktionsfähig bleibt. Erhalte eine flüssige Performance durch effizientes Partikel-Pooling oder strikte Partikelbegrenzungen, requestAnimationFrame, eine an die device-pixel-ratio angepasste Darstellung mit sinnvoller Auflösungsbegrenzung und eine bei Größenänderungen sichere Koordinatenverarbeitung. Anforderungen an Inhalt und Ausarbeitung: Füge eine atmosphärische Titelgestaltung, eine kurze einzeilige Einladung zur Interaktion, drei oder mehr beschriftete Schalen, mehrere visuell unterschiedliche Toppings, kontextbezogene handschriftliche Klangwörter, ausgefeilte Steuerungszustände, klare Fokusstile, zugängliche Button-Beschriftungen und einen unaufdringlichen Interaktionshinweis hinzu, der nach der ersten Nutzung ausblendet. Die Eröffnungsszene soll bereits vor jeder Interaktion wie ein fertiges Sammlerposter aussehen, während der aktive Zustand sich in ein lebhaftes rhythmisches Spielzeug mit geschichtetem Feedback und überraschender emergenter Bewegung verwandelt. Negative Einschränkungen: keine externen Assets oder Abhängigkeiten; keine Bild-URLs; keine voraufgezeichneten Audiodateien; keine Frameworks; keine unfertigen Platzhalter; keine TODO-Kommentare; keine defekten Bedienelemente; kein festes 16:9-Canvas; keine schlichte Standardoberfläche; kein generischer Hintergrund, der nur aus Verläufen besteht; keine Emojis als primäres Gestaltungselement; kein übermäßiger Erklärungstext; kein Autoplay-Audio; kein unkontrolliertes Partikelwachstum; keine fragile Physik, die explodiert oder NaN-Werte erzeugt; keine Interaktion, die nur mit einer Maus funktioniert; und keine Ausgabe außerhalb des vollständigen HTML-Dokuments.