IFrame लॉबी क्या है और इसे कैसे एकीकृत किया जाए

आईफ्रेम लॉबी क्या है

iFrame लॉबी एक एम्बेडेड लॉबी मॉड्यूल (गेम, बैनर, श्रेणियां, खोज, त्वरित शुरुआत) है, जिसे सामग्री प्रदाता/एग्रीगेटर द्वारा होस्ट किया जाता है और ऑपरेटर के पृष्ठ के अंदर '' के माध।</p> <p><b>मुख्य विचार:</b> ऑपरेटर लॉबी को खरोंच से नहीं लिखता है, लेकिन इसके पक्ष में रिलीज के बिना तेजी से समय-से-बाजार, क्रॉस-ब्राउज़र समर्थन और अपडेट प्राप्त करते हुए तैयार को जोड़ ता है।</p> <h2>जब उपयुक्त हो</h2> <u style="text-underline-offset:5px;">नए प्रदाता/ऊर्ध्वाधर का त्वरित लॉन्च।</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>कई देशों/ब्रांडों के लिए एकीकृत शोकेस की आवश्यकता है।</li> <li>ऑपरेटर पर सीमित फ्रंटेंड कमांड।</li> </ul> <h2>पेशेवरों और विपक्ष</h2> <p><b>पेशेवरों:</b> गति, एकल कोड आधार, नए उत्पादों का ऑटो-लोडिंग, सहमत प्रदाता एनालिटिक्स।</p> <p><b>विपक्ष:</b> पिक्सेल-परफेक्ट पर कम नियंत्रण, विक्रेता अपटाइम पर निर्भरता, सूक्ष्मताओं पर नज़र रखना, SEO प्रतिबंध (एक iframe में सामग्री आपके DOM के हिस्से के रूप में अनुक्रमित नहीं है)।</p> <hr> <h2>बुनियादी वास्तुकला</h2> <p><b>1. फ्रंट (ऑपरेटर):</b> स्लॉट के साथ एक पृष्ठ '/कैसीनो 'जिसमें' <iframe src =... "/लॉबी? "...> 'एम्बेडेड है।</p> <p><b>2. ऑथ गैस्केट:</b> अल्पकालिक 'करंट टोकन' (JWT/अपारदर्शी) ऑपरेटर के बैकएंड पर उत्पन्न होता है।</p> <p><b>3. प्रदाता लॉबी:</b> मान्य टोकन, विकल्प भाषा/मुद्रा/सीमा, गेम रेंडरर और बैनर।</p> <p><b>4. मैसेजिंग बस:</b> 'विंडो। घटनाओं के लिए पृष्ठ और इफ्रेम के बीच पोस्टमैसेज (शेष, गेम स्टार्ट, ओपन कैश रजिस्टर, आदि)।</p> <p><b>5. कैशियर/केवाईसी/आरजी:</b> ऑपरेटर की तरफ (इफ्रेम के बाहर) बुलाया जाता है, लेकिन लॉबी कमांड से सुलभ है।</p> <hr> <h2>न्यूनतम कार्यान्वयन आवश्यकता</h2> <p><b>प्राधिकरण:</b> अल्पकालिक टोकन (1-15 मिनट) + पारदर्शी रोटेशन (मूक ताज़ा)।</p> <p><b>सुरक्षा:</b> सीएसपी, 'सैंडबॉक्स' और इफ्रेम के लिए सटीक 'अनुमति', सख्त 'पोस्टमैसेज' फ़िल्टरिंग।</p> <p><b>स्थिरता:</b> घटना अनुबंध (संस्करण, पिछड़े-कॉम्पैट), त्रुटियों के मामले में सुंदर-पतन।</p> <p><b>UX:</b> अनुकूली ग्रिड, तेज नेविगेशन, कार्ड प्रीलोड, कंकाल स्क्रीन।</p> <p><b>एनालिटिक्स:</b> एकीकृत घटना (छाप, क्लिक, लॉन्च, त्रुटि), मैपिंग in।</p> <hr> <h2>एम्बेडिंग उदाहरण (HTML + सुरक्षा)</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 ://लॉबी। उदाहरण। com/embed? ब्रांड = ACME & lang = ru & money = EUR & टोकन = {{SESSIVE _ TOKEN}" लोडिंग =" आलसी" रेफरपोलिसी =" सख्त-मूल-जब-क्रॉस-मूल" सैंडबॉक्स =" अनुमति-स्क्रिप्ट अनुमति-समान-मूल अनुमति-पॉपअप अनुमति-पॉपअप-टू-एस्केप-सैंडबॉक्स" = "फुलस्क्रीन की अनुमति दें; ऑटोप्ले; एन्क्रिप्टेड-मीडिया; क्लिपबोर्ड-रीड; क्लिपबोर्ड-राइट" शैली = "चौड़ाई: 100%; ऊंचाई: 100vh; सीमा: 0; प्रदर्शन: ब्लॉक; "> </iframe></code></pre> <u style="text-underline-offset:5px;">स्पष्टीकरण:</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>'sandbox' -केवल आप चाहते हैं झंडे सक्षम करें. अनावश्यक रूप से 'अलो-टॉप-नेविगेशन' न दें।</li> <li>'allow' - सचेत रूप से सुविधाओं को जोड़ें; ' भुगतान अगर वास्तव में उपयोग किया जाता है।</li> <li>'Referrerpolicy' - सीमा पैरामीटर लीक।</li> </ul> <u style="text-underline-offset:5px;">ऑपरेटर पृष्ठ पर सीएसपी (उदाहरण):</u> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code> सामग्री-सुरक्षा-नीति: डिफ़ॉल्ट-src 'स्वयं'; फ्रेम-src https ://लॉबी। उदाहरण। कॉम; स्क्रिप्ट-एसआरसी 'सेल्फ' https ://लॉबी। उदाहरण। कॉम 'असुरक्षित-इनलाइन'; img-src 'सेल्फ' https ://लॉबी। उदाहरण। कॉम डेटा:; कनेक्ट-src 'सेल्फ' https ://api। उदाहरण। कॉम https ://लॉबी। उदाहरण। कॉम;</code></pre> <p>आपके पृष्ठों के लिए एक्स-फ्रेम-विकल्प आपको एम्बेड करने में हस्तक्षेप नहीं करते हैं - प्रदाता आपके साथ एम्बेडिंग है, न कि इसके विपरीत।</p> <hr> <h2>बैकेंड पर एक टोकन उत्पन्न कर रहा है (नोड/एक्सप्रेस उदाहरण)</h2> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code>js "jsonwebtoken" से jwt आयात; "एक्सप्रेस" से आयात एक्सप्रेस const ऐप = एक्सप्रेस (); app.get ("/लॉबी-टोकन ", (req, res) => { कॉन्स्ट पेलोड = { उप: req। उपयोगकर्ता। आईडी, ब्रांड: "एसीएमई", मुद्रा: "ईयूआर", लैंग: "आरयू", टीएस: डेट। अब () }; const टोकन = jwt। हस्ताक्षर (पेलोड, प्रक्रिया। env। LOBBY_JWT_SECRET, { एल्गोरिथ्म: "HS256," exp 10 In: "m", जारीकर्ता: "acme-casino", दर्शक: "लॉबी-प्रदाता" }); रेस। json ({टोकन}); });</code></pre> <p><b>सर्वश्रेष्ठ प्रथाएं:</b> छोटी टीटीएल, ऑडिटिंग फील्ड, एचएसएम/सीक्रेट मैनेजर, 'किड' रोटेशन में कुंजी।</p> <hr> <h2>घटना संविदा संदेश</h2> <p>स्रोत व्हाइटलिस्टिंग और स्कीमा सत्यापन के साथ 'पोस्टमैसेज' का उपयोग करें।</p> <pre style="margin:14px 0; padding:12px 14px; background:#f7f7f9; color:#111827; border:1px solid #e5e7eb; border-radius:8px; overflow:auto;"><code>जेएस //होस्ट (ऑपरेटर) Const iframe = दस्तावेज़। gettelLyBYId ("ProviderLobby")। contentWindow const = "https ://लॉबी। उदाहरण। कॉम"; विंडो। AddeventListener ("संदेश", (ई) => { यदि (ई। मूल! = = LOBBY_ORIGIN) वापसी; const {type, पेलोड} = ई। डेटा {}; स्विच (प्रकार) { मामला "लॉबी: तैयार": //iframe प्रारंभ डेटा भेजें. पोस्टमैसेज ({प्रकार: "होस्ट: संदर्भ", पेलोड: { संतुलन: 125। 40, kycState: "सत्यापित", सीमा: {betMax: 100} }}, LOBBY_ORIGIN); ब्रेक; मामला "लॉबी: नया आकार": दस्तावेज़। gettelLyBYId ("ProviderLobby")। शैली। ऊंचाई = पेलोड। ऊंचाई + "पीएक्स"; ब्रेक; मामला "लॉबी: ओपनकैशियर": ओपनकैशियर () ;//आपका ब्रेक फंक्शन; केस "लॉबी: लॉन्चगेम": लॉन्चगेम (पेलोड)। GameId) ;//एक नया विंडो/ब्रेक होल खोल सकता है; केस "लॉबी: TokenRefresh": रिफ्रेशलॉबी टोकन ()। तब (t => iframe। पोस्टमैसेज ({प्रकार: "होस्ट: न्यूटोकन", पेलोड: {टोकन: t}}, LOBBY_ORIGIN) ); ब्रेक; } });</code></pre> <u style="text-underline-offset:5px;">मानक घटनाएँ (उदाहरण सेट):</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>От лобби → хосту: 'लॉबी: रेडी', 'लॉबी: रीसाइज़', 'लॉबी: ओपनकैशियर', 'लॉबी: ओपनआरजी', 'लॉबी: लॉबी गेम', 'लॉबी: ट्रैक', 'लॉबी:' टोकेनरेफ्रेश ',' लॉबी त्रुटि: '।</li> <li>होस्ट → लॉबी से: 'होस्ट: संदर्भ' (बैलेंस, लोकेल, लिमिट), 'होस्ट: न्यूटोकन', 'होस्ट: अपडेट', 'होस्ट: rgState', 'होस्ट: नेविगेशन'।</li> </ul> <hr> <h2>लॉबी से खेल चलाया जा रहा है</h2> <u style="text-underline-offset:5px;">दो दृष्टिकोण:</u> <p>1. एक ही iframe के अंदर - तेज, लेकिन कम नियंत्रण और अधिक कठिन ट्रैकिंग।</p> <p>2. अलग रूट/विंडो - सरल मैट्रिक्स, आप अपने ओवरले (आरजी/लिमिट) को लटका सकते हैं, वेब दृश्य के साथ बेहतर संगतता।</p> <u style="text-underline-offset:5px;">न्यूनतम मार्ग:</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>लॉबी 'लॉबी: LaunchGame {GameId}' भेजती है।</li> <li>मेजबान अपनी पीठ पर एक 'gameToken' उत्पन्न करता है और खोलता है '/game/: id? टोकन =... '।</li> <li>खेल टोकन स्वीकार करता है, मान्य करता है, सट्टेबाजी सत्र शुरू करता है।</li> </ul> <hr> <h2>यूएक्स और प्रदर्शन</h2> <p><b>É टच:</b> डेस्कटॉप पर 3-5 स्पीकर, 2 - टैबलेट, 1 - मोबाइल; कार्ड की ऊंचाई ठीक करें।</p> <p>कंकाल और आलसी-लोडिंग (चित्र 'लोडिंग = "आलसी",' दीर्घाओं के लिए 'कम ")।</p> <p>त्वरित खोज और फ़िल्टर - 'में चयनित टैग याद रखें? क्वैरी '/' लोकसंग्रहण '।</p> <p><b>कार्ड पर क्लिक करें:</b> क्लिक ज़ोन ≥ 44px; कीबोर्ड समर्थन (A11y)।</p> <p><b>बैनर के प्लेसहोल्डर्स:</b> ताकि लेआउट "कूद" न हो।</p> <p><b>iOS मीडिया नीति:</b> ऑटोप्ले वीडियो/ऑडियो के लिए उपयोगकर्ता इशारे की आवश्यकता होती है; डेमो में इस पर विचार करें।</p> <hr> <h2>अनुपालन और खिलाड़ी जिम्मेदारी (आरजी)</h2> <p><b>सीमाएं और समय:</b> लॉबी (केवल पढ़ ने के लिए) में वर्तमान खिलाड़ी सीमाओं को प्रदर्शित करने के लिए समर्थन, मेजबान पक्ष पर परिवर्तन रूप को बुलाता है।</p> <p><b>स्व-बहिष्करण:</b> घटना 'लॉबी: OpenRG' → iframe के बाहर अपना RG मॉड्यूल खोलें।</p> <p><b>यूर। -बैनर और 18 +:</b> मेजबान की तरफ, और लॉबी के अंदर नहीं, ताकि प्रदाता के क्रिएटिव पर निर्भर न हों।</p> <p><b>GDPR/कुकीज़:</b> लॉबी - तीसरा पक्ष, कुकी-सहमति और कानूनी ढांचे (संविदात्मक आवश्यकता/वैध हित) के बारे में सोचें।</p> <hr> <h2>स्थानीयकरण और ब्रांडिंग</h2> <p><b>भाषा/मुद्रा/क्षेत्र को 'src' और/या 'होस्ट:</b> संदर्भ' में पास करें।</p> <p>सफेद लेबल चर की अनुमति दें: रंग, लोगो, फ़ॉन्ट.</p> <p>ऑपरेटर की तरफ "पसंदीदा/हालिया" ब्लॉक रखें ताकि विक्रेता को बदलते समय डेटा न खोना पड़े।</p> <hr> <h2>एनालिटिक्स और मेट्रिक्स</h2> <u style="text-underline-offset:5px;">ट्रैकिंग परत (उदाहरण):</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>'लॉबी _ इंप्रेशन', 'टाइल _ व्यू', 'टाइल _ क्लिक', 'search _ use', 'श्रेणी _ change', 'lounch _ game', 'त्रुटि _ view'।</li> </ul> <u style="text-underline-offset:5px;">उत्पाद मैट्रिक्स के साथ सहसंबंध:</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>TTFB-Bet (लॉबी में प्रवेश करने से पहले शर्त तक का समय), CR_deposit→launch, CTR श्रेणियां/खोज, औसत देखने की गहराई।</li> </ul> <p>Iframe से कुल घटनाएँ; प्रदाता पिक्सेल के साथ "डबल काउंटिंग" से बचें।</p> <hr> <h2>कार्यान्वयन परीक्षण योजना</h2> <p><b>1. सुरक्षा:</b> CSP की जाँच, कोई अतिरिक्त 'अनुमति' और 'सैंडबॉक्स' फ्लैग, 'पोस्टमैसेज' का सत्यापन. मूल '।</p> <p><b>2. सत्र:</b> टोकन समाप्ति, मूक-ताज़ा, 401/403 पर व्यवहार।</p> <p><b>3. नया आकार:</b> मोबाइल/वेब दृश्य (Android/iOS) पर सही ऊंचाई।</p> <p><b>4. कैश डेस्क/CCM:</b> लॉबी इवेंट्स द्वारा मॉडल खोलने/बंद करने के परिदृश्य।</p> <p><b>5. प्रदाता अनुपलब्धता:</b> टाइमआउट, स्टब और रिट्रे का प्रदर्शन।</p> <p><b>6. आरजी लिमिट्स:</b> प्रदर्शित करता है और खेल को ताले पर शुरू करने से रोकता है।</p> <p><b>7. स्विचिंग लोकेल/मुद्राएं:</b> मक्खी पर और रिबूट पर।</p> <p><b>8. एनालिटिक्स:</b> काउंटर होस्ट बनाम विक्रेता की तुलना।</p> <hr> <h2>सामान्य त्रुटियाँ (एंटी-पैटर्न)</h2> <u style="text-underline-offset:5px;">'origin' की जाँच किए बिना एक 'संदेश' श्रोता को लटकाएं।</u> <ul style="padding-left:20px; list-style-type:disc; margin:10px 0 14px;"> <li>इफ्रेम पूर्ण पहुंच ('अनुमति-समान-मूल अनुमति-शीर्ष-नेविगेशन-बाय-यूजर-सक्रियण' "केवल मामले में") जारी करें।</li> <li>रोटेशन के बिना लंबे समय तक रहने वाले टोकन।</li> <li>SEO के लिए लॉबी सामग्री पर भरोसा करें।</li> <li>खिलाड़ी कैश और प्रदाता निर्देशिका कैश मिलाएं (निजीकरण को तोड़ ता है)।</li> <li>ट्रैकिंग नियंत्रण और आरजी ओवरले के बिना एक ही इफ्रेम के अंदर खेल चलाएं।</li> </ul> <hr> <h2>आईफ्रेम लॉबी एकीकरण जांच सूची</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>सहमत घटना अनुबंध (संस्करण, प्रकार, स्कीमा)।</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>TTL ≤ 15 मिनट और रोटेशन के साथ लागू/लॉबी-टोकन।</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>कॉन्फ़िगर सीएसपी, 'सैंडबॉक्स', 'अनुमति', 'रेफरपोलिसी'।</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>कनेक्टेड कैशियर/केवाईसी/आरजी और लिंक्ड 'ओपनकैशियर '/' ओपनआरजी' इवेंट।</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>जब प्रदाता नीचा दिखाता है तो गिरावट सोचा।</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>स्थानीयकरण, मुद्राओं, आयु बैनर की जाँच की।</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>एनालिटिक्स सेट करें (एंड-टू-एंड यूजर/सेशन आईडी)।</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>क्रॉस-ब्राउज़र और मोबाइल वेब दृश्य परीक्षण किया।</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>विक्रेता के साथ घटनाओं और संपर्क बिंदुओं की रनबुक का वर्णन किया।</li> </ul> <hr> <p>IFrame लॉबी खेलों की सूची का विस्तार करने और समय-से-बाजार को छोटा करने का एक त्वरित और व्यावहारिक तरीका है। स्वस्थ एकीकरण की कुंजी मजबूत सुरक्षा, एक स्पष्ट घटना अनुबंध, मजबूत प्राधिकरण और ऑपरेटर पक्ष पर विचारशील यूएक्स/एनालिटिक्स है। एक दिन ऐसा करके, आप नए विक्रेताओं के साथ लगभग "क्लिक पर" एकीकरण कर सकते हैं।</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> हिन्दी </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 target="_blank" 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="/hi/feedback-form/"><img width="30" height="30" alt="फीडबैक फॉर्म" src="https://winupgo.com/images/feedback.svg"></a> </div> </div> </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\">पासवर्ड मेल नहीं खा रहा है या खाली है", '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\">पासवर्ड सफलतापूर्वक बदल गया! <a href='/private/' class='const_link'>लॉगिन</a></div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">पासवर्ड बदला गया", '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\">सिस्टम में त्रुटि हुई, कृपया सहायता से संपर्क करें।", '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\">ई-मेल दर्ज करें", 'error'); exit; } if(!email.includes('@') || !email.includes('.')){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">अमान्य ई-मेल प्रारूप", '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\">पासवर्ड पुनः प्राप्ति का निर्देश आपके ई-मेल पर भेजा गया है। यदि मेल प्राप्त नहीं हुआ है, तो SPAM फ़ोल्डर देखें।</div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">निर्देश भेजा गया", '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\">सिस्टम में त्रुटि हुई, कृपया सहायता से संपर्क करें।", '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\">उपनाम दर्ज करें", 'error'); exit; } /*if(pass != pass2 || pass == ""){ showNotification('पासवर्ड मेल नहीं खा रहा है या खाली है', '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\">प्रोफ़ाइल बदली गई", '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\">उपनाम पहले से लिया हुआ है", '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\">ई-मेल दर्ज करें", 'error'); exit; } if(pass == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">लॉगिन त्रुटि", '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\">लॉगिन त्रुटि", 'error'); exit; }else{ document.location.href = "/hi/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\">ई-मेल दर्ज करें", 'error'); exit; } if(!email.includes('@') || !email.includes('.')){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">अमान्य ई-मेल प्रारूप", 'error'); exit; } if(pass != pass2 || pass == ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">पासवर्ड मेल नहीं खा रहा है या खाली है", '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\">पंजीकरण सफल रहा! कृपया अपना ई-मेल सत्यापित करें, यदि मेल प्राप्त नहीं हुआ है तो SPAM फ़ोल्डर जाँचें। <a href='/private/' class='const_link'>लॉगिन</a></div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">सफल पंजीकरण", '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\">उपयोगकर्ता पहले से पंजीकृत है", '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\">ई-मेल दर्ज करें", 'error'); return; // <-- было 'exit' } if(!email.includes('@') || !email.includes('.')){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">अमान्य ई-मेल प्रारूप", 'error'); return; } if(message === ""){ showNotification("<img src=\"https://winupgo.com/images/msg-error.svg\" width=\"30\" height=\"30\" alt=\"Error\">संदेश का पाठ दर्ज करें", '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\">आपके संदेश के लिए धन्यवाद।</div>"); showNotification("<img src=\"https://winupgo.com/images/msg-success.svg\" width=\"30\" height=\"30\" alt=\"Success\">संदेश भेजा गया", 'success'); //window.scrollTo({top: 0, behavior: 'smooth'}); } else { // покажем сообщение сервера, если есть showNotification(data.message || "तकनीकी कार्य चल रहे हैं", 'error'); } }, error: function(){ showNotification("तकनीकी कार्य चल रहे हैं", 'error'); } }); }); }); function Work(){ showNotification("<img src=\"https://winupgo.com/images/msg-warning.svg\" width=\"30\" height=\"30\" alt=\"Warning\">तकनीकी कार्य चल रहे हैं", '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">खेलों में खोजें</span>  <div style="margin:8px 0 6px;"> <input type="text" id="searchInput" class="search-input" placeholder="खेल का नाम दर्ज करें" 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">केवल डेमो</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;"> खोज शुरू करने के लिए कम से कम 3 अक्षर दर्ज करें। </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=/hi" + (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;\">खोज शुरू करने के लिए कम से कम 3 अक्षर दर्ज करें।</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>