Telegram Mini App — Карты лояльности

Мини‑приложение для Telegram, позволяющее хранить, редактировать и использовать карты лояльности магазинов в виде штрихкодов.

Функционал

• ✅ Добавление карт лояльности (название магазина + номер штрихкода)
• ✅ Ручной ввод номера штрихкода
• ✅ Отображение штрихкода (Code128) при нажатии на карту
• ✅ Редактирование карты (название, штрихкод, цвет)
• ✅ Удаление карты с подтверждением
• ✅ Хранение данных в localStorage на устройстве пользователя
• ✅ Экспорт всех карт в JSON
• ✅ Импорт карт из JSON (файл или вставка текста)
• ✅ Ограничение доступа по Telegram user ID
• ✅ Адаптация под тему Telegram (цвета берутся из --tg-theme-*)
• ✅ Аккуратный UI:
  • отдельная панель с кнопками «Импорт / Экспорт / Редактирование»
  • панель по умолчанию свернута, открывается кнопкой‑стрелкой
  • иконки на кнопках через Lucide (SVG)

ВАЖНО: в текущей версии нет сканирования штрихкода с камеры (библиотека jsQR удалена и функционал отключён). Номера вводятся только вручную.

Технологии

• HTML5
• CSS3
• JavaScript (vanilla)
• Telegram WebApp API
• JsBarcode — генерация штрихкодов Code128
• Lucide — SVG‑иконки (через CDN)
• localStorage — хранение карт на стороне клиента

Ограничение доступа по Telegram ID

Приложение может работать только для выбранных Telegram‑пользователей.

В начале app.js задан список разрешённых id:

const ALLOWED_TELEGRAM_IDS = '23600704'; // список ID через запятую

Проверка выполняется через tg.initDataUnsafe.user.id:

• если user.id не найден или не входит в список ALLOWED_TELEGRAM_IDS, выводится сообщение вида
  «Доступ к приложению ограничен. Обратитесь к владельцу бота.»
  и основной интерфейс не инициализируется;
• если список пустой ('') — доступ разрешён всем.

Чтобы добавить новые разрешённые ID, отредактируйте строку:

const ALLOWED_TELEGRAM_IDS = ',123456789,987654321';

и заново задеплойте приложение.

UI и особенности интерфейса

• Главный экран:
  • заголовок «Мои карты лояльности»;
  • справа — кнопка с иконкой Lucide chevrons-down/chevrons-up, которая разворачивает/сворачивает панель действий.
• Панель действий (по умолчанию скрыта):
  • кнопка «Импорт» с иконкой upload;
  • кнопка «Экспорт» с иконкой download;
  • кнопка «Режим редактирования» с иконкой square-pen.
• При сворачивании панели автоматически выключается режим редактирования (подсветка кнопки и жёлтый лейбл исчезают).
• Режим редактирования:
  • при включении подсвечивается кнопка ✏️ и показывается жёлтый текст «Режим редактирования: нажмите на карту, чтобы изменить или удалить её»;
  • нажатие на карту в этом режиме открывает окно редактирования/удаления.
• Окно просмотра карты:
  • верхняя цветная полоса (цвет карты) с названием и крестиком закрытия;
  • белый блок со штрихкодом и номером;
  • закрытие по нажатию на крестик или на белую область.
• Окно редактирования:
  • изменение названия, штрихкода и цвета;
  • кнопка «Удалить карту» с подтверждением.

Подключение Lucide и иконок

Иконки Lucide подключаются через CDN в index.html:

<script src="https://unpkg.com/lucide@latest"></script>
<script src="app.js"></script>

В кнопках используются атрибуты data-lucide:

<button class="icon-btn header-toggle-btn" id="actionsToggleBtn">

</button>
<button class="icon-btn" id="importBtn">

</button>
<button class="icon-btn" id="exportBtn">

</button>
<button class="icon-btn" id="editModeToggleBtn">

</button>

В конце app.js иконки инициализируются:

if (window.lucide?.createIcons) {
window.lucide.createIcons();
}

При смене состояния кнопки раскрытия панели код обновляет иконку chevrons-down → chevrons-up и переинициализирует её только в пределах этой кнопки.

Установка и деплой

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

git clone ...

2. Отредактируйте при необходимости список разрешённых Telegram ID в app.js:

const ALLOWED_TELEGRAM_IDS = '122765504';

3. Задеплойте статические файлы (index.html, app.js, styles.css) на любой хостинг (например, Netlify, GitHub Pages и т.п.).
4. Создайте Telegram‑бота через @BotFather.
5. В настройках бота укажите URL вашего хостинга в качестве WebApp‑URL.
6. Откройте бота в Telegram и запустите мини‑приложение.

Использование

1. Откройте мини‑приложение через Telegram‑бота.
2. При необходимости разверните панель действий (кнопка со стрелкой справа от заголовка).
3. Нажмите «+ Добавить карту»:

• введите название магазина;
• введите номер штрихкода;
• выберите цвет карты;
• сохраните.

4. Нажмите на карту, чтобы увидеть штрихкод и номер.
5. Для редактирования:

• откройте панель действий;
• включите «Режим редактирования» (✏️);
• нажмите на нужную карту — откроется окно редактирования;
• при необходимости нажмите «Удалить карту» и подтвердите.

Лицензия

MIT