MiniMax API

Nieskazitelna, jednoplikowa, samowystarczalna strona HTML (wyłącznie inline CSS i JavaScript — absolutnie bez zewnętrznych bibliotek, CDN-ów, fontów ani adresów URL obrazów; każda faktura zbudowana wyłącznie z gradientów CSS, box-shadow i cieni inset), która renderuje interaktywny, skeuomorficzny WARSZTAT ZECERSKI DO DRUKU TYPOGRAFICZNEGO: wypełnij viewport ciepłą powierzchnią roboczą z drewna orzecha (warstwowe brązowe gradienty + subtelne usłojenie przez repeating linear-gradients i ziarniste cieniowanie przypominające szum), oświetloną pojedynczą ciepłą lampą wolframową z lewego górnego rogu, tak aby elementy ze szczotkowanego metalu łapały miękki refleks, a każdy wypukły obiekt rzucał długi, miękki cień ku prawemu dołowi. Lewa strona: podzielona na przegródki kaszta zecerska (California job case) z komórkami siatki zawierającymi maleńkie, tłoczone ołowiane czcionki (litery, cyfry, znaki interpunkcyjne), z których każda jest fazowanym metalowym słupkiem z wypukłym, lustrzanie odwróconym glifem na powierzchni. Środek: otwarty wierszownik / galley tray, w którym gromadzi się skład. Zapewnij pełny działający przepływ składu: (1) użytkownik pisze na fizycznej klawiaturze ALBO klika glify w kaszcie, a dla każdego znaku ołowiana czcionka animuje lot ze swojej komórki i wpada do wierszownika z wyraźnym mikroodbiciem osiadania typu "clack"; (2) przeciągalne cienkie ołowiane justunki między czcionkami pozwalają regulować odstępy między literami/kerning przez przeciąganie, z podglądem przełamania układu na żywo; (3) obracalny wałek farbiarski (brayer), który użytkownik przeciąga po zamkniętej formie, zostawia błyszczącą, głęboko indygową warstwę farby (animowany, ruchomy refleks) na wypukłych powierzchniach czcionek; (4) dźwignia dociskowa opuszczana w dół, którą użytkownik naciska (kliknięcie i przytrzymanie albo przycisk), obniża arkusz kremowego papieru czerpanego nad nafarbioną formę i odbija ją — kulminacyjny moment to sprężysty powrót dźwigni, podczas gdy świeżo wydrukowany wers pojawia się na papierze z autentycznie wklęsłą typografią letterpress: każda litera wciśnięta w papier dzięki cieniowi inset dającemu fizyczne wgłębienie, farba lekko rozpływa się/strzępi w widocznym ziarnie włókien papieru, a wokół bloku widać subtelną poświatę odcisku płyty. Paleta: dominują palona umbra, złoto szczotkowanego mosiądzu i ciepła kremowa/ryżowopapierowa złamana biel, a głęboki indygo farby jest JEDYNYM chłodnym akcentem. Uwzględnij dotykowe detale: mosiężne śruby radełkowane, zamek klinowy, drewniane przyciski z realistycznymi stanami wciśnięcia/aktywności oraz satysfakcjonujące easing na każdym przejściu (sprężyste cubic-bezier). Zrób to responsywnie (płynne skalowanie do szerokości tabletu), przechowuj cały stan w vanilla JS i pozwól użytkownikowi złożyć krótki wers poezji, nafarbić go oraz wykonać odbitkę, którą może wizualnie podziwiać — wszystko ma sprawiać wrażenie rękodzielniczego, masywnego i ceremonialnego, a fizyka upadku, przeciągania i docisku ma być przekazana ruchem i cieniem, bez żadnych zewnętrznych zasobów.

Utwórz pojedynczy, kompletny, samowystarczalny plik HTML, który otwiera się bezpośrednio w każdej nowoczesnej przeglądarce i nie ma żadnych zewnętrznych zależności — cały CSS i JavaScript muszą być inline, a zewnętrzne biblioteki, CDN-y, fonty ani adresy URL obrazów są niedozwolone (rysuj wszystko za pomocą Canvas 2D albo SVG generowanego w kodzie). Zbuduj interaktywny "Warsztat mosiężnej przekładni zębatej": mechaniczny symulator kół zębatych składanych na zatrzask, renderowany na zakurzonym blacie z inżynierskim blueprintem, w którym użytkownik składa działającą przekładnię i obserwuje, jak fizycznie poprawny obrót rozchodzi się przez cały łańcuch. Główne wymagania dotyczące interakcji i symulacji: - Wyrenderuj główną scenę jako powierzchnię kreślarską blueprintu: drobną cyjanową siatkę na głębokim inżynierskim niebieskim papierze z delikatną warstwą kurzu i winietą, a także znaczniki wymiarowe i adnotacje kreślarskie wzdłuż krawędzi. - Zapewnij lewy pojemnik/pasek boczny z częściami, zawierający koła zębate w kilku wyraźnie różnych rozmiarach (różne liczby zębów / moduły, np. 12, 18, 24, 36, 48 zębów). Użytkownik przeciąga koło z pojemnika na scenę; po puszczeniu zatrzaskuje się ono do siatki. - Każde koło musi być narysowane jak prawdziwe koło zębate o zębach ewolwentowych w odcieniach mosiądzu — ciepłozłoty korpus, postarzana obręcz z miedzianą patyną, kościany refleks, widoczna piasta, ramiona i centralny otwór — z subtelnym cieniowaniem faz, aby metal wyglądał jak metal. - Zaimplementuj rzeczywiste wykrywanie zazębienia: gdy dwa umieszczone koła znajdują się w odległości między środkami równej sumie ich promieni podziałowych (module × teeth / 2) w granicach tolerancji, automatycznie zazębiają się i blokują w napędzany łańcuch; narysuj wskaźnik zazębienia w miejscu, gdzie zęby wchodzą w siebie. Łańcuchy mogą rozgałęziać się przez wiele kół. - Umieść korbę z kołem ręcznym w lewym dolnym rogu jako wizualny i mechaniczny punkt początkowy. Użytkownik obraca korbę (przeciąganiem, aby ją obracać, albo przytrzymaniem przycisku); cały zazębiony łańcuch obraca się wtedy sekwencyjnie. Obliczaj prędkość kątową i kierunek każdego kolejnego koła ściśle na podstawie przełożenia (ω_out = ω_in × N_in / N_out, kierunek zmienia się przy każdym zazębieniu) i animuj zęby tak, aby pozostawały idealnie zsynchronizowane fazowo w punkcie styku, bez widocznego nakładania się ani przenikania. - Ostatnie koło w łańcuchu napędza wskazówkę na numerowanym zegarze pomiarowym; wskazówka musi pokazywać rzeczywisty odczyt wyprowadzony ze skumulowanego przełożenia (wyświetlaj obliczone output RPM i total ratio jako tekst na żywo). - Jeśli użytkownik spróbuje umieścić koła, których geometria zębów nie może się zazębić (niezgodny rozstaw/moduł), to połączenie musi się zablokować: mignąć na czerwono, zatrzymać propagację za wadliwym złączem i pokazać małe ostrzeżenie "tooth mismatch". - Dodaj snop światła: wiązkę ciepłego porannego słońca padającą skośnie z górnego okna przez scenę, z drobinami kurzu dryfującymi w świetle i ciepłymi, lustrzanymi błyskami przesuwającymi się po zębach podczas obrotu, aby maszyna wyglądała, jakby budziła się do życia. Dopracowanie wizualne i UX: - Kierunek artystyczny: retro inżynierska, ręcznie rysowana kreska połączona z fotorealistycznym metalem — drobna siatka blueprintu pod mosiądzem, postarzanym brązem, zielononiebieską patyną i kościową bielą; ciepłe oświetlenie boczne z długimi, miękkimi cieniami rzutowanymi, które rzeźbią objętość i głębię. - Kompozycja powinna czytelnie wskazywać korbę jako punkt wejścia, a łańcuch napędowy ma przecinać kadr po przekątnej. - Dodaj przejrzysty HUD pokazujący prędkość korby, całkowite przełożenie, output RPM i liczbę kół, a także małe kontrolki do odwracania kierunku korby, czyszczenia sceny i regulowania prędkości korby suwakiem. - Wszystko musi działać płynnie (requestAnimationFrame), reagować na rozmiar okna i pozostawać interaktywne — przeciąganie, przyciąganie do siatki, zazębianie i aktualizacja odczytów powinny reagować w czasie rzeczywistym. Całość ma sprawiać wrażenie dotykowej, precyzyjnej i żywej.