149f31d25d
- 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.
85 lines
4.3 KiB
XML
85 lines
4.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240" height="240" role="img" aria-label="Отзыв со звёздами">
|
||
<defs>
|
||
<linearGradient id="revBg" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#FF8A5C"/>
|
||
<stop offset="100%" stop-color="#FF6B35"/>
|
||
</linearGradient>
|
||
<linearGradient id="starFill" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FFE9D6"/>
|
||
<stop offset="100%" stop-color="#FFCB9C"/>
|
||
</linearGradient>
|
||
<linearGradient id="starFillOrange" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FFFFFF"/>
|
||
<stop offset="100%" stop-color="#FFF1E6"/>
|
||
</linearGradient>
|
||
<linearGradient id="cardSheen" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.18"/>
|
||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- Внешний круг -->
|
||
<circle cx="120" cy="120" r="112" fill="url(#revBg)"/>
|
||
<circle cx="120" cy="120" r="112" fill="url(#cardSheen)"/>
|
||
|
||
<!-- Декор — точки -->
|
||
<circle cx="44" cy="56" r="4" fill="#FFFFFF" opacity="0.45"/>
|
||
<circle cx="198" cy="58" r="3" fill="#FFFFFF" opacity="0.55"/>
|
||
<circle cx="36" cy="186" r="3" fill="#FFFFFF" opacity="0.5"/>
|
||
<circle cx="204" cy="184" r="4" fill="#FFFFFF" opacity="0.4"/>
|
||
<circle cx="32" cy="120" r="2.5" fill="#FFFFFF" opacity="0.5"/>
|
||
<circle cx="210" cy="120" r="2.5" fill="#FFFFFF" opacity="0.5"/>
|
||
|
||
<!-- Звёзды (центральная композиция) -->
|
||
<!-- Звезда — пятиконечная, выровненная по центру -->
|
||
<g transform="translate(120 102)">
|
||
<!-- Большая звезда по центру -->
|
||
<g transform="translate(0 -38) scale(1.45)">
|
||
<path d="M0 -16 L 4.7 -4.9 L 16.8 -3.1 L 7.6 4.7 L 10.4 16.6 L 0 10.4 L -10.4 16.6 L -7.6 4.7 L -16.8 -3.1 L -4.7 -4.9 Z"
|
||
fill="url(#starFill)" stroke="#1C1C1E" stroke-width="2.2" stroke-linejoin="round"/>
|
||
</g>
|
||
<!-- Левая -->
|
||
<g transform="translate(-44 -30) scale(1.1)">
|
||
<path d="M0 -16 L 4.7 -4.9 L 16.8 -3.1 L 7.6 4.7 L 10.4 16.6 L 0 10.4 L -10.4 16.6 L -7.6 4.7 L -16.8 -3.1 L -4.7 -4.9 Z"
|
||
fill="url(#starFill)" stroke="#1C1C1E" stroke-width="2" stroke-linejoin="round"/>
|
||
</g>
|
||
<!-- Правая -->
|
||
<g transform="translate(44 -30) scale(1.1)">
|
||
<path d="M0 -16 L 4.7 -4.9 L 16.8 -3.1 L 7.6 4.7 L 10.4 16.6 L 0 10.4 L -10.4 16.6 L -7.6 4.7 L -16.8 -3.1 L -4.7 -4.9 Z"
|
||
fill="url(#starFill)" stroke="#1C1C1E" stroke-width="2" stroke-linejoin="round"/>
|
||
</g>
|
||
<!-- Левая нижняя -->
|
||
<g transform="translate(-22 4) scale(0.95)">
|
||
<path d="M0 -16 L 4.7 -4.9 L 16.8 -3.1 L 7.6 4.7 L 10.4 16.6 L 0 10.4 L -10.4 16.6 L -7.6 4.7 L -16.8 -3.1 L -4.7 -4.9 Z"
|
||
fill="url(#starFill)" stroke="#1C1C1E" stroke-width="2" stroke-linejoin="round"/>
|
||
</g>
|
||
<!-- Правая нижняя -->
|
||
<g transform="translate(22 4) scale(0.95)">
|
||
<path d="M0 -16 L 4.7 -4.9 L 16.8 -3.1 L 7.6 4.7 L 10.4 16.6 L 0 10.4 L -10.4 16.6 L -7.6 4.7 L -16.8 -3.1 L -4.7 -4.9 Z"
|
||
fill="url(#starFill)" stroke="#1C1C1E" stroke-width="2" stroke-linejoin="round"/>
|
||
</g>
|
||
</g>
|
||
|
||
<!-- Карточка отзыва внизу -->
|
||
<g transform="translate(40 140)">
|
||
<!-- Тень -->
|
||
<rect x="2" y="3" width="160" height="62" rx="14" fill="#000" opacity="0.18"/>
|
||
<!-- Тело карточки -->
|
||
<rect x="0" y="0" width="160" height="62" rx="14" fill="#FFFFFF"/>
|
||
<!-- Аватар -->
|
||
<circle cx="18" cy="20" r="12" fill="#FF6B35"/>
|
||
<circle cx="18" cy="17" r="4" fill="#FFFFFF"/>
|
||
<path d="M10 28 Q 18 22 26 28 L 26 32 L 10 32 Z" fill="#FFFFFF"/>
|
||
<!-- Имя -->
|
||
<rect x="36" y="13" width="68" height="6" rx="3" fill="#1C1C1E" opacity="0.85"/>
|
||
<!-- Строки отзыва -->
|
||
<rect x="12" y="42" width="136" height="5" rx="2.5" fill="#1C1C1E" opacity="0.35"/>
|
||
<rect x="12" y="51" width="96" height="5" rx="2.5" fill="#1C1C1E" opacity="0.35"/>
|
||
<!-- Маленькая звёздочка справа сверху -->
|
||
<g transform="translate(140 12) scale(0.45)">
|
||
<path d="M0 -16 L 4.7 -4.9 L 16.8 -3.1 L 7.6 4.7 L 10.4 16.6 L 0 10.4 L -10.4 16.6 L -7.6 4.7 L -16.8 -3.1 L -4.7 -4.9 Z"
|
||
fill="#FF6B35"/>
|
||
</g>
|
||
</g>
|
||
</svg>
|