UI: стиль главной страницы, новый лого и favicon

- Заменён логотип на новый (MONT Group of companies)
- Favicon взят с stend.4mont.ru, перенесён в static/
- Лого фиксировано в левом верхнем углу (position:fixed), уменьшено на 30%
- Добавлена кнопка «Инфраструктурный полигон МОНТ» → stend.4mont.ru
- Градиентный текст h1, анимация fadeUp при загрузке
- Акцент-полоски в заголовках карточек, hover-эффекты на row-card
- Статистика переведена на таблетки (stat-pill)
- Счётчики-бейджи рядом с «Вендоры» и «Категории»
- Кастомный скроллбар в панелях чипов
- Улучшены теги продуктов, кнопка сброса фильтров

static/css/index.css

@@ -26,37 +26,39 @@
     }
     body.scope-ib {
       background:
-        radial-gradient(1200px 700px at -10% -10%, #ffb3b3 0%, transparent 58%),
+        radial-gradient(1200px 700px at -10% -10%, #b8f3cf 0%, transparent 58%),
-        radial-gradient(900px 500px at 110% -20%, #ffbeb3 0%, transparent 52%),
+        radial-gradient(900px 500px at 110% -20%, #b2efd6 0%, transparent 52%),
-        linear-gradient(160deg, #ffd7d7 0%, #ffb8b8 100%);
+        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);
+      background: linear-gradient(140deg, #1d8d54, #2fac6d);
-      box-shadow: 0 8px 18px rgba(158, 33, 51, .35);
+      box-shadow: 0 8px 18px rgba(24, 124, 72, .35);
     }
 
     .wrap {
       width: min(1400px, calc(100% - 32px));
       margin: 18px auto 28px;
+      padding-top: 68px;
     }
 
     .brand-strip {
-      margin-bottom: 12px;
+      position: fixed;
-      display: flex;
+      top: 14px;
-      justify-content: flex-start;
+      left: 16px;
+      z-index: 200;
     }
 
     .hero {
@@ -106,10 +108,14 @@
       font-size: clamp(26px, 4.8vw, 48px);
       letter-spacing: .3px;
       line-height: 1.02;
+      background: linear-gradient(115deg, #ffffff 25%, #b8d8ff 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
 
     .brand-logo {
-      width: clamp(170px, 24vw, 280px);
+      width: clamp(119px, 16.8vw, 196px);
       padding: 0;
       border: 0;
       background: transparent;
@@ -138,6 +144,14 @@
       gap: 16px;
     }
 
+    .mode-switch-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 12px;
+    }
+
     .mode-switch {
       display: inline-flex;
       gap: 6px;
@@ -146,7 +160,36 @@
       background: #ffffff;
       border: 1px solid #d9e6ff;
       box-shadow: 0 8px 24px rgba(26, 58, 118, .08);
-      margin-top: 12px;
+    }
+
+    .polygon-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 9px 16px;
+      border-radius: 10px;
+      margin-left: auto;
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: .2px;
+      color: #fff;
+      background: linear-gradient(140deg, #e05c1f, #e08c39);
+      box-shadow: 0 8px 18px rgba(200, 80, 20, .28);
+      text-decoration: none;
+      transition: .18s ease;
+      white-space: nowrap;
+    }
+
+    .polygon-btn::after {
+      content: "↗";
+      font-size: 12px;
+      opacity: .85;
+    }
+
+    .polygon-btn:hover {
+      background: linear-gradient(140deg, #c94f15, #d4782e);
+      box-shadow: 0 10px 22px rgba(200, 80, 20, .38);
+      transform: translateY(-1px);
     }
 
     .mode-btn {
@@ -180,11 +223,23 @@
 
     .card h2 {
       margin: 0 0 10px;
-      font-size: 14px;
+      font-size: 12px;
       text-transform: uppercase;
-      letter-spacing: .9px;
+      letter-spacing: 1.1px;
       color: #234782;
       font-weight: 800;
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .card h2::before {
+      content: "";
+      display: inline-block;
+      width: 3px;
+      height: 14px;
+      border-radius: 2px;
+      background: linear-gradient(180deg, #3978e0, #1f4ea3);
+      flex-shrink: 0;
     }
 
     .search {
@@ -256,9 +311,18 @@
       border-radius: 10px;
       background: linear-gradient(140deg, #0d7e59, #0a6648);
       color: #fff;
-      padding: 9px 14px;
+      padding: 9px 18px;
-      font-weight: 700;
+      font-weight: 800;
+      font-size: 13px;
+      font-family: Manrope, sans-serif;
       cursor: pointer;
+      transition: .18s ease;
+      letter-spacing: .2px;
+    }
+    button.action:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 8px 18px rgba(10, 100, 70, .30);
+      background: linear-gradient(140deg, #0e8d64, #0c7551);
     }
 
     .result {
@@ -274,14 +338,65 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
       gap: 12px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid #e2ecff;
     }
 
     .result-head h3 {
       margin: 0;
-      font-size: 17px;
+      font-size: 16px;
       color: #1f3f77;
+      font-weight: 800;
+      letter-spacing: .2px;
+    }
+    .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 {
@@ -295,17 +410,46 @@
       background: linear-gradient(180deg, #ffffff, #f5f9ff);
       border-radius: 12px;
       padding: 10px;
+      position: relative;
+      overflow: hidden;
+      transition: .2s ease;
+    }
+    .row-card::before {
+      content: "";
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, #3978e0 0%, #7bb4ff 60%, transparent 100%);
+    }
+    .row-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 28px rgba(24, 56, 116, .13);
+      border-color: #c4d8ff;
     }
 
-    .row-card strong { color: #1a3e79; font-size: 14px; }
+    .row-card strong {
+      color: #1a3e79;
+      font-size: 13px;
+      font-weight: 800;
+      display: block;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+      border-bottom: 1px solid #e8f0ff;
+      letter-spacing: .1px;
+    }
     .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
     .tag {
       font-size: 12px;
       border-radius: 999px;
-      background: #eaf2ff;
+      background: linear-gradient(135deg, #f0f6ff, #e4efff);
-      color: #234b89;
+      color: #1e4a8d;
-      padding: 4px 8px;
+      padding: 4px 10px;
-      border: 1px solid #d2e3ff;
+      border: 1px solid #c8dcff;
+      font-weight: 600;
+      transition: .16s ease;
+    }
+    .tag:hover {
+      background: linear-gradient(135deg, #e4efff, #d4e6ff);
     }
     a.tag {
       text-decoration: none;
@@ -316,7 +460,12 @@
     a.tag::after {
       content: "↗";
       font-size: 11px;
-      opacity: .85;
+      opacity: .8;
+    }
+    a.tag:hover {
+      background: linear-gradient(135deg, #daeaff, #c8ddff);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(30, 74, 141, .12);
     }
 
     .credit {
@@ -340,10 +489,181 @@
     }
 
     @media (max-width: 980px) {
-      .brand-logo { max-width: 240px; }
+      .brand-logo { max-width: 160px; }
       .board { grid-template-columns: 1fr; }
       .hero { padding: 20px; }
       .credit { right: 8px; bottom: 6px; }
       .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-row {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .mode-switch {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+      .polygon-btn {
+        width: 100%;
+        justify-content: center;
+        box-sizing: border-box;
+      }
+      .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;
+      }
+    }
+
+    /* Custom scrollbar */
+    .chip-grid {
+      scrollbar-width: thin;
+      scrollbar-color: #c5d8f7 transparent;
+    }
+    .chip-grid::-webkit-scrollbar { width: 5px; }
+    .chip-grid::-webkit-scrollbar-track { background: transparent; }
+    .chip-grid::-webkit-scrollbar-thumb { background: #c5d8f7; border-radius: 4px; }
+    .chip-grid::-webkit-scrollbar-thumb:hover { background: #a8c4f0; }
+
+    /* Stat pills */
+    .stat-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      background: rgba(30, 74, 141, .06);
+      border: 1px solid #d0e0ff;
+      border-radius: 999px;
+      font-size: 12px;
+      color: #2a4e8d;
+      font-weight: 600;
+    }
+    .stat-pill b {
+      color: #1a3e79;
+      font-weight: 800;
+    }
+
+    /* Footer stats row */
+    #stats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    /* Entrance animations */
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(10px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .hero   { animation: fadeUp .35s ease both; }
+    .board  { animation: fadeUp .45s ease .06s both; }
+    .footer-bar { animation: fadeUp .45s ease .09s both; }
+    .result { animation: fadeUp .45s ease .12s both; }
+
+    /* Chip count badge */
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+    .card-header h2 { margin: 0; }
+    .count-badge {
+      font-size: 11px;
+      font-weight: 700;
+      color: #3978e0;
+      background: #e8f0ff;
+      border: 1px solid #cddeff;
+      border-radius: 999px;
+      padding: 2px 8px;
+      min-width: 28px;
+      text-align: center;
+    }
+

static/js/index.js

@@ -17,6 +17,11 @@
     clearBtn: document.getElementById("clearBtn"),
     modeInfra: document.getElementById("modeInfra"),
     modeIb: document.getElementById("modeIb"),
+    resultSection: document.querySelector(".result"),
+    filtersSection: document.querySelector(".board"),
+    activeFilters: document.getElementById("activeFilters"),
+    vendorBadge: document.getElementById("vendorBadge"),
+    categoryBadge: document.getElementById("categoryBadge"),
   };
 
   let clickAudioCtx = null;
@@ -130,9 +135,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,14 +156,20 @@
       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);
     }
 
-    el.stats.textContent = `Вендоров: ${allowedVendors.size}/${state.data.vendors.length} | Категорий: ${allowedCategories.size}/${state.data.categories.length} | Продуктов: ${visibleSets().allowedProducts.size}/${state.data.products.length}`;
+    const ps = visibleSets().allowedProducts.size;
+    el.stats.innerHTML = `<span class="stat-pill">Вендоры <b>${allowedVendors.size}</b>&thinsp;/&thinsp;${state.data.vendors.length}</span><span class="stat-pill">Категории <b>${allowedCategories.size}</b>&thinsp;/&thinsp;${state.data.categories.length}</span><span class="stat-pill">Продукты <b>${ps}</b>&thinsp;/&thinsp;${state.data.products.length}</span>`;
+    if (el.vendorBadge) el.vendorBadge.textContent = allowedVendors.size;
+    if (el.categoryBadge) el.categoryBadge.textContent = allowedCategories.size;
   }
 
   function renderResults() {
@@ -213,9 +227,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 +345,7 @@
     el.vendorSearch.value = "";
     el.categorySearch.value = "";
     render();
+    scrollAfterDeselect();
   });
 
   el.modeInfra.addEventListener("click", () => {

templates/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Корзина МОНТ</title>
-  <link rel="icon" type="image/png" href="/favicon.png" />
+  <link rel="icon" type="image/png" href="/static/favicon.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Manrope:wght@400;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
@@ -14,7 +14,7 @@
   <main class="wrap">
     <section class="brand-strip">
       <div class="brand-logo">
-        <img src="/assets/mont-logo" alt="MONT logo" />
+        <img src="/static/mont_logo.png?v=2" alt="MONT logo" />
       </div>
     </section>
 
@@ -23,9 +23,12 @@
         <div>
           <h1>Вендоры в корзине МОНТ</h1>
           <p>Актуальная матрица вендоров, продуктов и категорий. Выбирайте вендоров или категории, чтобы видеть релевантные продуктовые линейки в Инфраструктуре и ИБ.</p>
-          <div class="mode-switch">
+          <div class="mode-switch-row">
-            <button id="modeInfra" class="mode-btn active" type="button">Инфраструктура</button>
+            <div class="mode-switch">
-            <button id="modeIb" class="mode-btn" type="button">ИБ</button>
+              <button id="modeInfra" class="mode-btn active" type="button">Инфраструктура</button>
+              <button id="modeIb" class="mode-btn" type="button">ИБ</button>
+            </div>
+            <a href="https://stend.4mont.ru/" target="_blank" rel="noopener" class="polygon-btn">Инфраструктурный полигон МОНТ</a>
           </div>
         </div>
       </div>
@@ -33,13 +36,13 @@
 
     <section class="board">
       <article class="card">
-        <h2>Вендоры</h2>
+        <div class="card-header"><h2>Вендоры</h2><span class="count-badge" id="vendorBadge">...</span></div>
         <input id="vendorSearch" class="search" placeholder="Поиск вендора..." />
         <div id="vendorList" class="chip-grid"></div>
       </article>
 
       <article class="card">
-        <h2>Категории</h2>
+        <div class="card-header"><h2>Категории</h2><span class="count-badge" id="categoryBadge">...</span></div>
         <input id="categorySearch" class="search" placeholder="Поиск категории..." />
         <div id="categoryList" class="chip-grid"></div>
       </article>
@@ -54,6 +57,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">