К содержанию

Дизайн-система «Тепло»

Всё, из чего собираются страницы ElevenHouse и всё, что платформа создаёт: цвет, шрифт, знак, компоненты со всеми состояниями, деньги, реклама и документы. Каждый пример здесь живой — на него можно навести, нажать, пройти клавишей Tab и закрыть клавишей Esc.

Двенадцать домов, одиннадцатый — золотой. Он про друзей и надежды, отсюда имя продукта. Круг домов — фирменная иллюстрация: служебные страницы и рассказ о названии. Знак продукта — монограмма «eh»; из круга вышли розетка проверки, циферблат ближайшего окна и дуга загрузки.

Принципы

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

Одна главная кнопка на экране

Синяя кнопка — то, ради чего экран существует: «Записаться», «Принять», «Подключиться». Остальное — вторичные и тихие кнопки или ссылки. Если кажется, что главных две, экран делает слишком много.

Золото значит «выбрано» или «сейчас»

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

Видеоконсультация14:30Идёт сейчас

Статус — словом

Цвет помогает, но не объясняет: у каждого статуса точка и слово. Показываем только необычное — «Оплачено» в расписании не пишем, а «Ждёт оплаты» пишем.

Ждёт оплаты до 22 октябряПодтвержденаОтменена

Одно слово — одно понятие

Слова из словаря карты страниц, одинаковые для клиента, эксперта и сотрудников. Человека называем по специализации: «Астролог Марина Соколова», «Проверенный таролог». Никакого жаргона: человек не должен переводить интерфейс на свой язык.

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

Воздух вместо рамок

Группируем отступами, а не линиями и плашками. Тень — только у того, на что можно нажать; блок без действия лежит плоско. Меньше бейджей, меньше пунктов меню.

Доход за октябрьПлоский — только читать
Натальная картаС тенью — можно выбрать

Доступно всем и с клавиатуры

Текст не мельче 13 px, основной текст контрастнее 4,5 : 1, контуры полей и кнопок — от 3 : 1. Фокус везде одинаковый — синяя линия с зазором. Окна закрываются по Esc и клику на фон, фокус возвращается на кнопку, которая их открыла. Введённое не теряется без вопроса.

TabEscEnter

Характер — в форме, а не в декоре

Однокруглая «а» в заголовках и именах рифмуется с логотипом. Скругления, пастели тем, тонкий круг домов. Никаких звёздных полей, свечений, градиентного текста и 3D.

ааОбычная «а» — в тексте, однокруглая — в заголовках

Всё, что создаём, — от ElevenHouse

Письма, PDF, чеки, QR-коды, картинки ссылок, видеозаписи — с логотипом и знаком на любом тарифе. Шапку и подвал не убрать. Логотип эксперта — только в блоке автора и не крупнее нашего. Платное — честно: «Реклама» только у рекламы, приоритет по подписке — значок подписки: только знак ElevenHouse «eh», без слова тарифа и без слова «Реклама».

Подготовлено на ElevenHouse

Цвет

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

Основа

Фон страницы, поверхности и линии. Линий три уровня: тихий разделитель, заметный разделитель и контур элемента управления — он единственный, кто обязан быть контрастным.

Слоновая кость--bg#F6F0E4 — фон страниц
Тёплый белый--surface#FFFDF8 — карточки, окна, поля
Песок--sunken#EFE7D7 — наведение, счётчики
Затемнение--scrimтёплый коричневый 20 % — фон под окнами остаётся тёплым
Линия 1--line-1#E6DCCB — разделители, контур карточки
Линия 2--line-2#D8CDB8 — шапки таблиц, неактивное
Линия 3--line-3#948871 — контуры полей, чипов, кнопок. 3,1 : 1 к фону, 3,4 : 1 к белому

Текст и действие

Уровней текста два: основной и вторичный. Иерархию внутри строим размером и весом, а не третьим оттенком. Отдельно — плейсхолдер в поле и неактивное. Синий — и основной текст, и главная кнопка.

Ночной синий--ink · --action#142037 — текст, главная кнопка. 14,3 : 1
Сумерки--ink-2#5A6173 — вторичный текст, подсказки. 5,5 : 1
Плейсхолдер и неактивное--ink-3 · --ink-off#646A7A — пример в поле, 4,8 : 1. #868B97 — только выключенное, 3 : 1
Синий: наведение, нажатие--action-hover · -press#2B3B5E / #0C1526

Золото

Только «выбрано» и «сейчас». Плотное золото — единственный выбор (время, дата), светлое — выбранный фильтр и пункт меню, всегда вместе с галочкой или синей рамкой. Контур выбранной карточки и золото для текста — тёмные, чтобы читались.

10 : 1 с синим
Золото--gold#E2CA79 — выбранное время, «сейчас»
Светлое золото--gold-soft#F5EACB — выбранный чип, выделение
Контур выбранного--gold-edge#9C7E2C — рамка выбранной карточки и сегмента. 3,4 : 1
Золото-чернила--gold-ink#7F6118 — галочка, значок и слово «Выбрана». 5,1 : 1

Состояния

Успех, внимание, ошибка и сведения — каждый с подложкой. Цвет текста на своей подложке контрастнее 4,5 : 1. Внимание — оранжевое, а не жёлтое, чтобы не путаться с золотом.

Успех--ok · --ok-bg#2F6B48 / #E2EEDF — 5,6 : 1
Внимание--warn · --warn-bg#8F4410 / #FCE1C5 — 6,2 : 1
Ошибка--err · --err-bg#A3443A / #F6E0DB — 5,4 : 1
Сведения--info · --info-bg#2B5584 / #E1EAF6 — 6,4 : 1

Темы

Шесть пастелей — по одной на тему, с которой приходит клиент. Только для меток тем, их точек в фильтрах и инициалов в аватарах. Для статусов не используем.

Отношения
Пудровый--t-love#F3DFDA / #7A3E37
Карьера и деньги
Песочный--t-career#E7E1D3 / #5A5040
Предназначение
Сумеречный--t-purpose#E4E0F0 / #4A4373
Переезд
Пыльно-голубой--t-move#DCE6F0 / #2D4A68
Год вперёд
Шалфей--t-year#E2E8D4 / #48582E
Дети
Туман--t-kids#D6E8E5 / #285A54

Практики

Шесть цветов — по одному на практику. Живут только внутри бейджа практики и точки чипа «Кто нужен»: текст, кнопки, фоны и состояния цветом практик не красим. Значок к подложке — от 4,5 : 1. Пастели тем и цвета практик не смешиваем: тема — капсула со словом, практика — круг без слова.

Код
--p-astro · --p-astro-bg.eh-p-astro · tarot · numer · matrix · hd · runes · other
Астрология
Ночное небо--p-astro#2E3F8F / #E2E6F6 — 7,6 : 1
Таро
Гранат--p-tarot#8E3159 / #F5E1E8 — 6,2 : 1
Нумерология
Морская волна--p-numer#1C6A72 / #DCEEEF — 5,2 : 1
Матрица судьбы
Аметист--p-matrix#7C3B8C / #F0E2F3 — 5,9 : 1
Дизайн человека
Терракота--p-hd#965A34 / #F7E6DA — 4,5 : 1
Руны
Камень--p-runes#5B5A50 / #E8E6DF — 5,6 : 1

Реклама и приоритет

Без золота. Песок на карточке значит только «реклама»: кромка 1 px и капсула «Реклама» с «i». Приоритет по подписке (Team Pro, Studio) — значок подписки: синяя плашка и знак ElevenHouse «eh» слоновой костью, без слова тарифа. Линии сверху и цвета своего оформления на карточке больше нет (решения 22 октября).

Код
--promo-edge · --promo-tag-bg · --promo-tag-ink--status-bg · --status-ink · --status-ring
Кромка рекламы--promo-edge= --line-2, #D8CDB8 — 1 px по краю карточки
Реклама
Капсула «Реклама»--promo-tag-bg · -inkпесок и вторичный текст — 5,0 : 1
Значок подписки--status-bg · --status-ink= --action и --on-action: синий и слоновая кость — 16 : 1, при наведении — 10,9 : 1
На карточке--status-ringкольцо 2 px цвета карточки, когда значок сидит на крае фото

Подарки от экспертов

Свой цвет — роза-ягода, без золота: золото значит «выбрано / сейчас». Цвет близок к таро и «Отношениям», поэтому различаем формой (v3.9): подарок всегда контурный — белый круг или капсула с кромкой, без заливки, и при наведении тоже (только кромка толще). Залитый розовый круг — бейдж таро, залитая капсула — «Отношения»; «Реклама» — песок, подписка — синяя плашка, «Проверенный …» — золото. Целую карточку розовой кромкой не обводим — так выглядит поле с ошибкой. Подробно — раздел «Подарки от экспертов».

Код
--gift-ink · --gift-edge · --gift-bg
Подарок: значок и слова--gift-ink#8A3A4A — 7,4 : 1 к белому, 6,6 : 1 к фону, 6,3 : 1 к подложке
Кромка--gift-edge#B86A78 — кромка знака (круг, капсула, метка 32) и сообщения-подарка: 3,9 : 1 к белому, 3,5 : 1 к фону
Подложка--gift-bg#F8E6E8 — с v3.9 в знаке не используем (заливка делала его похожим на бейдж таро); оставлен для совместимости

Графики и полосы

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

Код
--chart-1 · --chart-2 · --chart-track · --chart-wash
Основной ряд--chart-1#142037 — «израсходовано», столбцы, линия
Второй шаг--chart-2#6E7FA6 — «отложено», наведение. 3,9 : 1 к белому
Дорожка--chart-track#DDE2EC — «свободно», прогноз
Заливка под линией--chart-washтёмно-синий 8 %

Ночь — тёмная тема того, что создаёт платформа

Письма, PDF и чеки, когда почтовая программа или читалка в тёмной теме. Интерфейс сайта и кабинетов остаётся светлым. Знак и логотип на тёмном — слоновой костью.

Код
--gen-dark-bg · -card · -plate · -line--gen-dark-ink · -ink-2 · -action · -on-action
Фон и карточка--gen-dark-bg · -card#0E1829 / #142037
Плашка и линия--gen-dark-plate · -line#1A2843 / #2B3C5C
Текст
Текст--gen-dark-ink · -ink-2#F6F0E4 — 14,3 : 1 · #B3BACA — 8,4 : 1
Кнопка
Кнопка--gen-dark-action · -on-actionслоновая кость с синим текстом

Не путать

Похожие по светлоте вещи различаются тоном и формой, а не только цветом.

Карьера и деньги До 6 000 ₽ Ждёт оплаты Идёт сейчас 14:30

Тема — песочный без рамки и со значком. Выбранный чип — светлое золото, синяя рамка и галочка. Внимание — оранжевый с точкой. «Сейчас» — золотая точка в кольце. Выбранное время — плотное золото и синяя рамка. Практика — цветной круг без слова. «Реклама» — песочная капсула с «i», без золота. Подписка — синяя плашка только со знаком «eh», без слова, без золота и песка.

Типографика

Одна гарнитура — Geologica. Семь размеров, ничего мельче 13 px. Межстрочные кратны четырём, у подписей — 18.

Шкала

Однокруглая «а» (ось CRSV) — только от 20 px: заголовки, имена экспертов, заголовки окон. Текст и интерфейс, включая названия услуг, — с обычной, чтобы мелкий кегль читался и одинаковое выглядело одинаково.

Подписи — строчными, без капса и разрядки. Цифры в ценах, времени и таблицах — табличные.

Код
h1 · .eh-h1h2 · .eh-h2.eh-titleh3 · .eh-h3.eh-intro.eh-small.eh-caption.eh-label.eh-tnum
Заголовок страницы48 / 56, 300
Доброе утро, Алиса
Заголовок раздела32 / 40, 350
Ближайшие свободные окна
Имя, заголовок окна24 / 32, 350
Марина Соколова
Заголовок блока20 / 28, 450
Синастрия: совместимость пары
Вводный текст20 / 28, 300
Цена и свободные окна видны сразу, оплата — после подтверждения.
Основной текст16 / 24, 350
Разберём натальную карту и ответим на вопросы о работе и отношениях. Видеозапись консультации останется у вас на год.
Вторичный текст14 / 20, 350
11 лет практики, 840 консультаций, отвечает в течение часа
Подпись13 / 18, 350 и 500
Ближайшее окно
Можно примерно — астролог уточнит
Цифры и суммытабличные, .eh-money не рвёт сумму
4 500 ₽ 14:30 184 300 ₽

Отступы, радиусы, тени

Шаг — 4 px, имя токена — пиксели, делённые на четыре: --s-6 — это 24. Тени подкрашены синим, а не серые.

Отступы

Внутри элементов — 8–16, между элементами блока — 12–24, между блоками — 32–48, между разделами страницы — 64–96.

Код
--s-1 … --s-30--s-2h = 10
4
8
12
16
20
24
32
40
48
64
80
96

Радиусы

Чем крупнее предмет, тем мягче угол. Кнопки и чипы — пилюли, фото экспертов — скруглённый квадрат, клиентов — круг.

8
меню
12
поля
16
блоки, даты
24
карточки, окна
32
панели
30 %
фото
пилюля
кнопки

Тени

Первая — у мелких поднятых элементов, вторая — у карточек, на которые можно нажать, третья — наведение и меню, четвёртая — окна и шторки.

--sh-1
--sh-2
--sh-3
--sh-4

Движение, слои, ширины

Анимация отвечает на действие человека и показывает, что изменилось. Сама по себе ничего не мигает. Если в системе включено «уменьшить движение», анимации выключаются.

ТокенЗначениеГде
--dur-1 · --dur-2 · --dur-3120 · 200 · 320 мснаведение · меню и окна · шторки и сообщения
--z-header … --z-tooltip20 · 30 · 40 · 50 · 60 · 70 · 80шапка, меню страницы, шторка, окно, меню поверх окна, сообщения (внутри открытого окна — поверх него), подсказка
--w-content · --gutter1280 · 80 на 1440контент публичных страниц и поле по краям
--w-narrow · --w-text800 · 640оформление записи по шагам · документы и длинный текст
--w-sidebar256левое меню кабинета и админки
--w-sheet · --w-sheet-wide480 · 640шторка справа · «Записать клиента», запись
--w-modal-sm · --w-modal · -lg440 · 520 · 720подтверждение · форма · большое окно
--h-xs … --h-xl32 · 40 · 48 · 56 · 64высоты кнопок, полей, чипов, большого поиска
--h-touch · --h-chip-sm44 · 28зона нажатия кнопки-иконки, времени, пункта меню · маленькая метка темы
--w-card400карточка эксперта в превью «Продвижения» и в письмах
--w-aside · --logo-h · -lg240 · 22 · 26колонка подписей и боковая колонка · логотип в меню и в шапке
--focus · --ring2 px синий, зазор 2фокус всего интерактивного; --ring — то же тенью

Иконки

Линейные, сетка 24, обводка 1,5, скруглённые концы. Иконка берёт цвет текста. Нажмите на любую, чтобы скопировать код; по сетке ходят стрелки.

Набор

Иконка рядом со словом, а не вместо него. Одиночная иконка-кнопка всегда с подписью для экранного диктора и подсказкой. Один смысл — один значок: у каждого формата консультации свой, и он одинаков везде.

Код
<svg class="eh-icon"><use href="#i-…"/>.eh-icon--16 · 18 · 20 · 32eh.icon('name')

Размеры и цвет

16 — в подписях и бейджах, 18–20 — в кнопках и полях, 24 — в меню и навигации. Цвет — от текста вокруг.

16
20
24
32
Цвет — от текстав метке темы
Подтвержденав статусе

Значки практик, меток и денег

Значки практик (p-astro … p-runes) живут только в бейдже практики — в сетке они показаны бейджем. Значки фактов и условий (laurel, calendar-check, chat-clock, cancel-free, move-free) — только в метках карточки. Способы оплаты при записи — pay-link, pay-off, pay-none. Форматы услуг (eh.formats): video, mic, chat, chat-question, document, period, group, live, material, course — раздел «Путь клиента».

Логотип и знак

Направление «Доработанный текущий», выбрано 22 октября. Есть место для слова — ставим логотип «eleven house». Место квадратное, круглое или маленькое — знак «eh». На светлом — синий, золотая «h» в логотипе — тёмная; на синем — золото или слоновая кость.

Логотип

Горизонтальный — шапки сайта, кабинетов и писем: 22 px в меню кабинета и в шапке на телефоне, 26 px в шапке сайта, 24 px в письме. В две строки — обложки PDF и первый экран приложения. Не ниже 18 px в высоту. Поле вокруг — высота строчной «e» со всех сторон.

На светлом — синие буквы и тёмная золотая «h» #A97E1B (3,25 : 1 к фону). На синем и тёмном — слоновая кость и золото #E2CA79. Буквы нарисованы кривыми, шрифта в файлах нет: логотип не перекрашиваем, не перенабираем, не растягиваем и не меняем местами строки. В письмах — только PNG вдвое крупнее: Gmail и Outlook не показывают SVG.

Код
assets/logo-horizontal-light.svg · -dark.svg — 731,61 × 100assets/logo-stacked-light.svg · -dark.svg — 323,19 × 200--logo-h 22 · --logo-h-lg 26 · не ниже 18--brand-gold-light #A97E1B · --gold #E2CA79 — только «h» логотипаassets/icons/logo-horizontal-light@2x.png · -dark@2x.png — письма, 351 × 48

Знак «eh»

Монограмма ElevenHouse — те же «e» и «h», что в логотипе, только жирнее, с просветом между буквами. Иконка приложения, свёрнутое меню, загрузка кабинета, аватар «Поддержки ElevenHouse», значок подписки, низ страниц PDF, центр QR-кода. Для вкладки браузера — отдельный рисунок по сетке 16 px (favicon.svg).

Размер считаем по высоте, ширина — высота × 1,49. Меньше 16 px в высоту не бывает; исключение — значок подписки: 14 px на синей капсуле. Свободное поле — четверть высоты. Знак одного цвета: на светлом — синий, на синем — золотой или слоновая кость, на тёмном — слоновая кость.

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

Код
<svg class="eh-mark eh-mark--24"><use href="#g-mark"/>--16 · --20 · --24 · --32 · --40 · --64 — высота--gold · --ivory · --cleareh.mark(24, 'gold', 'ElevenHouse')#g-mark · viewBox 0 0 149.06 100assets/mark-eh-navy.svg · -gold · -ivoryassets/icons/mark-eh-*-center.svg — в квадрате
16 · свёрнутое меню
20
24
32 · загрузка
40 · запасная страница
64 · заставка приложения

Цвет и поле

синий на светлом
слоновая кость на тёмном
золотой — только на синем
слоновая кость на синем
поле — ¼ высоты со всех сторон

Где стоит знак

Аватар ElevenHouse — синий круг и золотой знак на 60 % ширины. Он бывает только у сотрудников: «Поддержка ElevenHouse», категория «Платформа» в уведомлениях, диалог «Мы обновили правила». У личного менеджера Studio — фото и подпись.

Значок подписки — только знак, без названия тарифа: синяя капсула 36 × 24 и знак цвета кости 14 px. Не круглый и без золота — круг с золотым знаком значит «пишет ElevenHouse». Иконка приложения — золотой знак на синем.

Код
.eh-avatar.eh-avatar--brandeh.status() · assets/status-badge.svgassets/app-icon.svg · assets/favicon.svgassets/icons/favicon.svg · favicon.icoapple-touch-icon.png · icon-192/512 · maskable-512ios-light/-dark/-tinted-1024 · android-foreground/-background/-monochrome-432push-white-96 · splash-1024 · bimi-eh.svg · site.webmanifest
Сегодня · ElevenHouseвкладка браузера, 16 — свой рисунок по пикселям
Иконка приложения ElevenHouseиконка приложения
Тёмная иконка iOSтёмная иконка iOS
свёрнутое меню, 16
Поддержка ElevenHouse
Ответим в течение часа
аватар сотрудников, 40 и 32
комната и видеозапись, 24
значок подписки — только знак, 14

Загрузка кабинета

Если кабинет или админка грузятся дольше 0,4 с — знак 32 в круге 72, по кругу раз в 1,2 с проходит золотая дуга в 1/12 круга. Через 3 с — «Загружаем кабинет…», через 10 с — «Дольше обычного · Обновить». Если в системе выключено движение, дуга стоит. Внутри страниц — заготовки и спиннер, знака там нет.

Код
.eh-boot · __ring · __arc · __texts · __text--3 · __text--10#g-arc--static · .is-wait · .is-long — для макетовdata-eh-reload

Сразу · через 3 секунды · через 10 секунд.

Круг домов и другие фирменные знаки

Круг домов — фирменная иллюстрация, а не знак продукта: служебные страницы S4, пустые разделы (линией, без золота), рассказ о названии. Из него вышли 12 лучей розетки, 12 делений циферблата и дуга загрузки. Знаки живут внутри компонентов и не украшают пустые места.

Код
#g-wheel + text.eh-wheel-num#g-wheel-line.eh-rosette + #i-verified.eh-dial data-time · #g-dial
Круг домовСлужебные страницы S4, рассказ о названии. Золотой одиннадцатый дом
Круг домов линиейПустые разделы. Без золота
РозеткаПроверка. 12 лучей — по числу домов
ЦиферблатБлижайшее окно — золотая точка. Без точки (#g-dial) — «нет окон»

Кнопки

Форма — пилюля. Подпись говорит, что произойдёт: «Перенести», а не «Ок». Одно действие называется одинаково на всём пути.

Виды и состояния

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

Код
.eh-btn--primary · --secondary · --quiet · --danger · --linkdisabledaria-busy="true"
ГлавнаяВторичнаяТихаяОпаснаяСсылка Обычная Наведение Фокус Нажата — Неактивна Загрузка —

Неактивную кнопку объясняем рядом: «Выберите время, чтобы записаться». Загрузку показываем на самой кнопке — дуга цветом текста и глагол в процессе. Нажмите:

Размеры и значок

56 — главное действие экрана записи и комнаты консультации, 48 — обычно, 40 — в карточках и фильтрах, 32 — в строках таблиц. Значок слева, только если он помогает узнать действие.

Тихая кнопка в тексте — с модификатором --flush: её слово встаёт ровно по краю колонки.

Код
--lg · (48) · --sm · --xs--block--flush
56
48
40
32
Пт 23 октября, 14:30
тихая опасная, по краю текста

Кнопка-иконка

Для повторяющихся действий в шапке и строках: поиск, уведомления, ещё. Всегда с подписью в aria-label и подсказкой при наведении. Точка — «есть новое», рядом в подписи — сколько.

Код
.eh-iconbtn--sm · --md · --raised · --outline.eh-dotaria-pressed
обычная
наведение
есть новое
поднятая
с контуром
в избранном
средняя, 40
маленькая, 36
неактивна

Поля

Подпись над полем всегда, подсказка — под ним. Ошибка объясняет, что исправить, и не стирает введённое. Фокус — синяя рамка и синяя линия вокруг, как у кнопок.

Текстовое поле

Для коротких ответов. Плейсхолдер — пример, а не подпись. Необязательное поле помечаем словом, обязательные — не помечаем.

То, что нельзя менять, показываем не полем, а текстом с «Копировать», — чтобы не путать с неактивным.

Код
.eh-field__label · __hint · __error.eh-inputaria-invalid.eh-readonly · __value
Обычное
Наведение, заполнено
Можно примерно — астролог уточнит
Выберите город из списка — так мы узнаем часовой пояс
Номер заказа
10482
Только чтение — текстом, не полем
Неактивно

Многострочное

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

Код
.eh-textareadata-eh-count[data-eh-counter]
Астролог увидит вопрос до консультации. Дополнить можно до её начала.

Выбор из списка, значок, единицы

Короткий список — системный выбор из списка: он понятен и работает с клавиатуры. Единицы измерения — внутри поля справа.

Код
.eh-select.eh-inputgroup__affix
Определили по браузеру
₽
Клиент видит одну итоговую цену
мин
Самарская область, UTC+4

Поиск

В кабинете — в шапке, с подсказкой клавиши. На главной — большой, с кнопкой «Найти»: это главное действие страницы.

Код
.eh-search--hero__clear

Код из 6 цифр и телефон

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

Телефон можно вставить в любом виде — «+7 (912)…», «8 912…». Исправление в середине номера не сбивает курсор.

Код
.eh-code · __cell.is-error · .is-doneeh:completedata-eh-phone
Код из СМС
Отправили на +7 912 345-67-89. Попробуйте ввести 123456 или любой другой код.
Ошибка
Код не подходит. Проверьте цифры или запросите новый через 0:42
+7
Пришлём код. Номер не видят эксперты из каталога.

Выбор

Отмеченное — золотом с синей рамкой. Состояние меняется формой (галочка, точка, положение ручки), а не только цветом — проверяем в оттенках серого.

Флажок и радио

Флажок — независимые «да / нет» и согласия. Радио — один вариант из двух–пяти, видимых сразу. Подпись нажимается вместе с полем.

Код
.eh-choice.eh-checkbox.eh-radio__hint
Без согласия с условиями записаться нельзя
Оплата

Переключатель

Настройка, которая срабатывает сразу, без кнопки «Сохранить». Подпись слева, переключатель справа.

Код
input role="switch" .eh-switch.eh-choice--between

Карточка выбора

Когда у варианта есть описание, длительность и цена: услуга при записи, формат. Внутри — обычное радио, поэтому работает с клавиатуры.

Код
label.eh-option__title · __text · __meta · __aside · __tick

Сегменты

Один вариант из двух–пяти коротких, которые переключают вид или фильтр: формат, «День / Неделя / Месяц». Стрелки переключают варианты.

Код
.eh-seg · __itemrole="radiogroup" + role="radio"--lg · --block
40, фильтр каталога
48, вид расписания

Чипы

Фильтры в каталоге и списках. Темы — один выбор, остальные можно сочетать. Выбранный — светлое золото, синяя рамка и галочка. Чип со стрелкой открывает меню, чип с крестиком — применённый фильтр.

Код
button.eh-chip aria-pressed--topic · --select · --sm__dot · __removedata-eh-single

Тема — один выбор

Состояния

обычный
наведение
выбран
фокус
неактивен
открывает меню
До 6 000 ₽применённый
со значком

Метки тем

С чем приходит клиент. Не нажимаются в карточках, ведут на страницу темы в меню «Темы». Маленькие — в карточках и списках.

Код
.eh-topic--sm.eh-t-love · career · purpose · move · year · kids
Отношения Карьера и деньги Предназначение Переезд Год вперёд Дети
Отношения Карьера и деньги Предназначение Переезд Год вперёд Дети

Статусы и метки

Точка и слово. Один список статусов для всех ролей — клиент, эксперт и сотрудники видят одинаковые слова.

Тоны

Успех — всё в порядке. Внимание — нужно действие или ждём решения со сроком. Ошибка — сорвалось или запрещено. Сведения — идёт процесс, делать ничего не нужно. Нейтральный — архив и прошлое. Сейчас — только идущая консультация.

Код
.eh-badge--ok · --warn · --err · --info · --neutral · --now--lg
Подтверждена Ждёт подтверждения Неявка клиента На модерации Прошла Идёт сейчас
В каталоге Пауза до 2 ноября Идёт консультация, 23 мин

Готовые статусы

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

Деньги эксперта не «выплачиваются», а выводятся им самим: «Доступно к выводу», «Выведено». Деньги под рекламу — «Отложено на кампании», не «резерв»: резерв — деньги клиента.

Консультация

Ждёт подтверждения
заявка у эксперта, деньги зарезервированы
Ждёт оплаты до 22 октября
эксперт записал своего клиента по ссылке на оплату
Предложено другое время
клиент выбирает
Перенос запрошен
ждём ответа второй стороны
Подтверждена
оплата списана
Идёт сейчас
оба в комнате
Прошла
материалы в консультации
Отменена
кем и когда — в подробностях
Неявка клиента
деньги — по условиям отмены эксперта
Эксперт не пришёл
клиенту — всё и скидка на следующую запись
Заявка истекла
не ответили за 12 часов, резерв снят
Разбираемся с проблемой
клиент сообщил о проблеме с консультацией, деньги удержаны до решения

Готовый разбор и вопрос в чате

Принят
эксперт ещё не начал
В работе
срок — 25 октября
Ответ до 23 октября, 18:00
вопрос в чате
Готов
видео или текст в консультации

Деньги

Зарезервировано
деньги заморожены на карте клиента до подтверждения заявки
Оплачено
так видит клиент: деньги списаны с карты
Удержано до консультации
деньги у платформы до консультации и ещё 72 часа
Удержано до решения
до решения по проблеме с консультацией
Откроется 26 октября
«Скоро откроется» в кошельке: удержанное после консультации
Доступно к выводу
можно вывести, комиссия уже вычтена
Выведено
деньги на карте или счёте эксперта
Возвращено
клиенту, полностью или частично
Вне платформы
отметка для учёта, только свои клиенты
Без оплаты
подарок, обмен или оплачено раньше
Отложено на кампании
часть рекламного баланса за идущими кампаниями
К списанию
неустойка не поместилась в «Доступно к выводу», закроется из следующих поступлений

Страница эксперта

Черновик
видит только эксперт
На модерации
обычно до одного рабочего дня
Открыта по ссылке
свои клиенты записываются
В каталоге
проверка пройдена, видна в поиске
Пауза до 2 ноября
новые записи закрыл сам эксперт
Пауза в каталоге до 6 ноября
за срывы: по ссылке открывается, приоритет и реклама не действуют
Убрана из каталога
по ссылке открывается
Заблокирована
причина и как обжаловать

Рекламная кампания

Черновик
сохраняется сама
На модерации
обычно до 4 рабочих часов
Нужно исправить
объявление не прошло проверку, причина рядом
Запланирована
начнётся в дату старта, деньги отложим в этот день
Идёт
первые 7 дней рядом — «Обучение до пт 6 ноября»
Идёт с ограничениями
показов меньше, чем позволяет бюджет; причина и одна кнопка
Пауза
остановил сам эксперт, отложенное вернулось на баланс
Не хватает денег
отложенное кончилось, показов нет
Остановлена платформой
причина и дата; если причина временная, вернётся сама
Завершена
остаток вернулся на баланс

Метка проверки

Розетка из двенадцати лучей и специализация: «Проверенный астролог», «Проверенный таролог» — не «Проверенный эксперт». На странице — по основной специализации, в каталоге с выбранной в «Кто нужен» — по ней. Метка нажимается и открывает шторку «Что мы проверили». Без заливки и рамки — доверие не кричит.

Код
.eh-verified--lg.eh-rosette + #i-verifiedeh.practicePerson(id, true)
на странице, нажимается
наведение
Проверенный нумерологшапка страницы эксперта
16 · 20 · 24 · 40

Счётчик

Только у Расписания (заявки ждут ответа) и Сообщений (непрочитанные), и во вкладках. Других значков в меню нет.

Код
.eh-count--strong · --sm
3обычный
12важный
2маленький

Практики

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

Бейдж практики

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

Название — в подсказке и для экранного диктора: «Таро, проверено ElevenHouse». Практика «Другая» — первая буква названия на песке, без розетки.

Код
.eh-practice.eh-practice--24.eh-p-tarot.is-verified · .is-pending__state · __letter#i-p-astro · tarot · numer · matrix · hd · runeseh.practice('tarot:verified', { size: 24 })eh.practices

Размеры и состояния

20 — таблицы админки, 24 — карточка каталога и страница эксперта, 32 — «Мои практики» в кабинете, 40 — проверка в админке, 56 — страница практики. Розетка в уголке — проверено ElevenHouse. Часы на песке — на проверке: только кабинет и админка. Непроверенная практика видна только на странице эксперта, без розетки.

Ряд практик

В карточке — до трёх мест, в узкой карточке (уже 320 px) — два. Лишнее прячется в «+N»: по наведению и нажатию — список. Ряд — одна остановка Tab, стрелки ходят по бейджам.

Код
.eh-practices · --20 · --32data-eh-max · data-eh-max-narrow__moreeh.practiceRow(list, { max: 3, narrow: 2, label })eh.fitPractices(row)

Строка «кто»

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

Код
.eh-who.eh-verified + .eh-practiceseh.practicePerson('tarot', true)

Чип «Кто нужен»

Первый выбор в каталоге и на главной — специализация. Один выбор, точка — бейдж практики. Если выбрана специализация, общие слова называют её: «Показать 12 тарологов», а не «экспертов».

Код
button.eh-chip.eh-chip--practice__dot.eh-p-tarotdata-eh-single
Все практики

Аватары и рейтинг

Эксперт — скруглённый квадрат с общей цветокоррекцией фото, клиент — круг. Без фото — инициалы на пастели. Сотрудники ElevenHouse — знак на синем.

Аватар

96 и 72 — страница и карточка эксперта, 40 — списки, 32 — таблицы, 24 — в строке текста. Фото экспертов: кадр по плечи, тёплый однотонный фон. Знак на синем — только у сотрудников: «Поддержка ElevenHouse», уведомления платформы.

Код
.eh-avatar--24 … --96--pro · --brand.eh-avatars
Марина Соколоваэксперт, 96
Андрей Литвинов72
ОБбез фото
Ирина Мироноваклиент, 48
Павел Андреев40
НК32
Д24
+3группа
ElevenHouse, 40
ЮТГВРОВКЛДКАВ

Рейтинг

Считает платформа. Пока отзывов меньше пяти, вместо цифры пишем «Новый на ElevenHouse» — с искрой, а не ростком: росток — знак темы «Дети». Звёзды целиком — только в отзыве и на странице эксперта.

Код
.eh-rating__count · --lg · --new.eh-stars.eh-icon--star
4,9212 отзывовв карточке
4,9212 отзывовна странице
в отзыве, 4 из 5
Новый на ElevenHouseменьше 5 отзывов

Карточки

Белая мягкая поверхность на слоновой кости. Тень — только у карточки, на которую можно нажать; её кнопка — вторичная.

Показатель и услуга

Показатель — плоский блок сведений: подпись, число, изменение, подвал. Карточка услуги — с тенью, если её можно выбрать: вся карточка ведёт по ссылке, кнопки внутри работают отдельно. Выбранная — золотой контур и «Выбрана». Остальные блоки собираем из общей .eh-card.

Суммы — классом .eh-money и с неразрывными пробелами: «62 400 ₽» не разрывается.

Код
.eh-stat__head · __label · __value · __delta--up · --down · __foot.eh-scard--link · .is-selected__name · __text · __meta · __foot.eh-picked.eh-card--link · --raised · --sunken · --sm · --lg__head · __title · __foot.eh-stretched.eh-money

Доход за октябрь

Деньги

184 300 ₽

+12 % к сентябрю

Откроется 26 октября4 230 ₽

Карточка эксперта

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

Три вида, у карточки один платный вид. Обычная. Приоритет по подписке — значок подписки на нижнем крае фото: только знак ElevenHouse «eh», без слова тарифа; при наведении и нажатии — «Эксперт платит за подписку ElevenHouse — карточка выше…»; рамка и тень как у обычной. Значок — отметка места, а не человека: только где подписка подняла карточку. Реклама — песочная кромка и капсула «Реклама» с «i» на верхней рамке; если у эксперта есть и приоритет, видна только реклама.

В выдаче реклама всегда первой, но не больше одного ряда (мест сверху — настройка суперадминки, по умолчанию 3; при двух карточках в ряду — 2), за ней приоритет, дальше — по качеству. Места считаем рядами (eh.gridCols): ряд целиком из платных карточек бывает только рекламный — в ряду с приоритетом всегда есть карточка по качеству.

Собирает eh.specialistCard() — карточки на главной, в каталоге, в «Похожих» и в превью одинаковые: статистика в две строки, низ «формат — окно — цена» прижат к низу (подробно — в разделе «Путь клиента»).

Код
.eh-acard · --prio · --ad · --skel · .is-selected.eh-acard__status (= eh.status) — значок на крае фото__top · __photo · __head · __name · __link · __stats · __stat · __team__corner · __fav · __who · __fact · __tags · __deal · __offer · __fmt · __more · __slot · __when · __terms · __foot.eh-dial data-timeeh.specialistCard({ name, href, service, practice, practices, team, fact, topics, fmt, more, slot, term, price, btn, favLogin, kind, ad })

Наведение поднимает тень. Фокус с клавиатуры — на имени, рамка обводит всю карточку. Сердце в избранном — золотое: это выбранное. Выбранная карточка — золотой контур: так в «Продвижении» отмечено превью кампании.

Уже 320 px — два места в ряду практик, факт уходит, если есть условие

Строка эксперта

«Похожие» списком, «Мои эксперты», «Кто был в команде». Имя по специализации, бейджи и ближайшее окно. В кабинете и админке рядом с именем — специализация: «Марина Соколова · астролог».

Код
.eh-prow · __main · __name · __slot.eh-stretched

Строка консультации

Расписание дня, «Дальше сегодня», списки консультаций клиента. Время, человек, услуга, формат, статус — только необычный, одно действие по ситуации.

Имя сжимается последним. Если список уже 960 px (колонка «Сегодня» на 1280), формат остаётся значком; уже 680 — действие уходит второй строкой.

Код
.eh-clist · .eh-crow__time · __who · __fmt · __end · __ic.is-now · --window · --task · .is-cancelled
11:00до 12:30
Ирина МироноваСинастрия для пары
Видеоконсультация
Идёт сейчас
13:30до 14:30
Павел АндреевНатальная карта
Видеоконсультация
14:30до 16:00
Свободное время1,5 часа, не открыто для записи
16:00до 17:15
Ксения ЛебедеваПрогноз на год
Видеоконсультация
Ждёт оплаты
21:00к сдаче
Тимур ГалиевГотовый разбор: стоит ли уходить из найма
Готовый разбор
В работе
19:00до 20:00
ОВ
Олег ВасильевНатальная карта
Видеоконсультация
Отменена клиентом

Метки на карточке

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

Четыре вида и подписка

Реклама — песочная капсула на верхней рамке, только у карточки из рекламного кабинета; при наведении и фокусе — подсказка «Рекламное место: показ оплатил рекламодатель. Нажмите — покажем, кто он» (ставит страница), нажатие открывает сведения о рекламодателе. Проверка — розетка и слово «Проверенный …» по специализации. Факт — заслуженное платформой: значок и слова цветом вторичного текста. Условие — отметка эксперта у ближайшего окна, нажимается и показывает точное условие.

Значок подписки — только знак ElevenHouse «eh» на синей плашке, без слова тарифа (ни «Pro», ни «Plus», ни «Studio»), на нижнем крае фото, только там, где сработал приоритет. Не золото (это заслуга — розетка «Проверенный …») и не песок (это реклама). Значок отмечает место карточки, а не человека: «карточка выше по подписке». Его нет там, где эксперт и так стоит по качеству, — даже если подписка у него есть. Слов на значке нет, смысл — в подписи для экранного диктора «Карточка выше по подписке ElevenHouse» и в подсказке при наведении, фокусе и нажатии (открывается вниз, не закрывает имя и рейтинг): «Эксперт платит за подписку ElevenHouse — карточка выше. Только при хороших показателях. Это не знак проверки». Легенды над списком нет (решение владельца 22 октября) — значок объясняет подсказка. Слово «Реклама» на него не ставим. Знак — символ #g-mark («Доработанный текущий»): заменили знак — значок обновился сам.

Код
.eh-adtag data-eh-popover.eh-popover · --static.eh-adinfo · __facts · __why · __links.eh-verifiedp.eh-factbutton.eh-term · --iconeh.fact(kind) · eh.term(kind, { detail, compact })eh.adInfo(id, { advertiser, inn, erid, why })eh.popover.open(el) · eh:popoverbutton.eh-status · --staticeh.status({ static, label, decorative, cls, tip })eh.statusText

Реклама

нажмите — сведения о рекламодателе

Реклама

Рекламодатель
ИП Соколова Марина Андреевна
ИНН
772814503916
Идентификатор рекламы
erid 2VtzqvR8kWq

Вы видите эту рекламу, потому что выбрали: астролог, тема «Отношения»

Подписка — значок, не метка

Проверка

Факт — один на карточке

Условие — ровно три названия

В карточке — значком у окна

Зона нажатия — 44 px. Слово — в подсказке и для экранного диктора. Отмена — круговая стрелка с ₽ («вернём всё»), перенос — календарь со стрелкой, «отмена и перенос» — оба значка. Легенды над списком нет — значки объясняют подсказки.

Сколько и где

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

МеткаКто ставитВидЧем не бывает
РекламаРекламный кабинет, после модерации и eridПесочная капсула с «i»«Продвижение», «Спонсор», «Топ», «Рекомендуем»
Проверенный тарологСотрудники — после проверки специализацииЗолотая розетка и слово«Проверенный эксперт»
Выбор клиентов и другие фактыПлатформа — по оценкам и надёжностиЗначок и слова цветом текстаКапсулой, зелёным, золотом
Бесплатная отменаЭксперт — условиями отменыЗначок, по нажатию — точное условиеНаградой и рекламой
Значок подпискиПлатформа — у подписки Team Pro или Studio, только где подписка подняла карточкуСиняя плашка только со знаком «eh» на крае фото; при наведении и нажатии — «Эксперт платит за подписку ElevenHouse — карточка выше…»Словом тарифа («Pro», «Plus», «Studio»), «Реклама», «Премиум», «Топ», «Рекомендуем», золотом, линией или рамкой карточки

Путь клиента

Общие части главной, каталога и страницы эксперта (G1, G2, G4), перенесённые в систему на этапе 2: формат услуги, низ карточки и заготовка, строка услуги и панель записи, условия значками (легенду над списком не используем), шаги «Как это работает», клетка «пусто», вход клиента по ♡, дата окна.

Форматы услуг

Закрытый список из 10 форматов и пять групп (словарь 5.7, P23). У каждого формата — значок и слово, одинаковые в карточке, строке услуги, отзыве, фильтре и кабинете. Параметр — вторым цветом: «· 60 мин», «· ответ за 24 ч».

Действие (cta) — кнопка карточки и строки услуги: что дальше. Главная кнопка (book) — в панели записи и оформлении.

Код
eh.formats · eh.formatGroupseh.format('video' | 'Видеоконсультация'){ id, label, icon, group, when, cta, book }eh.fmt('video', '60 мин') → .eh-fmt
ГруппаФорматОкно в карточкеДействиеГлавная кнопка

Низ карточки, команда и заготовка

Статистика всегда в две строки: «★ 4,9 · 212 отзывов» и «11 лет практики · Команда «Луна»». Низ прижат к низу: формат значком и словом, «Ещё: …» — другие форматы (два и «+N»), окно с подписью над временем («Ближайшее окно», у форматов к сроку — «Срок», у групп — «Начало»), цена и кнопка по формату. В ряду окна и цены стоят на одной линии.

Карточка ведёт на страницу с выбранной услугой (/{ник}?service=…), кнопка — туда же, к окнам (#slots). Гостю ♡ открывает вход клиента. Заготовка при загрузке — та же разметка и высота: после загрузки ничего не прыгает.

Код
eh.specialistCard({ service, team, fmt:{ id, param }, more:[id], slot:{ time, text, label }, btn, favLogin, kind })eh.specialistCard({ skeleton: true }) → .eh-acard--skel__stats · __stat · __team · __deal · __offer · __fmt · __more · __slot · __when · __whenl

Первая — приоритет по подписке: значок подписки (знак «eh» без слова) на крае фото; своё оформление эксперта на карточку каталога не переносится. Вторая — формат к сроку: «Срок» и часы вместо циферблата, кнопка «Задать вопрос», ♡ гостя ведёт ко входу клиента. Третья — заготовка при загрузке.

Строка услуги, панель записи, сводка отзывов

Страница эксперта (G4), дальше — страница услуги (G14) и сводка оформления (G5). Строка услуги — в группе форматов одной карточкой: бейдж практики, название-ссылка, мета «формат · длительность», отметка условия, ближайшее окно; справа цена и тихая кнопка по формату. Вся строка нажимается, выбранная — золотая рамка. Панель записи не выше окна: середина прокручивается, низ с условиями и главной кнопкой закреплён. Строки условий — значок, условие и подстрока; «Оплата — после подтверждения (i)» — под кнопкой.

Код
.eh-card.eh-svclist > article.eh-svcrow.eh-option-wrap(.is-on|.is-off|.is-static)__main · __name · __text · __near · __side · __cta · __state.eh-card.eh-bookpanel(.is-scroll|.is-more) > __body · __footeh.fitPanel(el).eh-condlines > .eh-condline(--quiet) > small · .eh-paynote.eh-rsum > __num · __count · __bars > __bar > __track > __fill (--v)

Синастрия: совместимость пары

Сравним карты двоих: где вы опора друг другу, где трение.

Видеоконсультация · 90 минБлижайшее окно — сегодня, 18:30

6 500 ₽

Выбрана

Вопрос к картам

Один вопрос — ответ текстом или голосом.

Вопрос в чате · ответ за 24 чОтвет до завтра, 14:20

1 900 ₽

Синастрия: совместимость пары · 6 500 ₽

Бесплатная отмена — до 72 ч до началаУ этих окон срок уже прошёл: бесплатно — только час после подтверждения

Возврат гарантирует ElevenHouse

Записаться

Оплата — после подтверждения

4,9

212 отзывов за 1,5 года

5192

415

33

Условия значками · легенду не используем

На карточке условие — один значок без слова; смысл — в подсказке при наведении и фокусе (на телефоне — по нажатию) и в подписи для экранного диктора. «Бесплатная отмена и перенос» — оба значка в одной кнопке.

Не используем (решение владельца 22 октября): легенду значков над выдачей и строку часового пояса в шапке выдачи — на главной, в каталоге, на страницах тем и практик. Часовой пояс остаётся там, где выбирают время записи (G4, G14, G5).

Код
eh.term(kind, { compact, detail }).eh-term--paireh.termLegend · .eh-termlegend — не используем

Наведите или перейдите клавишей Tab — подсказка назовёт условие

Шаги «Как это работает»

Главная — три шага на знаках доверия (розетка, циферблат, замок); страница эксперта — номера по формату. Заголовок 16, текст 14, в тексте жирным — гарантия.

Код
ol.eh-how(--4) > li.eh-how__step__sign | .eh-num · __title · __text--cols · --gap
  1. Выберите проверенного

    Эксперт ElevenHouse проверяет документы и опыт. Без проверки в каталог не попасть.

  2. Запишитесь на свободное окно

    Деньги списываем, только когда эксперт подтвердит запись.

  3. Подключаетесь

    За 10 минут до начала придёт ссылка на комнату ElevenHouse.

Пусто в сетке карточек

Мало экспертов на старте или после фильтра: свободное место в сетке занимает клетка «пусто» на две колонки — тонкая линия знака, одна фраза и ссылка.

Код
.eh-empty.eh-empty--inline.eh-empty--cell

Каталог пополняется, каждого проверяем лично

Новые эксперты появятся здесь, когда пройдут проверку.

Вход клиента по ♡

♡ у гостя на карточке и в шапке, «Написать», «Сообщить, когда появятся окна» — одна шторка входа в аккаунт клиента: телефон или почта (на выбор, одного достаточно) → код из 6 цифр → новому клиенту «Как к вам обращаться?», отметка «18 лет и соглашение» и отдельно согласие на обработку персональных данных. Слова — eh.loginText, те же на входе G8 и в шаге «Кто вы» G5 и G7. Входа через Google, Apple, Telegram и другие сервисы нет. Зачем входим — подзаголовком, кого сохраняем — плашкой. О кабинете эксперта на первом шаге не пишем: подсказка «ошиблись дверью» — только после кода. После входа человек остаётся на том же месте страницы.

Код
ehShell.clientLogin.open(opener, { sub, person, reason, isNew, onDone })ehShell.clientLogin.resolve(opener, reason) · .onDone(r) · .step(n)[data-eh-login="fav|write|notify"]eh:client-login.eh-login · __for · __sent · __agree · __back

Живой пример — ♡ в шапке гостя в шаблонах страниц, на главной, в каталоге и на странице эксперта. Демо: &new=1 — шаг нового клиента после кода.

Дата окна и переходы макетов

Окно и срок — в часовом поясе смотрящего, одной формулой: «сегодня, 18:30», «завтра, 11:00», «пт 23 октября, 10:00» (без запятой после дня недели). Время — «Время ваше — Москва, UTC+3».

Только для макетов, как полоса «Демо»: адрес продукта в ссылке остаётся, а нарисованная страница открывается своим файлом — главная, каталог с фильтрами, страница Марины с выбранной услугой и окнами, оформление G5, вход G8, «Как это работает» G10, «Как мы проверяем и сортируем» G11, помощь G12 и документы G13. Вошедший клиент остаётся клиентом.

Код
eh.dayText(d, now) · eh.whenText(d, now)ehShell.mock.href(href, { from }) · .go(href, { from })
Адрес продуктаФайл макета
/G1-home.html
/catalog?who=tarot&topic=loveG2-catalog.html с теми же фильтрами
/marina-sokolova?service=natal#slotsG4-specialist.html — Team Pro, услуга выбрана, к окнам; «← Назад» — туда, откуда пришли
/marina-sokolova/book?service=…&time=…G5-booking.html (будущий адрес)
/login?as=client|specialist&next=…G8-login.html; «Войти» без next — ?return= с этой страницей макета (у «Вход для экспертов» возврата нет)
/how-it-works#cancelG10-how.html; из оформления G5 — ещё ?from=booking
/verification#verify|#sort|#adsG11-verification.html?from=… — откуда пришли («← назад» и кнопка в конце)
/help/clients/no-show · /help/report?erid=… · /help/contactG12-help.html?a=… · ?topic=report&erid=… · ?topic=contact
/legal/cancellation#changes · /legal/companyG13-documents.html?doc=… (реквизиты — doc=company)

Оформление записи

Общее для страницы услуги, оформления записи, «Заявка отправлена» и оплаты по ссылке (G14, G5, G6, G7) и панели записи страницы эксперта (G4): одна сводка записи, одни шаги, одни поля оплаты, одни слова про деньги. Перенесено со страниц 22 октября, eh.css — раздел 30.

Сводка записи и панель записи

Справа на G5, G6 и G7 — одна сводка: кто (как на G4 — имя, «Проверенный астролог», рейтинг), услуга с ценой и формат, когда — в поясе смотрящего, время, которое держим, способ оплаты (разово, пакет, подписка), условия шкалой и итог — та же сумма, что на главной кнопке. Те же строки — в панели записи G4 и G14: дата с календарём, подпись мельче, «Изменить» справа.

Каркас .eh-checkout: слева заголовок и шаги, справа сводка 420 → 400 → 380 px, уже 760 — сводка над шагами. --top — шапка оформления не липкая (G5, G7): сводка у верха окна.

Код
.eh-checkout(--top) > .eh-checkout__grid > __intro(__lead) · __main · __aside.eh-card.eh-bookpanel.eh-ordersum(.is-off) > __body · __foot.eh-ordersum__who > img + div > __name + __meta (.eh-verified · .eh-rating · .eh-link).eh-ordersum__sec · __h · __no · __hold(.is-low|.is-over).eh-bookpanel__svc > b + .eh-bookpanel__price(small|s|.is-gone) + .eh-meta + .eh-bookpanel__sub.eh-sumrow > .eh-icon + div(b(.is-gone) + span) + .eh-btn--link · __morefieldset.eh-payway > .eh-choice ×2–3.eh-total(.is-off) > __row ×N + __sum (span | .eh-badge + b(s) + small).eh-bookpanel__msg · .eh-quick(__head|__alt) · .eh-nowin__actions · .eh-nowin--surface

Марина Соколова

Проверенный астролог4,9

Натальная картаВидеоконсультация · 60 мин
Как оплатить услугу
Пт 23 октября, 17:00до 18:00 · ваше время: Москва

Держим время за вами ещё 9:59

Если планы изменятся

Итого4 500 ₽

Спишем после подтверждения

Синастрия: совместимость пары6 500 ₽Видеоконсультация · 90 мин
Пт 23 октября, 14:30до 16:00 · ваше время: Москва
Записаться

Оплата — после подтверждения

Вт 27 октября, 19:00до 20:30 · ваше время: Москва

Ссылка истекла6 500 ₽

Слева — сводка G5 (G6 и G7 — та же разметка), справа — панель записи G4 и G14 и итог «ссылка истекла» из G7. Шкала собрана eh.tscale({ v: true }).

Шаги оформления

Каждый шаг — отдельная карточка: текущий — золотой номер и тень, пройденный — галочка, выбранное строкой и «Изменить», будущий — тихий контур и «После шага 1 · …». Левый край один: тело шага отступает на ширину номера. Заголовок шага получает фокус программно — без кольца.

Вход клиента внутри страницы (шаг «Кто вы» в G5 и G7) — те же слова и шаги, что шторка входа: телефон или почта → код из 6 цифр → «Как к вам обращаться?», согласие и 18+. Номер из записи эксперта — текстом (.eh-login__known). Вход и регистрация — только по телефону или почте, на выбор человека: входа через внешние сервисы нет (решение владельца 22 октября, требования закона РФ), .eh-login__alt не используем.

Код
.eh-stepcards > section.eh-stepcard(.is-active|.is-done|.is-locked)[aria-current=step]__head > __num(.eh-step.is-current|.is-done > .eh-step__mark) + __titles(__title · __val · __sub) + __act__body.eh-login__sent · __agree · __known · .eh-code

Кто вы

Ирина Миронова · +7 917 204-18-63

Аккаунт клиента — заявка, чат с Мариной и чек будут в нём

Оплата

Карта или СБП

Как оплатить
Мир •• 4421Сохранённая карта

MARINA10 — скидка 450 ₽ от Марины

Проверьте 1 поле — оно отмечено выше

Отправить заявку · 4 050 ₽

Нажимая «Отправить заявку», вы соглашаетесь с условиями отмены и возврата

Для астролога

После шага 2 · дата, время и город рождения

Поля оформления и оплаты

Группа полей с линией сверху, вопрос к группе — уровнем подписи поля, сетка в две колонки (уже 600 px шагов — в одну), короткое поле 360 px, время рождения — сегмент «Знаю точно / Примерно / Не знаю» и поле. Карта — номер, срок, CVC и одна общая строка ошибки; «Данные карты уходят сразу в банк» — подписью. Промокод — «Есть промокод?» → поле и «Применить» → строка на песке с «Убрать».

Код
.eh-fgroup · fieldset.eh-fieldset > legend.eh-legend(small) · .eh-fgrid > .is-wide.eh-field--short · .eh-timefield > .eh-seg(.is-invalid) + .eh-input.eh-formacts > __note · .eh-note(--box).eh-paytitle · .eh-cardf > .eh-field.eh-cardf__num + … + .eh-field__error · .eh-secure.eh-promo__open · .eh-promo__row · .eh-promo--on.eh-submit > .eh-formerr(--wait) + .eh-btn--primary.eh-btn--lg + __note

Из списка — по городу узнаем часовой пояс рождения

Время рождения

Выберите, знаете ли время рождения

Проверьте номер карты

Данные карты уходят сразу в банк — ElevenHouse их не видит и не хранит.

Деньги: «Что будет с деньгами», шкала в узкой колонке, путь записи

Объяснение о деньгах на оформлении — одно, над главной кнопкой: «Сейчас — резерв» золотым номером, «До … Марина подтверждает», «После подтверждения спишем». Ниже — что если не подтвердит. Одни слова на всех страницах — eh.payText: «Деньги резервируем и списываем, только когда эксперт подтвердит запись», «Оплата — после подтверждения», «До консультации деньги у ElevenHouse».

Шкала условий собирается одной функцией eh.tscale — на G4, G14, G5, G6, G7 одни слова («Сейчас · до …», «вернём N ₽», «Не пришли», «не вернём»). В колонке 340–420 px — вертикально (--v): строка на отрезок, сумма справа. Путь записи (G6, K3) — время подписью над шагом и одно кольцо «сейчас».

Код
.eh-moneypath > __title + ol.eh-steps.eh-steps--vertical + __else ×Neh.tscale({ segs:[{ kind, when, what, now }], label, note, foot, v })eh.tscaleBack(sum, pct) · eh.money(n) · eh.payText.eh-tscale--vol.eh-steps--vertical.eh-steps--pulse > li > .eh-step__body > .eh-step__when + …
  1. сегодня, 14:20

    Заявка отправлена

  2. Сейчас · до 02:20

    Марина подтверждает заявку

    Не успеет или откажется — резерв снимется сам.

  3. пт 23 октября, 17:00

    Консультация · 60 минут

Та же шкала шире 600 px — горизонтально (G6 «Если планы изменятся», G14 «Деньги и отмена»).

Раскрывающийся блок

«Условия на момент покупки» у главной кнопки оформления: значок, название, стрелка; внутри — пояснение и список значений.

Код
details.eh-disclosure > summary(.eh-icon + текст + .eh-icon) + p + .eh-dl
Условия на момент покупки

Сохраним вместе с заявкой: если Марина потом изменит условия, ваша запись пойдёт по этим.

Бесплатная отмена
до чт 22 октября, 17:00 — вернём 4 500 ₽
Если не придёте
вернём 2 250 ₽

Переходы между макетами

Только для макетов, как полоса «Демо»: адрес продукта остаётся в ссылке, нарисованная страница открывается своим файлом. Вошедший клиент остаётся клиентом (role=client — все страницы этапа 2 понимают и account=, user=). «Записаться» на G4 и G14 открывает G5 с выбранными услугой, временем, способом оплаты, добавкой и тарифом; «← Назад к эксперту» возвращает выбор.

Код
ehShell.mock.href(href, { from }) · .go(href, { from })
Адрес продуктаФайл макета
/practices/tarot · /practices/astrologyG20-practice.html?practice=tarot | astro
/topics/relationships?who=…G3-topic.html?topic=love (и career, purpose, move, year, kids)
/marina-sokolova/{услуга}G14-service.html?svc=… (с G4 в своём оформлении — from=brand)
/marina-sokolova/book?service=…&time=…&way=pack&addon=urgentG5-booking.html → G6 (sent, sum, way, tz)
/booking/{номер} · /pay/{код}G6-request-sent.html · G7-pay-link.html

Разделы страниц

Повторяющиеся разделы главной, страниц практики, темы, эксперта и услуги (G1, G20, G3, G4, G14): шапка раздела, отзывы карточкой и строкой, вопросы и ответы, гарантия, «Вы эксперт?», «Записаться снова», факты первого экрана, «Как мы сортируем», строки проверки.

Шапка раздела, отзывы карточкой, гарантия

Заголовок H2 с подзаголовком слева, справа — «Как мы сортируем» на линии заголовка (.eh-sechead__end--top). Часового пояса и легенды значков в шапке выдачи нет. Отзывы карточкой — по три в ряд, строки ряда общие (subgrid): текст, кто и когда, эксперт и «услуга · формат» стоят на одной высоте. Под списком экспертов — гарантия щитом.

Код
.eh-sechead > div(h2 + __sub) + __end.eh-sechead__end--top(.eh-btn--quiet «Как мы сортируем»).eh-revcards > article.eh-card.eh-revcard > .eh-stars + __text + __by + __about(img + div(__role? + a + __svc)).eh-guarantee > .eh-icon + p(b? + span).eh-join · .eh-again__head · .eh-again__list > .eh-again(__txt)

Проверенные тарологи

Цена итоговая. Оплата — после того как таролог подтвердит заявку

Как мы сортируем

Пришли с мужем после тяжёлого года. Марина не пугала и не обещала чудес — по делу и бережно.

Юлия · после консультации 12 октября

Астролог Марина СоколоваСинастрия ·Видеоконсультация

Ответ пришёл голосовым через 5 часов, с фото расклада.

Мила · после консультации 6 октября

ТарологНаталья ЗуеваВопрос к картам ·Вопрос в чате

Возврат гарантирует ElevenHouseЕсли эксперт отменит позже чем за сутки или не придёт — вернём всё и дадим скидку на следующую запись.

Вы таролог? Проверка, кабинет и клиенты — на ElevenHouse.

Для экспертов

Вопросы и ответы, факты, «Как мы сортируем», отзыв строкой, проверка

Вопросы и ответы — строки с линиями, у строки внутренний отступ: кольцу фокуса есть место, текст стоит по краю раздела. Факты первого экрана (практика, тема) — значок 24, значение 16 и подпись 14. Отзыв строкой (эксперт, услуга) — кто, услуга и дата, текст, ответ эксперта на песке. «Что мы проверили» — строки с отметкой этой практики.

Код
.eh-faq > details > summary(текст + .eh-icon) + p.eh-herofact > .eh-icon | .eh-rosette | .eh-dial + span(b + текст + .eh-link)ul.eh-howsort > li(.eh-icon | __ics + span)article.eh-review > __head(avatar + __who(b + span) + .eh-stars) + __text + __reply.eh-vrows > .eh-vrow(.is-this) > __ic | .eh-practice + div(b + span)ul.eh-bullets · .eh-sharebtns
Когда спишутся деньги?

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

Можно ли отменить или перенести запись?

Да — по условиям эксперта.

41 проверенный тарологЛичность, опыт и пробная консультация. Как мы проверяем

  • РекламаСначала реклама — не больше одного ряда.
  • Дальше — по рейтингу, отзывам и надёжности.
ЮлияСинастрия · 12 октября 2026

Марина не пугала и не обещала чудес — по делу.

Ответ Марины

Спасибо, Юлия! Рада, что разговор помог.

ЛичностьПаспорт сверили с данными для вывода денег
АстрологияОбразование, опыт и пробная консультация · 9 октября 2026
  • PDF на 20–25 страниц
  • Видео на 20 минут

Вход и страницы-объяснения

Общее у входа G8 и страниц «Как это работает» G10, «Как мы проверяем и сортируем» G11, «Помощь и контакты» G12, «Документы» G13 — и у принятых страниц пути клиента: одни слова входа, одна подсказка «Как мы сортируем», панель-раздел, ряд главного действия, сетка 12 колонок, список и таблица в длинном тексте.

Слова входа

Вход и регистрация — только по телефону или почте, на выбор человека, код из 6 цифр, без пароля; входа через внешние сервисы нет. Одни слова на входе G8, в шторке входа клиента и в шаге «Кто вы» G5 и G7: «Куда прислать код», нейтральные образцы в полях, «Отправить код ещё раз через 0:59», «Код не подошёл — проверьте SMS. Осталось 2 попытки», «Слишком много попыток». Согласие — две отметки: «Мне есть 18 лет, принимаю пользовательское соглашение» и отдельно «Даю согласие на обработку персональных данных» (документ /legal/consent). Отсчёт со значком — .eh-formerr--wait: значок по первой строке и не отрывается от текста.

Код
eh.loginText.how · phone · mail · phPhone · phMail · hint · get · empty(how)eh.loginText.sent(how, contact, where) · codeLabel(how) · again · againIn(sec) · wrong(how, left)eh.loginText.expired · limit · limitAt · limitIn(sec) · other(how) · change(how)eh.loginText.name · terms · pd · agreeErr · create

«Как мы сортируем»

Одна подсказка у выдачи каталога G2, темы G3 и практики G20: реклама первой, затем значок подписки «eh», дальше — по качеству (рейтинг, надёжность, скорость ответа, свободные окна, повторные клиенты и опыт), условия на порядок не влияют. Подробнее — «Как мы проверяем и сортируем», раздел #sort. Вне каталога — ссылка на каталог с другим порядком.

Код
eh.howSort({ id, other: адрес каталога | не задан, more: '/verification#sort' }).eh-popover.eh-popover--howsort > ul.eh-howsort

Панель, ряд главного действия, сетка

Панель-раздел — «Как это работает / проходит» (G1, G20), «Что происходит с деньгами» (G10): --surface с тонкой линией, 48 / 48 / 40, уже 1100 — 40 / 32 / 32. Ряд главного действия — главная кнопка и тихая ссылка рядом (первый экран и конец G10, G11, G6). Разделы публичных страниц стоят на сетке 12 колонок с отступом 24. Правая часть шапки раздела — на линии заголовка (.eh-sechead__end--top). Гарантия внутри карточки — без своей линии сверху.

Код
section.eh-panel > .eh-sechead + ….eh-cta > .eh-btn--primary + .eh-link.eh-cols12 > * { grid-column: … }.eh-sechead__end--top · .eh-guarantee--inline

Что происходит с деньгами

До консультации деньги у вас на карте или у ElevenHouse

Возврат гарантирует ElevenHouseЕсли эксперт отменит позже чем за сутки или не придёт — вернём всё и дадим скидку на следующую запись. Если отменит раньше — вернём всё.

Длинный текст: список и таблица

В документах G13 и ответах помощи G12 список стоит в ритме абзацев 16 / 24 (.eh-bullets--body). Заголовок строки таблицы (th scope="row") — не шапка: обычный вес, цвет текста, по верху; жирным — только короткие (.is-strong). Плашки в схемах — заготовки без пульсации (.eh-skel--static). Заголовок раздела или шага, на который ставим фокус скриптом, рамку не показывает: с клавиатуры до него не дойти.

Код
ul.eh-bullets.eh-bullets--body.eh-table tbody th[scope="row"](.is-strong).eh-skel.eh-skel--statich1–h6[tabindex="-1"] · main[tabindex="-1"] · .eh-banner[tabindex="-1"] — без рамки при фокусе скриптом.eh-demo__note--wide — пояснение полосы «Демо» своей строкой

Если эксперт отменил поздно или не пришёл:

  • вернём всю сумму на ту же карту;
  • дадим скидку на следующую запись — 10 % цены, на 90 дней.
Когда отменяетеВернём
Больше чем за 24 часа5 000 ₽
Меньше чем за 24 часа или не пришли — по условиям эксперта2 500 ₽

Кабинет клиента

Общее у K1 «Главная», K2 «Мои консультации», K3 «Консультация», панели сообщений (eh-chat.js, раздел 33 eh.css; K4 — страница-переход для писем) и комнаты S3 (раздел 32 eh.css). Одна переписка — в «Сообщениях», в «Переписке» консультации и в чате комнаты; одна оценка звёздами; дни 7 × 2 — как на странице эксперта; строка консультации с двухстрочным статусом. Шапка клиента ведёт в эти файлы, письма и уведомления — к самой консультации.

Сообщения — панель справа

Решение владельца 22 октября: сообщения клиента — не страница в меню, а панель, чтобы переписываться и ходить по сайту. Открывается кнопкой рядом с колокольчиком (значок чата и число непрочитанных), «Написать» на страницах (G4, G14, G6, G7, K3, K5 — у каждого эксперта, S3 перед входом), «Спросить» о карте (K7), ссылками на диалоги (K1, K2, S1, «Открыть» во всплывающих и в шторке уведомлений) и «Написать в поддержку» (G12, K10, K12). С экспертом без переписки панель начинает новый диалог. Письма ведут на /my/messages — это страница-переход K4: главная K1 с открытой панелью.

Внутри — согласованный K4: список (поддержка закреплена, знак «eh» на синем; строка эксперта — имя и время, практика словом целиком второй строкой, последнее и число), диалог (строка консультации → K3, события записи, файлы и голосовые, часы ответа у поля, мягкая подсказка об оплате мимо платформы) и «← Все диалоги». Из консультации и поддержки панель открывается с плашкой «Про запись № …» — сообщение уйдёт с ней; если строку консультации задала страница (G7, № 48 205), плашки нет, номер — в строке.

Страница под панелью живая. От 1240 px она уступает место — шапка и полоса «Демо» во всю ширину, кнопка сообщений над панелью, страница перестраивается сама (@container: на 1440 — 916 px, у K1 остаются две колонки; на 1280 — 765), а блок, который человек читал, остаётся на месте. Уже 1240 (1024, планшет) — поверх с тенью, без затемнения: страница как была. На телефоне — шторка во весь экран. Выход один — «×» или Esc (пока фокус в панели), фокус вернётся на кнопку; где в шапке нет кнопки «Сообщения» (G7, S3), «×» сворачивает в кнопку внизу справа: лицо, с кем, «черновик». Открыта ли и какой диалог — помнит при переходе между страницами.

Панель и страница говорят одно: прочитали в панели — K1 и вкладка «Переписка» в K3 гасят точки и число (eh:chat-change); пока панель открыта, они не повторяют её список — одна строка «Переписка открыта справа». Новое сообщение при открытой панели — в ней самой (строка под шапкой «… написала · Открыть» или строка в списке), всплывающее — только при закрытой. «Диалог не нашёлся» — строкой над списком, «Скрыть диалог» — строкой «Вернуть» на его месте. Золото «сейчас» и главная кнопка — у страницы: в строке консультации «Идёт сейчас», «Через 8 минут» — словом, а «Подключиться» и «Ответить» — только если страница эту запись не показывает. Пока модуль грузится — заготовка панели; нет связи — «Не удалось загрузить переписку · Повторить».

Код
eh-chat.js — грузит eh-shell.js сам, когда есть шапка клиентаehChat.open({ with: 'marina' | 'support' | ник, consultation: 48213, draft })ehChat.close() · toggle() · minimize() · list() · hide()ehChat.setup({ state, booking, now, page: {no, status, expertIn}, ctx: {marina: запись}, add: {key, support: {items, wait}} })ehChat.receive({ with, text }) — в панели, если открыта; иначе всплывающее «Открыть»[data-eh-chat="marina"] (+ data-eh-chat-consultation, data-eh-chat-draft) · ссылки /my/messages[/ник]document: eh:chat-open (открыть) · eh:chat-change {mode, view, dialog, unread, dialogs: {ник: {unread, last}}}aside.eh-chat[data-view] > .eh-chat__bar + .eh-chat__listview | .eh-chat__dialog.eh-chatbtn · .eh-chat-launch · html.eh-chat-open | .eh-chat-min · --w-chat 400 · --z-chat?chat=marina | support | list | min | 0 · ?chatstate=… — демо · ?chatfocus=1 — из письма (K4)

В шапке клиента

Закрыта · открыта · колокольчик рядом

Свёрнута (G7, S3 — без кнопки в шапке)

Разговор, а не вторая кнопка: с кем и черновик; внизу страницы — над подвалом

Новое при открытой панели

Переписка

Панель сообщений — во всю высоту панели (поля 16), K3 — история в карточке «Переписка» (писать — в панели), S3 — узкая панель чата и шторка комнаты. День — разделитель, «Новое» — тёмная линия; своя сторона — синий пузырь справа, без аватара. События записи — дорожкой с остановками, как путь записи на G6. Файл — карточка с «Скачать». Поле — капсула: скрепка, текст до 6 строк (в S3 — 5), «Отправить» активна, только когда есть что отправить.

Код
.eh-thread(--fade | .is-scrolled) > .eh-thread__in.eh-thread__day · .eh-thread__new · .eh-thread__older.eh-msg(--in|--out|--wide) > .eh-msg__ava + .eh-msg__body > .eh-msg__by? .eh-bub(.is-sending|.is-failed) .eh-msg__meta(--err)a.eh-msgfile > __ic __name __meta __dl.eh-evtrack > .eh-ev(--off) > __ic + __body > __head(b, time) __what __text __note __quote __link.eh-composer > textarea.eh-composer__input + .eh-btn--primary.eh-composer__send · --composer-rows

Заявка отправлена

Синастрия: совместимость пары, пт 23 октября, 14:30–16:00

6 500 ₽ пока только зарезервированы на карте •• 4421 — спишем, когда Марина подтвердит.

Марина подтвердила запись

Оплата 6 500 ₽ списана. До консультации деньги у ElevenHouse — Марина получит их после консультации.

Марина, здравствуйте! Можно добавить в синастрию вопрос про переезд в Казань?

10:58 · прочитано

Да, добавим вопрос про Казань. Если знаете время рождения мужа — пришлите.

Как подготовиться к синастрии.pdfPDF · 0,4 МБ11:41

Оценка звёздами

Пять кнопок или ссылок «Оценить на N из 5» по Tab: K1 — ссылки в окно отзыва K3 с этой оценкой, K3 — кнопки на странице и радиокнопки в окне, S3 — оценка в один клик. Наведение — золотистая подложка, закрашено до наведённой; слово рядом («Хорошо»). Пустая отправка — красный контур у группы.

Код
.eh-rate(--sm 44/24 | 48/32 | --lg 56/36)(.is-invalid|.is-preview) > .eh-rate__star(.is-on|.is-lit) > .eh-icon--star | --star-empty.eh-rate__word — слово под звёздами

Хорошо

Дни 7 × 2 и ошибка у времени

Выбор дня на две недели — на странице эксперта G4 и в шторках времени K3 («Другое время», перенос, встреча пакета). Дни без окон — неактивные. Уже 520 — лентой с прокруткой. Не выбрали время — красный контур у каждого окна, как у .eh-options.is-invalid.

Код
.eh-days > .eh-date ×14.eh-times.is-invalid

Выберите время

Строка консультации в кабинете

K2 (и «Ещё впереди» на K1). Статус — в две строки: обычное — тихим словом («Подтверждена»), необычное — бейджем; под ним подпись. Остаток пакета и сопровождения — точками: закрашено то, что осталось. Срок вместо встречи (ответ, разбор) — дата тише. У отменённой зачёркнуты дата и услуга, а не человек. Своя оценка — «Вы поставили 5 ★» цветом текста, без золота.

Код
.eh-crow__st > (.eh-crow__word | .eh-badge) + .eh-crow__cap.eh-meter > i(.is-used) · .eh-crow--due · .eh-crow.is-cancelled.eh-crow__tip — «i» с подсказкой · .eh-crow__mystar
19:00завтра
Нумеролог Ольга БергПрогноз на год вперёд
Видеоконсультация
Подтверждена
23 октк 12:00
Таролог Анна КимРасклад на ситуацию · пакет из 3
Вопрос в чате
Анна отвечаетосталось 2 из 3
31 октсб, 11:00
Астролог Андрей ЛитвиновСоляр на день рождения · 5 800 ₽ в резерве
Видеоконсультация
Ждёт подтвержденияответит сегодня до 20:30
13 октвт, 19:00
Таролог Дарья КлимоваРасклад на неделю
Консультация в чате
Вы отменилибесплатно · вернули 3 800 ₽

«Сейчас» без золота и панель «сейчас»

Золото на экране одно. Когда «сейчас» уже отмечено золотом (точка шкалы условий, панель «Скоро»), текущий шаг этапов и пути денег — тёмным кольцом без заливки. Панель «Скоро / Идёт сейчас» K3 — рамка с золотой кромкой и ореол, бейдж в шапке тогда нейтральный.

Код
.eh-steps.eh-steps--quiet.eh-card.eh-card--now
  1. Заявка
  2. Подтверждена
  3. 3Консультация

Через 8 минут

14:30–16:00

Подключиться

Мелочи кабинета

Имя-ссылка — цвет текста, подчёркивание только при наведении (K1, K2, K3). Меню с длинными пунктами («Добавить в календарь» K3) — переносит строку, а не обрезает. Вторая ссылка-пропуск — «К действиям по консультации» сразу к панели с главной кнопкой. Одни слова: резерв снят — «4 500 ₽ снова станут доступны на карте»; подсказка об оплате мимо платформы — только на телефон, карту, «переведу» рядом с деньгами и ссылки на оплату.

Код
a.eh-namelink · .eh-menu.eh-menu--wrapa.eh-skip.eh-skip--to[href="#…"]eh.payText.released(sum[, done]) · eh.payRisk(text)ehShell.notifications.clientCalm() — колокольчик «обычного дня»

Кабинет, часть 2: общее из K5, K7, K10, K12

Скидка на следующую запись — одни слова на K1, K2, K5, K10 и в колокольчике, тихой строкой (в K10 — полосой). Знак на лице близкого — кольца у партнёра, росток у ребёнка (K1 «Нужно сделать», K7). «Всегда» — письма, которые нельзя выключить: галочка цветом текста и слово, а не серая клетка (K12). Строка, которая нажимается целиком — подсветка на всю строку, разделитель по ширине текста (K7 «Кто видит»). В меню аккаунта открытый раздел отмечен мягким золотом (K10, K12). Разделы настроек в узком месте (контейнер уже 760 px: узкое окно, A33) — строкой, без значков, выбранный подчёркнут.

Код
p.eh-gift > span(svg + span) + a.eh-link · eh.payText.gift(sum) · giftUntil(date, lastDay) · giftTerms · giftAct.eh-avatar-wrap.eh-t-love > .eh-avatar + .eh-avatar__mark(--lg)span.eh-always[role=img] · .eh-prow.eh-prow--hover(.is-target).eh-menu__item[aria-current=page] · .eh-settings__nav — строкой в контейнере ≤ 760ehChat.person({…}) — «Написать» эксперту без переписки

Скидка 500 ₽ на следующую запись — действует до 14 января 2027 · у любого эксперта, применится сама при оплатеСкидки и подарки

всегда

Подарки от экспертов

Решение владельца 23 октября: эксперт сам дарит скидку — одному клиенту, новым клиентам или тем, кто у него уже был; на все услуги или на одну. Клиент видит подарок значком на карточке и у цены, получает сообщение в переписке, а при оплате — одну, самую выгодную скидку. Создание скидок — раздел «Акции» кабинета эксперта (A20, этап эксперта).

Правила

Кто видит. «Только для вас» — один клиент. «Для новых клиентов» — все, кто ещё не был у эксперта, в том числе гости каталога. «Для тех, кто уже был у Дарьи» — у кого была хотя бы одна консультация у эксперта (не «своим клиентам»: «свой клиент» — это происхождение клиента, политики 5.1). Подарок решает тот, кто смотрит, а не демо-состояние страницы: вошедшая Ирина видит свой подарок на G4 и G14 при любом входе, и он доезжает до оплаты (G5 ?gift=).

Что и сколько. На все услуги или на выбранную (продукт или консультацию); процент или сумма в рублях; срок — до даты; на одну запись или на каждую до конца срока. Условия видны целиком: в подсказке у значка и в сообщении-подарке.

Одна скидка на заказ. Подарки экспертов, скидка ElevenHouse (за срыв эксперта: 10 % оплаченного, 90 дней со дня срыва) и промокоды платформы не суммируются. При оплате сами берём самую выгодную, остальные сохраняются до своего срока — это видно одной строкой, и можно выбрать другую. Правило «скидки не суммируются» пишем один раз на экран: в панели записи (G4, G14) или в строке скидки (G5, G7). Подарок — на разовую запись; у пакета и подписки своя цена (действует ли на них подарок — вопрос владельцу).

Кто платит. Скидку эксперта оплачивает эксперт — его выручка меньше; скидку ElevenHouse и промокоды — платформа. Комиссия считается от оплаченной суммы.

Где виден значок. «Мои эксперты» (K5) и «Мои эксперты» на главной кабинета (K1), каталог (G2), главная (G1), страницы практик и тем (G20, G3) — на карточке; страница эксперта (G4) и услуги (G14) — у цены услуги. Когда эксперт дарит лично или тем, кто у него уже был, а переписка уже была, — сообщение-подарок в панели сообщений и уведомление. Знаки рядом: коробка — подарок эксперта, процент — скидка ElevenHouse, ярлык — промокод.

Значок и подсказка

Две формы знака (v3.9). Интерактивный (eh.gift) — белая капсула с кромкой: знак и слова («−15 %», «−15 % для вас», «−15 % на прогноз на год · для вас»), или круг 24 той же высоты — у цены, которая уже снижена. Статичный (eh.giftMark) — круг 32 с кромкой, без нажатия: сообщение-подарок, строка «какая скидка применена», талоны K10. Внутри строки текста — глиф 16–18 цветом подарка (список диалогов, столбец значков панели записи, строка чека). Тихий и узнаваемый: без золота, без заливки, не похож на «Реклама», значок подписки, «Проверенный …», бейдж таро и «Отношения».

Подсказка с условиями — при наведении, фокусе с клавиатуры и нажатии (на телефоне наведения нет): остаётся, пока не нажмут в другом месте; Esc закрывает. Три строки: заголовок жирным («Подарок от Марины: −15 % на синастрию»), «для кого · до какого числа · сколько раз», правило одной скидки. У края страницы подсказка встаёт по краю знака, не за поле; в строках K1 и K5 — под капсулой, чтобы не закрыть кнопку. Где столбец значков уже есть (панель записи), условия — у слов «Подарок Марины −15 %» (eh.giftWord, точечное подчёркивание). Для диктора — «Подарок от Марины: −15 % на синастрию», условия — описанием.

«Мои эксперты» (K1, K5) — одно правило: вес кнопки подарок не меняет, подпись — «Записаться со скидкой», ведёт на услугу подарка (на всё — на прошлую услугу); под ней капсула с размером и одна строка «на прогноз на год · до 30 ноября» цветом текста.

Код
eh.gift({ from: 'Марина', kind: 'personal' | 'new' | 'regular', value: '15 %' | '500 ₽', scope: 'Синастрия' | 'все услуги', until: Date | '30 ноября', once: true }){ icon: true, size: 'sm', static: true, decorative, text, pos: 'below', cls, fromGen, scopeAcc }button.eh-gift[data-eh-tip][data-eh-tip-toggle][data-eh-tip-wide] > .eh-gift__ic + .eh-gift__val.eh-gift--icon (круг 24) · --static · .eh-giftmark (32, .is-plain — процент и ярлык, --lg — 40 на месте лица) · .eh-giftglyph · .eh-giftwordeh.giftMark({ icon, cls, label }) · eh.giftWord(g, text)eh.giftText(g) → { title, tipLines, tip, caption, chatTitle, preview, label, who, until, once, value, size, scope, name, nameGen, note, noteCard }eh.giftDemo — подарки демо-мира: marina · darya · alina · marinaNew; eh.giftDemo.byId(id)

Подсказка — условия целиком

Рядом с другими метками карточки, «Отношениями» и бейджем таро — не спорит: подарок контурный, они залитые

Карточка эксперта с подарком

Знак — там, где про деньги, и далеко от «Реклама» (верхняя рамка), значка подписки (фото) и «Проверенный …» (строка «кто»). Подарок на все услуги или на услугу карточки — цена «от» со скидкой и зачёркнутая старая под ней, «от N ₽» на одной линии с ценами соседних карточек; рядом круг 24, у личного — капсула «для вас». Подарок на другую услугу — цена как была, а под строкой услуги капсула словами: «−15 % на прогноз на год · для вас». Голый круг у незачёркнутой цены не ставим. При «Сначала дешевле» и фильтре по цене (G2) — обычная цена и капсула: порядок считаем по обычной цене.

Код
eh.specialistCard({ …, service, price: 'от 4 500 ₽', gift: { …как eh.gift, service: 'natal', onPrice } }).eh-acard__price > .eh-price.eh-price--gift.eh-price--stack + .eh-gift.eh-gift--icon

Цена со скидкой

Два шаблона, порядок везде «новая, потом старая». В строку — строка услуги G4 и G14, «Деньги и отмена» G14, талоны K10: «6 715 ₽ 7 900 ₽ и знак», знак всегда справа от цены, подпись цветом подарка «подарок от Марины до 30 ноября» — строкой ниже, где есть место. Столбиком — низ карточки, панель записи, сводка G6: новая над зачёркнутой, без подписи. В чеке (оформление G5, оплата по ссылке G7) цену услуги не зачёркиваем: обычная цена, строка скидки и итог. Для диктора — «С подарком: 5 525 ₽, без подарка — 6 500 ₽». Сумма считается так же, как при оплате: процент — с округлением до рубля.

Код
eh.giftPrice({ price: 6500 | '6 500 ₽', gift, prefix: 'от ', stack, size: 'sm', caption | false, mark: 'static' | false, now, tag, cls }).eh-price--gift > __row(__now + s.__old) + __by · --stack · --smeh.giftApply(6500, '15 %') → 5525 · eh.giftValue('15 %', true) → «−15 %» · eh.giftDate(d) → «30 ноября», «21 января 2027»

Сообщение-подарок

Приходит в переписку с экспертом, если она уже была: личные слова эксперта (если есть) и карточка — «Марина дарит вам скидку 15 % на прогноз на год», срок, для кого, «Скидка применится сама при оплате. С другими скидками не суммируется» и «Записаться» (вторичная — главная кнопка у страницы) на услугу или страницу эксперта; подарок доезжает до оплаты. В списке диалогов — «Подарок: −15 % на прогноз на год» глифом цвета подарка; плюс уведомление в колокольчике. Тем, кто уже был, — тоже «вам», и почему: «Дарья дарит вам скидку 500 ₽ на все услуги — как всем, кто уже был у неё». Мета — частями, «·» не висит в конце строки.

Подарки Марины (ср 11:44) и Дарьи (ср 10:30) — часть обычного дня Ирины в панели сообщений (eh-chat.js v2.3): на всех страницах один и тот же счётчик и те же сообщения. Демо: ?chat=marina&chatstate=gift на любой странице клиента; в shells.html — «Подарок от эксперта» (всплывающее, если панель закрыта).

Код
eh.giftCard(g, { href, cta: 'Записаться', state: 'used' | 'gone', note, label }).eh-giftcard > __head(.eh-giftmark.__mark + __title + __meta > __part ×N > __who) + __note + __actseh-chat.js: { t: 'gift', time, gift, text } · ehChat.receive({ with, gift, text }) · ?chatstate=gift.eh-chat__last .eh-chat__giftiehShell.notifications.withGifts(list)

Какая скидка применена

Оформление записи (G5), «Заявка отправлена» (G6) и оплата по ссылке (G7), в сводке над итогом — строкой чека (compact): «Применили подарок Марины −15 %» и «−1 185 ₽» справа в денежном столбце, второй строкой мельче — почему: «Выгоднее скидки ElevenHouse 500 ₽; та сохранится до 14 января 2027». Условия подарка — у слов «подарок Марины −15 %». Знак строки: коробка — подарок, процент — скидка ElevenHouse, ярлык — промокод. «Применить другую» — выбор радиокнопками с суммой у каждой и «Без скидки» (сохранить всё на потом), список под строкой не выше четырёх вариантов — «Итого» остаётся на экране; «Скидки не суммируются — на заказ одна». При равной выгоде берём ту, что сгорит раньше.

Выбор — событие eh:change на блоке: страница пересчитывает итог и сумму на главной кнопке (сумма итога всегда равна сумме на кнопке).

Код
eh.discount({ id, price, list: [{ id, kind: 'gift', gift } | { id, kind: 'platform', value: '500 ₽', until, why } | { id, kind: 'promo', code, value, until }], applied, none, compact, now })eh.discount.state(id) → { applied, save, total, best } · eh.discount.best(list, price)eh:change { discount, applied, save, total }.eh-discount(--compact) > .eh-giftmark.__ic(.is-gift | .is-plain) + __main(__line(b + __why) + __sum) + __acts(__rule) + fieldset.__pickeh.payText.perkUntil(дата срыва) — +90 дней · perkDays · perkOne · perkSum(оплачено) — 10 %, 200–2 000 ₽

Таблица

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

Таблица с панелью

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

Отметьте строки — на месте фильтров появится полоса «Выбрано» с действиями. Статус и сумма видны всегда: когда таблица уже 1100 px, эксперт уходит второй строкой под клиента, уже 760 — туда же услуга и время. Рядом с именем эксперта — его специализация по практике услуги. Если места всё равно мало, таблица листается вбок, флажок и «···» остаются на месте, у края появляется тень.

Код
.eh-table-wrap · -bar · -bulk · -scroll · -foot.eh-table--hover · --compact.eh-table__linkth aria-sorttr aria-selected — ставит eh.js.is-num · .is-check · .is-action.is-optional · .is-optional-sm.is-narrow · .is-narrow-sm[data-eh-selected-count] · [data-eh-clear-selection]eh:selection
1 240 заказов за октябрь
Заказ Клиент Эксперт Услуга и время Статус Действия
10482
Ирина Мироноваиз каталогаАлиса Вега · астрологСинастрия, пт 23 октября
Алиса Вегаастролог Синастрияпт 23 октября, 14:30 6 500 ₽ Зарезервировано
10479
Ксения Лебедевапо ссылке экспертаЕлена Вишнякова · астрологПрогноз на год, ср 21 октября
Елена Вишняковаастролог Прогноз на годср 21 октября, 16:00 6 000 ₽ Удержано до консультации
10468
НКНаталья Корниловаиз каталогаАнна Ремизова · астрологНатальная карта, пн 19 октября
Анна Ремизоваастролог Натальная картапн 19 октября, 11:00 5 500 ₽ Удержано до решения
10431
Павел Андреевдобавлен экспертомМарина Соколова · астрологНатальная карта, чт 8 октября
Марина Соколоваастролог Натальная картачт 8 октября, 13:30 4 500 ₽ Доступно к выводу
10470
ОВОлег Васильевиз каталогаДарья Климова · тарологВопрос в чате, до 20 октября
Дарья Климоватаролог Вопрос в чатеответ до 20 октября 1 900 ₽ Возвращено
Показано 5 из 1 240

Окна и шторки

Закрываются крестиком, клавишей Esc и нажатием на фон. Фокус остаётся внутри, пока они открыты, и возвращается на кнопку после закрытия. Если что-то введено — сначала спросим.

Окно

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

Код
.eh-modal role="dialog"__panel · __head · __title · __body · __foot--sm · --lgdata-eh-open · data-eh-closedata-eh-static

Ширина: подтверждение — 440, форма — 520, большое — 720. Высота — по содержимому, длинное тело прокручивается, шапка и кнопки остаются на месте.

Шторка справа

Работа с одним предметом, не уходя со страницы: подробности проверки, перенос, «Записать клиента», запись из расписания. Внизу — итог выбора и главное действие.

Код
.eh-sheet__panel · __head · __titles · __title · __sub · __body · __section · __foot · __summary--wide

Для ссылок и снимков окно можно открыть адресом: index.html?open=demo-move

Закрыть без сохранения?

Окно или шторка с полями помечается data-eh-guard. Если человек что-то ввёл или выбрал, первый Esc, нажатие на фон, крестик или «Отмена» не закрывают, а показывают вопрос на месте кнопок. Фокус — на «Вернуться»; второй Esc тоже возвращает к полям.

После успешной отправки страница закрывает окно без вопроса: eh.close('#id', true).

Код
data-eh-guarddata-eh-guard-title · -texteh.dirty('#id', false)eh:guard

Попробуйте: откройте перенос, выберите другой день или напишите сообщение и нажмите Esc. Адрес для снимка: index.html?open=demo-move&state=dirty

Сообщения

Всплывающие — внизу справа, сами исчезают и замирают под курсором и в фокусе. Пока открыта шторка, они встают левее неё и не закрывают её кнопки. Полосы — внутри страницы, пока ситуация не изменится.

Всплывающее сообщение

Подтверждение действия («Сохранено»), ошибка, новое событие. Если действие можно откатить — «Отменить». Глагол тот же, что на кнопке: «Перенести» → «Перенос отправлен».

Простое сообщение живёт 5 секунд, с действием, «Отменить» или ошибкой — 15. Alt N переводит фокус к последнему сообщению, Esc или закрытие возвращают обратно. Пока открыто окно, Tab проходит и по сообщениям.

Код
ehToast({ tone, title, text, action, undo, duration, force })tone: ok · err · warn · info · neutralehToast.quiet(true)[data-eh-quiet-count]ehToast.clearQuiet()

Тихий режим — во время видеоконсультации

Как выглядят

Запись подтверждена

Ирина Миронова, пт 23 октября, 14:30. Оплата списана.

Новая заявка

Наталья Корнилова, синастрия, сб 24 октября, 12:00. Ответьте до 00:30, 22 октября.

Не удалось сохранить

Нет соединения. Всё, что вы ввели, осталось на странице.

Полоса-объявление

Что-то касается всей страницы и остаётся, пока не решено: нет реквизитов, плановые работы, нет соединения. Одна полоса на экран. Закрыть можно только то, что носит характер сведений.

Код
.eh-banner--info · --warn · --err · --ok · --neutral--outline · --bardata-eh-dismiss
Добавьте реквизиты, чтобы выводить деньгиДоступно к выводу — 12 400 ₽, ещё 8 460 ₽ откроется до 26 октября.
Плановые работы 24 октября, 03:00–04:00 МСККонсультации на это время перенесём бесплатно и предупредим клиентов.
Вы в каталоге. Клиенты уже видят вашу страницу в поиске.
Разбираемся с проблемойКлиент сообщил о проблеме с консультацией. Деньги за неё удержаны до решения — ответьте до 23 октября, 18:00.

Во всю ширину над страницей

Так клиенты видят вашу страницу
Изменить

Пустые состояния и загрузка

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

Пустое состояние

В строку — внутри блока или списка. Блоком — на месте пустого раздела. Страницей — служебные страницы S4: «Такой страницы нет», «Ссылка устарела». Только здесь круг домов с золотым домом. Результат действия (отписка, оплата, сбой) — значок исхода в круге, а не круг домов.

Блок не загрузился — строка с ошибкой, «Повторить» и код для поддержки; остальная страница работает.

Код
.eh-empty--inline · --page · .is-error__art · __title · __text · __actions · __foot · __code#g-dial · #g-wheel-line · #g-wheel.eh-statusmark --ok · --info · --err.eh-service · --top · --bare

Новых заявок нет

Напишем, как только кто-то запишется

Не загрузили отзывы

Остальная страница работает. Код для поддержки: R-7Q4K

Пока тихо

Здесь появятся заявки, сообщения и оплаты.

На этой неделе записей нет

Часы приёма: пн–пт, 10:00–19:00. Поделитесь ссылкой на страницу, чтобы вас нашли.

Такой страницы нет

Возможно, ссылка устарела или в адресе опечатка.

Если что-то сломалось, напишите: help@elevenhouse.ru

Вы отписались

Письма о публикациях Марины больше не придут.

Проверяем оплату

Обычно это минута. Страница обновится сама.

Ссылка не сработала

Запросите новую — старая действовала 24 часа.

Загрузка

Заготовки повторяют форму будущего содержимого — страница не прыгает. Спиннер — для коротких действий без формы: «Проверяем код». Дольше 10 секунд — объясняем словами. Золота в загрузке нет.

Код
.eh-skel--text · --title · --circle · --photo · --pill · --block.eh-spinner · --lg.eh-loadingaria-busy
Проверяем код

Шаги

Форма по шагам и этапы консультации. Пройденный — синий с галочкой, текущий — золотой («сейчас»), будущий — контур. Вертикальные — чек-лист «До каталога».

Код
ol.eh-steps.eh-step · __mark · __label.is-done · aria-current="step" · .is-problem--vertical.eh-progress
  1. Время
  2. Контакты
  3. 3Для астролога
  4. 4Оплата
  1. Заявка
  2. 2Подтверждена
  3. 3Прошла
  1. ЛичностьПроверено 14 октября
  2. ОбразованиеДиплом школы астрологии принят
  3. 3ОпытЗагрузите историю консультаций или три отзыва клиентов
  4. 4Пробная консультацияНазначим после шага «Опыт»
До каталога 2 шага2 из 4

Полоса прогресса — когда важна доля, а не названия шагов.

«Показать ещё» и разделитель

Вместо постраничной навигации — сколько показано и кнопка. Разделитель — только если отступа мало: между группами в меню, «или» между способами входа.

Код
.eh-more · __count.eh-divider--strong · --label · --tight · --vertical
Показано 12 из 54 экспертов


Выбор даты и времени

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

Дни и окна

Страница эксперта, оформление записи, перенос, «Записать клиента». Время всегда в поясе того, кто смотрит, с подписью. Нажмите на среду — увидите день без окон.

Код
.eh-datepick · __head · __month · __nav.eh-dates · .eh-date__wd · __d · __n · .is-empty.eh-times · .eh-timedisabled = занято · .is-conflict.eh-nowin · .eh-tz
Октябрь 2026

Утро

День

Вечер

Время ваше — Екатеринбург, UTC+5

Состояния

Пересечение с другой записью показываем у эксперта в «Записать клиента»: так записать нельзя, поэтому кнопка неактивна, подписана словом «занято», а под сеткой — с какой записью пересекается.

Код
.eh-time.is-conflict aria-disabledsmall.eh-times__note
день
наведение
выбран
нет окон
время
выбрано
занято
пересечение

15:00 пересекается с записью: Ирина Миронова, синастрия, 14:30–16:00. Выберите другое время.

Условия отмены

Условия для клиента задаёт эксперт, правила для экспертов — ElevenHouse. Клиент видит даты и суммы, а не названия наборов. Одно правило не меняет никто: если эксперт отменил или не пришёл, клиент получает всё.

Шкала условий

Перед оплатой, после неё, на странице услуги и в консультации — по «Условиям на момент покупки». Отрезков столько, сколько разных сумм возврата: от одного до трёх. Белый с контуром — вернём всё, серо-синий — часть, тёмный — ничего. «Сейчас» — золотая точка и слово перед датой.

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

Код
.eh-tscale__bar · __seg · --free · --part · --none · .is-now__when · __now · __what · __note · __foot--line--tscale-ring

Клиент · «Обычные», синастрия за 6 500 ₽ в пт 23 октября, 14:30

  1. Сейчас · до чт 22 октября, 14:30вернём 6 500 ₽
  2. до пт 23 октября, 14:30вернём 4 550 ₽
  3. Не пришливернём 3 250 ₽

Перенести можно 2 раза — до чт 22 октября, 14:30, сразу и без вопросов

Если Марина отменит позже чем за сутки или не придёт — вернём всё и дадим скидку на следующую запись. Если отменит раньше — вернём всё.

Условия отмены задала Марина, возврат гарантирует ElevenHouse.

Эксперт · та же запись

  1. Сейчас · до чт 22 октября, 14:30без срыва
  2. до пт 23 октября, 12:30срыв · неустойка 975 ₽ (15 %)
  3. последние 2 часатолько форс-мажор

Если не придёте — неустойка 1 950 ₽ (30 %), Ирине вернём всё и дадим скидку на следующую запись.

За последние 30 дней без последствий можно отменить заранее ещё 1 раз.

Короткая строка — панель записи на странице эксперта

Бесплатная отмена до пн 26 октября, 19:00

Выбор условий отмены

«Часы и условия» в расписании и условия в услуге. Три готовых набора и «Свои» в рамках платформы: бесплатный срок — не длиннее 72 часов, при поздней отмене — вернуть не меньше 50 %, переносов — не больше трёх. Справа — как клиент увидит условия на примере.

Названия наборов видят только эксперт и сотрудники. Отметки «Бесплатная отмена», «Бесплатный перенос» и «Бесплатная отмена и перенос» появляются сами, когда отмена или перенос бесплатны в любой момент до начала.

Код
.eh-options · label.eh-option.eh-option-wrap.is-on · .eh-option__more.eh-select.eh-tscale
Условия для клиентов

Так увидит клиент

Видеоконсультация за 5 000 ₽, вт 27 октября, 19:00 — если запишется сейчас

Деньги

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

Кошелёк

Верх «Денег»: крупно «Доступно к выводу» и главная кнопка «Вывести деньги». Ниже — виды денег, которые ещё нельзя вывести, и строки «Зарезервировано в заявках» и «К списанию» — только если такие суммы есть.

Код
.eh-wallet__main · __label · __sum · __note · __actions__stats + .eh-stat__rows · __row

Доступно к выводу

12 400 ₽

Все суммы — уже без комиссии. Записи вне платформы — в статистике.

Скоро откроется

8 460 ₽

26 октября4 230 ₽

Удержано до консультации

18 600 ₽

4 записи

Удержано до решения

5 170 ₽

1 проблема с консультацией

Рекламный баланс

Пополнить

3 400 ₽

Отложено на кампании11 600 ₽
Зарезервировано в заявкахСтанет вашим, когда подтвердите и проведёте консультации
9 000 ₽
К списаниюЗакроется из следующих поступлений — ближайшее 26 октября
700 ₽

Расчёт суммы

Везде, где эксперт видит деньги клиента: «Записать клиента», запись, операция, услуга. Строкой: клиент заплатит → комиссия со ставкой и причиной → вам. Причина ставки нажимается и объясняет, откуда она. Льгота — обычная ставка зачёркнута цветом текста, без золота.

Код
.eh-calc__step · --you · __why · __old · __note--cell · --blockehTools.calcHTML(price, fee)

Строкой — шторка записи и операция

Клиент заплатит 4 500 ₽, комиссия 270 ₽ , вам 4 230 ₽

Льгота — временная ставка

Клиент заплатит 6 500 ₽, комиссия 260 ₽ , вам 6 240 ₽

Диапазон — в услуге, пока клиент неизвестен

Клиент заплатит 4 500 ₽, вам 4 140–4 230 ₽

Блоком — карточка записи

Клиент заплатил6 500 ₽Комиссия 6 %390 ₽Вам6 110 ₽

Откроется к выводу 26 октября, через 72 часа после консультации.

В ячейке таблицы

ОперацияВам
Синастрия, Ирина Миронова6 110 ₽из 6 500 ₽ · 6 %
Поздняя отмена клиентом — вам1 380 ₽из 1 500 ₽ · 8 %

Операции

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

Код
.eh-table · .eh-calc--cell.eh-badge
ДатаЧтоСуммаСтатус
23 октябряСинастрия · Ирина Мироноваклиент заплатил 6 500 ₽ → комиссия 390 ₽ (6 % · Team Pro) → вам 6 110 ₽+6 110 ₽Удержано до консультации
22 октябряПоздняя отмена клиентом — вам 1 380 ₽Натальная карта · Павел Андреев+1 380 ₽Откроется 25 октября
21 октябряНеустойка · спишем 30 октябряПоздняя отмена, прогноз на год · Ксения Лебедева−900 ₽Ждёт списания
20 октябряКомпенсация от платформыФорс-мажор клиента подтверждён · Олег Васильев+1 350 ₽Доступно к выводу
19 октябряОтложено на кампанию «Первые клиенты»из «Доступно к выводу»−11 600 ₽Отложено на кампании
16 октябряВывод на карту •• 4421Зачислено 17 октября−24 000 ₽Выведено

Плашки о деньгах

«К списанию» — нейтрально, без тревоги: сумма, когда закроется и «Погасить картой». Будущее изменение комиссии — заранее, с датой и новой ставкой. Клиент после срыва эксперта видит скидку на следующую запись — от ElevenHouse, со сроком.

Код
.eh-banner --neutral · --info · --ok
К списанию 700 ₽Неустойка не поместилась в «Доступно к выводу». Закроется из следующих поступлений — ближайшее 26 октября.
С 5 декабря клиенты из каталога — 10 % вместо 6 %Своих клиентов изменение не касается. Записи, оплаченные до 5 декабря, — по старой ставке.
Скидка 650 ₽ на следующую запись — от ElevenHouseМарина отменила консультацию поздно 23 октября. Все 6 500 ₽ вернутся на карту, скидка действует у любого эксперта 90 дней — до 21 января 2027.

Оплата при записи

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

Код
.eh-options · .eh-option--row · .eh-option-wrap.eh-chosen · __main · __sub.eh-origin#i-pay-link · pay-off · pay-none
Павел АндреевВаш клиент · добавили 2 октября
Ирина МироноваПришла через ElevenHouse

Ирина пришла через ElevenHouse — оплата только через платформу. Вне платформы и без оплаты записывают только своих клиентов.

Рекламный кабинет

«Продвижение» в «Моей странице». Эксперт задаёт бюджет на день или на весь срок, деньги откладываются из рекламного баланса, показы продаются аукционом за 1000 показов. На карточке — пометка «Реклама».

Бюджет и прогноз

Бюджет — в день или на весь срок, от 300 ₽ в день. Сразу видно, сколько отложим из рекламного баланса и чего ждать. Прогноз — всегда диапазоном и с пометкой «прогноз», а не обещанием.

Код
.eh-seg · .eh-inputgroup.eh-forecast · __label · __value · __note
Бюджет
₽ в день
От 300 ₽ в день
Последний день — вт 27 октября

Отложим 14 000 ₽ из рекламного баланса. Не потратим — вернём на баланс.

Показы за срокпрогноз

31–39 тысяч

Переходы на страницу

470–720

Записи

9–18

По похожим кампаниям астрологов за сентябрь. Это не обещание: на результат влияют окна, цены и отзывы.

Ставка

Сколько эксперт готов заплатить за 1000 показов. Под полем — где рынок сейчас. Оптимизация может сама держать ставку в пределах — тогда поле показывает верхнюю границу.

Код
.eh-bid · __market.eh-inputgroup__affix
₽ за 1000 показов

Чаще выигрывают от 280 ₽В среднем 340 ₽

Полоса бюджета и результаты

Израсходовано, отложено и свободно — одной полосой, между частями зазор. Показатели — словами по-русски: показы, переходы, записи, цена записи. CPM и CTR — только в подсказке рядом.

Код
.eh-budget · __bar · __part --spent · --held · --free__legend · __key.eh-stat
Израсходовано
8 260 ₽
Отложено на кампании
5 740 ₽
Бюджет кампании «Первые клиенты»
14 000 ₽ на 7 дней

Расход

8 260 ₽

Показы

24 180

342 ₽ за 1000

Переходы

412

1,7 % показов

Записи

9

оплачено 8

Цена записи

918 ₽

на 1 ₽ — 6,3 ₽ оплат

Графики

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

Код
.eh-chart · __head · __title · __total · __plot__grid · __axis · __bar .is-forecast · __hit__line · __area · __dot__table
Расход по дням
расходпрогноз

8 260 ₽ за 6 дней

Показы по дням

24 180 за 6 дней

Рекомендация

Не больше трёх сразу. Что сделать, что изменится — и «Применить» в одно нажатие. «Скрыть» убирает совет на 30 дней.

Код
.eh-reco · __ic · __text · __effect · __actions

Поднимите ставку до 320 ₽

Сейчас упускаете 45 % показов из-за ставки. Ожидаем +4–6 записей за неделю.

Откройте окна на выходные

Треть переходов — в субботу и воскресенье, а окон в эти дни нет.

Админка

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

Правила комиссии

«Деньги → Комиссия». Строка — одно правило: условия чипами, ставка с границами, период и статус. Правила проверяются сверху вниз, срабатывает первое подходящее; порядок меняется ручкой слева. Базовая ставка тарифа — последней, её не перетащить.

Код
.eh-rules · .eh-rule__drag · __main · __name · __conds · __rate · __meta.is-off · .is-base#i-drag

Первые три месяца

Startна платформе до 90 днейлюбой клиент
4 %вместо 8 %
Действуетдо 30 ноября

Клиенты из каталога

Team Pro · Studioклиент с платформы
10 %не меньше 150 ₽
Запланированос 5 декабря

Таро: запуск практики

практика: таровсе тарифы
5 %от 5 до 8 %
Выключено1–30 сентября

Базовая ставка тарифа

Start 8 %Team Pro 6 %Studio 4 %
4–8 %по тарифу
Действуетвсегда

Проверить расчёт

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

Код
.eh-check · __fields · __result__rules · __rule .is-hit__cols · __col
₽

Опубликовать изменения

Изменения копятся черновиком. Публикация — в диалоге: с какой даты, кого затронет и что получат эксперты. Комиссию поднимаем не раньше чем через 45 дней после письма.

Код
.eh-affect · __nums · __num.eh-modal
2 изменения в черновике

Что создаёт платформа

Письма, PDF, чеки и отчёты, QR-коды, картинки ссылок, видеозаписи, заставка приложения — всё с айдентикой ElevenHouse на любом тарифе. Шапку и подвал не убрать. Логотип эксперта — только в блоке автора и не крупнее нашего.

Письмо в ящике

Отправитель — «ElevenHouse», аватар — знак на синем (BIMI). Тема — что случилось, прехедер — главное число или время. Сами письма и их тёмная тема — в витрине писем.

Код
.eh-mailrow · __body · __from · __line · __subj · __time · __pre.is-unread · aria-currentassets/icons/bimi-eh.svgpages/email.html

PDF

Разбор, расклад, итоги встречи, отчёт кампании. Обложка — с основным логотипом в две строки. На каждой странице внизу — знак «eh» и номер. Блок автора — фото, имя, специализация и акцент из пастели темы; на Team Pro и Studio вместо фото может стоять логотип эксперта.

Код
.eh-pdf · --cover__logo · __kicker · __title · __h · __text · __lines__author · __author-logo · --pdf-accent__foot

QR, картинка ссылки, видео и заставка

QR-код страницы — со знаком «eh» в центре на белом кружке: коррекция H, знак не больше 20 % площади, код читается. Картинка ссылки для соцсетей 1200 × 630 — фото, имя, специализация и логотип. На видеозаписи и в комнате — знак слоновой костью в углу. Заставка приложения — синий знак 64 на слоновой кости.

Код
.eh-qr · __mark · --qr.eh-og · __photo · __body · __name · __spec · __logo.eh-videomark.eh-splashassets/icons/qr-marina-sokolova.svg · .pngassets/icons/og-template.svg · splash-1024.png
1200 × 630, при отправке ссылки в мессенджер
QR-код страницы Марины Соколовой: elevenhouse.ru/marina-sokolova
elevenhouse.ru/marina-sokolova
видеозапись, 24
заставка, 64

Для разработки

Как подключить систему к странице. Имена классов каждого компонента — под ссылкой «Код» в его блоке.

Подключение

Шрифт, значок вкладки и стили — ссылками в <head>: так первый кадр сразу в Geologica. eh.js — первой строкой <body>: он вставит иконки и знаки и включит окна, меню, подсказки, вкладки, таблицы и сообщения. eh-shell.js собирает шапки, меню ролей и шаблоны страниц, eh-tools.js — поиск, «+ Создать», «Записать клиента» и помощь кабинета. Работает и с локального сервера, и при открытии файла двойным щелчком. Полный список — в API.md.

В стилях страницы — только раскладка и только через токены: var(--s-6) var(--r-lg) var(--ink-2). Новые цвета, размеры шрифта и компоненты заводим в eh.css, а не на странице.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV,SHRP@100..900,0..1,0..100&display=swap"> <link rel="icon" href="../assets/icons/favicon.svg" type="image/svg+xml"> <link rel="icon" href="../assets/icons/favicon.ico" sizes="any"> <link rel="stylesheet" href="../system/eh.css"> <script src="../system/eh.js"></script> <script src="../system/eh-shell.js"></script> <script src="../system/eh-tools.js"></script> ← кабинет и админка <eh-work-shell role="specialist" active="schedule">… el.innerHTML = eh.specialistCard({ name, practice: 'tarot', kind: 'ad', ad }) <svg class="eh-icon"><use href="#i-calendar"/></svg> <button data-eh-open="#move">Перенести</button> <div class="eh-sheet" id="move" data-eh-guard hidden>… ehToast({ tone: 'ok', title: 'Сохранено' }) eh.close('#move', true)