https://brainmondo.com/assets/js/ulp-detect-system-popup.js

1(function () {
2    document.addEventListener("DOMContentLoaded", function () {
3
4        function setCookie(name, value, days) {
5            const date = new Date();
6            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
7            document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
8        }
9
10        function getCookie(name) {
11            const nameEQ = name + "=";
12            const cookies = document.cookie.split(';');
13            for (let i = 0; i < cookies.length; i++) {
14                let c = cookies[i].trim();
15                if (c.indexOf(nameEQ) === 0) {
16                    return c.substring(nameEQ.length, c.length);
17                }
18            }
19            return null;
20        }
21
22        // ====== pokud existuje cookie, popup se vůbec nevytvoří ======
23        if (getCookie("ulp_popup_closed")) {
24            return;
25        }
26
27
28        // ---- 1) vytvoření prvku ----
29        const popupHTML = `
30          <div class="ulp-popup-download align-items-center justify-content-between px-3 py-2">
31            <div class="ulp-popup-download-close">
32              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
33                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/>
34              </svg>
35            </div>
36            <div>
37              <h5 class="mx-3 mb-0">Vyzkoušejte aplikaci:</h5>
38            </div>
39            <div class="ulp-detect-system">
40              <a class="btn ulp-btn-app ulp-apl m-0" href="https://apps.apple.com/app/brainmondo/id6475164362">
41                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-apple mr-2" viewBox="0 0 16 16">
42                  <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282"/>
43                </svg>
44                <div><h5 class="mt-1">Stáhnout</h5></div>
45              </a>
46              <a class="btn ulp-btn-app ulp-ggl m-0" href="https://play.google.com/store/apps/details?id=com.edunino.mobile.brain">
47                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-google-play mr-2" viewBox="0 0 16 16">
48                  <path d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055zM1 13.396V2.603L6.846 8zM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27"/>
49                </svg>
50                <div><h5 class="mt-1">Stáhnout</h5></div>
51              </a>
52              <a class="btn ulp-btn-app ulp-win m-0" href="https://apps.microsoft.com/detail/9NC7BSM60QC6?hl=cs&gl=CZ">
53                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-windows mr-2" viewBox="0 0 16 16">
54                  <path d="M6.555 1.375 0 2.237v5.45h6.555zM0 13.795l6.555.933V8.313H0zm7.278-5.4.026 6.378L16 16V8.395zM16 0 7.33 1.244v6.414H16z"/>
55                </svg>
56                <div><h5 class="mt-1">Stáhnout</h5></div>
57              </a>
58            </div>
59          </div>
60        `;
61
62        // vložení na konec <body>
63        document.body.insertAdjacentHTML("beforeend", popupHTML);
64
65        // ---- 2) funkce pro detekci OS ----
66        function detectOperatingSystem() {
67            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
68
69            if (/windows phone/i.test(userAgent) || /windows nt/i.test(userAgent)) return "win";
70            if (/android/i.test(userAgent)) return "ggl";
71            if (/iPad|iPhone|iPod/.test(userAgent) || (/macintosh/i.test(userAgent) && !window.MSStream)) return "apl";
72
73            return "unknown";
74        }
75
76        // ---- 3) skrytí tlačítek podle OS ----
77        function hideButtonsByOperatingSystem(blockElement) {
78            const os = detectOperatingSystem();
79            if (!blockElement) return;
80
81            const buttons = blockElement.querySelectorAll('.ulp-btn-app');
82            buttons.forEach(button => {
83                if (!button.classList.contains('ulp-' + os)) {
84                    button.style.display = 'none';
85                }
86            });
87        }
88
89        // ---> tady spustíme detekci až po vytvoření prvku
90        const popup = document.querySelector(".ulp-popup-download");
91        const systemBlock = popup.querySelector('.ulp-detect-system');
92        hideButtonsByOperatingSystem(systemBlock);
93
94
95        // ---- 4) funkce pro otevření / zavření popupu ----
96        const closeBtn = popup.querySelector(".ulp-popup-download-close");
97
98        // otevře po 3s
99        setTimeout(() => {
100            popup.classList.add("open");
101        }, 3000);
102
103        // zavření + uložení cookie na 30 dní
104        closeBtn.addEventListener("click", function () {
105            popup.classList.remove("open");

106            setCookie("ulp_popup_closed", "1", 30);
107        });
108        
109    });
110
111})();