{"id":13719,"date":"2026-01-08T08:07:39","date_gmt":"2026-01-08T03:07:39","guid":{"rendered":"https:\/\/test.hobbi.st\/?page_id=13719"},"modified":"2026-01-08T08:11:13","modified_gmt":"2026-01-08T03:11:13","slug":"qurannur","status":"publish","type":"page","link":"https:\/\/hobbi.st\/kk\/qurannur\/","title":{"rendered":"Quran Nur"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u041f\u0430\u043c\u044f\u0442\u0438<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans:wght@300;400;600;700&family=Amiri:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Noto Sans', sans-serif;\r\n background-color: #F5F2EA; \/* Warm neutral background *\/\r\n color: #3D3D3D;\r\n padding-bottom: 120px; \/* \u0414\u043b\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 *\/\r\n }\r\n .arabic-text {\r\n font-family: 'Amiri', serif;\r\n }\r\n .chart-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 600px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n height: 350px;\r\n max-height: 400px;\r\n }\r\n .schulte-grid {\r\n display: grid;\r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 0.5rem;\r\n max-width: 350px;\r\n margin: 0 auto;\r\n }\r\n .schulte-cell {\r\n aspect-ratio: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: #FFFFFF;\r\n border: 1px solid #D4C5A8;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border-radius: 0.5rem;\r\n }\r\n .schulte-cell:hover {\r\n background-color: #E8DFCD;\r\n }\r\n .schulte-cell.clicked {\r\n background-color: #4A7C59; \/* Islamic Green *\/\r\n color: white;\r\n }\r\n .card-hover:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n .hidden-section {\r\n display: none;\r\n }\r\n .active-tab {\r\n border-bottom: 2px solid #4A7C59;\r\n color: #4A7C59;\r\n font-weight: 600;\r\n }\r\n \r\n \/* \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f - \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0435\u043a\u0446\u0438\u044f *\/\r\n .final-integration-section {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n height: 80px;\r\n border-top: 3px solid #4A7C59;\r\n box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n background: linear-gradient(135deg, #ffffff 0%, #f9f7f2 100%);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased min-h-screen flex flex-col\">\r\n\r\n <!-- Header -->\r\n <header class=\"bg-white border-b border-[#D4C5A8] py-6 shadow-sm\">\r\n <div class=\"container mx-auto px-4 text-center\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-[#2C3E50] mb-2\">\u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b<\/h1>\r\n <p class=\"text-[#6B7280] max-w-2xl mx-auto text-lg\">\r\n \u041a\u0443\u0440\u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0443\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u041a\u043e\u0440\u0430\u043d\u0430.\r\n \u0421\u0438\u043d\u0442\u0435\u0437 \u0441\u0443\u043d\u043d\u044b, \u043d\u0435\u0439\u0440\u043e\u0431\u0438\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u044d\u043b\u0438\u0442\u043d\u044b\u0445 \u043c\u043d\u0435\u043c\u043e\u0442\u0435\u0445\u043d\u0438\u043a.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- Main Content -->\r\n <main class=\"flex-grow container mx-auto px-4 py-8\">\r\n \r\n <!-- Navigation \/ Tabs -->\r\n <div class=\"flex flex-wrap justify-center mb-10 gap-4 border-b border-[#D4C5A8] pb-1\">\r\n <button onclick=\"switchTab('foundation')\" id=\"tab-foundation\" class=\"tab-btn active-tab px-6 py-3 text-lg transition-colors\">\r\n I. \u0411\u0438\u043e-\u041e\u0441\u043d\u043e\u0432\u044b (\u0413\u043b\u0430\u0437\u0430)\r\n <\/button>\r\n <button onclick=\"switchTab('architecture')\" id=\"tab-architecture\" class=\"tab-btn px-6 py-3 text-lg text-gray-500 hover:text-[#4A7C59] transition-colors\">\r\n II. \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u041f\u0430\u043c\u044f\u0442\u0438\r\n <\/button>\r\n <button onclick=\"switchTab('integration')\" id=\"tab-integration\" class=\"tab-btn px-6 py-3 text-lg text-gray-500 hover:text-[#4A7C59] transition-colors\">\r\n III. \u041b\u0438\u043d\u0433\u0432\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0421\u0438\u043d\u0442\u0435\u0437\r\n <\/button>\r\n <button onclick=\"switchTab('pro-hacks')\" id=\"tab-pro-hacks\" class=\"tab-btn px-6 py-3 text-lg text-gray-500 hover:text-[#4A7C59] transition-colors\">\r\n IV. \u0421\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Section 1: Foundation (Speed Reading & Vision) -->\r\n <section id=\"foundation\" class=\"content-section fade-in\">\r\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 border border-[#E8DFCD]\">\r\n <div class=\"mb-6\">\r\n <h2 class=\"text-2xl font-bold text-[#4A7C59] mb-4\">\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0421\u043a\u043e\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u044f<\/h2>\r\n <p class=\"text-gray-700 leading-relaxed mb-4\">\r\n \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u0430\u043f \u2014 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0444\u0438\u0437\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \"\u0436\u0435\u043b\u0435\u0437\u0430\". \u0422\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0447\u0442\u0435\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e \u0443\u0437\u043a\u0438\u043c \u043f\u043e\u043b\u0435\u043c \u0437\u0440\u0435\u043d\u0438\u044f \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0440\u0435\u0447\u044c\u044e (\u0441\u0443\u0431\u0432\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439). \r\n \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0433\u043b\u043e\u0449\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043c\u044b \u0442\u0430\u0444\u0441\u0438\u0440\u043e\u0432 \u0438 \u0445\u0430\u0434\u0438\u0441\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \"\u043a\u0430\u043d\u0430\u043b\" \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mt-6\">\r\n <div class=\"bg-[#F9F7F2] p-5 rounded-lg\">\r\n <h3 class=\"font-bold text-lg mb-2\">\ud83c\udfc1 \u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0428\u0443\u043b\u044c\u0442\u0435<\/h3>\r\n <p class=\"text-sm text-gray-600 mb-4\">\r\n \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0438\u0444\u0435\u0440\u0438\u0439\u043d\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f. \u0426\u0435\u043b\u044c: \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0446\u0435\u043d\u0442\u0440 \u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u0446\u0438\u0444\u0440\u044b.\r\n <\/p>\r\n <ul class=\"list-disc pl-5 text-sm space-y-1 text-gray-700 mb-4\">\r\n <li>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043f\u044f\u0442\u043d\u043e \u044f\u0441\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043d\u0438\u044f.<\/li>\r\n <li>\u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0430\u043a\u043a\u0430\u0434 (\u0441\u043a\u0430\u0447\u043a\u043e\u0432 \u0433\u043b\u0430\u0437).<\/li>\r\n <li>\u0422\u0440\u0435\u043d\u0438\u0440\u0443\u0435\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-[#F9F7F2] p-5 rounded-lg\">\r\n <h3 class=\"font-bold text-lg mb-2\">\ud83d\udd07 \u0421\u043c\u0435\u0440\u0442\u044c \u0441\u0443\u0431\u0432\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\r\n <p class=\"text-sm text-gray-600 mb-4\">\r\n \u0422\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u043e\u0434\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0433\u043e\u043b\u043e\u0441\u0430. \u0427\u0442\u0435\u043d\u0438\u0435 \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0447\u0442\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u043e\u043c \u0432 10 \u0440\u0430\u0437.\r\n <\/p>\r\n <div class=\"text-sm bg-white p-3 rounded border border-gray-200\">\r\n <strong>\u041c\u0435\u0442\u043e\u0434:<\/strong> \u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0442\u0435\u043a\u0441\u0442, \u0432\u044b\u0441\u0442\u0443\u043a\u0438\u0432\u0430\u044f \u0440\u0438\u0442\u043c \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438 (200 \u0443\u0434\u0430\u0440\u043e\u0432 \u0432 \u043c\u0438\u043d\u0443\u0442\u0443). \u0420\u0438\u0442\u043c \u0441\u0431\u0438\u0432\u0430\u0435\u0442 \u0446\u0435\u043d\u0442\u0440 \u0440\u0435\u0447\u0438, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Interactive Schulte Table -->\r\n <div class=\"mt-8 border-t border-[#D4C5A8] pt-8\">\r\n <div class=\"text-center mb-4\">\r\n <h3 class=\"text-xl font-bold text-[#2C3E50]\">\u0422\u0440\u0435\u043d\u0430\u0436\u0435\u0440: \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0428\u0443\u043b\u044c\u0442\u0435<\/h3>\r\n <p class=\"text-sm text-gray-500\">\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u0447\u0438\u0441\u043b\u0430 \u043e\u0442 1 \u0434\u043e 25 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435.<\/p>\r\n <div id=\"schulte-timer\" class=\"text-2xl font-mono text-[#4A7C59] my-2\">00:00<\/div>\r\n <button onclick=\"initSchulte()\" class=\"bg-[#4A7C59] text-white px-6 py-2 rounded-full hover:bg-[#3A6346] transition text-sm font-bold\">\r\n \u0421\u0442\u0430\u0440\u0442 \/ \u0421\u0431\u0440\u043e\u0441\r\n <\/button>\r\n <\/div>\r\n <div id=\"schulte-container\" class=\"schulte-grid\">\r\n <!-- Grid generated by JS -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 2: Memory Architecture -->\r\n <section id=\"architecture\" class=\"content-section hidden-section fade-in\">\r\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 border border-[#E8DFCD]\">\r\n <h2 class=\"text-2xl font-bold text-[#4A7C59] mb-4\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u0430\u044f \u041f\u0430\u043c\u044f\u0442\u044c \u0438 \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\r\n <p class=\"text-gray-700 leading-relaxed mb-6\">\r\n \u041f\u0440\u043e\u0441\u0442\u043e \"\u0437\u0443\u0431\u0440\u0438\u0442\u044c\" \u2014 \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043f\u0430\u043c\u044f\u0442\u044c \u0438 \u044d\u043c\u043e\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438. \r\n \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043e\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f \u043a \u043e\u0431\u044a\u0435\u043c\u043d\u043e\u043c\u0443.\r\n <\/p>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <!-- Text Content -->\r\n <div class=\"space-y-6\">\r\n <div class=\"card-hover bg-[#F9F7F2] p-5 rounded-lg border-l-4 border-[#4A7C59]\">\r\n <h3 class=\"font-bold text-lg text-[#2C3E50]\">\ud83c\udfdb\ufe0f \u041c\u0435\u0442\u043e\u0434 \u041b\u043e\u043a\u0443\u0441\u043e\u0432 (\u0414\u0432\u043e\u0440\u0435\u0446 \u041f\u0430\u043c\u044f\u0442\u0438 4-\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f)<\/h3>\r\n <p class=\"text-sm text-gray-600 mt-2\">\r\n \u041d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043c\u043d\u0430\u0442\u044b, \u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0438\u0440\u044b. \u041a\u0430\u0436\u0434\u0430\u044f \u0421\u0443\u0440\u0430 \u2014 \u044d\u0442\u043e \u0437\u0434\u0430\u043d\u0438\u0435. \u041a\u0430\u0436\u0434\u044b\u0439 \u0410\u044f\u0442 \u2014 \u043a\u043e\u043c\u043d\u0430\u0442\u0430. \u041a\u0430\u0436\u0434\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u2014 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u044c\u0435\u0440\u0430.\r\n <br><br>\r\n <em>4-\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c:<\/em> \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0430\u0445\u043e\u0432, \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0438 \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u0430\u043c \u0434\u043b\u044f \"\u043e\u0436\u0438\u0432\u043b\u0435\u043d\u0438\u044f\" \u043f\u0430\u043c\u044f\u0442\u0438 (Image Streaming).\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"card-hover bg-[#F9F7F2] p-5 rounded-lg border-l-4 border-[#D4C5A8]\">\r\n <h3 class=\"font-bold text-lg text-[#2C3E50]\">\ud83d\udd17 \u042d\u0439\u0434\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430<\/h3>\r\n <p class=\"text-sm text-gray-600 mt-2\">\r\n \u0422\u0435\u0445\u043d\u0438\u043a\u0430 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044f\u0440\u043a\u0438\u0445 \"\u043a\u0440\u044e\u0447\u043a\u043e\u0432\" \u0434\u043b\u044f \u0438\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0432. \u0410\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0437\u044b.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Chart Container -->\r\n <div class=\"bg-white p-4 rounded-xl shadow-inner border border-gray-100\">\r\n <h4 class=\"text-center font-bold text-gray-600 mb-2\">\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u041c\u0435\u0442\u043e\u0434\u043e\u0432<\/h4>\r\n <div class=\"chart-container\">\r\n <canvas id=\"memoryRadarChart\"><\/canvas>\r\n <\/div>\r\n <p class=\"text-xs text-center text-gray-400 mt-2\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0437\u0443\u0431\u0440\u0435\u0436\u043a\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u0430 \u041b\u043e\u043a\u0443\u0441\u043e\u0432<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-8 bg-[#4A7C59] text-white p-6 rounded-lg shadow-md\">\r\n <h3 class=\"font-bold text-lg mb-2\">\ud83e\udde0 \u041c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u041a\u0430\u0440\u0442\u044b (Mind Maps)<\/h3>\r\n <p class=\"text-sm opacity-90\">\r\n \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0421\u0443\u0440. \u041a\u043e\u0440\u0430\u043d \u0438\u043c\u0435\u0435\u0442 \u0447\u0435\u0442\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442-\u043a\u0430\u0440\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \"\u043a\u0430\u0440\u0442\u0443 \u043c\u0435\u0441\u0442\u043d\u043e\u0441\u0442\u0438\" \u0441\u0443\u0440\u044b \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0430 \u043d\u0435 \u0431\u043b\u0443\u0436\u0434\u0430\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u044f\u0442\u0430\u0445.\r\n <\/p>\r\n <div class=\"mt-4 flex flex-wrap gap-2\">\r\n <span class=\"bg-white\/20 px-3 py-1 rounded-full text-xs\">\u0422\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0431\u043b\u043e\u043a\u0438<\/span>\r\n <span class=\"bg-white\/20 px-3 py-1 rounded-full text-xs\">\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438<\/span>\r\n <span class=\"bg-white\/20 px-3 py-1 rounded-full text-xs\">\u041f\u0440\u0430\u0432\u043e\u0432\u044b\u0435 \u043d\u043e\u0440\u043c\u044b<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 3: Integration (Multilingual) -->\r\n <section id=\"integration\" class=\"content-section hidden-section fade-in\">\r\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 border border-[#E8DFCD]\">\r\n <h2 class=\"text-2xl font-bold text-[#4A7C59] mb-4\">\u041f\u043e\u043b\u0438\u0433\u043b\u043e\u0442-\u041a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\r\n <p class=\"text-gray-700 leading-relaxed mb-6\">\r\n \u0418\u0441\u0442\u0438\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u043c\u044b\u0441\u043b\u043e\u0432. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \"\u041b\u0438\u043d\u0433\u0432\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u043e\u0441\u0442\u0430\" \u0438 \"\u0411\u043e\u043b\u0433\u0430\u0440\u0441\u043a\u043e\u0439 \u0441\u0443\u0433\u0433\u0435\u0441\u0442\u043e\u043f\u0435\u0434\u0438\u0438\" \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0430\u0440\u0430\u0431\u0441\u043a\u043e\u0433\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u0432 (\u0420\u0443\u0441\u0441\u043a\u0438\u0439, \u041a\u0430\u0437\u0430\u0445\u0441\u043a\u0438\u0439, \u0410\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438\u0439).\r\n <\/p>\r\n\r\n <!-- Interactive Root Tool -->\r\n <div class=\"mb-8\">\r\n <h3 class=\"font-bold text-lg text-[#2C3E50] mb-3\">\ud83c\udf09 \u041b\u0438\u043d\u0433\u0432\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0441\u0442: \u0422\u0440\u0435\u0445\u044a\u044f\u0437\u044b\u0447\u043d\u0430\u044f \u0410\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u044f<\/h3>\r\n <p class=\"text-sm text-gray-600 mb-4\">\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u043a\u043e\u0440\u043d\u044f \u0441\u043b\u043e\u0432\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u044f\u0437\u0438.<\/p>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n <!-- Card 1 -->\r\n <div onclick=\"toggleCard(this)\" class=\"cursor-pointer bg-[#F9F7F2] border border-[#D4C5A8] rounded-lg p-6 text-center transition-all hover:bg-white relative h-48 flex flex-col items-center justify-center group perspective\">\r\n <div class=\"front absolute transition-opacity duration-300 opacity-100 flex flex-col items-center\">\r\n <span class=\"text-4xl text-[#4A7C59] font-bold mb-2 arabic-text\">\u0643 \u062a \u0628<\/span>\r\n <span class=\"text-gray-500 text-sm\">\u041a\u043e\u0440\u0435\u043d\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/span>\r\n <span class=\"text-xs text-gray-400 mt-2\">(\u041d\u0430\u0436\u043c\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430)<\/span>\r\n <\/div>\r\n <div class=\"back absolute transition-opacity duration-300 opacity-0 flex flex-col items-start text-left w-full px-4\">\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">AR<\/span>\r\n <span class=\"text-sm arabic-text\">\u0643\u0650\u062a\u064e\u0627\u0628 (Kitab)<\/span>\r\n <\/div>\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">RU<\/span>\r\n <span class=\"text-sm\">\u041a\u043d\u0438\u0433\u0430 \/ \u041f\u0438\u0441\u0430\u0442\u044c<\/span>\r\n <\/div>\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">KZ<\/span>\r\n <span class=\"text-sm\">\u041a\u0456\u0442\u0430\u043f \/ \u0416\u0430\u0437\u0443<\/span>\r\n <\/div>\r\n <div class=\"w-full py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">EN<\/span>\r\n <span class=\"text-sm\">Book \/ To write<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\r\n <div onclick=\"toggleCard(this)\" class=\"cursor-pointer bg-[#F9F7F2] border border-[#D4C5A8] rounded-lg p-6 text-center transition-all hover:bg-white relative h-48 flex flex-col items-center justify-center\">\r\n <div class=\"front absolute transition-opacity duration-300 opacity-100 flex flex-col items-center\">\r\n <span class=\"text-4xl text-[#4A7C59] font-bold mb-2 arabic-text\">\u0631 \u062d \u0645<\/span>\r\n <span class=\"text-gray-500 text-sm\">\u041a\u043e\u0440\u0435\u043d\u044c \u043c\u0438\u043b\u043e\u0441\u0435\u0440\u0434\u0438\u044f<\/span>\r\n <span class=\"text-xs text-gray-400 mt-2\">(\u041d\u0430\u0436\u043c\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430)<\/span>\r\n <\/div>\r\n <div class=\"back absolute transition-opacity duration-300 opacity-0 flex flex-col items-start text-left w-full px-4\">\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">AR<\/span>\r\n <span class=\"text-sm arabic-text\">\u0631\u064e\u062d\u0652\u0645\u064e\u0629 (Rahma)<\/span>\r\n <\/div>\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">RU<\/span>\r\n <span class=\"text-sm\">\u041c\u0438\u043b\u043e\u0441\u0435\u0440\u0434\u0438\u0435<\/span>\r\n <\/div>\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">KZ<\/span>\r\n <span class=\"text-sm\">\u041c\u0435\u0439\u0456\u0440\u0456\u043c\u0434\u0456\u043b\u0456\u043a<\/span>\r\n <\/div>\r\n <div class=\"w-full py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">EN<\/span>\r\n <span class=\"text-sm\">Mercy<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Card 3 -->\r\n <div onclick=\"toggleCard(this)\" class=\"cursor-pointer bg-[#F9F7F2] border border-[#D4C5A8] rounded-lg p-6 text-center transition-all hover:bg-white relative h-48 flex flex-col items-center justify-center\">\r\n <div class=\"front absolute transition-opacity duration-300 opacity-100 flex flex-col items-center\">\r\n <span class=\"text-4xl text-[#4A7C59] font-bold mb-2 arabic-text\">\u0639 \u0644 \u0645<\/span>\r\n <span class=\"text-gray-500 text-sm\">\u041a\u043e\u0440\u0435\u043d\u044c \u0437\u043d\u0430\u043d\u0438\u044f<\/span>\r\n <span class=\"text-xs text-gray-400 mt-2\">(\u041d\u0430\u0436\u043c\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430)<\/span>\r\n <\/div>\r\n <div class=\"back absolute transition-opacity duration-300 opacity-0 flex flex-col items-start text-left w-full px-4\">\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">AR<\/span>\r\n <span class=\"text-sm arabic-text\">\u0639\u0650\u0644\u0652\u0645 (Ilm)<\/span>\r\n <\/div>\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">RU<\/span>\r\n <span class=\"text-sm\">\u0417\u043d\u0430\u043d\u0438\u0435 \/ \u041d\u0430\u0443\u043a\u0430<\/span>\r\n <\/div>\r\n <div class=\"w-full border-b border-gray-200 py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">KZ<\/span>\r\n <span class=\"text-sm\">\u0492\u044b\u043b\u044b\u043c \/ \u0411\u0456\u043b\u0456\u043c<\/span>\r\n <\/div>\r\n <div class=\"w-full py-1 flex justify-between\">\r\n <span class=\"text-xs font-bold text-gray-400\">EN<\/span>\r\n <span class=\"text-sm\">Knowledge<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-50 p-6 rounded-lg border-l-4 border-purple-600\">\r\n <h3 class=\"font-bold text-lg mb-2 text-purple-800\">\ud83c\udde7\ud83c\uddec \u0411\u043e\u043b\u0433\u0430\u0440\u0441\u043a\u0430\u044f \u0441\u0443\u0433\u0433\u0435\u0441\u0442\u043e\u043f\u0435\u0434\u0438\u044f<\/h3>\r\n <p class=\"text-sm text-gray-700\">\r\n \u041c\u0435\u0442\u043e\u0434 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0441\u0441\u043b\u0430\u0431\u043b\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043d\u0443\u0448\u0435\u043d\u0438\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0445\u043e\u0434\u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0431\u0430\u0440\u044c\u0435\u0440\u043e\u0432 (\"\u042f \u043d\u0435 \u043c\u043e\u0433\u0443 \u044d\u0442\u043e \u0432\u044b\u0443\u0447\u0438\u0442\u044c\").\r\n \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u041a\u043e\u0440\u0430\u043d\u0430: \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0447\u0442\u0435\u043d\u0438\u044f \u043d\u0430 \u0444\u043e\u043d\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0443\u0437\u044b\u043a\u0438 (\u0431\u0430\u0440\u043e\u043a\u043a\u043e 60 \u0443\u0434\u0430\u0440\u043e\u0432\/\u043c\u0438\u043d), \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \"\u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e\u0439 \u0431\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438\".\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 4: Pro Hacks (Rare\/Neuro) -->\r\n <section id=\"pro-hacks\" class=\"content-section hidden-section fade-in\">\r\n <div class=\"bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 border border-[#E8DFCD]\">\r\n <h2 class=\"text-2xl font-bold text-[#4A7C59] mb-4\">\u0421\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u041d\u0435\u0439\u0440\u043e-\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b<\/h2>\r\n <p class=\"text-gray-700 leading-relaxed mb-6\">\r\n \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0434\u043a\u043e \u0430\u0444\u0438\u0448\u0438\u0440\u0443\u044e\u0442, \u043d\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0445\u0430\u0444\u0438\u0437\u044b \u043c\u0438\u0440\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u043c\u043d\u0435\u043c\u043e\u043d\u0438\u0441\u0442\u044b. \r\n \u0421\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0434\u0443\u0445\u043e\u0432\u043d\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0441 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u043e\u0439 \u043d\u0435\u0439\u0440\u043e\u0444\u0438\u0437\u0438\u043e\u043b\u043e\u0433\u0438\u0435\u0439.\r\n <\/p>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n <!-- Text Columns -->\r\n <div class=\"space-y-4\">\r\n <div class=\"p-4 border border-gray-200 rounded-lg hover:bg-[#F9F7F2] transition\">\r\n <h3 class=\"font-bold text-[#2C3E50]\">\ud83c\udfb5 \u041f\u0441\u0438\u0445\u043e\u0430\u043a\u0443\u0441\u0442\u0438\u043a\u0430 \u0438 \u0422\u0430\u0434\u0436\u0432\u0438\u0434<\/h3>\r\n <p class=\"text-sm text-gray-600 mt-1\">\r\n \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u0447\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0438\u0442\u043c\u044b \u0422\u0430\u0434\u0436\u0432\u0438\u0434\u0430 \u0438 \u043d\u0430\u0437\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f (Ghunna) \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0440\u0435\u0437\u043e\u043d\u0430\u043d\u0441, \u0441\u0442\u0438\u043c\u0443\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043d\u0435\u0439\u0440\u043e\u0433\u0435\u043d\u0435\u0437 \u0438 \u0430\u043b\u044c\u0444\u0430-\u0432\u043e\u043b\u043d\u044b \u043c\u043e\u0437\u0433\u0430, \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043b\u044f \u0434\u043e\u043b\u0433\u043e\u0441\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f.\r\n <\/p>\r\n <\/div>\r\n <div class=\"p-4 border border-gray-200 rounded-lg hover:bg-[#F9F7F2] transition\">\r\n <h3 class=\"font-bold text-[#2C3E50]\">\ud83d\udd04 \u0418\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f (SRS)<\/h3>\r\n <p class=\"text-sm text-gray-600 mt-1\">\r\n \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044e (Anki\/SuperMemo). \u0412\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0435 \u0430\u044f\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0437\u0433 \u0433\u043e\u0442\u043e\u0432 \u0435\u0433\u043e \u0437\u0430\u0431\u044b\u0442\u044c.\r\n <\/p>\r\n <\/div>\r\n <div class=\"p-4 border border-gray-200 rounded-lg hover:bg-[#F9F7F2] transition\">\r\n <h3 class=\"font-bold text-[#2C3E50]\">\ud83d\udc41\ufe0f \u0421\u0430\u043a\u043a\u0430\u0434\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0430<\/h3>\r\n <p class=\"text-sm text-gray-600 mt-1\">\r\n \u0422\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0430 \u043c\u044b\u0448\u0446 \u0433\u043b\u0430\u0437 \u0434\u043b\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0439 \u0444\u0438\u043a\u0441\u0430\u0446\u0438\u0438. \"\u0424\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043a\u0430\u043d\u0435\u0440\" \u2014 \u0441\u0438\u043d\u0442\u0435\u0437 \u0441\u043a\u043e\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0446\u0435\u043b\u0438\u043a\u043e\u043c (Image Streaming).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Spaced Repetition Chart -->\r\n <div class=\"bg-white p-4 rounded-xl shadow-inner border border-gray-100\">\r\n <h4 class=\"text-center font-bold text-gray-600 mb-2\">\u041a\u0440\u0438\u0432\u0430\u044f \u0417\u0430\u0431\u044b\u0432\u0430\u043d\u0438\u044f \u042d\u0431\u0431\u0438\u043d\u0433\u0430\u0443\u0437\u0430<\/h4>\r\n <div class=\"chart-container\">\r\n <canvas id=\"forgettingCurveChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"mt-4 flex justify-center gap-4 text-xs\">\r\n <button onclick=\"updateChart(false)\" class=\"bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200\">\u0411\u0435\u0437 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439<\/button>\r\n <button onclick=\"updateChart(true)\" class=\"bg-green-100 text-green-700 px-3 py-1 rounded hover:bg-green-200\">\u0421 SRS \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u043c<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- \u041a\u0443\u0440\u0441 \u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b - \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0435\u043a\u0446\u0438\u044f \u0432\u044b\u0448\u0435 \u0444\u0443\u0442\u0435\u0440\u0430 -->\r\n <section id=\"course-section\" class=\"final-integration-section bg-white\">\r\n <div class=\"container mx-auto px-4 py-4 flex justify-between items-center\">\r\n <div>\r\n <h3 class=\"text-xl font-bold text-[#2C3E50]\">\r\n \u041a\u0443\u0440\u0441 \"\u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\"\r\n <\/h3>\r\n <\/div>\r\n \r\n <div>\r\n <a href=\"https:\/\/hobbi.st\/kk\/courses\/%d1%81%d0%b8%d1%81%d1%82%d0%b5%d0%bc%d0%b0-%d0%bd%d0%b5%d0%b8%d1%80%d0%be-%d0%ba%d0%be%d1%80%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%be%d0%b8-%d0%bf%d0%b0%d0%bc%d1%8f%d1%82%d0%b8\/lesson\/%d0%bc%d0%be%d0%b4%d1%83%d0%bb%D1%8c-1-%d1%84%d1%83%d0%bd%d0%b4%d0%b0%d0%bc%d0%b5%d0%bd%d1%82-%d0%b2%d0%bd%d0%b8%d0%bc%d0%b0%d0%bd%D0%b8%d1%8f-%d1%81%d0%be%d1%81%d1%82%d0%be%d1%8f%d0%bd\/\" \r\n target=\"_blank\" \r\n class=\"bg-[#4A7C59] text-white px-6 py-3 rounded-lg text-sm font-bold hover:bg-[#3A6346] transition flex items-center gap-2\">\r\n \u041d\u0430\u0447\u0430\u0442\u044c\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0443\u0442\u0435\u0440 -->\r\n <footer class=\"bg-[#2C3E50] text-[#D4C5A8] py-8 mt-auto relative z-0\">\r\n <div class=\"container mx-auto px-4 text-center\">\r\n <p class=\"font-serif italic text-lg opacity-80 mb-2\">\"\u0427\u0438\u0442\u0430\u0439! \u0412\u043e \u0438\u043c\u044f \u0413\u043e\u0441\u043f\u043e\u0434\u0430 \u0442\u0432\u043e\u0435\u0433\u043e...\"<\/p>\r\n <p class=\"text-xs text-gray-500\">\u00a9 2024 \u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u041c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f. \u041e\u0441\u043d\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0418\u043c\u0430\u043c\u0430 \u0430\u0448-\u0428\u0430\u0444\u0438\u0438 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0435\u0439\u0440\u043e\u0431\u0438\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ --- Navigation Logic ---\r\n function switchTab(tabId) {\r\n \/\/ Hide all sections\r\n document.querySelectorAll('.content-section').forEach(el => {\r\n el.classList.add('hidden-section');\r\n });\r\n \/\/ Remove active class from buttons\r\n document.querySelectorAll('.tab-btn').forEach(btn => {\r\n btn.classList.remove('active-tab', 'text-[#4A7C59]');\r\n btn.classList.add('text-gray-500');\r\n });\r\n\r\n \/\/ Show selected section\r\n document.getElementById(tabId).classList.remove('hidden-section');\r\n \r\n \/\/ Highlight selected button\r\n const activeBtn = document.getElementById(`tab-${tabId}`);\r\n activeBtn.classList.add('active-tab');\r\n activeBtn.classList.remove('text-gray-500');\r\n\r\n \/\/ Trigger chart resize\/render if needed when tab becomes visible\r\n if (tabId === 'architecture') renderRadarChart();\r\n if (tabId === 'pro-hacks') renderLineChart();\r\n }\r\n\r\n \/\/ --- Schulte Table Logic ---\r\n let schulteTimerInterval;\r\n let schulteTime = 0;\r\n let currentNumber = 1;\r\n let isPlaying = false;\r\n\r\n function initSchulte() {\r\n const container = document.getElementById('schulte-container');\r\n container.innerHTML = '';\r\n \r\n \/\/ Reset state\r\n clearInterval(schulteTimerInterval);\r\n schulteTime = 0;\r\n currentNumber = 1;\r\n isPlaying = true;\r\n document.getElementById('schulte-timer').innerText = \"00:00\";\r\n\r\n \/\/ Generate numbers 1-25\r\n let numbers = Array.from({length: 25}, (_, i) => i + 1);\r\n \/\/ Shuffle\r\n numbers.sort(() => Math.random() - 0.5);\r\n\r\n numbers.forEach(num => {\r\n const cell = document.createElement('div');\r\n cell.className = 'schulte-cell';\r\n cell.innerText = num;\r\n cell.onclick = () => handleCellClick(cell, num);\r\n container.appendChild(cell);\r\n });\r\n\r\n \/\/ Start timer\r\n const startTime = Date.now();\r\n schulteTimerInterval = setInterval(() => {\r\n const delta = Date.now() - startTime;\r\n const seconds = Math.floor(delta \/ 1000);\r\n const ms = Math.floor((delta % 1000) \/ 10);\r\n document.getElementById('schulte-timer').innerText = \r\n `${seconds.toString().padStart(2, '0')}:${ms.toString().padStart(2, '0')}`;\r\n }, 50);\r\n }\r\n\r\n function handleCellClick(cell, num) {\r\n if (!isPlaying) return;\r\n \r\n if (num === currentNumber) {\r\n cell.classList.add('clicked');\r\n currentNumber++;\r\n if (currentNumber > 25) {\r\n clearInterval(schulteTimerInterval);\r\n isPlaying = false;\r\n alert(`\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0412\u0440\u0435\u043c\u044f: ${document.getElementById('schulte-timer').innerText}`);\r\n }\r\n } else {\r\n \/\/ Visual feedback for error?\r\n cell.style.backgroundColor = '#FECACA';\r\n setTimeout(() => {\r\n if (!cell.classList.contains('clicked')) {\r\n cell.style.backgroundColor = '#FFFFFF';\r\n }\r\n }, 200);\r\n }\r\n }\r\n\r\n \/\/ --- Card Flip Logic ---\r\n function toggleCard(card) {\r\n const front = card.querySelector('.front');\r\n const back = card.querySelector('.back');\r\n \r\n if (front.style.opacity === '0') {\r\n \/\/ Show front\r\n front.style.opacity = '1';\r\n back.style.opacity = '0';\r\n } else {\r\n \/\/ Show back\r\n front.style.opacity = '0';\r\n back.style.opacity = '1';\r\n }\r\n }\r\n\r\n \/\/ --- Charts Initialization ---\r\n let radarChartInstance = null;\r\n let lineChartInstance = null;\r\n\r\n function renderRadarChart() {\r\n if (radarChartInstance) return; \/\/ Already rendered\r\n const ctx = document.getElementById('memoryRadarChart').getContext('2d');\r\n radarChartInstance = new Chart(ctx, {\r\n type: 'radar',\r\n data: {\r\n labels: ['\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c', '\u0423\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435', '\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435', '\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430', '\u041c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u0438\u0435'],\r\n datasets: [{\r\n label: '\u0422\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434',\r\n data: [40, 50, 60, 30, 20],\r\n fill: true,\r\n backgroundColor: 'rgba(156, 163, 175, 0.2)',\r\n borderColor: 'rgb(156, 163, 175)',\r\n pointBackgroundColor: 'rgb(156, 163, 175)',\r\n }, {\r\n label: '\u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434',\r\n data: [90, 95, 85, 90, 80],\r\n fill: true,\r\n backgroundColor: 'rgba(74, 124, 89, 0.2)',\r\n borderColor: '#4A7C59',\r\n pointBackgroundColor: '#4A7C59',\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n r: {\r\n angleLines: { display: false },\r\n suggestedMin: 0,\r\n suggestedMax: 100\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function renderLineChart() {\r\n if (lineChartInstance) return; \/\/ Already rendered logic handled by updateChart mostly, but init here\r\n updateChart(true);\r\n }\r\n\r\n function updateChart(withSRS) {\r\n const ctx = document.getElementById('forgettingCurveChart').getContext('2d');\r\n \r\n \/\/ Destroy existing if needed to swap data cleanly\r\n if (lineChartInstance) {\r\n lineChartInstance.destroy();\r\n }\r\n\r\n const labels = ['10 \u043c\u0438\u043d', '1 \u0434\u0435\u043d\u044c', '1 \u043d\u0435\u0434\u0435\u043b\u044f', '1 \u043c\u0435\u0441\u044f\u0446', '6 \u043c\u0435\u0441\u044f\u0446\u0435\u0432'];\r\n \r\n \/\/ Ebbinghaus Forgetting Curve (Approximate)\r\n const dataForgot = [60, 33, 25, 21, 15]; \r\n \r\n \/\/ Spaced Repetition (resets to 100%)\r\n const dataSRS = [100, 100, 100, 95, 90]; \r\n\r\n const dataset = withSRS ? \r\n [{\r\n label: '\u0421 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f\u043c\u0438',\r\n data: dataSRS,\r\n borderColor: '#4A7C59',\r\n backgroundColor: 'rgba(74, 124, 89, 0.1)',\r\n tension: 0.3,\r\n fill: true\r\n }] : \r\n [{\r\n label: '\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u043d\u0438\u0435',\r\n data: dataForgot,\r\n borderColor: '#EF4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.4,\r\n fill: true\r\n }];\r\n\r\n lineChartInstance = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: labels,\r\n datasets: dataset\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 100,\r\n title: { display: true, text: '% \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438' }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize first tab\r\n \/\/ Note: Charts load lazily when tabs are clicked to ensure correct canvas sizing\r\n \/\/ Pre-load Schulte grid visual\r\n initSchulte();\r\n \/\/ Stop the timer immediately so it doesn't run on load, just show grid\r\n clearInterval(schulteTimerInterval);\r\n document.getElementById('schulte-timer').innerText = \"00:00\";\r\n isPlaying = false; \/\/ reset play state\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u041f\u0430\u043c\u044f\u0442\u0438 \u041d\u0435\u0439\u0440\u043e-\u041a\u043e\u0440\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b \u041a\u0443\u0440\u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0443\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u041a\u043e\u0440\u0430\u043d\u0430. \u0421\u0438\u043d\u0442\u0435\u0437 \u0441\u0443\u043d\u043d\u044b, \u043d\u0435\u0439\u0440\u043e\u0431\u0438\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u044d\u043b\u0438\u0442\u043d\u044b\u0445 \u043c\u043d\u0435\u043c\u043e\u0442\u0435\u0445\u043d\u0438\u043a. I. \u0411\u0438\u043e-\u041e\u0441\u043d\u043e\u0432\u044b (\u0413\u043b\u0430\u0437\u0430) II. \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u041f\u0430\u043c\u044f\u0442\u0438 III. \u041b\u0438\u043d\u0433\u0432\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0421\u0438\u043d\u0442\u0435\u0437 IV. \u0421\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u044b \u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u0421\u043a\u043e\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u0430\u043f \u2014 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0444\u0438\u0437\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e “\u0436\u0435\u043b\u0435\u0437\u0430”. \u0422\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0447\u0442\u0435\u043d\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e \u0443\u0437\u043a\u0438\u043c \u043f\u043e\u043b\u0435\u043c \u0437\u0440\u0435\u043d\u0438\u044f \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0440\u0435\u0447\u044c\u044e (\u0441\u0443\u0431\u0432\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439). \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0433\u043b\u043e\u0449\u0430\u0442\u044c […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":-8,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-13719","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/13719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=13719"}],"version-history":[{"count":4,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/13719\/revisions"}],"predecessor-version":[{"id":13728,"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/13719\/revisions\/13728"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=13719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}