{"id":13139,"date":"2025-09-30T12:25:44","date_gmt":"2025-09-30T06:25:44","guid":{"rendered":"http:\/\/hobbi.st\/?page_id=13139"},"modified":"2025-09-30T12:33:45","modified_gmt":"2025-09-30T06:33:45","slug":"manifest","status":"publish","type":"page","link":"https:\/\/khatm.hobbi.st\/kk\/manifest\/","title":{"rendered":"manifest"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\n \n \n Hobbi.st | \u0421\u0442\u0430\u043d\u044c \u0418\u0441\u043a\u0440\u043e\u0439 \u0411\u0443\u0434\u0443\u0449\u0435\u0433\u043e<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&display=swap\" rel=\"stylesheet\">\n <!-- Chosen Palette: Warm Neutrals with a Spark (Off-white, Warm Orange, Charcoal) -->\n <!-- Application Structure Plan: A narrative, single-page scroll experience designed to guide the user from inspiration to action. The structure progresses from the core concept ('\u0418\u0441\u043a\u0440\u0430'), through a clear interactive process ('\u0422\u0432\u043e\u0439 \u041f\u0443\u0442\u044c'), to the broader impact ('\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e?'), culminating in a practical 'Hobby Explorer' tool. This linear, storytelling approach is more effective for a motivational manifesto than a data-driven dashboard, making the message engaging and easy to follow for the target audience (students). -->\n <!-- Visualization & Content Choices: 1. \"\u0422\u0432\u043e\u0439 \u041f\u0443\u0442\u044c\" (Process Steps): Goal: Organize\/Inform. Method: Interactive HTML\/CSS cards. Interaction: Hover\/click effects to reveal details. Justification: Turns a static list into an engaging, step-by-step discovery process. 2. \"\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e?\" (Impact Statements): Goal: Inform\/Engage. Method: Animated number counters. Interaction: Numbers animate on scroll-into-view. Justification: Adds dynamism to qualitative statements, visually representing growth and impact. 3. \"Hobby Explorer\": Goal: Organize\/Inform. Method: Dynamic content blocks updated via JS. Interaction: Category buttons filter and display relevant hobbies. Justification: Provides a practical, interactive first step for the user, directly translating the site's main call-to-action into a tangible tool. Library: Vanilla JS for all interactions. -->\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FFFBEB;\n color: #1F2937;\n }\n .sparkle-text {\n background: linear-gradient(90deg, #F97316, #F59E0B, #D97706);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .card-hover: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 .category-btn.active {\n background-color: #F97316;\n color: white;\n box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.39);\n }\n .scroll-reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n .scroll-reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n <header class=\"bg-amber-50 shadow-sm sticky top-0 z-50\">\n <nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <div class=\"text-2xl font-bold sparkle-text\">hobbi.st<\/div>\n <a href=\"#explorer\" class=\"bg-orange-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-orange-600 transition duration-300\">hobbi \u0442\u0430\u0431\u0443<\/a>\n <\/nav>\n <\/header>\n\n <main>\n <section class=\"h-[90vh] flex items-center justify-center text-center bg-amber-50\">\n <div class=\"container mx-auto px-6\">\n <h1 class=\"text-4xl md:text-7xl font-black mb-4 leading-tight\">\n \u0411\u043e\u043b\u0430\u0448\u0430\u049b\u0442\u044b\u04a3 <span class=\"sparkle-text\">\u0428\u044b\u0440\u0430\u0493\u044b<\/span> \u0411\u043e\u043b!\n <\/h1>\n <p class=\"text-lg md:text-xl max-w-3xl mx-auto text-slate-600 mb-8\">\n \u0421\u0456\u0437\u0434\u0456\u04a3 \u0456\u0448\u0456\u04a3\u0456\u0437\u0434\u0435 \u04d9\u043b\u0435\u043c\u0434\u0456 \u04e9\u0437\u0433\u0435\u0440\u0442\u0435 \u0430\u043b\u0430\u0442\u044b\u043d \u043e\u0442 \u0431\u0430\u0440. hobbi.st \u0430\u0440\u049b\u044b\u043b\u044b \u0436\u0430\u049b\u0441\u044b \u043a\u04e9\u0440\u0435\u0442\u0456\u043d \u043a\u04d9\u0441\u0456\u0431\u0456\u04a3\u0456\u0437\u0434\u0456 \u0442\u0430\u0443\u044b\u043f, \u0442\u043e\u043b\u044b\u049b \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044b\u04a3\u044b\u0437\u0434\u044b \u0430\u0448\u044b\u04a3\u044b\u0437.\n <\/p>\n <a href=\"#your-path\" class=\"bg-orange-500 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-orange-600 transition duration-300 shadow-lg\">\u0410\u043b\u0493\u0430!<\/a>\n <\/div>\n <\/section>\n\n <section id=\"mission\" class=\"py-20 md:py-32\">\n <div class=\"container mx-auto px-6 text-center scroll-reveal\">\n <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u0421\u04af\u0439\u0456\u043a\u0442\u0456 \u0456\u0441\u0456\u04a3\u0456\u0437 - \u0441\u0456\u0437\u0434\u0456\u04a3 <span class=\"sparkle-text\">\u0441\u0443\u043f\u0435\u0440-\u043a\u0456\u043b\u0442\u0456\u04a3\u0456\u0437<\/span><\/h2>\n <p class=\"max-w-3xl mx-auto text-lg text-slate-600\">\n \u0411\u04b1\u043b \u0436\u0430\u0439 \u0445\u043e\u0431\u0431\u0438 \u0435\u043c\u0435\u0441. \u0411\u04b1\u043b \u0441\u0456\u0437\u0434\u0456\u04a3 \u04e9\u0437-\u04e9\u0437\u0456\u04a3\u0456\u0437\u0434\u0456 \u0436\u04af\u0437\u0435\u0433\u0435 \u0430\u0441\u044b\u0440\u0443\u0493\u0430, \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044f\u043b\u0430\u0440\u0493\u0430 \u0436\u04d9\u043d\u0435 \u0436\u0430\u04bb\u0430\u043d\u0434\u044b\u049b \u04e9\u0437\u0433\u0435\u0440\u0456\u0441\u0442\u0435\u0440\u0433\u0435 \u0430\u043f\u0430\u0440\u0430\u0442\u044b\u043d \u0434\u0430\u0440\u0430 \u0436\u043e\u043b\u044b\u04a3\u044b\u0437. \u0421\u0456\u0437\u0434\u0456\u04a3 \u043c\u0430\u0445\u0430\u0431\u0431\u0430\u0442 \u043a\u04d9\u0441\u0456\u0431\u0456\u04a3\u0456\u0437 \u2014 \u0441\u0456\u0437 \u04af\u0448\u0456\u043d \u0436\u04d9\u043d\u0435 \u0431\u04af\u043a\u0456\u043b \u0435\u043b \u04af\u0448\u0456\u043d \u049b\u043e\u0437\u0493\u0430\u0443\u0448\u044b \u043a\u04af\u0448.\n <\/p>\n <div class=\"mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-left\">\n <div class=\"bg-white p-6 rounded-xl shadow-md\">\n <h3 class=\"font-bold text-xl mb-2 text-orange-600\">\u0422\u0430\u0493\u0434\u044b\u0440\u044b\u04a3\u0434\u044b \u0436\u0430\u0441\u0430<\/h3>\n <p class=\"text-slate-600\">\u0421\u0435\u043d\u0456 \u0448\u0430\u0431\u044b\u0442\u0442\u0430\u043d\u0434\u044b\u0440\u0430\u0442\u044b\u043d \u043d\u04d9\u0440\u0441\u0435\u043d\u0456 \u0442\u0430\u043f: \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u043b\u0430\u0440 \u0436\u0430\u0437\u0443, \u04e9\u043d\u0435\u0440 \u043d\u0435\u043c\u0435\u0441\u0435 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0442\u0430\u0440\u0434\u044b \u0431\u0430\u0441\u0442\u0430\u0443.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-md\">\n <h3 class=\"font-bold text-xl mb-2 text-orange-600\">\u04d8\u043b\u0435\u043c\u0434\u0456 \u04e9\u0437\u0433\u0435\u0440\u0442<\/h3>\n <p class=\"text-slate-600\">\u0421\u0435\u043d\u0456\u04a3 \u0431\u0456\u0440 \u0493\u0430\u043d\u0430 \u049b\u04b1\u043c\u0430\u0440\u043b\u044b\u0493\u044b\u04a3 \u043c\u044b\u04a3\u0434\u0430\u0493\u0430\u043d \u0430\u0434\u0430\u043c\u0434\u044b \u0448\u0430\u0431\u044b\u0442\u0442\u0430\u043d\u0434\u044b\u0440\u044b\u043f, \u049a\u0430\u0437\u0430\u049b\u0441\u0442\u0430\u043d\u0434\u0430 \u04e9\u0437\u0433\u0435\u0440\u0456\u0441\u0442\u0435\u0440 \u0442\u043e\u043b\u049b\u044b\u043d\u044b\u043d \u0442\u0443\u0434\u044b\u0440\u0443\u044b \u043c\u04af\u043c\u043a\u0456\u043d.<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-xl shadow-md\">\n <h3 class=\"font-bold text-xl mb-2 text-orange-600\">\u0411\u043e\u043b\u0430\u0448\u0430\u049b\u0442\u044b \u049b\u04b1\u0440\u0430<\/h3>\n <p class=\"text-slate-600\">\u0421\u0435\u043d\u0456\u04a3 \u0445\u043e\u0431\u0431\u0438\u0456\u04a3 \u043c\u0430\u043c\u0430\u043d\u0434\u044b\u049b\u049b\u0430, \u0431\u0438\u0437\u043d\u0435\u0441\u043a\u0435 \u043d\u0435\u043c\u0435\u0441\u0435 \u0435\u043b\u0456\u043c\u0456\u0437\u0434\u0456 \u043c\u04af\u043c\u043a\u0456\u043d\u0434\u0456\u043a\u0442\u0435\u0440 \u043e\u0440\u0442\u0430\u043b\u044b\u0493\u044b\u043d\u0430 \u0430\u0439\u043d\u0430\u043b\u0434\u044b\u0440\u0430\u0442\u044b\u043d \u0438\u0434\u0435\u044f\u0493\u0430 \u04b1\u043b\u0430\u0441\u0443\u044b \u043c\u04af\u043c\u043a\u0456\u043d.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"your-path\" class=\"py-20 md:py-32 bg-amber-50\">\n <div class=\"container mx-auto px-6 scroll-reveal\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u04e8\u0437\u0433\u0435\u0440\u0456\u0441\u0442\u0435\u0440\u0433\u0435 \u0410\u043f\u0430\u0440\u0430\u0442\u044b\u043d \u0421\u0435\u043d\u0456\u04a3 3 \u049a\u0430\u0434\u0430\u043c\u0434\u044b\u049b \u0416\u043e\u043b\u044b\u04a3<\/h2>\n <p class=\"max-w-2xl mx-auto text-lg text-slate-600\">\u049a\u0430\u0437\u0456\u0440\u0434\u0435\u043d \u0431\u0430\u0441\u0442\u0430\u0443 \u04af\u0448\u0456\u043d \u0431\u0456\u0437 \u049b\u0430\u0440\u0430\u043f\u0430\u0439\u044b\u043c \u0436\u043e\u043b \u043a\u0430\u0440\u0442\u0430\u0441\u044b\u043d \u0436\u0430\u0441\u0430\u0434\u044b\u049b.<\/p>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-8 rounded-2xl shadow-lg transition duration-300 card-hover\">\n <div class=\"text-5xl font-black sparkle-text mb-4\">1<\/div>\n <h3 class=\"font-bold text-2xl mb-3\">\u0417\u0435\u0440\u0442\u0442\u0435 \u0436\u04d9\u043d\u0435 \u0422\u0430\u043f<\/h3>\n <p class=\"text-slate-600\">\u0420\u043e\u0431\u043e\u0442\u043e\u0442\u0435\u0445\u043d\u0438\u043a\u0430\u0434\u0430\u043d \u0431\u0430\u0441\u0442\u0430\u043f \u0434\u0438\u0437\u0430\u0439\u043d\u0493\u0430 \u0434\u0435\u0439\u0456\u043d\u0433\u0456 \u043e\u043d\u0434\u0430\u0493\u0430\u043d \u0431\u0430\u0493\u044b\u0442\u0442\u044b \u0430\u0448. \u0414\u04d9\u043b \u0421\u043e\u043b \u041d\u04d9\u0440\u0441\u0435\u043d\u0456 \u0442\u0430\u0431\u0443 \u04af\u0448\u0456\u043d \u0436\u0430\u04a3\u0430\u043d\u044b \u0441\u044b\u043d\u0430\u043f \u043a\u04e9\u0440\u0443\u0434\u0435\u043d \u049b\u043e\u0440\u044b\u049b\u043f\u0430.<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-lg transition duration-300 card-hover\">\n <div class=\"text-5xl font-black sparkle-text mb-4\">2<\/div>\n <h3 class=\"font-bold text-2xl mb-3\">\u0416\u0430\u0441\u0430 \u0436\u04d9\u043d\u0435 \u04e8\u0441<\/h3>\n <p class=\"text-slate-600\">\u0411\u0430\u0441\u0442\u044b \u0434\u0430\u0493\u0434\u044b\u043b\u0430\u0440\u0434\u044b \u0434\u0430\u043c\u044b\u0442: \u0442\u0430\u0431\u0430\u043d\u0434\u044b\u043b\u044b\u049b, \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u0442\u0456\u043b\u0456\u043a \u0436\u04d9\u043d\u0435 \u04e9\u0437\u0456\u04a3\u0435 \u0434\u0435\u0433\u0435\u043d \u0441\u0435\u043d\u0456\u043c. \u04d8\u0440\u0431\u0456\u0440 \u043a\u0456\u0448\u043a\u0435\u043d\u0442\u0430\u0439 \u049b\u0430\u0434\u0430\u043c \u0441\u0435\u043d\u0456 \u043a\u04af\u0448\u0442\u0456 \u049b\u044b\u043b\u0430\u0434\u044b.<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-lg transition duration-300 card-hover\">\n <div class=\"text-5xl font-black sparkle-text mb-4\">3<\/div>\n <h3 class=\"font-bold text-2xl mb-3\">\u0428\u0430\u0431\u044b\u0442\u0442\u0430\u043d\u0434\u044b\u0440 \u0436\u04d9\u043d\u0435 \u04e8\u0437\u0433\u0435\u0440\u0442<\/h3>\n <p class=\"text-slate-600\">\u049a\u044b\u0437\u044b\u0493\u0443\u0448\u044b\u043b\u044b\u0493\u044b\u04a3\u043c\u0435\u043d \u0431\u04e9\u043b\u0456\u0441! \u0421\u0435\u043d\u0456\u04a3 \u0456\u0441\u0456\u04a3 \u04e9\u0437\u0433\u0435\u043b\u0435\u0440\u0434\u0456 \u043e\u044f\u0442\u044b\u043f, \u04d9\u0443\u0435\u0441\u0442\u0456\u0433\u0456\u04a3\u0434\u0456 \u04af\u043b\u043a\u0435\u043d \u04e9\u0437\u0433\u0435\u0440\u0456\u0441\u0442\u0435\u0440\u0433\u0435 \u0436\u043e\u043b \u0430\u0448\u0430\u0442\u044b\u043d \u0436\u043e\u0431\u0430\u0493\u0430 \u04b1\u043b\u0430\u0441\u0442\u044b\u0440\u0443\u044b \u043c\u04af\u043c\u043a\u0456\u043d.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"py-20 md:py-32\">\n <div class=\"container mx-auto px-6 text-center scroll-reveal\">\n <h2 class=\"text-3xl md:text-4xl font-bold mb-12\">\u0411\u0456\u0440 <span class=\"sparkle-text\">\u04b1\u0448\u049b\u044b\u043d<\/span> \u043b\u0430\u0443\u043b\u0430\u0493\u0430\u043d \u04e9\u0440\u0442 \u0442\u0443\u0434\u044b\u0440\u0430\u0434\u044b<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <div>\n <div class=\"text-5xl md:text-6xl font-black text-orange-500\" data-counter-target=\"1\">1<\/div>\n <p class=\"mt-2 text-lg text-slate-600\">\u04e8\u0437 \u0406\u0441\u0456\u043d \u0422\u0430\u043f\u049b\u0430\u043d \u0427\u0435\u043c\u043f\u0438\u043e\u043d<\/p>\n <\/div>\n <div>\n <div class=\"text-5xl md:text-6xl font-black text-orange-500\" data-counter-target=\"1000\">0<\/div>\n <p class=\"mt-2 text-lg text-slate-600\">\u0428\u0430\u0431\u044b\u0442\u0442\u0430\u043d\u0493\u0430\u043d \u0414\u043e\u0441\u0442\u0430\u0440 \u043c\u0435\u043d \u0416\u0430\u0437\u044b\u043b\u0443\u0448\u044b\u043b\u0430\u0440<\/p>\n <\/div>\n <div>\n <div class=\"text-5xl md:text-6xl font-black text-orange-500\" data-counter-target=\"100\">0<\/div>\n <p class=\"mt-2 text-lg text-slate-600\">\u0415\u043b \u04af\u0448\u0456\u043d \u0416\u0430\u04a3\u0430 \u041c\u04af\u043c\u043a\u0456\u043d\u0434\u0456\u043a\u0442\u0435\u0440<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"explorer\" class=\"py-20 md:py-32 bg-amber-50\">\n <div class=\"container mx-auto px-6 scroll-reveal\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u04e8\u0437 \u0406\u0441\u0456\u04a3\u0434\u0456 \u0414\u04d9\u043b \u049a\u0430\u0437\u0456\u0440 \u0422\u0430\u043f<\/h2>\n <p class=\"max-w-2xl mx-auto text-lg text-slate-600\">\u041d\u0435\u0434\u0435\u043d \u0431\u0430\u0441\u0442\u0430\u0443 \u043a\u0435\u0440\u0435\u043a? \u04e8\u0437\u0456\u04a3\u0435 \u049b\u044b\u0437\u044b\u049b\u0442\u044b \u0431\u0430\u0493\u044b\u0442\u0442\u044b \u0442\u0430\u04a3\u0434\u0430 \u0436\u04d9\u043d\u0435 \u0438\u0434\u0435\u044f\u043b\u0430\u0440\u0434\u044b \u049b\u0430\u0440\u0430.<\/p>\n <\/div>\n <div id=\"hobby-categories\" class=\"flex flex-wrap justify-center gap-3 md:gap-4 mb-8\">\n <button class=\"category-btn active font-semibold py-2 px-5 rounded-full bg-white shadow-sm transition duration-300 hover:bg-orange-500 hover:text-white\" data-category=\"tech\">\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438<\/button>\n <button class=\"category-btn font-semibold py-2 px-5 rounded-full bg-white shadow-sm transition duration-300 hover:bg-orange-500 hover:text-white\" data-category=\"art\">\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u0438 \u0422\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u043e<\/button>\n <button class=\"category-btn font-semibold py-2 px-5 rounded-full bg-white shadow-sm transition duration-300 hover:bg-orange-500 hover:text-white\" data-category=\"sport\">\u0421\u043f\u043e\u0440\u0442 \u0438 \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/button>\n <button class=\"category-btn font-semibold py-2 px-5 rounded-full bg-white shadow-sm transition duration-300 hover:bg-orange-500 hover:text-white\" data-category=\"science\">\u041d\u0430\u0443\u043a\u0430 \u0438 \u0418\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442<\/button>\n <\/div>\n <div id=\"hobby-display\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 min-h-[150px]\">\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"py-20 md:py-32 text-center\">\n <div class=\"container mx-auto px-6 scroll-reveal\">\n <h2 class=\"text-4xl md:text-5xl font-black mb-4\">\n \u0421\u0435\u043d \u2014 <span class=\"sparkle-text\">\u0427\u0435\u043c\u043f\u0438\u043e\u043d<\/span>.<br>\u0421\u0435\u043d \u2014 <span class=\"sparkle-text\">\u0411\u043e\u043b\u0430\u0448\u0430\u049b\u0442\u044b\u04a3 \u04b0\u0448\u049b\u044b\u043d\u044b<\/span>.\n <\/h2>\n <p class=\"text-lg md:text-xl max-w-2xl mx-auto text-slate-600 mb-8\">\n \u0421\u0435\u043d\u0456\u04a3 \u0436\u043e\u043b\u044b\u04a3 \u0431\u0456\u0440 \u049b\u0430\u0434\u0430\u043c\u043d\u0430\u043d \u0431\u0430\u0441\u0442\u0430\u043b\u0430\u0434\u044b. \u041e\u043d\u044b \u0434\u04d9\u043b \u049b\u0430\u0437\u0456\u0440 \u0436\u0430\u0441\u0430.\n <\/p>\n <a href=\"https:\/\/khatm.hobbi.st\/kk\/\" target=\"_blank\" class=\"bg-orange-500 text-white font-bold py-4 px-10 rounded-lg text-xl hover:bg-orange-600 transition duration-300 shadow-lg\">\u0410\u043b\u0493\u0430!<\/a>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-slate-800 text-white py-8\">\n <div class=\"container mx-auto px-6 text-center text-slate-400\">\n <p>© 2025 hobbi.st | \u0417\u0430\u0436\u0438\u0433\u0430\u0435\u043c \u0418\u0441\u043a\u0440\u044b \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u041a\u0430\u0437\u0430\u0445\u0441\u0442\u0430\u043d\u0443.<\/p>\n <p class=\"mt-2 text-sm\">\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u041a\u0430\u0437\u0430\u0445\u0441\u0442\u0430\u043d \u043c\u0438\u0440\u043e\u0432\u044b\u043c \u0445\u0430\u0431\u043e\u043c \u0442\u0430\u043b\u0430\u043d\u0442\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u0435! \ud83c\uddf0\ud83c\uddff<\/p>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const hobbies = {\n tech: [\n { name: '\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435', icon: '\ud83d\udcbb' },\n { name: '\u0420\u043e\u0431\u043e\u0442\u043e\u0442\u0435\u0445\u043d\u0438\u043a\u0430', icon: '\ud83e\udd16' },\n { name: '\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0430\u0439\u0442\u043e\u0432', icon: '\ud83c\udf10' },\n { name: '3D-\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435', icon: '\ud83e\uddca' }\n ],\n art: [\n { name: '\u0426\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a', icon: '\ud83c\udfa8' },\n { name: '\u0424\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f', icon: '\ud83d\udcf7' },\n { name: '\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0438\u0434\u0435\u043e', icon: '\ud83c\udfac' },\n { name: '\u0418\u0433\u0440\u0430 \u043d\u0430 \u0433\u0438\u0442\u0430\u0440\u0435', icon: '\ud83c\udfb8' }\n ],\n sport: [\n { name: '\u0424\u0443\u0442\u0431\u043e\u043b', icon: '\u26bd' },\n { name: '\u0421\u043a\u0435\u0439\u0442\u0431\u043e\u0440\u0434\u0438\u043d\u0433', icon: '\ud83d\udef9' },\n { name: '\u0422\u0430\u043d\u0446\u044b', icon: '\ud83d\udc83' },\n { name: '\u0419\u043e\u0433\u0430', icon: '\ud83e\uddd8' }\n ],\n science: [\n { name: '\u0428\u0430\u0445\u043c\u0430\u0442\u044b', icon: '\u265f\ufe0f' },\n { name: '\u0410\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u044f', icon: '\ud83d\udd2d' },\n { name: '\u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u044f\u0437\u044b\u043a\u043e\u0432', icon: '\ud83c\udf0d' },\n { name: '\u0414\u0435\u0431\u0430\u0442\u044b', icon: '\ud83d\udde3\ufe0f' }\n ]\n };\n\n const categoryContainer = document.getElementById('hobby-categories');\n const displayContainer = document.getElementById('hobby-display');\n \n function displayHobbies(category) {\n displayContainer.innerHTML = '';\n hobbies[category].forEach(hobby => {\n \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d DIV \u043d\u0430 A \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 hobbi.st\n const hobbyCard = document.createElement('a');\n hobbyCard.href = 'https:\/\/khatm.hobbi.st\/'; \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0441\u044b\u043b\u043a\u0438\n hobbyCard.target = '_blank'; \/\/ \u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435\n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0438 \u0438\u043c\u0435\u043b\u043e \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\n hobbyCard.className = 'bg-white p-6 rounded-xl shadow-md text-center flex flex-col items-center justify-center cursor-pointer transform transition duration-300 hover:scale-105';\n hobbyCard.innerHTML = `\n <div class=\"text-4xl mb-3\">${hobby.icon}<\/div>\n <h4 class=\"font-semibold text-lg\">${hobby.name}<\/h4>\n `;\n displayContainer.appendChild(hobbyCard);\n });\n }\n\n categoryContainer.addEventListener('click', (e) => {\n if (e.target.tagName === 'BUTTON') {\n document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));\n e.target.classList.add('active');\n const category = e.target.dataset.category;\n displayHobbies(category);\n }\n });\n \n displayHobbies('tech');\n\n const counters = document.querySelectorAll('[data-counter-target]');\n const animateCounters = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const el = entry.target;\n const target = +el.dataset.counterTarget;\n let current = 0;\n const increment = target \/ 100;\n\n const updateCounter = () => {\n if (current < target) {\n current += increment;\n el.innerText = Math.ceil(current).toLocaleString('ru-RU');\n requestAnimationFrame(updateCounter);\n } else {\n el.innerText = target.toLocaleString('ru-RU');\n }\n };\n updateCounter();\n observer.unobserve(el);\n }\n });\n };\n const counterObserver = new IntersectionObserver(animateCounters, { threshold: 0.7 });\n counters.forEach(counter => counterObserver.observe(counter));\n\n const revealElements = document.querySelectorAll('.scroll-reveal');\n const revealOnScroll = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n };\n const scrollObserver = new IntersectionObserver(revealOnScroll, { threshold: 0.1 });\n revealElements.forEach(el => scrollObserver.observe(el));\n });\n <\/script>\n<\/body>\n<\/html>\n<!-- end manifest -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Hobbi.st | \u0421\u0442\u0430\u043d\u044c \u0418\u0441\u043a\u0440\u043e\u0439 \u0411\u0443\u0434\u0443\u0449\u0435\u0433\u043e hobbi.st \u041d\u0430\u0439\u0442\u0438 \u0445\u043e\u0431\u0431\u0438 \u0421\u0442\u0430\u043d\u044c \u0418\u0441\u043a\u0440\u043e\u0439 \u0411\u0443\u0434\u0443\u0449\u0435\u0433\u043e! \u0412\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0431\u044f \u2014 \u043e\u0433\u043e\u043d\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043c\u0438\u0440. \u041d\u0430\u0439\u0434\u0438 \u043b\u044e\u0431\u0438\u043c\u043e\u0435 \u0434\u0435\u043b\u043e \u0441 hobbi.st \u0438 \u0440\u0430\u0441\u043a\u0440\u043e\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b. \u041d\u0430\u0447\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0443\u0442\u044c \u041b\u044e\u0431\u0438\u043c\u043e\u0435 \u0434\u0435\u043b\u043e \u2014 \u044d\u0442\u043e \u0442\u0432\u043e\u0439 \u0441\u0443\u043f\u0435\u0440-\u043a\u043b\u044e\u0447 \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0431\u0431\u0438. \u042d\u0442\u043e \u0442\u0432\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0441\u0430\u043c\u043e\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044f\u043c \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d. \u0422\u0432\u043e\u044f \u0441\u0442\u0440\u0430\u0441\u0442\u044c \u2014 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":-3,"comment_status":"open","ping_status":"closed","template":"elementor_theme","meta":{"give_campaign_id":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-13139","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/13139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=13139"}],"version-history":[{"count":0,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/13139\/revisions"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=13139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}