Создание Telegram WebApp для анализа отношений

telegram-relationship-ai/.env

@@ -0,0 +1,6 @@
+TELEGRAM_BOT_TOKEN=test_token_placeholder
+CRYPTOBOT_API_KEY=test_crypto_key_placeholder
+WEBAPP_URL=http://localhost:3000
+BOT_USERNAME=relationship_ai_bot
+PORT=3000
+NODE_ENV=development

telegram-relationship-ai/.env.example

@@ -0,0 +1,5 @@
+TELEGRAM_BOT_TOKEN=your_bot_token_here
+CRYPTOBOT_API_KEY=your_cryptobot_api_key_here
+WEBAPP_URL=https://yourdomain.com
+PORT=3000
+NODE_ENV=production

telegram-relationship-ai/DEPLOY.md

@@ -0,0 +1,129 @@
+# 🚀 Быстрый деплой Telegram WebApp
+
+## 📋 Подготовка
+
+### 1. Создание Telegram бота
+
+1. Найдите [@BotFather](https://t.me/BotFather)
+2. Создайте бота: `/newbot`
+3. Скопируйте токен бота
+4. Установите WebApp кнопку:
+   ```
+   /setmenubutton
+   @your_bot_name
+   WebApp
+   https://yourdomain.com/app
+   ```
+
+### 2. Настройка проекта
+
+```bash
+# Клонирование
+git clone <repository>
+cd telegram-relationship-ai
+
+# Установка зависимостей
+npm install
+
+# Настройка переменных окружения
+cp .env.example .env
+# Отредактируйте .env файл
+```
+
+## 🌐 Деплой на VPS
+
+```bash
+# Установка PM2
+npm install -g pm2
+
+# Запуск
+pm2 start backend/index.js --name "relationship-ai"
+pm2 startup
+pm2 save
+
+# Настройка Nginx
+sudo nano /etc/nginx/sites-available/relationship-ai
+```
+
+### Конфигурация Nginx:
+
+```nginx
+server {
+    listen 80;
+    server_name yourdomain.com;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+### Установка webhook:
+
+```bash
+curl -X POST https://api.telegram.org/bot<YOUR_TOKEN>/setWebhook \
+     -H "Content-Type: application/json" \
+     -d '{"url": "https://yourdomain.com/webhook"}'
+```
+
+## ☁️ Деплой на Heroku
+
+```bash
+# Создание приложения
+heroku create your-app-name
+
+# Настройка переменных
+heroku config:set TELEGRAM_BOT_TOKEN=your_token
+heroku config:set WEBAPP_URL=https://your-app-name.herokuapp.com
+
+# Деплой
+git push heroku main
+
+# Установка webhook
+curl -X POST https://api.telegram.org/bot<YOUR_TOKEN>/setWebhook \
+     -H "Content-Type: application/json" \
+     -d '{"url": "https://your-app-name.herokuapp.com/webhook"}'
+```
+
+## 🔧 Настройка CryptoBot
+
+1. Найдите [@CryptoBot](https://t.me/CryptoBot)
+2. Создайте приложение: `/app`
+3. Получите API ключ
+4. Добавьте в `.env`:
+   ```
+   CRYPTOBOT_API_KEY=your_api_key
+   ```
+
+## ✅ Проверка
+
+1. Откройте своего бота в Telegram
+2. Нажмите кнопку меню для запуска WebApp
+3. Пройдите тест
+4. Проверьте оплату и реферальную систему
+
+## 🐛 Решение проблем
+
+### Бот не отвечает:
+- Проверьте webhook: `/getWebhookInfo`
+- Убедитесь, что сервер доступен по HTTPS
+
+### WebApp не открывается:
+- Проверьте URL в настройках бота
+- Убедитесь, что статические файлы раздаются корректно
+
+### База данных не создается:
+- Проверьте права на запись в директории проекта
+- Убедитесь, что SQLite установлен
+
+---
+
+💡 **Совет**: Для быстрого тестирования используйте ngrok:
+```bash
+ngrok http 3000
+# Используйте HTTPS URL от ngrok для webhook
+```

telegram-relationship-ai/DESIGN_FEATURES.md

@@ -0,0 +1,145 @@
+# 🎨 Особенности современного мобильного дизайна
+
+## 📱 Главный экран
+
+### Геройская секция
+- **Крупная иконка мозга (🧠)** с плавной пульсирующей анимацией
+- **Главный заголовок**: "AI-анализ отношений" (32px, жирный шрифт)
+- **Подзаголовок**: "Пройди короткий тест и получи персональный разбор"
+- **Цветовая схема**: iOS-стиль с градиентами (#007AFF → #5856D6)
+
+### Статистические карточки
+- 3 мини-карточки: "7 вопросов", "2 минуты", "4 архетипа"
+- Светлый фон с тенями, закругленные углы
+- Анимация нажатия (scale transform)
+
+### Главная кнопка
+- **Градиентная кнопка** с текстом "Начать анализ" и стрелкой →
+- Эффект shimmer при наведении
+- Haptic feedback при нажатии
+- Адаптивная под размер экрана
+
+## 🧪 Экран тестирования
+
+### Прогресс-бар
+- **Градиентный индикатор** с анимацией shimmer
+- Показывает "X / 7 вопросов"
+- Плавная анимация заполнения
+
+### Вопросы
+- **Крупный шрифт** для лучшей читаемости (24px)
+- Центрированный текст
+- Достаточные отступы для мобильных экранов
+
+### Варианты ответов
+- **Карточки с закругленными углами**
+- Анимация выбора (заливка синим + галочка)
+- Автоматический переход к следующему вопросу
+- Тактильная обратная связь
+
+### Навигация
+- Кнопки "Назад" и "Далее" в одну строку
+- Блокировка неактивных кнопок
+- Визуальное выделение основной кнопки
+
+## 🎭 Экран результата
+
+### Заголовок результата
+- **Градиентный фон** на всю ширину
+- Крупная иконка архетипа (80px)
+- Название архетипа (28px, жирный)
+- Краткое описание
+
+### Детальные карточки
+- **Модульная структура** для сильных сторон, слабостей и рекомендаций
+- Иконки для каждой секции (💪, ⚡, 📋)
+- Списки с цветными маркерами
+- Светлый фон с тенями
+
+### Кнопки действий
+- "Поделиться" - основная кнопка
+- "Получить полный анализ" - премиум кнопка (золотой градиент)
+- "На главную" - текстовая кнопка
+
+## 👤 Профиль пользователя
+
+### Аватар и статус
+- Крупная иконка пользователя
+- Имя пользователя
+- Бейдж статуса подписки
+
+### Статистика
+- **Сетка 3×1** с реферальными данными
+- Приглашено, заработано, баланс
+- Цветное выделение значений
+
+### Реферальная секция
+- Поле с реферальной ссылкой
+- Кнопка копирования
+- Информация о вознаграждении 50%
+
+## 🎯 Ключевые фишки дизайна
+
+### Цветовая палитра
+```css
+--primary-color: #007AFF (iOS Blue)
+--secondary-color: #5856D6 (iOS Purple)
+--success-color: #34C759 (iOS Green)
+--warning-color: #FF9500 (iOS Orange)
+--accent-color: #FF3B30 (iOS Red)
+```
+
+### Типографика
+- **SF Pro Text** (системный шрифт iOS)
+- Адаптивные размеры шрифтов
+- Оптимальная высота строк для чтения
+
+### Анимации
+- **Плавные переходы** между экранами (0.3s ease-out)
+- **Микроанимации** при взаимодействии
+- **Пульсация** иконок
+- **Shimmer эффекты** на кнопках и прогресс-барах
+
+### Адаптивность
+- **Безопасные области** (safe-area-inset)
+- **Отзывчивая сетка** для разных экранов
+- **Масштабирование** для маленьких экранов (<375px)
+- **Оптимизация по высоте** для устройств с маленьким экраном
+
+### UX особенности
+- **Тактильная обратная связь** (Haptic Feedback)
+- **Жесты навигации**
+- **Автоматические переходы** между вопросами
+- **Умные уведомления** с таймером исчезновения
+- **Блокировка зума** для WebApp
+
+### Лоадеры и состояния
+- **Анимированный спиннер** с пульсирующими кольцами
+- **Блюр-эффект** для модальных окон
+- **Skeleton загрузка** для контента
+- **Graceful degradation** для старых браузеров
+
+## 🚀 Технические особенности
+
+### CSS современные фишки
+- **CSS Custom Properties** для темизации
+- **CSS Grid** для сеток
+- **Flexbox** для компоновки
+- **CSS Transforms** для анимаций
+- **CSS Gradients** для красивых фонов
+
+### Мобильная оптимизация
+- **Touch-friendly** размеры кнопок (44px+)
+- **Swipe жесты** для навигации
+- **Предотвращение zoom** при фокусе на input
+- **Оптимизация под iOS Safari** и Chrome Mobile
+
+### Производительность
+- **Hardware acceleration** для анимаций
+- **Debounced события**
+- **Lazy loading** изображений
+- **Минимальные repaint/reflow**
+
+---
+
+🎯 **Результат**: Современный, быстрый и интуитивный мобильный интерфейс, который выглядит как нативное iOS приложение внутри Telegram WebApp.