🗺️ Базова карта
Інтерактивна карта Leaflet
Розгортання map-двигуна з центром на Харкові, Canvas-рендерером та метричним масштабом для високої продуктивності
6 базових підкладок
Google (Рельєф, Дороги, Гібрид, Супутник), CARTO (Світла/Темна) та OSM з перемикачем у HUD
Військовий дизайн
Кастомна візуальна тема: темні панелі, зелений акцент, CSS-система змінних, радарна сітка та віньєтка
🎯 Система цілей
Каталог 11 типів загроз
Шахед, Гербера, Орлан, Молнія, Ланцет, КАБ, Ракета, Невідомий, Вибух, РСЗО, Балістика — з іконками та метаданими
Інтерактивні маркери
Маркери цілей з обертанням, червоним кільцем підсвітки, popup з параметрами та підтримкою drag-and-drop
Масштабування іконок по зуму
Динамічне оновлення розмірів іконок залежно від поточного zoom-рівня карти
Меню типів цілей
Горизонтальна карусель з іконками, назвами, гарячими клавішами 1-9 та кольоровим кодуванням категорій
📍 Маршрути та траєкторії
Лінія маршруту цілі
Основна лінія + тіньова підкладка, до 6 точок історії, плавні з'єднання
Лінія прогнозу руху
Пунктирна червона лінія прогнозованого напрямку на 3 км вперед на основі курсу
Вектор курсу
Пунктирна зелена лінія напрямку руху на 15 км на основі bearing або vector-даних
Відкат та видалення
ПКМ — повернення до попередньої точки маршруту; подвійний ПКМ — видалення цілі
🎖️ РСЗО: сектор загрози
Побудова сектора зураження
Дві лінії ±18° від курсу з автомасштабуванням радіуса по zoom-рівню
Режим задання курсу
Після постановки РСЗО наступний клік задає напрямок — будується сектор з підписом
Пульсація сектора
Анімація прозорості ліній для візуального ефекту «живого» сектора
🖥️ HUD оператора
Статус-бар
Центральна капсула з годинником та кількістю цілей у реальному часі
Позивний оператора
Мітка у лівому верхньому куті, текст підтягується з адмін-панелі
Панель HUD-кнопок
5 кнопок: Скрішнот (P), Координати (C), Зберегти (S), Очищення (DEL), Адмін панель
Адаптивний HUD для мобільних
На сенсорних пристроях кнопки трансформуються в компактні іконки з emoji
Координати під курсором
Відображення широти/довготи позиції миші з точністю 5 знаків
📸 Скріншоти та захоплення
Кроп-скріншот
Режим виділення ділянки хрестиком, захоплення через html2canvas з подвійним масштабом
Повноекранний скріншот
Кнопка «ФУЛЛ СКРІН» — одним натисканням знімає всю видиму область карти
Snap-режим
Автоматичне приховування всіх елементів UI під час скріншоту
Попередній перегляд
Модальне вікно з прев'ю, полем для підпису та автопідрахунком цілей
💧 Водяний знак
Текстова сітка
Повторюваний водяний знак @TLKnews з нахилом та адаптацією до теми карти
Логотип TLK
Рендеринг логотипу в капсулі з обводкою у правому верхньому куті знімка
Динамічна конфігурація
Завантаження активного пресета з адмін-панелі перед кожним скріншотом
Плашка часу та дисклеймер
Напівпрозора плашка з часом, кількістю цілей та інформаційним disclaimer
🤖 Telegram-бот
WebApp-інтеграція
Бот відкриває інтерактивну карту у Telegram через WebAppInfo
Перевірка підписки
Контроль підписки на канал @TLKnews перед показом карти
Команди /post та /stop
Публікація та завершення трансляції з перевіркою довірених адмін-ID
DM-сповіщення (/notify)
Підписка на персональні сповіщення про початок/завершення трансляцій
Розсилка підписникам (/broadcast)
Адмін-команда для надсилання текстових повідомлень усім підписникам бота з підтримкою HTML
⚙️ Адмін-панель
Дашборд зі статистикою
Статистика каналу, чату, підписників та статусу трансляції в реальному часі
Редактор водяного знака
Пресети, кольори, прозорість, шрифт, режим плитки/позиції з прев'ю на карті
Управління іконками
Завантаження, налаштування розмірів та назв іконок цілей
Редактор інтерфейсу карти
HUD, кнопки, стилі, кольори, видимість елементів з 5 пресетами
Налаштування маршрутів
Кольори, товщина, пунктир, згладжування, glow-ефект, trail-fade з SVG-прев'ю
Довірені адміністратори
Управління списком Telegram ID з правами на /post та /stop
Детальна інформація підписників
Telegram-профілі підписників DM-розсилки: ім'я, username, біо, фото
Розсилка з адмін-панелі
Форма відправки повідомлень підписникам з попереднім переглядом та статистикою доставки
🔒 Безпека
Серверна аутентифікація
Перевірка пароля на сервері з HttpOnly cookie-сесією на 24 години
Rate limiting
Обмеження 5 спроб/хв на авторизацію, 30 запитів/сек на API
Фаєрвол та заголовки
UFW, TLS 1.2+, HSTS, CSP-заголовки, fail2ban для захисту від атак
Basic Auth адмін-панелі
HTTP-авторизація на рівні nginx для адмін-панелі
📋 Журнал оновлень та нові розділи
Кнопка «Оновлення» на карті та viewer
Кнопка 🔄 у лівому нижньому куті обох карт — відкриває повний журнал оновлень проєкту з адаптивним модальним вікном для ПК, планшетів та мобільних
Розділ «Інструкції та оновлення» в адмін-панелі
Новий розділ з детальним описом оновлень безпеки, корисними SSH-командами, таблицею розташування файлів та схемою архітектури
Темна/світла тема адмін-панелі
Перемикач 🌙/☀️ у хедері — повна кольорова адаптація панелі, збереження вибору у localStorage
Мобільна адаптація адмін-панелі
Бургер-меню для мобільних пристроїв, висувний сайдбар з оверлеєм, авто-закриття при переключенні вкладок
Автооновлення дашборду
Дашборд автоматично оновлює дані кожні 30 секунд — статус сервісів, статистика, підписники
Журнал дій (Аудит-лог)
Автоматична фіксація всіх дій: зміна стріму, розсилки, конфігу, управління сервісами, входи. Окремий розділ з можливістю очищення
Бекап/імпорт конфігурації
Повний експорт налаштувань панелі (водяний знак, іконки, маршрути, UI, стрім) в JSON. Імпорт конфігу одним кліком
Health Check з Telegram-алертами
Перевірка стану всіх 9 сервісів за одну кнопку. Автоматичне Telegram-сповіщення адміністраторам при збоях
Графіки активності (Chart.js)
Інтерактивні графіки за 30 днів: кількість стрімів, логінів, розсилок та доданих цілей з автоматичним збором статистики
🛠️ Оновлення 09.02.2026
HUD-панель — перенесена в центр
Інформаційне вікно з часом, кількістю та типами цілей перенесене з правого верхнього кута в центр верхньої частини екрану. Горизонтальна прямокутна компактна полоска — не заважає роботі з картою
Виправлено перекриття кнопок зуму
У всіх пресетах (Command, Hex, Orbital, Sidebar, Cinema, Float) кнопки зуму зсунуті нижче статус-бару та не перекриваються іншими елементами
Виправлено накладання меню та кнопок
Кнопка трансляції, кнопка оновлень та меню цілей розведені по всіх пресетах — більше не накладаються одне на одне. В Sidebar кнопка трансляції винесена за межі бокової панелі
«Трансляція» → «Трансляція в бот»
Кнопка трансляції перейменована для кращого розуміння — тепер чітко вказує що трансляція здійснюється в Telegram-бот
Контекстне меню цілі — не виходить за екран
Меню управління ціллю (ПКМ / довгий тап) тепер автоматично корегує позицію щоб не виходити за межі екрана з будь-якого боку
Завантаження логотипу з адмін-панелі
Новий розділ у налаштуваннях водяного знака — завантаження власного логотипу (JPG, PNG, WebP) з прев'ю та перетягуванням для зміни позиції на скріншотах
Прев'ю водяного знака відповідає скріншоту
Прев'ю в адмін-панелі тепер використовує ті самі шрифти (Trebuchet MS), обведення тексту, масштабування та шаблон плитки що й реальний скріншот
Зміна типу цілі з контекстного меню
У меню ПКМ по цілі додана сітка іконок для швидкої зміни типу (Шахед → Ракета і т.д.) з коректним оновленням секторів РСЗО
Кнопка довідки (?)
У правому верхньому куті додана кнопка з повними інструкціями користування картою для ПК, мобільних та планшетів
Тактильний відгук (вібрація)
На мобільних пристроях при довгому тапі на ціль виконується коротка вібрація для підтвердження відкриття меню
Гаряча клавіша Delete
Натискання Delete/Backspace на клавіатурі видаляє виділену ціль (якщо курсор не у полі вводу)
РСЗО-лінії в карті Telegram-бота
Карта трансляції тепер показує сектори ураження РСЗО з підписами — синхронізовано з основною веб-картою
Діагностична система
В адмін-панелі у розділі «Система» додана діагностика з автовиправленням типових помилок — перевірка прав, сервісів, дисків, SSL та Nginx