xAI TTS v1 Sub-Second Speech

Erstelle eine vollständige, ausgereifte, interaktive HTML-Webseite in einer einzigen Datei mit dem Titel „Himmelsgebundener Ballonversand“. Gib ausschließlich das fertige HTML-Dokument aus, mit vollständig eingebettetem CSS und JavaScript. Es muss direkt in einem modernen Browser geöffnet werden können und ohne Build-Schritt sowie ohne externe Abhängigkeiten, Bibliotheken, Schriftarten, CDNs, Bild-URLs, APIs oder zusätzliche Dateien funktionieren. Dies ist eine responsive Webseite und keine feste 16:9-Komposition. Entwirf eine immersive Heißluftballon-Flottenleitstelle im Morgengrauen, die historische Fluginstrumente, im Siebdruckverfahren erstellte topografische Karten, haptische Papiertexturen, Messingsteuerungen und moderne Echtzeitsimulation miteinander verbindet. Verwende eine sorgfältig abgestimmte Farbpalette aus Kobaltblau, Cremegelb, Korallenrot, Warmweiß, Anthrazit und gedämpftem Messing. Warmes Morgenlicht soll aus der oberen linken Ecke allmählich heller werden. Stelle Höhe, Winds chichten und Gefahr durchgängig über Farben, Linienstärken, Muster und klare Legenden dar. Erzeuge alle visuellen Elemente prozedural mit HTML, CSS, Canvas und, wo sinnvoll, eingebettetem SVG. Der zentrale Bereich muss eine große animierte Luftkarte aus der Vogelperspektive zeigen, mit einer Schlucht, Höhenlinien, mindestens zwölf individuell erkennbaren Ballons, mehreren wechselnden Winds chichten, einem sich bewegenden Cumulonimbus-Sturmsystem, Turbulenzzonen und einem schwebenden Leuchtturm als Ziel. Implementiere eine echte, schlanke Physiksimulation: Jeder Ballon muss Position, Geschwindigkeit, Höhe, Treibstoff, Ballast, Temperatur, Risiko und Routenverlauf verfolgen. Windrichtung und -stärke müssen je nach Höhe variieren und sich im Laufe der Zeit verändern. Brenner erhöhen den Auftrieb und verbrauchen dabei Treibstoff; das Ablassen von Ballast lässt den Ballon steigen, reduziert den Ballast jedoch dauerhaft; Abkühlung führt zum Sinken; Schluchtwände und Sturmzellen erzeugen relevante Gefahren. Die Ballons sollen sich kontinuierlich bewegen und sichtbare, allmählich verblassende Flugspuren hinterlassen. Ziel ist es, die gesamte Flotte sicher zum Leuchtturm zu führen, bevor Ressourcen oder Zeit ablaufen. Füge einen gut sichtbaren Start-Countdown im Morgengrauen mit Steuerelementen für Starten, Pause, Fortsetzen, Zurücksetzen und die Simulationsgeschwindigkeit ein. Vor dem Start sollen die Ballons sich subtil bewegen, während die Instrumente leicht zucken. Nach dem Start sollen Windpartikel, Ballonbewegungen, das Wachstum des Sturms, das Zeichnen der Flugspuren, Warnimpulse und wechselnde Lichtverhältnisse animiert werden. Benutzer müssen Windrichtungs-Knoten direkt auf der Karte ziehen können, um die lokale Luftströmung in Echtzeit zu verändern, mit sofortigem visuellen und physikalischen Feedback. Beim Anklicken eines Ballons muss dieser ausgewählt, seine Route hervorgehoben, seine Daten zentral im Interface dargestellt und ein kompakter Detailinspektor geöffnet werden. Biete für den ausgewählten Ballon haptisch wirkende Brenner- und Ballaststeuerungen, einschließlich Brennerverhalten bei gedrückter Taste, einer eindeutig folgenreichen Ballastfreigabe, Tastaturkürzeln und barrierefreien Schaltflächen. Ermögliche für fortgeschrittenes Spiel Mehrfachauswahl oder Befehle für die gesamte Flotte. Ordne eine vertikale Seitenleiste mit Missionskarten an, die Flottenziele, aktive Warnungen, Wetterbriefings und Statuszusammenfassungen für einzelne Ballons zeigt. Missionskarten sollen live aktualisiert werden und Filter für die Zustände sicher, Warnung, kritisch, angekommen und verloren unterstützen. Platziere am unteren Rand einen dichten, aber gut lesbaren Telemetriestreifen mit gleichmäßig scrollenden Canvas-Diagrammen für Höhe, vertikale Geschwindigkeit, Treibstoff, Sturmnähe und Flottenfortschritt. Beim Überfahren oder Durchsuchen der Diagramme sollen synchronisierte Werte erscheinen und der entsprechende Moment auf der Flugspur des ausgewählten Ballons hervorgehoben werden. Füge historische Messinstrumente, rotierende Zeiger, numerische Anzeigen, Warnleuchten, gestempelte Beschriftungen, Kartenkoordinaten, Höhenbänder, eine kompakte Minikarte oder Übersicht sowie eine klare Legende hinzu. Verwende ein responsives Layoutverhalten, anstatt die Desktop-Komposition lediglich zu verkleinern. Auf breiten Bildschirmen sollen Seitenleiste, zentrale Karte, Inspektor und Telemetrie gleichzeitig sichtbar sein. Auf Tablets sollen sekundäre Karten in Tabs oder Schubladen zusammengefasst werden. Auf Mobilgeräten sollen die Karte und die Steuerungen des ausgewählten Ballons priorisiert, große Touch-Ziele bereitgestellt, Telemetriepanels untereinander angeordnet und Ziehinteraktionen beibehalten werden. Stelle sicher, dass die Seite bei unterschiedlichen Seitenverhältnissen den verfügbaren Darstellungsbereich elegant ausfüllt und mit Maus, Touch und Tastatur nutzbar bleibt. Lass die Simulation vollständig wirken: Füge Erfolgs- und Misserfolgsbedingungen, animiertes Andocken bei der Ankunft am schwebenden Leuchtturm, Feedback bei Kollisionen oder Sturmverlust, kontextbezogene Tooltips, eine Anleitung für die erste Nutzung, leere und deaktivierte Zustände, eine Bestätigung für die irreversible Ballastfreigabe, einen Neustartablauf, Statusmeldungen und einen abschließenden Missionsbericht mit Statistiken wie Ankünften, Verlusten, Treibstoffeffizienz, durchschnittlichem Risiko und verstrichener Zeit hinzu. Lege den Anfangszustand so fest, dass das Szenario sofort interessant, aber dennoch gewinnbar ist. Verwende requestAnimationFrame für flüssige Animationen und Canvas für Karte und Telemetrie, wo dies sinnvoll ist. Halte das Rendering performant, verwende devicePixelRatio für scharfe Canvas-Darstellungen, verarbeite Größenänderungsereignisse korrekt und vermeide Fehler in der Konsole. Priorisiere eine außergewöhnliche visuelle Hierarchie, nuancierte Mikrointeraktionen, überzeugendes Instrumentenverhalten, über alle Panels hinweg verknüpfte Zustände und eine detailreiche Ausarbeitung. Erstelle kein statisches Mockup. Verwende keine Platzhalterrechtecke, keine generischen Verläufe als gesamte Gestaltung, keine vorgetäuschten funktionslosen Steuerelemente, keine externen Assets, keine externen Schriftarten, keine alert()-Dialoge, keinen übermäßigen erklärenden Text, keinen horizontalen Überlauf, keine winzigen unlesbaren Beschriftungen und keine Interaktionen, die nur mit einer Maus funktionieren. Erzwinge weder eine 16:9-Leinwand noch einen festen Darstellungsbereich. Jede wesentliche sichtbare Steuerung muss funktionieren, und alle angezeigten Daten müssen aus dem Live-Zustand der Simulation stammen.

Erstelle eine vollständige, ausgereifte interaktive HTML-Webseite in einer einzigen Datei mit dem Titel „Automatisierte Mitternachtsbäckerei“, ausschließlich mit eingebettetem HTML, CSS und Vanilla JavaScript. Gib das gesamte ausführbare HTML-Dokument aus und nichts anderes. Verwende keine externen Bibliotheken, Frameworks, CDNs, Schriftarten, Bilder, SVG-Dateien, Audiodateien, APIs oder Netzwerkaufrufe. Alle visuellen Elemente, Symbole, klangähnlichen Rückmeldungen, Effekte und Spiellogik müssen lokal mit HTML/CSS/JS erzeugt werden. Baue ein vollständig spielbares Spiel zur Auftragsplanung in einer automatisierten Bäckerei um Mitternacht. Teigstücke müssen kontinuierlich in ein isometrisches Fördersystem gelangen und sich klar durch Formen, Rezepte, erforderliche Backtemperaturen, Backdauer, Frischegrenzen und Punktwerte unterscheiden. Richte die Benutzeroberfläche um einen großen zentralen Industrieofen, ein umlaufendes Förderbandnetz mit umschaltbaren Strecken und seitlich angeordnete Echtzeit-Instrumententafeln aus. Spieler müssen Teigstücke in der Ofenwarteschlange ziehen und neu anordnen, sie bei Bedarf zwischen kompatiblen Plätzen verschieben, Streckenweichen anklicken, um eingehenden Teig umzuleiten, Ofensteuerungen anklicken, um die Temperatur anzupassen oder Systeme zu aktivieren, und klar dokumentierte Tastatursteuerungen für eine vorübergehende Beschleunigung des Förderbands sowie eine Notkühlung verwenden können. Alle Interaktionen per Maus, Touch, Klick, Ziehen und Tastatur müssen sofort und sichtbar reagieren. Implementiere echtes zustandsbehaftetes Gameplay statt eines statischen Mockups. Füge mehrere gleichzeitig aktive Teigaufträge, Förderbandbewegung, Streckenführung, Drag-and-drop-Kollisions- und Einrastvalidierung, Kapazitätsgrenzen, Timer pro Element, thermische Trägheit des Ofens, Backfortschritt, Zustände für unzureichend gebacken, perfekt gebacken und überbacken, Punktzahl, Multiplikator-Kombo, Leben oder Reputation, ansteigenden Schwierigkeitsgrad, Pausieren/Fortsetzen, Neustart und ein kompaktes interaktives Tutorial oder Hilfe-Overlay hinzu. Die Rezepte sollen sinnvolle Planungskonflikte erzeugen: Verschiedene Produkte müssen unterschiedliche Temperaturen und Backdauern erfordern, sodass eine Neuanordnung der Warteschlange sowie strategisches Kühlen oder Beschleunigen sinnvoll werden. Perfekt gebackenes Brot soll goldbraun herauskommen, eine befriedigende Partikelexplosion auslösen, das Schaufenster der Bäckerei erhellen, die Kombo erhöhen und das Auftragsprotokoll aktualisieren. Fehler sollen sichtbar verkohltes Brot, aufsteigende Rauch- und Glutpartikel, Warnleuchten, ein Zittern der Instrumente, einen Verlust der Kombo und klares nichtakustisches Feedback erzeugen. Biete einen optionalen Ton-Schalter an, simuliere Audiofeedback bei Aktivierung jedoch visuell und mit vollständig in JavaScript erzeugtem Web Audio. Das Spiel muss auch bei stummgeschaltetem Ton vollständig verständlich bleiben. Verwende eine originelle, einheitliche Bildsprache, die detaillierte isometrische Pixelkunst mit präzisen industriellen Instrumenten verbindet. Stelle warmes bernsteinfarbenes Ofenlicht, kupferfarbene Akzente, leuchtendes Brot und weiche cremefarbene Beschriftungen einer tief indigoblauen Mitternachtsumgebung gegenüber. Erzeuge Tiefe mit maschinellen Elementen aus CSS, gefliesten Böden, Rohren, Lüftungsöffnungen, Schatten, Glanzlichtern, pixelgestuften Kanten, dezenten Scanlines, Anzeigelampen, Segmentanzeigen, Messinstrumenten, Warnstreifen und animierten mechanischen Details. Der zentrale Ofen soll durch eine flackernde Kammer, Türen, ein Temperaturwahlrad, Hitzeflimmern und Statusleuchten lebendig wirken. Animere Förderbänder, Zahnräder, Teigbewegungen, Rauch, Funken, Kühldampf, die Beleuchtung des Schaufensters, Kombofeedback und Panelübergänge mit performanter CSS- und JavaScript-Logik. Bewahre trotz der dichten Leitstellenästhetik eine klare Lesbarkeit und starke Hierarchie. Füge umfangreiche, sorgfältig angeordnete Inhalte hinzu: die spielbare Bäckereifläche, die Warteschlange eingehender Aufträge, die Ofenwarteschlange, eine Rezeptreferenz, die Live-Anzeige von Punktzahl und Kombo, Temperatur- und Durchsatzinstrumente, ein Ereignisprotokoll, eine Steuerungslegende, Statusbenachrichtigungen sowie ein Endspiel- oder Schichtzusammenfassungsfenster mit detaillierten Ergebnissen und einer Aktion zum erneuten Spielen. Füge barrierefreie Beschriftungen, sichtbare Fokuszustände, Tastaturbedienbarkeit, Unterstützung für reduzierte Bewegungen und statusunabhängige Farbcodierung hinzu. Gestalte das Layout responsiv für Desktop-, Tablet- und mobile Browser, ordne Panels intelligent neu an und skaliere die Bäckerei, ohne die Bedienbarkeit zu beeinträchtigen. Dies ist eine Webseite. Erzwinge daher weder eine feste 16:9-Leinwand noch fest codierte Darstellungsbereichsabmessungen. Verwende ein flüssiges responsives Layout, das besonders auf gängigen Breitbildschirmen überzeugt und sich zugleich elegant an Hochformatbildschirme anpasst. Priorisiere Vollständigkeit, echtes Spielgefühl, zuverlässige Zustandsverwaltung, präzise Zeitsteuerung, robuste Drag-and-drop-Verarbeitung, klare Kollisionsregeln, ausgearbeitete Übergänge und visuelles Feedback. Die Seite muss sofort funktionieren, wenn sie als einzelne .html-Datei gespeichert und lokal geöffnet wird. Vermeide: statische Konzeptkunst, ein funktionsloses Dashboard, Platzhaltersteuerungen, vorgetäuschte Ziehinteraktionen, fehlerhafte Timer, überlappenden Text, unleserlich kleine Beschriftungen, übermäßig erklärenden Text, generische flache Karten, fotorealistische Bilder, externe Assets, externe Abhängigkeiten, eingebettete Base64-Bilder, Netzwerkzugriff, Build-Schritte, mehrere Dateien, feste 16:9-Abmessungen, verpflichtenden Ton, automatisch abgespieltes Audio, Browser-Warnmeldungen, ausschließlich in der Konsole ausgegebenes Feedback und unfertige TODO-Abschnitte.