{"id":6276,"date":"2023-05-17T13:13:19","date_gmt":"2023-05-17T07:13:19","guid":{"rendered":"https:\/\/iii.hobbist.kz\/?page_id=6276"},"modified":"2025-12-14T13:51:07","modified_gmt":"2025-12-14T08:51:07","slug":"hero","status":"publish","type":"page","link":"https:\/\/hobbi.st\/kk\/","title":{"rendered":"\u0413\u0435\u0440\u043e\u0439"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\n \n \n \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d<\/title>\n <style>\n \/* \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0435 Tailwind CSS *\/\n body {\n font-family: \"system-ui\", \"-apple-system\", \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n background-color: #f0f2f5;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n box-sizing: border-box;\n text-align: center;\n }\n\n .final-screen-card {\n background-color: #ffffff;\n border-radius: 1.5rem;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n padding: 3rem;\n max-width: 600px;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n animation: fadeIn 0.5s ease-in-out;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .king-image-container {\n width: 200px;\n height: 200px;\n position: relative;\n margin-bottom: 1rem;\n border-radius: 50%;\n background-color: #f0f2f5;\n border: 6px solid #22c55e;\n box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n cursor: pointer;\n }\n\n .king-image-container:hover {\n transform: scale(1.05);\n box-shadow: 0 10px 30px rgba(34, 197, 94, 0.6);\n }\n \n .king-image-container:active {\n transform: scale(1.0);\n box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);\n }\n\n .king-image-container img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n\n h1 {\n font-size: 1.75rem;\n font-weight: 800;\n margin-bottom: 1rem;\n line-height: 1.2;\n color: #1f2937;\n }\n\n .king-name-link {\n text-decoration: none;\n color: #10b981;\n transition: color 0.3s ease;\n margin-bottom: 1rem;\n }\n .king-name-link:hover {\n color: #0d8c6b;\n }\n\n p {\n font-size: 1.25rem;\n color: #4b5563;\n margin-bottom: 2rem;\n }\n\n .back-button {\n background-color: #ef4444;\n color: white;\n padding: 0.4rem 1.25rem;\n border: none;\n border-radius: 9999px;\n cursor: pointer;\n font-size: 1.1rem;\n font-weight: 600;\n transition: background-color 0.3s ease, transform 0.2s ease;\n box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);\n margin-top: 0.5rem;\n text-decoration: none;\n }\n\n .back-button:hover {\n background-color: #dc2626;\n transform: translateY(-2px);\n }\n \n .kingdom-button {\n background-color: #22c55e;\n box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);\n margin-bottom: 0.5rem;\n }\n\n .kingdom-button:hover {\n background-color: #16a34a;\n }\n\n \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 *\/\n @media (max-width: 640px) {\n .final-screen-card {\n padding: 2rem;\n }\n .king-image-container {\n width: 150px;\n height: 150px;\n margin-bottom: 0.5rem;\n }\n h1 {\n font-size: 1.4rem;\n }\n p {\n font-size: 1rem;\n }\n .back-button {\n padding: 0.3rem 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"final-screen-card\" id=\"final-screen-card\">\n <!-- \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d JavaScript'\u043e\u043c -->\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const cardContainer = document.getElementById('final-screen-card');\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 localStorage\n const chosenHeroName = localStorage.getItem('chosenKingName');\n const chosenHeroImageSrc = localStorage.getItem('chosenKingImageSrc');\n \n if (chosenHeroName && chosenHeroImageSrc) {\n \/\/ \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0435\u0441\u0442\u044c (\u044e\u0437\u0435\u0440 \u0443\u0436\u0435 \u0432\u044b\u0431\u0440\u0430\u043b \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e), \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438\n const isQueen = chosenHeroName.includes('\u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0430') || chosenHeroName.includes('Queen');\n const heroType = isQueen ? 'queen' : 'king';\n const heroSlug = chosenHeroName.toLowerCase().split(' ')[0].replace(\/[^a-z0-9]\/g, '');\n const heroPageUrl = `https:\/\/hobbi.st\/${heroSlug}-${heroType}`;\n\n cardContainer.innerHTML = `\n <div class=\"king-image-container\">\n <a id=\"kingImageLink\" href=\"${heroPageUrl}\" title=\"\u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 ${chosenHeroName}\">\n <img decoding=\"async\" id=\"kingImage\" src=\"${chosenHeroImageSrc}\" alt=\"${chosenHeroName}\">\n <\/a>\n <\/div>\n <a id=\"kingNameDisplayLink\" href=\"${heroPageUrl}\" class=\"king-name-link\">\n <h1 id=\"kingNameDisplay\">${chosenHeroName}<\/h1>\n <\/a>\n <button id=\"kingdomButton\" class=\"back-button kingdom-button\" data-elementor-popup-id=\"11706\">\u0412\u043f\u0435\u0440\u0451\u0434, \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0412\u0430\u0448\u0435 \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e!<\/button>\n <button id=\"backButton\" class=\"back-button\" data-elementor-popup-id=\"13818\">\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0435 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/button>\n `;\n\n console.log(`\u0413\u0435\u0440\u043e\u0439 \u043d\u0430\u0439\u0434\u0435\u043d: ${chosenHeroName} \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e URL: ${chosenHeroImageSrc}`);\n \n } else {\n \/\/ \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u0442 (\u044e\u0437\u0435\u0440 \u0435\u0449\u0435 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043b \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e), \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0434\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0443\n cardContainer.innerHTML = `\n <div class=\"king-image-container\">\n <a id=\"kingImageLink\" href=\"#\">\n <img decoding=\"async\" id=\"kingImage\" src=\"\">\n <\/a>\n <\/div>\n <a id=\"kingNameDisplayLink\" href=\"#\" class=\"king-name-link\">\n <h1 id=\"kingNameDisplay\">\u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043e<\/h1>\n <\/a>\n <button id=\"backButton\" class=\"back-button\" data-elementor-popup-id=\"13818\">\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/button>\n `;\n console.log(\"\u0414\u0430\u043d\u043d\u044b\u0435 \u043e \u0433\u0435\u0440\u043e\u0435 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b \u0432 localStorage.\");\n }\n });\n <\/script>\n<\/body>\n<\/html>\n<!-- end king shower -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":-3,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-6276","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"0","_links":{"self":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/6276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=6276"}],"version-history":[{"count":0,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/6276\/revisions"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=6276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}