Перейти к содержанию

Все разделы сайта

Написать о задаче

Готовый сайт на UIkit 3

Стратум — сайт для компании по полам и гидроизоляции

Сайт, который продаёт экспертизу: посетитель сам собирает пирог пола, видит несовместимые слои и считает расход, а вам приходит заявка с готовой системой, площадью и помещением.

20 $

весь шаблон: восемь страниц, визуальный редактор, инструкция по запуску

Попробовать визуальный редактор — прямо в демо, без регистрации.

Шаблон «Стратум»: главная в окне браузера и на телефоне, разрез тёплого пола в санузле

Зачем такой сайт

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

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

Пять главных возможностей

Конструктор «Пирог пола»

Посетитель собирает пол снизу вверх: основание, грунтовка, гидроизоляция, разделительный слой, утеплитель, стяжка, финиш. Сайт рисует пирог строительным разрезом: материалы обозначены штриховками по мотивам ГОСТ 2.306, толщины даны в логарифмической шкале, иначе грунтовку 0,1 мм не видно рядом со стяжкой 50 мм.

  • проверка совместимости по 30 правилам: зелёный — сильная сторона, жёлтый — условие монтажа, красный — система не сработает;
  • итог: водонепроницаемость, прочность, теплопроводность и термосопротивление, класс пожарной опасности, срок службы по самому слабому слою, толщина и цена материалов за м²;
  • готовые типовые системы для десяти типов помещений.

Подбор по помещению

Ванная, кухня, балкон, бассейн, подвал, гараж, цех или тёплый пол: посетитель выбирает помещение, и каталог оставляет только подходящие материалы. Рядом — два-три готовых решения с обоснованием, например «для влажных зон с заходом на стены 20–30 см».

На странице решений — девять типовых пирогов с составом, характеристиками и ценой за м².

Калькулятор расхода и стоимости

По площади, помещению, основанию, числу слоёв, толщине и запасу считает расход, число упаковок и стоимость; заход гидроизоляции на стены — по периметру.

Таблица сравнивает обмазочную, рулонную и проникающую гидроизоляцию для той же площади: цена, трудозатраты, срок, надёжность, применимость. Блок «Что выбрать» даёт рекомендацию.

Режим проблемных зон

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

Ошибки монтажа почти всегда случаются именно в узлах, и компания показывает, что знает это.

Живые состояния

Слои плавно ложатся в разрез, низкий остаток на складе пульсирует, сайт подтверждает действия: «Система собрана», «Добавлено в подборку». Заявка проходит статусы «отправлена → в обработке → принята». Если в системе включено уменьшение движения, анимации отключаются сами.

Как это выглядит

Снимки сделаны с демо-версии; нажмите, чтобы открыть крупно.

  • Главная: разрез тёплого пола в санузле

    Главная: разрез тёплого пола в санузле

  • Конструктор «Пирог пола»: типовая система для ванной

    Конструктор «Пирог пола»: типовая система для ванной

  • Режим проблемных зон: уязвимые узлы на разрезе

    Режим проблемных зон: уязвимые узлы на разрезе

  • Калькулятор расхода и стоимости

    Калькулятор расхода и стоимости

  • Каталог материалов: фильтры, наличие, цены

    Каталог материалов: фильтры, наличие, цены

  • Визуальный редактор: правка прямо на странице

    Визуальный редактор: правка прямо на странице

И ещё в шаблоне

  • Каталог из 14 материалов: фильтры по категории, типу состава, назначению, наличию и цене; вид сеткой или таблицей; сравнение до четырёх материалов.
  • Подборка: материалы и сохранённые системы собираются в один список и уходят одним запросом коммерческого предложения.
  • Карточка товара: галерея, «разрез» микроструктуры при наведении, характеристики, место в пироге, совместимость с соседними слоями, документы, быстрый запрос.
  • Объекты: фото «до и после» со шторкой, фильтры по типу, материалу и региону.
  • Документы: сертификаты, техпаспорта, инструкции, стандарты со статусом «действует» или «истёк», порядок монтажа и условия нанесения.
  • Связь: общее окно консультации на всех страницах, переключатель языка «Қаз / Рус / Eng» (пока визуальный).

Правки без программиста

Откройте любую страницу с ?edit в адресе — снизу появится панель редактора.

  • тексты, фото, карточки каталога, цены конструктора и калькулятора;
  • заголовок и описание страницы для поиска — со счётчиком знаков и превью сниппета;
  • шапка и подвал правятся один раз и сохраняются сразу на всех страницах;
  • сохранение на сайт по паролю, с резервными копиями и, по желанию, коммитами в GitHub; без сервера — готовая страница скачивается файлом.

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

Попробовать в демо
Визуальный редактор «Стратума»: панель внизу страницы, выбор страницы, кнопки «Предпросмотр» и «Скачать»

Кому это выгодно

Владельцу

  • Сайт продаёт экспертизу: посетитель сам видит, почему эпоксид нельзя лить на сырой бетон, а битумную мембрану — оставлять без стяжки.
  • Каждый запрос приходит с контекстом: собранной системой, площадью, помещением.
  • Тексты, цены и фото меняются в браузере.

Посетителю

  • Ответ на вопрос «что мне подойдёт» — за минуту, без звонка.
  • Ошибку в выборе видно до закупки, а не после протечки.
  • Сайт быстро открывается на телефоне прямо на объекте.

Разработчику

  • Чистый HTML, один style.css, один app.js, UIkit 3 — без сборщиков и фреймворков.
  • Материалы, правила и нормы расхода лежат в данных; правила совместимости пишутся без правки JS.
  • Каждое место для подключения бэкенда названо и описано.

Поиск и ИИ-поиск из коробки

  • свои title и description у каждой страницы, канонические адреса;
  • Open Graph и Twitter Card с обложкой 1200 × 630 для превью в мессенджерах;
  • микроразметка Schema.org одним графом: Organization, WebSite, WebPage, BreadcrumbList, Product с ценой в тенге;
  • sitemap.xml, robots.txt, своя страница 404;
  • llms.txt и llms.json — описание разделов и данных для языковых моделей и ассистентов;
  • системные шрифты без загрузки, один CSS и один JS, проверка на ширине 390 пикселей без горизонтальной прокрутки.

Что вы получаете

  • восемь страниц: главная, решения, пирог пола, каталог, карточка товара, калькулятор, объекты, документы — и страница 404;
  • визуальный редактор с серверной частью на PHP;
  • готовые .htaccess и дополнения nginx для HestiaCP;
  • выкладку через GitHub Actions: на сервер уходят только изменённые файлы;
  • подробную инструкцию на русском: запуск, редактор, выкладка, устройство кода, словарь терминов.

Честно о границах: карточка товара пока одна, на неё ведут все позиции каталога до подключения CMS; переключатель языка визуальный; редактору для сохранения на сайт нужен PHP.

Шаблон «Стратум» — 20 $

Напишите — пришлю реквизиты для оплаты и передам шаблон с инструкцией. Нужно под ваш бренд: логотип, цвета, тексты, домен? Настрою отдельно, по договорённости.

Частые вопросы

  • Нужен ли программист, чтобы менять тексты и цены?

    Нет. Тексты, фото, карточки, цены конструктора и калькулятора, заголовки для поиска правятся в браузере, в визуальном редакторе. Попробовать можно в демо.

  • Где разместить сайт?

    На любом хостинге, который отдаёт обычные файлы. Чтобы редактор сохранял правки прямо на сайт, нужен PHP. В инструкции расписана выкладка на VPS с HestiaCP через GitHub Actions.

  • Можно ли подключить CRM или свою базу?

    Да. Места, куда подключать бэкенд, названы в коде и описаны в инструкции: заявки, подборка, каталог, данные конструктора.

  • Подойдёт ли шаблон для другой ниши?

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