\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 \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \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=Cairo:wght@300;400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n gold: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b', \/\/ \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0630\u0647\u0628\u064a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\n 600: '#d97706',\n 700: '#b45309',\n },\n dark: {\n 900: '#0f172a', \/\/ \u0627\u0644\u0623\u0633\u0648\u062f\n 800: '#1e293b',\n 400: '#94a3b8', \/\/ \u0627\u0644\u0631\u0645\u0627\u062f\u064a\n }\n },\n fontFamily: {\n sans: ['Cairo', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n body {\n font-family: 'Cairo', 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 <\/style>\n<\/head>\n<body class=\"bg-slate-50\">\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 \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\" width=\"24\"><\/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 \n <nav class=\"flex gap-2 overflow-x-auto hide-scrollbar\">\n <button onclick=\"switchTab('line')\" 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\" width=\"18\"><\/i>\n <span>\u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644<\/span>\n <\/button>\n <button onclick=\"switchTab('fear')\" 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\" width=\"18\"><\/i>\n <span>\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062e\u0627\u0648\u0641<\/span>\n <\/button>\n <button onclick=\"switchTab('five-sec')\" 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\" width=\"18\"><\/i>\n <span>\u0642\u0627\u0639\u062f\u0629 5 \u062b\u0648\u0627\u0646\u064a<\/span>\n <\/button>\n <button onclick=\"switchTab('memento')\" 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\" width=\"18\"><\/i>\n <span>\u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0645\u0631<\/span>\n <\/button>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <main class=\"flex-1 p-4 md:p-8 bg-slate-50\/50\">\n\n \n <div id=\"tab-line\" class=\"tab-content fade-in max-w-4xl mx-auto\">\n \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\" width=\"20\"><\/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 “\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0627\u0644\u0622\u0645\u0646” (\u0627\u0644\u064a\u0633\u0627\u0631) \u0625\u0644\u0649 \u0645\u0646\u0637\u0642\u0629 “\u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629” (\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 \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\" width=\"20\"><\/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 <input type=\"text\" id=\"prep-input\" placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0623\u062f\u0648\u0627\u062a...\" \n class=\"flex-1 p-3 bg-white border border-slate-200 rounded-xl text-sm outline-none transition-all placeholder:text-slate-400\"\n onkeypress=\"handleEnter(event, addPrepItem)\">\n <button onclick=\"addPrepItem()\" class=\"bg-slate-200 hover:bg-slate-300 text-slate-600 p-3 rounded-xl transition shadow-sm\">\n <i data-lucide=\"plus\" width=\"20\"><\/i>\n <\/button>\n <\/div>\n\n <ul id=\"prep-list\" class=\"space-y-3\"><\/ul>\n <\/div>\n\n \n <div class=\"p-6 bg-white relative\">\n \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\" width=\"20\" 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 <input type=\"text\" id=\"live-input\" placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0639\u0645\u064a\u0644 \u0627\u0644\u0622\u0646...\" \n class=\"flex-1 p-3 border border-gold-200 bg-gold-50\/50 rounded-xl text-sm outline-none transition-all focus:border-gold-500\"\n onkeypress=\"handleEnter(event, addLiveItem)\">\n <button onclick=\"addLiveItem()\" 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\" width=\"20\"><\/i>\n <\/button>\n <\/div>\n\n <ul id=\"live-list\" class=\"space-y-3\"><\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \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\">…<\/p>\n \n <textarea id=\"fear-textarea\"\n 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\"\n placeholder=\"\u0627\u0643\u062a\u0628 \u0647\u0646\u0627...\"><\/textarea>\n\n <div class=\"flex justify-between pt-8 mt-auto\">\n <button id=\"fear-prev-btn\" onclick=\"changeFearStep(-1)\" 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\" onclick=\"changeFearStep(1)\" 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\" width=\"20\" class=\"text-gold-400\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"tab-five-sec\" class=\"tab-content hidden fade-in max-w-2xl mx-auto text-center py-10\">\n \n \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\" width=\"48\"><\/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 onclick=\"startCountdown()\" \n 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 \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 \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\" width=\"14\"><\/i> \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u062a\u064a\u0646\n <\/div>\n <\/div>\n <button onclick=\"resetFiveSec()\" 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 \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 <input type=\"number\" id=\"age-input\" value=\"30\" min=\"1\" max=\"90\" onchange=\"renderLifeGrid()\"\n class=\"w-20 p-2 bg-slate-100 border-none rounded-lg font-bold text-center outline-none focus:ring-2 focus:ring-gold-400 text-lg\">\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 \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\">“\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>“<\/p>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n \n <script>\n \/\/ --- \u062a\u0647\u064a\u0626\u0629 \u0639\u0627\u0645\u0629 ---\n window.addEventListener('DOMContentLoaded', () => {\n lucide.createIcons();\n renderPrepList();\n renderLiveList();\n updateFearView();\n renderLifeGrid();\n });\n\n \/\/ --- Tabs System ---\n function switchTab(tabId) {\n document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));\n document.getElementById('tab-' + tabId).classList.remove('hidden');\n \n document.querySelectorAll('.tab-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n const activeBtn = document.querySelector(`button[onclick=\"switchTab('${tabId}')\"]`);\n if(activeBtn) activeBtn.classList.add('active');\n }\n\n function handleEnter(e, callback) {\n if (e.key === 'Enter') callback();\n }\n\n \/\/ --- 1. Vertical Line Logic ---\n let prepItems = [\n { id: 1, text: \"\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\" },\n { id: 2, text: \"\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\" }\n ];\n let liveItems = [\n { id: 1, text: \"\u0625\u0631\u0633\u0627\u0644 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0644\u0639\u0645\u064a\u0644 \u0645\u062d\u062a\u0645\u0644\", completed: false },\n { id: 2, text: \"\u0646\u0634\u0631 \u0641\u064a\u062f\u064a\u0648 \u062a\u0639\u0631\u064a\u0641\u064a\", completed: false }\n ];\n\n function renderPrepList() {\n const list = document.getElementById('prep-list');\n list.innerHTML = prepItems.map(item => `\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 onclick=\"deletePrep(${item.id})\" class=\"text-slate-300 hover:text-red-500 transition p-1\">\n <i data-lucide=\"trash-2\" width=\"18\"><\/i>\n <\/button>\n <\/li>\n `).join('');\n lucide.createIcons();\n }\n\n function renderLiveList() {\n const list = document.getElementById('live-list');\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 => `\n <li onclick=\"toggleLive(${item.id})\" \n class=\"p-4 rounded-xl border cursor-pointer transition-all flex items-center gap-3 group\n ${item.completed ? 'bg-gold-50 border-gold-200 opacity-75' : 'bg-white border-slate-100 hover:border-gold-300 hover:shadow-md shadow-sm'}\">\n <div class=\"w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0\n ${item.completed ? 'bg-gold-500 border-gold-500' : 'border-slate-300 group-hover:border-gold-400'}\">\n ${item.completed ? '<i data-lucide=\"check\" width=\"14\" class=\"text-white\"><\/i>' : ''}\n <\/div>\n <span class=\"font-bold ${item.completed ? 'line-through text-slate-400' : 'text-dark-900'}\">\n ${item.text}\n <\/span>\n <\/li>\n `).join('');\n lucide.createIcons();\n }\n\n function addPrepItem() {\n const input = document.getElementById('prep-input');\n const text = input.value.trim();\n if (text) {\n prepItems.push({ id: Date.now(), text });\n input.value = '';\n renderPrepList();\n }\n }\n\n function addLiveItem() {\n const input = document.getElementById('live-input');\n const text = input.value.trim();\n if (text) {\n liveItems.push({ id: Date.now(), text, completed: false });\n input.value = '';\n renderLiveList();\n }\n }\n\n function deletePrep(id) { prepItems = prepItems.filter(i => i.id !== id); renderPrepList(); }\n function toggleLive(id) { liveItems = liveItems.map(i => i.id === id ? {...i, completed: !i.completed} : i); renderLiveList(); }\n\n \/\/ --- 2. Fear Setting Logic ---\n const fearSteps = [\n { title: \"\u0627\u0644\u062a\u0639\u0631\u064a\u0641 (Define)\", desc: \"\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.\", placeholder: \"\u0623\u062e\u0634\u0649 \u0623\u0646...\" },\n { title: \"\u0627\u0644\u0648\u0642\u0627\u064a\u0629 (Prevent)\", desc: \"\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\", placeholder: \"\u064a\u0645\u0643\u0646\u0646\u064a \u0623\u0646...\" },\n { title: \"\u0627\u0644\u0625\u0635\u0644\u0627\u062d (Repair)\", desc: \"\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\", placeholder: \"\u0633\u0623\u0642\u0648\u0645 \u0628\u0640...\" },\n { title: \"\u062b\u0645\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u0633 (Cost)\", desc: \"\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)\", placeholder: \"\u0633\u0623\u062e\u0633\u0631...\" }\n ];\n let currentFearStep = 0;\n let fearData = [\"\", \"\", \"\", \"\"];\n\n function updateFearView() {\n const step = fearSteps[currentFearStep];\n document.getElementById('fear-step-title').innerText = step.title;\n document.getElementById('fear-step-num').innerText = currentFearStep + 1;\n document.getElementById('fear-step-desc').innerText = step.desc;\n const textarea = document.getElementById('fear-textarea');\n textarea.value = fearData[currentFearStep];\n textarea.placeholder = step.placeholder;\n document.getElementById('fear-prev-btn').disabled = currentFearStep === 0;\n \n const nextBtn = document.getElementById('fear-next-btn');\n if (currentFearStep === 3) {\n nextBtn.innerHTML = `\u062a\u0645 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 <i data-lucide=\"check\" width=\"20\" class=\"text-gold-400\"><\/i>`;\n nextBtn.className = \"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]\";\n } else {\n nextBtn.innerHTML = `\u0627\u0644\u062a\u0627\u0644\u064a <i data-lucide=\"arrow-left\" width=\"20\" class=\"text-gold-400\"><\/i>`;\n nextBtn.className = \"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 }\n lucide.createIcons();\n }\n\n document.getElementById('fear-textarea').addEventListener('input', (e) => { fearData[currentFearStep] = e.target.value; });\n function changeFearStep(delta) {\n if (currentFearStep === 3 && delta === 1) return alert('\u0627\u0646\u062a\u0647\u064a\u062a! \u0631\u0627\u062c\u0639 \u0625\u062c\u0627\u0628\u062a\u0643 \u0648\u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \"\u0627\u0644\u0645\u062e\u0627\u0637\u0631\u0629\" \u0648\"\u062b\u0645\u0646 \u0627\u0644\u0628\u0642\u0627\u0621 \u0645\u0643\u0627\u0646\u0643\".');\n currentFearStep += delta;\n updateFearView();\n }\n\n \/\/ --- 3. Five Second Rule Logic ---\n let timerInterval, actionTimerInterval;\n\n function startCountdown() {\n document.getElementById('fs-idle').classList.add('hidden');\n document.getElementById('fs-counting').classList.remove('hidden');\n let count = 5;\n const display = document.getElementById('countdown-display');\n display.innerText = count;\n timerInterval = setInterval(() => {\n count--;\n display.innerText = count;\n if (count <= 0) { clearInterval(timerInterval); startActionPhase(); }\n }, 1000);\n }\n\n function startActionPhase() {\n document.getElementById('fs-counting').classList.add('hidden');\n document.getElementById('fs-acting').classList.remove('hidden');\n let seconds = 120;\n const timerDisplay = document.getElementById('action-timer');\n actionTimerInterval = setInterval(() => {\n seconds--;\n const m = Math.floor(seconds \/ 60);\n const s = seconds % 60;\n timerDisplay.innerText = `${m}:${s.toString().padStart(2, '0')}`;\n if (seconds <= 0) clearInterval(actionTimerInterval);\n }, 1000);\n }\n\n function resetFiveSec() {\n clearInterval(timerInterval); clearInterval(actionTimerInterval);\n document.getElementById('fs-acting').classList.add('hidden');\n document.getElementById('fs-idle').classList.remove('hidden');\n document.getElementById('action-timer').innerText = \"02:00\";\n }\n\n \/\/ --- 4. Life Grid Logic ---\n function renderLifeGrid() {\n const age = parseInt(document.getElementById('age-input').value) || 30;\n const grid = document.getElementById('life-grid');\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 = '';\n for (let i = 0; i < displayLimit; i++) {\n const isLived = i < 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 ? 'bg-slate-200' : 'bg-gold-500 shadow-[0_0_2px_rgba(245,158,11,0.5)]'}\" title=\"${isLived ? '\u0645\u0636\u0649' : '\u0645\u062a\u0628\u0642\u064a'}\"><\/div>`;\n }\n grid.innerHTML = html;\n }\n <\/script>\n<\/body>\n<\/html>\n","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 \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630 Marketing Coaching \u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644 \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062e\u0627\u0648\u0641 \u0642\u0627\u0639\u062f\u0629 5 \u062b\u0648\u0627\u0646\u064a \u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0645\u0631 \u062a\u0645\u0631\u064a\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644 \u0627\u0646\u0642\u0644 \u0627\u0644\u0645\u0647\u0627\u0645 \u0645\u0646 \u0645\u0646\u0637\u0642\u0629 “\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0627\u0644\u0622\u0645\u0646” (\u0627\u0644\u064a\u0633\u0627\u0631) \u0625\u0644\u0649 \u0645\u0646\u0637\u0642\u0629 “\u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629” (\u0627\u0644\u064a\u0645\u064a\u0646). \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. \u0627\u0644\u062a\u062d\u0636\u064a\u0631 (\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0631\u0627\u062d\u0629) \u0627\u0644\u062d\u064a\u0627\u0629 (\u0627\u0644\u0645\u062e\u0627\u0637\u0631\u0629 \u0648\u0627\u0644\u0641\u0639\u0644) \u0646\u0645\u0648\u0630\u062c \u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u0645\u062e\u0627\u0648\u0641 \u0645\u0627 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0628\u0642\u0627\u0621 \u0645\u0643\u0627\u0646\u0643\u061f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"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":[],"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}]}}

{"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-02-03T04:18:04","modified_gmt":"2026-02-03T04:18:04","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 \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 \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \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=Cairo:wght@300;400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n gold: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b', \/\/ \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0630\u0647\u0628\u064a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\n 600: '#d97706',\n 700: '#b45309',\n },\n dark: {\n 900: '#0f172a', \/\/ \u0627\u0644\u0623\u0633\u0648\u062f\n 800: '#1e293b',\n 400: '#94a3b8', \/\/ \u0627\u0644\u0631\u0645\u0627\u062f\u064a\n }\n },\n fontFamily: {\n sans: ['Cairo', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n body {\n font-family: 'Cairo', 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 <\/style>\n<\/head>\n<body class=\"bg-slate-50\">\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 \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\" width=\"24\"><\/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 \n <nav class=\"flex gap-2 overflow-x-auto hide-scrollbar\">\n <button onclick=\"switchTab('line')\" 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\" width=\"18\"><\/i>\n <span>\u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644<\/span>\n <\/button>\n <button onclick=\"switchTab('fear')\" 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\" width=\"18\"><\/i>\n <span>\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062e\u0627\u0648\u0641<\/span>\n <\/button>\n <button onclick=\"switchTab('five-sec')\" 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\" width=\"18\"><\/i>\n <span>\u0642\u0627\u0639\u062f\u0629 5 \u062b\u0648\u0627\u0646\u064a<\/span>\n <\/button>\n <button onclick=\"switchTab('memento')\" 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\" width=\"18\"><\/i>\n <span>\u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0645\u0631<\/span>\n <\/button>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <main class=\"flex-1 p-4 md:p-8 bg-slate-50\/50\">\n\n \n <div id=\"tab-line\" class=\"tab-content fade-in max-w-4xl mx-auto\">\n \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\" width=\"20\"><\/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 “\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0627\u0644\u0622\u0645\u0646” (\u0627\u0644\u064a\u0633\u0627\u0631) \u0625\u0644\u0649 \u0645\u0646\u0637\u0642\u0629 “\u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629” (\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 \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\" width=\"20\"><\/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 <input type=\"text\" id=\"prep-input\" placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0623\u062f\u0648\u0627\u062a...\" \n class=\"flex-1 p-3 bg-white border border-slate-200 rounded-xl text-sm outline-none transition-all placeholder:text-slate-400\"\n onkeypress=\"handleEnter(event, addPrepItem)\">\n <button onclick=\"addPrepItem()\" class=\"bg-slate-200 hover:bg-slate-300 text-slate-600 p-3 rounded-xl transition shadow-sm\">\n <i data-lucide=\"plus\" width=\"20\"><\/i>\n <\/button>\n <\/div>\n\n <ul id=\"prep-list\" class=\"space-y-3\"><\/ul>\n <\/div>\n\n \n <div class=\"p-6 bg-white relative\">\n \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\" width=\"20\" 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 <input type=\"text\" id=\"live-input\" placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0639\u0645\u064a\u0644 \u0627\u0644\u0622\u0646...\" \n class=\"flex-1 p-3 border border-gold-200 bg-gold-50\/50 rounded-xl text-sm outline-none transition-all focus:border-gold-500\"\n onkeypress=\"handleEnter(event, addLiveItem)\">\n <button onclick=\"addLiveItem()\" 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\" width=\"20\"><\/i>\n <\/button>\n <\/div>\n\n <ul id=\"live-list\" class=\"space-y-3\"><\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n \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\">…<\/p>\n \n <textarea id=\"fear-textarea\"\n 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\"\n placeholder=\"\u0627\u0643\u062a\u0628 \u0647\u0646\u0627...\"><\/textarea>\n\n <div class=\"flex justify-between pt-8 mt-auto\">\n <button id=\"fear-prev-btn\" onclick=\"changeFearStep(-1)\" 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\" onclick=\"changeFearStep(1)\" 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\" width=\"20\" class=\"text-gold-400\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"tab-five-sec\" class=\"tab-content hidden fade-in max-w-2xl mx-auto text-center py-10\">\n \n \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\" width=\"48\"><\/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 onclick=\"startCountdown()\" \n 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 \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 \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\" width=\"14\"><\/i> \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u062a\u064a\u0646\n <\/div>\n <\/div>\n <button onclick=\"resetFiveSec()\" 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 \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 <input type=\"number\" id=\"age-input\" value=\"30\" min=\"1\" max=\"90\" onchange=\"renderLifeGrid()\"\n class=\"w-20 p-2 bg-slate-100 border-none rounded-lg font-bold text-center outline-none focus:ring-2 focus:ring-gold-400 text-lg\">\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 \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\">“\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>“<\/p>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n \n <script>\n \/\/ --- \u062a\u0647\u064a\u0626\u0629 \u0639\u0627\u0645\u0629 ---\n window.addEventListener('DOMContentLoaded', () => {\n lucide.createIcons();\n renderPrepList();\n renderLiveList();\n updateFearView();\n renderLifeGrid();\n });\n\n \/\/ --- Tabs System ---\n function switchTab(tabId) {\n document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));\n document.getElementById('tab-' + tabId).classList.remove('hidden');\n \n document.querySelectorAll('.tab-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n \n const activeBtn = document.querySelector(`button[onclick=\"switchTab('${tabId}')\"]`);\n if(activeBtn) activeBtn.classList.add('active');\n }\n\n function handleEnter(e, callback) {\n if (e.key === 'Enter') callback();\n }\n\n \/\/ --- 1. Vertical Line Logic ---\n let prepItems = [\n { id: 1, text: \"\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\" },\n { id: 2, text: \"\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\" }\n ];\n let liveItems = [\n { id: 1, text: \"\u0625\u0631\u0633\u0627\u0644 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0644\u0639\u0645\u064a\u0644 \u0645\u062d\u062a\u0645\u0644\", completed: false },\n { id: 2, text: \"\u0646\u0634\u0631 \u0641\u064a\u062f\u064a\u0648 \u062a\u0639\u0631\u064a\u0641\u064a\", completed: false }\n ];\n\n function renderPrepList() {\n const list = document.getElementById('prep-list');\n list.innerHTML = prepItems.map(item => `\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 onclick=\"deletePrep(${item.id})\" class=\"text-slate-300 hover:text-red-500 transition p-1\">\n <i data-lucide=\"trash-2\" width=\"18\"><\/i>\n <\/button>\n <\/li>\n `).join('');\n lucide.createIcons();\n }\n\n function renderLiveList() {\n const list = document.getElementById('live-list');\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 => `\n <li onclick=\"toggleLive(${item.id})\" \n class=\"p-4 rounded-xl border cursor-pointer transition-all flex items-center gap-3 group\n ${item.completed ? 'bg-gold-50 border-gold-200 opacity-75' : 'bg-white border-slate-100 hover:border-gold-300 hover:shadow-md shadow-sm'}\">\n <div class=\"w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0\n ${item.completed ? 'bg-gold-500 border-gold-500' : 'border-slate-300 group-hover:border-gold-400'}\">\n ${item.completed ? '<i data-lucide=\"check\" width=\"14\" class=\"text-white\"><\/i>' : ''}\n <\/div>\n <span class=\"font-bold ${item.completed ? 'line-through text-slate-400' : 'text-dark-900'}\">\n ${item.text}\n <\/span>\n <\/li>\n `).join('');\n lucide.createIcons();\n }\n\n function addPrepItem() {\n const input = document.getElementById('prep-input');\n const text = input.value.trim();\n if (text) {\n prepItems.push({ id: Date.now(), text });\n input.value = '';\n renderPrepList();\n }\n }\n\n function addLiveItem() {\n const input = document.getElementById('live-input');\n const text = input.value.trim();\n if (text) {\n liveItems.push({ id: Date.now(), text, completed: false });\n input.value = '';\n renderLiveList();\n }\n }\n\n function deletePrep(id) { prepItems = prepItems.filter(i => i.id !== id); renderPrepList(); }\n function toggleLive(id) { liveItems = liveItems.map(i => i.id === id ? {...i, completed: !i.completed} : i); renderLiveList(); }\n\n \/\/ --- 2. Fear Setting Logic ---\n const fearSteps = [\n { title: \"\u0627\u0644\u062a\u0639\u0631\u064a\u0641 (Define)\", desc: \"\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.\", placeholder: \"\u0623\u062e\u0634\u0649 \u0623\u0646...\" },\n { title: \"\u0627\u0644\u0648\u0642\u0627\u064a\u0629 (Prevent)\", desc: \"\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\", placeholder: \"\u064a\u0645\u0643\u0646\u0646\u064a \u0623\u0646...\" },\n { title: \"\u0627\u0644\u0625\u0635\u0644\u0627\u062d (Repair)\", desc: \"\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\", placeholder: \"\u0633\u0623\u0642\u0648\u0645 \u0628\u0640...\" },\n { title: \"\u062b\u0645\u0646 \u0627\u0644\u062a\u0642\u0627\u0639\u0633 (Cost)\", desc: \"\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)\", placeholder: \"\u0633\u0623\u062e\u0633\u0631...\" }\n ];\n let currentFearStep = 0;\n let fearData = [\"\", \"\", \"\", \"\"];\n\n function updateFearView() {\n const step = fearSteps[currentFearStep];\n document.getElementById('fear-step-title').innerText = step.title;\n document.getElementById('fear-step-num').innerText = currentFearStep + 1;\n document.getElementById('fear-step-desc').innerText = step.desc;\n const textarea = document.getElementById('fear-textarea');\n textarea.value = fearData[currentFearStep];\n textarea.placeholder = step.placeholder;\n document.getElementById('fear-prev-btn').disabled = currentFearStep === 0;\n \n const nextBtn = document.getElementById('fear-next-btn');\n if (currentFearStep === 3) {\n nextBtn.innerHTML = `\u062a\u0645 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 <i data-lucide=\"check\" width=\"20\" class=\"text-gold-400\"><\/i>`;\n nextBtn.className = \"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]\";\n } else {\n nextBtn.innerHTML = `\u0627\u0644\u062a\u0627\u0644\u064a <i data-lucide=\"arrow-left\" width=\"20\" class=\"text-gold-400\"><\/i>`;\n nextBtn.className = \"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 }\n lucide.createIcons();\n }\n\n document.getElementById('fear-textarea').addEventListener('input', (e) => { fearData[currentFearStep] = e.target.value; });\n function changeFearStep(delta) {\n if (currentFearStep === 3 && delta === 1) return alert('\u0627\u0646\u062a\u0647\u064a\u062a! \u0631\u0627\u062c\u0639 \u0625\u062c\u0627\u0628\u062a\u0643 \u0648\u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \"\u0627\u0644\u0645\u062e\u0627\u0637\u0631\u0629\" \u0648\"\u062b\u0645\u0646 \u0627\u0644\u0628\u0642\u0627\u0621 \u0645\u0643\u0627\u0646\u0643\".');\n currentFearStep += delta;\n updateFearView();\n }\n\n \/\/ --- 3. Five Second Rule Logic ---\n let timerInterval, actionTimerInterval;\n\n function startCountdown() {\n document.getElementById('fs-idle').classList.add('hidden');\n document.getElementById('fs-counting').classList.remove('hidden');\n let count = 5;\n const display = document.getElementById('countdown-display');\n display.innerText = count;\n timerInterval = setInterval(() => {\n count--;\n display.innerText = count;\n if (count <= 0) { clearInterval(timerInterval); startActionPhase(); }\n }, 1000);\n }\n\n function startActionPhase() {\n document.getElementById('fs-counting').classList.add('hidden');\n document.getElementById('fs-acting').classList.remove('hidden');\n let seconds = 120;\n const timerDisplay = document.getElementById('action-timer');\n actionTimerInterval = setInterval(() => {\n seconds--;\n const m = Math.floor(seconds \/ 60);\n const s = seconds % 60;\n timerDisplay.innerText = `${m}:${s.toString().padStart(2, '0')}`;\n if (seconds <= 0) clearInterval(actionTimerInterval);\n }, 1000);\n }\n\n function resetFiveSec() {\n clearInterval(timerInterval); clearInterval(actionTimerInterval);\n document.getElementById('fs-acting').classList.add('hidden');\n document.getElementById('fs-idle').classList.remove('hidden');\n document.getElementById('action-timer').innerText = \"02:00\";\n }\n\n \/\/ --- 4. Life Grid Logic ---\n function renderLifeGrid() {\n const age = parseInt(document.getElementById('age-input').value) || 30;\n const grid = document.getElementById('life-grid');\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 = '';\n for (let i = 0; i < displayLimit; i++) {\n const isLived = i < 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 ? 'bg-slate-200' : 'bg-gold-500 shadow-[0_0_2px_rgba(245,158,11,0.5)]'}\" title=\"${isLived ? '\u0645\u0636\u0649' : '\u0645\u062a\u0628\u0642\u064a'}\"><\/div>`;\n }\n grid.innerHTML = html;\n }\n <\/script>\n<\/body>\n<\/html>\n","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 \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u0646\u0641\u064a\u0630 Marketing Coaching \u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644 \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062e\u0627\u0648\u0641 \u0642\u0627\u0639\u062f\u0629 5 \u062b\u0648\u0627\u0646\u064a \u0634\u0631\u064a\u0637 \u0627\u0644\u0639\u0645\u0631 \u062a\u0645\u0631\u064a\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0641\u0627\u0635\u0644 \u0627\u0646\u0642\u0644 \u0627\u0644\u0645\u0647\u0627\u0645 \u0645\u0646 \u0645\u0646\u0637\u0642\u0629 “\u0627\u0644\u062a\u062d\u0636\u064a\u0631 \u0627\u0644\u0622\u0645\u0646” (\u0627\u0644\u064a\u0633\u0627\u0631) \u0625\u0644\u0649 \u0645\u0646\u0637\u0642\u0629 “\u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629” (\u0627\u0644\u064a\u0645\u064a\u0646). \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. \u0627\u0644\u062a\u062d\u0636\u064a\u0631 (\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0631\u0627\u062d\u0629) \u0627\u0644\u062d\u064a\u0627\u0629 (\u0627\u0644\u0645\u062e\u0627\u0637\u0631\u0629 \u0648\u0627\u0644\u0641\u0639\u0644) \u0646\u0645\u0648\u0630\u062c \u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u0645\u062e\u0627\u0648\u0641 \u0645\u0627 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0628\u0642\u0627\u0621 \u0645\u0643\u0627\u0646\u0643\u061f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"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":[],"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}]}}