Натальная карта
Характер, сильные стороны и главные темы жизни
Всё, из чего собираются страницы ElevenHouse и всё, что платформа создаёт: цвет, шрифт, знак, компоненты со всеми состояниями, деньги, реклама и документы. Каждый пример здесь живой — на него можно навести, нажать, пройти клавишей Tab и закрыть клавишей Esc.
Понятно, удобно, стильно, свободно. Восемь правил, по которым проверяем каждый экран, прежде чем показать его.
Синяя кнопка — то, ради чего экран существует: «Записаться», «Принять», «Подключиться». Остальное — вторичные и тихие кнопки или ссылки. Если кажется, что главных две, экран делает слишком много.
Выбранное время, чип, пункт меню, идущая консультация. И фирменные знаки: одиннадцатый дом в иллюстрации, розетка проверки, звезда рейтинга, ближайшее окно на циферблате, дуга загрузки кабинета, знак «eh» — золотым только на синем. Пустые экраны и загрузка внутри страниц — без золота, реклама и приоритет — тоже. Текстом золото не бывает: для текста на светлом — золото-чернила.
Цвет помогает, но не объясняет: у каждого статуса точка и слово. Показываем только необычное — «Оплачено» в расписании не пишем, а «Ждёт оплаты» пишем.
Слова из словаря карты страниц, одинаковые для клиента, эксперта и сотрудников. Человека называем по специализации: «Астролог Марина Соколова», «Проверенный таролог». Никакого жаргона: человек не должен переводить интерфейс на свой язык.
Группируем отступами, а не линиями и плашками. Тень — только у того, на что можно нажать; блок без действия лежит плоско. Меньше бейджей, меньше пунктов меню.
Текст не мельче 13 px, основной текст контрастнее 4,5 : 1, контуры полей и кнопок — от 3 : 1. Фокус везде одинаковый — синяя линия с зазором. Окна закрываются по Esc и клику на фон, фокус возвращается на кнопку, которая их открыла. Введённое не теряется без вопроса.
Однокруглая «а» в заголовках и именах рифмуется с логотипом. Скругления, пастели тем, тонкий круг домов. Никаких звёздных полей, свечений, градиентного текста и 3D.
Письма, PDF, чеки, QR-коды, картинки ссылок, видеозаписи — с логотипом и знаком на любом тарифе. Шапку и подвал не убрать. Логотип эксперта — только в блоке автора и не крупнее нашего. Платное — честно: «Реклама» только у рекламы, приоритет по подписке — значок подписки: только знак ElevenHouse «eh», без слова тарифа и без слова «Реклама».
Слоновая кость, белые мягкие поверхности и ночной синий. Контраст текста указан к фону страницы. Цвета состояний не похожи на золото и друг на друга.
Фон страницы, поверхности и линии. Линий три уровня: тихий разделитель, заметный разделитель и контур элемента управления — он единственный, кто обязан быть контрастным.
--bg#F6F0E4 — фон страниц--surface#FFFDF8 — карточки, окна, поля--sunken#EFE7D7 — наведение, счётчики--scrimтёплый коричневый 20 % — фон под окнами остаётся тёплым--line-1#E6DCCB — разделители, контур карточки--line-2#D8CDB8 — шапки таблиц, неактивное--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Только «выбрано» и «сейчас». Плотное золото — единственный выбор (время, дата), светлое — выбранный фильтр и пункт меню, всегда вместе с галочкой или синей рамкой. Контур выбранной карточки и золото для текста — тёмные, чтобы читались.
--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слоновая кость с синим текстомПохожие по светлоте вещи различаются тоном и формой, а не только цветом.
Тема — песочный без рамки и со значком. Выбранный чип — светлое золото, синяя рамка и галочка. Внимание — оранжевый с точкой. «Сейчас» — золотая точка в кольце. Выбранное время — плотное золото и синяя рамка. Практика — цветной круг без слова. «Реклама» — песочная капсула с «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Шаг — 4 px, имя токена — пиксели, делённые на четыре: --s-6 — это 24. Тени подкрашены синим, а не серые.
Внутри элементов — 8–16, между элементами блока — 12–24, между блоками — 32–48, между разделами страницы — 64–96.
--s-1 … --s-30--s-2h = 10Чем крупнее предмет, тем мягче угол. Кнопки и чипы — пилюли, фото экспертов — скруглённый квадрат, клиентов — круг.
Первая — у мелких поднятых элементов, вторая — у карточек, на которые можно нажать, третья — наведение и меню, четвёртая — окна и шторки.
Анимация отвечает на действие человека и показывает, что изменилось. Сама по себе ничего не мигает. Если в системе включено «уменьшить движение», анимации выключаются.
| Токен | Значение | Где |
|---|---|---|
--dur-1 · --dur-2 · --dur-3 | 120 · 200 · 320 мс | наведение · меню и окна · шторки и сообщения |
--z-header … --z-tooltip | 20 · 30 · 40 · 50 · 60 · 70 · 80 | шапка, меню страницы, шторка, окно, меню поверх окна, сообщения (внутри открытого окна — поверх него), подсказка |
--w-content · --gutter | 1280 · 80 на 1440 | контент публичных страниц и поле по краям |
--w-narrow · --w-text | 800 · 640 | оформление записи по шагам · документы и длинный текст |
--w-sidebar | 256 | левое меню кабинета и админки |
--w-sheet · --w-sheet-wide | 480 · 640 | шторка справа · «Записать клиента», запись |
--w-modal-sm · --w-modal · -lg | 440 · 520 · 720 | подтверждение · форма · большое окно |
--h-xs … --h-xl | 32 · 40 · 48 · 56 · 64 | высоты кнопок, полей, чипов, большого поиска |
--h-touch · --h-chip-sm | 44 · 28 | зона нажатия кнопки-иконки, времени, пункта меню · маленькая метка темы |
--w-card | 400 | карточка эксперта в превью «Продвижения» и в письмах |
--w-aside · --logo-h · -lg | 240 · 22 · 26 | колонка подписей и боковая колонка · логотип в меню и в шапке |
--focus · --ring | 2 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 — в меню и навигации. Цвет — от текста вокруг.
Значки практик (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Монограмма 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 — в квадратеЦвет и поле
Аватар 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Если кабинет или админка грузятся дольше 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Форма — пилюля. Подпись говорит, что произойдёт: «Перенести», а не «Ок». Одно действие называется одинаково на всём пути.
Главная — одна на экран. Вторичная — равноправное действие рядом и кнопка внутри нажимаемой карточки. Тихая — «Позже», «Перенести», отказ в окне. Опасная — только в окне подтверждения необратимого. Ссылка — переход внутри текста.
.eh-btn--primary · --secondary · --quiet · --danger · --linkdisabledaria-busy="true"Неактивную кнопку объясняем рядом: «Выберите время, чтобы записаться». Загрузку показываем на самой кнопке — дуга цветом текста и глагол в процессе. Нажмите:
56 — главное действие экрана записи и комнаты консультации, 48 — обычно, 40 — в карточках и фильтрах, 32 — в строках таблиц. Значок слева, только если он помогает узнать действие.
Тихая кнопка в тексте — с модификатором --flush: её слово встаёт ровно по краю колонки.
--lg · (48) · --sm · --xs--block--flushДля повторяющихся действий в шапке и строках: поиск, уведомления, ещё. Всегда с подписью в aria-label и подсказкой при наведении. Точка — «есть новое», рядом в подписи — сколько.
.eh-iconbtn--sm · --md · --raised · --outline.eh-dotaria-pressedПодпись над полем всегда, подсказка — под ним. Ошибка объясняет, что исправить, и не стирает введённое. Фокус — синяя рамка и синяя линия вокруг, как у кнопок.
Для коротких ответов. Плейсхолдер — пример, а не подпись. Необязательное поле помечаем словом, обязательные — не помечаем.
То, что нельзя менять, показываем не полем, а текстом с «Копировать», — чтобы не путать с неактивным.
.eh-field__label · __hint · __error.eh-inputaria-invalid.eh-readonly · __valueДля вопроса эксперту, заметок, причины отмены. Счётчик — только если есть предел.
.eh-textareadata-eh-count[data-eh-counter]Короткий список — системный выбор из списка: он понятен и работает с клавиатуры. Единицы измерения — внутри поля справа.
.eh-select.eh-inputgroup__affixВ кабинете — в шапке, с подсказкой клавиши. На главной — большой, с кнопкой «Найти»: это главное действие страницы.
.eh-search--hero__clearВход без пароля: телефон или почта, затем код. Код можно вставить целиком, курсор сам переходит дальше. Ошибка говорит, что делать и когда можно запросить новый.
Телефон можно вставить в любом виде — «+7 (912)…», «8 912…». Исправление в середине номера не сбивает курсор.
.eh-code · __cell.is-error · .is-doneeh:completedata-eh-phoneОтмеченное — золотом с синей рамкой. Состояние меняется формой (галочка, точка, положение ручки), а не только цветом — проверяем в оттенках серого.
Флажок — независимые «да / нет» и согласия. Радио — один вариант из двух–пяти, видимых сразу. Подпись нажимается вместе с полем.
.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Фильтры в каталоге и списках. Темы — один выбор, остальные можно сочетать. Выбранный — светлое золото, синяя рамка и галочка. Чип со стрелкой открывает меню, чип с крестиком — применённый фильтр.
button.eh-chip aria-pressed--topic · --select · --sm__dot · __removedata-eh-singleТема — один выбор
Состояния
С чем приходит клиент. Не нажимаются в карточках, ведут на страницу темы в меню «Темы». Маленькие — в карточках и списках.
.eh-topic--sm.eh-t-love · career · purpose · move · year · kidsТочка и слово. Один список статусов для всех ролей — клиент, эксперт и сотрудники видят одинаковые слова.
Успех — всё в порядке. Внимание — нужно действие или ждём решения со сроком. Ошибка — сорвалось или запрещено. Сведения — идёт процесс, делать ничего не нужно. Нейтральный — архив и прошлое. Сейчас — только идущая консультация.
.eh-badge--ok · --warn · --err · --info · --neutral · --now--lgСлова из словаря 5.7, одно слово — одно понятие. В списках статус пишем, только если он необычный: подтверждённую консультацию в расписании не помечаем.
Деньги эксперта не «выплачиваются», а выводятся им самим: «Доступно к выводу», «Выведено». Деньги под рекламу — «Отложено на кампании», не «резерв»: резерв — деньги клиента.
Розетка из двенадцати лучей и специализация: «Проверенный астролог», «Проверенный таролог» — не «Проверенный эксперт». На странице — по основной специализации, в каталоге с выбранной в «Кто нужен» — по ней. Метка нажимается и открывает шторку «Что мы проверили». Без заливки и рамки — доверие не кричит.
.eh-verified--lg.eh-rosette + #i-verifiedeh.practicePerson(id, true)Только у Расписания (заявки ждут ответа) и Сообщений (непрочитанные), и во вкладках. Других значков в меню нет.
.eh-count--strong · --smЧеловека называем одним словом по специализации — «Проверенный таролог». Остальные его практики не перечисляем, а показываем узнаваемыми бейджами.
Круг с цветом и значком практики: планета с кольцом — астрология, две карты — таро, квадрат Пифагора — нумерология, звезда матрицы, бодиграф, галька с руной. Значок — две трети круга. Значки практик живут только в бейдже, отдельно их не ставим.
Название — в подсказке и для экранного диктора: «Таро, проверено 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.practices20 — таблицы админки, 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
40Считает платформа. Пока отзывов меньше пяти, вместо цифры пишем «Новый на ElevenHouse» — с искрой, а не ростком: росток — знак темы «Дети». Звёзды целиком — только в отзыве и на странице эксперта.
.eh-rating__count · --lg · --new.eh-stars.eh-icon--starБелая мягкая поверхность на слоновой кости. Тень — только у карточки, на которую можно нажать; её кнопка — вторичная.
Показатель — плоский блок сведений: подпись, число, изменение, подвал. Карточка услуги — с тенью, если её можно выбрать: вся карточка ведёт по ссылке, кнопки внутри работают отдельно. Выбранная — золотой контур и «Выбрана». Остальные блоки собираем из общей .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Характер, сильные стороны и главные темы жизни
Где вы сходитесь и где спотыкаетесь
Каталог, главная, «Похожие эксперты», превью в «Продвижении». Вся карточка ведёт на страницу эксперта, «Выбрать время» — сразу к окнам, сердце добавляет в избранное без перехода. Циферблат — время ближайшего окна золотой точкой.
Три вида, у карточки один платный вид. Обычная. Приоритет по подписке — значок подписки на нижнем крае фото: только знак 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Четыре вида меток и значок подписки, у каждого свой вид и своё место — чтобы реклама не выглядела как заслуга, заслуга — как реклама, а подписка — ни как то, ни как другое. Внутри карточки — не больше трёх меток; значок подписки сидит на фото и в счёт не входит.
Реклама — песочная капсула на верхней рамке, только у карточки из рекламного кабинета; при наведении и фокусе — подсказка «Рекламное место: показ оплатил рекламодатель. Нажмите — покажем, кто он» (ставит страница), нажатие открывает сведения о рекламодателе. Проверка — розетка и слово «Проверенный …» по специализации. Факт — заслуженное платформой: значок и слова цветом вторичного текста. Условие — отметка эксперта у ближайшего окна, нажимается и показывает точное условие.
Значок подписки — только знак 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Реклама
Реклама
Вы видите эту рекламу, потому что выбрали: астролог, тема «Отношения»
Подписка — значок, не метка
Проверка
Факт — один на карточке
Условие — ровно три названия
В карточке — значком у окна
Зона нажатия — 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)Сравним карты двоих: где вы опора друг другу, где трение.
6 500 ₽
ВыбранаОдин вопрос — ответ текстом или голосом.
1 900 ₽
Синастрия: совместимость пары · 6 500 ₽
Бесплатная отмена — до 72 ч до началаУ этих окон срок уже прошёл: бесплатно — только час после подтверждения
Возврат гарантирует ElevenHouse
Оплата — после подтверждения
4,9
212 отзывов за 1,5 года
На карточке условие — один значок без слова; смысл — в подсказке при наведении и фокусе (на телефоне — по нажатию) и в подписи для экранного диктора. «Бесплатная отмена и перенос» — оба значка в одной кнопке.
Не используем (решение владельца 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Эксперт ElevenHouse проверяет документы и опыт. Без проверки в каталог не попасть.
Деньги списываем, только когда эксперт подтвердит запись.
За 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=love | G2-catalog.html с теми же фильтрами |
/marina-sokolova?service=natal#slots | G4-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#cancel | G10-how.html; из оформления G5 — ещё ?from=booking |
/verification#verify|#sort|#ads | G11-verification.html?from=… — откуда пришли («← назад» и кнопка в конце) |
/help/clients/no-show · /help/report?erid=… · /help/contact | G12-help.html?a=… · ?topic=report&erid=… · ?topic=contact |
/legal/cancellation#changes · /legal/company | G13-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Марина Соколова
Держим время за вами ещё 9:59
Итого4 500 ₽
Спишем после подтверждения
Оплата — после подтверждения
Ссылка истекла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
Аккаунт клиента — заявка, чат с Мариной и чек будут в нём
Карта или СБП
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 + …Заявка отправлена
Марина подтверждает заявку
Не успеет или откажется — резерв снимется сам.
Консультация · 60 минут
Та же шкала шире 600 px — горизонтально (G6 «Если планы изменятся», G14 «Деньги и отмена»).
«Условия на момент покупки» у главной кнопки оформления: значок, название, стрелка; внутри — пояснение и список значений.
details.eh-disclosure > summary(.eh-icon + текст + .eh-icon) + p + .eh-dlСохраним вместе с заявкой: если Марина потом изменит условия, ваша запись пойдёт по этим.
Только для макетов, как полоса «Демо»: адрес продукта остаётся в ссылке, нарисованная страница открывается своим файлом. Вошедший клиент остаётся клиентом (role=client — все страницы этапа 2 понимают и account=, user=). «Записаться» на G4 и G14 открывает G5 с выбранными услугой, временем, способом оплаты, добавкой и тарифом; «← Назад к эксперту» возвращает выбор.
ehShell.mock.href(href, { from }) · .go(href, { from })| Адрес продукта | Файл макета |
|---|---|
/practices/tarot · /practices/astrology | G20-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=urgent | G5-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 проверенный тарологЛичность, опыт и пробная консультация. Как мы проверяем
Марина не пугала и не обещала чудес — по делу.
Спасибо, Юлия! Рада, что разговор помог.
Общее у входа 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 — пояснение полосы «Демо» своей строкойЕсли эксперт отменил поздно или не пришёл:
| Когда отменяете | Вернём |
|---|---|
| Больше чем за 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 — Марина получит их после консультации.
Марина, здравствуйте! Можно добавить в синастрию вопрос про переезд в Казань?
Да, добавим вопрос про Казань. Если знаете время рождения мужа — пришлите.
Как подготовиться к синастрии.pdfПять кнопок или ссылок «Оценить на 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 — слово под звёздамиХорошо
Выбор дня на две недели — на странице эксперта 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Золото на экране одно. Когда «сейчас» уже отмечено золотом (точка шкалы условий, панель «Скоро»), текущий шаг этапов и пути денег — тёмным кольцом без заливки. Панель «Скоро / Идёт сейчас» K3 — рамка с золотой кромкой и ореол, бейдж в шапке тогда нейтральный.
.eh-steps.eh-steps--quiet.eh-card.eh-card--nowИмя-ссылка — цвет текста, подчёркивание только при наведении (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() — колокольчик «обычного дня»Скидка на следующую запись — одни слова на 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| Заказ | Клиент | Эксперт | Услуга и время | Статус | Действия | ||
|---|---|---|---|---|---|---|---|
| 10482 | Алиса Вегаастролог | Синастрияпт 23 октября, 14:30 | 6 500 ₽ | Зарезервировано | |||
| 10479 | Елена Вишняковаастролог | Прогноз на годср 21 октября, 16:00 | 6 000 ₽ | Удержано до консультации | |||
| 10468 | НКНаталья Корниловаиз каталогаАнна Ремизова · астрологНатальная карта, пн 19 октября |
Анна Ремизоваастролог | Натальная картапн 19 октября, 11:00 | 5 500 ₽ | Удержано до решения | ||
| 10431 | Марина Соколоваастролог | Натальная картачт 8 октября, 13:30 | 4 500 ₽ | Доступно к выводу | |||
| 10470 | ОВОлег Васильевиз каталогаДарья Климова · тарологВопрос в чате, до 20 октября |
Дарья Климоватаролог | Вопрос в чатеответ до 20 октября | 1 900 ₽ | Возвращено |
Закрываются крестиком, клавишей 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Во всю ширину над страницей
Пустой экран — приглашение к действию, а не тупик. Тонкая линия знака без золота, одна фраза о том, что здесь будет, и одна кнопка. Не загрузился один блок — остальное работает.
В строку — внутри блока или списка. Блоком — на месте пустого раздела. Страницей — служебные страницы 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Полоса прогресса — когда важна доля, а не названия шагов.
Вместо постраничной навигации — сколько показано и кнопка. Разделитель — только если отступа мало: между группами в меню, «или» между способами входа.
.eh-more · __count.eh-divider--strong · --label · --tight · --verticalКрупные кнопки дней и времени. Под днём — сколько окон. Выбранное — плотное золото и синяя рамка, занятое время зачёркнуто, а не спрятано.
Страница эксперта, оформление записи, перенос, «Записать клиента». Время всегда в поясе того, кто смотрит, с подписью. Нажмите на среду — увидите день без окон.
.eh-datepick · __head · __month · __nav.eh-dates · .eh-date__wd · __d · __n · .is-empty.eh-times · .eh-timedisabled = занято · .is-conflict.eh-nowin · .eh-tzУтро
День
Вечер
В среду, 21 октября, окон нетБлижайшее окно — пт 23 октября, 10:00
Время ваше — Екатеринбург, UTC+5
Пересечение с другой записью показываем у эксперта в «Записать клиента»: так записать нельзя, поэтому кнопка неактивна, подписана словом «занято», а под сеткой — с какой записью пересекается.
.eh-time.is-conflict aria-disabledsmall.eh-times__note15: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
Перенести можно 2 раза — до чт 22 октября, 14:30, сразу и без вопросов
Если Марина отменит позже чем за сутки или не придёт — вернём всё и дадим скидку на следующую запись. Если отменит раньше — вернём всё.
Условия отмены задала Марина, возврат гарантирует ElevenHouse.
Эксперт · та же запись
Если не придёте — неустойка 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 ₽
18 600 ₽
5 170 ₽
Везде, где эксперт видит деньги клиента: «Записать клиента», запись, операция, услуга. Строкой: клиент заплатит → комиссия со ставкой и причиной → вам. Причина ставки нажимается и объясняет, откуда она. Льгота — обычная ставка зачёркнута цветом текста, без золота.
.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 ₽
Блоком — карточка записи
Откроется к выводу 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«Записать клиента». Клиент с платформы платит только через ElevenHouse — по ссылке на оплату. Своего клиента можно записать по ссылке, с оплатой вне платформы или без оплаты: две последних — отметки для учёта, без комиссии, гарантий и отзыва. Строка происхождения — в выбранном клиенте: «Пришла через ElevenHouse» со знаком или «Ваш клиент».
.eh-options · .eh-option--row · .eh-option-wrap.eh-chosen · __main · __sub.eh-origin#i-pay-link · pay-off · pay-none

Ирина пришла через ElevenHouse — оплата только через платформу. Вне платформы и без оплаты записывают только своих клиентов.
«Продвижение» в «Моей странице». Эксперт задаёт бюджет на день или на весь срок, деньги откладываются из рекламного баланса, показы продаются аукционом за 1000 показов. На карточке — пометка «Реклама».
Бюджет — в день или на весь срок, от 300 ₽ в день. Сразу видно, сколько отложим из рекламного баланса и чего ждать. Прогноз — всегда диапазоном и с пометкой «прогноз», а не обещанием.
.eh-seg · .eh-inputgroup.eh-forecast · __label · __value · __noteОтложим 14 000 ₽ из рекламного баланса. Не потратим — вернём на баланс.
Показы за срокпрогноз
31–39 тысяч
Переходы на страницу
470–720
Записи
9–18
По похожим кампаниям астрологов за сентябрь. Это не обещание: на результат влияют окна, цены и отзывы.
Сколько эксперт готов заплатить за 1000 показов. Под полем — где рынок сейчас. Оптимизация может сама держать ставку в пределах — тогда поле показывает верхнюю границу.
.eh-bid · __market.eh-inputgroup__affixЧаще выигрывают от 280 ₽В среднем 340 ₽
Израсходовано, отложено и свободно — одной полосой, между частями зазор. Показатели — словами по-русски: показы, переходы, записи, цена записи. CPM и CTR — только в подсказке рядом.
.eh-budget · __bar · __part --spent · --held · --free__legend · __key.eh-stat8 260 ₽
24 180
412
9
918 ₽
Один ряд — один цвет из синей шкалы, одна ось, тихая сетка. Наведение и фокус показывают день и значение, у каждого графика есть вид таблицей. Прогноз — светлыми столбцами и подписан в легенде.
.eh-chart · __head · __title · __total · __plot__grid · __axis · __bar .is-forecast · __hit__line · __area · __dot__table8 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Базовая ставка тарифа
Перед публикацией: ввести пример — тариф, откуда клиент, практику и цену — и увидеть, какое правило сработает и сколько получит эксперт сейчас и после изменения.
.eh-check · __fields · __result__rules · __rule .is-hit__cols · __colИзменения копятся черновиком. Публикация — в диалоге: с какой даты, кого затронет и что получат эксперты. Комиссию поднимаем не раньше чем через 45 дней после письма.
.eh-affect · __nums · __num.eh-modalПисьма, PDF, чеки и отчёты, QR-коды, картинки ссылок, видеозаписи, заставка приложения — всё с айдентикой ElevenHouse на любом тарифе. Шапку и подвал не убрать. Логотип эксперта — только в блоке автора и не крупнее нашего.
Отправитель — «ElevenHouse», аватар — знак на синем (BIMI). Тема — что случилось, прехедер — главное число или время. Сами письма и их тёмная тема — в витрине писем.
.eh-mailrow · __body · __from · __line · __subj · __time · __pre.is-unread · aria-currentassets/icons/bimi-eh.svgpages/email.htmlРазбор, расклад, итоги встречи, отчёт кампании. Обложка — с основным логотипом в две строки. На каждой странице внизу — знак «eh» и номер. Блок автора — фото, имя, специализация и акцент из пастели темы; на Team Pro и Studio вместо фото может стоять логотип эксперта.
.eh-pdf · --cover__logo · __kicker · __title · __h · __text · __lines__author · __author-logo · --pdf-accent__footГотовый разбор
Прогноз на год для Ирины Мироновой
Ноябрь 2026 — октябрь 2027
Главные периоды года
С середины января Юпитер проходит по вашему десятому дому: время предложений по работе и смены ролей.
Отношения
Акт № Р-2026-104731 октября 2026
Услуги по показу рекламы в каталоге ElevenHouse за октябрь 2026. Заказчик — ИП Соколова Марина Андреевна, ИНН 772814503916.
| Кампания и erid | Показы | Сумма |
|---|---|---|
| «Первые клиенты» · erid 2VtzqvR8kWq | 24 180 | 8 260,00 ₽ |
| «Синастрия к Новому году» · erid 2VtzqvS3pLm | 6 420 | 2 180,00 ₽ |
Итого10 440,00 ₽
ООО «Финекст», ИНН 7721478773 · Документ сформирован автоматически, подпись не требуется
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
Марина Соколова
Астролог · отношения и предназначение

Как подключить систему к странице. Имена классов каждого компонента — под ссылкой «Код» в его блоке.
Шрифт, значок вкладки и стили — ссылками в <head>: так первый кадр сразу в Geologica. eh.js — первой строкой <body>: он вставит иконки и знаки и включит окна, меню, подсказки, вкладки, таблицы и сообщения. eh-shell.js собирает шапки, меню ролей и шаблоны страниц, eh-tools.js — поиск, «+ Создать», «Записать клиента» и помощь кабинета. Работает и с локального сервера, и при открытии файла двойным щелчком. Полный список — в API.md.
В стилях страницы — только раскладка и только через токены: var(--s-6) var(--r-lg) var(--ink-2). Новые цвета, размеры шрифта и компоненты заводим в eh.css, а не на странице.
Марина Соколова, проверена в октябре 2026
Проверку проходят заново раз в год. Если что-то изменится, метка исчезнет со страницы.
Синастрия для пары, Ирина Миронова. Сейчас — пт 23 октября, 14:30
Новый день
Время
В воскресенье, 25 октября, окон нетБлижайшее после него — пн 26 октября, 11:00
Время ваше — Екатеринбург, UTC+5. У Ирины — на 2 часа раньше.
сб 24 октября, 12:00Запрос уйдёт в чат и на почту
Полная форма — в «Инструментах» кабинета (eh-tools.js)
Клиент

Пт 23 октября
15:00 пересекается с записью: Ирина Миронова, синастрия, 14:30–16:00.
Оплата
пт 23 октября, 16:306 500 ₽ · по ссылке
Кого затронет
Своих клиентов изменение не касается. Экспертам уйдёт письмо и плашка в «Деньгах».