\u041f\u0430\u043d\u0435\u043b\u044c \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e\u043c<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) *\/\n body {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #1f2937, #111827);\n color: #d1d5db;\n min-height: 100vh;\n }\n .container {\n max-width: 1200px;\n }\n h1, h2 {\n font-family: 'Montserrat', sans-serif;\n }\n .header-title {\n background-image: linear-gradient(45deg, #14b8a6, #3b82f6);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n .btn-primary {\n background-image: linear-gradient(45deg, #14b8a6, #0d9488);\n color: white;\n transition: all 0.3s ease-in-out;\n border: 1px solid #14b8a6;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);\n }\n .btn-active {\n background-image: linear-gradient(45deg, #0d9488, #065f46);\n border: 2px solid #34d399;\n transform: scale(1.05);\n }\n .card {\n background-color: #1f2937;\n border: 1px solid #374151;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n position: relative;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n }\n .progress-bar-bg {\n background-color: #374151;\n border-radius: 9999px;\n overflow: hidden;\n }\n .progress-bar-fill {\n background-image: linear-gradient(45deg, #14b8a6, #3b82f6);\n transition: width 0.5s ease-in-out;\n }\n .disabled-feature {\n filter: grayscale(100%);\n opacity: 0.5;\n pointer-events: none;\n }\n .pricing-badge {\n background-color: #f59e0b;\n color: white;\n }\n .tab-button {\n color: #9ca3af;\n border: 1px solid #374151;\n }\n .tab-button.active {\n background-image: linear-gradient(45deg, #14b8a6, #3b82f6);\n color: white;\n border-color: #14b8a6;\n }\n .tab-content {\n display: none;\n }\n .tab-content.active {\n display: block;\n }\n .theme-switcher {\n position: absolute;\n top: 2rem;\n right: 2rem;\n background-color: #374151;\n color: #d1d5db;\n padding: 0.5rem 1rem;\n border-radius: 9999px;\n cursor: pointer;\n transition: all 0.3s;\n border: 1px solid #4b5563;\n }\n .theme-switcher:hover {\n background-color: #4b5563;\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u044b *\/\n body.light-theme {\n background: linear-gradient(135deg, #f3f4f6, #ffffff);\n color: #1f2937;\n }\n .light-theme .header-title {\n background-image: linear-gradient(45deg, #0d9488, #2563eb);\n }\n .light-theme .btn-primary {\n background-image: linear-gradient(45deg, #0d9488, #065f46);\n color: white;\n border: 1px solid #0d9488;\n }\n .light-theme .btn-primary:hover {\n transform: translateY(-2px);\n }\n .light-theme .btn-active {\n background-image: linear-gradient(45deg, #065f46, #047857);\n border: 2px solid #10b981;\n }\n .light-theme .card {\n background-color: #ffffff;\n border: 1px solid #d1d5d1;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n .light-theme .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .light-theme .progress-bar-bg {\n background-color: #e5e7eb;\n }\n .light-theme .progress-bar-fill {\n background-image: linear-gradient(45deg, #10b981, #2563eb);\n }\n .light-theme .tab-button {\n color: #4b5563;\n border: 1px solid #d1d5d1;\n }\n .light-theme .tab-button.active {\n background-image: linear-gradient(45deg, #10b981, #2563eb);\n color: white;\n border-color: #10b981;\n }\n .light-theme .text-white {\n color: #1f2937 !important;\n }\n .light-theme .text-gray-400 {\n color: #4b5563;\n }\n .light-theme .text-gray-500 {\n color: #6b7280;\n }\n .light-theme .text-gray-700 {\n color: #4b5563;\n }\n .light-theme .bg-gray-800,\n .light-theme .bg-gray-900,\n .light-theme .bg-gray-700 {\n background-color: #f9fafb;\n border-color: #e5e7eb;\n }\n .light-theme .theme-switcher {\n background-color: #e5e7eb;\n color: #1f2937;\n border: 1px solid #d1d5d1;\n }\n .light-theme .theme-switcher:hover {\n background-color: #d1d5d1;\n }\n <\/style>\n<\/head>\n<body class=\"text-slate-200\">\n\n <div class=\"container mx-auto p-4 md:p-8 relative\">\n\n <button id=\"theme-switcher\" class=\"theme-switcher flex items-center gap-2\">\n <i class=\"fa-solid fa-sun text-yellow-500\"><\/i>\n <span class=\"font-medium\"><\/span>\n <\/button>\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-5xl font-bold header-title\">\u041c\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/h1>\n <p class=\"text-gray-400 mt-2\">\u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0438\u043c \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c<\/p>\n <\/header>\n\n \n <section class=\"mb-8 bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-700\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041f\u0430\u043d\u0435\u043b\u044c<\/h2>\n <div class=\"flex flex-wrap gap-2 mb-6\">\n <div class=\"tab-button rounded-lg transition-colors duration-300 active\" data-tab=\"gamipress\">\u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f<\/div>\n <div class=\"tab-button rounded-lg transition-colors duration-300\" data-tab=\"tutorlms\">\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f<\/div>\n <div class=\"tab-button rounded-lg transition-colors duration-300\" data-tab=\"buddypress\">\u0421\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u044b<\/div>\n <div class=\"tab-button rounded-lg transition-colors duration-300\" data-tab=\"monetization\">\u041a\u0430\u0437\u043d\u0430<\/div>\n <\/div>\n \n \n <div id=\"gamipress-tab\" class=\"tab-content active\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f<\/h3>\n <div id=\"gamipress-achievements\" class=\"space-y-3\">\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0420\u0430\u043d\u0433\u0438<\/h3>\n <div class=\"space-y-3\">\n <div class=\"flex justify-between\">\n <span class=\"text-gray-400\">\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u043d\u0433:<\/span>\n <span class=\"font-bold text-white\" id=\"current-rank\"><\/span>\n <\/div>\n <div class=\"progress-bar-bg w-full h-3 mt-2 rounded-full\">\n <div class=\"progress-bar-fill h-3 rounded-full\" style=\"width: 30%;\"><\/div>\n <\/div>\n <div class=\"text-sm text-gray-500 text-right\">30% \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u043d\u0433\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"tutorlms-tab\" class=\"tab-content\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u041c\u043e\u0438 \u043a\u0443\u0440\u0441\u044b<\/h3>\n <div id=\"tutor-courses\" class=\"space-y-3\">\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/h3>\n <div class=\"space-y-3 text-gray-400\">\n <div class=\"flex justify-between\">\n <span>\u0412\u0441\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0432:<\/span>\n <span class=\"font-bold text-white\">2<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u041f\u0440\u043e\u0439\u0434\u0435\u043d\u043e \u0443\u0440\u043e\u043a\u043e\u0432:<\/span>\n <span class=\"font-bold text-white\">12<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0421\u0440\u0435\u0434\u043d\u044f\u044f \u043e\u0446\u0435\u043d\u043a\u0430:<\/span>\n <span class=\"font-bold text-white\">4.5\/5<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"buddypress-tab\" class=\"tab-content\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e<\/h3>\n <div class=\"space-y-3 text-gray-400\">\n <div class=\"flex justify-between\">\n <span>\u0414\u0440\u0443\u0437\u044c\u044f:<\/span>\n <span class=\"font-bold text-white\" id=\"bp-friends\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0413\u0440\u0443\u043f\u043f\u044b:<\/span>\n <span class=\"font-bold text-white\" id=\"bp-groups\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f:<\/span>\n <span class=\"font-bold text-white\" id=\"bp-messages\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n <div class=\"space-y-2 max-h-40 overflow-y-auto\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"monetization-tab\" class=\"tab-content\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0414\u043e\u0445\u043e\u0434\u044b<\/h3>\n <div class=\"space-y-3 text-gray-400\">\n <div class=\"flex justify-between\">\n <span>\u041e\u0431\u0449\u0438\u0439 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a:<\/span>\n <span class=\"font-bold text-xl text-white\" id=\"total-earnings\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430:<\/span>\n <span class=\"font-bold text-xl text-white\" id=\"available-earnings\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u041a\u043e\u043c\u0438\u0441\u0441\u0438\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b:<\/span>\n <span class=\"font-bold text-xl text-white\" id=\"platform-fee\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/h3>\n <div class=\"space-y-2 max-h-40 overflow-y-auto\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"plan-selector-section\" class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-center mb-4 text-white\">\u0412\u0430\u0448 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043b\u0430\u043d<\/h2>\n <div class=\"flex justify-center gap-4 relative\">\n <div class=\"relative flex-1\">\n <button id=\"plan-free\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors btn-active\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">0 KZT<\/div>\n <\/div>\n <div class=\"relative flex-1\">\n <button id=\"plan-basic\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">1500 KZT<\/div>\n <\/div>\n <div class=\"relative flex-1\">\n <button id=\"plan-premium\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors\">\u041f\u0440\u0435\u043c\u0438\u0443\u043c<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">4500 KZT<\/div>\n <\/div>\n <div class=\"relative flex-1\">\n <button id=\"plan-vip\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors\">VIP<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">15000 KZT<\/div>\n <\/div>\n <\/div>\n <div id=\"status-message\" class=\"text-center mt-4 text-sm text-red-400\"><\/div>\n <\/section>\n\n \n <section id=\"plan-details-section\" class=\"mb-12 card p-6 rounded-xl\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043b\u0430\u043d\u0430<\/h2>\n <div id=\"plan-description\" class=\"text-gray-400 mb-4\"><\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-gray-400\" id=\"plan-features\">\n <\/div>\n <\/section>\n\n <main class=\"space-y-12\">\n \n <section id=\"resources-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u0420\u0435\u0441\u0443\u0440\u0441\u044b \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430<\/h2>\n <div id=\"resources\" class=\"grid grid-cols-2 md:grid-cols-4 gap-4 text-center\">\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-crown text-3xl mb-2 text-yellow-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"total-level\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c 1<\/p>\n <p class=\"text-gray-400\">\u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/p>\n <\/div>\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-bolt text-3xl mb-2 text-indigo-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"resource-hobbist-energy\">100<\/p>\n <p class=\"text-gray-400\">Hobbist Energy<\/p>\n <\/div>\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-coins text-3xl mb-2 text-yellow-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"resource-coins\">0<\/p>\n <p class=\"text-gray-400\">Hobbist \u041a\u043e\u0439\u043d\u044b<\/p>\n <\/div>\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-star text-3xl mb-2 text-amber-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"total-xp\">0 XP<\/p>\n <p class=\"text-gray-400\">\u041e\u0431\u0449\u0438\u0439 \u041e\u043f\u044b\u0442<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"kingdom-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041f\u043e\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430<\/h2>\n <p class=\"text-gray-400 mb-4 max-w-3xl\">\u041a\u0430\u0436\u0434\u043e\u0435 \u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0436\u043d\u0443\u044e \u0441\u0444\u0435\u0440\u0443 \u0432\u0430\u0448\u0435\u0439 \u0436\u0438\u0437\u043d\u0438. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043a\u0432\u0435\u0441\u0442\u044b, \u043f\u0440\u043e\u0445\u043e\u0434\u044f \u043a\u0443\u0440\u0441\u044b \u0438 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044f \u0432 \u0431\u0438\u0442\u0432\u0430\u0445 hobbist combat \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u00a0\u0437\u0434\u0430\u043d\u0438\u0435\u043c, \u0432\u044b \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0435 \u0435\u0433\u043e \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f.<\/p>\n <div id=\"buildings\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <\/div>\n <\/section>\n\n <section id=\"quests-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u0417\u0430\u043b \u041a\u0432\u0435\u0441\u0442\u043e\u0432<\/h2>\n <div class=\"card p-6 rounded-xl\">\n <h3 class=\"text-xl font-bold mb-4 text-white\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u0432\u0435\u0441\u0442<\/h3>\n <form id=\"add-quest-form\" class=\"grid grid-cols-1 md:grid-cols-4 gap-4 items-end\" action=\"\">\n <div class=\"md:col-span-2\">\n <label for=\"quest-text\" class=\"block text-sm font-medium text-gray-400\">\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0432\u0435\u0441\u0442\u0430<\/label>\n <input type=\"text\" id=\"quest-text\" class=\"mt-1 block w-full rounded-lg border-gray-700 bg-gray-900 text-white shadow-sm focus:border-teal-500 focus:ring-teal-500\" required>\n <\/div>\n <div>\n <label for=\"quest-building\" class=\"block text-sm font-medium text-gray-400\">\u0417\u0434\u0430\u043d\u0438\u0435<\/label>\n <select id=\"quest-building\" class=\"mt-1 block w-full rounded-lg border-gray-700 bg-gray-900 text-white shadow-sm focus:border-teal-500 focus:ring-teal-500\">\n <\/select>\n <\/div>\n <div>\n <label for=\"quest-type\" class=\"block text-sm font-medium text-gray-400\">\u0422\u0438\u043f \u043a\u0432\u0435\u0441\u0442\u0430<\/label>\n <select id=\"quest-type\" class=\"mt-1 block w-full rounded-lg border-gray-700 bg-gray-900 text-white shadow-sm focus:border-teal-500 focus:ring-teal-500\">\n <option value=\"personal\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/option>\n <option value=\"public\">\u041f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 (+5 Coins)<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"btn-primary w-full md:w-auto justify-self-start py-2 px-4 rounded-lg shadow-sm text-sm font-medium\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0432\u0435\u0441\u0442<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ru\"\/><\/form>\n <\/div>\n <div id=\"quests-list\" class=\"mt-6 space-y-4\">\n <\/div>\n <\/section>\n\n <section id=\"progress-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041b\u0435\u0442\u043e\u043f\u0438\u0441\u044c \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/h2>\n <p class=\"text-gray-400 mb-4 max-w-3xl\">\u042d\u0442\u043e\u0442 \u0433\u0440\u0430\u0444\u0438\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u043e\u043f\u044b\u0442\u0430. \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0439\u0442\u0435 \u0437\u0430 \u0441\u0432\u043e\u0438\u043c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0438 \u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0432\u0430\u0448\u0435 \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u0442\u0435\u0442 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0434\u043d\u0435\u043c.<\/p>\n <div class=\"card p-6 rounded-xl\">\n <div class=\"chart-container\">\n <canvas id=\"progressChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n <\/div>\n\n <script>\n const plans = {\n free: {\n maxQuests: 3,\n description: '\u0422\u0438\u0437\u0435\u0440 \u0434\u043b\u044f \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0444\u0438\u043b\u044c, 5 \u043f\u043e\u0441\u0442\u043e\u0432\/\u0444\u043e\u0442\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e, \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0433\u0440\u0443\u043f\u043f\u044b. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c\u201d \u2014 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u043e\u0432, \u0441\u0442\u0440\u0438\u043c\u043e\u0432, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b. 1 \u043f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442 (+5 Coins).',\n features: {\n monetization: false,\n courseCreation: false,\n advancedAnalytics: false,\n daoVoting: false,\n },\n publicQuestLimit: 1,\n priceKZT: 0,\n priceUSD: 0\n },\n basic: {\n maxQuests: Infinity,\n description: '\u0414\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u041d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u0442\u044b, \u0432\u0441\u0435 \u0433\u0440\u0443\u043f\u043f\u044b. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u0411\u043e\u0435\u0446\u201d \u2014 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435\/\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b. \u0411\u0435\u0437 \u0440\u0435\u043a\u043b\u0430\u043c\u044b, \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430.',\n features: {\n monetization: { enabled: true, rate: '20%' },\n courseCreation: false,\n advancedAnalytics: false,\n daoVoting: false,\n },\n publicQuestLimit: Infinity,\n priceKZT: 1500,\n priceUSD: 3\n },\n premium: {\n maxQuests: Infinity,\n description: '\u0414\u043b\u044f \u043b\u0438\u0434\u0435\u0440\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u041e\u0444\u0438\u0446\u0435\u0440\u201d \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0439. LMS: \u041a\u0443\u0440\u0441\u044b \u0441 10% \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u0435\u0439. \u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430, \u0431\u0435\u0439\u0434\u0436\u0438, \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430.',\n features: {\n monetization: { enabled: true, rate: '10%' },\n courseCreation: true,\n advancedAnalytics: true,\n daoVoting: false,\n },\n publicQuestLimit: Infinity,\n priceKZT: 4500,\n priceUSD: 10\n },\n vip: {\n maxQuests: Infinity,\n description: '\u042d\u043a\u0441\u043a\u043b\u044e\u0437\u0438\u0432, 13 \u0433\u0435\u043d\u0435\u0440\u0430\u043b\u043e\u0432\/\u0441\u0442\u0440\u0430\u043d\u0430. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u0413\u0435\u043d\u0435\u0440\u0430\u043b\u201d \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u0441\u0441\u0438\u0438. LMS: \u041a\u0443\u0440\u0441\u044b \u0441 5% \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u0435\u0439. DAO: 1 Coin = 1 \u0433\u043e\u043b\u043e\u0441. \u0414\u043e\u0445\u043e\u0434: 1\u20135% \u043e\u0442 \u0434\u043e\u0445\u043e\u0434\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u044b. NFT, \u0430\u0432\u0430\u0442\u0430\u0440\u044b.',\n features: {\n monetization: { enabled: true, rate: '5%' },\n courseCreation: true,\n advancedAnalytics: true,\n daoVoting: true,\n },\n publicQuestLimit: Infinity,\n priceKZT: 15000,\n priceUSD: 30,\n generalsLimit: 13\n },\n };\n\n \/\/ \u0418\u043a\u043e\u043d\u043a\u0438 \u0437\u0434\u0430\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u043d\u043e\u0432\n const buildingIcons = {\n default: {\n castle: 'fa-solid fa-castle',\n library: 'fa-solid fa-book-open',\n barracks: 'fa-solid fa-helmet-battle',\n market: 'fa-solid fa-chart-line',\n temple: 'fa-solid fa-hand-holding-hand',\n village: 'fa-solid fa-users',\n },\n vip: {\n castle: 'fa-solid fa-chess-queen',\n library: 'fa-solid fa-book-journal-whills',\n barracks: 'fa-solid fa-dragon',\n market: 'fa-solid fa-gem',\n temple: 'fa-solid fa-meteor',\n village: 'fa-solid fa-globe',\n }\n };\n\n const initialGameState = {\n currentPlan: 'free',\n totalXP: 0,\n kingdomLevel: 1,\n kingdomXpToNext: 500,\n resources: { hobbistEnergy: 100, coins: 0 },\n buildings: {\n castle: { key: 'castle', name: '\u0417\u0430\u043c\u043e\u043a', description: '\u0424\u0438\u0437. \u0438 \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-castle' },\n library: { key: 'library', name: '\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430', description: '\u0417\u043d\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-book-open' },\n barracks: { key: 'barracks', name: '\u041a\u0430\u0437\u0430\u0440\u043c\u044b', description: '\u0424\u0438\u0437. \u0444\u043e\u0440\u043c\u0430 \u0438 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0430', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-helmet-battle' },\n market: { key: 'market', name: '\u0420\u044b\u043d\u043e\u043a', description: '\u0424\u0438\u043d\u0430\u043d\u0441\u044b \u0438 \u043a\u0430\u0440\u044c\u0435\u0440\u0430', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-chart-line' },\n temple: { key: 'temple', name: '\u0425\u0440\u0430\u043c', description: '\u0414\u0443\u0445\u043e\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-hand-holding-hand' },\n village: { key: 'village', name: '\u0414\u0435\u0440\u0435\u0432\u043d\u044f', description: '\u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u044f\u0437\u0438', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-users' },\n },\n quests: [\n { id: 1, text: '\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c 20 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043a\u043d\u0438\u0433\u0438', building: 'library', xp: 10, completed: false, type: 'personal' },\n { id: 2, text: '\u0421\u0434\u0435\u043b\u0430\u0442\u044c 20 \u043e\u0442\u0436\u0438\u043c\u0430\u043d\u0438\u0439', building: 'barracks', xp: 5, completed: false, type: 'personal' },\n ],\n progressHistory: {},\n trialQuestCompleted: false,\n \/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0439 \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438\n gamipress: {\n achievements: [\n { name: '\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438', status: 'completed' },\n { name: '\u041c\u0430\u0441\u0442\u0435\u0440 \u043a\u0432\u0435\u0441\u0442\u043e\u0432', status: 'in-progress', progress: 60 }\n ],\n rank: '\u041d\u043e\u0432\u0438\u0447\u043e\u043a',\n rankProgress: 30\n },\n tutorlms: {\n courses: [\n { name: '\u041e\u0441\u043d\u043e\u0432\u044b \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f', progress: 75 },\n { name: '\u0424\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0441\u0442\u044c', progress: 25 }\n ],\n stats: {\n totalCourses: 2,\n completedLessons: 12,\n averageGrade: 4.5\n }\n },\n buddypress: {\n friends: 24,\n groups: 5,\n messages: 12,\n activity: [\n { text: '\u041d\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 \"\u0421\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\"', time: '2 \u0447\u0430\u0441\u0430 \u043d\u0430\u0437\u0430\u0434' },\n { text: '\u0412\u0430\u0448 \u0434\u0440\u0443\u0433 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b \u043a\u0443\u0440\u0441 \"\u0424\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0441\u0442\u044c\"', time: '5 \u0447\u0430\u0441\u043e\u0432 \u043d\u0430\u0437\u0430\u0434' }\n ]\n },\n monetization: {\n totalEarnings: 0,\n availableEarnings: 0,\n platformFee: '0%',\n transactions: [\n { type: '\u0417\u0430\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0432\u0435\u0441\u0442', amount: 10, date: '21.09.2025', isPositive: true },\n { type: '\u041f\u043e\u043a\u0443\u043f\u043a\u0430 \u043a\u0443\u0440\u0441\u0430', amount: 50, date: '20.09.2025', isPositive: false }\n ]\n }\n };\n\n let gameState = JSON.parse(JSON.stringify(initialGameState));\n let progressChartInstance;\n\n function getTodayString() {\n const today = new Date();\n return today.toISOString().split('T')[0];\n }\n\n function renderAll() {\n renderResources();\n renderBuildings();\n renderQuests();\n renderChart();\n updatePlanButtons();\n renderPlanDetails();\n renderPluginData();\n }\n\n function updatePlan(planName) {\n \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043b\u0430\u043d \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435\n gameState.currentPlan = planName;\n const statusMessage = document.getElementById('status-message');\n statusMessage.innerText = `\u0412\u044b \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 \u0442\u0430\u0440\u0438\u0444: ${planName}.`;\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u043c\n gameState.monetization.platformFee = plans[planName].features.monetization.rate || '0%';\n \n \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u043b\u0430\u0433 \u043f\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u043a\u0432\u0435\u0441\u0442\u0430, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u043d\n if (planName !== 'free') {\n gameState.trialQuestCompleted = false;\n }\n \n renderAll();\n }\n\n function updatePlanButtons() {\n const buttons = document.querySelectorAll('#plan-selector-section button');\n buttons.forEach(btn => {\n btn.classList.remove('btn-active');\n if (btn.id === `plan-${gameState.currentPlan}`) {\n btn.classList.add('btn-active');\n }\n });\n }\n\n function renderPlanDetails() {\n const plan = plans[gameState.currentPlan];\n document.getElementById('plan-description').innerText = plan.description;\n const featuresContainer = document.getElementById('plan-features');\n featuresContainer.innerHTML = `\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.monetization.enabled ? '\u2705' : '\u274c'}<\/span>\n <span>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f${plan.features.monetization.enabled ? ` (${plan.features.monetization.rate} \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044f)` : ''}<\/span>\n <\/div>\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.courseCreation ? '\u2705' : '\u274c'}<\/span>\n <span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0432<\/span>\n <\/div>\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.advancedAnalytics ? '\u2705' : '\u274c'}<\/span>\n <span>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/span>\n <\/div>\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.daoVoting ? '\u2705' : '\u274c'}<\/span>\n <span>DAO-\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u0435<\/span>\n <\/div>\n ${plan.generalsLimit ? `\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\"><i class=\"fa-solid fa-user-tie\"><\/i><\/span>\n <span>\u041b\u0438\u043c\u0438\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u043b\u043e\u0432: ${plan.generalsLimit}\/\u0441\u0442\u0440\u0430\u043d\u0430<\/span>\n <\/div>\n ` : ''}\n `;\n }\n \n function renderBuildings() {\n const container = document.getElementById('buildings');\n container.innerHTML = '';\n \n \/\/ **\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435:** \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c VIP-\u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u043d\u043e\u0432 (\u044d\u0444\u0444\u0435\u043a\u0442 \"\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" VIP-\u043d\u0430\u0431\u043e\u0440\u0430).\n \/\/ \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0431\u043e\u0440 VIP-\u0438\u043a\u043e\u043d\u043e\u043a \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0432\u0441\u0435\u0445 \u0442\u0430\u0440\u0438\u0444\u0430\u0445.\n \/\/ \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f VIP-\u043d\u0430\u0431\u043e\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0439.\n const currentIcons = buildingIcons.vip || buildingIcons.default;\n \n for (const key in gameState.buildings) {\n const b = gameState.buildings[key];\n const progress = (b.xp \/ b.xpToNext) * 100;\n container.innerHTML += `\n <div class=\"card p-6 rounded-xl flex flex-col\">\n <div class=\"flex items-center mb-4\">\n <i class=\"${currentIcons[key] || buildingIcons.default[key]} text-4xl mr-4 text-teal-400\"><\/i>\n <div>\n <h3 class=\"font-bold text-xl text-white\">${b.name}<\/h3>\n <p class=\"text-gray-400 text-sm\">${b.description}<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-auto\">\n <div class=\"flex justify-between items-center mb-1 text-sm text-gray-400\">\n <span class=\"font-semibold\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c ${b.level}<\/span>\n <span class=\"text-gray-500\">${b.xp} \/ ${b.xpToNext} XP<\/span>\n <\/div>\n <div class=\"progress-bar-bg w-full h-3 rounded-full\">\n <div class=\"progress-bar-fill h-3 rounded-full\" style=\"width: ${progress}%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n }\n\n function renderQuests() {\n const container = document.getElementById('quests-list');\n const select = document.getElementById('quest-building');\n const questTypeSelect = document.getElementById('quest-type');\n const formContainer = document.getElementById('add-quest-form');\n container.innerHTML = '';\n select.innerHTML = '';\n \n const currentPlan = plans[gameState.currentPlan];\n const activeQuests = gameState.quests.filter(q => !q.completed);\n const personalQuests = activeQuests.filter(q => q.type === 'personal');\n const publicQuests = activeQuests.filter(q => q.type === 'public');\n\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043a\u0432\u0435\u0441\u0442\u043e\u0432\n questTypeSelect.innerHTML = `<option value=\"personal\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 (+Hobbist Energy)<\/option>`.trim();\n if (currentPlan.publicQuestLimit > 0 && publicQuests.length < currentPlan.publicQuestLimit) {\n questTypeSelect.innerHTML += `<option value=\"public\">\u041f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 (+5 Coins)<\/option>`.trim();\n } else if (currentPlan.publicQuestLimit === Infinity) {\n questTypeSelect.innerHTML += `<option value=\"public\">\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 (+Coins, +Energy)<\/option>`.trim();\n }\n\n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0444\u043e\u0440\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0432\u0435\u0441\u0442\u0430 \u043d\u0430 Free \u043f\u043b\u0430\u043d\u0435\n const isFreePlanAndOverLimit = gameState.currentPlan === 'free' && personalQuests.length >= currentPlan.maxQuests;\n if (isFreePlanAndOverLimit) {\n formContainer.classList.add('disabled-feature');\n document.getElementById('status-message').innerText = `\u0412\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u043b\u0438\u043c\u0438\u0442\u0430 (${currentPlan.maxQuests}) \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0432\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043b\u0430\u043d\u0430. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u043d.`;\n } else {\n formContainer.classList.remove('disabled-feature');\n document.getElementById('status-message').innerText = '';\n }\n\n if(activeQuests.length === 0){\n container.innerHTML = `<p class=\"text-center text-gray-500 p-4 bg-gray-800 rounded-lg\">\u041d\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u0432\u0435\u0441\u0442\u043e\u0432. \u0412\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439!<\/p>`;\n } else {\n activeQuests.forEach(q => {\n const building = gameState.buildings[q.building];\n const currentIcons = buildingIcons.vip || buildingIcons.default; \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c VIP \u0438\u043a\u043e\u043d\u043a\u0438\n const iconClass = currentIcons[q.building] || buildingIcons.default[q.building];\n const rewardText = q.type === 'public' ? `+5 Coins` : `+10-20 Hobbist Energy`;\n container.innerHTML += `\n <div class=\"card p-4 rounded-xl flex items-center justify-between\">\n <div class=\"flex items-center\">\n <i class=\"${iconClass} text-2xl mr-4 text-teal-400\"><\/i>\n <div>\n <p class=\"font-semibold text-white\">${q.text}<\/p>\n <p class=\"text-sm text-gray-500\">\u0422\u0438\u043f: ${q.type === 'public' ? '\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439' : '\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439'} | \u041d\u0430\u0433\u0440\u0430\u0434\u0430: ${rewardText}<\/p>\n <\/div>\n <\/div>\n <button class=\"btn-primary py-2 px-4 rounded-md text-sm font-medium\">\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/button>\n <\/div>\n `;\n });\n }\n \n for (const key in gameState.buildings) {\n const b = gameState.buildings[key];\n select.innerHTML += `<option value=\"${key}\">${b.name}<\/option>`;\n }\n \n \/\/ Add click listener to newly rendered complete buttons\n document.querySelectorAll('#quests-list button').forEach(button => {\n button.addEventListener('click', (e) => {\n const questElement = e.target.closest('.card');\n const questIndex = Array.from(questElement.parentNode.children).indexOf(questElement);\n const questId = activeQuests[questIndex].id;\n completeQuest(questId);\n });\n });\n }\n\n function renderResources() {\n document.getElementById('total-level').innerText = `\u0423\u0440\u043e\u0432\u0435\u043d\u044c ${gameState.kingdomLevel}`;\n document.getElementById('resource-hobbist-energy').innerText = gameState.resources.hobbistEnergy;\n document.getElementById('resource-coins').innerText = gameState.resources.coins;\n document.getElementById('total-xp').innerText = `${gameState.totalXP} XP`;\n }\n\n function renderChart() {\n const ctx = document.getElementById('progressChart').getContext('2d');\n const labels = [];\n const data = [];\n \n for(let i = 6; i >= 0; i--) {\n const d = new Date();\n d.setDate(d.getDate() - i);\n const dateString = d.toISOString().split('T')[0];\n labels.push(dateString.substring(5));\n data.push(gameState.progressHistory[dateString] || 0);\n }\n\n if (progressChartInstance) {\n progressChartInstance.destroy();\n }\n\n progressChartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'XP \u0437\u0430 \u0434\u0435\u043d\u044c',\n data: data,\n borderColor: '#3b82f6',\n backgroundColor: 'rgba(59, 130, 246, 0.2)',\n fill: true,\n tension: 0.3,\n pointBackgroundColor: '#14b8a6',\n pointBorderColor: '#fff'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n grid: {\n color: 'rgba(255, 255, 255, 0.1)',\n borderColor: 'rgba(255, 255, 255, 0.2)'\n },\n ticks: {\n color: '#a3a3a3'\n }\n },\n x: {\n grid: {\n color: 'rgba(255, 255, 255, 0.1)',\n borderColor: 'rgba(255, 255, 255, 0.2)'\n },\n ticks: {\n color: '#a3a3a3'\n }\n }\n },\n plugins: {\n legend: {\n display: false,\n }\n }\n }\n });\n }\n\n function renderPluginData() {\n \/\/ GamiPress \u0434\u0430\u043d\u043d\u044b\u0435\n const gpAchievements = document.getElementById('gamipress-achievements');\n gpAchievements.innerHTML = '';\n gameState.gamipress.achievements.forEach(ach => {\n let statusBadge = '';\n if (ach.status === 'completed') {\n statusBadge = '<span class=\"bg-green-600 text-white text-xs px-2 py-1 rounded-full\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043e<\/span>';\n } else if (ach.status === 'in-progress') {\n statusBadge = `<span class=\"bg-yellow-600 text-white text-xs px-2 py-1 rounded-full\">${ach.progress}%<\/span>`;\n }\n gpAchievements.innerHTML += `\n <div class=\"flex justify-between items-center text-gray-400\">\n <span>${ach.name}<\/span>\n ${statusBadge}\n <\/div>\n `;\n });\n\n document.getElementById('current-rank').innerText = gameState.gamipress.rank;\n document.querySelector('#gamipress-tab .progress-bar-fill').style.width = `${gameState.gamipress.rankProgress}%`;\n document.querySelector('#gamipress-tab .text-right').innerText = `${gameState.gamipress.rankProgress}% \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u043d\u0433\u0430`;\n\n \/\/ Tutor LMS \u0434\u0430\u043d\u043d\u044b\u0435\n const tutorCourses = document.getElementById('tutor-courses');\n tutorCourses.innerHTML = '';\n gameState.tutorlms.courses.forEach(course => {\n tutorCourses.innerHTML += `\n <div class=\"flex justify-between items-center border-b border-gray-700 pb-2 text-gray-400\">\n <span>${course.name}<\/span>\n <span class=\"bg-blue-600 text-white text-xs px-2 py-1 rounded-full\">${course.progress}% \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e<\/span>\n <\/div>\n `;\n });\n\n \/\/ BuddyPress \u0434\u0430\u043d\u043d\u044b\u0435\n document.getElementById('bp-friends').innerText = gameState.buddypress.friends;\n document.getElementById('bp-groups').innerText = gameState.buddypress.groups;\n document.getElementById('bp-messages').innerText = gameState.buddypress.messages;\n\n const bpActivity = document.querySelector('#buddypress-tab .space-y-2');\n bpActivity.innerHTML = '';\n gameState.buddypress.activity.forEach(activity => {\n bpActivity.innerHTML += `\n <div class=\"text-sm p-2 bg-gray-700 rounded-lg flex justify-between text-gray-400\">\n <div>\n <div>${activity.text}<\/div>\n <div class=\"text-xs text-gray-500\">${activity.time}<\/div>\n <\/div>\n <\/div>\n `;\n });\n\n \/\/ \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0435\n document.getElementById('total-earnings').innerText = `${gameState.monetization.totalEarnings} Coins`;\n document.getElementById('available-earnings').innerText = `${gameState.monetization.availableEarnings} Coins`;\n document.getElementById('platform-fee').innerText = gameState.monetization.platformFee;\n\n const monetizationHistory = document.querySelector('#monetization-tab .space-y-2');\n monetizationHistory.innerHTML = '';\n gameState.monetization.transactions.forEach(transaction => {\n const amountClass = transaction.isPositive ? 'text-green-400' : 'text-red-400';\n const amountSign = transaction.isPositive ? '+' : '-';\n monetizationHistory.innerHTML += `\n <div class=\"text-sm p-2 bg-gray-700 rounded-lg flex justify-between text-gray-400\">\n <div>\n <div>${transaction.type}<\/div>\n <div class=\"text-xs text-gray-500\">${transaction.date}<\/div>\n <\/div>\n <div class=\"${amountClass}\">${amountSign}${transaction.amount} Coins<\/div>\n <\/div>\n `;\n });\n }\n\n function addQuest(event) {\n event.preventDefault();\n const text = document.getElementById('quest-text').value;\n const building = document.getElementById('quest-building').value;\n const questType = document.getElementById('quest-type').value;\n\n const currentPlan = plans[gameState.currentPlan];\n const activeQuests = gameState.quests.filter(q => !q.completed);\n const personalQuests = activeQuests.filter(q => q.type === 'personal');\n const publicQuests = activeQuests.filter(q => q.type === 'public');\n\n if (questType === 'public' && publicQuests.length >= currentPlan.publicQuestLimit) {\n document.getElementById('status-message').innerText = `\u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442: \u043b\u0438\u043c\u0438\u0442 (${currentPlan.publicQuestLimit}) \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442.`;\n return;\n }\n if (questType === 'personal' && personalQuests.length >= currentPlan.maxQuests) {\n document.getElementById('status-message').innerText = `\u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442: \u043b\u0438\u043c\u0438\u0442 (${currentPlan.maxQuests}) \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u043d.`;\n return;\n }\n \n const newQuest = {\n id: Date.now(),\n text,\n building,\n xp: 10,\n completed: false,\n type: questType\n };\n gameState.quests.push(newQuest);\n document.getElementById('add-quest-form').reset();\n document.getElementById('status-message').innerText = '';\n renderAll();\n }\n\n function completeQuest(questId) {\n const quest = gameState.quests.find(q => q.id === questId);\n const statusMessage = document.getElementById('status-message');\n if (!quest) return;\n\n \/\/ \u041d\u0430\u0433\u0440\u0430\u0434\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u0432\u0435\u0441\u0442\u0430 \u0438 \u043f\u043b\u0430\u043d\u0430\n if (quest.type === 'personal') {\n const energyEarned = Math.floor(Math.random() * 11) + 10;\n gameState.resources.hobbistEnergy += energyEarned; \n statusMessage.innerText = `\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u0432\u0435\u0441\u0442, \u0432\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 ${energyEarned} Hobbist Energy!`;\n } else if (quest.type === 'public' && gameState.currentPlan === 'free') {\n if(gameState.trialQuestCompleted) {\n statusMessage.innerText = `\u0412\u044b \u0443\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043b\u0430\u043d\u0430.`;\n return;\n }\n gameState.resources.coins += 5;\n gameState.monetization.totalEarnings += 5;\n gameState.monetization.availableEarnings += 5;\n gameState.monetization.transactions.unshift({\n type: '\u0417\u0430\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0432\u0435\u0441\u0442',\n amount: 5,\n date: new Date().toLocaleDateString('ru-RU'),\n isPositive: true\n });\n gameState.trialQuestCompleted = true;\n statusMessage.innerText = `\u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430! \u0412\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 5 Coins.`;\n } else {\n const coinsEarned = Math.floor(Math.random() * 41) + 10; \/\/ +10-50 Coins\n const energyEarned = Math.floor(Math.random() * 41) + 10; \/\/ +10-50 Energy\n gameState.resources.coins += coinsEarned;\n gameState.resources.hobbistEnergy += energyEarned;\n gameState.monetization.totalEarnings += coinsEarned;\n gameState.monetization.availableEarnings += coinsEarned;\n gameState.monetization.transactions.unshift({\n type: '\u0417\u0430\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0432\u0435\u0441\u0442',\n amount: coinsEarned,\n date: new Date().toLocaleDateString('ru-RU'),\n isPositive: true\n });\n statusMessage.innerText = `\u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430! \u0412\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 ${coinsEarned} Coins \u0438 ${energyEarned} Energy.`;\n }\n\n quest.completed = true;\n \n const building = gameState.buildings[quest.building];\n building.xp += quest.xp;\n gameState.totalXP += quest.xp;\n\n const today = getTodayString();\n if (!gameState.progressHistory[today]) {\n gameState.progressHistory[today] = 0;\n }\n gameState.progressHistory[today] += quest.xp;\n\n if (building.xp >= building.xpToNext) {\n building.level++;\n building.xp -= building.xpToNext;\n building.xpToNext = Math.floor(building.xpToNext * 1.5);\n }\n \n if (gameState.totalXP >= gameState.kingdomXpToNext) {\n gameState.kingdomLevel++;\n gameState.totalXP -= gameState.kingdomXpToNext;\n gameState.kingdomXpToNext = Math.floor(gameState.kingdomXpToNext * 1.7);\n }\n\n gameState.quests = gameState.quests.filter(q => q.id !== questId);\n\n renderAll();\n }\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a\n function switchTab(tabName) {\n \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438\n document.querySelectorAll('.tab-content').forEach(tab => {\n tab.classList.remove('active');\n });\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443\n document.getElementById(`${tabName}-tab`).classList.add('active');\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438\n document.querySelectorAll('.tab-button').forEach(button => {\n button.classList.remove('active');\n if (button.getAttribute('data-tab') === tabName) {\n button.classList.add('active');\n }\n });\n }\n\n \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b\n const themeSwitcher = document.getElementById('theme-switcher');\n themeSwitcher.addEventListener('click', () => {\n document.body.classList.toggle('light-theme');\n const isLightTheme = document.body.classList.contains('light-theme');\n const icon = themeSwitcher.querySelector('i');\n const text = themeSwitcher.querySelector('span');\n \n if (isLightTheme) {\n icon.classList.remove('fa-sun', 'text-yellow-500');\n icon.classList.add('fa-moon', 'text-indigo-600');\n text.innerText = '';\n } else {\n icon.classList.remove('fa-moon', 'text-indigo-600');\n icon.classList.add('fa-sun', 'text-yellow-500');\n text.innerText = '';\n }\n });\n\n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\n function initEventListeners() {\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0430\u0440\u0438\u0444\u043e\u0432\n document.getElementById('plan-free').addEventListener('click', () => updatePlan('free'));\n document.getElementById('plan-basic').addEventListener('click', () => updatePlan('basic'));\n document.getElementById('plan-premium').addEventListener('click', () => updatePlan('premium'));\n document.getElementById('plan-vip').addEventListener('click', () => updatePlan('vip'));\n\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0432\u0435\u0441\u0442\u0430\n document.getElementById('add-quest-form').addEventListener('submit', addQuest);\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a\n document.querySelectorAll('.tab-button').forEach(button => {\n button.addEventListener('click', () => {\n const tabName = button.getAttribute('data-tab');\n switchTab(tabName);\n });\n });\n }\n\n window.onload = () => {\n renderAll();\n initEventListeners();\n };\n\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u041f\u0430\u043d\u0435\u043b\u044c \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e\u043c \u041c\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0438\u043c \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u041f\u0430\u043d\u0435\u043b\u044c \u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f \u0421\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u044b \u041a\u0430\u0437\u043d\u0430 \u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0420\u0430\u043d\u0433\u0438 \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u043d\u0433: 30% \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u043d\u0433\u0430 \u041c\u043e\u0438 \u043a\u0443\u0440\u0441\u044b \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0412\u0441\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0432: 2 \u041f\u0440\u043e\u0439\u0434\u0435\u043d\u043e \u0443\u0440\u043e\u043a\u043e\u0432: 12 \u0421\u0440\u0435\u0434\u043d\u044f\u044f \u043e\u0446\u0435\u043d\u043a\u0430: 4.5\/5 \u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0414\u0440\u0443\u0437\u044c\u044f: \u0413\u0440\u0443\u043f\u043f\u044b: \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f: \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0414\u043e\u0445\u043e\u0434\u044b \u041e\u0431\u0449\u0438\u0439 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a: \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430: \u041a\u043e\u043c\u0438\u0441\u0441\u0438\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b: \u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0412\u0430\u0448 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043b\u0430\u043d Free 0 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"give_campaign_id":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-13483","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/comments?post=13483"}],"version-history":[{"count":0,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13483\/revisions"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=13483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13483,"date":"2025-10-19T17:54:53","date_gmt":"2025-10-19T11:54:53","guid":{"rendered":"http:\/\/hobbi.st\/?page_id=13483"},"modified":"2025-10-19T17:56:26","modified_gmt":"2025-10-19T11:56:26","slug":"13483-2","status":"publish","type":"page","link":"https:\/\/khatm.hobbi.st\/ru\/13483-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n \n \n \u041f\u0430\u043d\u0435\u043b\u044c \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e\u043c<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@700;900&family=Inter:wght@400;600&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) *\/\n body {\n font-family: 'Inter', sans-serif;\n background: linear-gradient(135deg, #1f2937, #111827);\n color: #d1d5db;\n min-height: 100vh;\n }\n .container {\n max-width: 1200px;\n }\n h1, h2 {\n font-family: 'Montserrat', sans-serif;\n }\n .header-title {\n background-image: linear-gradient(45deg, #14b8a6, #3b82f6);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n .btn-primary {\n background-image: linear-gradient(45deg, #14b8a6, #0d9488);\n color: white;\n transition: all 0.3s ease-in-out;\n border: 1px solid #14b8a6;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);\n }\n .btn-active {\n background-image: linear-gradient(45deg, #0d9488, #065f46);\n border: 2px solid #34d399;\n transform: scale(1.05);\n }\n .card {\n background-color: #1f2937;\n border: 1px solid #374151;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n position: relative;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n }\n .progress-bar-bg {\n background-color: #374151;\n border-radius: 9999px;\n overflow: hidden;\n }\n .progress-bar-fill {\n background-image: linear-gradient(45deg, #14b8a6, #3b82f6);\n transition: width 0.5s ease-in-out;\n }\n .disabled-feature {\n filter: grayscale(100%);\n opacity: 0.5;\n pointer-events: none;\n }\n .pricing-badge {\n background-color: #f59e0b;\n color: white;\n }\n .tab-button {\n color: #9ca3af;\n border: 1px solid #374151;\n }\n .tab-button.active {\n background-image: linear-gradient(45deg, #14b8a6, #3b82f6);\n color: white;\n border-color: #14b8a6;\n }\n .tab-content {\n display: none;\n }\n .tab-content.active {\n display: block;\n }\n .theme-switcher {\n position: absolute;\n top: 2rem;\n right: 2rem;\n background-color: #374151;\n color: #d1d5db;\n padding: 0.5rem 1rem;\n border-radius: 9999px;\n cursor: pointer;\n transition: all 0.3s;\n border: 1px solid #4b5563;\n }\n .theme-switcher:hover {\n background-color: #4b5563;\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u044b *\/\n body.light-theme {\n background: linear-gradient(135deg, #f3f4f6, #ffffff);\n color: #1f2937;\n }\n .light-theme .header-title {\n background-image: linear-gradient(45deg, #0d9488, #2563eb);\n }\n .light-theme .btn-primary {\n background-image: linear-gradient(45deg, #0d9488, #065f46);\n color: white;\n border: 1px solid #0d9488;\n }\n .light-theme .btn-primary:hover {\n transform: translateY(-2px);\n }\n .light-theme .btn-active {\n background-image: linear-gradient(45deg, #065f46, #047857);\n border: 2px solid #10b981;\n }\n .light-theme .card {\n background-color: #ffffff;\n border: 1px solid #d1d5d1;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n .light-theme .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .light-theme .progress-bar-bg {\n background-color: #e5e7eb;\n }\n .light-theme .progress-bar-fill {\n background-image: linear-gradient(45deg, #10b981, #2563eb);\n }\n .light-theme .tab-button {\n color: #4b5563;\n border: 1px solid #d1d5d1;\n }\n .light-theme .tab-button.active {\n background-image: linear-gradient(45deg, #10b981, #2563eb);\n color: white;\n border-color: #10b981;\n }\n .light-theme .text-white {\n color: #1f2937 !important;\n }\n .light-theme .text-gray-400 {\n color: #4b5563;\n }\n .light-theme .text-gray-500 {\n color: #6b7280;\n }\n .light-theme .text-gray-700 {\n color: #4b5563;\n }\n .light-theme .bg-gray-800,\n .light-theme .bg-gray-900,\n .light-theme .bg-gray-700 {\n background-color: #f9fafb;\n border-color: #e5e7eb;\n }\n .light-theme .theme-switcher {\n background-color: #e5e7eb;\n color: #1f2937;\n border: 1px solid #d1d5d1;\n }\n .light-theme .theme-switcher:hover {\n background-color: #d1d5d1;\n }\n <\/style>\n<\/head>\n<body class=\"text-slate-200\">\n\n <div class=\"container mx-auto p-4 md:p-8 relative\">\n\n <button id=\"theme-switcher\" class=\"theme-switcher flex items-center gap-2\">\n <i class=\"fa-solid fa-sun text-yellow-500\"><\/i>\n <span class=\"font-medium\"><\/span>\n <\/button>\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-5xl font-bold header-title\">\u041c\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/h1>\n <p class=\"text-gray-400 mt-2\">\u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0438\u043c \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c<\/p>\n <\/header>\n\n \n <section class=\"mb-8 bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-700\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041f\u0430\u043d\u0435\u043b\u044c<\/h2>\n <div class=\"flex flex-wrap gap-2 mb-6\">\n <div class=\"tab-button rounded-lg transition-colors duration-300 active\" data-tab=\"gamipress\">\u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f<\/div>\n <div class=\"tab-button rounded-lg transition-colors duration-300\" data-tab=\"tutorlms\">\u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f<\/div>\n <div class=\"tab-button rounded-lg transition-colors duration-300\" data-tab=\"buddypress\">\u0421\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u044b<\/div>\n <div class=\"tab-button rounded-lg transition-colors duration-300\" data-tab=\"monetization\">\u041a\u0430\u0437\u043d\u0430<\/div>\n <\/div>\n \n \n <div id=\"gamipress-tab\" class=\"tab-content active\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f<\/h3>\n <div id=\"gamipress-achievements\" class=\"space-y-3\">\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0420\u0430\u043d\u0433\u0438<\/h3>\n <div class=\"space-y-3\">\n <div class=\"flex justify-between\">\n <span class=\"text-gray-400\">\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u043d\u0433:<\/span>\n <span class=\"font-bold text-white\" id=\"current-rank\"><\/span>\n <\/div>\n <div class=\"progress-bar-bg w-full h-3 mt-2 rounded-full\">\n <div class=\"progress-bar-fill h-3 rounded-full\" style=\"width: 30%;\"><\/div>\n <\/div>\n <div class=\"text-sm text-gray-500 text-right\">30% \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u043d\u0433\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"tutorlms-tab\" class=\"tab-content\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u041c\u043e\u0438 \u043a\u0443\u0440\u0441\u044b<\/h3>\n <div id=\"tutor-courses\" class=\"space-y-3\">\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f<\/h3>\n <div class=\"space-y-3 text-gray-400\">\n <div class=\"flex justify-between\">\n <span>\u0412\u0441\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0432:<\/span>\n <span class=\"font-bold text-white\">2<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u041f\u0440\u043e\u0439\u0434\u0435\u043d\u043e \u0443\u0440\u043e\u043a\u043e\u0432:<\/span>\n <span class=\"font-bold text-white\">12<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0421\u0440\u0435\u0434\u043d\u044f\u044f \u043e\u0446\u0435\u043d\u043a\u0430:<\/span>\n <span class=\"font-bold text-white\">4.5\/5<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"buddypress-tab\" class=\"tab-content\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e<\/h3>\n <div class=\"space-y-3 text-gray-400\">\n <div class=\"flex justify-between\">\n <span>\u0414\u0440\u0443\u0437\u044c\u044f:<\/span>\n <span class=\"font-bold text-white\" id=\"bp-friends\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0413\u0440\u0443\u043f\u043f\u044b:<\/span>\n <span class=\"font-bold text-white\" id=\"bp-groups\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f:<\/span>\n <span class=\"font-bold text-white\" id=\"bp-messages\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n <div class=\"space-y-2 max-h-40 overflow-y-auto\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"monetization-tab\" class=\"tab-content\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0414\u043e\u0445\u043e\u0434\u044b<\/h3>\n <div class=\"space-y-3 text-gray-400\">\n <div class=\"flex justify-between\">\n <span>\u041e\u0431\u0449\u0438\u0439 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a:<\/span>\n <span class=\"font-bold text-xl text-white\" id=\"total-earnings\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430:<\/span>\n <span class=\"font-bold text-xl text-white\" id=\"available-earnings\"><\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>\u041a\u043e\u043c\u0438\u0441\u0441\u0438\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b:<\/span>\n <span class=\"font-bold text-xl text-white\" id=\"platform-fee\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"plugin-card card p-4 rounded-lg bg-gray-900 border-gray-700\">\n <h3 class=\"font-bold text-lg mb-2 text-white\">\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439<\/h3>\n <div class=\"space-y-2 max-h-40 overflow-y-auto\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"plan-selector-section\" class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-center mb-4 text-white\">\u0412\u0430\u0448 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043b\u0430\u043d<\/h2>\n <div class=\"flex justify-center gap-4 relative\">\n <div class=\"relative flex-1\">\n <button id=\"plan-free\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors btn-active\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">0 KZT<\/div>\n <\/div>\n <div class=\"relative flex-1\">\n <button id=\"plan-basic\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">1500 KZT<\/div>\n <\/div>\n <div class=\"relative flex-1\">\n <button id=\"plan-premium\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors\">\u041f\u0440\u0435\u043c\u0438\u0443\u043c<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">4500 KZT<\/div>\n <\/div>\n <div class=\"relative flex-1\">\n <button id=\"plan-vip\" class=\"btn-primary w-full py-2 px-6 rounded-lg text-sm font-medium transition-colors\">VIP<\/button>\n <div class=\"pricing-badge absolute top-0 right-0 -mt-2 -mr-2 text-xs py-1 px-3 rounded-full\">15000 KZT<\/div>\n <\/div>\n <\/div>\n <div id=\"status-message\" class=\"text-center mt-4 text-sm text-red-400\"><\/div>\n <\/section>\n\n \n <section id=\"plan-details-section\" class=\"mb-12 card p-6 rounded-xl\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043b\u0430\u043d\u0430<\/h2>\n <div id=\"plan-description\" class=\"text-gray-400 mb-4\"><\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-gray-400\" id=\"plan-features\">\n <\/div>\n <\/section>\n\n <main class=\"space-y-12\">\n \n <section id=\"resources-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u0420\u0435\u0441\u0443\u0440\u0441\u044b \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430<\/h2>\n <div id=\"resources\" class=\"grid grid-cols-2 md:grid-cols-4 gap-4 text-center\">\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-crown text-3xl mb-2 text-yellow-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"total-level\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c 1<\/p>\n <p class=\"text-gray-400\">\u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/p>\n <\/div>\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-bolt text-3xl mb-2 text-indigo-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"resource-hobbist-energy\">100<\/p>\n <p class=\"text-gray-400\">Hobbist Energy<\/p>\n <\/div>\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-coins text-3xl mb-2 text-yellow-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"resource-coins\">0<\/p>\n <p class=\"text-gray-400\">Hobbist \u041a\u043e\u0439\u043d\u044b<\/p>\n <\/div>\n <div class=\"card p-4 rounded-xl\">\n <i class=\"fa-solid fa-star text-3xl mb-2 text-amber-400\"><\/i>\n <p class=\"font-bold text-xl text-white\" id=\"total-xp\">0 XP<\/p>\n <p class=\"text-gray-400\">\u041e\u0431\u0449\u0438\u0439 \u041e\u043f\u044b\u0442<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"kingdom-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041f\u043e\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430<\/h2>\n <p class=\"text-gray-400 mb-4 max-w-3xl\">\u041a\u0430\u0436\u0434\u043e\u0435 \u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0436\u043d\u0443\u044e \u0441\u0444\u0435\u0440\u0443 \u0432\u0430\u0448\u0435\u0439 \u0436\u0438\u0437\u043d\u0438. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043a\u0432\u0435\u0441\u0442\u044b, \u043f\u0440\u043e\u0445\u043e\u0434\u044f \u043a\u0443\u0440\u0441\u044b \u0438 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044f \u0432 \u0431\u0438\u0442\u0432\u0430\u0445 hobbist combat \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u00a0\u0437\u0434\u0430\u043d\u0438\u0435\u043c, \u0432\u044b \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0435 \u0435\u0433\u043e \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f.<\/p>\n <div id=\"buildings\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <\/div>\n <\/section>\n\n <section id=\"quests-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u0417\u0430\u043b \u041a\u0432\u0435\u0441\u0442\u043e\u0432<\/h2>\n <div class=\"card p-6 rounded-xl\">\n <h3 class=\"text-xl font-bold mb-4 text-white\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u0432\u0435\u0441\u0442<\/h3>\n <form id=\"add-quest-form\" class=\"grid grid-cols-1 md:grid-cols-4 gap-4 items-end\" action=\"\">\n <div class=\"md:col-span-2\">\n <label for=\"quest-text\" class=\"block text-sm font-medium text-gray-400\">\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0432\u0435\u0441\u0442\u0430<\/label>\n <input type=\"text\" id=\"quest-text\" class=\"mt-1 block w-full rounded-lg border-gray-700 bg-gray-900 text-white shadow-sm focus:border-teal-500 focus:ring-teal-500\" required>\n <\/div>\n <div>\n <label for=\"quest-building\" class=\"block text-sm font-medium text-gray-400\">\u0417\u0434\u0430\u043d\u0438\u0435<\/label>\n <select id=\"quest-building\" class=\"mt-1 block w-full rounded-lg border-gray-700 bg-gray-900 text-white shadow-sm focus:border-teal-500 focus:ring-teal-500\">\n <\/select>\n <\/div>\n <div>\n <label for=\"quest-type\" class=\"block text-sm font-medium text-gray-400\">\u0422\u0438\u043f \u043a\u0432\u0435\u0441\u0442\u0430<\/label>\n <select id=\"quest-type\" class=\"mt-1 block w-full rounded-lg border-gray-700 bg-gray-900 text-white shadow-sm focus:border-teal-500 focus:ring-teal-500\">\n <option value=\"personal\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/option>\n <option value=\"public\">\u041f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 (+5 Coins)<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"btn-primary w-full md:w-auto justify-self-start py-2 px-4 rounded-lg shadow-sm text-sm font-medium\">\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0432\u0435\u0441\u0442<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"ru\"\/><\/form>\n <\/div>\n <div id=\"quests-list\" class=\"mt-6 space-y-4\">\n <\/div>\n <\/section>\n\n <section id=\"progress-section\">\n <h2 class=\"text-2xl font-bold mb-4 text-white\">\u041b\u0435\u0442\u043e\u043f\u0438\u0441\u044c \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/h2>\n <p class=\"text-gray-400 mb-4 max-w-3xl\">\u042d\u0442\u043e\u0442 \u0433\u0440\u0430\u0444\u0438\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u043e\u043f\u044b\u0442\u0430. \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0439\u0442\u0435 \u0437\u0430 \u0441\u0432\u043e\u0438\u043c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0438 \u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0432\u0430\u0448\u0435 \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u0442\u0435\u0442 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0434\u043d\u0435\u043c.<\/p>\n <div class=\"card p-6 rounded-xl\">\n <div class=\"chart-container\">\n <canvas id=\"progressChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n <\/div>\n\n <script>\n const plans = {\n free: {\n maxQuests: 3,\n description: '\u0422\u0438\u0437\u0435\u0440 \u0434\u043b\u044f \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0444\u0438\u043b\u044c, 5 \u043f\u043e\u0441\u0442\u043e\u0432\/\u0444\u043e\u0442\u043e \u0432 \u043d\u0435\u0434\u0435\u043b\u044e, \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0433\u0440\u0443\u043f\u043f\u044b. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c\u201d \u2014 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u043e\u0432, \u0441\u0442\u0440\u0438\u043c\u043e\u0432, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b. 1 \u043f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442 (+5 Coins).',\n features: {\n monetization: false,\n courseCreation: false,\n advancedAnalytics: false,\n daoVoting: false,\n },\n publicQuestLimit: 1,\n priceKZT: 0,\n priceUSD: 0\n },\n basic: {\n maxQuests: Infinity,\n description: '\u0414\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u041d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u0442\u044b, \u0432\u0441\u0435 \u0433\u0440\u0443\u043f\u043f\u044b. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u0411\u043e\u0435\u0446\u201d \u2014 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435\/\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b. \u0411\u0435\u0437 \u0440\u0435\u043a\u043b\u0430\u043c\u044b, \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430.',\n features: {\n monetization: { enabled: true, rate: '20%' },\n courseCreation: false,\n advancedAnalytics: false,\n daoVoting: false,\n },\n publicQuestLimit: Infinity,\n priceKZT: 1500,\n priceUSD: 3\n },\n premium: {\n maxQuests: Infinity,\n description: '\u0414\u043b\u044f \u043b\u0438\u0434\u0435\u0440\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u041e\u0444\u0438\u0446\u0435\u0440\u201d \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0439. LMS: \u041a\u0443\u0440\u0441\u044b \u0441 10% \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u0435\u0439. \u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430, \u0431\u0435\u0439\u0434\u0436\u0438, \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430.',\n features: {\n monetization: { enabled: true, rate: '10%' },\n courseCreation: true,\n advancedAnalytics: true,\n daoVoting: false,\n },\n publicQuestLimit: Infinity,\n priceKZT: 4500,\n priceUSD: 10\n },\n vip: {\n maxQuests: Infinity,\n description: '\u042d\u043a\u0441\u043a\u043b\u044e\u0437\u0438\u0432, 13 \u0433\u0435\u043d\u0435\u0440\u0430\u043b\u043e\u0432\/\u0441\u0442\u0440\u0430\u043d\u0430. \u0412\u043e\u0439\u043d\u044b \u0414\u0443\u0445\u043e\u0432: \u201c\u0413\u0435\u043d\u0435\u0440\u0430\u043b\u201d \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0438\u0441\u0441\u0438\u0438. LMS: \u041a\u0443\u0440\u0441\u044b \u0441 5% \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u0435\u0439. DAO: 1 Coin = 1 \u0433\u043e\u043b\u043e\u0441. \u0414\u043e\u0445\u043e\u0434: 1\u20135% \u043e\u0442 \u0434\u043e\u0445\u043e\u0434\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u044b. NFT, \u0430\u0432\u0430\u0442\u0430\u0440\u044b.',\n features: {\n monetization: { enabled: true, rate: '5%' },\n courseCreation: true,\n advancedAnalytics: true,\n daoVoting: true,\n },\n publicQuestLimit: Infinity,\n priceKZT: 15000,\n priceUSD: 30,\n generalsLimit: 13\n },\n };\n\n \/\/ \u0418\u043a\u043e\u043d\u043a\u0438 \u0437\u0434\u0430\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u043d\u043e\u0432\n const buildingIcons = {\n default: {\n castle: 'fa-solid fa-castle',\n library: 'fa-solid fa-book-open',\n barracks: 'fa-solid fa-helmet-battle',\n market: 'fa-solid fa-chart-line',\n temple: 'fa-solid fa-hand-holding-hand',\n village: 'fa-solid fa-users',\n },\n vip: {\n castle: 'fa-solid fa-chess-queen',\n library: 'fa-solid fa-book-journal-whills',\n barracks: 'fa-solid fa-dragon',\n market: 'fa-solid fa-gem',\n temple: 'fa-solid fa-meteor',\n village: 'fa-solid fa-globe',\n }\n };\n\n const initialGameState = {\n currentPlan: 'free',\n totalXP: 0,\n kingdomLevel: 1,\n kingdomXpToNext: 500,\n resources: { hobbistEnergy: 100, coins: 0 },\n buildings: {\n castle: { key: 'castle', name: '\u0417\u0430\u043c\u043e\u043a', description: '\u0424\u0438\u0437. \u0438 \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u0435', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-castle' },\n library: { key: 'library', name: '\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430', description: '\u0417\u043d\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-book-open' },\n barracks: { key: 'barracks', name: '\u041a\u0430\u0437\u0430\u0440\u043c\u044b', description: '\u0424\u0438\u0437. \u0444\u043e\u0440\u043c\u0430 \u0438 \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0430', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-helmet-battle' },\n market: { key: 'market', name: '\u0420\u044b\u043d\u043e\u043a', description: '\u0424\u0438\u043d\u0430\u043d\u0441\u044b \u0438 \u043a\u0430\u0440\u044c\u0435\u0440\u0430', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-chart-line' },\n temple: { key: 'temple', name: '\u0425\u0440\u0430\u043c', description: '\u0414\u0443\u0445\u043e\u0432\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-hand-holding-hand' },\n village: { key: 'village', name: '\u0414\u0435\u0440\u0435\u0432\u043d\u044f', description: '\u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u044f\u0437\u0438', level: 1, xp: 0, xpToNext: 100, icon: 'fa-solid fa-users' },\n },\n quests: [\n { id: 1, text: '\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c 20 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043a\u043d\u0438\u0433\u0438', building: 'library', xp: 10, completed: false, type: 'personal' },\n { id: 2, text: '\u0421\u0434\u0435\u043b\u0430\u0442\u044c 20 \u043e\u0442\u0436\u0438\u043c\u0430\u043d\u0438\u0439', building: 'barracks', xp: 5, completed: false, type: 'personal' },\n ],\n progressHistory: {},\n trialQuestCompleted: false,\n \/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0439 \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438\n gamipress: {\n achievements: [\n { name: '\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438', status: 'completed' },\n { name: '\u041c\u0430\u0441\u0442\u0435\u0440 \u043a\u0432\u0435\u0441\u0442\u043e\u0432', status: 'in-progress', progress: 60 }\n ],\n rank: '\u041d\u043e\u0432\u0438\u0447\u043e\u043a',\n rankProgress: 30\n },\n tutorlms: {\n courses: [\n { name: '\u041e\u0441\u043d\u043e\u0432\u044b \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f', progress: 75 },\n { name: '\u0424\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0441\u0442\u044c', progress: 25 }\n ],\n stats: {\n totalCourses: 2,\n completedLessons: 12,\n averageGrade: 4.5\n }\n },\n buddypress: {\n friends: 24,\n groups: 5,\n messages: 12,\n activity: [\n { text: '\u041d\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 \"\u0421\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\"', time: '2 \u0447\u0430\u0441\u0430 \u043d\u0430\u0437\u0430\u0434' },\n { text: '\u0412\u0430\u0448 \u0434\u0440\u0443\u0433 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b \u043a\u0443\u0440\u0441 \"\u0424\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0441\u0442\u044c\"', time: '5 \u0447\u0430\u0441\u043e\u0432 \u043d\u0430\u0437\u0430\u0434' }\n ]\n },\n monetization: {\n totalEarnings: 0,\n availableEarnings: 0,\n platformFee: '0%',\n transactions: [\n { type: '\u0417\u0430\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0432\u0435\u0441\u0442', amount: 10, date: '21.09.2025', isPositive: true },\n { type: '\u041f\u043e\u043a\u0443\u043f\u043a\u0430 \u043a\u0443\u0440\u0441\u0430', amount: 50, date: '20.09.2025', isPositive: false }\n ]\n }\n };\n\n let gameState = JSON.parse(JSON.stringify(initialGameState));\n let progressChartInstance;\n\n function getTodayString() {\n const today = new Date();\n return today.toISOString().split('T')[0];\n }\n\n function renderAll() {\n renderResources();\n renderBuildings();\n renderQuests();\n renderChart();\n updatePlanButtons();\n renderPlanDetails();\n renderPluginData();\n }\n\n function updatePlan(planName) {\n \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043b\u0430\u043d \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435\n gameState.currentPlan = planName;\n const statusMessage = document.getElementById('status-message');\n statusMessage.innerText = `\u0412\u044b \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 \u0442\u0430\u0440\u0438\u0444: ${planName}.`;\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c \u0442\u0430\u0440\u0438\u0444\u043e\u043c\n gameState.monetization.platformFee = plans[planName].features.monetization.rate || '0%';\n \n \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u043b\u0430\u0433 \u043f\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u043a\u0432\u0435\u0441\u0442\u0430, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u043d\n if (planName !== 'free') {\n gameState.trialQuestCompleted = false;\n }\n \n renderAll();\n }\n\n function updatePlanButtons() {\n const buttons = document.querySelectorAll('#plan-selector-section button');\n buttons.forEach(btn => {\n btn.classList.remove('btn-active');\n if (btn.id === `plan-${gameState.currentPlan}`) {\n btn.classList.add('btn-active');\n }\n });\n }\n\n function renderPlanDetails() {\n const plan = plans[gameState.currentPlan];\n document.getElementById('plan-description').innerText = plan.description;\n const featuresContainer = document.getElementById('plan-features');\n featuresContainer.innerHTML = `\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.monetization.enabled ? '\u2705' : '\u274c'}<\/span>\n <span>\u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f${plan.features.monetization.enabled ? ` (${plan.features.monetization.rate} \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044f)` : ''}<\/span>\n <\/div>\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.courseCreation ? '\u2705' : '\u274c'}<\/span>\n <span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0432<\/span>\n <\/div>\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.advancedAnalytics ? '\u2705' : '\u274c'}<\/span>\n <span>\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/span>\n <\/div>\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\">${plan.features.daoVoting ? '\u2705' : '\u274c'}<\/span>\n <span>DAO-\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u0435<\/span>\n <\/div>\n ${plan.generalsLimit ? `\n <div class=\"flex items-center\">\n <span class=\"text-xl mr-2\"><i class=\"fa-solid fa-user-tie\"><\/i><\/span>\n <span>\u041b\u0438\u043c\u0438\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u043b\u043e\u0432: ${plan.generalsLimit}\/\u0441\u0442\u0440\u0430\u043d\u0430<\/span>\n <\/div>\n ` : ''}\n `;\n }\n \n function renderBuildings() {\n const container = document.getElementById('buildings');\n container.innerHTML = '';\n \n \/\/ **\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435:** \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c VIP-\u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043b\u0430\u043d\u043e\u0432 (\u044d\u0444\u0444\u0435\u043a\u0442 \"\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\" VIP-\u043d\u0430\u0431\u043e\u0440\u0430).\n \/\/ \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0431\u043e\u0440 VIP-\u0438\u043a\u043e\u043d\u043e\u043a \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0432\u0441\u0435\u0445 \u0442\u0430\u0440\u0438\u0444\u0430\u0445.\n \/\/ \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f VIP-\u043d\u0430\u0431\u043e\u0440\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0439.\n const currentIcons = buildingIcons.vip || buildingIcons.default;\n \n for (const key in gameState.buildings) {\n const b = gameState.buildings[key];\n const progress = (b.xp \/ b.xpToNext) * 100;\n container.innerHTML += `\n <div class=\"card p-6 rounded-xl flex flex-col\">\n <div class=\"flex items-center mb-4\">\n <i class=\"${currentIcons[key] || buildingIcons.default[key]} text-4xl mr-4 text-teal-400\"><\/i>\n <div>\n <h3 class=\"font-bold text-xl text-white\">${b.name}<\/h3>\n <p class=\"text-gray-400 text-sm\">${b.description}<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-auto\">\n <div class=\"flex justify-between items-center mb-1 text-sm text-gray-400\">\n <span class=\"font-semibold\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c ${b.level}<\/span>\n <span class=\"text-gray-500\">${b.xp} \/ ${b.xpToNext} XP<\/span>\n <\/div>\n <div class=\"progress-bar-bg w-full h-3 rounded-full\">\n <div class=\"progress-bar-fill h-3 rounded-full\" style=\"width: ${progress}%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n }\n\n function renderQuests() {\n const container = document.getElementById('quests-list');\n const select = document.getElementById('quest-building');\n const questTypeSelect = document.getElementById('quest-type');\n const formContainer = document.getElementById('add-quest-form');\n container.innerHTML = '';\n select.innerHTML = '';\n \n const currentPlan = plans[gameState.currentPlan];\n const activeQuests = gameState.quests.filter(q => !q.completed);\n const personalQuests = activeQuests.filter(q => q.type === 'personal');\n const publicQuests = activeQuests.filter(q => q.type === 'public');\n\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043a\u0432\u0435\u0441\u0442\u043e\u0432\n questTypeSelect.innerHTML = `<option value=\"personal\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 (+Hobbist Energy)<\/option>`.trim();\n if (currentPlan.publicQuestLimit > 0 && publicQuests.length < currentPlan.publicQuestLimit) {\n questTypeSelect.innerHTML += `<option value=\"public\">\u041f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 (+5 Coins)<\/option>`.trim();\n } else if (currentPlan.publicQuestLimit === Infinity) {\n questTypeSelect.innerHTML += `<option value=\"public\">\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 (+Coins, +Energy)<\/option>`.trim();\n }\n\n \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u0444\u043e\u0440\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0432\u0435\u0441\u0442\u0430 \u043d\u0430 Free \u043f\u043b\u0430\u043d\u0435\n const isFreePlanAndOverLimit = gameState.currentPlan === 'free' && personalQuests.length >= currentPlan.maxQuests;\n if (isFreePlanAndOverLimit) {\n formContainer.classList.add('disabled-feature');\n document.getElementById('status-message').innerText = `\u0412\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u043b\u0438\u043c\u0438\u0442\u0430 (${currentPlan.maxQuests}) \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0432\u0435\u0441\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043b\u0430\u043d\u0430. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u043d.`;\n } else {\n formContainer.classList.remove('disabled-feature');\n document.getElementById('status-message').innerText = '';\n }\n\n if(activeQuests.length === 0){\n container.innerHTML = `<p class=\"text-center text-gray-500 p-4 bg-gray-800 rounded-lg\">\u041d\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u0432\u0435\u0441\u0442\u043e\u0432. \u0412\u0440\u0435\u043c\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439!<\/p>`;\n } else {\n activeQuests.forEach(q => {\n const building = gameState.buildings[q.building];\n const currentIcons = buildingIcons.vip || buildingIcons.default; \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c VIP \u0438\u043a\u043e\u043d\u043a\u0438\n const iconClass = currentIcons[q.building] || buildingIcons.default[q.building];\n const rewardText = q.type === 'public' ? `+5 Coins` : `+10-20 Hobbist Energy`;\n container.innerHTML += `\n <div class=\"card p-4 rounded-xl flex items-center justify-between\">\n <div class=\"flex items-center\">\n <i class=\"${iconClass} text-2xl mr-4 text-teal-400\"><\/i>\n <div>\n <p class=\"font-semibold text-white\">${q.text}<\/p>\n <p class=\"text-sm text-gray-500\">\u0422\u0438\u043f: ${q.type === 'public' ? '\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439' : '\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439'} | \u041d\u0430\u0433\u0440\u0430\u0434\u0430: ${rewardText}<\/p>\n <\/div>\n <\/div>\n <button class=\"btn-primary py-2 px-4 rounded-md text-sm font-medium\">\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/button>\n <\/div>\n `;\n });\n }\n \n for (const key in gameState.buildings) {\n const b = gameState.buildings[key];\n select.innerHTML += `<option value=\"${key}\">${b.name}<\/option>`;\n }\n \n \/\/ Add click listener to newly rendered complete buttons\n document.querySelectorAll('#quests-list button').forEach(button => {\n button.addEventListener('click', (e) => {\n const questElement = e.target.closest('.card');\n const questIndex = Array.from(questElement.parentNode.children).indexOf(questElement);\n const questId = activeQuests[questIndex].id;\n completeQuest(questId);\n });\n });\n }\n\n function renderResources() {\n document.getElementById('total-level').innerText = `\u0423\u0440\u043e\u0432\u0435\u043d\u044c ${gameState.kingdomLevel}`;\n document.getElementById('resource-hobbist-energy').innerText = gameState.resources.hobbistEnergy;\n document.getElementById('resource-coins').innerText = gameState.resources.coins;\n document.getElementById('total-xp').innerText = `${gameState.totalXP} XP`;\n }\n\n function renderChart() {\n const ctx = document.getElementById('progressChart').getContext('2d');\n const labels = [];\n const data = [];\n \n for(let i = 6; i >= 0; i--) {\n const d = new Date();\n d.setDate(d.getDate() - i);\n const dateString = d.toISOString().split('T')[0];\n labels.push(dateString.substring(5));\n data.push(gameState.progressHistory[dateString] || 0);\n }\n\n if (progressChartInstance) {\n progressChartInstance.destroy();\n }\n\n progressChartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'XP \u0437\u0430 \u0434\u0435\u043d\u044c',\n data: data,\n borderColor: '#3b82f6',\n backgroundColor: 'rgba(59, 130, 246, 0.2)',\n fill: true,\n tension: 0.3,\n pointBackgroundColor: '#14b8a6',\n pointBorderColor: '#fff'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n grid: {\n color: 'rgba(255, 255, 255, 0.1)',\n borderColor: 'rgba(255, 255, 255, 0.2)'\n },\n ticks: {\n color: '#a3a3a3'\n }\n },\n x: {\n grid: {\n color: 'rgba(255, 255, 255, 0.1)',\n borderColor: 'rgba(255, 255, 255, 0.2)'\n },\n ticks: {\n color: '#a3a3a3'\n }\n }\n },\n plugins: {\n legend: {\n display: false,\n }\n }\n }\n });\n }\n\n function renderPluginData() {\n \/\/ GamiPress \u0434\u0430\u043d\u043d\u044b\u0435\n const gpAchievements = document.getElementById('gamipress-achievements');\n gpAchievements.innerHTML = '';\n gameState.gamipress.achievements.forEach(ach => {\n let statusBadge = '';\n if (ach.status === 'completed') {\n statusBadge = '<span class=\"bg-green-600 text-white text-xs px-2 py-1 rounded-full\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043e<\/span>';\n } else if (ach.status === 'in-progress') {\n statusBadge = `<span class=\"bg-yellow-600 text-white text-xs px-2 py-1 rounded-full\">${ach.progress}%<\/span>`;\n }\n gpAchievements.innerHTML += `\n <div class=\"flex justify-between items-center text-gray-400\">\n <span>${ach.name}<\/span>\n ${statusBadge}\n <\/div>\n `;\n });\n\n document.getElementById('current-rank').innerText = gameState.gamipress.rank;\n document.querySelector('#gamipress-tab .progress-bar-fill').style.width = `${gameState.gamipress.rankProgress}%`;\n document.querySelector('#gamipress-tab .text-right').innerText = `${gameState.gamipress.rankProgress}% \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u043d\u0433\u0430`;\n\n \/\/ Tutor LMS \u0434\u0430\u043d\u043d\u044b\u0435\n const tutorCourses = document.getElementById('tutor-courses');\n tutorCourses.innerHTML = '';\n gameState.tutorlms.courses.forEach(course => {\n tutorCourses.innerHTML += `\n <div class=\"flex justify-between items-center border-b border-gray-700 pb-2 text-gray-400\">\n <span>${course.name}<\/span>\n <span class=\"bg-blue-600 text-white text-xs px-2 py-1 rounded-full\">${course.progress}% \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e<\/span>\n <\/div>\n `;\n });\n\n \/\/ BuddyPress \u0434\u0430\u043d\u043d\u044b\u0435\n document.getElementById('bp-friends').innerText = gameState.buddypress.friends;\n document.getElementById('bp-groups').innerText = gameState.buddypress.groups;\n document.getElementById('bp-messages').innerText = gameState.buddypress.messages;\n\n const bpActivity = document.querySelector('#buddypress-tab .space-y-2');\n bpActivity.innerHTML = '';\n gameState.buddypress.activity.forEach(activity => {\n bpActivity.innerHTML += `\n <div class=\"text-sm p-2 bg-gray-700 rounded-lg flex justify-between text-gray-400\">\n <div>\n <div>${activity.text}<\/div>\n <div class=\"text-xs text-gray-500\">${activity.time}<\/div>\n <\/div>\n <\/div>\n `;\n });\n\n \/\/ \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0435\n document.getElementById('total-earnings').innerText = `${gameState.monetization.totalEarnings} Coins`;\n document.getElementById('available-earnings').innerText = `${gameState.monetization.availableEarnings} Coins`;\n document.getElementById('platform-fee').innerText = gameState.monetization.platformFee;\n\n const monetizationHistory = document.querySelector('#monetization-tab .space-y-2');\n monetizationHistory.innerHTML = '';\n gameState.monetization.transactions.forEach(transaction => {\n const amountClass = transaction.isPositive ? 'text-green-400' : 'text-red-400';\n const amountSign = transaction.isPositive ? '+' : '-';\n monetizationHistory.innerHTML += `\n <div class=\"text-sm p-2 bg-gray-700 rounded-lg flex justify-between text-gray-400\">\n <div>\n <div>${transaction.type}<\/div>\n <div class=\"text-xs text-gray-500\">${transaction.date}<\/div>\n <\/div>\n <div class=\"${amountClass}\">${amountSign}${transaction.amount} Coins<\/div>\n <\/div>\n `;\n });\n }\n\n function addQuest(event) {\n event.preventDefault();\n const text = document.getElementById('quest-text').value;\n const building = document.getElementById('quest-building').value;\n const questType = document.getElementById('quest-type').value;\n\n const currentPlan = plans[gameState.currentPlan];\n const activeQuests = gameState.quests.filter(q => !q.completed);\n const personalQuests = activeQuests.filter(q => q.type === 'personal');\n const publicQuests = activeQuests.filter(q => q.type === 'public');\n\n if (questType === 'public' && publicQuests.length >= currentPlan.publicQuestLimit) {\n document.getElementById('status-message').innerText = `\u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442: \u043b\u0438\u043c\u0438\u0442 (${currentPlan.publicQuestLimit}) \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442.`;\n return;\n }\n if (questType === 'personal' && personalQuests.length >= currentPlan.maxQuests) {\n document.getElementById('status-message').innerText = `\u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442: \u043b\u0438\u043c\u0438\u0442 (${currentPlan.maxQuests}) \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u043d.`;\n return;\n }\n \n const newQuest = {\n id: Date.now(),\n text,\n building,\n xp: 10,\n completed: false,\n type: questType\n };\n gameState.quests.push(newQuest);\n document.getElementById('add-quest-form').reset();\n document.getElementById('status-message').innerText = '';\n renderAll();\n }\n\n function completeQuest(questId) {\n const quest = gameState.quests.find(q => q.id === questId);\n const statusMessage = document.getElementById('status-message');\n if (!quest) return;\n\n \/\/ \u041d\u0430\u0433\u0440\u0430\u0434\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 \u043a\u0432\u0435\u0441\u0442\u0430 \u0438 \u043f\u043b\u0430\u043d\u0430\n if (quest.type === 'personal') {\n const energyEarned = Math.floor(Math.random() * 11) + 10;\n gameState.resources.hobbistEnergy += energyEarned; \n statusMessage.innerText = `\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u0432\u0435\u0441\u0442, \u0432\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 ${energyEarned} Hobbist Energy!`;\n } else if (quest.type === 'public' && gameState.currentPlan === 'free') {\n if(gameState.trialQuestCompleted) {\n statusMessage.innerText = `\u0412\u044b \u0443\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0432\u0435\u0441\u0442 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043b\u0430\u043d\u0430.`;\n return;\n }\n gameState.resources.coins += 5;\n gameState.monetization.totalEarnings += 5;\n gameState.monetization.availableEarnings += 5;\n gameState.monetization.transactions.unshift({\n type: '\u0417\u0430\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0432\u0435\u0441\u0442',\n amount: 5,\n date: new Date().toLocaleDateString('ru-RU'),\n isPositive: true\n });\n gameState.trialQuestCompleted = true;\n statusMessage.innerText = `\u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430! \u0412\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 5 Coins.`;\n } else {\n const coinsEarned = Math.floor(Math.random() * 41) + 10; \/\/ +10-50 Coins\n const energyEarned = Math.floor(Math.random() * 41) + 10; \/\/ +10-50 Energy\n gameState.resources.coins += coinsEarned;\n gameState.resources.hobbistEnergy += energyEarned;\n gameState.monetization.totalEarnings += coinsEarned;\n gameState.monetization.availableEarnings += coinsEarned;\n gameState.monetization.transactions.unshift({\n type: '\u0417\u0430\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0437\u0430 \u043a\u0432\u0435\u0441\u0442',\n amount: coinsEarned,\n date: new Date().toLocaleDateString('ru-RU'),\n isPositive: true\n });\n statusMessage.innerText = `\u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430! \u0412\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 ${coinsEarned} Coins \u0438 ${energyEarned} Energy.`;\n }\n\n quest.completed = true;\n \n const building = gameState.buildings[quest.building];\n building.xp += quest.xp;\n gameState.totalXP += quest.xp;\n\n const today = getTodayString();\n if (!gameState.progressHistory[today]) {\n gameState.progressHistory[today] = 0;\n }\n gameState.progressHistory[today] += quest.xp;\n\n if (building.xp >= building.xpToNext) {\n building.level++;\n building.xp -= building.xpToNext;\n building.xpToNext = Math.floor(building.xpToNext * 1.5);\n }\n \n if (gameState.totalXP >= gameState.kingdomXpToNext) {\n gameState.kingdomLevel++;\n gameState.totalXP -= gameState.kingdomXpToNext;\n gameState.kingdomXpToNext = Math.floor(gameState.kingdomXpToNext * 1.7);\n }\n\n gameState.quests = gameState.quests.filter(q => q.id !== questId);\n\n renderAll();\n }\n\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a\n function switchTab(tabName) {\n \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438\n document.querySelectorAll('.tab-content').forEach(tab => {\n tab.classList.remove('active');\n });\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443\n document.getElementById(`${tabName}-tab`).classList.add('active');\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438\n document.querySelectorAll('.tab-button').forEach(button => {\n button.classList.remove('active');\n if (button.getAttribute('data-tab') === tabName) {\n button.classList.add('active');\n }\n });\n }\n\n \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b\n const themeSwitcher = document.getElementById('theme-switcher');\n themeSwitcher.addEventListener('click', () => {\n document.body.classList.toggle('light-theme');\n const isLightTheme = document.body.classList.contains('light-theme');\n const icon = themeSwitcher.querySelector('i');\n const text = themeSwitcher.querySelector('span');\n \n if (isLightTheme) {\n icon.classList.remove('fa-sun', 'text-yellow-500');\n icon.classList.add('fa-moon', 'text-indigo-600');\n text.innerText = '';\n } else {\n icon.classList.remove('fa-moon', 'text-indigo-600');\n icon.classList.add('fa-sun', 'text-yellow-500');\n text.innerText = '';\n }\n });\n\n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\n function initEventListeners() {\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0430\u0440\u0438\u0444\u043e\u0432\n document.getElementById('plan-free').addEventListener('click', () => updatePlan('free'));\n document.getElementById('plan-basic').addEventListener('click', () => updatePlan('basic'));\n document.getElementById('plan-premium').addEventListener('click', () => updatePlan('premium'));\n document.getElementById('plan-vip').addEventListener('click', () => updatePlan('vip'));\n\n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0432\u0435\u0441\u0442\u0430\n document.getElementById('add-quest-form').addEventListener('submit', addQuest);\n \n \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a\n document.querySelectorAll('.tab-button').forEach(button => {\n button.addEventListener('click', () => {\n const tabName = button.getAttribute('data-tab');\n switchTab(tabName);\n });\n });\n }\n\n window.onload = () => {\n renderAll();\n initEventListeners();\n };\n\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u041f\u0430\u043d\u0435\u043b\u044c \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e\u043c \u041c\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u041f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0438\u043c \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u041f\u0430\u043d\u0435\u043b\u044c \u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u044f \u0421\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u044b \u041a\u0430\u0437\u043d\u0430 \u0414\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0420\u0430\u043d\u0433\u0438 \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u043d\u0433: 30% \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u043d\u0433\u0430 \u041c\u043e\u0438 \u043a\u0443\u0440\u0441\u044b \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0412\u0441\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0432: 2 \u041f\u0440\u043e\u0439\u0434\u0435\u043d\u043e \u0443\u0440\u043e\u043a\u043e\u0432: 12 \u0421\u0440\u0435\u0434\u043d\u044f\u044f \u043e\u0446\u0435\u043d\u043a\u0430: 4.5\/5 \u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0414\u0440\u0443\u0437\u044c\u044f: \u0413\u0440\u0443\u043f\u043f\u044b: \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f: \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0414\u043e\u0445\u043e\u0434\u044b \u041e\u0431\u0449\u0438\u0439 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a: \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430: \u041a\u043e\u043c\u0438\u0441\u0441\u0438\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b: \u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0412\u0430\u0448 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043b\u0430\u043d Free 0 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"give_campaign_id":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-13483","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/comments?post=13483"}],"version-history":[{"count":0,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13483\/revisions"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=13483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}