198 lines
10 KiB
HTML
198 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Корзина МОНТ</title>
|
||
<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">
|
||
<img src="/static/mont_logo.png?v=2" alt="MONT logo" />
|
||
</div>
|
||
</section>
|
||
|
||
<section class="hero">
|
||
<div class="hero-layout">
|
||
<div>
|
||
<h1>Вендоры в корзине МОНТ</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 href="https://stend.4mont.ru/" target="_blank" rel="noopener" class="polygon-btn">Инфраструктурный полигон МОНТ</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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 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', openModal);
|
||
overlay.addEventListener('click', e => { if (e.target === overlay) window._closeContact(); });
|
||
document.addEventListener('keydown', e => { if (e.key === 'Escape') window._closeContact(); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|