Фортеця. Сайт инженерной компании подземных убежищ

«Фортеця» проектирует и строит автономные подземные убежища. Полный цикл: геология, проект, монолитные работы, инженерные системы - вентиляция с фильтрацией, электропитание, связь, автоматика.

Компании нужен был сайт, который объясняет услугу через характеристики: глубина закладки, класс защиты, автономность, площади, сроки и стоимость по комплектациям. Мы отвечали за дизайн, фронтенд, две языковые версии и за схему обработки заявок.

Дизайн сделали в Figma с нуля. Тёмная схема: фон #141618, акцент - золото #c9a227. Заголовки набраны Unbounded, текст и цифры - IBM Plex Sans и IBM Plex Mono. Оформление построено на чертёжной графике: тонкие линии, координаты, отметки уровней.

В макете описаны состояния интерфейса для кнопок, ссылок, полей формы и языкового переключателя - обычное, при наведении и в фокусе. Отдельным фреймом собран UI-kit.

На первом экране - трёхмерная модель участка: дом, шахта входа, жилой модуль убежища, вентиляция, энергоблок. При загрузке каркас прочерчивается линиями по группам элементов. Подписи с отметками - обычные HTML-элементы, спроецированные на точки модели, поэтому они следуют за геометрией при покачивании сцены.

Модель в формате glTF/GLB, рендер на three.js: из геометрии строится каркас рёбер, появление анимируется штриховкой линий. Сцена инициализируется в простое главного потока и строится порциями, чтобы не блокировать загрузку страницы. Если WebGL недоступен, показывается SVG-версия сцены с той же анимацией.

Толщина линий задаётся отдельно для каждой группы элементов - земля, стены дома, лестница, короб убежища, вентиляция. Для подбора значений сделали внутреннюю панель: она открывается параметром ?tune=1 в адресе и на обычных страницах не отображается.

Параметры меняются ползунками прямо в браузере, поэтому варианты мы показывали и утверждали с клиентом в моменте. Потом он и сам «поиграл» с настройками и выбрал оптимальный вид - нам осталось скопировать готовый набор значений в конфигурацию и применить на сайте.

Вторая секция - разрез участка в сечении: дом на поверхности, шахта входа, шлюз с фильтрацией, жилой модуль, энергоблок, воздухозабор. При попадании секции в область видимости линии чертежа прорисовываются последовательно, с каскадной задержкой.

Под разрезом выведены показатели: глубина закладки 6 м, автономность 90 суток, толщина монолитной стены 60 см, площадь до 120 кв. м. Значения анимируются счётчиком от нуля.

Убежище собирается в разных комплектациях: от компактного укрытия до просторной резиденции с полным набором инженерных систем. Мы развели их по карточкам, где у каждой видно состав систем и чем она отличается от соседней - выбирать можно спокойно, не сравнивая абзацы текста.

Этапы работ вынесли отдельным блоком: геология, проект, котлован и монолит, инженерные системы, сдача. Клиент сразу видит весь путь стройки и понимает, что и в каком порядке будет происходить.

На сайте четыре типа анимации: появление блоков при прокрутке, прорисовка чертежей, счётчики показателей и параллакс фоновых сеток. Всё реализовано на нативном JavaScript через IntersectionObserver и requestAnimationFrame, без сторонних библиотек. Смещения выполняются через transform, обработчики прокрутки - пассивные.

При включённой системной настройке prefers-reduced-motion анимации отключаются, а элементы сразу отображаются в конечном состоянии.

Нам хотелось добавить проекту что-то живое и запоминающееся, и на 404 для этого самое место - страницу и так никто не ждёт. Так появилась идея радара.

Луч вращается с периодом 4 секунды, на поле мигают отметки, ниже построчно выводится лог сканирования: запрос маршрута, координаты сектора, проверка архива чертежей и итоговая строка об отсутствии объекта по адресу. Координаты в логе пересчитываются каждые 90 мс со случайным отклонением вокруг точки Киева.

Страница закрыта от индексации через robots.txt и мета-тег noindex. При prefers-reduced-motion лог выводится сразу, без анимации и мигания.

Получилось интересно - страница стала ещё одной фишкой проекта, которую хочется показать.

Сайт собран без сборщика: HTML, CSS и нативные ES-модули, один минифицированный файл стилей, шрифты в woff2 размещены на своём хосте и разбиты на кириллический и латинский поднаборы. Модель GLB отдаётся с gzip.

Для 3D-сцены заданы ограничения по нагрузке. Плотность пикселей ограничена двойной, а на устройствах с четырьмя ядрами и меньше - полуторной. Сглаживание включается только при низкой плотности. После сборки сцена рендерится с шагом 33 мс, то есть около 30 кадров в секунду, а за пределами области видимости рендер останавливается. При недоступном WebGL показывается SVG-версия.

Сайт двуязычный: украинская версия в корне, английская в разделе /en с зеркальной структурой страниц. Каждая пара связана атрибутами hreflang - uk, en и x-default. Если язык браузера не совпадает с языком страницы, показывается плашка с предложением переключиться, выбор сохраняется в localStorage.

На страницах прописаны canonical, Open Graph и Twitter Card. Разметка Schema.org в формате JSON-LD включает Organization, WebSite, HomeAndConstructionBusiness, Blog, Article, CollectionPage, AboutPage, BreadcrumbList и Person. Карта сайта содержит 18 адресов с языковыми альтернативами, служебные страницы закрыты в robots.txt.

Форма собирает имя, телефон и комментарий. Реализованы проверка обязательных полей, состояния ошибки и успеха, управление с клавиатуры, возврат фокуса после закрытия модального окна и сообщения для скринридеров.

Схема обработки заявок для проектов с бэкендом выглядит так: заявка уходит в Telegram-бот с кнопками смены статуса, сохраняется в CRM с этапом и источником, конверсия считается сквозным отчётом от источника до договора. Ниже - демонстрационный макет такой панели: поток заявок, этапы, источники трафика и показатели. Данные на макете условные.

Проект хранится в Git. Деплой выполняется одной командой: сборка CSS-бандла, простановка версий у ресурсов для сброса кеша браузера, выкладка файлов по rsync и выставление прав на сервере.

На статическом сайте тестировать нечего. В проектах, где есть бэкенд на Laravel и обработка заявок, мы покрываем юнит-тестами приём и валидацию лида, отправку в Telegram и запись в CRM, а после деплоя прогоняем смоук-проверку доступности ключевых страниц и формы.