+ {/* Бейджи */}
+ {isPopular && !badgeImg && (
+ 
+ )}
+ {/* Звездочка теперь отображается через псевдоэлемент в родительском контейнере */}
+ {discountPercent > 0 && (
+
+ );
+});
+
+export default OfferWallCard;
diff --git a/src/components/shared/OnboardingLayout.module.css b/src/components/shared/OnboardingLayout.module.css
index e51650b..ee05a68 100644
--- a/src/components/shared/OnboardingLayout.module.css
+++ b/src/components/shared/OnboardingLayout.module.css
@@ -1,29 +1,27 @@
.container {
min-height: 100vh;
- height: 100vh; /* Фиксированная высота */
- overflow: hidden; /* Предотвращает скроллинг */
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: flex-start;
align-items: center;
padding: var(--spacing-medium);
- background-color: var(--color-background);
+ padding-top: var(--spacing-medium);
+ padding-bottom: 0; /* Убираем отступ снизу */
+ background-color: #ffffff; /* Возвращаем белый цвет фону */
color: var(--color-text);
}
.content {
max-width: 28rem;
width: 100%;
- max-height: 90vh; /* Ограничение высоты */
- overflow: auto; /* Если контент всё же не помещается, добавляем скролл только внутри контейнера */
- background-color: var(--color-surface);
- border-radius: var(--border-radius);
- padding: var(--spacing-large) var(--spacing-medium);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ background-color: transparent;
+ padding: calc(var(--spacing-large) / 2) var(--spacing-medium) 0; /* Убираем отступ снизу */
color: var(--color-text);
display: flex;
flex-direction: column;
animation: fadeIn 0.3s ease-in-out;
+ overflow-y: auto; /* Добавляем возможность скроллинга */
+ max-height: 100vh; /* Ограничиваем высоту, чтобы появился скроллинг */
}
@keyframes fadeIn {
@@ -34,9 +32,14 @@
.title {
font-size: 24px;
font-weight: 700;
- margin-bottom: var(--spacing-medium);
+ margin-bottom: var(--spacing-small);
color: var(--color-text);
text-align: center;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ background-color: #ffffff; /* Добавляем белый фон, чтобы текст не сливался с контентом при скроллинге */
+ padding-top: var(--spacing-small);
}
.description {
diff --git a/src/components/shared/OnboardingLayout.tsx b/src/components/shared/OnboardingLayout.tsx
index b807e26..5a5256b 100644
--- a/src/components/shared/OnboardingLayout.tsx
+++ b/src/components/shared/OnboardingLayout.tsx
@@ -13,6 +13,8 @@ interface OnboardingLayoutProps {
secondaryButtonText?: string;
onPrimaryClick: () => void;
onSecondaryClick?: () => void;
+ showProgressDots?: boolean;
+ showButtons?: boolean;
}
const OnboardingLayout: React.FCПопулярный выбор
+ )}
+ {isBestValue && !badgeImg && (
+ Максимальная выгода
+ )}
+ {badgeImg && (
+ -{discountPercent}%
+ )}
+
+
+ {/* Заголовок с переносом второго слова на новую строку */}
+
+
+ {/* Белая отсекающая полоска под названием */}
+
+
+ {/* Информация о токенах и стикерах */}
+
+
+
+ {title.split(' ').length > 1 ? (
+ <>
+ {title.split(' ')[0]}
+ {title.split(' ').slice(1).join(' ')}
+
+ ) : (
+ title
+ )}
+
+ {props.bestValueLabel && (
+ Максимальная выгода
+ )}
+
+ {/* Белая отсекающая полоска под названием */}
+
+
+ {/* Информация о токенах и стикерах */}
+ + {title.split(' ').slice(1).join(' ')} + + ) : ( + title + )} +
+
+
+ {/* Фото (если есть) */}
+ {image && (
+
+ •
+ {stickersCount} стикеров
+
+
+ •
+
+ {bonusTokens > 0 && (
+
+ {tokens}
+ 
+
+
+ •
+ {bonusTokens} бонусов
+
+ )}
+
+ 
+
+ )}
+
+ {/* Цена и кнопка */}
+
+
+
+ {discountPercent > 0 && showRub ? (
+ <>
+
+ {originalPriceRub} ₽
+
+
+ {priceRub} ₽
+
+
+ ) : discountPercent > 0 && !showRub ? (
+ <>
+
+ {originalPrice} ⭐
+
+
+ {price} ⭐
+
+
+ ) : (
+
+ {showRub ? priceRub : price}
+
+ {showRub ? '₽' : '⭐'}
+
+
+ )}
+
+
+
@@ -48,25 +52,29 @@ const OnboardingLayout: React.FC = ({
)}
-
-
-
- {secondaryButtonText && onSecondaryClick && (
+ {showButtons && (
+
+ )}
);
diff --git a/src/components/tokens/TokenPacksModal.module.css b/src/components/tokens/TokenPacksModal.module.css
index 93181d5..98fecd7 100644
--- a/src/components/tokens/TokenPacksModal.module.css
+++ b/src/components/tokens/TokenPacksModal.module.css
@@ -39,6 +39,53 @@
text-align: center;
}
+/* Переключатель цен */
+.priceToggle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f0f0;
+ border-radius: 24px;
+ padding: 4px;
+ margin: 12px auto 16px;
+ max-width: 260px;
+ width: 100%;
+ border: 2px solid #4CAF50; /* Зеленая обводка */
+}
+
+.toggleButton {
+ flex: 1;
+ padding: 8px 12px;
+ border: none;
+ background: transparent;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #666;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+
+.toggleButton.active {
+ background-color: #4CAF50;
+ color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.rubSymbol {
+ color: #FFC107;
+ font-weight: 700;
+}
+
+.tokenSymbol {
+ color: #FFC107;
+ font-weight: 700;
+}
+
.subtitle {
margin: 0 0 16px 0;
font-size: 14px;
@@ -46,21 +93,18 @@
color: var(--color-text-secondary);
}
-.horizontalScroll {
+/* Контейнер для одной карточки */
+.singleOfferContainer {
display: flex;
- overflow-x: auto;
+ justify-content: center;
+ width: 100%;
padding: 8px 0;
- -webkit-overflow-scrolling: touch;
- scroll-snap-type: x mandatory;
- gap: 16px;
- margin: 0 -8px;
- padding: 8px;
+ margin: 0 auto;
}
-.horizontalScroll > * {
- flex-shrink: 0;
- width: 280px;
- scroll-snap-align: start;
+.singleOfferContainer > div {
+ width: 100%;
+ max-width: 320px;
}
.showAllButton {
@@ -103,21 +147,14 @@
background-color: rgba(0, 0, 0, 0.05);
}
-/* Стилизация скроллбара */
-.horizontalScroll::-webkit-scrollbar {
- height: 6px;
-}
-
-.horizontalScroll::-webkit-scrollbar-track {
- background: var(--color-surface-variant);
- border-radius: 3px;
-}
-
-.horizontalScroll::-webkit-scrollbar-thumb {
- background: var(--color-primary);
- border-radius: 3px;
-}
-
-.horizontalScroll::-webkit-scrollbar-thumb:hover {
- background: var(--color-primary-dark);
+/* Адаптивность */
+@media (max-width: 600px) {
+ .priceToggle {
+ max-width: 220px;
+ }
+
+ .toggleButton {
+ font-size: 12px;
+ padding: 6px 8px;
+ }
}
diff --git a/src/components/tokens/TokenPacksModal.tsx b/src/components/tokens/TokenPacksModal.tsx
index 5def6db..cab4bbd 100644
--- a/src/components/tokens/TokenPacksModal.tsx
+++ b/src/components/tokens/TokenPacksModal.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
import { tokenPacks, TokenPack } from '../../constants/tokenPacks';
import styles from './TokenPacksModal.module.css';
-import TokenPacksList from './TokenPacksList';
import { getTranslation } from '../../constants/translations';
+import OfferWallCard from '../offerwall/OfferWallCard';
interface TokenPacksModalProps {
isVisible: boolean;
onClose: () => void;
onShowAllPacks: () => void;
missingTokens: number;
- onBuyPack: (packId: string) => void;
+ onBuyPack: (packId: string, showRub: boolean) => void;
}
const TokenPacksModal: React.FC
- )}
-
+
+ {secondaryButtonText && onSecondaryClick && (
+
+ )}
+ e.stopPropagation()}>
-
+
+ {getTranslation('token_modal_title')}
+Докупить токенов
-
+
+
+
-
+
+
+
+
+
+ {/* Левая колонка */}
+ handleBuyPack(tokenPacks[3].id)}
+ />
+
+ {/* Бог стикеров (шестая карточка, на всю ширину) */}
+ handleBuyPack(tokenPacks[4].id)}
+ />
+
{/* Модальное окно успешной оплаты */}
+ {/* Стартовый набор (первая карточка) */}
+ handleBuyPack(tokenPacks[0].id)}
+ />
+
+ {/* Стикерный запас (третья карточка) */}
+
+
+ {/* Правая колонка */}
+
+ handleBuyPack(tokenPacks[2].id)}
+ />
+
+
+ {/* Стикерный энтузиаст (вторая карточка) */}
+ handleBuyPack(tokenPacks[1].id)}
+ />
+
+ {/* Зеленая карточка с изображением (четвертая карточка) */}
+
+
+ {/* Стикерный магнат (пятая карточка, на всю ширину) */}
+
+ 
+
+
+ Загрузка стикера...
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default StickerEditorScreen;
diff --git a/src/screens/StickerPacks.module.css b/src/screens/StickerPacks.module.css
index d70c506..dd422a5 100644
--- a/src/screens/StickerPacks.module.css
+++ b/src/screens/StickerPacks.module.css
@@ -9,6 +9,23 @@
height: 100%; /* Устанавливаем высоту */
}
+/* Сетка для оффервола */
+.offersWrapper {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ width: 100%;
+ margin-top: 12px;
+ margin-bottom: 24px;
+}
+
+@media (max-width: 600px) {
+ .offersWrapper {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+}
+
.header {
padding: var(--spacing-small) 0;
text-align: center;
diff --git a/src/screens/onboarding/OnboardingHowTo.module.css b/src/screens/onboarding/OnboardingHowTo.module.css
index eb0e44c..442f9f9 100644
--- a/src/screens/onboarding/OnboardingHowTo.module.css
+++ b/src/screens/onboarding/OnboardingHowTo.module.css
@@ -1,79 +1,236 @@
-.stepsContainer {
+.root {
display: flex;
flex-direction: column;
- gap: var(--spacing-medium);
+ min-height: 100vh;
+ background: #fff;
+ box-sizing: border-box;
+ overflow-x: hidden;
}
-.step {
+.imageBlock {
+ width: 100%;
+ max-width: 100%;
+ margin: 32px 0 0 0;
+ padding: 0;
+ overflow: visible;
+ position: relative;
+ z-index: 1;
display: flex;
- align-items: flex-start;
- gap: var(--spacing-medium);
- animation: fadeIn 0.3s ease-out;
- animation-fill-mode: both;
+ flex-direction: column;
+ align-items: stretch;
}
-.step:nth-child(1) {
- animation-delay: 0.1s;
+.image {
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ box-shadow: none;
+ object-fit: cover;
+ flex-shrink: 0;
+ flex-grow: 0;
}
-.step:nth-child(2) {
- animation-delay: 0.2s;
+.stepsBlock {
+ margin: 0 0 16px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ align-items: center;
+ z-index: 2;
}
-.step:nth-child(3) {
- animation-delay: 0.3s;
+.stepRow {
+ display: flex;
+ align-items: center;
+ gap: 12px;
}
-.stepNumber {
- width: 32px;
- height: 32px;
- border-radius: 50%;
+.stepBadge {
+ background: #eafeea;
+ border-radius: 24px;
+ padding: 8px 18px;
+ font-weight: 700;
+ font-size: 18px;
+ color: #16b100;
+ white-space: nowrap;
+ margin-right: 8px;
+}
+
+.stepBadgeBlue {
+ background: #eaf4fe;
+ color: #1976d2;
+}
+
+.stepBadgeRed {
+ background: #feeaea;
+ color: #e53935;
+}
+
+.stepImage {
+ width: 48px;
+ height: 48px;
+ border-radius: 16px;
+ object-fit: cover;
+ background: #fff;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.contentWrapper {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ width: 100%;
+ padding: 0 16px;
+ box-sizing: border-box;
+ justify-content: center;
+ align-items: center;
+ min-height: 0;
+}
+
+.title {
+ font-size: 24px;
+ font-weight: 800;
+ color: #111;
+ text-align: center;
+ margin-bottom: 12px;
+ margin-top: 0;
+ line-height: 1.18;
+ letter-spacing: -0.5px;
+}
+
+.list {
+ margin: 0 0 18px 0;
+ padding-left: 0;
+ color: #222;
+ font-size: 16px;
+ text-align: center;
+ list-style: none;
+}
+
+/* Progress bar */
+.progress {
display: flex;
justify-content: center;
align-items: center;
+ gap: 8px;
+ margin: 18px 0 16px 0;
+}
+
+.bottomContent {
+ width: 100%;
+ padding: 0 16px;
+ box-sizing: border-box;
+}
+
+.dot {
+ width: 32px;
+ height: 8px;
+ border-radius: 4px;
+ background: #e0e0e0;
+ display: inline-block;
+ transition: background 0.2s;
+}
+
+.dotActive {
+ background: #16b100;
+}
+
+/* Button */
+.button {
+ width: 100%;
+ background: #eafeea;
+ color: #16b100;
+ font-size: 20px;
font-weight: 700;
- font-size: 16px;
- color: white;
+ border: none;
+ border-radius: 12px;
+ padding: 14px 0;
+ margin: 0 0 12px 0;
+ cursor: pointer;
+ transition: background 0.2s, color 0.2s, opacity 0.2s;
+ box-shadow: none;
+ outline: none;
+}
+
+.button:disabled {
+ background: #e0e0e0;
+ color: #bdbdbd;
+ cursor: not-allowed;
+ opacity: 1;
+}
+
+/* Checkbox row */
+.checkboxRow {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin: 0 0 8px 0;
+ width: 100%;
+ padding: 0 4px;
+ box-sizing: border-box;
+}
+
+.checkboxLabel {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ font-size: 13px;
+ color: #222;
+ width: 100%;
+ cursor: pointer;
+ user-select: none;
+}
+
+.checkbox {
+ display: none;
+}
+
+.fakeCheckbox {
+ width: 18px;
+ height: 18px;
+ border: 2px solid #16b100;
+ border-radius: 4px;
+ background: #fff;
+ margin-top: 2px;
+ position: relative;
flex-shrink: 0;
}
-.step:nth-child(1) .stepNumber {
- background-color: var(--color-primary);
+.checkbox:checked + .fakeCheckbox {
+ background: #16b100;
+ border-color: #16b100;
}
-.step:nth-child(2) .stepNumber {
- background-color: var(--color-secondary);
+.checkbox:checked + .fakeCheckbox::after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 4px;
+ top: 0px;
+ width: 6px;
+ height: 12px;
+ border: solid #fff;
+ border-width: 0 2.5px 2.5px 0;
+ transform: rotate(45deg);
}
-.step:nth-child(3) .stepNumber {
- background-color: var(--color-accent2);
+.checkboxText {
+ display: inline;
+ line-height: 1.3;
+ color: #222;
+ font-size: 13px;
+ margin-left: 2px;
+ margin-right: 0;
+ word-break: break-word;
}
-.stepContent {
- flex: 1;
-}
-
-.stepTitle {
- font-weight: 600;
- font-size: 16px;
- margin-bottom: var(--spacing-small);
- color: var(--color-text);
-}
-
-.stepDescription {
- font-size: 14px;
- color: var(--color-text-secondary);
- line-height: 1.4;
-}
-
-@media (max-width: 480px) {
- .stepsContainer {
- gap: var(--spacing-small);
- }
-
- .stepNumber {
- width: 28px;
- height: 28px;
- font-size: 14px;
- }
+.link {
+ color: #1976d2;
+ text-decoration: underline;
+ cursor: pointer;
}
diff --git a/src/screens/onboarding/OnboardingHowTo.tsx b/src/screens/onboarding/OnboardingHowTo.tsx
index 0813f82..d5334a7 100644
--- a/src/screens/onboarding/OnboardingHowTo.tsx
+++ b/src/screens/onboarding/OnboardingHowTo.tsx
@@ -1,82 +1,86 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import OnboardingLayout from '../../components/shared/OnboardingLayout';
-import styles from './OnboardingHowTo.module.css';
-import customAnalyticsService from '../../services/customAnalyticsService';
-import { getCurrentUserId } from '../../constants/user';
-import { getTranslation } from '../../constants/translations';
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import styles from "./OnboardingHowTo.module.css";
+import { images } from "../../assets";
+import { getTranslation } from "../../constants/translations";
+import { Link } from "react-router-dom";
const OnboardingHowTo: React.FC = () => {
const navigate = useNavigate();
-
- useEffect(() => {
- // Отслеживаем событие открытия экрана инструкции
- customAnalyticsService.trackEvent({
- telegram_id: getCurrentUserId(),
- event_category: 'navigation',
- event_name: 'view_onboarding_how_to'
- });
- }, []);
+ const [checked, setChecked] = useState(false);
const handleNext = () => {
- // Отслеживаем событие нажатия кнопки "Далее"
- customAnalyticsService.trackEvent({
- telegram_id: getCurrentUserId(),
- event_category: 'onboarding',
- event_name: 'how_to_next_click'
- });
-
- navigate('/onboarding/sticker-packs');
- };
-
- const handleSkip = () => {
- // Отслеживаем событие нажатия кнопки "Пропустить"
- customAnalyticsService.trackEvent({
- telegram_id: getCurrentUserId(),
- event_category: 'onboarding',
- event_name: 'how_to_skip_click'
- });
-
- localStorage.setItem('hasSeenOnboarding', 'true');
- navigate('/');
+ if (checked) {
+ // Устанавливаем флаг, что пользователь принял условия
+ localStorage.setItem('hasAcceptedTerms', 'true');
+ navigate("/onboarding/sticker-packs");
+ }
};
return (
- Редактор стикеров (MVP)
+
+
+
+ {stickerImg && (
+ {
+ const newObjects = objects.map(o =>
+ o.id === obj.id
+ ? { ...o, x: e.target.x(), y: e.target.y() }
+ : o
+ );
+ pushUndo(newObjects);
+ }}
+ />
+ ) : (
+ {
+ const img = new window.Image();
+ img.src = obj.src;
+ return img;
+ })()}
+ x={obj.x}
+ y={obj.y}
+ width={obj.width}
+ height={obj.height}
+ rotation={obj.rotation}
+ draggable
+ onDragEnd={e => {
+ const newObjects = objects.map(o =>
+ o.id === obj.id
+ ? { ...o, x: e.target.x(), y: e.target.y() }
+ : o
+ );
+ pushUndo(newObjects);
+ }}
+ />
+ )
+ )}
+
+
+
+
+
+
+
+
+ MVP: drag, undo/redo, добавление текста и эмодзи
+
+ Эмодзи:
+ {editorStickers.map(st => (
+
+ ))}
+
+
-
-
1
-
-
+ {getTranslation('upload_photo_title')}
-{getTranslation('upload_photo_description')}
-
+ (null);
+ const rightColumnRef = useRef(null);
+ const greenCardRef = useRef(null);
+ const { updateBalance } = useBalance();
+
+ // Обработчик покупки пакета токенов
+ const handleBuyPack = (pack: TokenPack) => {
+ // Аналитика: попытка оплаты
+ customAnalyticsService.trackEvent({
+ telegram_id: getCurrentUserId(),
+ event_category: 'payment',
+ event_name: 'purchase_attempt'
+ });
+
+ if (showRub) {
+ // Используем оплату рублями
+ paymentService.showRubPaymentPopup(pack.title, () => {
+ // Обновляем баланс с повторными попытками
+ updateBalanceWithRetries(updateBalance);
+ });
+ } else {
+ // Используем оплату звездами
+ paymentService.showBuyTokensPopup(pack, async (userData) => {
+ // Обновляем баланс с повторными попытками
+ updateBalanceWithRetries(updateBalance);
+ });
+ }
+ };
+
+ // Функция для корректировки высоты карточек больше не нужна, так как мы используем flexbox
useEffect(() => {
// Отслеживаем событие открытия экрана стикерпаков
@@ -25,56 +62,193 @@ const OnboardingStickerPacks: React.FC = () => {
event_category: 'onboarding',
event_name: 'sticker_packs_start_click'
});
-
+
// Устанавливаем флаг, что пользователь видел онбординг
localStorage.setItem('hasSeenOnboarding', 'true');
-
- // Проверяем, принял ли пользователь уже условия использования
- const hasAcceptedTerms = localStorage.getItem('hasAcceptedTerms') === 'true';
-
- if (hasAcceptedTerms) {
- // Если уже принял условия, переходим на главный экран
- navigate('/');
- } else {
- // Если еще не принял условия, переходим на экран с условиями
- navigate('/onboarding/terms');
+
+ // Переходим на главный экран
+ // Пользователь уже принял условия на экране How-to
+ navigate('/');
+ };
+
+ // Функция для получения цвета карточки по ID
+ const getCardColor = (id: string) => {
+ switch (id) {
+ case 'basic':
+ return '#FF6B9E'; // розовый
+ case 'optimal':
+ return '#673AB7'; // фиолетовый
+ case 'advanced':
+ return '#2196F3'; // синий
+ case 'super':
+ return '#C62828'; // красный
+ case 'unlimited':
+ return '#1B5E20'; // темно-зеленый (премиальный)
+ default:
+ return undefined;
}
};
+ // Функция для определения, должна ли карточка быть широкой
+ const isFullWidth = (id: string) => {
+ return id === 'super' || id === 'unlimited';
+ };
+
return (
-
+ 
+
+
+
+ Нет ничего проще!
+ -
+
- Создавайте стикеры в три клика +
- Собирайте из них наборы +
- Публикуйте свои коллекции в телеграмм +
+
);
};
diff --git a/src/screens/onboarding/OnboardingStickerPacks.module.css b/src/screens/onboarding/OnboardingStickerPacks.module.css
index 0279a0e..23cfd5b 100644
--- a/src/screens/onboarding/OnboardingStickerPacks.module.css
+++ b/src/screens/onboarding/OnboardingStickerPacks.module.css
@@ -66,14 +66,239 @@
line-height: 1.4;
}
-@media (max-width: 480px) {
- .stepsContainer {
- gap: var(--spacing-small);
+/* Контейнер для хедера */
+.headerContainer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: #ffffff;
+ z-index: 100;
+ padding: 12px 16px 4px; /* Уменьшаем отступы */
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* Кнопка "Пропустить" */
+.skipButton {
+ position: absolute;
+ top: 12px;
+ right: 16px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #666;
+ background: transparent;
+ border: none;
+ padding: 8px;
+ cursor: pointer;
+ z-index: 200; /* Выше, чем у headerContainer */
+}
+
+.skipButton:hover {
+ color: #333;
+}
+
+/* Заголовок внутри хедера */
+.headerTitle {
+ font-size: 24px;
+ font-weight: 700;
+ margin-bottom: 8px; /* Уменьшаем отступ снизу */
+ color: var(--color-text);
+ text-align: center;
+}
+
+/* Переключатель цен */
+.priceToggle {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f0f0;
+ border-radius: 24px;
+ padding: 4px;
+ margin: 0 auto 8px;
+ max-width: 300px;
+ width: 100%;
+ border: 2px solid #4CAF50; /* Добавляем зеленую обводку */
+}
+
+.toggleButton {
+ flex: 1;
+ padding: 8px 12px;
+ border: none;
+ background: transparent;
+ border-radius: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #666;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+
+.toggleButton.active {
+ background-color: #4CAF50;
+ color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Удаляем правило, чтобы символ рубля оставался желтым даже при активной кнопке */
+
+.rubSymbol {
+ color: #FFC107;
+ font-weight: 700;
+}
+
+.tokenSymbol {
+ color: #FFC107;
+ font-weight: 700;
+}
+
+/* Сетка для оффервола */
+.offersWrapper {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ width: 100%;
+ margin-top: 35px; /* Еще больше уменьшаем отступ сверху */
+ margin-bottom: 0; /* Убираем отступ снизу */
+ padding: 4px;
+ padding-bottom: 40px; /* Умеренный отступ снизу */
+}
+
+/* Создаем две колонки */
+.leftColumn, .rightColumn {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: calc(50% - 5px); /* 50% ширины минус половина отступа */
+}
+
+/* Левая колонка должна занимать всю доступную высоту */
+.leftColumn {
+ flex: 1;
+}
+
+/* Правая колонка должна подстраиваться под высоту левой */
+.rightColumn {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+/* Стили для карточек в левой колонке */
+.leftColumn > div {
+ flex: 1; /* Карточки равномерно распределяются по высоте */
+}
+
+/* Стили для синей карточки (Стикерный энтузиаст) */
+.rightColumn > div:first-child {
+ flex: 1; /* Занимает все доступное пространство */
+}
+
+/* Стили для зеленой карточки с изображением */
+.imageCard {
+ aspect-ratio: 1 / 1; /* Сохраняем квадратную форму */
+ flex-shrink: 0; /* Запрещаем сжиматься */
+ margin-top: auto; /* Прижимаем к низу колонки */
+}
+
+/* Стили для карточек, занимающих всю ширину */
+.offersWrapper > div:nth-child(3),
+.offersWrapper > div:nth-child(4) {
+ width: 100%;
+
+}
+
+/* Стили для зеленой карточки с изображением */
+.imageCard {
+ background-color: #4CAF50;
+ border-radius: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+ aspect-ratio: 1 / 1; /* Делаем карточку квадратной */
+ position: relative;
+}
+
+.imageCardImg {
+ position: absolute;
+ top: -13%;
+ left: -18%; /* Сдвигаем изображение вправо на 10% */
+ width: 185%; /* Увеличиваем размер изображения на 20% */
+ height: 185%; /* Увеличиваем размер изображения на 20% */
+ object-fit: cover; /* Меняем с contain на cover для лучшего заполнения */
+ padding: 0; /* Убираем padding, чтобы изображение могло выходить за края */
+}
+
+/* Добавляем класс для контейнера с JavaScript-корректировкой высоты */
+.dynamicHeightContainer {
+ position: relative;
+ width: 100%;
+}
+
+@media (max-width: 600px) {
+ .offersWrapper {
+ gap: 8px;
+ padding: 2px;
}
- .stepNumber {
- width: 28px;
- height: 28px;
- font-size: 14px;
+ .priceToggle {
+ max-width: 260px;
+ }
+
+ .toggleButton {
+ font-size: 12px;
+ padding: 6px 8px;
+ }
+
+ /* На мобильных устройствах можно сделать колонки одинаковой высоты */
+ .leftColumn, .rightColumn {
+ min-height: 520px;
}
}
+
+@media (max-width: 320px) {
+ .offersWrapper {
+ gap: 6px;
+ }
+
+ /* Дополнительные корректировки для очень маленьких экранов */
+ .offersWrapper > div:nth-child(1),
+ .offersWrapper > div:nth-child(3) {
+ height: 210px;
+ }
+
+ .offersWrapper > div:nth-child(2) {
+ height: 430px;
+ }
+}
+
+/* Контейнер для карточки со звездочкой */
+.cardWithStar {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+/* Псевдоэлемент для отображения звездочки */
+.cardWithStar::before {
+ content: "★";
+ position: absolute;
+ top: -30px;
+ left: -11px;
+ font-size: 2.8rem;
+ color: #FFC107;
+ z-index: 10;
+ -webkit-text-stroke: 1.5px black;
+ text-stroke: 1.5px black;
+ text-shadow: 0 0 3px rgba(0,0,0,0.5);
+ pointer-events: none; /* Чтобы звездочка не перехватывала клики */
+}
diff --git a/src/screens/onboarding/OnboardingStickerPacks.tsx b/src/screens/onboarding/OnboardingStickerPacks.tsx
index eda09be..a92038e 100644
--- a/src/screens/onboarding/OnboardingStickerPacks.tsx
+++ b/src/screens/onboarding/OnboardingStickerPacks.tsx
@@ -1,13 +1,50 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import OnboardingLayout from '../../components/shared/OnboardingLayout';
import styles from './OnboardingStickerPacks.module.css';
import customAnalyticsService from '../../services/customAnalyticsService';
import { getCurrentUserId } from '../../constants/user';
import { getTranslation } from '../../constants/translations';
+import { tokenPacks, TokenPack } from '../../constants/tokenPacks';
+import OfferWallCard from '../../components/offerwall/OfferWallCard';
+import { images } from '../../assets';
+import { paymentService } from '../../services/paymentService';
+import { useBalance } from '../../contexts/BalanceContext';
+import { updateBalanceWithRetries } from '../../utils/balanceUtils';
const OnboardingStickerPacks: React.FC = () => {
const navigate = useNavigate();
+ const [showRub, setShowRub] = useState(true);
+ const leftColumnRef = useRef
+
+
+
-
-
-
-
- 2
-
-
- {getTranslation('choose_style_title')}
-{getTranslation('choose_style_description')}
-
-
-
+ 3
-
-
+
+ {getTranslation('create_sticker_title')}
-{getTranslation('create_sticker_description')}
-
+
-
-
1
-
-
+ {/* Кнопка "Пропустить" в правом верхнем углу */}
+
+ {/* Фиксированный хедер */}
+ {getTranslation('select_stickers_title')}
-{getTranslation('select_stickers_description')}
-
+
- Пакеты токенов
+ {/* Переключатель цен */} +
+
+
+
-
2
-
-
{getTranslation('organize_pack_title')}
-{getTranslation('organize_pack_description')}
+
+ {/* Левая колонка */}
+
+ {/* Стартовый набор (первая карточка) */}
+ handleBuyPack(tokenPacks[0])}
+ />
+
+ {/* Стикерный запас (третья карточка) */}
+
-
-
+ handleBuyPack(tokenPacks[2])}
+ />
- = {
+ 'Стартовый набор': 'стартовый набор',
+ 'Стикерный энтузиаст': 'стикерный энтузиаст',
+ 'Стикерный запас': 'стикерный запас',
+ 'Стикерный магнат': 'стикерный магнат',
+ 'Бог стикеров': 'бог стикеров'
+};
+
export const paymentService = {
showBuyTokensPopup: async (pack: TokenPack, onSuccess?: (userData?: any) => void) => {
// Проверяем наличие Telegram WebApp
@@ -66,5 +75,76 @@ export const paymentService = {
console.error('Ошибка при создании инвойса:', error);
webApp.showAlert('Произошла ошибка при создании платежа. Пожалуйста, попробуйте позже.');
}
+ },
+
+ // Метод для оплаты рублями
+ showRubPaymentPopup: async (packTitle: string, onSuccess?: () => void) => {
+ // Проверяем наличие Telegram WebApp
+ if (!window.Telegram?.WebApp) {
+ console.error('Telegram WebApp не доступен');
+ return;
+ }
+
+ const webApp = window.Telegram.WebApp;
+ const userId = getCurrentUserId();
+
+ try {
+ // Получаем правильное описание пакета для API
+ const description = packTitleToDescription[packTitle] || packTitle.toLowerCase();
+
+ // Подготавливаем данные для запроса
+ const requestData = {
+ user_id: userId,
+ description: description
+ };
+
+ // Логируем данные запроса
+ console.log('Отправка запроса на создание платежа:');
+ console.log('URL:', 'https://stickerserver.gymnasticstuff.uk/create-payment');
+ console.log('Метод:', 'POST');
+ console.log('Заголовки:', { 'Content-Type': 'application/json' });
+ console.log('Тело запроса:', JSON.stringify(requestData, null, 2));
+
+ // Запрос к API для получения платежной ссылки
+ const response = await fetch('https://stickerserver.gymnasticstuff.uk/create-payment', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(requestData)
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to create payment');
+ }
+
+ const data = await response.json();
+
+ // Логируем ответ сервера
+ console.log('Ответ сервера:', {
+ status: response.status,
+ statusText: response.statusText,
+ data: data
+ });
+
+ const paymentUrl = data.payment_url;
+
+ // Отслеживаем событие начала оплаты
+ customAnalyticsService.trackEvent({
+ telegram_id: userId,
+ event_category: 'payment',
+ event_name: 'rub_payment_start',
+ unit: packTitle
+ });
+
+ // Открываем ссылку в браузере Telegram
+ webApp.openLink(paymentUrl);
+
+ // Вызываем callback успеха, если он предоставлен
+ if (onSuccess) {
+ onSuccess();
+ }
+ } catch (error) {
+ console.error('Ошибка при создании платежа:', error);
+ webApp.showAlert('Произошла ошибка при создании платежа. Пожалуйста, попробуйте позже.');
+ }
}
};
diff --git a/vite.config.ts b/vite.config.ts
index b689d5b..f1d69fa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,11 @@ import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ server: {
+ host: '0.0.0.0', // Делаем сервер доступным по локальной сети
+ port: 5173, // Фиксируем порт
+ strictPort: true, // Не пытаемся использовать другой порт, если 5173 занят
+ },
css: {
modules: {
localsConvention: 'camelCase',
diff --git a/Редактор_стикеров_план_реализации.md b/Редактор_стикеров_план_реализации.md
new file mode 100644
index 0000000..c8411aa
--- /dev/null
+++ b/Редактор_стикеров_план_реализации.md
@@ -0,0 +1,91 @@
+# План внедрения редактора стикеров для Telegram Mini App
+
+## 1. Кнопка "Редактировать" и роутинг
+
+- Добавить кнопку/иконку "Редактировать" на каждый стикер в галерее.
+- При нажатии — переход на экран `/edit/:stickerId`, где stickerId — идентификатор стикера (или file_id).
+- На экран редактора передаётся webp-стикер 512x512 с прозрачным фоном.
+
+---
+
+## 2. Экран редактора (MVP)
+
+- **Технология:** React + [react-konva](https://konvajs.org/docs/react/index.html) (canvas-редактирование, поддержка мобильных жестов, drag-n-drop, масштабирование, поворот).
+- **Холст:** фиксированный размер 512x512, webp-стикер как прозрачный фон.
+- **Инструменты:**
+ - Масштабирование и перемещение самого стикера (фонового слоя).
+ - Добавление текста (выбор шрифта из выпадающего списка, цвета из палитры, размер, позиция, поворот, обводка).
+ - Добавление PNG/эмодзи (drag-n-drop, resize, rotate, перемещение).
+ - Удаление объектов.
+- **История изменений:** стек undo/redo (реализуется через массив состояний редактора, можно использовать useReducer или отдельную библиотеку типа [use-undo](https://github.com/aaronpowell/react-use-undo)).
+- **UI:** крупные кнопки, панель инструментов снизу/сбоку, адаптация под мобильные (touch-жесты).
+
+---
+
+## 3. Сохранение результата
+
+- Экспорт canvas в webp 512x512 (react-konva поддерживает toDataURL с нужным форматом и размером).
+- Модальное окно подтверждения сохранения (в стиле NotificationModal, как в проекте).
+- Отправка изображения на сервер через ваш эндпоинт (с телеграм id).
+- После успешного сохранения — возврат в галерею (или показ уведомления).
+
+---
+
+## 4. Расширяемость и удобство
+
+- **Шрифты:**
+ - Список шрифтов хранить в конфиге (например, src/config/editorFonts.ts).
+ - Добавлять новые шрифты — просто дописывать в конфиг и подключать через Google Fonts.
+- **Палитра цветов:**
+ - Использовать готовый компонент color picker (например, [react-colorful](https://omgovich.github.io/react-colorful/)), палитру можно расширять.
+- **Набор эмодзи/картинок:**
+ - Хранить в src/assets/editor-stickers/ (SVG/PNG/WebP).
+ - Добавлять новые — просто копировать в папку и прописывать в конфиге.
+- **Предупреждение о несохранённых изменениях:**
+ - При попытке выхода из редактора без сохранения — показывать модальное окно с подтверждением.
+
+---
+
+## UX-детали
+
+- Пользователь всегда видит результат редактирования в реальном времени.
+- Все действия (масштабирование, перемещение, поворот) доступны для любого объекта, включая сам стикер.
+- История изменений (undo/redo) работает в рамках одной сессии редактирования.
+- Сохранение всегда в формате webp 512x512 с прозрачным фоном.
+- Мобильная адаптация — приоритет (крупные кнопки, поддержка touch-жестов).
+
+---
+
+## Сложность и сроки
+
+- MVP (редактирование, undo/redo, сохранение, мобильная адаптация): 2-3 недели.
+- Добавление новых шрифтов/эмодзи — не требует изменений в коде, только в конфиге/папке.
+- UI/UX — минимальные риски для остального приложения, редактор полностью изолирован.
+
+---
+
+## Вопросы и ответы
+
+- **Ограничение на количество объектов:** не требуется.
+- **Шрифты:** список в конфиге, легко расширять.
+- **Цвета:** палитра, легко расширять.
+- **Предпросмотр:** не нужен, пользователь видит результат сразу.
+- **Модальное окно подтверждения:** обязательно, в стиле NotificationModal.
+- **Набор эмодзи/картинок:** система через папку и конфиг, легко расширять.
+- **Предупреждение о несохранённых изменениях:** обязательно.
+
+---
+
+## Примерная структура компонентов
+
+- GallerySticker (с кнопкой "Редактировать")
+- StickerEditorScreen (отдельный экран)
+ - EditorCanvas (react-konva)
+ - Toolbar (инструменты: текст, эмодзи, undo/redo, сохранить)
+ - ColorPicker, FontPicker, EmojiPicker (модальные/панельные компоненты)
+ - ConfirmModal (подтверждение сохранения/выхода)
+
+---
+
+**Резюме:**
+Редактор внедряется как отдельный экран, не затрагивает остальной функционал. Использование react-konva обеспечивает мобильную совместимость и нужный функционал. Все ресурсы (шрифты, эмодзи) легко расширяемы через конфиг/папку. UX — максимально близок к мобильным привычкам.
3
-
- handleBuyPack(tokenPacks[3])}
+ />
+
+ {/* Бог стикеров (шестая карточка, на всю ширину) */}
+ handleBuyPack(tokenPacks[4])}
+ />
);
diff --git a/src/screens/onboarding/OnboardingWelcome.module.css b/src/screens/onboarding/OnboardingWelcome.module.css
new file mode 100644
index 0000000..3cb1924
--- /dev/null
+++ b/src/screens/onboarding/OnboardingWelcome.module.css
@@ -0,0 +1,203 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background: #fff;
+ box-sizing: border-box;
+ overflow-x: hidden;
+}
+
+.imageBlock {
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: visible;
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.image {
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ box-shadow: none;
+ object-fit: cover;
+ flex-shrink: 0;
+ flex-grow: 0;
+ /* Сдвиг вверх для маленьких экранов будет через медиазапросы */
+}
+
+.contentWrapper {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+ width: 100%;
+ padding: 0 16px;
+ box-sizing: border-box;
+ justify-content: flex-start;
+}
+
+.textContent {
+ margin: 0;
+ padding: 0 0 16px 0;
+}
+
+.title {
+ font-size: 28px;
+ font-weight: 800;
+ color: #111;
+ text-align: center;
+ margin-bottom: 18px;
+ margin-top: 0;
+ line-height: 1.18;
+ letter-spacing: -0.5px;
+}
+
+.description {
+ font-size: 18px;
+ color: #444;
+ text-align: center;
+ margin-bottom: 0;
+ margin-top: 0;
+ line-height: 1.5;
+ font-weight: 400;
+}
+
+.bottomContent {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: auto;
+ margin-bottom: 0;
+ padding-top: 24px;
+}
+
+.progress {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+.dot {
+ width: 32px;
+ height: 8px;
+ border-radius: 4px;
+ background: #e0e0e0;
+ transition: background 0.2s;
+}
+
+.dotActive {
+ background: #16b100;
+}
+
+.button {
+ width: calc(100% - 32px);
+ max-width: 370px;
+ background: #16b100;
+ color: #fff;
+ font-size: 20px;
+ font-weight: 700;
+ border: none;
+ border-radius: 12px;
+ padding: 18px 0;
+ margin: 0 0 32px 0;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(22, 177, 0, 0.08);
+ transition: background 0.2s;
+}
+
+.button:active {
+ background: #129200;
+}
+
+/* --- Медиазапросы для адаптивности --- */
+@media (max-width: 480px) {
+ .imageBlock {
+ max-height: none;
+ min-height: 120px;
+ }
+ .image {
+ max-height: none;
+ margin-top: -5vh;
+ }
+ .contentWrapper {
+ justify-content: center;
+ flex: 1 1 0%;
+ min-height: 0;
+ }
+ .bottomContent {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .title {
+ font-size: 22px;
+ }
+ .description {
+ font-size: 15px;
+ }
+ .button {
+ font-size: 17px;
+ padding: 14px 0;
+ }
+}
+
+/* iPad и планшеты */
+@media (min-width: 600px) and (max-width: 1100px) {
+ .imageBlock {
+ min-height: 320px;
+ }
+ .image {
+ margin-top: -25vh;
+ }
+ .contentWrapper {
+ padding-top: 16px;
+ }
+}
+
+@media (max-height: 667px) {
+ .imageBlock {
+ max-height: none;
+ min-height: 100px;
+ }
+ .image {
+ max-height: none;
+ margin-top: -10vh;
+ }
+ .title {
+ font-size: 20px;
+ margin-bottom: 12px;
+ }
+ .description {
+ font-size: 14px;
+ }
+}
+
+@media (max-height: 568px) {
+ .imageBlock {
+ max-height: none;
+ min-height: 80px;
+ }
+ .image {
+ max-height: none;
+ margin-top: -12vh;
+ }
+ .textContent {
+ padding-bottom: 8px;
+ }
+ .bottomContent {
+ margin-top: 8px;
+ }
+}
diff --git a/src/screens/onboarding/OnboardingWelcome.tsx b/src/screens/onboarding/OnboardingWelcome.tsx
index 992c24e..906ac10 100644
--- a/src/screens/onboarding/OnboardingWelcome.tsx
+++ b/src/screens/onboarding/OnboardingWelcome.tsx
@@ -1,16 +1,15 @@
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
-import OnboardingLayout from '../../components/shared/OnboardingLayout';
import { images } from '../../assets';
import customAnalyticsService from '../../services/customAnalyticsService';
import { getCurrentUserId } from '../../constants/user';
import { getTranslation } from '../../constants/translations';
+import styles from './OnboardingWelcome.module.css';
const OnboardingWelcome: React.FC = () => {
const navigate = useNavigate();
useEffect(() => {
- // Отслеживаем событие открытия экрана приветствия
customAnalyticsService.trackEvent({
telegram_id: getCurrentUserId(),
event_category: 'navigation',
@@ -19,40 +18,47 @@ const OnboardingWelcome: React.FC = () => {
}, []);
const handleNext = () => {
- // Отслеживаем событие нажатия кнопки "Далее"
customAnalyticsService.trackEvent({
telegram_id: getCurrentUserId(),
event_category: 'onboarding',
event_name: 'welcome_next_click'
});
-
navigate('/onboarding/how-to');
};
- const handleSkip = () => {
- // Отслеживаем событие нажатия кнопки "Пропустить"
- customAnalyticsService.trackEvent({
- telegram_id: getCurrentUserId(),
- event_category: 'onboarding',
- event_name: 'welcome_skip_click'
- });
-
- localStorage.setItem('hasSeenOnboarding', 'true');
- navigate('/');
- };
-
return (
- {getTranslation('publish_title')}
-{getTranslation('publish_description')}
+ + {/* Правая колонка */} +
+ {/* Стикерный энтузиаст (вторая карточка) */}
+ handleBuyPack(tokenPacks[1])}
+ />
+
+ {/* Зеленая карточка с изображением (четвертая карточка) */}
+
+
+ {/* Стикерный магнат (пятая карточка, на всю ширину) */}
+
+
+
);
};
diff --git a/src/services/paymentService.ts b/src/services/paymentService.ts
index 89f6b9e..c2a7b12 100644
--- a/src/services/paymentService.ts
+++ b/src/services/paymentService.ts
@@ -3,6 +3,15 @@ import apiService from '../services/api';
import { getCurrentUserId } from '../constants/user';
import customAnalyticsService from './customAnalyticsService';
+// Словарь для маппинга названий пакетов к значениям description для API
+const packTitleToDescription: Record
+ 
+
+
+
+
+
+ Добро пожаловать
+
+
+ Добро пожаловать
в Sticker Generator
+
+
+ Создавайте уникальные стикеры
+ из фотографий с помощью
+ искусственного интеллекта +
+ + из фотографий с помощью
+ искусственного интеллекта +
+
+
+
+
+
+
+
+