{"id":11018,"date":"2025-07-23T15:02:04","date_gmt":"2025-07-23T09:02:04","guid":{"rendered":"http:\/\/hobbi.st\/?page_id=11018"},"modified":"2025-07-27T12:22:08","modified_gmt":"2025-07-27T06:22:08","slug":"landingf","status":"publish","type":"page","link":"https:\/\/khatm.hobbi.st\/kk\/landingf\/","title":{"rendered":"LandingF"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \n \n \n Game UI Widget<\/title>\n <!-- Tailwind CSS CDN -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <!-- Font Awesome CDN for icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n html, body {\n width: 100%;\n min-height: 100vh; \/* Changed to min-height to allow content to push height if needed *\/\n max-width: 100%;\n overflow: hidden; \/* Prevent any scrolling on the main page *\/\n margin: 0;\n padding: 0;\n }\n body {\n font-family: 'Inter', sans-serif;\n }\n \/* Custom styles for background and overall layout *\/\n .game-background {\n background: linear-gradient(to bottom, #87CEEB, #ADD8E6, #B0E0E6); \/* Sky blue gradient *\/\n min-height: 100vh; \/* Ensure background fills viewport, but can grow *\/\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 0.2rem;\n box-sizing: border-box;\n }\n .ui-container {\n background-color: rgba(0, 0, 0, 0.4); \/* Semi-transparent dark background *\/\n border-radius: 1.5rem; \/* Rounded corners for the main container *\/\n overflow: hidden; \/* Explicitly hide overflow, no scrolling for the container itself *\/\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n max-width: 1200px; \/* Max width for larger screens *\/\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr auto;\n height: calc(100vh - 0.4rem); \/* Calculate height to fit within game-background padding *\/\n box-sizing: border-box;\n }\n\n \/* Specific styles for UI elements to mimic game look *\/\n .ui-button {\n background-color: #3B82F6; \/* Blue *\/\n color: white;\n padding: 0.75rem 1.25rem;\n border-radius: 9999px; \/* Fully rounded *\/\n font-weight: 600;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.2s, background-color 0.2s;\n }\n .ui-button:hover {\n transform: translateY(-2px);\n background-color: #2563EB; \/* Darker blue on hover *\/\n }\n .top-bar-icon {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 0.5rem;\n padding: 0.25rem 0.75rem;\n display: flex;\n align-items: center;\n color: white;\n font-weight: 600;\n margin-left: 0.5rem;\n cursor: pointer; \/* Indicate clickability *\/\n box-sizing: border-box;\n }\n .top-bar-icon:hover {\n background-color: rgba(255, 255, 255, 0.4);\n }\n .progress-bar {\n background-color: #4B5563; \/* Dark gray *\/\n border-radius: 9999px;\n height: 0.75rem;\n overflow: hidden;\n box-sizing: border-box;\n }\n .progress-fill {\n background-color: #FBBF24; \/* Amber *\/\n height: 100%;\n width: 75%; \/* Example progress *\/\n border-radius: 9999px;\n }\n .play-button {\n background: linear-gradient(to right, #F59E0B, #EF4444); \/* Orange to Red gradient *\/\n color: white;\n font-size: 1.5rem;\n font-weight: 700;\n padding: 1rem 2rem;\n border-radius: 1.5rem;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);\n transition: transform 0.2s, background-color 0.2s;\n box-sizing: border-box;\n display: flex; \/* Added for centering content *\/\n align-items: center; \/* Added for vertical centering *\/\n justify-content: center; \/* Added for horizontal centering *\/\n }\n .play-button:hover {\n transform: translateY(-3px);\n }\n .event-info {\n background-color: rgba(0, 0, 0, 0.6);\n border-radius: 0.75rem;\n padding: 0.75rem 1rem;\n color: white;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n box-sizing: border-box;\n }\n .character-display {\n width: 100%;\n height: 100%; \/* Changed to 100% to fill main-content-area *\/\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n }\n .character-display img {\n max-height: 100%; \/* Image should fill the character-display's height *\/\n max-width: 90%;\n object-fit: contain;\n border-radius: 1.5rem;\n box-sizing: border-box;\n }\n .character-rank-badge {\n background-color: #FBBF24; \/* Amber *\/\n color: #1F2937; \/* Dark text *\/\n padding: 0.5rem 1rem;\n border-radius: 9999px;\n font-size: 1.25rem;\n font-weight: 700;\n position: absolute;\n top: 1rem;\n left: 1rem; \/* Moved to the left *\/\n transform: none; \/* Removed transform for centering *\/\n z-index: 10;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n box-sizing: border-box;\n }\n .overlay-button {\n background-color: rgba(0, 0, 0, 0.6); \/* Semi-transparent background *\/\n border-radius: 0.75rem;\n padding: 0.5rem 0.75rem;\n color: white !important; \/* Added !important for stronger white font *\/\n font-size: 0.75rem;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n cursor: pointer;\n transition: background-color 0.2s;\n text-decoration: none; \/* Remove underline from links *\/\n box-sizing: border-box;\n }\n .overlay-button:hover {\n background-color: rgba(0, 0, 0, 0.8);\n }\n .character-footer-buttons {\n position: absolute;\n bottom: 0.5rem; \/* Position at the bottom of the character display *\/\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-wrap: wrap; \/* Allow wrapping on smaller screens *\/\n justify-content: center;\n gap: 0.5rem; \/* Space between buttons *\/\n width: 95%; \/* Take up most of the width *\/\n padding: 0.5rem;\n background-color: rgba(0, 0, 0, 0.5); \/* Background for the footer area *\/\n border-radius: 0.75rem;\n box-sizing: border-box;\n }\n .character-footer-buttons .footer-button {\n background-color: rgba(255, 255, 255, 0.1); \/* Lighter background for these buttons *\/\n color: white;\n padding: 0.4rem 0.6rem;\n border-radius: 0.5rem;\n font-size: 0.7rem;\n font-weight: 500;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.2s;\n text-decoration: none;\n flex-grow: 1; \/* Allow buttons to grow and fill space *\/\n min-width: 80px; \/* Minimum width for buttons *\/\n box-sizing: border-box;\n }\n .character-footer-buttons .footer-button:hover {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n \/* Styles for the iframe content area *\/\n .content-iframe {\n width: 100%;\n height: 100%;\n border: none;\n background-color: rgba(0, 0, 0, 0.7); \/* Darker background for content *\/\n border-radius: 1.5rem;\n position: absolute; \/* Position over the hero image *\/\n top: 0;\n left: 0;\n z-index: 20; \/* Ensure it's above other elements *\/\n display: none; \/* Hidden by default *\/\n }\n .loading-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-size: 1.2rem;\n z-index: 21;\n display: none; \/* Hidden by default *\/\n }\n\n\n \/* Responsive adjustments *\/\n @media (min-width: 768px) {\n .ui-container {\n grid-template-columns: 1fr 1fr; \/* Two columns for desktop: hero image and empty space *\/\n grid-template-rows: auto 1fr auto; \/* Top, middle (flexible), bottom *\/\n }\n .main-content-area {\n grid-column: 1 \/ 3; \/* Span both columns *\/\n grid-row: 2 \/ 3; \/* Middle row *\/\n align-items: flex-start; \/* Align content to the top *\/\n padding-top: 0; \/* Removed padding at the top *\/\n overflow-y: auto; \/* ADDED: Allow vertical scrolling within the main content area *\/\n overflow-x: hidden; \/* Prevent horizontal scrolling *\/\n height: 100%; \/* Ensure it takes up full height of its grid row *\/\n }\n .left-sidebar { \/* This is now an empty placeholder for grid layout *\/\n display: none; \/* Hide left sidebar on desktop as its content is moved *\/\n }\n .top-bar {\n grid-column: 1 \/ 3; \/* Span all columns *\/\n grid-row: 1 \/ 2;\n }\n .bottom-bar {\n grid-column: 1 \/ 3; \/* Span all columns *\/\n grid-row: 3 \/ 4;\n }\n .character-overlay-buttons {\n position: absolute;\n top: 1rem; \/* Adjust position for desktop *\/\n right: 1rem; \/* Adjust position for desktop *\/\n flex-direction: column; \/* Stack vertically on desktop *\/\n gap: 0.5rem;\n }\n .overlay-button {\n padding: 0.5rem 0.75rem; \/* Default padding for desktop *\/\n font-size: 0.75rem; \/* Default font size for desktop *\/\n }\n .character-footer-buttons {\n position: absolute;\n bottom: 0.5rem; \/* Adjusted position for desktop to be visible *\/\n left: 50%;\n transform: translateX(-50%);\n flex-direction: row; \/* Keep as row on desktop *\/\n gap: 0.75rem;\n width: 90%; \/* Wider on desktop *\/\n padding: 0.75rem;\n }\n .character-footer-buttons .footer-button {\n padding: 0.5rem 0.8rem;\n font-size: 0.8rem;\n }\n \/* Character action icons for desktop *\/\n .character-action-buttons {\n position: absolute;\n bottom: 0.5rem; \/* Adjusted position to be relative to character-footer-buttons *\/\n right: 1rem; \/* Position from right *\/\n display: flex;\n gap: 0.5rem;\n flex-direction: column; \/* Stack vertically for better spacing *\/\n }\n .character-display img {\n max-height: 100%; \/* Image should fill the character-display's height *\/\n }\n .play-button {\n font-size: 1.25rem; \/* Reduced font size for desktop *\/\n }\n }\n\n @media (max-width: 767px) {\n .ui-container {\n grid-template-columns: 1fr; \/* Single column layout for mobile *\/\n grid-template-rows: auto 1fr auto; \/* Top, middle, bottom *\/\n height: auto; \/* Allow height to adjust for content *\/\n }\n .left-sidebar {\n display: none; \/* Hide left sidebar on mobile as its content is moved *\/\n }\n .main-content-area {\n padding: 0.3rem; \/* Reduced padding *\/\n justify-content: flex-start; \/* Align content to the top *\/\n padding-top: 0; \/* Removed padding at the top for mobile *\/\n overflow-y: hidden; \/* Ensure no scrolling on mobile for this area *\/\n height: 100%; \/* Ensure it takes up full height of its grid row *\/\n }\n .character-display {\n height: 100%; \/* Mobile height for character-display *\/\n }\n .character-display img {\n max-height: 100%; \/* Image should fill the character-display's height *\/\n }\n .top-bar .flex-wrap {\n flex-wrap: wrap;\n justify-content: center;\n }\n .top-bar-icon {\n margin: 0.1rem; \/* Further reduced margin *\/\n padding: 0.1rem 0.4rem; \/* Further reduced padding *\/\n font-size: 0.7rem; \/* Further smaller font size *\/\n }\n .bottom-bar {\n flex-direction: column;\n gap: 0.4rem; \/* Further reduced gap *\/\n padding: 0.4rem; \/* Further reduced padding *\/\n }\n .play-button {\n width: 100%;\n font-size: 0.9rem; \/* Further reduced font size *\/\n padding: 0.6rem 0.8rem; \/* Further reduced padding *\/\n }\n .event-info {\n width: 100%;\n font-size: 0.6rem; \/* Further reduced font size *\/\n padding: 0.4rem 0.6rem; \/* Further reduced padding *\/\n }\n \/* Adjust character action icons *\/\n .character-action-buttons { \/* Renamed for clarity *\/\n position: absolute;\n bottom: 0.5rem; \/* Adjusted for mobile to be relative to footer buttons *\/\n right: 0.3rem; \/* Position from right *\/\n display: flex;\n gap: 0.2rem; \/* Reduced gap *\/\n flex-direction: column; \/* Stack vertically for better spacing *\/\n }\n .character-action-buttons .w-12.h-12 {\n width: 2rem; \/* Further reduced size *\/\n height: 2rem; \/* Further reduced size *\/\n font-size: 0.8rem; \/* Further reduced icon size *\/\n }\n .character-rank-badge {\n padding: 0.3rem 0.6rem; \/* Reduced padding *\/\n font-size: 1rem; \/* Reduced font size *\/\n top: 0.5rem; \/* Adjusted position *\/\n left: 0.5rem; \/* Moved to the left *\/\n transform: none; \/* Removed transform for centering *\/\n }\n \/* Removed .character-trophy-count as requested *\/\n .character-overlay-buttons {\n position: absolute;\n top: 0.5rem; \/* Position from top *\/\n right: 0.5rem; \/* Position from right *\/\n display: flex;\n flex-direction: column; \/* Stack vertically on mobile *\/\n gap: 0.3rem; \/* Reduced gap *\/\n }\n .overlay-button {\n padding: 0.3rem 0.5rem; \/* Reduced padding for mobile *\/\n font-size: 0.6rem; \/* Reduced font size for mobile *\/\n border-radius: 0.5rem; \/* Slightly less rounded for smaller size *\/\n }\n .character-footer-buttons {\n position: absolute;\n bottom: 0.2rem; \/* Adjusted for mobile *\/\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-wrap: wrap; \/* Allow wrapping on smaller screens *\/\n justify-content: center;\n gap: 0.3rem; \/* Reduced gap for mobile *\/\n width: 98%; \/* Take up more width on mobile *\/\n padding: 0.3rem; \/* Reduced padding *\/\n }\n .character-footer-buttons .footer-button {\n padding: 0.3rem 0.5rem; \/* Reduced padding *\/\n font-size: 0.6rem; \/* Reduced font size *\/\n min-width: unset; \/* Remove min-width to allow more flexibility *\/\n flex-basis: calc(33.33% - 0.2rem); \/* 3 items per row on mobile, adjusted for gap *\/\n }\n }\n <\/style>\n<\/head>\n<body class=\"game-background\">\n <div class=\"ui-container\">\n <!-- Top Bar -->\n <div class=\"top-bar bg-gray-900 bg-opacity-70 p-4 flex items-center justify-between rounded-t-xl md:rounded-tr-none md:rounded-tl-xl min-w-0\">\n <!-- User Profile -->\n <a href=\"#\" class=\"flex items-center space-x-2 cursor-pointer\" data-url=\"https:\/\/khatm.hobbi.st\/profile\">\n <div class=\"w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm\">P<\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-white text-sm font-semibold\">DEFT'ASH<\/span>\n <div class=\"flex items-center text-yellow-400 text-xs\">\n <span class=\"mr-1\">\ud83c\udfc6<\/span> 789\n <\/div>\n <\/div>\n <\/a>\n <!-- Currency\/Resources -->\n <div class=\"flex items-center space-x-3 min-w-0\">\n <a href=\"#\" class=\"top-bar-icon\" data-url=\"https:\/\/khatm.hobbi.st\/gems\">\n <span class=\"mr-1\">\ud83d\udc8e<\/span> 620\n <\/a>\n <a href=\"#\" class=\"top-bar-icon\" data-url=\"https:\/\/khatm.hobbi.st\/coins\">\n <span class=\"mr-1\">\ud83d\udcb0<\/span> 125\n <\/a>\n <a href=\"#\" class=\"top-bar-icon\" data-url=\"https:\/\/khatm.hobbi.st\/energy\">\n <i class=\"fas fa-bolt mr-1\"><\/i> 1 <!-- Changed from \ud83d\udfe2 to fas fa-bolt -->\n <\/a>\n <\/div>\n <!-- Menu Icon - This typically opens a side menu, not content in the main area. Left without data-url. -->\n <a href=\"#\" target=\"_blank\" class=\"text-white text-2xl cursor-pointer\">\n ☰ <!-- Hamburger icon -->\n <\/a>\n <\/div>\n\n <!-- Main Content Area -->\n <div class=\"main-content-area flex flex-col md:flex-row bg-gray-800 bg-opacity-50 relative min-w-0\">\n <!-- Central Character Display -->\n <div class=\"flex-grow p-4 flex items-center justify-center relative min-w-0\">\n <div class=\"character-display\">\n <div class=\"character-rank-badge\">RANK 27<\/div>\n <!-- Trophy count removed -->\n <!-- Using a placeholder image for now, as the previous URL might have CORS issues -->\n <img decoding=\"async\" id=\"heroImage\" src=\"https:\/\/placehold.co\/400x600\/9333EA\/FFFFFF?text=Hero+Image\" alt=\"Hero Character Placeholder\" class=\"w-full h-full object-contain rounded-xl\" onerror=\"console.error('Failed to load hero image. Check URL or CORS settings. Original URL: https:\/\/khatm.hobbi.st\/wp-content\/uploads\/2025\/07\/%D0%B2%D0%BE%D1%80%D0%BE%D0%BD-%D0%BA%D0%BE%D1%80%D0%BE%D0%BB%D1%8C-2_C.webp');\">\n <!-- Original URL for reference: https:\/\/khatm.hobbi.st\/wp-content\/uploads\/2025\/07\/%D0%B2%D0%BE%D1%80%D0%BE%D0%BD-%D0%BA%D0%BE%D1%80%D0%BE%D0%BB%D1%8C-2_C.webp -->\n\n <!-- Overlay buttons on character image (News, Friends, Club, Team Up) -->\n <div class=\"character-overlay-buttons\">\n <a href=\"#\" class=\"overlay-button\" data-url=\"https:\/\/khatm.hobbi.st\/news-page-for-game-ui\">\n <span class=\"mr-1\">\ud83d\udcf0<\/span> \u0416\u0430\u04a3\u0430\u043b\u044b\u049b\u0442\u0430\u0440\n <\/a>\n <a href=\"#\" class=\"overlay-button\" data-url=\"https:\/\/khatm.hobbi.st\/friends-page-for-game-ui\">\n <span class=\"mr-1\">\ud83e\udd1d<\/span> \u0414\u043e\u0441\u0442\u0430\u0440\n <\/a>\n <a href=\"#\" class=\"overlay-button\" data-url=\"https:\/\/khatm.hobbi.st\/kingtest\"> <!-- Direct URL for groups -->\n <span class=\"mr-1\">\ud83c\udfd8\ufe0f<\/span> \u041a\u043b\u0443\u0431\n <\/a>\n <a href=\"#\" class=\"overlay-button\" data-url=\"https:\/\/khatm.hobbi.st\/team-up-page-for-game-ui\">\n <span class=\"mr-1\">\u2795<\/span> Team Up\n <\/a>\n <\/div>\n\n <!-- Placeholder for character specific actions\/icons (Gear, Shirt) -->\n <div class=\"character-action-buttons\">\n <a href=\"#\" class=\"w-12 h-12 bg-gray-700 bg-opacity-70 rounded-full flex items-center justify-center text-white text-xl cursor-pointer\" data-url=\"https:\/\/khatm.hobbi.st\/settings-page-for-game-ui\">\u2699\ufe0f<\/a>\n <a href=\"#\" class=\"w-12 h-12 bg-gray-700 bg-opacity-70 rounded-full flex items-center justify-center text-white text-xl cursor-pointer\" data-url=\"https:\/\/khatm.hobbi.st\/customize-page-for-game-ui\">\ud83d\udc55<\/a>\n <\/div>\n\n <!-- Buttons below hero image (Trophy Road, Shop, Brawlers, Token Doubler, Quests) -->\n <div class=\"character-footer-buttons\">\n <a href=\"#\" class=\"footer-button\" data-url=\"https:\/\/khatm.hobbi.st\/trophy-road-page-for-game-ui\">\n <span class=\"mr-1\">\ud83c\udfc6<\/span> Trophy Road\n <\/a>\n <a href=\"#\" class=\"footer-button\" data-url=\"https:\/\/khatm.hobbi.st\/shop-page-for-game-ui\">\n <span class=\"mr-1\">\ud83d\uded2<\/span> \u0414\u04af\u043a\u0435\u043d\n <\/a>\n <a href=\"#\" class=\"footer-button\" data-url=\"https:\/\/khatm.hobbi.st\/brawlers-page-for-game-ui\">\n <span class=\"mr-1\">\u2b50<\/span> HobbiStars\n <\/a>\n <a href=\"#\" class=\"footer-button\" data-url=\"https:\/\/khatm.hobbi.st\/token-doubler-page-for-game-ui\">\n <span class=\"mr-1\">\ud83c\udf9f\ufe0f<\/span> Token Doubler\n <\/a>\n <a href=\"#\" class=\"footer-button\" data-url=\"https:\/\/khatm.hobbi.st\/quests-page-for-game-ui\">\n <span class=\"mr-1\">\ud83d\udcdc<\/span> \u041a\u0432\u0435\u0441\u0442\u0442\u0435\u0440\n <\/a>\n <\/div>\n\n <!-- Iframe for dynamic content -->\n <iframe id=\"contentIframe\" class=\"content-iframe\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms allow-modals\" allow=\"fullscreen\"><\/iframe>\n <div id=\"loadingIndicator\" class=\"loading-indicator\">Loading...<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Bottom Bar -->\n <div class=\"bottom-bar bg-gray-900 bg-opacity-70 p-4 flex flex-col md:flex-row items-center justify-between rounded-b-xl md:rounded-bl-none md:rounded-br-xl min-w-0\">\n <!-- XP Progress -->\n <div class=\"flex items-center space-x-2 w-full md:w-1\/3 mb-4 md:mb-0 min-w-0\">\n <div class=\"text-white text-sm font-semibold\">XP<\/div>\n <div class=\"progress-bar flex-grow\">\n <div class=\"progress-fill\"><\/div>\n <\/div>\n <span class=\"text-white text-sm\">779\/950<\/span>\n <\/div>\n <!-- Event Info -->\n <div class=\"event-info w-full md:w-1\/3 mb-4 md:mb-0 min-w-0\">\n <span class=\"text-yellow-300 text-lg\">\u2728<\/span>\n <span>\u041e\u049b\u0438\u0493\u0430: \u0420\u0443\u0445 \u0441\u043e\u0493\u044b\u0441\u0442\u0430\u0440\u044b<\/span>\n <span class=\"text-gray-400 text-xs\">5h 51m<\/span>\n <\/div>\n <!-- Play Button Removed -->\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Select all elements that have a 'data-url' attribute\n const allNavigableButtons = document.querySelectorAll('[data-url]');\n const contentIframe = document.getElementById('contentIframe');\n const heroImage = document.getElementById('heroImage');\n const loadingIndicator = document.getElementById('loadingIndicator');\n\n \/\/ Function to load content into the iframe\n function loadContent(url) {\n if (!url) {\n \/\/ If no URL, clear iframe and show hero image\n contentIframe.src = 'about:blank'; \/\/ Clear iframe content\n contentIframe.style.display = 'none';\n heroImage.style.display = 'block';\n loadingIndicator.style.display = 'none';\n return;\n }\n\n heroImage.style.display = 'none'; \/\/ Hide hero image\n contentIframe.style.display = 'block'; \/\/ Show iframe\n loadingIndicator.style.display = 'block'; \/\/ Show loading indicator\n \n contentIframe.src = url;\n\n \/\/ Hide loading indicator when iframe content is loaded\n contentIframe.onload = () => {\n loadingIndicator.style.display = 'none';\n };\n contentIframe.onerror = () => {\n loadingIndicator.style.display = 'none';\n console.error('Error loading iframe content:', url);\n \/\/ Optionally display an error message within the iframe itself or main UI\n contentIframe.contentDocument.body.innerHTML = `<p style=\"color: red; padding: 1rem;\">Failed to load content from ${url}. Please check the URL and ensure it's accessible and allows embedding.<\/p>`;\n };\n }\n\n \/\/ Add click listeners to all elements with data-url\n allNavigableButtons.forEach(button => {\n button.addEventListener('click', (event) => {\n event.preventDefault(); \/\/ Prevent default link behavior\n const url = button.getAttribute('data-url');\n loadContent(url);\n });\n });\n\n \/\/ Initially, ensure hero image is visible and iframe is hidden\n heroImage.style.display = 'block';\n contentIframe.style.display = 'none';\n loadingIndicator.style.display = 'none';\n });\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Game UI Widget P DEFT’ASH ???? 789 ???? 620 ???? 125 1 ☰ RANK 27 ???? News ???? Friends ????\ufe0f Club \u2795 Team Up \u2699\ufe0f ???? ???? Trophy Road ???? Shop \u2b50 HobbiStars ????\ufe0f Token Doubler ???? Quests Loading… XP 779\/950 \u2728 New Event: Spirit Wars 5h 51m<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-11018","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=11018"}],"version-history":[{"count":0,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11018\/revisions"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=11018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}