Fortetsia. Strona firmy budującej schrony podziemne

Fortetsia projektuje i buduje autonomiczne schrony podziemne. Pełny cykl: geologia, projekt, prace monolityczne, systemy inżynieryjne - wentylacja z filtracją, zasilanie, łączność, automatyka.

Firma potrzebowała strony, która tłumaczy usługę przez parametry: głębokość posadowienia, klasa ochrony, autonomia, powierzchnie, terminy i ceny poszczególnych konfiguracji. Odpowiadaliśmy za design, front-end, dwie wersje językowe i schemat obsługi zgłoszeń.

Design powstał w Figmie od zera. Ciemna kolorystyka: tło #141618, akcent - złoto #c9a227. Nagłówki złożone krojem Unbounded, tekst i liczby - IBM Plex Sans oraz IBM Plex Mono. Oprawa opiera się na grafice rysunku technicznego: cienkie linie, współrzędne, oznaczenia poziomów.

W makiecie opisane są stany interfejsu dla przycisków, linków, pól formularza i przełącznika języka - zwykły, po najechaniu i w fokusie. UI kit zebrany jest w osobnej ramce.

Na pierwszym ekranie widać trójwymiarowy model działki: dom, szyb wejściowy, moduł mieszkalny schronu, wentylację i blok energetyczny. Podczas ładowania szkielet rysuje się liniami, grupa po grupie. Podpisy z oznaczeniami to zwykłe elementy HTML rzutowane na punkty modelu, więc podążają za geometrią przy kołysaniu sceny.

Model jest w formacie glTF/GLB, renderowany przez three.js: z geometrii powstaje szkielet krawędzi, a pojawianie się animuje kreskowanie linii. Scena inicjalizuje się w bezczynności głównego wątku i buduje porcjami, żeby nie blokować ładowania strony. Gdy WebGL jest niedostępny, wyświetla się wersja SVG sceny z tą samą animacją.

Grubość linii ustawia się osobno dla każdej grupy elementów - grunt, ściany domu, schody, obudowa schronu, wentylacja. Do dobrania wartości zrobiliśmy wewnętrzny panel: otwiera się parametrem ?tune=1 w adresie i na zwykłych stronach się nie pokazuje.

Suwaki zmieniają parametry wprost w przeglądarce, więc warianty pokazywaliśmy i zatwierdzaliśmy z klientem na bieżąco. Potem sam „pobawił się” ustawieniami i wybrał optymalny wygląd - nam zostało tylko skopiować gotowy zestaw wartości do konfiguracji i wdrożyć na stronie.

Druga sekcja to działka w przekroju: dom na powierzchni, szyb wejściowy, śluza z filtracją, moduł mieszkalny, blok energetyczny i czerpnia powietrza. Gdy sekcja wchodzi w pole widzenia, linie rysunku kreślą się kolejno, z kaskadowym opóźnieniem.

Pod przekrojem widnieją parametry: głębokość posadowienia 6 m, autonomia 90 dni, grubość ściany monolitycznej 60 cm, powierzchnia do 120 m kw. Wartości animują się licznikiem od zera.

Schron powstaje w kilku konfiguracjach: od kompaktowego ukrycia po przestronną rezydencję z pełnym zestawem systemów inżynieryjnych. Rozpisaliśmy je na kartach, gdzie przy każdej widać skład systemów i czym różni się od sąsiedniej - można wybierać spokojnie, bez porównywania akapitów tekstu.

Etapy prac trafiły do osobnego bloku: geologia, projekt, wykop i monolit, systemy inżynieryjne, odbiór. Klient od razu widzi całą drogę budowy i wie, co i w jakiej kolejności się wydarzy.

Na stronie działają cztery rodzaje animacji: pojawianie się bloków przy przewijaniu, kreślenie rysunków, liczniki parametrów i paralaksa siatek w tle. Wszystko na natywnym JavaScripcie przez IntersectionObserver i requestAnimationFrame, bez zewnętrznych bibliotek. Przesunięcia realizuje transform, a obsługa przewijania jest pasywna.

Przy włączonym systemowym ustawieniu prefers-reduced-motion animacje się wyłączają, a elementy od razu pokazują się w stanie końcowym.

Chcieliśmy dodać projektowi coś żywego i zapadającego w pamięć, a 404 to na to najlepsze miejsce - i tak nikt na tę stronę nie czeka. Tak powstał pomysł radaru.

Wiązka obraca się w czterosekundowym cyklu, na polu migają punkty, a niżej linijka po linijce wypisuje się log skanowania: zapytanie o trasę, współrzędne sektora, sprawdzenie archiwum rysunków i końcowy wiersz o braku obiektu pod tym adresem. Współrzędne w logu przeliczają się co 90 ms z losowym odchyleniem wokół punktu Kijowa.

Strona jest wyłączona z indeksowania przez robots.txt i metatag noindex. Przy prefers-reduced-motion log wypisuje się od razu, bez animacji i migania.

Wyszło ciekawie - strona stała się kolejną wisienką na torcie tego projektu, którą chce się pokazywać.

Strona jest zbudowana bez bundlera: HTML, CSS i natywne moduły ES, jeden zminifikowany plik stylów, fonty woff2 na własnym hostingu, podzielone na podzbiory cyrylicy i łacinki. Model GLB serwowany jest z gzipem.

Scena 3D ma ograniczenia obciążenia. Gęstość pikseli ograniczono do dwukrotnej, a na urządzeniach z czterema rdzeniami i mniej - do półtorakrotnej. Wygładzanie włącza się tylko przy niskiej gęstości. Po zbudowaniu scena renderuje się w krokach co 33 ms, czyli około 30 klatek na sekundę, a poza polem widzenia render się zatrzymuje. Przy niedostępnym WebGL pokazywana jest wersja SVG.

Strona jest dwujęzyczna: wersja ukraińska w katalogu głównym, angielska w sekcji /en z lustrzaną strukturą stron. Każda para jest połączona atrybutami hreflang - uk, en i x-default. Jeśli język przeglądarki nie zgadza się z językiem strony, pojawia się pasek z propozycją przełączenia, a wybór zapisuje się w localStorage.

Na stronach są znaczniki canonical, Open Graph i Twitter Card. Znaczniki Schema.org w formacie JSON-LD obejmują Organization, WebSite, HomeAndConstructionBusiness, Blog, Article, CollectionPage, AboutPage, BreadcrumbList i Person. Mapa strony zawiera 18 adresów z alternatywami językowymi, a strony służbowe są zablokowane w robots.txt.

Formularz zbiera imię, telefon i komentarz. Ma walidację pól obowiązkowych, stany błędu i sukcesu, obsługę klawiatury, powrót fokusu po zamknięciu okna modalnego oraz komunikaty dla czytników ekranu.

Schemat obsługi zgłoszeń w projektach z back-endem wygląda tak: zgłoszenie trafia do bota Telegrama z przyciskami zmiany statusu, zapisuje się w CRM z etapem i źródłem, a konwersję liczy raport od źródła aż po umowę. Poniżej makieta demonstracyjna takiego panelu: przepływ zgłoszeń, etapy, źródła ruchu i wskaźniki. Dane na makiecie są umowne.

Projekt jest w Gicie. Deploy wykonuje jedna komenda: zbudowanie bundla CSS, dopisanie wersji zasobów do zresetowania cache przeglądarki, wysyłka plików przez rsync i ustawienie uprawnień na serwerze.

Na statycznej stronie nie ma czego testować. W projektach z back-endem na Laravelu i obsługą zgłoszeń pokrywamy testami jednostkowymi przyjęcie i walidację leada, wysyłkę do Telegrama i zapis w CRM, a po deployu robimy smoke test kluczowych stron i formularza.