docs: скриншоты UI (светлая/тёмная тема) в app/docs и README

- app/docs/screenshots.md и каталог app/docs/images/*.png - раздача /static/docs-images/* из FastAPI; documentation.js переписывает src картинок - стили .markdown-body img; строка в api_routes.md; превью в README
2026-04-05 01:18:22 +03:00
parent ec5eedb838
commit c49555b3b9
16 changed files with 120 additions and 2 deletions
@@ -28,6 +28,7 @@
 | `GET /documentation` | HTML-оболочка; **`documentation.js`**: без `path` — **`GET /api/v1/docs/readme`**, с `?path=app/docs/…` — **`GET /api/v1/docs/file`**; разбор Markdown из **`/static/js/vendor/`** (marked, DOMPurify). Полноэкранный спиннер при первой загрузке и при **каждом** переходе по внутренним ссылкам / **popstate**. Каждая секция по **H2** — **одна карточка** (заголовок h2 и содержимое до следующего h2 вместе). Заголовок вкладки браузера: **«Документация — …»** + текст **первого H1** документа + имя приложения (`KIND_K8S_APP_TITLE` на `body`). В шапке на этой странице активна только **Документация**; **Панель** как обычная пилюля (на дашборде активна **Панель**). Путь к README: `KIND_K8S_README_PATH` или `README.md` рядом с `app/`; в образе — `/opt/kind-k8s/README.md`. |
 | `GET /ui` | Редирект **307** на `/` (удобный ярлык). |
 | `GET /static/…` | CSS (`style.css`), скрипты панели (`js/dashboard.js`) и документации (`js/documentation.js`); базовый URL API задаётся атрибутом `data-api-base` на `<body>` (по умолчанию `/api/v1`). |
+| `GET /static/docs-images/…` | PNG из **`app/docs/images/`** для страницы **`/documentation`** (в Markdown пути вида `images/*.png` в **`documentation.js`** переписываются на этот префикс; см. **`app/docs/screenshots.md`**). |

 Шаблоны: `app/templates/base.html` (шапка, навигация; **меню «гамбургер»** при узком viewport — `nav-mobile.js`), `app/templates/dashboard.html` (панель), `app/templates/clusters.html` (список кластеров и донаты узлов), `app/templates/cluster_create.html` (создание кластера и последние задания), `app/templates/cluster_detail.html` (страница кластера), `app/templates/cluster_edit.html` (редактирование конфигурации), `app/templates/cluster_addons.html` (Helm-аддоны), `app/templates/journal.html` (журнал заданий), `app/templates/documentation.html` (README и `app/docs/*.md`).

@@ -0,0 +1,63 @@
+# Скриншоты интерфейса
+
+Снимки экрана в **светлой** и **тёмной** теме (переключатель темы в шапке). Исходные файлы лежат в каталоге **`app/docs/images/`** (в репозитории рядом с этим файлом).
+
+Открыть в веб-приложении: страница **«Документация»** → путь **`app/docs/screenshots.md`**.
+
+---
+
+## Главная панель
+
+**Светлая тема**
+
+![Главная панель, светлая тема](images/dashboard-light.png)
+
+**Тёмная тема**
+
+![Главная панель, тёмная тема](images/dashboard-dark.png)
+
+## Страница «Кластеры»
+
+Снимок в тёмной теме (отдельный скрин светлой темы не добавлялся).
+
+![Кластеры, тёмная тема](images/clusters-dark.png)
+
+## Создание кластера
+
+Снимок в светлой теме.
+
+![Создание кластера, светлая тема](images/create-cluster-light.png)
+
+## Аддоны (Helm)
+
+**Светлая тема**
+
+![Аддоны, светлая тема](images/addons-light.png)
+
+**Тёмная тема**
+
+![Аддоны, тёмная тема](images/addons-dark.png)
+
+## Встроенная документация (Markdown)
+
+**Светлая тема**
+
+![Документация в UI, светлая тема](images/docs-light.png)
+
+**Тёмная тема**
+
+![Документация в UI, тёмная тема](images/docs-dark.png)
+
+## Журнал
+
+**Светлая тема**
+
+![Журнал, светлая тема](images/logs-light.png)
+
+**Тёмная тема**
+
+![Журнал, тёмная тема](images/logs-dark.png)
+
+---
+
+*Автор: Сергей Антропов — https://devops.org.ru*