feat: vendor tooltips, logos, descriptions, product URLs from mont.ru

static/css/index.css

@@ -667,3 +667,90 @@
       text-align: center;
     }
 
+
+    /* ── Vendor tooltip popup ── */
+    .vendor-tooltip {
+      position: fixed;
+      z-index: 9999;
+      width: 280px;
+      background: #fff;
+      border-radius: 16px;
+      box-shadow: 0 20px 60px rgba(16,43,95,.22), 0 4px 16px rgba(16,43,95,.12);
+      border: 1px solid #dae6ff;
+      padding: 0;
+      pointer-events: none;
+      opacity: 0;
+      transform: translateY(6px) scale(.97);
+      transition: opacity .18s ease, transform .18s ease;
+      overflow: hidden;
+    }
+    .vendor-tooltip.visible {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    .vtt-logo {
+      width: 100%;
+      height: 88px;
+      background: #f5f8ff;
+      border-bottom: 1px solid #e8f0ff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 20px;
+    }
+    .vtt-logo img {
+      max-width: 100%;
+      max-height: 64px;
+      object-fit: contain;
+    }
+    .vtt-logo-placeholder {
+      font-size: 22px;
+      font-weight: 800;
+      color: #3978e0;
+      letter-spacing: .5px;
+    }
+    .vtt-body {
+      padding: 12px 14px 14px;
+    }
+    .vtt-name {
+      font-size: 13px;
+      font-weight: 800;
+      color: #1a3e79;
+      margin: 0 0 6px;
+    }
+    .vtt-desc {
+      font-size: 12px;
+      color: #4a5d7a;
+      line-height: 1.55;
+      margin: 0 0 10px;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .vtt-links {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+    .vtt-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      font-weight: 700;
+      padding: 4px 9px;
+      border-radius: 999px;
+      text-decoration: none;
+      transition: .15s ease;
+    }
+    .vtt-link.mont {
+      background: linear-gradient(135deg, #1f4ea3, #3978e0);
+      color: #fff;
+    }
+    .vtt-link.site {
+      background: #eef4ff;
+      color: #2a5aaa;
+      border: 1px solid #d0e0ff;
+    }
+    .vtt-link:hover { opacity: .85; }

static/js/index.js

@@ -26,6 +26,67 @@
 
   let clickAudioCtx = null;
 
+  // ── Vendor tooltip ──
+  const tooltip = document.createElement('div');
+  tooltip.className = 'vendor-tooltip';
+  document.body.appendChild(tooltip);
+
+  let tooltipTimer = null;
+  let vendorMap = {};
+
+  function buildVendorMap() {
+    vendorMap = {};
+    for (const v of state.data.vendors) {
+      vendorMap[v.id] = v;
+    }
+  }
+
+  function positionTooltip(chipEl) {
+    const rect = chipEl.getBoundingClientRect();
+    const tw = 280, th = 260;
+    let left = rect.right + 10;
+    let top = rect.top + rect.height / 2 - th / 2;
+    if (left + tw > window.innerWidth - 8) left = rect.left - tw - 10;
+    if (top < 8) top = 8;
+    if (top + th > window.innerHeight - 8) top = window.innerHeight - 8 - th;
+    tooltip.style.left = left + 'px';
+    tooltip.style.top  = top  + 'px';
+  }
+
+  function showTooltip(chipEl, vendor) {
+    const logo  = vendor.logo || '';
+    const desc  = vendor.description || '';
+    const mont  = vendor.mont_page || '';
+    const site  = vendor.website || '';
+
+    let logoHtml = '';
+    if (logo) {
+      logoHtml = `<div class="vtt-logo"><img src="/static/${logo}" alt="${vendor.name}" onerror="this.parentElement.innerHTML='<span class=vtt-logo-placeholder>${vendor.name.slice(0,2).toUpperCase()}</span>'"/></div>`;
+    } else {
+      logoHtml = `<div class="vtt-logo"><span class="vtt-logo-placeholder">${vendor.name.slice(0,2).toUpperCase()}</span></div>`;
+    }
+
+    let linksHtml = '';
+    if (mont) linksHtml += `<a class="vtt-link mont" href="${mont}" target="_blank" rel="noopener">MONT ↗</a>`;
+    if (site) linksHtml += `<a class="vtt-link site" href="${site}" target="_blank" rel="noopener">Сайт ↗</a>`;
+
+    tooltip.innerHTML = `
+      ${logoHtml}
+      <div class="vtt-body">
+        <div class="vtt-name">${vendor.name}</div>
+        ${desc ? `<div class="vtt-desc">${desc}</div>` : ''}
+        ${linksHtml ? `<div class="vtt-links">${linksHtml}</div>` : ''}
+      </div>`;
+
+    positionTooltip(chipEl);
+    tooltip.classList.add('visible');
+  }
+
+  function hideTooltip() {
+    tooltip.classList.remove('visible');
+  }
+
+
   function playScopeClick() {
     try {
       if (!clickAudioCtx) {
@@ -142,6 +203,14 @@
         if (wasSelected) scrollAfterDeselect();
         else scrollToResultsSmooth();
       });
+      node.addEventListener("mouseenter", () => {
+        clearTimeout(tooltipTimer);
+        tooltipTimer = setTimeout(() => showTooltip(node, vendor), 220);
+      });
+      node.addEventListener("mouseleave", () => {
+        clearTimeout(tooltipTimer);
+        hideTooltip();
+      });
       el.vendorList.appendChild(node);
     }
 
@@ -306,6 +375,7 @@
   async function loadScopeData(scope) {
     const res = await fetch(`/api/data?scope=${encodeURIComponent(scope)}`);
     state.data = await res.json();
+    buildVendorMap();
   }
 
   async function init() {