GPT 6 Astra for Computer Use

Skapa en komplett, polerad, interaktiv HTML-webbsida i en enda fil med titeln “Midnattsramens ljudlandskapsteater”. Returnera endast det slutliga HTML-dokumentet med all CSS och JavaScript inline. Det måste köras direkt i en modern webbläsare utan byggsteg och utan externa beroenden, bibliotek, typsnitt, bilder, ljudfiler, CDN-resurser, nätverksförfrågningar eller länkade resurser. Bygg en uttrycksfull interaktiv scen i en surrealistisk ramenshop vid midnatt. Det centrala objektet är ett enda sammanhängande knippe elastiska nudlar som återges med Canvas, SVG eller en noggrant integrerad kombination av båda. Nudlarna ska löpa diagonalt över förgrunden och kännas fysiskt påtagliga: användaren ska kunna greppa dem var som helst med mus eller pekskärm, dra i dem, sträcka ut dem, svinga dem, vika dem över sig själva och släppa dem. Implementera övertygande fjäderfysik med tröghet, dämpning, gravitation, flera sammanlänkade segment, kollisionsrespons och synlig sekundärrörelse. Håll simuleringen stabil även vid aggressivt dragande, snabba riktningsändringar, ändring av visningsstorlek eller upprepade interaktioner. Arrangera minst tre tydliga ramenskålar och flera ingredienser längs en svepande båge genom kompositionen, så att de skapar en stark visuell rytm runt den diagonala nudeln. Varje skål ska ha sitt eget illustrerade buljongmönster, sin egen färgidentitet, etikett och ljudkaraktär. När nudeln vidrör eller faller ned i en skål ska en synkroniserad audiovisuell respons utlösas: ett unikt percussivt beat syntetiserat med Web Audio API, en stigande ångpust, partikelsprayer i salladslöksgrönt, buljongkrusningar, små droppar, skakningar i screentryckets passning och animerade handskrivna onomatopoetiska ord i japansk stil, som “ZURU!”, “PON!”, “JUU!” eller “BASHAN!”, skapade med formaterad text i stället för externa typsnitt. Kollisionsintensiteten måste påverka volym, tonhöjd, partikelantal, krusningarnas storlek, bokstavornas skala och animationens kraft. Ljud får endast börja efter användarens första interaktion och ska ha ett tydligt reglage för att slå på eller av ljudet. Det klimaktiska visuella tillståndet ska framkalla en fryst bild där nudeln är dramatiskt utsträckt genom luften medan buljong svävar precis före stänket. Stöd detta med reglaget “FRYS STÄNKET” och mellanslagstangenten: när frysläget aktiveras ska en kort, kraftfull övergång tillämpas, den fysiska scenen pausas utan att tillståndet förloras, luftburna droppar och nudelns spänning framhävas, djärv kinetisk typografi i affischstil visas och en subtil programmatiskt skapad linjeglans bevaras så att sidan fortfarande känns levande. När användaren trycker på mellanslagstangenten eller reglaget igen ska scenen återupptas sömlöst. Lägg till ett återställningsreglage, en kompakt ljudstatusindikator och en återhållsam livevisning av “tempo/påverkan” som drivs av de senaste kollisionerna. Tangentbordskontrollerna måste gå att upptäcka i en liten integrerad hjälppanel: mellanslagstangenten växlar frysning, R återställer, M stänger av ljudet och piltangenterna tillför riktningsimpulser till nudeln. Använd en visuellt sofistikerad hybrid av vintage-screentrycksaffisch och programmatiskt animerade linjer. En djup indigobakgrund ska dominera och brytas av lokal värme från spiselden runt skålarna och kollisionspunkterna. Använd skiktade dekorfärger—cinnoberrött, ingefärsgult, salladslöksgrönt, varm gräddvit och nästan svart—med halftonetexturer, råa bläckkanter, lätt färgfelpassning, djärva grafiska skuggor och animerade konturlinjer. Resultatet ska kännas handgjort och teatraliskt snarare än glansigt eller fotorealistiskt. Inkludera subtil omgivande ånga, flimrande sken från spisen, drivande kornighet och rörligt linjearbete, men bevara stark kontrast och lättlästa kontroller. Undvik generisk neon-cyberpunkstil. Gör kompositionen responsiv på breda datorskärmar, surfplattor och mobiler; detta är en webbsida, så tvinga inte fram ett fast 16:9-format. Anpassa skålarnas placering, typografi, kontroller, simuleringsgränser och pekmål smidigt utan att beskära viktigt innehåll. Använd pekarhändelser för enhetlig hantering av mus, penna och pekskärm. Förhindra sidscrollning endast medan nudeln aktivt manipuleras. Respektera prefers-reduced-motion genom att minska den omgivande animeringen samtidigt som kärninteraktionen förblir funktionell. Bevara jämn prestanda genom effektiv partikelpoolning eller strikta partikelgränser, requestAnimationFrame, rendering som tar hänsyn till device-pixel-ratio med en rimlig upplösningsgräns samt koordinathantering som tål ändrad storlek. Innehålls- och finishkrav: inkludera en stämningsfull titelbehandling, en kort inbjudan på en rad till interaktion, tre eller fler märkta skålar, flera visuellt tydliga toppings, situationsanpassade handskrivna ljudord, polerade kontrolltillstånd, tydliga fokusstilar, tillgängliga knappetiketter och en diskret interaktionshint som tonas bort efter första användningen. Öppningsscenen ska redan se ut som en färdig samlaraffisch före någon interaktion, medan det aktiva tillståndet ska förvandlas till en livlig rytmisk leksak med skiktad återkoppling och överraskande framväxande rörelse. Negativa begränsningar: inga externa resurser eller beroenden; inga bild-URL:er; inget förinspelat ljud; inga ramverk; inga ofärdiga platshållare; inga TODO-kommentarer; inga trasiga kontroller; ingen fast 16:9-canvas; inget enkelt standardgränssnitt; ingen bakgrund som enbart består av generiska gradienter; inga emoji som huvudsakligt bildspråk; ingen överdriven förklarande text; inget autoplay-ljud; ingen okontrollerad partikelökning; ingen bräcklig fysik som exploderar eller producerar NaN-värden; ingen interaktion som endast fungerar med mus; och ingen output utanför det enda kompletta HTML-dokumentet.

Create a complete, polished, single-file interactive HTML webpage titled “Midnight Ramen Soundscape Theater.” Output only the final HTML document with all CSS and JavaScript inline. It must run directly in a modern browser with no build step and no external dependencies, libraries, fonts, images, audio files, CDN resources, network requests, or linked assets. Build an expressive interactive scene set inside a surreal midnight ramen shop. The central object is one continuous bundle of elastic noodles rendered with Canvas, SVG, or a carefully integrated combination of both. The noodle bundle should travel diagonally across the foreground and feel physically tangible: users can grab it anywhere with the mouse or touch, drag it, stretch it, whip it, fold it over itself, and release it. Implement convincing spring physics with inertia, damping, gravity, multiple connected segments, collision response, and visible secondary motion. Keep the simulation stable even during aggressive dragging, rapid direction changes, viewport resizing, or repeated interactions. Arrange at least three distinct ramen bowls and several ingredients along a sweeping arc through the composition, creating a strong visual rhythm around the diagonal noodle. Each bowl should have its own illustrated broth pattern, color identity, label, and sound character. When the noodle touches or falls into a bowl, trigger a synchronized audiovisual response: a unique percussive beat synthesized with the Web Audio API, a rising steam burst, scallion-green particle sprays, broth ripples, small droplets, screen-print registration jitter, and animated handwritten Japanese-style onomatopoeia such as “ZURU!”, “PON!”, “JUU!”, or “BASHAN!” created from styled text rather than external fonts. Collision intensity must affect volume, pitch, particle count, ripple size, lettering scale, and animation force. Audio must begin only after the user’s first interaction and include a clear mute/unmute control. The climactic visual state should evoke a freeze-frame in which the noodle is stretched dramatically through the air while broth is suspended just before splashing. Support this with a “FREEZE THE SPLASH” control and the Space key: entering freeze mode should apply a brief punchy transition, suspend the physical scene without losing its state, emphasize airborne droplets and stretched noodle tension, display bold poster-like kinetic typography, and preserve subtle procedural line shimmer so the page still feels alive. Pressing Space or the control again should resume seamlessly. Add a reset control, a compact sound status indicator, and a restrained live “tempo/impact” readout driven by recent collisions. Keyboard controls must be discoverable in a small integrated help panel: Space toggles freeze, R resets, M mutes, and arrow keys apply directional impulses to the noodle. Use a visually sophisticated hybrid of vintage silkscreen poster design and procedural line animation. A deep indigo background should dominate, cut by localized stove-fire warmth around bowls and collision points. Use layered spot colors—vermilion red, ginger yellow, scallion green, warm cream, and near-black—with halftone textures, rough ink edges, slight color misregistration, bold graphic shadows, and animated contour lines. The result should feel handmade and theatrical rather than glossy or photorealistic. Include subtle ambient steam, flickering stove glow, drifting grain, and moving linework, but preserve strong contrast and readable controls. Avoid generic neon cyberpunk styling. Make the composition responsive across wide desktop, tablet, and mobile screens; this is a webpage, so do not force a fixed 16:9 aspect ratio. Adapt bowl placement, typography, controls, simulation bounds, and touch targets fluidly without cropping essential content. Use pointer events for unified mouse, pen, and touch handling. Prevent page scrolling only while the noodle is actively being manipulated. Respect prefers-reduced-motion by reducing ambient animation while keeping the core interaction functional. Maintain smooth performance through efficient particle pooling or strict particle limits, requestAnimationFrame, device-pixel-ratio-aware rendering with a sensible resolution cap, and resize-safe coordinate handling. Content and finish requirements: include an atmospheric title treatment, a short one-line invitation to interact, three or more labeled bowls, multiple visually distinct toppings, contextual handwritten sound words, polished control states, clear focus styles, accessible button labels, and an unobtrusive interaction hint that fades after first use. The opening scene should already look like a finished collectible poster before any interaction, while the active state should become a lively rhythmic toy with layered feedback and surprising emergent motion. Negative constraints: no external assets or dependencies; no image URLs; no prerecorded audio; no frameworks; no unfinished placeholders; no TODO comments; no broken controls; no fixed 16:9 canvas; no plain default UI; no generic gradient-only background; no emoji used as primary artwork; no excessive explanatory text; no autoplay audio; no uncontrolled particle growth; no fragile physics that explodes or produces NaN values; no interaction that works only with a mouse; and no output outside the single complete HTML document.