ДИЗАЙН-СИСТЕМА в app.css:
- --primary #FF6B35, --success #3dd68c, --danger #ff5c5c
- --bg #0f0f12, --bg-elev #1a1a22, --bg-input #121218
- Компоненты: .card-b, .row-b, .field-b, .btn-b, .switch-b, .chip, .avatar-b, .bubble-b, .composer-b, .toast-b, .stars-b, .pulse-b, .empty-b
ПЕРЕПИСАНЫ на единый стиль:
Settings:
- Карточка с аватаром пользователя
- Card-row для юр.документов (📄 / 🔒 / ⚠️)
- 'Выйти' — danger btn-b с state machine (idle→load→ok)
Profile:
- Карточка аватара + кнопка 'Загрузить фото' через multipart /api/v1/me/photo
- Поля: field-b (ctrl + hint)
- Чипы в chip-list, новый стиль с .on
- Счётчик bio символов
- 'Сохранить' со state machine + toast
Review (создание):
- Звёзды в stars-b с center hint
- textarea с counter
- switch-b 'Анонимно' (вместо checkbox)
- Submit со state machine + toast 'Спасибо за отзыв!'
UserReviews:
- Средний рейтинг + звёзды
- Список карточек с отзывами
Chats:
- Список с avatar-b + last message + время + badge непрочитанных
- Пустое состояние с эмодзи
- formatChatTime() — 'сейчас' / '5м' / '3ч' / '2д'
Chat (один):
- Header с аватаром и кнопками 👤⭐
- composer-b: 📎 + input + ➤ (sticky bottom)
- bubble-b .in / .out с .ticks.read
- Send со state + toast
- sendPhoto() для фоток в чате
App.js _toast(msg, kind):
- Единый toast-b с классами ok / err
Всё в одном стиле. CSS variables, padding 16, radius 14, no disabled кнопок.
НОВЫЙ UX (от Grok):
- Один экран — табы Вход / Регистрация (мгновенное переключение)
- Все поля видны, кнопка всегда кликабельна
- Валидация в реальном времени: под каждым полем ✓/✗ с пояснением
- Состояния кнопки: idle / load ('⏳ Создаём...') / ok ('✓ Готово!') / err ('⚠️ ...')
- Toast 'Добро пожаловать, [имя]!' после успеха
- При ошибке: подсветка проблемного поля + фокус на нём
- Email живая валидация (regex), пароль ≥6 (как требует Grok / API: ≥8 → я ставлю 8 для совместимости с бэком)
- Пароль 2 — только в режиме Регистрация
- Переключение режима сбрасывает валидацию, фокус на первое пустое поле
CSS новые классы: .btn.ok, .btn.load, .btn.err, input.bad, input.good, .hint.ok/err/mute
Технически:
- showEmailLogin() рисует сразу табы + форму
- _initAuthForm() биндит всё
- _submitAuth(mode) делает реальный запрос
- showEmailRegister() → переключает таб на 'Регистрация'
- New OnboardingView module (public/js/views/onboarding.js):
• Reads /onboarding/slides.json (designer schema with inline SVG icons,
per-slide cta_primary/cta_skip labels) — falls back to 3 emoji slides
if the JSON is unavailable.
• Renders a Telegram-style dark overlay inside #mobile-frame with a
220px floating SVG icon, title, body, dot indicator (expandable
active dot), primary CTA, and a ghost Skip button.
• Prev/Next via primary CTA; dot click jumps to slide; arrow keys and
horizontal swipe also navigate.
• Haptic feedback via TG_APP on slide change + finish.
• markDone() writes buhapp.onboarded='1' to localStorage so the flow
never repeats. isDone()/reset() exposed for QA.
- App integration (public/js/app.js):
• New App.maybeOnboard() helper — awaited after every successful auth
path: Telegram login, restored session, email login, email register,
and consent accept. Skips silently if already onboarded.
- UI assets (public/onboarding/):
• slides.json with 3 designer slides (Map / Chat / Review).
• Inline-SVG icons for map, chat, and review (icon-*.svg kept for
designer reference, preview.html too).
- Styles (public/css/app.css): new .onboarding-* dark-theme rules.
- Index (public/index.html): loads onboarding.js before app.js.
