IFrame lobby nima va uni qanday integratsiya qilish mumkin

iFrame lobby nima

iFrame lobby - bu kontent yetkazib beruvchi/agregatorda joylashtiriladigan va’’orqali operator sahifasi ichida namoyish etiladigan lobbi moduli (oʻyin katalogi, banner, toifalar, qidiruv, tezkor boshlash).</p> <p>Asosiy g’oya: operator frontni noldan yozmaydi, balki tezkor time-to-market, kross-brauzer qo’llab-quvvatlashni va yangilanishlarni o’z tomonida chiqarmasdan ulaydi.</p> <h2>Qachon oʻrinli</h2> <p>Yangi provayder/vertikal tezda ishga tushiriladi.</p> <p>Bir nechta mamlakatlar/brendlar uchun yagona vitrin kerak.</p> <p>Operator uchun cheklangan frontend buyrugʻi.</p> <h2>Ijobiy va salbiy tomonlari</h2> <p>Ijobiy tomonlari: tezlik, yagona kod bazasi, yangiliklarni avto jo’natish, provayderning kelishilgan tahlili.</p> <p>Kamchiliklar: piksel-perfekt ustidan kamroq nazorat qilish, vendor aptaymiga bog’liqlik, treking nozikligi, SEO cheklovlari (iframe tarkibidagi kontent DOMning bir qismi sifatida indekslanmagan).</p> <hr> <h2>Asosiy arxitektura</h2> <p>1. Front (operator): ’/casino’sahifa’<iframe src = «.../lobby?»...>.</p> <p>2. Auth yotqizish: qisqa umr ko’radigan’sessionToken’(JWT/opaque) operator bekendida hosil qilinadi.</p> <p>3. Provider lobby: tokenni validatsiya qiladi, tilni/valyutani/limitlarni almashtiradi, o’yinlar va bannerlarni renderit qiladi.</p> <p>4. Messaging shina:’window. postMessage’sahifasi va hodisalar uchun iframe oraligʻida (balans, oʻyin boshlanishi, kassani ochish va h.k.).</p> <p>5. Cashier/KYC/RG: operator tomonida chaqiriladi (iframe tashqarisida), lekin jamoalar tomonidan lobbidan foydalanish mumkin.</p> <hr> <h2>Joriy etishga qo’yiladigan eng kam talablar</h2> <p>Avtorizatsiya: short-lived tokenlar (1-15 daqiqa) + shaffof rotatsiya (silent refresh).</p> <p>Xavfsizlik: CSP,’sandbox’va aniq’allow’iframe uchun, qatʼiy filtrlash’postMessage’.</p> <p>Barqarorlik: voqealar shartnomasi (versiyalar, backward-compat), xatoliklarda graceful-fallback.</p> <p>UX: moslashuvchan to’r, tezkor navigatsiya, kartochkalarni oldindan yuklash, skeleton-ekranlar.</p> <p>Tahlillar: unifikatsiyalangan hodisalar (impression, click, launch, error), Amplitude/GA4 meping.</p> <hr> <h2>Joylashtirish namunasi (HTML + xavfsizlik)</h2> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code>html <iframe id="providerLobby" src="https://lobby. example. com/embed? brand=ACME&lang=ru&currency=EUR&token={{SESSION_TOKEN}}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" allow="fullscreen; autoplay; encrypted-media; clipboard-read; clipboard-write" style="width:100%;height:100vh; border:0; display:block; "> </iframe></code></pre> <u style="text-underline-offset:5px;">Tushuntirishlar:</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>’sandbox’ - faqat kerakli bayroqlarni yoqing. Keraksiz’allow-top-navigation’bermang.</li> <li>’allow’ - fichlarni ongli ravishda qoʻshing;’payment’faqat amalda ishlatilsa.</li> <li>’referrerpolicy’ - parametrlarning sizib chiqishini cheklash.</li> </ul> <u style="text-underline-offset:5px;">Operator sahifasidagi CSP (misol):</u> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code> Content-Security-Policy: default-src 'self'; frame-src https://lobby. example. com; script-src 'self' https://lobby. example. com 'unsafe-inline'; img-src 'self' https://lobby. example. com data:; connect-src 'self' https://api. example. com https://lobby. example. com;</code></pre> <p>Sahifalaringiz uchun X-Frame-Options siz → provayderingiz sizga emas, balki sizga o’rnatilishiga to’sqinlik qilmaydi.</p> <hr> <h2>Bekendda token yaratish (Node/Express misoli)</h2> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code>js import jwt from "jsonwebtoken"; import express from "express"; const app = express(); app. get("/lobby-token", (req, res) => { const payload = { sub: req. user. id, brand: "ACME", currency: "EUR", lang: "ru", ts: Date. now() }; const token = jwt. sign(payload, process. env. LOBBY_JWT_SECRET, { algorithm: "HS256", expiresIn: "10m", issuer: "acme-casino", audience: "lobby-provider" }); res. json({ token }); });</code></pre> <p>Eng yaxshi amaliyotlar: qisqa TTL, maydon auditi, HSM/Secrets Manager kalitlari, rotatsiya’kid’.</p> <hr> <p><b>Xabar almashish:</b> voqealar shartnomasi</p> <p>Manbani whitelisting va sxemani tasdiqlash bilan’postMessage’dan foydalaning.</p> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code>js //Xost (operator) const iframe = document. getElementById("providerLobby"). contentWindow; const LOBBY_ORIGIN = "https://lobby. example. com"; window. addEventListener("message", (e) => { if (e. origin!== LOBBY_ORIGIN) return; const { type, payload } = e. data {}; switch (type) { case "lobby:ready": //Boshlang’ich iframe ma’lumotlarini yuboramiz. postMessage({ type: "host:context", payload: { balance: 125. 40, kycStatus: "verified", limits: { betMax: 100 } }}, LOBBY_ORIGIN); break; case "lobby:resize": document. getElementById("providerLobby"). style. height = payload. height + "px"; break; case "lobby:openCashier": openCashier () ;//sizning break funksiyangiz; case "lobby:launchGame": launchGame(payload. gameId) ;//yangi oyna/rout break ochishi mumkin; case "lobby:requestTokenRefresh": refreshLobbyToken(). then(t => iframe. postMessage({ type: "host:newToken", payload: { token: t } }, LOBBY_ORIGIN) ); break; } });</code></pre> <u style="text-underline-offset:5px;">Standart hodisalar (namuna):</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>От лобби → хосту: `lobby:ready`, `lobby:resize`, `lobby:openCashier`, `lobby:openRG`, `lobby:launchGame`, `lobby:track`, `lobby:requestTokenRefresh`, `lobby:error`.</li> <li>Xost → lobbidan:’host: context’(balans, lokal, limitlar),’host: newToken’,’host: balanceUpdate’,’host: rgState’,’host: navigation’.</li> </ul> <hr> <h2>O’yinni lobbidan ishga tushirish</h2> <u style="text-underline-offset:5px;">Ikkita yondashuv:</u> <p>1. Xuddi shu iframe ichida - tezroq, lekin kamroq nazorat va treking qiyinroq.</p> <p>2. Alohida rut/oyna - metrikadan osonroq, siz o’zingizning overleylaringizni (RG/limitlar) osib qo’yishingiz mumkin, veb-vyu bilan yaxshiroq mos keladi.</p> <u style="text-underline-offset:5px;">Minimal yo’nalish:</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>Lobbi’lobby: launchGame {gameId}’joʻnatadi.</li> <li>Xost oʻz bekasida’gameToken’yaratadi va ’/game/: id’ni ochadi? token=…`.</li> <li>O’yin tokenni qabul qiladi, validatsiya qiladi, tikish sessiyalari boshlanadi.</li> </ul> <hr> <h2>UX va unumdorlik</h2> <p>Α daptiv: desktopda 3-5 kolonka, 2 - planshet, 1 - mobil; kartochkalarning balandligini belgilang.</p> <p>Skeletonlar va lazy-loading (galereyalar uchun’loading =’lazy’,’fetchpriority =’low’tasvirlari).</p> <p>Tez qidirish va filtrlar: tanlangan teglarni’? query ’/’ localStorage’bilan yodlang.</p> <p>Kartochka bo’yicha bosish: bosish zonasi ≥ 44px; klaviatura yordami (A11y).</p> <p>Bannerlarning pleysholderlari: layaut «sakrab» ketmasligi uchun.</p> <p>iOS media siyosati: video/audio autoplay foydalanuvchi imo-ishorasini talab qiladi; buni demo roliklarda hisobga oling.</p> <hr> <h2>Komplayens va o’yinchining javobgarligi (RG)</h2> <p>Limitlar va taymautlar: o’yinchining joriy limitlarini lobbida ko’rsatishni qo’llab-quvvatlash (read-only), xost tomonida o’zgartirish shaklini chaqirish.</p> <p>O’z-o’zidan chiqarib tashlash:’lobby: openRG’hodisasi → iframe’dan tashqarida RG modulingizni ochish.</p> <p>Jur. -bannerlar va 18 +: provayderning ijodiga bog’liq bo’lmaslik uchun lobbi ichida emas, balki xost tomonida.</p> <p>GDPR/cookie: lobbi - uchinchi tomon, o’ylab ko’ring cookie-consent va huquqiy baza (contractual necessity/legitimate interest).</p> <hr> <h2>Mahalliylashtirish va brending</h2> <p>Til/valyuta/mintaqani’src’va/yoki’host: context’ga oʻtkazing.</p> <p>White-label oʻzgaruvchan ranglar, logotiplar, shriftlarga ruxsat bering.</p> <p>Vendor almashtirilganda maʼlumotlarni yoʻqotmaslik uchun «tanlangan/yaqinda» bloklarini operator tomonida saqlang.</p> <hr> <h2>Analitika va metrika</h2> <u style="text-underline-offset:5px;">Treking qatlam (misol):</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>`lobby_impression`, `tile_view`, `tile_click`, `search_use`, `category_change`, `launch_game`, `error_view`.</li> </ul> <u style="text-underline-offset:5px;">Mahsulot-metrlar bilan korrelyatsiya:</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>TTFB-Bet (lobbiga kirishdan birinchi stavkagacha bo’lgan vaqt), CR_deposit→launch, CTR toifalari/qidirish, O’rtacha ko’rish chuqurligi.</li> </ul> <p>Iframe voqealarini oʻzingizda jamlang; provayder piksellari bilan «ikki marta hisoblash» dan qoching.</p> <hr> <h2>Joriy etish test-rejasi</h2> <p>1. Xavfsizlik: CSP tekshiruvi, ortiqcha’allow’va’sandbox’bayroqlari yo’qligi,’postMessage validatsiyasi. origin`.</p> <p>2. Sessiyalar: tokenning tugashi, silent-refresh, 401/403 da xulq-atvor.</p> <p>3. Rezayz: mobil/veb-view (Android/iOS) uchun toʻgʻri balandlik.</p> <p>4. Kassa/KS: lobbi voqealari bo’yicha modalkalarni ochish/yopish stsenariylari.</p> <p>5. Provayderning mavjud emasligi: taym-autlar, qulflash va retrani koʻrsatish.</p> <p>6. RG limitlari: blokirovka paytida oʻyinni koʻrsatish va ishga tushirishni taqiqlash.</p> <p>7. Lokal/valyutalarni o’zgartirish: uchishda va qayta ishga tushirishda.</p> <p>8. Analitik: xost va vendor hisoblagichlarini taqqoslash.</p> <hr> <h2>Tipik xatolar (anti-pattern)</h2> <p>’Origin’ ni tekshirmasdan’message’-listenerni osib qoʻyish.</p> <p>Iframe’ga to’liq kirish (’allow-same-origin allow-top-navigation-by-user-activation’).</p> <p>Rotatsiyasiz uzoq umr ko’radigan tokenlar.</p> <p>SEO uchun lobbi kontentiga tayanish.</p> <p>Oʻyinchining keshini va provayderning keshini aralashtirish (shaxsiylashtirishni buzadi).</p> <p>Treking va RG-overleyni nazorat qilmasdan o’sha iframe ichida o’yinni ishga tushirish.</p> <hr> <h2>iFrame lobby integratsiya chek roʻyxati</h2> <ul style="padding-left:0; list-style:none; margin:10px 0 14px;"> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Voqealar shartnomasi (versiyasi, turlari, sxemalari) haqida kelishib oldik.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>15 daqiqa va rotatsiya ≤ TTL bilan/lobby-token amalga oshirildi.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>CSP,’sandbox’,’allow’,’referrerpolicy’.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Cashier/KYC/RG ulandi va’openCashier ’/’ openRG’voqealarini bogʻladi.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Provayderning degradatsiyasida fallback haqida o’ylangan.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Mahalliylashtirish, valyutalar, yoshga oid bannerlarni solishtirdik.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Tahlilni sozlash.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Biz brauzer va mobil veb-vy testlarini o’tkazdik.</li> <li><span style="display:inline-flex; width:18px; height:18px; margin-right:8px; align-items:center; justify-content:center; flex:0 0 18px;;color:#c0cc4c"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="currentColor"/><path d="M16.5 9.5l-5.1 5.1L7.5 10.7" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Hodisalar runbook va vendor bilan aloqa nuqtalari tasvirlangan.</li> </ul> <hr> <p>iFrame-lobbi - o’yinlar katalogini kengaytirish va time-to-market-ni qisqartirishning tez va pragmatik usuli. Sog’lom integratsiyaning kaliti - qat’iy xavfsizlik, aniq voqealar shartnomasi, ishonchli avtorizatsiya va operator tomonida puxta o’ylangan UX/tahlil. Buni bir marta amalga oshirsangiz, siz yangi etkazib beruvchilar bilan integratsiyalashuvni deyarli «bosish orqali» kengaytirishingiz mumkin.</p></div> <style> /* ===== Общая типографика ===== */ .geo-grid,.countries{ font-family: Segoe UI,system-ui,-apple-system,Roboto,Arial,sans-serif; } /* ========================================= L1 — ОСНОВНЫЕ РАЗДЕЛЫ (вертикальный список) ========================================= */ .geo-grid{ /* Был grid-карточек — делаем строго вертикальный список */ display: flex; flex-direction: column; gap: 0; /* без зазоров — как чистый список */ margin: 0; padding: 0; } /* Перестилизуем .geo-card под «элемент списка» */ .geo-card{ display: block; text-decoration: none; color: #eaf0ff; background: transparent; border: 0; border-left: 3px solid transparent; /* тонкий левый акцент по hover */ border-radius: 0; padding: 12px 10px 12px 14px; transition: background .12s ease, border-color .12s ease, transform .06s ease; } /* Межстрочные разделители */ .geo-card + .geo-card{ border-top: 1px solid rgba(148,163,184,.10); } /* Содержимое — компактно в колонку */ .geo-card__body{ display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Заголовок раздела — акцент */ .geo-card__title{ margin: 0; font-weight: 800; font-size: 17px; line-height: 1.2; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Короткое описание — в одну строку */ .geo-card__desc{ margin: 0; font-size: 13px; line-height: 1.35; color: #b8c4d9; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* вики-стиль: только одна строка */ overflow: hidden; } /* CTA превращаем в маленький чип-ярлык справа налево */ .geo-card__cta{ align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: #2a1b00; background: linear-gradient(180deg,#fff27a,#ffe85c 55%,#ffc933); border: 1px solid #e3b600; border-radius: 8px; padding: 4px 8px; box-shadow: 0 1px 0 rgba(0,0,0,.06) inset; } /* Hover — мягкий подсвет и левый акцент */ .geo-card:hover{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-left-color: #ffe85c; } .geo-card:active{ transform: translateY(1px); } /* ========================================= L2 — СТАТЬИ (вертикальный список «каталог») ========================================= */ .countries-wrap{ margin-top: 16px; padding: 8px 10px; border: 1px solid rgba(148,163,184,.10); border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.008)); } /* Список одной колонкой, без точек */ .countries{ list-style: none; margin: 0; padding: 0; display: block; } /* Элемент списка статьи */ .country-li{ margin: 0; } /* Сама ссылка — компактная строка с разделителем */ .country-link{ position: relative; display: grid; grid-template-columns: 1fr 18px; /* название | стрелка */ align-items: center; column-gap: 10px; padding: 9px 2px; text-decoration: none; color: #dfe7ff; transition: background .12s ease, color .12s ease, transform .06s ease; } /* Тонкий разделитель между строками */ .country-link + .country-link{ border-top: 1px dashed rgba(148,163,184,.15); } /* Название статьи */ .country-name{ font-weight: 600; letter-spacing: .2px; color: #eef3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } /* Стрелка справа */ .country-arrow{ display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.28); transition: color .12s ease, transform .12s ease; } /* Hover/Focus */ .country-link:hover{ color: #ffffff; background: rgba(255,255,255,.02); } .country-link:hover .country-arrow{ color: #ffe85c; transform: translateX(2px); } .country-link:active{ transform: translateY(1px); } .country-link:focus-visible{ outline: 2px solid #93c5fd; outline-offset: 2px; } /* ===== Адаптив ===== */ @media (max-width: 680px){ .geo-card{ padding: 10px 8px 10px 12px; } .geo-card__title{ font-size: 16px; } .geo-card__desc{ -webkit-line-clamp: 2; } /* на мобиле можно две строки */ .countries-wrap{ padding: 6px 8px; } } </style> </div> </div> </main> <footer> <div style="display: flex; justify-content: space-between; align-items:center; padding-top:20px;"> <div style="padding-left:5px;"> <div class="language-selector"> <button class="language-button"> <span style="display: inline-flex; align-items: center;"> <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 10px;"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.52 4.392A8.009 8.009 0 0 0 4.061 11h2.997c.227-2.363 1.078-4.627 2.46-6.608Zm4.96 0c1.383 1.981 2.234 4.245 2.461 6.608h2.997a8.009 8.009 0 0 0-5.457-6.608ZM14.93 11c-.269-2.373-1.28-4.642-2.93-6.54C10.35 6.357 9.339 8.626 9.07 11h5.86Zm-5.86 2h5.86c-.269 2.373-1.28 4.642-2.93 6.54-1.65-1.898-2.661-4.167-2.93-6.54Zm-2.011 0H4.062a8.009 8.009 0 0 0 5.457 6.608C8.137 17.627 7.286 15.363 7.06 13Zm7.422 6.608c1.382-1.981 2.233-4.245 2.46-6.608h2.997a8.008 8.008 0 0 1-5.457 6.608ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" fill="#fff"></path> </svg> Oʻzbekcha </span> </button> <div class="language-menu"> <a hreflang="en" href="https://winupgo.com/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">English</a><a hreflang="es" href="https://winupgo.com/es/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Español</a><a hreflang="fr" href="https://winupgo.com/fr/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Français</a><a hreflang="pt" href="https://winupgo.com/pt/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Português</a><a hreflang="ru" href="https://winupgo.com/ru/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Русский</a><a hreflang="zh-Hans" href="https://winupgo.com/cn/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">简体中文</a><a hreflang="zh-Hant" href="https://winupgo.com/tw/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">繁體中文</a><a hreflang="ja" href="https://winupgo.com/jp/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">日本語</a><a hreflang="ko" href="https://winupgo.com/kr/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">한국어</a><a hreflang="hi" href="https://winupgo.com/hi/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">हिन्दी</a><a hreflang="fa" href="https://winupgo.com/fa/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">فارسی</a><a hreflang="ar" href="https://winupgo.com/ar/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">العربية</a><a hreflang="tr" href="https://winupgo.com/tr/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Türkçe</a><a hreflang="uz" href="https://winupgo.com/uz/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Oʻzbekcha</a><a hreflang="kk" href="https://winupgo.com/kz/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">қазақ</a><a hreflang="tk" href="https://winupgo.com/tk/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Türkmençe</a><a hreflang="ky" href="https://winupgo.com/ky/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Кыргызча</a><a hreflang="tg" href="https://winupgo.com/tg/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Тоҷикӣ</a><a hreflang="ka" href="https://winupgo.com/ka/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">ქართული</a><a hreflang="he" href="https://winupgo.com/he/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">עברית</a><a hreflang="az" href="https://winupgo.com/az/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Azərbaycan dili</a><a hreflang="hy" href="https://winupgo.com/hy/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Հայերեն</a><a hreflang="de" href="https://winupgo.com/de/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Deutsch</a><a hreflang="it" href="https://winupgo.com/it/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Italiano</a><a hreflang="pl" href="https://winupgo.com/pl/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Polski</a><a hreflang="ro" href="https://winupgo.com/ro/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Română</a><a hreflang="el" href="https://winupgo.com/el/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Ελληνικά</a><a hreflang="uk" href="https://winupgo.com/ua/wiki/casino-technology/what-is-iframe-lobby-and-how-to-integrate-it/">Українська</a> </div> </div> </div> <div class="copy" style="flex: 1;text-align:right;padding-right:10px;"> © <b>Win<u>Up</u>Go</b> 2024 </div> <div style="width:70;padding-right:5px;"> <div style="display:flex;gap:10px;justify-content:flex-end;"> <a rel="noopener noreferrer nofollow sponsored" href="https://t.me/winupgo"><img width="30" height="30" alt="WinUpGo Channel" src="https://winupgo.com/images/telegram.svg"></a> <a href="/uz/feedback-form/"><img width="30" height="30" alt="Qayta aloqa shakli" src="https://winupgo.com/images/feedback.svg"></a> </div> </div> </div> <div class="footer-disclaimer"> <strong>Mas’uliyatdan voz kechish:</strong> WinUpGo — mustaqil axborot va tahliliy veb-sayt. Biz onlayn kazino operatori emasmiz, depozitlarni qabul qilmaymiz, stavkalarni qayta ishlamaymiz va qimor xizmatlarini ko‘rsatmaymiz. Sayt Veikkaus Oy’ni ham o‘z ichiga olgan holda, hech qanday operator, brend yoki huquq egasi bilan bog‘liq, affillangan yoki ular tomonidan tasdiqlangan emas. Barcha savdo belgilari, brend nomlari va logotiplar ularning qonuniy egalari mulki hisoblanadi va faqat axborot maqsadlarida foydalaniladi. </div> </footer> </div> <script src="/js/jquery-3.6.0.min.js"></script> <script> function MyLoc(url) { document.location.href = url; } document.addEventListener('DOMContentLoaded', () => { const button = document.querySelector('.language-button'); const menu = document.querySelector('.language-menu'); const languageSelector = document.querySelector('.language-selector'); button.addEventListener('click', (e) => { e.stopPropagation(); // Предотвращение всплытия события menu.classList.toggle('show'); }); document.addEventListener('click', (e) => { // Проверка, был ли клик вне области кнопки и меню if (!languageSelector.contains(e.target)) { menu.classList.remove('show'); } }); }); //alert("Ширина экрана: " + window.innerWidth + " пикселей"); </script> <script> $(document).ready(function() { $('#changpwd').click(function(){ //$('#err').text(''); var hashkey = $('#hashkey').val(); var pass = $('#pass').val(); var pass2 = $('#pass2').val(); if(pass != pass2 || pass == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Parol notoʻgʻri yoki boʻsh", 'error'); exit; } $.ajax({ url: "/ajax.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "action": "changpwd", "hashkey": hashkey, "pass": pass }, // после получения ответа сервера success: function(data){ //alert('yes'); if(data.result == "success"){ $('#main_fr').html("<div class=\"success\">Parol muvaffaqiyatli oʻzgartirildi! <a href='/private/' class='const_link'>Kirish</a></div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">Parol oʻzgartirildi", 'success'); window.scrollTo({top: 0, behavior: 'smooth'}); exit; }else{ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Tizim xatosi yuz berdi, qoʻllab-quvvatlash xizmatiga murojaat qiling.", 'error'); exit; } } }); }); $('#respassword').click(function(){ //$('#err').text(''); var email = $('#email').val(); if(email == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochtani kiriting", 'error'); exit; } if(!email.includes('@') || !email.includes('.')){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochta formati notoʻgʻri", 'error'); exit; } $.ajax({ url: "/ajax.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "action": "respassword", "email": email }, // после получения ответа сервера success: function(data){ //alert('yes'); if(data.result == "success"){ $('#main_fr').html("<div class=\"success\">Parolni tiklash boʻyicha koʻrsatma elektron pochtangizga yuborildi. Agar xat yetib kelmagan boʻlsa, SPAM jildini tekshiring.</div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">Koʻrsatma yuborildi", 'success'); //window.scrollTo({top: 0, behavior: 'smooth'}); exit; }else{ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Tizim xatosi yuz berdi, qoʻllab-quvvatlash xizmatiga murojaat qiling.", 'error'); exit; } } }); }); $('#edit').click(function(){ var nickname = $('#nickname').val(); var pass = $('#pass').val(); var pass2 = $('#pass2').val(); if(nickname == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Taxallus kiriting", 'error'); exit; } /*if(pass != pass2 || pass == ""){ showNotification('Parol notoʻgʻri yoki boʻsh', 'error'); exit; }*/ $.ajax({ url: "/ajax.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "action": "edit", "nickname": nickname }, // после получения ответа сервера success: function(data){ //alert('yes'); if(data.result == "success"){ showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">Profil oʻzgartirildi", 'success'); //window.scrollTo({top: 0, behavior: 'smooth'}); exit; }else{ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Taxallus band qilingan", 'error'); exit; } } }); }); $('#log').click(function(){ //$('#err').text(''); //alert('ok'); var email = $('#email').val(); var pass = $('#pass').val(); if(email == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochtani kiriting", 'error'); exit; } if(pass == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Avtorizatsiya xatosi", 'error'); exit; } $.ajax({ url: "/ajax.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "action": "login", "email": email, "pass": pass }, // после получения ответа сервера success: function(data){ if(data.result == "error"){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Avtorizatsiya xatosi", 'error'); exit; }else{ document.location.href = "/uz/private/"; exit; } } }); }); $('#reg').click(function(){ var email = $('#email').val(); var pass = $('#pass').val(); var pass2 = $('#pass2').val(); if(email == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochtani kiriting", 'error'); exit; } if(!email.includes('@') || !email.includes('.')){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochta formati notoʻgʻri", 'error'); exit; } if(pass != pass2 || pass == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Parol notoʻgʻri yoki boʻsh", 'error'); exit; } $.ajax({ url: "/ajax.php", // куда отправляем type: "post", // метод передачи dataType: "json", // тип передачи данных data: { // что отправляем "action": "registration", "email": email, "pass": pass }, // после получения ответа сервера success: function(data){ //alert('yes'); if(data.result == "success"){ $('#main_fr').html("<div class=\"success\">Roʻyxatdan oʻtish muvaffaqiyatli yakunlandi! Elektron pochtangizni tasdiqlang, agar xat yetib kelmagan boʻlsa, SPAM jildini tekshiring. <a href='/private/' class='const_link'>Kirish</a></div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">Muvaffaqiyatli roʻyxatdan oʻtildi", 'success'); window.scrollTo({top: 0, behavior: 'smooth'}); exit; }else{ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Foydalanuvchi allaqachon roʻyxatdan oʻtgan", 'error'); exit; } } }); }); $('#sendmessage').click(function(){ var email = $('#email').val(); var message = $('#message').val(); var token = $('#form_token').val(); if(email === ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochtani kiriting", 'error'); return; // <-- было 'exit' } if(!email.includes('@') || !email.includes('.')){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Elektron pochta formati notoʻgʻri", 'error'); return; } if(message === ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">Murojaat matnini kiriting", 'error'); return; } $.ajax({ url: "/ajax.php", type: "POST", dataType: "json", data: { action:'sendmessage', email: email, message: message, form_token: token }, success: function(data){ if(data.status === "success"){ $('#email').val(''); $('#message').val(''); //$('#main_fr').html("<div class=\"success\">Murojaatingiz uchun rahmat.</div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">Murojaat yuborildi", 'success'); //window.scrollTo({top: 0, behavior: 'smooth'}); } else { // покажем сообщение сервера, если есть showNotification(data.message || "Texnik ishlar olib borilmoqda", 'error'); } }, error: function(){ showNotification("Texnik ishlar olib borilmoqda", 'error'); } }); }); }); function Work(){ showNotification("<img src=\"https://winupgo.com/images/msg-warning.svg\" width=\"30\" height=\"30\" alt=\"Warning\">Texnik ishlar olib borilmoqda", 'warning'); } </script> <style> /* Контейнер чекбокса */ .chk-wrap { margin: 0 0 16px; } /* увеличенный отступ снизу */ .chk { display:block; /* кликабельна вся строка */ padding:10px 12px; /* комфортная хит-зона */ border-radius:10px; cursor:pointer; user-select:none; transition: background .18s ease, box-shadow .18s ease; } .chk:hover { background: rgba(255,255,255,.06); } .chk:active { background: rgba(255,255,255,.10); } /* Внутренности */ .chk-inner { display:flex; align-items:center; gap:10px; } .chk-input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .chk-box { position:relative; width:18px; height:18px; border:1.6px solid rgba(255,255,255,.85); border-radius:5px; background:transparent; transition: border-color .18s ease, background-color .18s ease; flex:0 0 auto; } .chk-box::after { content:""; position:absolute; left:5px; top:2.5px; width:6px; height:10px; border-right:2.5px solid transparent; border-bottom:2.5px solid transparent; transform: rotate(45deg); transition: border-color .14s ease; } /* Checked */ .chk-input:checked + .chk-box { background:#fff; border-color:#fff; } .chk-input:checked + .chk-box::after { border-right-color:#0b0f1a; border-bottom-color:#0b0f1a; } /* Фокус с клавиатуры на весь блок */ .chk-input:focus-visible ~ .chk-label, .chk-input:focus-visible + .chk-box { box-shadow: 0 0 0 3px rgba(255,255,255,.18); outline: 2px solid #ffffff; outline-offset: 2px; } .chk-label { color:#eaeff7; font:600 14px/1.2 Segoe UI, system-ui; opacity:.95; } </style>  <div id="searchModal" class="search-modal"> <div class="search-modal-content"> <span class="search-close-button">×</span> <span class="h1">Oʻyinlar boʻyicha qidiruv</span>  <div style="margin:8px 0 6px;"> <input type="text" id="searchInput" class="search-input" placeholder="Oʻyin nomini kiriting" style="width:100%; display:block;"> </div>  <div class="chk-wrap"> <label class="chk" for="onlyDemo"> <span class="chk-inner"> <input type="checkbox" id="onlyDemo" class="chk-input" /> <span class="chk-box" aria-hidden="true"></span> <span class="chk-label">Faqat demo</span> </span> </label> </div> <div id="searchResults" class="search-results"> <div style="padding:24px 12px; text-align:center; color:#c7cfe0; font:600 14px/1.4 Segoe UI,system-ui;"> Qidiruvni boshlash uchun kamida 3 ta belgi kiriting. </div> </div> </div> </div> <script> // helpers function openSearchModal() { const m = document.getElementById("searchModal"); m.style.display = "flex"; document.getElementById("searchInput").focus(); document.body.style.overflow = 'hidden'; } function resetSearchForm() { const input = document.getElementById("searchInput"); const cb = document.getElementById("onlyDemo"); const res = document.getElementById("searchResults"); input.value = ""; cb.checked = false; res.innerHTML = ""; } function closeSearchModal() { document.getElementById("searchModal").style.display = "none"; document.body.style.overflow = ''; resetSearchForm(); } // Открытие модального окна document.getElementById("searchButton").onclick = openSearchModal; // Закрытие модального окна (крестик) document.querySelector(".search-close-button").onclick = closeSearchModal; // Закрытие при клике вне модального окна window.addEventListener("click", function(event) { const searchModal = document.getElementById("searchModal"); if (event.target === searchModal) closeSearchModal(); }); // Закрытие по ESC window.addEventListener("keydown", function(e){ if (e.key === "Escape") { const searchModal = document.getElementById("searchModal"); if (searchModal.style.display === "flex") closeSearchModal(); } }); // Хелпер: выполнение запроса function doSearch(query, page) { const demo = document.getElementById('onlyDemo').checked ? 1 : 0; const url = "/search.php?lang=/uz" + (page ? "&page=" + encodeURIComponent(page) : "") + "&query=" + encodeURIComponent(query) + "&demo=" + demo; const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("searchResults").innerHTML = xhr.responseText; } }; xhr.send(); } // Отправка запроса при вводе текста document.getElementById("searchInput").addEventListener("input", function() { const query = this.value.trim(); if (query.length > 2) { doSearch(query, 1); } else { document.getElementById("searchResults").innerHTML = "<div style=\"padding:24px 12px; text-align:center; color:#c7cfe0; font:600 14px/1.4 Segoe UI,system-ui;\">Qidiruvni boshlash uchun kamida 3 ta belgi kiriting.</div>"; } }); // Триггерить поиск и по клику на чекбокс (если текста уже >=3) document.getElementById('onlyDemo').addEventListener('change', function() { const query = document.getElementById('searchInput').value.trim(); if (query.length > 2) doSearch(query, 1); }); // Пагинация function paginSearch(page){ const query = document.getElementById("searchInput").value.trim(); doSearch(query, page); if (window.$) { $('#searchResults').animate({ scrollTop: 0 }, 500); } else { document.getElementById('searchResults').scrollTo({ top: 0, behavior: 'smooth' }); } } </script>  <div id="notification" class="notification"></div>  <script> function showNotification(message, type) { var notification = document.getElementById('notification'); // Сначала показываем уведомление notification.innerHTML = message; notification.classList.add(type); notification.classList.add('show'); // Убираем уведомление через 3 секунды setTimeout(function() { // Начинаем скрывать уведомление notification.classList.remove('show'); // После завершения анимации скрытия удаляем классы и готовим к следующему показу setTimeout(function() { notification.classList.remove(type); notification.innerHTML = ''; }, 300); // длительность анимации скрытия (равна времени transition) }, 3000); // убрать уведомление через 3 секунды } </script> <script> (function(){ var _fbIO = null; function initFloatingBanner(){ if (window.__fbInitOnce) return; // защита от повторной инициализации window.__fbInitOnce = true; var topBanner = document.getElementById('top-banner'); var floatingBanner = document.getElementById('floating-banner'); var closeBtn = document.getElementById('close-floating-banner'); var HIDE_KEY = 'floatingBannerHiddenUntil'; // ручное закрытие (кнопка) var HIDE_DURATION = 300 * 1000; // 300 сек var HIDE_TMP_KEY = 'floatingBannerHiddenTempUntil'; // закрытие вне/ESC/диммер var HIDE_TMP_MS = 30 * 1000; // 30 сек var TRANS_MS = 300; // длительность CSS-перехода var SHOW_DELAY_MS = 4 * 1000; // задержка показа 4 сек if (!floatingBanner) return; // === Диммер страницы === var dim = document.getElementById('floating-dim'); if (!dim) { dim = document.createElement('div'); dim.id = 'floating-dim'; dim.setAttribute('style', 'position:fixed;inset:0;'+ 'background:rgba(0,0,0,.45);opacity:0;'+ 'pointer-events:none;transition:opacity .15s ease;'+ 'z-index:1000;' ); document.body.appendChild(dim); } if (!floatingBanner.style.zIndex) floatingBanner.style.zIndex = '1001'; function showDim(){ dim.style.opacity = '1'; dim.style.pointerEvents = 'auto'; } function hideDim(){ dim.style.opacity = '0'; dim.style.pointerEvents = 'none'; } // Клик по диммеру = закрытие на HIDE_TMP_MS dim.addEventListener('click', function(){ setHideFor(HIDE_TMP_MS); wantHide(); }); function setHideFor(ms){ // universal setter: скрыть до now+ms var until = Date.now() + Math.max(0, ms|0); if (ms >= HIDE_DURATION) { localStorage.setItem(HIDE_KEY, String(until)); } else { localStorage.setItem(HIDE_TMP_KEY, String(until)); } } function canShowBanner() { var hiddenUntil = parseInt(localStorage.getItem(HIDE_KEY) || '0', 10); var hiddenTempUntil = parseInt(localStorage.getItem(HIDE_TMP_KEY) || '0', 10); var until = Math.max(hiddenUntil, hiddenTempUntil); return Date.now() > until; } function isVisible(){ return floatingBanner.classList.contains('is-visible') && getComputedStyle(floatingBanner).display !== 'none' && !floatingBanner.hasAttribute('aria-hidden'); } var busy = false; var debounceTimer = null; var showTimer = null; function clearShowTimer(){ if (showTimer) { clearTimeout(showTimer); showTimer = null; } } function setVisible(next) { if (busy) return; var current = isVisible(); if (next === current) return; busy = true; if (next) { // SHOW floatingBanner.style.display = 'block'; floatingBanner.style.pointerEvents = ''; floatingBanner.removeAttribute('aria-hidden'); floatingBanner.removeAttribute('inert'); void floatingBanner.offsetWidth; // форс-рефлоу floatingBanner.classList.add('is-visible'); showDim(); var onEndShow = function(){ floatingBanner.removeEventListener('transitionend', onEndShow); busy = false; }; floatingBanner.addEventListener('transitionend', onEndShow, { once:true }); setTimeout(function(){ floatingBanner.removeEventListener('transitionend', onEndShow); busy = false; }, TRANS_MS + 50); } else { // HIDE floatingBanner.classList.remove('is-visible'); floatingBanner.style.pointerEvents = 'none'; floatingBanner.setAttribute('aria-hidden','true'); floatingBanner.setAttribute('inert',''); var onEndHide = function(){ floatingBanner.removeEventListener('transitionend', onEndHide); floatingBanner.style.display = 'none'; hideDim(); busy = false; }; floatingBanner.addEventListener('transitionend', onEndHide, { once:true }); setTimeout(function(){ floatingBanner.removeEventListener('transitionend', onEndHide); floatingBanner.style.display = 'none'; hideDim(); busy = false; }, TRANS_MS + 80); } } function eligibleNow(){ // можно показывать и верхний баннер вне экрана if (!canShowBanner()) return false; if (!topBanner) return true; var rect = topBanner.getBoundingClientRect(); return rect.bottom <= 0; } function wantShow() { // планируем показ с задержкой clearTimeout(debounceTimer); clearShowTimer(); if (!canShowBanner()) return; showTimer = setTimeout(function(){ showTimer = null; if (eligibleNow()) setVisible(true); }, SHOW_DELAY_MS); } function wantHide() { clearTimeout(debounceTimer); clearShowTimer(); debounceTimer = setTimeout(function(){ setVisible(false); }, 120); } // Кнопка закрытия — скрываем на 300 сек if (closeBtn) { closeBtn.onclick = function (e) { e.preventDefault(); e.stopPropagation(); setHideFor(HIDE_DURATION); wantHide(); }; } // Закрытие при клике вне баннера и по Esc — на 60 сек (function initOutsideClose(){ if (window.__fbOutsideCloseInit) return; window.__fbOutsideCloseInit = true; function hideTemp(){ setHideFor(HIDE_TMP_MS); wantHide(); } function onDocPointer(e){ if (!isVisible()) return; if (!floatingBanner.contains(e.target)) hideTemp(); } document.addEventListener('mousedown', onDocPointer, true); document.addEventListener('touchstart', onDocPointer, {passive:true, capture:true}); document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && isVisible()) hideTemp(); }); })(); // Если нет верхнего баннера — показываем с задержкой, когда можно if (!topBanner) { if (canShowBanner()) wantShow(); return; } // Обсервер верхнего баннера if (_fbIO) { try { _fbIO.disconnect(); } catch(e){} _fbIO = null; } _fbIO = new IntersectionObserver(function (entries) { var entry = entries[0]; if (entry.isIntersecting) { // верхний виден -> скрыть и отменить отложенный показ wantHide(); } else { // верхний ушёл -> планируем показ с задержкой if (canShowBanner()) wantShow(); } }, { root: null, rootMargin: '0px 0px -10% 0px', threshold: 0 }); _fbIO.observe(topBanner); // Стартовое состояние (учитываем задержку) (function(){ var rect = topBanner.getBoundingClientRect(); if (rect.bottom <= 0) { if (canShowBanner()) wantShow(); } else { setVisible(false); } })(); // Ресайз/поворот window.addEventListener('resize', function(){ clearTimeout(debounceTimer); debounceTimer = setTimeout(function(){ var rect = topBanner.getBoundingClientRect(); if (rect.bottom <= 0) { if (canShowBanner()) wantShow(); } else { wantHide(); } }, 120); }, { passive:true }); } document.addEventListener('DOMContentLoaded', initFloatingBanner); window.addEventListener('pageshow', initFloatingBanner); // BFCache })(); </script> <script> // Функция для учета кликов function trackClick(num) { fetch('/ajax-banner.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'click', num: num }) }).catch(console.error); } // Функция для учета показов function trackView(num) { fetch('/ajax-banner.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'show', num: num }) }).catch(console.error); } // Наблюдатель пересечения для отслеживания показов document.addEventListener("DOMContentLoaded", () => { const options = { root: null, rootMargin: "0px", threshold: 0.5 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const num = entry.target.getAttribute("data-num"); // Получаем data-num из элемента <a> if (num) { trackView(num); } observer.unobserve(entry.target); // Отменяем наблюдение после первого показа } }); }, options); document.querySelectorAll("a[data-num]").forEach(banner => { // Наблюдатель пересечения для учета показа observer.observe(banner); // Событие click для учета клика banner.addEventListener("click", (event) => { const num = banner.getAttribute("data-num"); if (num) { trackClick(num); } }); }); }); </script> <script> document.querySelectorAll('a, button').forEach(el => { el.addEventListener('click', () => { if (typeof gtag === 'function') { gtag('event', 'click', { event_category: 'interaction', event_label: el.dataset.role || el.dataset.href || 'unknown', value: 1 }); } }); }); </script> <script> window.addEventListener('load', function() { const body = document.body; const bg = body.getAttribute('data-bg'); // Загружать фон ТОЛЬКО если экран меньше 1024px if (window.innerWidth < 1024 && bg) { body.style.backgroundImage = `url("${bg}")`; body.style.backgroundRepeat = 'no-repeat'; body.style.backgroundPosition = 'top center'; body.style.backgroundAttachment = 'scroll'; // лучше для мобильных } }); </script> </body> </html>