/** * PASS24.online — Виджет «Планшет в подарок» * Подключение: * Форма Битрикс24: замените содержимое блока #_p24form */ (function () { 'use strict'; /* Google Fonts */ var lnk = document.createElement('link'); lnk.rel = 'stylesheet'; lnk.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap'; document.head.appendChild(lnk); /* ── СТИЛИ ── */ var st = document.createElement('style'); st.textContent = '#_p24btn,#_p24tip,#_p24ov,#_p24modal,#_p24btn *,#_p24tip *,#_p24ov *{box-sizing:border-box;margin:0;padding:0;font-family:"Montserrat",Arial,sans-serif;line-height:normal;}' + /* кнопка — полупрозрачная по умолчанию */ '#_p24btn{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:2147483640;width:54px;height:54px;border-radius:50%;background:#E9403B;box-shadow:0 4px 24px rgba(233,64,59,.4),0 2px 8px rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.45;transition:opacity .3s ease,left .35s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease;}' + /* уполовинена в край */ '#_p24btn.collapsed{left:-20px;}' + /* наведение или тултип открыт — полная непрозрачность, на месте */ '#_p24btn:hover,#_p24btn.tip-open{opacity:1;left:10px;box-shadow:0 6px 28px rgba(233,64,59,.6),0 2px 8px rgba(0,0,0,.25);}' + '#_p24btn svg{width:30px;height:30px;display:block;}' + '#_p24btn::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2.5px solid #E9403B;opacity:0;animation:_p24p 2.4s ease-out infinite;}' + '#_p24btn.collapsed::after{animation:none;}' + '@keyframes _p24p{0%{opacity:.6;transform:scale(1)}80%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}' + /* тултип */ '#_p24tip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translateX(-340px);z-index:2147483639;background:#E9403B;border-radius:12px;padding:10px 36px 10px 20px;box-shadow:4px 4px 24px rgba(233,64,59,.4);cursor:pointer;opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.25,.8,.25,1),opacity .35s ease;white-space:nowrap;}' + '#_p24tip.on{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto;}' + '#_p24l1{display:block;font-size:13px;font-weight:700;line-height:1.4;color:#fff;}' + '#_p24l2{display:block;font-size:11.5px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.88);margin-top:5px;opacity:0;transform:translateY(5px);transition:opacity .3s ease .1s,transform .3s ease .1s;}' + '#_p24tip.on2 #_p24l2{opacity:1;transform:translateY(0);}' + /* крестик тултипа — внутри, справа по центру */ '#_p24tip-x{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .15s;line-height:1;}' + '#_p24tip-x:hover{background:rgba(255,255,255,.45);transform:translateY(-50%) scale(1.15);}' + /* оверлей */ '#_p24ov{position:fixed;inset:0;z-index:2147483641;background:rgba(10,8,24,.58);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:flex-start;padding:20px;opacity:0;pointer-events:none;transition:opacity .28s;}' + '#_p24ov.on{opacity:1;pointer-events:all;}' + /* модалка */ '#_p24modal{background:#fff;border-radius:18px;width:100%;max-width:360px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 70px rgba(0,0,0,.32);transform:translateX(-30px) scale(.97);transition:transform .35s cubic-bezier(.34,1.3,.64,1);font-family:Arial,sans-serif;}' + '#_p24ov.on #_p24modal{transform:none;}' + '#_p24hd{background:linear-gradient(140deg,#E9403B 0%,#c42e2a 100%);border-radius:18px 18px 0 0;padding:20px;position:relative;}' + '#_p24logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}' + '#_p24lt{font-weight:800;font-size:17px;color:#fff;letter-spacing:-.3px;}' + '#_p24lt em{font-style:normal;color:rgba(255,255,255,.68);}' + '#_p24tab{display:flex;justify-content:center;margin-bottom:14px;}' + '#_p24tab svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));}' + '#_p24badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:10px 14px;color:#fff;font-size:13px;font-weight:700;line-height:1.45;}' + '#_p24badge b{display:block;font-size:15px;margin-bottom:3px;}' + '#_p24x{position:absolute;top:14px;right:15px;background:rgba(255,255,255,.22);border:none;cursor:pointer;width:30px;height:30px;border-radius:50%;color:#fff;font-size:16px;line-height:30px;text-align:center;padding:0;transition:background .18s;}' + '#_p24x:hover{background:rgba(255,255,255,.4);}' + '#_p24body{padding:20px;}' + '#_p24body>p{font-size:13.5px;line-height:1.65;color:#333;margin:0 0 12px;font-family:Arial,sans-serif;}' + '#_p24body a{color:#E9403B;font-weight:600;}' + '#_p24note{font-size:12px;color:#777;line-height:1.55;border-left:3px solid #E9403B;padding-left:10px;margin:0 0 20px;}' + '#_p24form{border-radius:12px;overflow:hidden;}' + '@media(max-width:600px){' + '#_p24btn{width:46px;height:46px;left:8px;}' + '#_p24btn.collapsed{left:-16px;}' + '#_p24btn:hover,#_p24btn.tip-open{left:8px;}' + '#_p24btn svg{width:25px;height:25px;}' + '#_p24tip{left:54px;white-space:normal;max-width:calc(100vw - 60px);}' + '#_p24ov{align-items:flex-end;justify-content:center;padding:0;}' + '#_p24modal{max-width:100%;border-radius:18px 18px 0 0;max-height:85vh;}' + '}'; document.head.appendChild(st); /* ── SVG ── */ var ICON = '' + '' + '' + '' + 'PASS24' + '' + '' + '' + '' + '' + ''; var TAB = '' + '' + '' + '' + '' + '' + 'PASS24.online' + '' + '' + '\u041f\u0440\u043e\u043f\u0443\u0441\u043a\u0430' + '' + '14' + '' + '6' + '' + '\u0410\u0432\u0442\u043e' + '' + '' + '\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f' + '' + '' + '' + '' + ''; /* ── DOM ── */ function el(tag, id, html) { var d = document.createElement(tag); if (id) d.id = id; if (html) d.innerHTML = html; return d; } document.body.appendChild(el('div', '_p24btn', ICON)); document.body.appendChild(el('div', '_p24tip', '' + '\uD83C\uDF81 \u041f\u043b\u0430\u043d\u0448\u0435\u0442 \u0432 \u043f\u043e\u0434\u0430\u0440\u043e\u043a' + '\u23F3 \u0410\u043a\u0446\u0438\u044f \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043c\u0430\u044f!' )); document.body.appendChild(el('div', '_p24ov', '
' + '
' + '' + '' + '
' + TAB + '
' + '
\uD83C\uDF81 \u041f\u043b\u0430\u043d\u0448\u0435\u0442 \u0432 \u043f\u043e\u0434\u0430\u0440\u043e\u043a!\u041f\u0440\u0438 \u043e\u043f\u043b\u0430\u0442\u0435 \u0442\u0430\u0440\u0438\u0444\u0430 \u043d\u0430\u00A03\u00A0\u043c\u0435\u0441\u044f\u0446\u0430 \u0432\u00A0\u043c\u0430\u0435
' + '
' + '
' + '

\u041e\u0444\u043e\u0440\u043c\u0438\u0442\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0438\u0441 PASS24.online \u0432 \u043c\u0430\u0435 \u2014 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043f\u043b\u0430\u043d\u0448\u0435\u0442 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043b\u0443\u0436\u0431\u044b \u043e\u0445\u0440\u0430\u043d\u044b \u0432 \u043f\u043e\u0434\u0430\u0440\u043e\u043a.

' + '

\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u0442\u0430\u0440\u0438\u0444 \u00AB\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439\u00BB \u0438 \u0432\u044b\u0448\u0435 \u043f\u0440\u0438 \u043e\u043f\u043b\u0430\u0442\u0435 3\u00A0\u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430 \u043e\u0434\u043d\u043e \u044e\u0440.\u00A0\u043b\u0438\u0446\u043e. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e.

' + '
' + '
' + '
' )); /* ── ЛОГИКА ── */ var btn = document.getElementById('_p24btn'); var tip = document.getElementById('_p24tip'); var tipX = document.getElementById('_p24tip-x'); var ov = document.getElementById('_p24ov'); var modX = document.getElementById('_p24x'); var tipVisible = false; /* показываем тултип через 3 сек */ setTimeout(function(){ tip.classList.add('on'); btn.classList.add('tip-open'); tipVisible = true; }, 3000); setTimeout(function(){ tip.classList.add('on2'); }, 5500); function openModal(){ ov.classList.add('on'); document.body.style.overflow = 'hidden'; } function closeModal(){ ov.classList.remove('on'); document.body.style.overflow = ''; } /* клик на кнопку */ btn.addEventListener('click', function(){ if (tipVisible) { openModal(); } else { /* разворачиваем тултип, кнопка возвращается */ tip.classList.add('on', 'on2'); btn.classList.remove('collapsed'); btn.classList.add('tip-open'); tipVisible = true; } }); /* клик по тексту тултипа — модалка */ tip.addEventListener('click', openModal); /* крестик тултипа — свернуть, иконка уходит в край */ tipX.addEventListener('click', function(e){ e.stopPropagation(); tip.classList.remove('on', 'on2'); btn.classList.remove('tip-open'); btn.classList.add('collapsed'); tipVisible = false; }); /* крестик модалки */ modX.addEventListener('click', function(e){ e.stopPropagation(); closeModal(); }); ov.addEventListener('click', function(e){ if(e.target === ov) closeModal(); }); document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeModal(); }); /* загружаем форму Битрикс24 при первом открытии модалки */ var formLoaded = false; function loadBitrixForm() { if (formLoaded) return; formLoaded = true; var c = document.getElementById('_p24form'); var tag = document.createElement('script'); tag.setAttribute('data-b24-form', 'inline/10/p65iwe'); tag.setAttribute('data-skip-moving', 'true'); c.appendChild(tag); var loader = document.createElement('script'); loader.async = true; loader.src = 'https://cdn-ru.bitrix24.ru/b37140496/crm/form/loader_10.js?' + (Date.now()/180000|0); c.appendChild(loader); } /* capture-фаза: срабатывает до stopPropagation внутри тултипа */ document.getElementById('_p24btn').addEventListener('click', function(){ if (tipVisible) loadBitrixForm(); }, true); tip.addEventListener('click', function(){ loadBitrixForm(); }, true); })();