Design Bots - Платформа дизайнерских инструментов

🤖 Полнофункциональная платформа дизайнерских инструментов в виде Telegram бота с веб-приложениями. Включает генератор цветовых палитр, проверку контрастности цветов и генератор пар шрифтов.

✨ Возможности

• 🎨 Генератор цветовых палитр с ИИ (Colormind API)
• ⚖️ Проверка контрастности по стандартам WCAG
• 🔤 Генератор пар шрифтов (Google Fonts API)
• 👥 Система пользователей с ролевой моделью
• 📊 Аналитика и статистика использования
• 🛠️ Админ-панель для управления ботом

📋 Содержание

• Генератор цветовых палитр (color-palette-app.html)
• Проверка контрастности цветов (contrast-checker-app.html)
• Генератор пар шрифтов (font-preview-app.html)

---

🎨 Генератор цветовых палитр (color-palette-app.html)

Интеллектуальный инструмент для создания гармоничных цветовых палитр с использованием алгоритмов ИИ.

✨ Основные функции

🎲 Генерация случайных палитр

• Стандартная палитра: Генерирует сбалансированные цветовые комбинации
• UI палитра: Специально оптимизированные цвета для интерфейсов
• Базовый цвет: Возможность указать исходный цвет для генерации

🎯 Интерактивные возможности

• Предпросмотр цветов: Каждый цвет в палитре кликабелен для копирования
• Копирование палитры: Полное копирование всех цветов одним кликом
• Расчет контрастности: Автоматический расчет соотношения контраста

📊 Анализ палитры

• Название палитры: Автоматическая генерация описательных имен
• Стиль палитры: Определение типа палитры (стандартная/UI)
• Контрастность: Расчет соотношения контраста между цветами

🔧 Технические особенности

API интеграция

• Colormind API: Использование алгоритмов ИИ для генерации цветов
• PHP прокси: Обход CORS ограничений через локальный прокси
• Fallback система: Резервные алгоритмы при недоступности API

Валидация данных

• HEX формат: Строгая проверка корректности цветовых кодов
• Автоформатирование: Автоматическое добавление # и преобразование в верхний регистр
• Ограничения длины: Контроль максимальной длины ввода

🎨 UI/UX особенности

Адаптивный дизайн

• Мобильная оптимизация: Полная поддержка сенсорных устройств
• PWA готовность: Поддержка установки как веб-приложения
• Telegram интеграция: Оптимизация для Telegram Web Apps

Визуальные эффекты

• Анимации: Плавные переходы при генерации палитр
• Hover эффекты: Интерактивная обратная связь
• Цветовые превью: Визуальное отображение выбранных цветов

---

⚖️ Проверка контрастности цветов (contrast-checker-app.html)

Профессиональный инструмент для проверки доступности цветовых комбинаций согласно стандартам WCAG.

✨ Основные функции

📏 Расчет контрастности

• WCAG AA стандарт: Проверка соответствия для нормального текста (4.5:1)
• WCAG AAA стандарт: Проверка соответствия для расширенной доступности (7:1)
• Крупный текст: Специальная проверка для текста размером 18pt+ (3:1)

🎯 Визуальный анализ

• Предпросмотр текста: Демонстрация читаемости на реальном контенте
• Цветовые превью: Визуальное отображение выбранных цветов
• Уровень соответствия: Цветовая индикация AA/AAA/не соответствует

📊 Детальный отчет

• Соотношение контраста: Точное числовое значение (например, 5.2:1)
• Статус проверки: ✅ Пройден / ❌ Не пройден для каждого типа текста
• Рекомендации: Подробные советы по улучшению доступности

🔧 Технические особенности

Алгоритмы расчета

• Относительная luminance: Расчет яркости по стандарту WCAG
• sRGB цветовая модель: Корректная обработка цифровых цветов
• Гамма-коррекция: Учет нелинейности восприятия яркости

Валидация ввода

• HEX формат: Строгая проверка 6-значных HEX кодов
• Автоформатирование: Удобный ввод без необходимости в # префиксе
• Обработка ошибок: Понятные сообщения об ошибках валидации

🎨 UI/UX особенности

Интуитивный интерфейс

• Двойной ввод: Отдельные поля для цвета фона и текста
• Цветовые превью: Мгновенная визуальная обратная связь
• Результаты в реальном времени: Автоматический пересчет при изменении

Образовательный контент

• WCAG информация: Встроенные подсказки о стандартах доступности
• Рекомендации: Конкретные советы по улучшению контрастности
• Примеры использования: Демонстрация на типичном контенте

---

🔤 Генератор пар шрифтов (font-preview-app.html)

Умный инструмент для подбора гармоничных комбинаций шрифтов с использованием Google Fonts API.

✨ Основные функции

🎯 Интеллектуальная генерация

• Случайные пары: Автоматический подбор сбалансированных комбинаций
• Стили шрифтов: 9 различных стилей (Современный, Классический, Технический и др.)
• Фиксация шрифтов: Возможность закрепить понравившийся шрифт

🌍 Многоязычная поддержка

• Кириллица: Полная поддержка русского языка
• Латиница: Поддержка английского и европейских языков
• Автоматическое переключение: Адаптация контента под выбранный язык

🎨 Визуальный предпросмотр

• Живой превью: Демонстрация шрифтов на реальном тексте
• Анимации переходов: Плавные эффекты при смене шрифтов
• Типографические элементы: Заголовки, основной текст, подписи

🔧 Технические особенности

API интеграция

• Google Fonts API: Доступ к полной библиотеке шрифтов
• Кэширование: Оптимизация загрузки и производительности
• Fallback шрифты: Резервные варианты при недоступности API

Алгоритм подбора

• Характеристики шрифтов: Анализ веса, насыщенности, сложности
• Совместимость: Расчет оптимального баланса между шрифтами
• История использований: Предотвращение повторений в недавних генерациях

Управление состоянием

• Локальное хранение: Сохранение выбранных шрифтов
• Telegram интеграция: Передача данных в Telegram бота
• Восстановление сессии: Сохранение состояния между запусками

🎨 UI/UX особенности

Интерактивные элементы

• Выбор шрифтов: Модальные окна с поиском и фильтрацией
• Фиксация шрифтов: Визуальные индикаторы закрепленных шрифтов
• Стилевые фильтры: Кнопки переключения между стилями шрифтов

Адаптивный дизайн

• Мобильная оптимизация: Сенсорные элементы и жесты
• PWA возможности: Установка как самостоятельное приложение
• Кросс-платформенность: Работа на всех современных браузерах

Образовательные элементы

• Стилевые описания: Информация о характеристиках каждого стиля
• Типографические советы: Рекомендации по использованию пар шрифтов
• Визуальные примеры: Демонстрация на реальном контенте

---

🛠️ Технический стек

Frontend

• HTML5: Семантическая разметка
• CSS3: Адаптивный дизайн с анимациями
• Vanilla JavaScript: Нативный JavaScript без фреймворков

API интеграции

• Google Fonts API: Библиотека шрифтов
• Colormind API: Генерация цветовых палитр
• Telegram Web Apps API: Интеграция с Telegram

Особенности реализации

• PWA готовность: Service Workers и Web App Manifest
• CORS обход: PHP прокси для внешних API
• Кэширование: Оптимизация загрузки ресурсов
• Адаптивность: Поддержка всех устройств и экранов

---

📱 Совместимость

• Браузеры: Chrome, Firefox, Safari, Edge (последние версии)
• Мобильные: iOS Safari, Chrome Mobile, Samsung Internet
• Telegram: Полная поддержка Telegram Web Apps
• PWA: Возможность установки как веб-приложения

---

⚙️ Настройка и установка

📋 Предварительные требования

• Python 3.9+
• Telegram Bot Token (получить у @BotFather)
• Google Cloud Project с Service Account (для Google Sheets)
• Веб-сервер (Apache/Nginx) с поддержкой PHP (для CORS прокси)

🔧 Настройка Telegram бота

1. Создайте бота у BotFather:

   /newbot
   Имя бота: Design Tools Bot
   Username: design_tools_bot
   

2. Получите ваш Telegram ID:

   • Напишите @userinfobot
   • Сохраните ваш ID

🌐 Настройка Google Sheets API

1. Создайте Google Cloud Project:

   • Перейдите в Google Cloud Console
   • Создайте новый проект

2. Включите Google Sheets API:

   • В APIs & Services > Library найдите "Google Sheets API"
   • Включите API

3. Создайте Service Account:

   • В APIs & Services > Credentials
   • Create Credentials > Service Account
   • Скачайте JSON ключ

4. Настройте таблицу Google Sheets:

   • Создайте новую таблицу
   • Поделитесь доступом с service account email
   • Скопируйте ID таблицы из URL

📁 Установка проекта

1. Клонируйте репозиторий:

   git clone https://github.com/your-username/design-bots.git
   cd design-bots

2. Установите зависимости:

   pip install -r requirements.txt

3. Настройте переменные окружения:

   cp .env.example .env
   # Отредактируйте .env файл с вашими данными

4. Настройте Google Sheets:

   cp gsheets_key.example.json gsheets_key.json
   # Вставьте содержимое вашего service account JSON

5. Обновите конфигурацию:

   • Отредактируйте config.py если необходимо
   • Проверьте ID Google Sheets таблицы

🎯 Запуск бота

# Запуск Telegram бота
python main.py

🌐 Запуск веб-сервера

# Вариант 1: Python
python -m http.server 8000

# Вариант 2: PHP (рекомендуется для продакшена)
# Настройте Apache/Nginx с поддержкой PHP
# Убедитесь что palette_proxy.php доступен

🔍 Проверка работы

1. Откройте веб-приложения:

   • http://localhost:8000/color-palette-app.html
   • http://localhost:8000/contrast-checker-app.html
   • http://localhost:8000/font-preview-app.html

2. Протестируйте бота:

   • Напишите вашему боту в Telegram
   • Попробуйте команды /start

🚨 Возможные проблемы

• CORS ошибки: Убедитесь что PHP прокси работает
• Google API ошибки: Проверьте credentials и доступ к таблице
• Bot API ошибки: Проверьте токен и права бота

---

🚀 Запуск

1. Клонировать репозиторий

   git clone <repository-url>
   cd design-tools

2. Запустить локальный сервер

   # Используя Python
   python -m http.server 8000
   
   # Или используя Node.js
   npx serve .

3. Открыть в браузере

   http://localhost:8000
   

---

📄 Лицензия

Проект распространяется под лицензией MIT. Подробности в файле LICENSE.

---

🤝 Вклад в проект

Приветствуются pull requests и issues на GitHub. Для крупных изменений, пожалуйста, сначала создайте issue для обсуждения предлагаемых изменений.