https://tarajarmon.ru/local/templates/tarajarmon/assets/js/vpn-warning.js

1(function() {
2    // Выводим время полной загрузки страницы в консоль
3    window.addEventListener('load', () => {
4        console.log(`loadtime: ${Math.round(performance.now())} мс`);
5    });
6
7    // Проверяем глобальную память браузера (localStorage)
8    if (localStorage.getItem('vpnPopupShown')) return;
9
10    const maxLoadTime = 8000; // загрузка мсекунд
11    const timeSincePageStart = performance.now(); 
12    
13    // Сценарий 1: Страница уже грузится дольше лимита
14    if (timeSincePageStart >= maxLoadTime) {
15         injectAndShowPopup();
16         localStorage.setItem('vpnPopupShown', 'true');
17    } 
18    // Сценарий 2: Ждем оставшееся время
19    else {
20         const timeLeft = maxLoadTime - timeSincePageStart;
21         
22         const slowLoadTimer = setTimeout(() => {
23             // Если время вышло, а страница всё ещё не загрузилась полностью
24             if (document.readyState !== 'complete') { 
25                 injectAndShowPopup();
26                 localStorage.setItem('vpnPopupShown', 'true');
27             }
28         }, timeLeft);
29
30         // Отменяем таймер, если страница загрузилась быстро
31         window.addEventListener('load', () => {
32             clearTimeout(slowLoadTimer);
33         });
34    }
35
36    function injectAndShowPopup() {
37        if (document.getElementById('vpn-custom-overlay')) return;
38
39        const style = document.createElement('style');
40        style.innerHTML = `
41            #vpn-custom-overlay {
42                display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
43                background-color: rgba(0, 0, 0, 0.6); z-index: 2147483647;
44                align-items: center; justify-content: center; font-family: inherit; 
45                opacity: 0; transition: opacity 0.3s ease;
46            }
47            #vpn-custom-modal {
48                background-color: #ffffff; width: 400px; max-width: 90%; position: relative;
49                box-shadow: 0 4px 15px rgba(0,0,0,0.15); border-radius: 0; 
50                padding: 40px 30px 30px; text-align: center; box-sizing: border-box;
51            }
52            #vpn-custom-close {
53                position: absolute; top: 10px; right: 15px; font-size: 24px; color: #999; 
54                cursor: pointer; line-height: 1; font-weight: 300; transition: color 0.2s;
55            }
56            #vpn-custom-close:hover { color: #333; }
57            .vpn-custom-text { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 25px 0; }
58            .vpn-custom-btn {
59                display: inline-block; width: 100%; background-color: #6b2d29; color: #ffffff;
60                border: none; padding: 14px 20px; font-size: 14px; font-weight: bold; 
61                text-transform: uppercase; cursor: pointer; letter-spacing: 0.5px; transition: opacity 0.2s;
62            }
63            .vpn-custom-btn:hover { opacity: 0.9; }
64        `;
65        document.head.appendChild(style);
66
67        const overlay = document.createElement('div');
68        overlay.id = 'vpn-custom-overlay';
69        overlay.innerHTML = `
70            <div id="vpn-custom-modal">
71                <span id="vpn-custom-close">&times;</span>
72                <p class="vpn-custom-text">
73                    Похоже, что сайт работает у Вас медленно. Если Вы пользуетесь VPN, попробуйте отключить его на время :(
74                </p>
75                <button class="vpn-custom-btn" id="vpn-custom-btn-ok">Понятно</button>
76            </div>
77        `;
78        document.body.appendChild(overlay);
79
80        requestAnimationFrame(() => { overlay.style.opacity = '1'; });
81
82        const closeModal = () => { 
83            overlay.style.opacity = '0';
84            setTimeout(() => overlay.remove(), 300); 
85        };
86
87        document.getElementById('vpn-custom-close').addEventListener('click', closeModal);
88        document.getElementById('vpn-custom-btn-ok').addEventListener('click', closeModal);
89        overlay.addEventListener('click', (event) => {
90            if (event.target === overlay) closeModal();
91        });
92    }
93})();