HOURLINE: концепт платформы онлайн-записи с клиентской частью и бэк-офисом студии

VITON¹³ делает концепты продуктов, чтобы показать, как мы подходим к программам для бизнеса, а не только к сайтам. HOURLINE — платформа записи в этой серии: онлайн-запись для премиальных студий и клиник на примере Maison Hourline — вымышленного дома из трёх студий в Москве, Дубае и Лондоне, где девять мастеров делают массаж, уход за лицом, стрижки и окрашивание, маникюр, педикюр и физиотерапию. Бизнес, люди, клиенты и цены придуманы, и демо говорит об этом на каждом экране.

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

Сторона гостя — два вида, «Запись» и «Мои записи», спроектированные прежде всего для телефона. Запись идёт от студии к услуге, мастеру, ленте дат с сеткой времени, имени с телефоном и подтверждению, а в карточке тикает секундомер. Каждая студия показывает своё местное время и то, открыта ли она сейчас. Подсказки предлагают ближайшее время, «ваше обычное» время, выученное по прошлым визитам, и время у привычного мастера; режим «с подругой или другом» находит двух мастеров, свободных в одно и то же время. Подтверждение — карта в духе Wallet и файл календаря (.ics), созданный в браузере. В «Моих записях» визит можно перенести, перетащив его по дню мастера — он прилипает к свободным началам, — или отменить по правилам студии, с бесплатным окном и штрафом за позднюю отмену.

Сторона студии — пять видов. Календарь показывает день с колонкой на каждого мастера, сгруппированный по студиям, у каждой своё местное время и своя линия «сейчас», а также неделю. Визит можно перетащить на другое время или к другому мастеру, растянуть за нижний край или создать кликом; каждое изменение проходит через те же правила, что и на стороне гостя, а перенос, который нарушает правило, с тряской возвращается и объясняет причину — например, пересечение с другой записью. Дашборд показывает выручку, тепловую карту загрузки по дням недели и часам, новых и вернувшихся клиентов, отмены, неявки и срок записи; в «Клиентах» — метки, сумма за всё время, история и заметки; в «Настройках» меняются услуги, цены, часы, перерывы, буферы, правила отмены и депозита, и страница записи сразу это подхватывает.

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

Демо написано на чистых JavaScript и CSS без фреймворка и собрано esbuild в статическую папку с относительными ссылками, поэтому работает из любого пути: в портфолио оно лежит в /demos/hourline/. Сторона гостя грузится первой, сторона студии приходит отдельным файлом. Одно хранилище держит данные обеих сторон и сохраняет их в localStorage, поэтому запись со стороны гостя сразу оказывается в календаре студии, а через событие storage браузера — и в любой другой открытой вкладке. Данные создаются для каждого посетителя: база клиентов для каждой студии, восемь недель истории и четыре недели вперёд, построенные через те же правила доступности, что и сам продукт, поэтому календарь открывается заполненным и непротиворечивым.

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

Сейчас это работающий концепт по адресу tarasovvitalii.com/demos/hourline/: семь видов, два для гостя и пять для студии. 28 сентября 2026 года мы измерили его в Chrome в headless-режиме на MacBook, заморозив часы демо на 1 октября, 15:40: запись по сценарию на экране телефона шириной 390 px с паузой 0,9 секунды после каждого касания заняла 6 секунд от первого касания до подтверждения по собственному секундомеру демо (медиана 14 прогонов, от 6 до 16 секунд). Запись, сделанная в одной вкладке, появилась в календаре студии, открытом в другой, а цена, изменённая в настройках, дошла до страницы записи.

Независимая проверка перебором внутри страницы заново проверила все 658 вариантов времени, которые движок предложил на десять дней в трёх студиях по девяти услугам, — по часам, перерывам, записям с их буферами, минимальному времени до записи и обратному пересчёту часового пояса: ни одного неверного слота, ни одной двойной записи и ни одного нарушенного буфера; та же проверка с часами, переведёнными через переход Лондона на зимнее время 25 октября, тоже ничего не нашла. Весь JavaScript и CSS весят 95 КБ в gzip. На живом адресе Lighthouse 13.5 (по пять прогонов на устройство, медианы, на MacBook с load average 3–9) дал производительность 94 на телефоне и 100 на компьютере, доступность и рекомендации — 100; при загрузке страница передаёт 0,2 МБ.

HOURLINE — концепт, который VITON¹³ сделал, чтобы показать диапазон, а не заказной проект. Maison Hourline, её студии, мастера, клиенты, цены и записи вымышлены и создаются в браузере посетителя: нет заказчика, пользователей, настоящих записей, трафика и выручки, и ничего в демо не продаётся. Напоминания, запросы депозита, предложения из листа ожидания и ответы на них имитируются; ни сообщения, ни платежи, ни персональные данные не покидают браузер.

Демо-ИИ — это правила и статистика в браузере, а не языковая модель, и учится он на придуманной истории, поэтому ничего не доказывает о предсказании настоящих неявок. 6 секунд — результат скрипта, который нажимает в заданном темпе, а не людей; пользовательского тестирования не было. Каждая цифра — лабораторный замер в Chrome в headless-режиме на одном компьютере в один день, а Lighthouse запускался на живом адресе с имитацией телефона, а не на настоящих устройствах. Рабочей версии ещё понадобятся сервер с блокировкой слотов, оплата, настоящие напоминания, аккаунты и защита данных.

Как проверить портфолио веб-студии →