Обновлена ИБ-тема на зеленую палитру

.gitignore

@@ -3,3 +3,13 @@ __pycache__/
 .venv/
 CONTEXT.md
 CONTEXT.local.md
+backups/
+infra1
+infra2
+infra3
+infra4
+иб1
+иб2
+иб3
+иб4
+Z-card_РФ.xlsx

CONTEXT.md

@@ -6,13 +6,23 @@
 - в двух режимах: `Инфраструктура` и `ИБ`.
 
 ## Основные файлы
-- `main.py` - Flask-приложение (главная страница, API, админка, инициализация/миграция БД, импорт ИБ при необходимости).
+- `main.py` - минимальный entrypoint Flask-приложения (запуск `app`).
+- `zkart_app/__init__.py` - фабрика/инициализация приложения (`create_app`, регистрация роутов, `init_db`).
+- `zkart_app/config.py` - конфиг и константы (пути, `ADMIN_PATH`, логин/пароль, env-флаги).
+- `zkart_app/routes.py` - HTTP-роуты (`/`, `/api/data`, `/health`, админка, `/assets/mont-logo`).
+- `zkart_app/db.py` - работа с SQLite, схемы, сидинг, импорт из `infra1-4`, загрузка матриц из XLSX.
+- `templates/index.html` - шаблон главной страницы.
+- `templates/admin.html` - шаблон админки.
+- `templates/login.html` - шаблон логина в админку.
+- `static/css/*` - стили интерфейса (главная/админка/логин).
+- `static/js/*` - клиентские скрипты (главная/админка).
 - `requirements.txt` - зависимости Python.
 - `matrix.db` - SQLite-база со всеми сущностями по двум режимам.
 - `Dockerfile` - контейнеризация приложения.
 - `docker-compose.yml` - запуск сервиса в Docker.
 - `.dockerignore` - исключения для docker build context.
 - `mont_logo.png` - логотип, используется на главной.
+- `favicon.png` - favicon сайта.
 
 ## Роуты
 - `/` - основной интерфейс с фильтрами.

Dockerfile

@@ -12,4 +12,4 @@ COPY . .
 
 EXPOSE 8000
 
-CMD ["gunicorn", "-w", "3", "-b", "0.0.0.0:8000", "main:app", "--timeout", "60"]
+CMD ["sh", "-c", "gunicorn -w ${WEB_CONCURRENCY:-4} --threads ${GUNICORN_THREADS:-5} -b 0.0.0.0:8000 main:app --timeout 60"]

README.md

@@ -1,31 +1,49 @@
 # MONT Vendor Maps
 
 Flask-приложение для визуализации и редактирования матрицы:
-- вендор -> продукты -> категории
-- в двух режимах: Инфраструктура и ИБ
+- `вендор -> продукты -> категории`
+- два контура: `Инфраструктура` и `ИБ`
 
 ## Возможности
-- фильтрация по вендорам и категориям
+- фильтрация по вендорам и категориям на главной
 - отображение продуктов по выбранным фильтрам
-- переключение контуров `Инфраструктура / ИБ`
-- отдельный визуальный стиль для ИБ
-- админ-панель с редактированием:
-  - вендоров
-  - категорий
-  - продуктов
-  - матрицы `продукт × категория`
+- переключение контура `Инфраструктура / ИБ`
+- админ-панель:
+- добавление/удаление вендоров
+- добавление/удаление категорий
+- добавление/удаление продуктов
+- редактирование матрицы `продукт × категория` (автосохранение по чекбоксам)
+- удобная прокрутка матрицы (вертикальная + горизонтальная)
+
+## Текущая структура проекта
+- `main.py` - минимальный entrypoint
+- `zkart_app/__init__.py` - `create_app`, регистрация роутов, `init_db`
+- `zkart_app/config.py` - конфиг/константы (`ADMIN_PATH`, env, пути)
+- `zkart_app/routes.py` - HTTP-роуты
+- `zkart_app/db.py` - работа с SQLite, импорт и bootstrap
+- `templates/` - HTML-шаблоны (`index.html`, `admin.html`, `login.html`)
+- `static/css/` - CSS
+- `static/js/` - JS
+- `matrix.db` - рабочая SQLite БД
+
+## Роуты
+- `/` - главная страница
+- `/api/data?scope=infra|ib` - API данных матрицы
+- `/health` - healthcheck
+- `/assets/mont-logo` - логотип
+- `/{ADMIN_PATH}` - админка (секретный путь в `zkart_app/config.py`)
 
 ## API
 `GET /api/data?scope=infra|ib`
 
-Возвращает JSON:
+Возвращает:
 - `vendors`
 - `categories`
 - `products`
 - `product_links`
-- `links` (агрегированные vendor-category, для совместимости)
+- `links`
 
-## Локальный запуск
+## Запуск локально
 ```bash
 python3 -m venv .venv
 .venv/bin/python -m ensurepip --upgrade
@@ -38,17 +56,19 @@ python3 -m venv .venv
 docker compose up -d --build
 ```
 
-Приложение доступно на порту `5000`.
+Порт: `5000`.
 
 ## Переменные окружения
-- `SECRET_KEY` — секрет Flask-сессии.
-- `ENABLE_BOOTSTRAP` — управление стартовым наполнением данных:
-  - `0` (по умолчанию): не выполнять автосидинг/автоимпорт;
-  - `1`: разрешить bootstrap (seed + импорт из `infra1..infra4` при подходящих условиях).
+- `SECRET_KEY` - секрет Flask-сессии
+- `ENABLE_BOOTSTRAP`:
+- `0` (по умолчанию) - не выполнять автосидинг/автоимпорт
+- `1` - разрешить bootstrap (seed + импорт)
+- `WEB_CONCURRENCY` - число gunicorn worker-процессов (по умолчанию `4`)
+- `GUNICORN_THREADS` - число потоков на worker (по умолчанию `5`)
 
-## База данных
-SQLite: `matrix.db`.
+По умолчанию Gunicorn дает минимум `20` параллельных обработок (`4 x 5`).
 
-Содержит данные по двум контурам (`infra` и `ib`), включая продукты и связи категорий.
-
-Если `matrix.db` уже заполнена, запускайте с `ENABLE_BOOTSTRAP=0` (дефолт), чтобы не выполнять лишнюю инициализацию.
+## Данные
+- Инфраструктурные пакеты импорта: `infra1..infra4`
+- ИБ-пакеты импорта: `иб1..иб4` (используются для массового заполнения `ib_*` таблиц)
+- Бэкапы БД: директория `backups/`

docker-compose.yml

@@ -4,6 +4,8 @@ services:
     container_name: zkart-app
     environment:
       SECRET_KEY: ${SECRET_KEY:-change-me-please}
+      WEB_CONCURRENCY: ${WEB_CONCURRENCY:-4}
+      GUNICORN_THREADS: ${GUNICORN_THREADS:-5}
     volumes:
       - ./matrix.db:/app/matrix.db
     restart: unless-stopped

static/css/admin.css

@@ -1,7 +1,7 @@
     :root { --b:#1f4ea3; --line:#cfe0ff; }
     * { box-sizing: border-box; }
     body { margin:0; font-family:Manrope,sans-serif; background:#f0f5ff; color:#1a2746; }
-    body.ib { background:#fff1f1; }
+    body.ib { background:#eefaf3; }
     .wrap { width:min(1600px, calc(100% - 24px)); margin:12px auto 24px; }
     .top {
       background: linear-gradient(130deg, #1f4ea3, #3977df);
@@ -13,7 +13,7 @@
       align-items:center;
       gap:10px;
     }
-    body.ib .top { background: linear-gradient(130deg, #9b2f3a, #c24a56); }
+    body.ib .top { background: linear-gradient(130deg, #1f7a4a, #37a96b); }
     .scope-switch { display:flex; gap:8px; }
     .scope-chip {
       display:inline-block;
@@ -75,3 +75,88 @@
     th:first-child { z-index: 3; }
     td input { transform: scale(1.05); }
     .matrix-tip { margin:0 0 6px; font-size:12px; color:#37507d; }
+
+    @media (max-width: 980px) {
+      .wrap {
+        width: calc(100% - 16px);
+        margin: 8px auto 16px;
+      }
+      .top {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 12px;
+      }
+      .top > div:last-child {
+        width: 100%;
+        display: grid !important;
+        grid-template-columns: 1fr 1fr;
+      }
+      .top > div:last-child a,
+      .top > div:last-child form,
+      .top > div:last-child button {
+        width: 100%;
+      }
+      .scope-switch {
+        flex-wrap: wrap;
+      }
+      .scope-chip {
+        flex: 1 1 auto;
+        text-align: center;
+      }
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      .lists {
+        grid-template-columns: 1fr;
+      }
+      .list-box {
+        max-height: 300px;
+      }
+      .list-item {
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
+      .matrix-wrap {
+        padding: 8px;
+      }
+      .matrix-scroll {
+        max-height: 62vh;
+      }
+      th, td {
+        font-size: 11px;
+        padding: 5px;
+      }
+      th:first-child,
+      td:first-child {
+        min-width: 170px;
+      }
+      input[type="text"],
+      select,
+      button {
+        min-height: 40px;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .top > div:last-child {
+        grid-template-columns: 1fr;
+      }
+      .inline-product {
+        grid-template-columns: 1fr;
+      }
+      .matrix-h-scroll {
+        height: 24px;
+      }
+      .matrix-scroll::-webkit-scrollbar,
+      .matrix-h-scroll::-webkit-scrollbar {
+        height: 18px;
+        width: 12px;
+      }
+      th:first-child,
+      td:first-child {
+        min-width: 145px;
+      }
+      .matrix-tip {
+        font-size: 11px;
+      }
+    }

static/css/index.css

@@ -26,26 +26,26 @@
     }
     body.scope-ib {
       background:
-        radial-gradient(1200px 700px at -10% -10%, #ffb3b3 0%, transparent 58%),
-        radial-gradient(900px 500px at 110% -20%, #ffbeb3 0%, transparent 52%),
-        linear-gradient(160deg, #ffd7d7 0%, #ffb8b8 100%);
+        radial-gradient(1200px 700px at -10% -10%, #b8f3cf 0%, transparent 58%),
+        radial-gradient(900px 500px at 110% -20%, #b2efd6 0%, transparent 52%),
+        linear-gradient(160deg, #daf8e8 0%, #bdeecf 100%);
     }
     body.scope-ib .hero {
       background:
         linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,0) 45%),
-        linear-gradient(125deg, #7a1f2a 0%, #b43444 55%, #d34d57 100%);
+        linear-gradient(125deg, #1f7a4a 0%, #2f9c61 55%, #47b879 100%);
     }
     body.scope-ib .hero::after {
-      background-color: rgba(90, 15, 28, .45);
+      background-color: rgba(10, 74, 45, .42);
     }
     body.scope-ib .hero::before {
       background:
         linear-gradient(to top, rgba(255,255,255,.9) 0 2px, rgba(255,255,255,0) 2px),
-        rgba(74, 9, 24, .42);
+        rgba(10, 61, 38, .40);
     }
     body.scope-ib .mode-btn.active {
-      background: linear-gradient(140deg, #9a2331, #c03d4c);
-      box-shadow: 0 8px 18px rgba(158, 33, 51, .35);
+      background: linear-gradient(140deg, #1d8d54, #2fac6d);
+      box-shadow: 0 8px 18px rgba(24, 124, 72, .35);
     }
 
     .wrap {
@@ -283,6 +283,53 @@
       font-size: 17px;
       color: #1f3f77;
     }
+    .active-filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin: 0 0 12px;
+      padding: 9px;
+      border-radius: 12px;
+      border: 1px solid #c9dafd;
+      background: linear-gradient(145deg, #e8f0ff, #dbe8ff);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
+    }
+    .active-filter {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      border-radius: 999px;
+      padding: 6px 8px 6px 10px;
+      border: 1px solid #cfe0ff;
+      background: linear-gradient(145deg, #f8fbff, #edf4ff);
+      color: #21457f;
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .active-filter .kind {
+      opacity: .7;
+      font-weight: 600;
+      letter-spacing: .2px;
+    }
+    .active-filter .remove {
+      display: inline-grid;
+      place-items: center;
+      width: 20px;
+      height: 20px;
+      border: 0;
+      border-radius: 999px;
+      background: #dbe9ff;
+      color: #1f4a8f;
+      font-size: 14px;
+      line-height: 1;
+      cursor: pointer;
+      padding: 0;
+      transition: .16s ease;
+    }
+    .active-filter .remove:hover {
+      background: #c4dbff;
+      transform: scale(1.05);
+    }
 
     .rows {
       display: grid;
@@ -347,3 +394,99 @@
       .credit .name { font-size: 8px; }
       .credit a { font-size: 6px; }
     }
+
+    @media (max-width: 768px) {
+      .wrap {
+        width: calc(100% - 16px);
+        margin: 10px auto 18px;
+      }
+      .brand-strip {
+        margin-bottom: 8px;
+      }
+      .brand-logo {
+        width: clamp(132px, 42vw, 190px);
+      }
+      .hero {
+        padding: 16px 14px 20px;
+        border-radius: 16px;
+      }
+      .hero h1 {
+        font-size: clamp(22px, 7vw, 32px);
+        line-height: 1.06;
+      }
+      .hero p {
+        font-size: 14px;
+      }
+      .mode-switch {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+      .mode-btn {
+        width: 100%;
+        min-height: 42px;
+      }
+      .card {
+        min-height: 0;
+        padding: 12px;
+      }
+      .chip-grid {
+        max-height: 260px;
+      }
+      .chip {
+        font-size: 12px;
+        padding: 8px 10px;
+      }
+      .footer-bar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+        background: rgba(255, 255, 255, .78);
+        border: 1px solid #dbe7ff;
+        border-radius: 12px;
+        padding: 10px;
+      }
+      button.action {
+        width: 100%;
+        min-height: 42px;
+      }
+      .result {
+        margin-top: 12px;
+        padding: 12px;
+      }
+      .active-filters {
+        margin-bottom: 10px;
+      }
+      .active-filter {
+        width: 100%;
+        justify-content: space-between;
+      }
+      .result-head h3 {
+        font-size: 15px;
+      }
+      .rows {
+        grid-template-columns: 1fr;
+        gap: 10px;
+      }
+      .credit {
+        right: 8px;
+        bottom: 8px;
+        background: rgba(255, 255, 255, .86);
+        border: 1px solid #dbe6ff;
+        border-radius: 10px;
+        padding: 4px 6px;
+      }
+    }
+
+    @media (max-width: 420px) {
+      .hero::before,
+      .hero::after {
+        opacity: .72;
+      }
+      .search {
+        padding: 10px 11px;
+      }
+      .tag {
+        font-size: 11px;
+      }
+    }

static/js/index.js

@@ -17,6 +17,9 @@
     clearBtn: document.getElementById("clearBtn"),
     modeInfra: document.getElementById("modeInfra"),
     modeIb: document.getElementById("modeIb"),
+    resultSection: document.querySelector(".result"),
+    filtersSection: document.querySelector(".board"),
+    activeFilters: document.getElementById("activeFilters"),
   };
 
   let clickAudioCtx = null;
@@ -130,9 +133,12 @@
       else if (!allowedVendors.has(vendor.id)) node.classList.add("dim");
       node.textContent = vendor.name;
       node.addEventListener("click", () => {
-        if (state.selectedVendors.has(vendor.id)) state.selectedVendors.delete(vendor.id);
+        const wasSelected = state.selectedVendors.has(vendor.id);
+        if (wasSelected) state.selectedVendors.delete(vendor.id);
         else state.selectedVendors.add(vendor.id);
         render();
+        if (wasSelected) scrollAfterDeselect();
+        else scrollToResultsSmooth();
       });
       el.vendorList.appendChild(node);
     }
@@ -148,9 +154,12 @@
       else if (!allowedCategories.has(category.id)) node.classList.add("dim");
       node.textContent = category.name;
       node.addEventListener("click", () => {
-        if (state.selectedCategories.has(category.id)) state.selectedCategories.delete(category.id);
+        const wasSelected = state.selectedCategories.has(category.id);
+        if (wasSelected) state.selectedCategories.delete(category.id);
         else state.selectedCategories.add(category.id);
         render();
+        if (wasSelected) scrollAfterDeselect();
+        else scrollToResultsSmooth();
       });
       el.categoryList.appendChild(node);
     }
@@ -213,9 +222,82 @@
     el.modeIb.classList.toggle("active", state.scope === "ib");
     document.body.classList.toggle("scope-ib", state.scope === "ib");
     renderChips();
+    renderActiveFilters();
     renderResults();
   }
 
+  function scrollToResultsSmooth() {
+    if (!el.resultSection) return;
+    const top = Math.max(el.resultSection.getBoundingClientRect().top + window.scrollY - 10, 0);
+    window.scrollTo({ top, behavior: "smooth" });
+  }
+
+  function scrollToFiltersSmooth() {
+    if (!el.filtersSection) return;
+    const top = Math.max(el.filtersSection.getBoundingClientRect().top + window.scrollY - 8, 0);
+    window.scrollTo({ top, behavior: "smooth" });
+  }
+
+  function scrollToTopSmooth() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  function scrollAfterDeselect() {
+    if (window.innerWidth > 980) {
+      scrollToTopSmooth();
+      return;
+    }
+    scrollToFiltersSmooth();
+  }
+
+  function renderActiveFilters() {
+    if (!el.activeFilters) return;
+    el.activeFilters.innerHTML = "";
+
+    const vendorsById = new Map(state.data.vendors.map(v => [v.id, v.name]));
+    const categoriesById = new Map(state.data.categories.map(c => [c.id, c.name]));
+
+    const items = [];
+    for (const id of state.selectedVendors) {
+      const name = vendorsById.get(id);
+      if (name) items.push({ kind: "Вендор", name, id, type: "vendor" });
+    }
+    for (const id of state.selectedCategories) {
+      const name = categoriesById.get(id);
+      if (name) items.push({ kind: "Категория", name, id, type: "category" });
+    }
+
+    if (items.length === 0) {
+      el.activeFilters.style.display = "none";
+      return;
+    }
+    el.activeFilters.style.display = "flex";
+
+    for (const item of items) {
+      const node = document.createElement("div");
+      node.className = "active-filter";
+
+      const text = document.createElement("span");
+      text.innerHTML = `<span class="kind">${item.kind}:</span> ${item.name}`;
+      node.appendChild(text);
+
+      const remove = document.createElement("button");
+      remove.className = "remove";
+      remove.type = "button";
+      remove.setAttribute("aria-label", `Убрать фильтр ${item.name}`);
+      remove.textContent = "×";
+      remove.addEventListener("click", () => {
+        if (item.type === "vendor") state.selectedVendors.delete(item.id);
+        else state.selectedCategories.delete(item.id);
+        render();
+        scrollToFiltersSmooth();
+      });
+      node.appendChild(remove);
+
+      el.activeFilters.appendChild(node);
+    }
+  }
+
   async function loadScopeData(scope) {
     const res = await fetch(`/api/data?scope=${encodeURIComponent(scope)}`);
     state.data = await res.json();
@@ -258,6 +340,7 @@
     el.vendorSearch.value = "";
     el.categorySearch.value = "";
     render();
+    scrollAfterDeselect();
   });
 
   el.modeInfra.addEventListener("click", () => {

templates/index.html

@@ -54,6 +54,7 @@
       <div class="result-head">
         <h3>Вендоры и продукты (после фильтрации)</h3>
       </div>
+      <div id="activeFilters" class="active-filters"></div>
       <div id="resultRows" class="rows"></div>
     </section>
     <div class="credit">