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

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

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

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

Сигнум — сайт технологического стартапа

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

20 $

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

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

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

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

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

В шаблоне придуман продукт-пример: платформа «Сигнум» собирает данные с датчиков и устройств, ищет в них отклонения с помощью ИИ и сообщает о них раньше, чем сбой остановит линию. Это мир интернета вещей — так с 1999 года называют сеть устройств, которые сами передают данные без участия человека; термин ввёл британский инженер Кевин Эштон. Подставьте свой продукт — SaaS, промышленную аналитику, ИИ-сервис, инструмент для разработчиков — и сайт заговорит о нём.

Четыре фишки шаблона

Живая демо-панель

Цифры меняются каждые 1,6 секунды, график «дышит», период переключает данные, службы перезапускаются по клику, а кнопка «Подключить устройство» заканчивается анимированной галочкой. Есть «Пауза»; если в системе включено уменьшение движения, поток по умолчанию стоит.

Конструктор тарифа

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

Режим инженера

Переключатель </> в шапке включает тёмную тему, моноширинный шрифт, сетку и неоновые акценты. На страницах появляются примеры запросов к API и MQTT-топики, которых в обычном режиме нет; выбор запоминается в браузере.

MQTT — лёгкий протокол обмена сообщениями между устройствами. Его придумали в 1999 году для телеметрии нефтепроводов по медленной спутниковой связи, а сегодня это один из главных протоколов интернета вещей.

Микроанимации и состояния

Мерцающие скелетоны вместо пустых мест, спиннеры в кнопках, галочки подтверждения, плавное появление блоков при прокрутке. Всё на CSS и встроенном JS UIkit; при уменьшении движения анимации отключаются.

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

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

  • Главная: живая демо-панель с метриками и графиком

    Главная: живая демо-панель с метриками и графиком

  • Режим инженера: тёмная тема, сетка, API-примеры

    Режим инженера: тёмная тема, сетка, API-примеры

  • Конструктор тарифа: ползунки и пересчёт цены

    Конструктор тарифа: ползунки и пересчёт цены

  • Каталог оборудования: фильтры и сравнение

    Каталог оборудования: фильтры и сравнение

  • Кабинет: устройства, ключи, журнал

    Кабинет: устройства, ключи, журнал

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

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

Шесть страниц

  • Главная: предложение, живая демо-панель, шесть возможностей, четыре шага подключения, интеграции, три тарифа, слайдер кейсов, счётчики и форма «Запросить демо» с проверкой полей.
  • Продукт: четыре раздела «текст + макет» — ИИ-аналитика, устройства, автоматизация, API; схема «устройства → платформа → API → приложения» с бегущими штрихами; безопасность; сегменты SaaS, промышленность, ритейл, медицина.
  • Оборудование: восемь датчиков, счётчиков, контроллеров и шлюзов; фильтры по типу, цене и наличию; сравнение от двух до четырёх устройств в таблице.
  • Тарифы: четыре тарифа, переключатель периода оплаты, конструктор тарифа, таблица сравнения, ответы на вопросы.
  • Кабинет: шесть разделов в боковом меню; у каждого свой адрес вида #keys, на раздел можно дать ссылку.
  • Документация: навигация с подсветкой текущего раздела, быстрый старт, примеры запросов на curl, JavaScript и Python с кнопкой «Копировать», SDK, таблица аптайма.

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

Допишите ?edit к адресу любой страницы — снизу появится панель редактора. Посетители его не скачивают: файлы редактора грузятся только по этому адресу.

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

Сделано на совесть

Доступность

  • Подписи и состояния у всех элементов, переключатели с ролью switch.
  • Видимый фокус, управление с клавиатуры, ссылка «Перейти к содержимому».
  • Статус никогда не передаётся одним цветом: рядом значок и слово. Контраст текста не ниже 4,5:1.

Проверено в браузере

  • Шесть страниц на ширинах 390, 768, 1200 и 1440 пикселей: без горизонтальной прокрутки и ошибок в консоли.
  • Разметка проходит валидатор html-validate без ошибок.
  • Сорок семь сквозных проверок редактора.

Удобно разработчику

  • Чистый HTML, один CSS, UIkit 3 — без сборщиков, серверной части и базы.
  • Цвета, радиусы, тени и шрифты — переменные в начале style.css; фирменный цвет меняется в одном месте.
  • Каждое место под бэкенд помечено «API» и сведено в таблицу с адресами запросов.

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

  • шесть страниц: главная, продукт, оборудование, тарифы, кабинет, документация;
  • визуальный редактор: сохранение архивом или коммитом в GitHub, PHP не нужен;
  • один style.css со светлой темой и режимом инженера на одних и тех же переменных;
  • системные шрифты — страница не обращается ни к каким сторонним серверам, кроме CDN с UIkit;
  • подробную инструкцию на русском: страницы, фишки, редактор, расширение, места под бэкенд, словарь терминов.

Честно о границах: данные — заглушки в разметке, серверной части нет; редактор правит тексты, фото, карточки и цены, но не структуру и цвета; кабинет и демо-панель строит скрипт, их редактор не трогает. Цены в шаблоне в тенге — символ меняется в разметке и в блоке данных.

Шаблон «Сигнум» — 20 $

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

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

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

    Если вы продаёте SaaS, IoT, ИИ-сервис или инструмент для разработчиков — да. Тексты, цены, фото и карточки меняются в редакторе, а данные демо-панели лежат в одном объекте на главной.

  • Есть ли серверная часть?

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

  • Нужен ли программист для правок?

    Для текстов, фото, карточек и цен — нет: всё это правится в визуальном редакторе. Структуру страниц, цвета и шрифты меняют в коде.

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

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