Files

337 lines
18 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Вендоры MONT — матрица продуктов и категорий дистрибьютора MONT</title>
<meta name="description" content="Корзина продуктов MONT: актуальная матрица вендоров, категорий и продуктовых линеек дистрибьютора MONT. Инфраструктура и информационная безопасность. MONT Казань, Москва." />
<meta name="keywords" content="вендоры MONT, вендоры MONT, дистрибьютор MONT, корзина продуктов MONT, матрица MONT, MONT Казань, партнёры MONT, ИБ вендоры, инфраструктура ПО, MONT vendor map" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="{{ canonical_url }}" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ canonical_url }}" />
<meta property="og:title" content="Вендоры MONT — матрица продуктов и категорий" />
<meta property="og:description" content="Актуальная матрица вендоров и продуктов дистрибьютора MONT. Инфраструктура и информационная безопасность." />
<meta property="og:image" content="{{ canonical_url }}/static/mont_logo.png" />
<meta property="og:locale" content="ru_RU" />
<!-- Schema.org Organization -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "MONT",
"alternateName": "MONT",
"description": "Дистрибьютор программного обеспечения. Корзина продуктов: вендоры, категории, продуктовые линейки в сфере инфраструктуры и информационной безопасности.",
"url": "{{ canonical_url }}",
"logo": "{{ canonical_url }}/static/mont_logo.png",
"sameAs": ["https://www.mont.com"]
}
</script>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
<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">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<main class="wrap">
<section class="brand-strip">
<div class="brand-logo">
<a id="logo-link" href="https://4mont.ru"><img src="/static/mont_logo.png?v=3" alt="MONT logo" /></a>
</div>
</section>
<section class="hero">
<div class="hero-layout">
<div>
<h1>Вендоры в портфеле MONT</h1>
<p>Актуальная матрица вендоров, продуктов и категорий. Выбирайте вендоров или категории, чтобы видеть релевантные продуктовые линейки в Инфраструктуре и ИБ.</p>
<div class="mode-switch-row">
<div class="mode-switch">
<button id="modeInfra" class="mode-btn active" type="button">Инфраструктура</button>
<button id="modeIb" class="mode-btn" type="button">ИБ</button>
</div>
<a id="polygon-link" href="https://stend.4mont.ru/" target="_blank" rel="noopener" class="polygon-btn">Инфраструктурный полигон MONT</a>
</div>
</div>
</div>
</section>
<!-- SSR-контент для поисковых роботов -->
<div style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;" aria-hidden="true">
<h2>Вендоры дистрибьютора MONT (MONT)</h2>
<p>Матрица вендоров, продуктов и категорий компании MONT — ведущего дистрибьютора программного обеспечения в России. Инфраструктура и информационная безопасность.</p>
<ul>{% for v in ssr_vendors %}<li>{{ v }}</li>{% endfor %}</ul>
<h2>Категории продуктов MONT</h2>
<ul>{% for c in ssr_categories %}<li>{{ c }}</li>{% endfor %}</ul>
</div>
<div class="page-layout">
<div class="main-col">
<section class="board">
<article class="card">
<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">
<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>
</section>
<div class="footer-bar">
<div id="stats">Загрузка...</div>
<button class="action" id="clearBtn">Сбросить фильтры</button>
</div>
<section class="result">
<div class="result-head">
<h3>Вендоры и продукты (после фильтрации)</h3>
</div>
<div id="activeFilters" class="active-filters"></div>
<div id="resultRows" class="rows"></div>
</section>
</div>
<aside class="news-sidebar">
<div class="news-widget">
<div class="news-widget-head">
<h2>Новости MONT</h2>
<div style="display:flex;gap:6px;align-items:center;">
{% if is_news_editor %}
<a href="/news-admin" class="news-all-link" style="background:linear-gradient(135deg,#1f4ea3,#3978e0);color:#fff;border-color:transparent;">✏️ Редактор</a>
{% endif %}
<a href="/news" class="news-all-link">Все →</a>
</div>
</div>
{% if latest_news %}
<div class="news-list">
{% for n in latest_news %}
<a class="news-card" href="/news/{{ n.slug }}">
<div class="news-card-img-wrap">
{% if n.image %}
<img class="news-card-img" src="/static/{{ n.image }}" alt="{{ n.title }}" />
{% else %}
<span class="news-card-no-img">📰</span>
{% endif %}
</div>
<div class="news-card-body">
<div class="news-card-date">{{ n.created_at[8:10] }}.{{ n.created_at[5:7] }}.{{ n.created_at[:4] }}</div>
<h3 class="news-card-title">{{ n.title }}</h3>
<span class="news-card-btn">Подробнее →</span>
</div>
</a>
{% endfor %}
</div>
{% else %}
<p class="news-empty">Новостей пока нет</p>
{% endif %}
</div>
<div class="news-widget" style="margin-top:14px;">
<div class="news-widget-head">
<h2>Мероприятия MONT</h2>
<a href="/events" class="news-all-link">Все →</a>
</div>
{% if upcoming_events %}
<div class="news-list">
{% for e in upcoming_events %}
<a class="news-card" href="/events/{{ e.slug }}">
<div class="news-card-img-wrap">
{% if e.image %}
<img class="news-card-img" src="/static/{{ e.image }}" alt="{{ e.title }}" />
{% else %}
<span class="news-card-no-img">📅</span>
{% endif %}
</div>
<div class="news-card-body">
<div class="news-card-date">{{ e.event_date[8:10] }}.{{ e.event_date[5:7] }}.{{ e.event_date[:4] }}</div>
<h3 class="news-card-title">{{ e.title }}</h3>
<span class="news-card-btn">Подробнее →</span>
</div>
</a>
{% endfor %}
</div>
{% else %}
<p class="news-empty">Актуальных мероприятий нет</p>
{% endif %}
</div>
</aside>
</div>
<div class="credit">
<button type="button" id="btn-contact-ruslan">Made by Galyaviev</button>
</div>
</main>
<!-- Contact modal -->
<div id="contact-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;align-items:center;justify-content:center;padding:1rem;">
<div style="background:#fff;border-radius:20px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(16,43,95,.22);">
<div style="padding:1.5rem 1.75rem .75rem;display:flex;align-items:center;justify-content:space-between;">
<div style="font-size:1.15rem;font-weight:800;color:#1a3e79;">Связаться с Русланом</div>
<button onclick="window._closeContact()" style="background:none;border:none;font-size:1.4rem;color:#8aa;cursor:pointer;line-height:1;padding:0 4px;">×</button>
</div>
<div id="cm-body" style="padding:.5rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;"></div>
<div id="cm-footer" style="display:flex;justify-content:flex-end;gap:.75rem;padding:.75rem 1.75rem 1.5rem;"></div>
</div>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=108577107', 'ym');
ym(108577107, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/108577107" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
<script>
(function() {
const overlay = document.getElementById('contact-modal');
const fieldStyle = 'width:100%;box-sizing:border-box;margin-top:.3rem;padding:.6rem .85rem;' +
'background:#f7faff;border:1px solid #c8d8f7;border-radius:9px;color:#1a3060;' +
'font-size:.92rem;outline:none;font-family:Manrope,sans-serif;';
const labelStyle = 'color:#526079;font-size:.8rem;font-weight:700;letter-spacing:.2px;';
function buildForm() {
document.getElementById('cm-body').innerHTML =
'<div><label style="' + labelStyle + '">Ваше имя *</label>' +
'<input id="cm-name" type="text" placeholder="Иван Иванов" style="' + fieldStyle + '"/></div>' +
'<div><label style="' + labelStyle + '">Email *</label>' +
'<input id="cm-email" type="email" placeholder="ivan@company.ru" style="' + fieldStyle + '"/></div>' +
'<div><label style="' + labelStyle + '">Телефон *</label>' +
'<input id="cm-phone" type="tel" placeholder="+7 (999) 000-00-00" style="' + fieldStyle + '"/></div>' +
'<div><label style="' + labelStyle + '">Сообщение *</label>' +
'<textarea id="cm-text" rows="4" placeholder="Ваш вопрос или предложение..." style="' + fieldStyle + 'resize:vertical;"></textarea></div>' +
'<div id="cm-error" style="display:none;background:#fff0f0;border:1px solid #fcc;border-radius:8px;' +
'padding:.5rem .85rem;color:#c0392b;font-size:.85rem;"></div>';
document.getElementById('cm-footer').innerHTML =
'<button onclick="window._closeContact()" style="background:#f0f5ff;border:1px solid #c8d8f7;border-radius:9px;' +
'padding:.6rem 1.25rem;color:#526079;cursor:pointer;font-family:Manrope,sans-serif;font-weight:600;">Отмена</button>' +
'<button id="cm-submit" style="background:linear-gradient(135deg,#1f4ea3,#3978e0);border:none;border-radius:9px;' +
'padding:.6rem 1.5rem;color:#fff;font-weight:700;cursor:pointer;font-family:Manrope,sans-serif;">Отправить</button>';
document.getElementById('cm-submit').addEventListener('click', submit);
}
function openModal() {
buildForm();
overlay.style.display = 'flex';
document.body.style.overflow = 'hidden';
setTimeout(() => { const n = document.getElementById('cm-name'); if (n) n.focus(); }, 80);
}
window._closeContact = function() {
overlay.style.display = 'none';
document.body.style.overflow = '';
};
async function submit() {
const name = document.getElementById('cm-name').value.trim();
const email = document.getElementById('cm-email').value.trim();
const phone = document.getElementById('cm-phone').value.trim();
const text = document.getElementById('cm-text').value.trim();
const errEl = document.getElementById('cm-error');
const btn = document.getElementById('cm-submit');
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phoneRe = /^[\+\d][\d\s\-\(\)]{6,18}$/;
const errors = [];
[[!name, 'cm-name'], [!emailRe.test(email), 'cm-email'],
[!phoneRe.test(phone), 'cm-phone'], [!text, 'cm-text']].forEach(([bad, id]) => {
document.getElementById(id).style.borderColor = bad ? '#e74c3c' : '#c8d8f7';
if (bad) errors.push(id);
});
if (errors.length) {
errEl.textContent = 'Пожалуйста, заполните все поля корректно';
errEl.style.display = 'block';
return;
}
btn.disabled = true;
btn.textContent = 'Отправка...';
errEl.style.display = 'none';
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name, email, phone, text}),
});
if (!res.ok) {
const d = await res.json().catch(() => ({}));
throw new Error(d.detail || 'Ошибка отправки');
}
document.getElementById('cm-body').innerHTML =
'<div style="text-align:center;padding:2rem 0">' +
'<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1f4ea3,#3978e0);' +
'color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">✓</div>' +
'<div style="font-size:1.1rem;font-weight:800;color:#1a3e79;">Отправлено!</div>' +
'<div style="color:#526079;font-size:.9rem;margin-top:.4rem;">Постараюсь ответить в ближайшее время</div></div>';
document.getElementById('cm-footer').innerHTML =
'<button onclick="window._closeContact()" style="background:linear-gradient(135deg,#1f4ea3,#3978e0);border:none;' +
'border-radius:9px;padding:.6rem 1.5rem;color:#fff;font-weight:700;cursor:pointer;font-family:Manrope,sans-serif;">Закрыть</button>';
} catch(e) {
errEl.textContent = e.message || 'Ошибка отправки';
errEl.style.display = 'block';
btn.disabled = false;
btn.textContent = 'Отправить';
}
}
document.getElementById('btn-contact-ruslan').addEventListener('click', () => { window.location.href = 'mailto:ruslan@ipcom.su'; });
overlay.addEventListener('click', e => { if (e.target === overlay) window._closeContact(); });
document.addEventListener('keydown', e => { if (e.key === 'Escape') window._closeContact(); });
})();
</script>
<script>
(function(){
var isMont = location.hostname === 'maps.mont.ru';
var poly = document.getElementById('polygon-link');
if (poly) poly.href = isMont ? 'https://stand.mont.ru/' : 'https://stend.4mont.ru/';
var logo = document.getElementById('logo-link');
if (logo) logo.href = isMont ? 'https://www.mont.ru' : 'https://4mont.ru';
})();
</script>
<div id="cookie-banner" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#1a3060;color:#fff;padding:1rem 1.5rem;box-shadow:0 -2px 16px rgba(0,0,0,.2);align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
<span style="font-size:.9rem;line-height:1.5;">
Мы используем файлы cookie, чтобы сделать работу с сайтом удобнее. Нажмите «Принять», чтобы согласиться с использованием файлов cookie в соответствии с
<a href="https://www.mont.ru/ru-ru/confidential" target="_blank" rel="noopener"
style="color:#7eb3ff;text-decoration:underline;">политикой конфиденциальности</a>.
</span>
<button id="cookie-accept" style="background:linear-gradient(135deg,#3978e0,#5a9ef5);border:none;border-radius:9px;
padding:.55rem 1.4rem;color:#fff;font-weight:700;font-family:Manrope,sans-serif;cursor:pointer;white-space:nowrap;">
Принять
</button>
</div>
<script>
(function(){
if (localStorage.getItem('cookie_accepted')) return;
var b = document.getElementById('cookie-banner');
b.style.display = 'flex';
document.getElementById('cookie-accept').addEventListener('click', function(){
localStorage.setItem('cookie_accepted', '1');
b.style.display = 'none';
});
})();
</script>
</body>
</html>