PetProject/logboard
PetProject/logboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Полностью переписан README.md с подробным описанием всего функционала

Browse Source 
- Добавлено полное описание всех возможностей LogBoard+
- Подробная документация по установке и настройке
- Описание API endpoints и WebSocket соединений
- Инструкции по развертыванию в продакшне
- Примеры конфигурации для Docker Swarm и Kubernetes
- Документация по безопасности и мониторингу
- Описание режимов Single View и Multi View
- Руководство по разработке и отладке
This commit is contained in:
Сергей Антропов 2025-08-17 19:02:20 +03:00
parent a490c41b76
commit c196c4e65f
1 changed files with 422 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

757
README.md
View File

@ -1,358 +1,439 @@
# LogBoard+ # LogBoard+ - Веб-панель для просмотра логов микросервисов
Веб-интерфейс для просмотра логов Docker контейнеров в реальном времени с современной системой авторизации. **Автор:** Сергей Антропов
**Сайт:** https://devops.org.ru
**Версия:** 1.0.0
## 🔐 Новая система авторизации ## 📋 Описание
LogBoard+ теперь использует современную систему авторизации на основе JWT токенов вместо Basic Auth: LogBoard+ - это современная веб-панель для просмотра логов Docker контейнеров в реальном времени. Приложение предоставляет удобный интерфейс для мониторинга логов микросервисов с поддержкой множественного просмотра, фильтрации, поиска и экспорта логов.
### Основные изменения: ## ✨ Основные возможности
- **JWT токены** вместо Basic Auth
- **Страница входа** с красивым интерфейсом
- **Безопасные сессии** с автоматическим истечением
- **Защищенные API** эндпоинты
- **Автоматическое перенаправление** на страницу входа при отсутствии авторизации
### Как использовать: ### 🔍 Просмотр логов
1. **Откройте LogBoard+** в браузере - **Single View режим** - просмотр логов одного контейнера
2. **Автоматически перенаправление** на страницу входа - **Multi View режим** - одновременный просмотр логов нескольких контейнеров
3. **Введите логин и пароль** (по умолчанию: admin/admin123) - **Real-time обновление** через WebSocket соединения
4. **Получите доступ** к панели управления логами - **Автопрокрутка** логов
5. **Используйте кнопку "Выйти"** для завершения сессии - **Пауза/возобновление** потока логов
### Настройка пользователей: ### 🎨 Интерфейс
В файле `.env` или `docker-compose.yml`: - **Современный адаптивный дизайн**
- **Темная и светлая темы**
- **Мобильная версия**
- **Интуитивно понятная навигация**
### 🔧 Управление логами
- **Фильтрация по уровням логирования** (DEBUG, INFO, WARN, ERROR, OTHER)
- **Поиск по регулярным выражениям**
- **Настройка количества строк** (Tail Lines)
- **Перенос строк** (Word Wrap)
- **Счетчики логов** по уровням
### 📊 Статистика и мониторинг
- **Счетчики логов** в реальном времени
- **Статистика по уровням логирования**
- **Мониторинг состояния контейнеров**
- **Health check статусы**
### 💾 Экспорт и сохранение
- **Скачивание логов** в формате .log
- **Отдельные файлы** для каждого контейнера в Multi View режиме
- **Автоматическое именование файлов** с временными метками
- **Сохранение снимков** логов
### 🔐 Безопасность
- **JWT аутентификация**
- **Настраиваемые пользователи**
- **Защищенные API endpoints**
- **Шифрование чувствительных данных**
## 🚀 Быстрый старт
### Предварительные требования
- Docker и Docker Compose
- Python 3.8+
- Доступ к Docker socket
### Установка и запуск
1. **Клонирование репозитория**
```bash ```bash
git clone <repository-url>
cd logboard
```
2. **Настройка переменных окружения**
```bash
make setup
# Отредактируйте .env файл под свои нужды
```
3. **Генерация docker-compose.yml**
```bash
make generate
```
4. **Запуск приложения**
```bash
make up
```
5. **Открытие в браузере**
```
http://localhost:9001
```
### Команды управления
```bash
make help # Показать справку по командам
make setup # Настроить переменные окружения
make generate # Сгенерировать docker-compose.yml
make build # Собрать Docker образ
make up # Запустить сервисы
make down # Остановить сервисы
make restart # Перезапустить сервисы
make logs # Показать логи
make status # Показать статус сервисов
make shell # Подключиться к контейнеру
make clean # Очистить проект
```
## ⚙️ Конфигурация
### Основные настройки (.env)
```bash
# Основные настройки приложения
LOGBOARD_PORT=9001 # Порт приложения
LOGBOARD_TAIL=500 # Количество строк логов по умолчанию
LOGBOARD_USER=admin # Имя пользователя LOGBOARD_USER=admin # Имя пользователя
LOGBOARD_PASS=admin123 # Пароль LOGBOARD_PASS=s3cret-change-me # Пароль
SECRET_KEY=your-secret-key # Секретный ключ для JWT
SESSION_TIMEOUT=3600 # Время жизни сессии в секундах # Директория для снимков логов
LOGBOARD_SNAPSHOT_DIR=/app/snapshots
# Фильтр по проекту Docker Compose
COMPOSE_PROJECT_NAME=myproj
# Настройки множественных проектов
LOGBOARD_PROJECTS=project1,project2,project3
# Настройки безопасности
SECRET_KEY=your-secret-key-here
ENCRYPTION_KEY=your-encryption-key-here
# Настройки производительности
MAX_CONNECTIONS=100
CONNECTION_TIMEOUT=30
READ_TIMEOUT=60
# Настройки аутентификации
AUTH_ENABLED=true
AUTH_METHOD=jwt
SESSION_TIMEOUT=3600
``` ```
## Исправления дублирования строк и правильных переносов строк в режимах Single View и MultiView ### Docker сети
### Проблема Приложение поддерживает подключение к внешним Docker сетям:
В режимах Single View и MultiView происходило дублирование строк логов и проблемы с переносами строк между логами, что затрудняло чтение и анализ логов.
### Внесенные исправления ```yaml
networks:
#### Для режима Single View: - default: {}
- iaas:
1. **Обработка дублированных строк в WebSocket данных** external: true
- Добавлена проверка на дублирование в функции `openWs` - infrastructure_iaas:
- Используются только уникальные строки из входящих данных external: true
2. **Проверка дублирования при добавлении строк**
- Добавлена проверка на дублирование в функции `handleLine` для Single View
- Пропускаются дублированные строки перед добавлением в интерфейс
3. **Правильные переносы строк**
- Добавлены переносы строк `\n` после каждой строки лога для читаемости
- Создана функция `processSingleViewSpecialReplacements()` для обработки строк
- Улучшена функция `cleanSingleViewEmptyLines()` для сохранения переносов строк
4. **Универсальная функция очистки**
- Создана функция `cleanDuplicateLines()` для удаления последовательных дубликатов
- Работает как для Single View, так и для MultiView
5. **Периодическая очистка**
- Добавлена очистка дублированных строк при обновлении счетчиков
- Очистка выполняется при обновлении логов и фильтров
#### Для режима MultiView:
1. **Предотвращение одновременного отображения в обычном и multi-view режимах**
- Логи теперь отображаются только в одном режиме одновременно
- Добавлена проверка `!state.multiViewMode` в функции `handleLine`
2. **Обработка дублированных строк в WebSocket данных**
- Добавлена проверка на дублирование в функции `openMultiViewWs`
- Используются только уникальные строки из входящих данных
3. **Функция очистки дублированных строк**
- Создана функция `cleanMultiViewDuplicateLines()` для удаления последовательных дубликатов
- Функция вызывается при добавлении новых строк и периодически
4. **Улучшенная обработка специальных случаев**
- Улучшена функция `processMultiViewSpecialReplacements()` для обработки строк с "FoundINFO:"
- Добавлена проверка на дублирование в исходном тексте
5. **Периодическая очистка**
- Добавлена периодическая очистка дублированных строк каждую секунду
- Очистка выполняется при обновлении логов и фильтров
### Тестирование
Для тестирования исправлений используйте в консоли браузера:
```javascript
testDuplicateRemoval() // Тест функции очистки дубликатов MultiView
testSingleViewDuplicateRemoval() // Тест функции очистки дубликатов Single View
testSingleViewEmptyLinesRemoval() // Тест функции очистки пустых строк Single View
testSingleViewLineBreaks() // Тест правильного отображения переносов строк
checkMultiViewHTML() // Проверка HTML на наличие дубликатов
cleanDuplicateLines() // Универсальная функция очистки дубликатов
cleanSingleViewEmptyLines() // Функция очистки пустых строк
``` ```
## 🔌 API Endpoints
### Аутентификация
- `POST /api/auth/login` - Вход в систему
- `POST /api/auth/logout` - Выход из системы
- `GET /api/auth/me` - Информация о текущем пользователе
### Сервисы и контейнеры
- `GET /api/services` - Список всех сервисов/контейнеров
- `GET /api/projects` - Список проектов Docker Compose
- `GET /api/logs/stats/{container_id}` - Статистика логов контейнера
### Управление исключениями
- `GET /api/excluded-containers` - Список исключенных контейнеров
- `POST /api/excluded-containers` - Добавить контейнер в исключения
### Снимки логов
- `POST /api/snapshot` - Создать снимок логов
### WebSocket endpoints
- `WS /ws/logs/{container_id}` - Поток логов контейнера
- `WS /ws/fan/{service_name}` - Агрегированный поток логов сервиса
- `WS /ws/fan_group` - Групповой поток логов
### Системные
- `GET /healthz` - Проверка здоровья приложения
- `GET /` - Главная страница
- `GET /login` - Страница входа
## 🎯 Режимы просмотра
### Single View режим
- Просмотр логов одного выбранного контейнера
- Полноэкранный режим отображения
- Детальная статистика по уровням логирования
- Возможность паузы и возобновления потока
### Multi View режим
- Одновременный просмотр логов нескольких контейнеров
- Адаптивная сетка (1-4 колонки в зависимости от количества контейнеров)
- Отдельные счетчики для каждого контейнера
- Возможность скачивания отдельных файлов логов для каждого контейнера
## 🔍 Фильтрация и поиск
### Уровни логирования
- **DEBUG** - Отладочная информация
- **INFO** - Информационные сообщения
- **WARN** - Предупреждения
- **ERROR** - Ошибки
- **OTHER** - Прочие сообщения
### Поиск
- **Регулярные выражения** для поиска в логах
- **Фильтрация в реальном времени**
- **Подсветка найденных совпадений**
### Настройки отображения
- **Tail Lines** - количество отображаемых строк
- **Word Wrap** - перенос длинных строк
- **Автопрокрутка** - автоматическая прокрутка к новым логам
## 📱 Мобильная версия
Приложение полностью адаптивно и поддерживает:
- **Адаптивный дизайн** для мобильных устройств
- **Сенсорное управление**
- **Оптимизированный интерфейс** для маленьких экранов
- **Боковое меню** для мобильных устройств
## 🔧 Расширенные возможности
### Управление проектами
- **Множественные проекты** Docker Compose
- **Фильтрация по проектам**
- **Переключение между проектами**
### Исключения контейнеров
- **Добавление контейнеров в исключения**
- **Постоянное хранение исключений**
- **Управление через веб-интерфейс**
### Мониторинг состояния
- **Health check статусы** контейнеров
- **Фильтрация нездоровых контейнеров**
- **Автоматическое обновление статусов**
### Производительность
- **Ограничение количества соединений**
- **Таймауты для операций**
- **Оптимизированная обработка логов**
- **Кэширование данных**
## 🛠️ Разработка
### Структура проекта
```
logboard/
├── app.py # Основное приложение FastAPI
├── docker-compose.yml # Конфигурация Docker Compose
├── Dockerfile # Docker образ
├── requirements.txt # Зависимости Python
├── templates/ # HTML шаблоны
│ ├── index.html # Главная страница
│ ├── login.html # Страница входа
│ └── error.html # Страницы ошибок
├── scripts/ # Вспомогательные скрипты
│ └── generate-compose.py
├── snapshots/ # Директория для снимков логов
├── Makefile # Команды управления
├── env.example # Пример переменных окружения
└── README.md # Документация
```
### Технологии
- **Backend**: FastAPI, Python 3.8+
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
- **WebSocket**: Асинхронные соединения для real-time логов
- **Docker**: Интеграция с Docker API
- **JWT**: Аутентификация и авторизация
- **Docker Compose**: Управление контейнерами
### Разработка и отладка
```bash
# Запуск в режиме разработки
make dev
# Подключение к контейнеру
make shell
# Просмотр логов
make logs
# Пересборка
make rebuild
```
## 🔒 Безопасность
### Аутентификация
- **JWT токены** для сессий
- **Настраиваемые пользователи** через переменные окружения
- **Автоматический выход** по истечении сессии
- **Защищенные API endpoints**
### Шифрование
- **Шифрование чувствительных данных** с помощью Fernet
- **Безопасное хранение** токенов и паролей
- **Защищенные переменные окружения**
### Сетевая безопасность
- **HTTPS поддержка** (при настройке)
- **Валидация входных данных**
- **Защита от XSS и CSRF атак**
## 📊 Мониторинг и логирование
### Логирование приложения
- **Настраиваемые уровни логирования** (DEBUG, INFO, WARN, ERROR)
- **JSON формат** логов
- **Структурированное логирование**
### Метрики
- **Количество активных соединений**
- **Статистика WebSocket соединений**
- **Время отклика API**
- **Использование ресурсов**
### Health checks
- **Проверка состояния** приложения
- **Мониторинг Docker соединения**
- **Проверка доступности** зависимостей
## 🚀 Развертывание
### Продакшн настройки
1. **Настройка безопасности**
```bash
# Измените секретные ключи
SECRET_KEY=your-production-secret-key
ENCRYPTION_KEY=your-production-encryption-key
# Настройте пользователей
LOGBOARD_USER=your-admin-user
LOGBOARD_PASS=your-secure-password
```
2. **Настройка сети**
```bash
# Настройте внешние сети
DOCKER_NETWORKS=your-network1,your-network2
```
3. **Настройка производительности**
```bash
# Увеличьте лимиты для продакшна
MAX_CONNECTIONS=500
CONNECTION_TIMEOUT=60
READ_TIMEOUT=120
```
### Docker Swarm
```yaml
version: '3.8'
services:
logboard:
image: logboard:latest
deploy:
replicas: 2
resources:
limits:
memory: 512M
reservations:
memory: 256M
networks:
- logboard-network
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
- logboard-snapshots:/app/snapshots
```
### Kubernetes
```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: logboard
spec:
replicas: 2
selector:
matchLabels:
app: logboard
template:
metadata:
labels:
app: logboard
spec:
containers:
- name: logboard
image: logboard:latest
ports:
- containerPort: 9001
volumeMounts:
- name: docker-sock
mountPath: /var/run/docker.sock
- name: snapshots
mountPath: /app/snapshots
volumes:
- name: docker-sock
hostPath:
path: /var/run/docker.sock
- name: snapshots
persistentVolumeClaim:
claimName: logboard-snapshots
```
## 🤝 Поддержка и обратная связь
### Автор ### Автор
Сергей Антропов - **Сергей Антропов**
Сайт: https://devops.org.ru - **Сайт**: https://devops.org.ru
- **Email**: [contact@devops.org.ru]
LogBoard+ — это веб-панель для просмотра логов микросервисов из `docker-compose` в **реальном времени** с поддержкой: ### Сообщество
- Вкладок по сервисам и репликам - **Issues**: Сообщайте о багах и предлагайте улучшения
- Темная/светлая темы - **Pull Requests**: Приветствуются вклады в развитие проекта
- Подсветка ANSI-цветов из логов - **Документация**: Помогите улучшить документацию
- Фильтрация по уровням (`debug`, `info`, `warn`, `error`)
- Снимки логов в файл (`snapshot`) ### Лицензия
- Объединение всех реплик сервиса в одну вкладку (**aggregate**) Проект распространяется под лицензией MIT.
- Fan-in группировка нескольких сервисов в одну панель (**group**)
- Цветовые теги по короткому ID контейнера ## 📝 Changelog
- Sticky-фильтры по репликам
- Пауза/возобновление стрима ### v1.0.0 (2024-12-17)
- Basic Auth для доступа - ✨ Первый релиз LogBoard+
- Автопереподключение вебсокетов - 🔍 Поддержка Single View и Multi View режимов
- Поддержка нескольких клиентов одновременно - 🔐 JWT аутентификация
- 📱 Адаптивный дизайн
- 🔧 Полная интеграция с Docker API
- 📊 Статистика и мониторинг логов
- 💾 Экспорт логов в файлы
- 🎨 Темная и светлая темы
--- ---
## Установка и запуск **LogBoard+** - современное решение для мониторинга логов микросервисов в Docker среде.
### Быстрый старт с Makefile (рекомендуется)
```bash
# Распаковать проект
unzip logboard_plus_fanin_groups.zip
cd logboard_plus
# Показать доступные команды
make help
# Настроить переменные окружения
make setup
# Отредактировать .env файл под свои нужды (опционально)
# nano .env
# Собрать и запустить проект
make build
make up
# Открыть в браузере
http://localhost:9001
```
### Команды Makefile
| Команда | Описание |
|---------|----------|
| `make help` | Показать справку по всем командам |
| `make setup` | Настроить переменные окружения (копировать env.example в .env) |
| `make generate` | Сгенерировать docker-compose.yml из .env файла |
| `make build` | Собрать Docker образ |
| `make up` | Запустить сервисы в фоновом режиме (с правами root) |
| `make down` | Остановить и удалить сервисы (с правами root) |
| `make restart` | Перезапустить сервисы (с правами root) |
| `make logs` | Показать логи сервисов в реальном времени |
| `make logs-tail` | Показать последние 100 строк логов |
| `make status` | Показать статус сервисов |
| `make clean` | Остановить сервисы и удалить образы |
| `make shell` | Подключиться к контейнеру |
| `make dev` | Запуск в режиме разработки (с выводом логов) |
| `make rebuild` | Пересобрать и запустить сервисы |
### Настройка переменных окружения
Проект использует файл `.env` для хранения всех настроек. Для настройки:
1. **Автоматическая настройка:**
```bash
make setup
```
2. **Ручная настройка:**
```bash
cp env.example .env
nano .env # или любой другой редактор
```
#### Основные переменные окружения:
| Переменная | Описание | Значение по умолчанию |
|------------|----------|----------------------|
| `LOGBOARD_PORT` | Порт веб-интерфейса | `9001` |
| `LOGBOARD_USER` | Имя пользователя для авторизации | `admin` |
| `LOGBOARD_PASS` | Пароль для авторизации | `admin123` |
| `LOGBOARD_TAIL` | Количество строк истории | `500` |
| `LOGBOARD_SNAPSHOT_DIR` | Директория для снимков | `/app/snapshots` |
| `LOGBOARD_INDEX_HTML` | Путь к HTML шаблону | `./templates/index.html` |
| `TZ_TS` | Временная зона для меток времени | (пусто) |
| `COMPOSE_PROJECT_NAME` | Фильтр по проекту Docker Compose | (пусто) |
| `LOGBOARD_PROJECTS` | Множественные проекты (через запятую) | (пусто) |
| `DOCKER_NETWORKS` | Внешние Docker сети (через запятую) | `iaas,infrastructure_iaas` |
| `LOGBOARD_SKIP_UNHEALTHY` | Пропускать нездоровые контейнеры | `true` |
| `LOGBOARD_CONTAINER_LIST_TIMEOUT` | Таймаут получения списка контейнеров (сек) | `10` |
| `LOGBOARD_CONTAINER_INFO_TIMEOUT` | Таймаут получения информации о контейнере (сек) | `3` |
| `LOGBOARD_HEALTH_CHECK_TIMEOUT` | Таймаут проверки health status (сек) | `2` |
| `SECRET_KEY` | Секретный ключ для шифрования | `your-secret-key-here` |
| `ENCRYPTION_KEY` | Ключ шифрования | `your-encryption-key-here` |
**⚠️ Важно:** Измените значения `LOGBOARD_PASS`, `SECRET_KEY` и `ENCRYPTION_KEY` в продакшене! Для безопасности используйте сложные пароли и уникальные секретные ключи.
### Работа с множественными проектами
LogBoard+ поддерживает работу с несколькими проектами Docker Compose одновременно:
#### Через веб-интерфейс:
1. **Откройте LogBoard+** в браузере
2. **Используйте селектор "Projects"** в верхней панели
3. **Выберите проект** из списка или "All Projects" для всех
4. **Просматривайте логи** контейнеров выбранного проекта
#### Через переменные окружения:
1. **Укажите проекты в .env файле:**
```bash
LOGBOARD_PROJECTS=project1,project2,project3
```
2. **Перезапустите LogBoard+:**
```bash
make restart
```
#### API эндпоинты:
- `GET /api/projects` - получить список всех проектов
- `GET /api/services?projects=project1,project2` - получить контейнеры конкретных проектов
### Настройка Docker сетей
Для подключения к внешним Docker сетям (например, для работы с другими проектами):
1. **Укажите сети в .env файле:**
```bash
DOCKER_NETWORKS=iaas,infrastructure_iaas,myproject_network
```
2. **Сгенерируйте docker-compose.yml:**
```bash
make generate
```
3. **Убедитесь, что сети существуют:**
```bash
docker network ls
```
4. **Создайте сети, если их нет:**
```bash
docker network create iaas
docker network create infrastructure_iaas
```
### Настройка прав доступа к Docker
Приложение запускается с правами root для корректного доступа к Docker socket. Если вы хотите запускать без прав root, добавьте вашего пользователя в группу docker:
```bash
sudo usermod -a -G docker $USER
# Перезагрузите систему или перелогиньтесь
```
### Фильтрация контейнеров
LogBoard+ автоматически пропускает контейнеры с проблемными health check для предотвращения зависания приложения. Это особенно полезно в средах с множеством контейнеров, где некоторые могут быть нездоровыми.
**Настройки фильтрации:**
- `LOGBOARD_SKIP_UNHEALTHY=true` - пропускать нездоровые контейнеры
- `LOGBOARD_CONTAINER_LIST_TIMEOUT=10` - таймаут получения списка контейнеров
- `LOGBOARD_CONTAINER_INFO_TIMEOUT=3` - таймаут получения информации о контейнере
- `LOGBOARD_HEALTH_CHECK_TIMEOUT=2` - таймаут проверки health status
**Логирование:**
Приложение выводит в логи информацию о пропущенных контейнерах:
```
⚠️ Пропускаем нездоровый контейнер frontend-iaas (ID: 17c539b2e4dd)
⚠️ Таймаут при получении health status для контейнера problem-container (ID: abc123def456)
```
### Классический способ
```bash
# Распаковать проект
unzip logboard_plus_fanin_groups.zip
cd logboard_plus
# Настроить переменные окружения
cp env.example .env
# Отредактировать .env файл
# Запуск через docker-compose
docker compose up --build -d
# Открыть в браузере
http://localhost:9001
```
По умолчанию логин/пароль для авторизации задаются в `docker-compose.yml`:
```yaml
environment:
- LOGBOARD_USER=admin
- LOGBOARD_PASS=admin123
```
---
## Интерфейс
### Верхняя панель
- **Тема** — переключатель тёмной/светлой темы
- **aggregate** — собирает все реплики сервиса в одну вкладку
- **group** — собирает несколько сервисов в один поток логов
- **snapshot** — сохраняет текущие логи этой панели в файл
- **tail** — количество строк истории при подключении
### Панель вкладок
- Вкладки по сервисам и репликам
- Клик по вкладке — открыть поток логов
- Цветной чип `[id]` — уникальная реплика, цвет закреплён
- Чекбоксы под вкладками — фильтр по репликам
### Логи
- Цвета в логах из ANSI-кодов
- Фильтрация по уровню (`debug`, `info`, `warn`, `error`)
- Пауза/возобновление стрима
- При выделении текста появляется кнопка "Копировать"
---
## Fan-in группировка
Позволяет объединить несколько разных сервисов в один поток:
1. Нажмите кнопку **group** вверху
2. Введите имена сервисов через запятую (например: `api, worker, scheduler`)
3. Откроется панель с логами всех указанных сервисов, с префиксом `[id service]`
4. Можно фильтровать по конкретным репликам внизу
---
## Советы
- Если контейнер перезапустился — поток автоматически переподключается
- Можно открыть несколько вкладок браузера с разными сервисами — всё работает параллельно
- Для больших проектов удобно держать одну панель с `aggregate`, вторую — с `group` по критическим сервисам
---
## Лицензия
MIT
## Скриншоты
Тёмная тема:
![Dark](screenshots/dark.png)
Светлая тема:
![Light](screenshots/light.png)