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 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> <div class="footer-disclaimer"> <strong>अस्वीकरण:</strong> WinUpGo एक स्वतंत्र सूचना एवं विश्लेषणात्मक वेबसाइट है। हम ऑनलाइन कसीनो ऑपरेटर नहीं हैं, जमा स्वीकार नहीं करते, दांवों को संसाधित नहीं करते और किसी भी प्रकार की जुआ सेवाएँ प्रदान नहीं करते। यह वेबसाइट Veikkaus Oy सहित किसी भी ऑपरेटर, ब्रांड या अधिकार धारक से संबद्ध, संबंधित या उनके द्वारा अनुमोदित नहीं है। सभी ट्रेडमार्क, ब्रांड नाम और लोगो उनके संबंधित वैध स्वामियों की संपत्ति हैं और केवल सूचना उद्देश्यों के लिए उपयोग किए जाते हैं। </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>