{"id":1256,"date":"2026-02-03T04:13:18","date_gmt":"2026-02-03T04:13:18","guid":{"rendered":"https:\/\/marketing-coaching.uk\/?p=1256"},"modified":"2026-08-24T16:45:15","modified_gmt":"2026-08-24T16:45:15","slug":"%d9%87%d9%86%d8%af%d8%b3%d8%a9-%d8%a7%d9%84%d9%81%d8%b9%d9%84","status":"publish","type":"post","link":"https:\/\/marketing-coaching.uk\/en\/%d9%87%d9%86%d8%af%d8%b3%d8%a9-%d8%a7%d9%84%d9%81%d8%b9%d9%84\/","title":{"rendered":"\u0647\u0646\u062f\u0633\u0629 \u0627\u0644\u0641\u0639\u0644"},"content":{"rendered":"\n\n\n\n    \n    \n    <title>\u0644\u0648\u062d\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a\u0629 | Marketing Coaching<\/title>\n    \n    <!-- \u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u0645\u0643\u062a\u0628\u0629 Tailwind CSS -->\n    \n    \n    <!-- \u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u0645\u0643\u062a\u0628\u0629 \u0623\u064a\u0642\u0648\u0646\u0627\u062a Lucide -->\n    \n\n    <!-- \u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u062e\u0637 Cairo \u0645\u0646 Google Fonts -->\n    \n    \n    \n\n    <!-- \u0625\u0639\u062f\u0627\u062f \u0623\u0644\u0648\u0627\u0646 Tailwind \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0644\u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0631\u0641\u0642\u0629 -->\n    \n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        gold: {\n                            50: &#8216;#fffbeb&#8217;,\n                            100: &#8216;#fef3c7&#8217;,\n                            200: &#8216;#fde68a&#8217;,\n                            300: &#8216;#fcd34d&#8217;,\n                            400: &#8216;#fbbf24&#8217;,\n                            500: &#8216;#f59e0b&#8217;, \/\/ \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0630\u0647\u0628\u064a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\n                            600: &#8216;#d97706&#8217;,\n                            700: &#8216;#b45309&#8217;,\n                        },\n                        dark: {\n                            900: &#8216;#0f172a&#8217;, \/\/ \u0627\u0644\u0623\u0633\u0648\u062f\n                            800: &#8216;#1e293b&#8217;,\n                            400: &#8216;#94a3b8&#8217;, \/\/ \u0627\u0644\u0631\u0645\u0627\u062f\u064a\n                        }\n                    },\n                    fontFamily: {\n                        sans: [&#8216;Cairo&#8217;, &#8216;sans-serif&#8217;],\n                    }\n                }\n            }\n        }\n    \n\n    \n        body {\n            font-family: &#8216;Cairo&#8217;, sans-serif;\n            background-color: #f8fafc;\n            color: #0f172a;\n        }\n\n        \/* \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062a\u0628\u0648\u064a\u0628\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 *\/\n        .tab-btn.active {\n            color: #0f172a; \/* \u0623\u0633\u0648\u062f *\/\n            border-bottom: 3px solid #f59e0b; \/* \u062e\u0637 \u0630\u0647\u0628\u064a *\/\n            background-color: #fffbeb; \/* \u062e\u0644\u0641\u064a\u0629 \u0630\u0647\u0628\u064a\u0629 \u0628\u0627\u0647\u062a\u0629 \u062c\u062f\u0627\u064b *\/\n        }\n\n        \/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062a\u0631\u0643\u064a\u0632 *\/\n        input:focus, textarea:focus {\n            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3); \/* \u062a\u0648\u0647\u062c \u0630\u0647\u0628\u064a *\/\n            border-color: #f59e0b;\n        }\n\n        \/* \u062d\u0631\u0643\u0627\u062a \u0646\u0627\u0639\u0645\u0629 *\/\n        .fade-in {\n            animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        \n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* \u0625\u062e\u0641\u0627\u0621 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\n        .hide-scrollbar::-webkit-scrollbar {\n            display: none;\n        }\n        .hide-scrollbar {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n        }\n    \n\n\n\n    <div class=\"max-w-5xl mx-auto min-h-screen flex flex-col border-x border-slate-200 bg-white shadow-xl shadow-slate-200\/50\">\n        \n        <!-- \u0627\u0644\u0631\u0623\u0633 (Header) -->\n        <header class=\"bg-white border-b border-slate-100 sticky top-0 z-50 px-6 py-4\">\n            <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n                <div class=\"flex items-center gap-3\">\n                    <div class=\"bg-gold-500 text-white p-2.5 rounded-lg shadow-lg shadow-gold-500\/30\">\n                        <i data-lucide=\"bar-chart-2\"><\/i>\n                    <\/div>\n                    <div>\n                        <h1 class=\"font-bold text-xl leading-none text-dark-900\">\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/h1>\n                        <p class=\"text-[11px] text-gold-600 font-bold tracking-widest mt-1 uppercase\">Marketing Coaching<\/p>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 -->\n                <nav class=\"flex gap-2 overflow-x-auto hide-scrollbar\">\n                    <button class=\"tab-btn active px-4 py-2 rounded-t-lg text-sm font-bold flex items-center gap-2 text-slate-400 hover:bg-slate-50 transition-all whitespace-nowrap\">\n                        <i data-lucide=\"columns\"><\/i>\n                        <span>\u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644<\/span>\n                    <\/button>\n                    <button class=\"tab-btn px-4 py-2 rounded-t-lg text-sm font-bold flex items-center gap-2 text-slate-400 hover:bg-slate-50 transition-all whitespace-nowrap\">\n                        <i data-lucide=\"shield-alert\"><\/i>\n                        <span>\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062e\u0627\u0648\u0641<\/span>\n                    <\/button>\n                    <button class=\"tab-btn px-4 py-2 rounded-t-lg text-sm font-bold flex items-center gap-2 text-slate-400 hover:bg-slate-50 transition-all whitespace-nowrap\">\n                        <i data-lucide=\"zap\"><\/i>\n                        <span>\u0642\u0627\u0639\u062f\u0629 5 \u062b\u0648\u0627\u0646\u064a<\/span>\n                    <\/button>\n                    <button class=\"tab-btn px-4 py-2 rounded-t-lg text-sm font-bold flex items-center gap-2 text-slate-400 hover:bg-slate-50 transition-all whitespace-nowrap\">\n                        <i data-lucide=\"hourglass\"><\/i>\n                        <span>\u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0645\u0631<\/span>\n                    <\/button>\n                <\/nav>\n            <\/div>\n        <\/header>\n\n        <!-- \u0627\u0644\u0645\u062d\u062a\u0648\u0649 (Body) -->\n        <main class=\"flex-1 p-4 md:p-8 bg-slate-50\/50\">\n\n            <!-- 1. \u0623\u062f\u0627\u0629 \u0627\u0644\u062e\u0637 \u0627\u0644\u0639\u0645\u0648\u062f\u064a -->\n            <div id=\"tab-line\" class=\"tab-content fade-in max-w-4xl mx-auto\">\n                <!-- \u0634\u0631\u062d \u0627\u0644\u0623\u062f\u0627\u0629 -->\n                <div class=\"bg-dark-900 text-white p-5 rounded-xl mb-6 shadow-lg flex items-start gap-4\">\n                    <div class=\"p-2 bg-white\/10 rounded-lg\">\n                        <i data-lucide=\"info\" class=\"text-gold-400\"><\/i>\n                    <\/div>\n                    <div>\n                        <h3 class=\"font-bold text-lg text-gold-400\">\u062a\u0645\u0631\u064a\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644<\/h3>\n                        <p class=\"text-sm text-slate-300 mt-1 leading-relaxed opacity-90\">\n                            \u0627\u0646\u0642\u0644 \u0627\u0644\u0645\u0647\u0627\u0645 \u0645\u0646 \u0645\u0646\u0637\u0642\u0629 &#8220;\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0627\u0644\u0622\u0645\u0646&#8221; (\u0627\u0644\u064a\u0633\u0627\u0631) \u0625\u0644\u0649 \u0645\u0646\u0637\u0642\u0629 &#8220;\u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629&#8221; (\u0627\u0644\u064a\u0645\u064a\u0646). <br>\u0627\u0644\u0647\u062f\u0641 \u0647\u0648 \u062a\u0641\u0631\u064a\u063a \u0627\u0644\u064a\u0633\u0627\u0631 \u0648\u0645\u0644\u0621 \u0627\u0644\u064a\u0645\u064a\u0646 \u0628\u0627\u0644\u0623\u0641\u0639\u0627\u0644 \u0627\u0644\u062c\u0631\u064a\u0626\u0629.\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-0 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden min-h-[500px]\">\n                    \n                    <!-- \u0642\u0633\u0645 \u0627\u0644\u062a\u062d\u0636\u064a\u0631 (\u0631\u0645\u0627\u062f\u064a) -->\n                    <div class=\"p-6 bg-slate-50 md:border-l border-slate-200\">\n                        <div class=\"flex items-center gap-2 mb-6 text-slate-500\">\n                            <i data-lucide=\"brain\"><\/i>\n                            <h4 class=\"font-bold text-lg\">\u0627\u0644\u062a\u062d\u0636\u064a\u0631 (\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0631\u0627\u062d\u0629)<\/h4>\n                        <\/div>\n                        \n                        <div class=\"flex gap-2 mb-6\">\n                            \n                            <button class=\"bg-slate-200 hover:bg-slate-300 text-slate-600 p-3 rounded-xl transition shadow-sm\">\n                                <i data-lucide=\"plus\"><\/i>\n                            <\/button>\n                        <\/div>\n\n                        <ul id=\"prep-list\" class=\"space-y-3\"><\/ul>\n                    <\/div>\n\n                    <!-- \u0642\u0633\u0645 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 (\u0630\u0647\u0628\u064a) -->\n                    <div class=\"p-6 bg-white relative\">\n                        <!-- \u0632\u062e\u0631\u0641\u0629 \u062e\u0644\u0641\u064a\u0629 \u0628\u0633\u064a\u0637\u0629 -->\n                        <div class=\"absolute top-0 left-0 w-full h-1 bg-gold-400\"><\/div>\n                        \n                        <div class=\"flex items-center gap-2 mb-6 text-dark-900\">\n                            <i data-lucide=\"zap\" class=\"text-gold-500 fill-gold-500\"><\/i>\n                            <h4 class=\"font-bold text-lg\">\u0627\u0644\u062d\u064a\u0627\u0629 (\u0627\u0644\u0645\u062e\u0627\u0637\u0631\u0629 \u0648\u0627\u0644\u0641\u0639\u0644)<\/h4>\n                        <\/div>\n\n                        <div class=\"flex gap-2 mb-6\">\n                            \n                            <button class=\"bg-gold-500 hover:bg-gold-600 text-white p-3 rounded-xl transition shadow-lg shadow-gold-500\/30\">\n                                <i data-lucide=\"plus\"><\/i>\n                            <\/button>\n                        <\/div>\n\n                        <ul id=\"live-list\" class=\"space-y-3\"><\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 2. \u0623\u062f\u0627\u0629 \u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u0645\u062e\u0627\u0648\u0641 -->\n            <div id=\"tab-fear\" class=\"tab-content hidden fade-in max-w-3xl mx-auto\">\n                <div class=\"text-center mb-10\">\n                    <h2 class=\"text-2xl font-black text-dark-900\">\u0646\u0645\u0648\u0630\u062c \u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u0645\u062e\u0627\u0648\u0641<\/h2>\n                    <div class=\"w-16 h-1 bg-gold-500 mx-auto mt-2 rounded-full\"><\/div>\n                    <p class=\"text-slate-500 mt-4 font-medium\">\u0645\u0627 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0628\u0642\u0627\u0621 \u0645\u0643\u0627\u0646\u0643\u061f \u062f\u0639\u0646\u0627 \u0646\u062d\u0644\u0644 \u0627\u0644\u0645\u0648\u0642\u0641.<\/p>\n                <\/div>\n\n                <div class=\"bg-white rounded-2xl shadow-xl shadow-slate-200\/50 border border-slate-100 p-8 flex flex-col min-h-[450px]\">\n                    <div class=\"flex items-center justify-between mb-8 pb-6 border-b border-slate-100\">\n                        <div class=\"flex items-center gap-3\">\n                            <span class=\"w-8 h-8 rounded-full bg-dark-900 text-gold-400 flex items-center justify-center font-bold text-sm\" id=\"fear-step-num\">1<\/span>\n                            <h2 class=\"text-xl font-bold text-dark-900\" id=\"fear-step-title\">\u0627\u0644\u062a\u0639\u0631\u064a\u0641<\/h2>\n                        <\/div>\n                        <span class=\"text-xs font-bold text-slate-400 tracking-wider\">FEAR SETTING<\/span>\n                    <\/div>\n                    \n                    <p class=\"text-slate-600 mb-4 font-medium text-lg leading-relaxed\" id=\"fear-step-desc\">&#8230;<\/p>\n                    \n                    <textarea id=\"fear-textarea\" class=\"flex-1 w-full p-5 bg-slate-50 border border-slate-200 rounded-xl outline-none resize-none text-dark-900 placeholder:text-slate-400 focus:bg-white focus:border-gold-400 transition-all text-lg\"><\/textarea>\n\n                    <div class=\"flex justify-between pt-8 mt-auto\">\n                        <button id=\"fear-prev-btn\" class=\"px-6 py-3 rounded-xl border-2 border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed font-bold transition\">\n                            \u0627\u0644\u0633\u0627\u0628\u0642\n                        <\/button>\n                        <button id=\"fear-next-btn\" class=\"px-8 py-3 rounded-xl bg-dark-900 text-white hover:bg-black flex items-center gap-3 font-bold shadow-xl shadow-dark-900\/20 transition hover:scale-[1.02]\">\n                            \u0627\u0644\u062a\u0627\u0644\u064a <i data-lucide=\"arrow-left\" class=\"text-gold-400\"><\/i>\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- 3. \u0642\u0627\u0639\u062f\u0629 5 \u062b\u0648\u0627\u0646\u064a -->\n            <div id=\"tab-five-sec\" class=\"tab-content hidden fade-in max-w-2xl mx-auto text-center py-10\">\n                \n                <!-- \u0627\u0644\u062d\u0627\u0644\u0629: \u062e\u0627\u0645\u0644 -->\n                <div id=\"fs-idle\">\n                    <div class=\"inline-block p-4 rounded-full bg-gold-100 text-gold-600 mb-8 ring-8 ring-gold-50\">\n                        <i data-lucide=\"rocket\"><\/i>\n                    <\/div>\n                    <h3 class=\"text-3xl font-black text-dark-900 mb-4\">\u0627\u0642\u0637\u0639 \u062d\u0628\u0644 \u0627\u0644\u062a\u0631\u062f\u062f<\/h3>\n                    <p class=\"text-slate-600 mb-12 text-lg leading-relaxed max-w-md mx-auto\">\n                        \u0627\u0644\u0639\u0642\u0644 \u064a\u0642\u062a\u0644 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0627\u0644\u062c\u0631\u064a\u0626\u0629 \u062e\u0644\u0627\u0644 5 \u062b\u0648\u0627\u0646\u064d.<br>\n                        \u0627\u0636\u063a\u0637 \u0627\u0644\u0632\u0631\u060c \u0648\u0627\u0628\u062f\u0623 \u0642\u0628\u0644 \u0623\u0646 \u064a\u0648\u0642\u0641\u0643 \u0639\u0642\u0644\u0643.\n                    <\/p>\n                    <button class=\"group relative inline-flex items-center justify-center px-10 py-5 text-xl font-black text-dark-900 transition-all duration-200 bg-gold-400 rounded-full focus:outline-none hover:bg-gold-500 hover:shadow-2xl hover:shadow-gold-500\/40 hover:-translate-y-1\">\n                        <span class=\"relative flex items-center gap-3\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0639\u062f <i data-lucide=\"timer\"><\/i><\/span>\n                    <\/button>\n                <\/div>\n\n                <!-- \u0627\u0644\u062d\u0627\u0644\u0629: \u0639\u062f \u062a\u0646\u0627\u0632\u0644\u064a -->\n                <div id=\"fs-counting\" class=\"hidden h-[400px] flex items-center justify-center\">\n                    <div class=\"relative\">\n                        <span id=\"countdown-display\" class=\"text-[200px] font-black text-dark-900 leading-none tabular-nums\">5<\/span>\n                        <div class=\"absolute -bottom-10 left-0 right-0 text-center text-gold-600 font-bold text-2xl animate-pulse\">\u062a\u062d\u0631\u0643 \u0627\u0644\u0622\u0646!<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u0627\u0644\u062d\u0627\u0644\u0629: \u0627\u0644\u062a\u0646\u0641\u064a\u0630 -->\n                <div id=\"fs-acting\" class=\"hidden\">\n                    <div class=\"bg-dark-900 p-10 rounded-3xl shadow-2xl shadow-slate-900\/20 mb-8 relative overflow-hidden text-white\">\n                        <div class=\"absolute top-0 left-0 w-full h-1.5 bg-slate-800\">\n                            <div class=\"h-full bg-gold-500 animate-[width_120s_linear]\" style=\"width: 100%\"><\/div>\n                        <\/div>\n                        \n                        <h2 class=\"text-4xl font-black text-gold-400 mb-2 mt-4\">\u0644\u0627 \u062a\u0641\u0643\u0631.. \u0646\u0641\u0630!<\/h2>\n                        <p class=\"text-slate-400 text-lg mb-8 font-medium\">\u0627\u0628\u062f\u0623 \u0628\u0623\u0635\u063a\u0631 \u062e\u0637\u0648\u0629 \u0645\u0645\u0643\u0646\u0629.<\/p>\n                        \n                        <div id=\"action-timer\" class=\"text-8xl font-mono text-white font-bold tracking-wider mb-8 tabular-nums\">\n                            02:00\n                        <\/div>\n                        <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800 text-gold-400 text-sm font-bold border border-slate-700\">\n                            <i data-lucide=\"clock\"><\/i> \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u062a\u064a\u0646\n                        <\/div>\n                    <\/div>\n                    <button class=\"text-slate-500 hover:text-dark-900 font-bold underline underline-offset-8 decoration-2 decoration-gold-400 transition\">\n                        \u0627\u0646\u062a\u0647\u064a\u062a \u0645\u0646 \u0627\u0644\u0645\u0647\u0645\u0629\n                    <\/button>\n                <\/div>\n            <\/div>\n\n            <!-- 4. \u0639\u062f\u0627\u062f \u0627\u0644\u0639\u0645\u0631 -->\n            <div id=\"tab-memento\" class=\"tab-content hidden fade-in max-w-4xl mx-auto\">\n                <div class=\"flex flex-col md:flex-row justify-between items-end mb-8 gap-4\">\n                    <div>\n                        <h3 class=\"text-2xl font-black text-dark-900\">\u0634\u0628\u0643\u0629 \u0627\u0644\u062d\u064a\u0627\u0629<\/h3>\n                        <p class=\"text-slate-500 mt-2 font-medium\">\u0643\u0644 \u0645\u0631\u0628\u0639 \u064a\u0645\u062b\u0644 \u0623\u0633\u0628\u0648\u0639\u0627\u064b. \u0627\u0644\u0645\u0631\u0628\u0639\u0627\u062a \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0647\u064a \u0645\u0627 \u0628\u0642\u064a \u0644\u0643.<\/p>\n                    <\/div>\n                    <div class=\"bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center gap-4\">\n                        <span class=\"text-sm font-bold text-dark-900\">\u0639\u0645\u0631\u0643 \u0627\u0644\u062d\u0627\u0644\u064a:<\/span>\n                        \n                    <\/div>\n                <\/div>\n\n                <div class=\"bg-white p-8 rounded-3xl border border-slate-200 shadow-xl shadow-slate-200\/50 mb-8\">\n                    <!-- Grid Container -->\n                    <div id=\"life-grid\" class=\"flex flex-wrap gap-[3px] justify-center\"><\/div>\n                    \n                    <div class=\"mt-8 flex items-center justify-center gap-8 text-xs font-bold text-slate-500 uppercase tracking-widest\">\n                        <div class=\"flex items-center gap-3\"><div class=\"w-4 h-4 bg-slate-200 rounded-sm\"><\/div> \u0623\u0633\u0627\u0628\u064a\u0639 \u0645\u0636\u062a<\/div>\n                        <div class=\"flex items-center gap-3\"><div class=\"w-4 h-4 bg-gold-500 rounded-sm shadow-sm shadow-gold-500\/50\"><\/div> \u0623\u0633\u0627\u0628\u064a\u0639 \u0645\u062a\u0628\u0642\u064a\u0629<\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"bg-dark-900 text-white p-8 rounded-2xl text-center shadow-lg mx-auto max-w-2xl border-b-4 border-gold-500\">\n                    <p class=\"font-light text-xl italic leading-relaxed\">&#8220;\u0623\u0646\u062a \u0644\u0627 \u062a\u0645\u0644\u0643 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u060c \u0623\u0646\u062a \u062a\u0645\u0644\u0643 \u0647\u0630\u0647 \u0627\u0644\u0644\u062d\u0638\u0629 \u0641\u0642\u0637.<br> <span class=\"text-gold-400 font-bold not-italic\">\u0627\u062c\u0639\u0644\u0647\u0627 \u0630\u0647\u0628\u064a\u0629.<\/span>&#8220;<\/p>\n                <\/div>\n            <\/div>\n\n        <\/main>\n    <\/div>\n\n    <!-- \u0643\u0648\u062f \u0627\u0644\u062c\u0627\u0641\u0627\u0633\u0643\u0631\u064a\u0628\u062a -->\n    \n        \/\/ &#8212; \u062a\u0647\u064a\u0626\u0629 \u0639\u0627\u0645\u0629 &#8212;\n        window.addEventListener(&#8216;DOMContentLoaded&#8217;, () =&gt; {\n            lucide.createIcons();\n            renderPrepList();\n            renderLiveList();\n            updateFearView();\n            renderLifeGrid();\n        });\n\n        \/\/ &#8212; Tabs System &#8212;\n        function switchTab(tabId) {\n            document.querySelectorAll(&#8216;.tab-content&#8217;).forEach(el =&gt; el.classList.add(&#8216;hidden&#8217;));\n            document.getElementById(&#8216;tab-&#8216; + tabId).classList.remove(&#8216;hidden&#8217;);\n            \n            document.querySelectorAll(&#8216;.tab-btn&#8217;).forEach(btn =&gt; {\n                btn.classList.remove(&#8216;active&#8217;);\n            });\n            \n            const activeBtn = document.querySelector(`button[onclick=&#8221;switchTab(&#8216;${tabId}&#8217;)&#8221;]`);\n            if(activeBtn) activeBtn.classList.add(&#8216;active&#8217;);\n        }\n\n        function handleEnter(e, callback) {\n            if (e.key === &#8216;Enter&#8217;) callback();\n        }\n\n        \/\/ &#8212; 1. Vertical Line Logic &#8212;\n        let prepItems = [\n            { id: 1, text: &#8220;\u0642\u0631\u0627\u0621\u0629 \u0643\u062a\u0627\u0628 \u0639\u0627\u0634\u0631 \u0639\u0646 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a&#8221; },\n            { id: 2, text: &#8220;\u062a\u0639\u062f\u064a\u0644 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0642\u0639 \u0644\u0644\u0645\u0631\u0629 \u0627\u0644\u0639\u0634\u0631\u064a\u0646&#8221; }\n        ];\n        let liveItems = [\n            { id: 1, text: &#8220;\u0625\u0631\u0633\u0627\u0644 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0644\u0639\u0645\u064a\u0644 \u0645\u062d\u062a\u0645\u0644&#8221;, completed: false },\n            { id: 2, text: &#8220;\u0646\u0634\u0631 \u0641\u064a\u062f\u064a\u0648 \u062a\u0639\u0631\u064a\u0641\u064a&#8221;, completed: false }\n        ];\n\n        function renderPrepList() {\n            const list = document.getElementById(&#8216;prep-list&#8217;);\n            list.innerHTML = prepItems.map(item =&gt; `\n                <li class=\"bg-white p-4 rounded-xl border border-slate-200 flex justify-between items-center group hover:border-slate-300 transition-all shadow-sm\">\n                    <span class=\"text-slate-600 font-medium\">${item.text}<\/span>\n                    <button class=\"text-slate-300 hover:text-red-500 transition p-1\">\n                        <i data-lucide=\"trash-2\"><\/i>\n                    <\/button>\n                <\/li>\n            `).join(&#8221;);\n            lucide.createIcons();\n        }\n\n        function renderLiveList() {\n            const list = document.getElementById(&#8216;live-list&#8217;);\n            if (liveItems.length === 0) {\n                list.innerHTML = `<div class=\"text-center py-8 text-gold-600\/70 text-sm border-2 border-dashed border-gold-200 rounded-xl bg-gold-50 font-bold\">\u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0641\u0627\u0631\u063a\u0629.<br>\u0627\u0646\u0642\u0644 \u0628\u0646\u062f\u0627\u064b \u0645\u0646 \u0627\u0644\u064a\u0645\u064a\u0646 \u0625\u0644\u0649 \u0647\u0646\u0627 \u0644\u062a\u0635\u0646\u0639 \u0641\u0631\u0642\u0627\u064b.<\/div>`;\n                return;\n            }\n            list.innerHTML = liveItems.map(item =&gt; `\n                <li class=\"p-4 rounded-xl border cursor-pointer transition-all flex items-center gap-3 group\n                    ${item.completed ? &apos;bg-gold-50 border-gold-200 opacity-75&apos; : &apos;bg-white border-slate-100 hover:border-gold-300 hover:shadow-md shadow-sm&apos;}\">\n                    <div class=\"w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0\n                        ${item.completed ? &apos;bg-gold-500 border-gold-500&apos; : &apos;border-slate-300 group-hover:border-gold-400&apos;}\">\n                        ${item.completed ? &#8216;<i data-lucide=\"check\" class=\"text-white\"><\/i>&#8216; : &#8221;}\n                    <\/div>\n                    <span class=\"font-bold ${item.completed ? &apos;line-through text-slate-400&apos; : &apos;text-dark-900&apos;}\">\n                        ${item.text}\n                    <\/span>\n                <\/li>\n            `).join(&#8221;);\n            lucide.createIcons();\n        }\n\n        function addPrepItem() {\n            const input = document.getElementById(&#8216;prep-input&#8217;);\n            const text = input.value.trim();\n            if (text) {\n                prepItems.push({ id: Date.now(), text });\n                input.value = &#8221;;\n                renderPrepList();\n            }\n        }\n\n        function addLiveItem() {\n            const input = document.getElementById(&#8216;live-input&#8217;);\n            const text = input.value.trim();\n            if (text) {\n                liveItems.push({ id: Date.now(), text, completed: false });\n                input.value = &#8221;;\n                renderLiveList();\n            }\n        }\n\n        function deletePrep(id) { prepItems = prepItems.filter(i =&gt; i.id !== id); renderPrepList(); }\n        function toggleLive(id) { liveItems = liveItems.map(i =&gt; i.id === id ? {&#8230;i, completed: !i.completed} : i); renderLiveList(); }\n\n        \/\/ &#8212; 2. Fear Setting Logic &#8212;\n        const fearSteps = [\n            { title: &#8220;\u0627\u0644\u062a\u0639\u0631\u064a\u0641 (Define)&#8221;, desc: &#8220;\u0645\u0627 \u0647\u0648 \u0623\u0633\u0648\u0623 \u0634\u064a\u0621 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u062d\u062f\u062b\u061f \u0627\u0643\u062a\u0628 \u0627\u0644\u0645\u062e\u0627\u0648\u0641 \u0628\u0635\u0631\u0627\u062d\u0629 \u0645\u0637\u0644\u0642\u0629.&#8221;, placeholder: &#8220;\u0623\u062e\u0634\u0649 \u0623\u0646&#8230;&#8221; },\n            { title: &#8220;\u0627\u0644\u0648\u0642\u0627\u064a\u0629 (Prevent)&#8221;, desc: &#8220;\u0645\u0627 \u0627\u0644\u0630\u064a \u064a\u0645\u0643\u0646 \u0641\u0639\u0644\u0647 \u0644\u0645\u0646\u0639 \u062d\u062f\u0648\u062b \u0647\u0630\u0647 \u0627\u0644\u0645\u062e\u0627\u0648\u0641\u061f&#8221;, placeholder: &#8220;\u064a\u0645\u0643\u0646\u0646\u064a \u0623\u0646&#8230;&#8221; },\n            { title: &#8220;\u0627\u0644\u0625\u0635\u0644\u0627\u062d (Repair)&#8221;, desc: &#8220;\u0625\u0630\u0627 \u062d\u062f\u062b \u0627\u0644\u0623\u0633\u0648\u0623\u060c \u0643\u064a\u0641 \u064a\u0645\u0643\u0646 \u0625\u0635\u0644\u0627\u062d \u0627\u0644\u0645\u0648\u0642\u0641\u061f&#8221;, placeholder: &#8220;\u0633\u0623\u0642\u0648\u0645 \u0628\u0640&#8230;&#8221; },\n            { title: &#8220;\u062b\u0645\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u0633 (Cost)&#8221;, desc: &#8220;\u0645\u0627 \u0647\u064a \u062a\u0643\u0644\u0641\u0629 \u0639\u062f\u0645 \u0627\u0644\u0642\u064a\u0627\u0645 \u0628\u0647\u0630\u0627 \u0627\u0644\u0641\u0639\u0644 \u0644\u0645\u062f\u0629 \u0633\u0646\u0629\u061f (\u0646\u0641\u0633\u064a\u0627\u064b\u060c \u0645\u0627\u0644\u064a\u0627\u064b)&#8221;, placeholder: &#8220;\u0633\u0623\u062e\u0633\u0631&#8230;&#8221; }\n        ];\n        let currentFearStep = 0;\n        let fearData = [&#8220;&#8221;, &#8220;&#8221;, &#8220;&#8221;, &#8220;&#8221;];\n\n        function updateFearView() {\n            const step = fearSteps[currentFearStep];\n            document.getElementById(&#8216;fear-step-title&#8217;).innerText = step.title;\n            document.getElementById(&#8216;fear-step-num&#8217;).innerText = currentFearStep + 1;\n            document.getElementById(&#8216;fear-step-desc&#8217;).innerText = step.desc;\n            const textarea = document.getElementById(&#8216;fear-textarea&#8217;);\n            textarea.value = fearData[currentFearStep];\n            textarea.placeholder = step.placeholder;\n            document.getElementById(&#8216;fear-prev-btn&#8217;).disabled = currentFearStep === 0;\n            \n            const nextBtn = document.getElementById(&#8216;fear-next-btn&#8217;);\n            if (currentFearStep === 3) {\n                nextBtn.innerHTML = `\u062a\u0645 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 <i data-lucide=\"check\" class=\"text-gold-400\"><\/i>`;\n                nextBtn.className = &#8220;px-8 py-3 rounded-xl bg-gold-500 text-white hover:bg-gold-600 flex items-center gap-3 font-bold shadow-xl shadow-gold-500\/30 transition hover:scale-[1.02]&#8221;;\n            } else {\n                nextBtn.innerHTML = `\u0627\u0644\u062a\u0627\u0644\u064a <i data-lucide=\"arrow-left\" class=\"text-gold-400\"><\/i>`;\n                nextBtn.className = &#8220;px-8 py-3 rounded-xl bg-dark-900 text-white hover:bg-black flex items-center gap-3 font-bold shadow-xl shadow-dark-900\/20 transition hover:scale-[1.02]&#8221;;\n            }\n            lucide.createIcons();\n        }\n\n        document.getElementById(&#8216;fear-textarea&#8217;).addEventListener(&#8216;input&#8217;, (e) =&gt; { fearData[currentFearStep] = e.target.value; });\n        function changeFearStep(delta) {\n            if (currentFearStep === 3 &amp;&amp; delta === 1) return alert(&#8216;\u0627\u0646\u062a\u0647\u064a\u062a! \u0631\u0627\u062c\u0639 \u0625\u062c\u0627\u0628\u062a\u0643 \u0648\u0642\u0627\u0631\u0646 \u0628\u064a\u0646 &#8220;\u0627\u0644\u0645\u062e\u0627\u0637\u0631\u0629&#8221; \u0648&#8221;\u062b\u0645\u0646 \u0627\u0644\u0628\u0642\u0627\u0621 \u0645\u0643\u0627\u0646\u0643&#8221;.&#8217;);\n            currentFearStep += delta;\n            updateFearView();\n        }\n\n        \/\/ &#8212; 3. Five Second Rule Logic &#8212;\n        let timerInterval, actionTimerInterval;\n\n        function startCountdown() {\n            document.getElementById(&#8216;fs-idle&#8217;).classList.add(&#8216;hidden&#8217;);\n            document.getElementById(&#8216;fs-counting&#8217;).classList.remove(&#8216;hidden&#8217;);\n            let count = 5;\n            const display = document.getElementById(&#8216;countdown-display&#8217;);\n            display.innerText = count;\n            timerInterval = setInterval(() =&gt; {\n                count&#8211;;\n                display.innerText = count;\n                if (count  {\n                seconds&#8211;;\n                const m = Math.floor(seconds \/ 60);\n                const s = seconds % 60;\n                timerDisplay.innerText = `${m}:${s.toString().padStart(2, &#8216;0&#8217;)}`;\n                if (seconds &lt;= 0) clearInterval(actionTimerInterval);\n            }, 1000);\n        }\n\n        function resetFiveSec() {\n            clearInterval(timerInterval); clearInterval(actionTimerInterval);\n            document.getElementById(&#039;fs-acting&#039;).classList.add(&#039;hidden&#039;);\n            document.getElementById(&#039;fs-idle&#039;).classList.remove(&#039;hidden&#039;);\n            document.getElementById(&#039;action-timer&#039;).innerText = &quot;02:00&quot;;\n        }\n\n        \/\/ &#8212; 4. Life Grid Logic &#8212;\n        function renderLifeGrid() {\n            const age = parseInt(document.getElementById(&#039;age-input&#039;).value) || 30;\n            const grid = document.getElementById(&#039;life-grid&#039;);\n            const totalWeeks = 80 * 52;\n            const livedWeeks = age * 52;\n            const displayLimit = 480; \n            const livedDots = Math.floor((livedWeeks \/ totalWeeks) * displayLimit);\n            let html = &#039;&#039;;\n            for (let i = 0; i &lt; displayLimit; i++) {\n                const isLived = i &lt; livedDots;\n                \/\/ \u0627\u0644\u0645\u0631\u0628\u0639\u0627\u062a: \u0631\u0645\u0627\u062f\u064a \u0644\u0644\u0645\u0636\u0649\u060c \u0630\u0647\u0628\u064a \u0644\u0644\u0645\u062a\u0628\u0642\u064a\n                html += `<div class=\"w-2 h-2 rounded-[1px] ${isLived ? &apos;bg-slate-200&apos; : &apos;bg-gold-500 shadow-[0_0_2px_rgba(245,158,11,0.5)]&apos;}\" title=\"${isLived ? &apos;\u0645\u0636\u0649&apos; : &apos;\u0645\u062a\u0628\u0642\u064a&apos;}\"><\/div>`;\n            }\n            grid.innerHTML = html;\n        }\n    \n\n\n<div class=\"brz-root__container\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0644\u0648\u062d\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0646\u0641\u064a\u0630\u064a\u0629 | Marketing Coaching tailwind.config = { theme: { extend: { colors: { gold: { 50: &#8216;#fffbeb&#8217;, 100: &#8216;#fef3c7&#8217;, 200: &#8216;#fde68a&#8217;, 300: &#8216;#fcd34d&#8217;, 400: &#8216;#fbbf24&#8217;, 500: &#8216;#f59e0b&#8217;, \/\/ \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0630\u0647\u0628\u064a \u0627\u0644\u0623\u0633\u0627\u0633\u064a 600: &#8216;#d97706&#8217;, 700: &#8216;#b45309&#8217;, }, dark: { 900: &#8216;#0f172a&#8217;, \/\/ \u0627\u0644\u0623\u0633\u0648\u062f 800: &#8216;#1e293b&#8217;, 400: &#8216;#94a3b8&#8217;, \/\/ \u0627\u0644\u0631\u0645\u0627\u062f\u064a } }, fontFamily: { sans: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"brizy-blank-template.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[20,19,18],"class_list":["post-1256","post","type-post","status-publish","format-standard","hentry","category-marketing-transparency-tools","tag-20","tag-19","tag-18"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/posts\/1256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/comments?post=1256"}],"version-history":[{"count":0,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/posts\/1256\/revisions"}],"wp:attachment":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/media?parent=1256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/categories?post=1256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/tags?post=1256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}