\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648 | \u0645\u0633\u0627\u0639\u062f \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644 \u0644\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Tajawal', 'sans-serif'],\n },\n colors: {\n primary: '#065f46', \/\/ Emerald 800\n secondary: '#d1fae5', \/\/ Emerald 100\n accent: '#f59e0b', \/\/ Amber 500\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Custom UI Tweaks *\/\n body { background-color: #f3f4f6; }\n .glass-panel { background: white; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }\n .sidebar-link { transition: all 0.2s; border-right: 3px solid transparent; }\n .sidebar-link:hover, .sidebar-link.active { background-color: #ecfdf5; color: #065f46; border-right-color: #065f46; }\n .tool-card { transition: transform 0.2s; }\n .tool-card:hover { transform: translateY(-3px); }\n \n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: #f1f1f1; }\n ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }\n \n \/* Login Animation *\/\n .fade-in { animation: fadeIn 0.3s ease-in-out; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n \n \/* RTL inputs fix *\/\n input[type=\"email\"], input[type=\"password\"] { direction: ltr; text-align: right; }\n \n \/* Loading Overlay *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #065f46;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n <\/style>\n<\/head>\n<body class=\"text-gray-800 h-screen flex flex-col overflow-hidden\">\n\n \n \n \n <div id=\"view-landing\" class=\"h-full overflow-y-auto bg-white flex flex-col\">\n \n <header class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fas fa-chart-line text-3xl text-primary\"><\/i>\n <span class=\"text-2xl font-extrabold text-gray-900\">\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648<\/span>\n <\/div>\n <div>\n <button onclick=\"router.navigate('login')\" class=\"text-gray-600 font-bold hover:text-primary ml-4\">\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644<\/button>\n <button onclick=\"router.navigate('register')\" class=\"bg-primary text-white px-6 py-2 rounded-full font-bold hover:bg-green-800 transition shadow-lg\">\u0627\u0628\u062f\u0623 \u0645\u062c\u0627\u0646\u0627\u064b<\/button>\n <\/div>\n <\/header>\n\n \n <section class=\"container mx-auto px-6 py-16 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight\">\n \u0623\u062f\u0627\u062a\u0643 \u0627\u0644\u0630\u0643\u064a\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 <span class=\"text-primary\">\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644<\/span><br>\u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\n <\/h1>\n <p class=\"text-xl text-gray-600 mb-10 max-w-2xl mx-auto\">\n \u0648\u0641\u0651\u0631 \u0633\u0627\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u0639\u0645\u0644 \u0645\u0639 \u0623\u062f\u0648\u0627\u062a \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0644\u0647\u062c\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u0629\u060c \u0648\u0645\u0648\u0644\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629. \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f.\n <\/p>\n <button onclick=\"router.navigate('register')\" class=\"bg-accent text-white text-xl px-10 py-4 rounded-lg font-bold hover:bg-yellow-600 transition shadow-xl transform hover:scale-105\">\n \u062c\u0631\u0628 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0622\u0646\n <\/button>\n <\/section>\n\n \n <section class=\"bg-gray-50 py-16\">\n <div class=\"container mx-auto px-6\">\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-8 rounded-2xl shadow-sm text-center\">\n <div class=\"w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\"><i class=\"fas fa-pen-nib\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u0643\u0627\u062a\u0628 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0633\u0639\u0648\u062f\u064a<\/h3>\n <p class=\"text-gray-500\">\u062a\u0648\u0644\u064a\u062f \u0639\u0646\u0627\u0648\u064a\u0646 \u0648\u0646\u0635\u0648\u0635 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u062c\u0630\u0627\u0628\u0629 \u0628\u0627\u0644\u0644\u0647\u062c\u0629 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0633\u0639\u0648\u062f\u064a.<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-sm text-center\">\n <div class=\"w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\"><i class=\"fas fa-calculator\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/h3>\n <p class=\"text-gray-500\">\u0627\u0639\u0631\u0641 \u0643\u0645 \u062a\u062d\u062a\u0627\u062c \u0623\u0646 \u062a\u0635\u0631\u0641 \u0628\u0627\u0644\u0636\u0628\u0637 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641 \u0645\u0628\u064a\u0639\u0627\u062a\u0643 \u0628\u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a.<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-sm text-center\">\n <div class=\"w-16 h-16 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\"><i class=\"fas fa-filter\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/h3>\n <p class=\"text-gray-500\">\u0623\u062f\u0627\u0629 \u062f\u0645\u062c \u0648\u062a\u063a\u0644\u064a\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 (Broad, Phrase, Exact) \u0628\u0636\u063a\u0637\u0629 \u0632\u0631.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n \n <div id=\"view-auth\" class=\"hidden h-full flex items-center justify-center bg-gray-100 p-4\">\n <div class=\"bg-white p-8 rounded-2xl shadow-xl w-full max-w-md fade-in\">\n <div class=\"text-center mb-8\">\n <i class=\"fas fa-chart-line text-4xl text-primary mb-2\"><\/i>\n <h2 id=\"auth-title\" class=\"text-2xl font-bold text-gray-800\">\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644<\/h2>\n <p id=\"auth-subtitle\" class=\"text-gray-500 text-sm\">\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0639\u0648\u062f\u062a\u0643 \u0644\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648<\/p>\n <\/div>\n \n <form onsubmit=\"handleAuth(event)\" class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\n <input type=\"email\" required class=\"w-full border border-gray-300 p-3 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none\" placeholder=\"name@company.com\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631<\/label>\n <input type=\"password\" required class=\"w-full border border-gray-300 p-3 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none\" placeholder=\"********\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-primary text-white font-bold py-3 rounded-lg hover:bg-green-800 transition\">\u062f\u062e\u0648\u0644<\/button>\n <\/form>\n\n <div class=\"mt-6 text-center text-sm\">\n <p id=\"auth-toggle-text\" class=\"text-gray-600\">\n \u0644\u064a\u0633 \u0644\u062f\u064a\u0643 \u062d\u0633\u0627\u0628\u061f \n <button onclick=\"toggleAuthMode()\" class=\"text-primary font-bold hover:underline\">\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628\u0627\u064b \u062c\u062f\u064a\u062f\u0627\u064b<\/button>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n <div id=\"view-app\" class=\"hidden flex h-full\">\n \n \n <aside class=\"w-64 bg-white border-l border-gray-200 flex-shrink-0 flex flex-col z-20 hidden md:flex\">\n <div class=\"p-6 border-b border-gray-100 flex items-center gap-2\">\n <i class=\"fas fa-chart-line text-2xl text-primary\"><\/i>\n <span class=\"font-extrabold text-xl tracking-tight\">\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648<\/span>\n <\/div>\n \n <div class=\"p-4\">\n <div class=\"bg-gradient-to-br from-primary to-green-600 rounded-xl p-4 text-white mb-6\">\n <div class=\"flex justify-between items-start mb-2\">\n <span class=\"text-xs font-bold bg-white\/20 px-2 py-0.5 rounded\">PRO<\/span>\n <i class=\"fas fa-crown text-yellow-300\"><\/i>\n <\/div>\n <p class=\"text-sm opacity-90\">\u0627\u0634\u062a\u0631\u0627\u0643\u0643 \u0646\u0634\u0637<\/p>\n <p class=\"font-bold text-lg\">\u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/p>\n <\/div>\n\n <nav class=\"space-y-1\">\n <button onclick=\"app.nav('dashboard')\" id=\"nav-dashboard\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-home w-5\"><\/i> \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645\n <\/button>\n \n <div class=\"pt-4 pb-2 text-xs font-bold text-gray-400 px-4\">\u0627\u0644\u0623\u062f\u0648\u0627\u062a<\/div>\n \n <button onclick=\"app.nav('tool-headlines')\" id=\"nav-tool-headlines\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-pen-fancy w-5\"><\/i> \u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646\n <\/button>\n <button onclick=\"app.nav('tool-keywords')\" id=\"nav-tool-keywords\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-tags w-5\"><\/i> \u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a\n <\/button>\n <button onclick=\"app.nav('tool-budget')\" id=\"nav-tool-budget\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-calculator w-5\"><\/i> \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629\n <\/button>\n <button onclick=\"app.nav('tool-utm')\" id=\"nav-tool-utm\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-link w-5\"><\/i> \u0635\u0627\u0646\u0639 \u0627\u0644\u0631\u0648\u0627\u0628\u0637 (UTM)\n <\/button>\n\n <div class=\"pt-4 pb-2 text-xs font-bold text-gray-400 px-4\">\u0627\u0644\u0645\u0639\u0631\u0641\u0629<\/div>\n\n <button onclick=\"app.nav('academy')\" id=\"nav-academy\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-graduation-cap w-5\"><\/i> \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629\n <\/button>\n <\/nav>\n <\/div>\n \n <div class=\"mt-auto p-4 border-t border-gray-100\">\n <button onclick=\"handleLogout()\" class=\"w-full text-right px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition flex items-center gap-2\">\n <i class=\"fas fa-sign-out-alt\"><\/i> \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062e\u0631\u0648\u062c\n <\/button>\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 overflow-y-auto bg-gray-50 p-4 md:p-8 relative\">\n \n \n <button onclick=\"toggleMobileMenu()\" class=\"md:hidden absolute top-4 left-4 text-gray-600 text-2xl z-30\">\n <i class=\"fas fa-bars\"><\/i>\n <\/button>\n\n \n <div id=\"view-dashboard\" class=\"app-view max-w-5xl mx-auto fade-in\">\n <header class=\"mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-800\">\u0645\u0631\u062d\u0628\u0627\u064b\u060c <span id=\"user-name\">\u0639\u0628\u062f\u0627\u0644\u0644\u0647<\/span> \ud83d\udc4b<\/h1>\n <p class=\"text-gray-500\">\u0625\u0644\u064a\u0643 \u0645\u0644\u062e\u0635 \u0623\u062f\u0627\u0626\u0643 \u0648\u0623\u062f\u0648\u0627\u062a\u0643 \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0627\u0644\u064a\u0648\u0645.<\/p>\n <\/header>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-8\">\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">\u0627\u0644\u0635\u0631\u0641 \u0647\u0630\u0627 \u0627\u0644\u0634\u0647\u0631<\/div>\n <div class=\"text-2xl font-bold text-gray-800\">4,250 <span class=\"text-xs font-normal\">\u0631.\u0633<\/span><\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">\u0627\u0644\u0646\u0642\u0631\u0627\u062a<\/div>\n <div class=\"text-2xl font-bold text-gray-800\">1,840<\/div>\n <div class=\"text-xs text-green-500 font-bold\">12% <i class=\"fas fa-arrow-up\"><\/i><\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">\u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/div>\n <div class=\"text-2xl font-bold text-gray-800\">3.2%<\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">ROAS<\/div>\n <div class=\"text-2xl font-bold text-primary\">4.5x<\/div>\n <\/div>\n <\/div>\n\n <h2 class=\"text-lg font-bold text-gray-700 mb-4\">\u0627\u0644\u0648\u0635\u0648\u0644 \u0627\u0644\u0633\u0631\u064a\u0639 \u0644\u0644\u0623\u062f\u0648\u0627\u062a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <div onclick=\"app.nav('tool-headlines')\" class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-200 cursor-pointer tool-card group\">\n <div class=\"w-12 h-12 bg-green-50 text-green-600 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-600 group-hover:text-white transition\">\n <i class=\"fas fa-pen-fancy text-xl\"><\/i>\n <\/div>\n <h3 class=\"font-bold text-gray-800\">\u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/h3>\n <p class=\"text-sm text-gray-500 mt-2\">\u0623\u0646\u0634\u0626 10 \u0639\u0646\u0627\u0648\u064a\u0646 \u062c\u0630\u0627\u0628\u0629 \u0628\u0644\u0647\u062c\u0629 \u0645\u062d\u0644\u064a\u0629 \u0628\u0636\u063a\u0637\u0629 \u0632\u0631.<\/p>\n <\/div>\n \n <div onclick=\"app.nav('tool-budget')\" class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-200 cursor-pointer tool-card group\">\n <div class=\"w-12 h-12 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-600 group-hover:text-white transition\">\n <i class=\"fas fa-calculator text-xl\"><\/i>\n <\/div>\n <h3 class=\"font-bold text-gray-800\">\u0645\u062e\u0637\u0637 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/h3>\n <p class=\"text-sm text-gray-500 mt-2\">\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0647\u062f\u0641 \u0645\u0628\u064a\u0639\u0627\u062a\u0643.<\/p>\n <\/div>\n\n <div onclick=\"app.nav('tool-keywords')\" class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-200 cursor-pointer tool-card group\">\n <div class=\"w-12 h-12 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-600 group-hover:text-white transition\">\n <i class=\"fas fa-tags text-xl\"><\/i>\n <\/div>\n <h3 class=\"font-bold text-gray-800\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/h3>\n <p class=\"text-sm text-gray-500 mt-2\">\u062f\u0645\u062c \u0648\u062a\u063a\u0644\u064a\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 \u0628\u0633\u0631\u0639\u0629.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tool-headlines\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629 (Copy Generator)<\/h1>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6\">\n <div class=\"grid md:grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c \/ \u0627\u0644\u062e\u062f\u0645\u0629<\/label>\n <input type=\"text\" id=\"hl-product\" class=\"w-full border p-2 rounded\" placeholder=\"\u0645\u062b\u0627\u0644: \u0639\u0637\u0631 \u0627\u0644\u0639\u0648\u062f \u0627\u0644\u0645\u0644\u0643\u064a\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0645\u064a\u0632\u0629 \u062a\u0646\u0627\u0641\u0633\u064a\u0629 \u0631\u0626\u064a\u0633\u064a\u0629<\/label>\n <input type=\"text\" id=\"hl-benefit\" class=\"w-full border p-2 rounded\" placeholder=\"\u0645\u062b\u0627\u0644: \u062b\u0628\u0627\u062a 24 \u0633\u0627\u0639\u0629\">\n <\/div>\n <\/div>\n <div class=\"flex gap-4 mb-4\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0646\u0648\u0639 \u0627\u0644\u0639\u0631\u0636<\/label>\n <select id=\"hl-offer\" class=\"w-full border p-2 rounded\">\n <option value=\"discount\">\u062e\u0635\u0645 \/ \u062a\u062e\u0641\u064a\u0636<\/option>\n <option value=\"urgent\">\u0627\u0633\u062a\u0639\u062c\u0627\u0644 (\u0643\u0645\u064a\u0629 \u0645\u062d\u062f\u0648\u062f\u0629)<\/option>\n <option value=\"shipping\">\u0634\u062d\u0646 \/ \u062a\u0648\u0635\u064a\u0644<\/option>\n <option value=\"quality\">\u062c\u0648\u062f\u0629 \/ \u0641\u062e\u0627\u0645\u0629<\/option>\n <\/select>\n <\/div>\n <div class=\"flex items-end\">\n <button onclick=\"tools.generateHeadlines()\" class=\"bg-primary text-white px-6 py-2 rounded font-bold hover:bg-green-800 transition h-10 w-full\">\u062a\u0648\u0644\u064a\u062f \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"hl-results\" class=\"space-y-3 hidden\">\n <h3 class=\"font-bold text-gray-700\">\u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0645\u0642\u062a\u0631\u062d\u0629 (\u0627\u0636\u063a\u0637 \u0644\u0644\u0646\u0633\u062e):<\/h3>\n <div class=\"grid gap-3\" id=\"hl-list\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tool-budget\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 (Budget Planner)<\/h1>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 md:col-span-1 space-y-4\">\n <h3 class=\"font-bold border-b pb-2\">\u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a<\/h3>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0647\u062f\u0641 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a (\u0631\u064a\u0627\u0644)<\/label>\n <input type=\"number\" id=\"bc-revenue\" class=\"w-full border p-2 rounded\" value=\"50000\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0645\u062a\u0648\u0633\u0637 \u0642\u064a\u0645\u0629 \u0627\u0644\u0637\u0644\u0628 (AOV)<\/label>\n <input type=\"number\" id=\"bc-aov\" class=\"w-full border p-2 rounded\" value=\"300\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0645\u062a\u0648\u0642\u0639 (%)<\/label>\n <input type=\"number\" id=\"bc-conv\" class=\"w-full border p-2 rounded\" value=\"2.5\" step=\"0.1\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0645\u062a\u0648\u0633\u0637 \u0633\u0639\u0631 \u0627\u0644\u0646\u0642\u0631\u0629 (CPC)<\/label>\n <input type=\"number\" id=\"bc-cpc\" class=\"w-full border p-2 rounded\" value=\"3.5\" step=\"0.1\">\n <\/div>\n <button onclick=\"tools.calcBudget()\" class=\"w-full bg-blue-600 text-white py-2 rounded font-bold hover:bg-blue-700\">\u0627\u062d\u0633\u0628<\/button>\n <\/div>\n\n \n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 md:col-span-2\">\n <h3 class=\"font-bold border-b pb-2 mb-4\">\u0627\u0644\u062e\u0637\u0629 \u0627\u0644\u0645\u0642\u062a\u0631\u062d\u0629<\/h3>\n <div class=\"grid grid-cols-2 gap-4 mb-6\">\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u0634\u0647\u0631\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/div>\n <div class=\"text-2xl font-bold text-blue-600\" id=\"bc-total-cost\">0 \u0631.\u0633<\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0627\u0644\u0639\u0627\u0626\u062f \u0639\u0644\u0649 \u0627\u0644\u0625\u0646\u0641\u0627\u0642 (ROAS)<\/div>\n <div class=\"text-2xl font-bold text-green-600\" id=\"bc-roas\">0x<\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0639\u062f\u062f \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0645\u062a\u0648\u0642\u0639<\/div>\n <div class=\"text-xl font-bold text-gray-800\" id=\"bc-orders\">0<\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0627\u0644\u0646\u0642\u0631\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/div>\n <div class=\"text-xl font-bold text-gray-800\" id=\"bc-clicks\">0<\/div>\n <\/div>\n <\/div>\n <div class=\"text-sm text-gray-600 bg-yellow-50 p-3 rounded border border-yellow-100\">\n <i class=\"fas fa-lightbulb text-yellow-500 ml-1\"><\/i>\n <strong>\u0646\u0635\u064a\u062d\u0629:<\/strong> \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0640 ROAS \u0645\u0646\u062e\u0641\u0636\u0627\u064b\u060c \u062d\u0627\u0648\u0644 \u062a\u062d\u0633\u064a\u0646 \u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0641\u064a \u0645\u0648\u0642\u0639\u0643 \u0623\u0648 \u062e\u0641\u0636 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0642\u0631\u0629 \u0639\u0628\u0631 \u0631\u0641\u0639 \u0646\u0642\u0627\u0637 \u0627\u0644\u062c\u0648\u062f\u0629.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tool-keywords\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 (Keyword Mixer)<\/h1>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6\">\n <div class=\"grid grid-cols-3 gap-4 mb-4\">\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0639\u0645\u0648\u062f A (\u0643\u0644\u0645\u0627\u062a \u0634\u0631\u0627\u0621)<\/label>\n <textarea id=\"kw-a\" class=\"w-full border p-2 rounded h-32 text-sm\" placeholder=\"\u0634\u0631\u0627\u0621 \u0627\u0641\u0636\u0644 \u0639\u0631\u0648\u0636 \u0633\u0639\u0631\"><\/textarea>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0639\u0645\u0648\u062f B (\u0627\u0644\u0645\u0646\u062a\u062c)<\/label>\n <textarea id=\"kw-b\" class=\"w-full border p-2 rounded h-32 text-sm\" placeholder=\"\u0639\u0637\u0631 \u0639\u0648\u062f \u0645\u0633\u0643 \u062f\u0647\u0646 \u0639\u0648\u062f\"><\/textarea>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0639\u0645\u0648\u062f C (\u0627\u0644\u0645\u0643\u0627\u0646\/\u0627\u0644\u0635\u0641\u0629 – \u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\n <textarea id=\"kw-c\" class=\"w-full border p-2 rounded h-32 text-sm\" placeholder=\"\u0627\u0644\u0631\u064a\u0627\u0636 \u0627\u0635\u0644\u064a \u0637\u0628\u064a\u0639\u064a\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"flex flex-wrap gap-4 mb-4 items-center bg-gray-50 p-3 rounded border border-gray-200\">\n <span class=\"text-sm font-bold text-gray-600\">\u0646\u0648\u0639 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629:<\/span>\n <label class=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"match-broad\" class=\"rounded text-primary focus:ring-primary\"> \u0648\u0627\u0633\u0639\u0629 (Broad)\n <\/label>\n <label class=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"match-phrase\" class=\"rounded text-primary focus:ring-primary\" checked> \u0639\u0628\u0627\u0631\u0629 “Phrase”\n <\/label>\n <label class=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"match-exact\" class=\"rounded text-primary focus:ring-primary\"> \u062a\u0627\u0645\u0629 [Exact]\n <\/label>\n <button onclick=\"tools.mixKeywords()\" class=\"mr-auto bg-purple-600 text-white px-6 py-2 rounded font-bold hover:bg-purple-700\">\u062f\u0645\u062c \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/button>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0646\u062a\u064a\u062c\u0629 (<span id=\"kw-count\">0<\/span> \u0643\u0644\u0645\u0629)<\/label>\n <textarea id=\"kw-result\" class=\"w-full border p-2 rounded h-40 bg-gray-50 font-mono text-left\" dir=\"ltr\" readonly><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"view-tool-utm\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u0635\u0627\u0646\u0639 \u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062a\u062a\u0628\u0639 (UTM Builder)<\/h1>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6\">\n <div class=\"grid md:grid-cols-2 gap-4 mb-4\">\n <div class=\"md:col-span-2\">\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639 (Website URL)<\/label>\n <input type=\"url\" id=\"utm-url\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"https:\/\/www.example.com\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0645\u0635\u062f\u0631 (Campaign Source)<\/label>\n <input type=\"text\" id=\"utm-source\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"google\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0648\u0633\u064a\u0637 (Campaign Medium)<\/label>\n <input type=\"text\" id=\"utm-medium\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"cpc\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0633\u0645 \u0627\u0644\u062d\u0645\u0644\u0629 (Campaign Name)<\/label>\n <input type=\"text\" id=\"utm-campaign\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"summer_sale\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0645\u062d\u062a\u0648\u0649 (Content) – \u0627\u062e\u062a\u064a\u0627\u0631\u064a<\/label>\n <input type=\"text\" id=\"utm-content\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"banner_v1\">\n <\/div>\n <\/div>\n <button onclick=\"tools.buildUTM()\" class=\"bg-primary text-white px-6 py-2 rounded font-bold hover:bg-green-800 transition\">\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0631\u0627\u0628\u0637<\/button>\n \n <div class=\"mt-4 hidden\" id=\"utm-result-box\">\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0631\u0627\u0628\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a:<\/label>\n <div class=\"flex gap-2\">\n <input type=\"text\" id=\"utm-result\" class=\"w-full border p-2 rounded bg-gray-50 text-left ltr\" dir=\"ltr\" readonly>\n <button onclick=\"tools.copyUTM()\" class=\"bg-gray-200 px-4 rounded hover:bg-gray-300\">\u0646\u0633\u062e<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-academy\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629<\/h1>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-blue-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">1. \u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u0645\u0632\u0627\u062f<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0643\u064a\u0641 \u064a\u0639\u0645\u0644 Ad Rank \u0648\u0644\u0645\u0627\u0630\u0627 \u0644\u0627 \u064a\u0641\u0648\u0632 \u062f\u0627\u0626\u0645\u0627\u064b \u0645\u0646 \u064a\u062f\u0641\u0639 \u0623\u0643\u062b\u0631.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-green-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">2. \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 Broad, Phrase, Exact \u0648\u0645\u062a\u0649 \u062a\u0633\u062a\u062e\u062f\u0645 \u0643\u0644 \u0646\u0648\u0639.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-yellow-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">3. \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u0642 (Shopping)<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0627\u0644\u062f\u0644\u064a\u0644 \u0627\u0644\u0643\u0627\u0645\u0644 \u0644\u0625\u0639\u062f\u0627\u062f Google Merchant Center \u0641\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-purple-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">4. \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0639\u0631\u0648\u0636 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0645\u062a\u0649 \u062a\u0633\u062a\u062e\u062f\u0645 Maximize Clicks \u0645\u0642\u0627\u0628\u0644 Target ROAS.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n \n <div id=\"mobile-menu\" class=\"hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-40\" onclick=\"toggleMobileMenu()\">\n <div class=\"bg-white w-64 h-full p-4 overflow-y-auto absolute right-0\" onclick=\"event.stopPropagation()\">\n <h2 class=\"font-bold text-lg mb-6\">\u0627\u0644\u0642\u0627\u0626\u0645\u0629<\/h2>\n <nav class=\"space-y-2\">\n <button onclick=\"app.nav('dashboard'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645<\/button>\n <button onclick=\"app.nav('tool-headlines'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646<\/button>\n <button onclick=\"app.nav('tool-budget'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/button>\n <button onclick=\"app.nav('tool-keywords'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/button>\n <button onclick=\"handleLogout()\" class=\"w-full text-right p-3 rounded text-red-600\">\u062e\u0631\u0648\u062c<\/button>\n <\/nav>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- ROUTING & AUTH LOGIC ---\n \n const router = {\n navigate: (viewId) => {\n \/\/ Hide all main containers\n ['view-landing', 'view-auth', 'view-app'].forEach(id => {\n document.getElementById(id).classList.add('hidden');\n document.getElementById(id).classList.remove('flex'); \/\/ specific fix\n });\n\n if (viewId === 'login' || viewId === 'register') {\n document.getElementById('view-auth').classList.remove('hidden');\n document.getElementById('view-auth').classList.add('flex');\n document.getElementById('auth-title').innerText = viewId === 'login' ? '\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644' : '\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u062c\u062f\u064a\u062f';\n document.getElementById('auth-subtitle').innerText = viewId === 'login' ? '\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0639\u0648\u062f\u062a\u0643' : '\u0627\u0628\u062f\u0623 \u062a\u062c\u0631\u0628\u062a\u0643 \u0627\u0644\u0645\u062c\u0627\u0646\u064a\u0629 \u0627\u0644\u064a\u0648\u0645';\n } else if (viewId === 'app') {\n document.getElementById('view-app').classList.remove('hidden');\n document.getElementById('view-app').classList.add('flex');\n app.nav('dashboard'); \/\/ Default to dashboard\n } else {\n document.getElementById('view-landing').classList.remove('hidden');\n document.getElementById('view-landing').classList.add('flex');\n }\n }\n };\n\n let authMode = 'login';\n \n function toggleAuthMode() {\n authMode = authMode === 'login' ? 'register' : 'login';\n router.navigate(authMode);\n }\n\n function handleAuth(e) {\n e.preventDefault();\n \/\/ Simulate API Call\n const btn = e.target.querySelector('button');\n const originalText = btn.innerText;\n btn.innerHTML = '<div class=\"loader mx-auto border-t-white\"><\/div>';\n \n setTimeout(() => {\n localStorage.setItem('mo3len_user', JSON.stringify({ name: '\u0639\u0628\u062f\u0627\u0644\u0644\u0647', plan: 'pro' }));\n router.navigate('app');\n btn.innerText = originalText;\n }, 1000);\n }\n\n function handleLogout() {\n localStorage.removeItem('mo3len_user');\n router.navigate('landing');\n }\n\n \/\/ --- APP NAVIGATION ---\n \n const app = {\n nav: (viewId) => {\n \/\/ Hide all inner app views\n document.querySelectorAll('.app-view').forEach(el => el.classList.add('hidden'));\n document.getElementById('view-' + viewId).classList.remove('hidden');\n \n \/\/ Update Sidebar Active State\n document.querySelectorAll('.sidebar-link').forEach(el => el.classList.remove('active', 'bg-green-50', 'text-primary', 'border-primary'));\n const activeLink = document.getElementById('nav-' + viewId);\n if(activeLink) activeLink.classList.add('active');\n }\n };\n\n function toggleMobileMenu() {\n document.getElementById('mobile-menu').classList.toggle('hidden');\n }\n\n \/\/ --- TOOLS LOGIC ---\n\n const tools = {\n \n \/\/ 1. Headline Generator\n generateHeadlines: () => {\n const product = document.getElementById('hl-product').value || \"\u0627\u0644\u0645\u0646\u062a\u062c\";\n const benefit = document.getElementById('hl-benefit').value || \"\u0623\u0641\u0636\u0644 \u062c\u0648\u062f\u0629\";\n const type = document.getElementById('hl-offer').value;\n \n let templates = [];\n \n if (type === 'discount') {\n templates = [\n `\u062e\u0635\u0645 \u062e\u0627\u0635 \u0639\u0644\u0649 ${product} - \u0644\u0641\u062a\u0631\u0629 \u0645\u062d\u062f\u0648\u062f\u0629`,\n `\u0623\u0642\u0648\u0649 \u0639\u0631\u0648\u0636 ${product} \u0641\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629`,\n `\u0648\u0641\u0631 \u062d\u062a\u0649 50% \u0639\u0644\u0649 ${product} - \u0627\u0637\u0644\u0628 \u0627\u0644\u0622\u0646`,\n `${product} \u0628\u0623\u0641\u0636\u0644 \u0633\u0639\u0631 \u0641\u064a \u0627\u0644\u0631\u064a\u0627\u0636`,\n `\u0644\u0627 \u064a\u0641\u0648\u062a\u0643 \u0639\u0631\u0636 ${product} - \u0627\u0644\u0643\u0645\u064a\u0629 \u0645\u062d\u062f\u0648\u062f\u0629`\n ];\n } else if (type === 'urgent') {\n templates = [\n `${product} - \u0628\u0627\u0642\u064a 3 \u0642\u0637\u0639 \u0641\u0642\u0637!`,\n `\u0627\u0637\u0644\u0628 ${product} \u0642\u0628\u0644 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u0643\u0645\u064a\u0629`,\n `\u0641\u0631\u0635\u0629 \u0623\u062e\u064a\u0631\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 ${product} \u0645\u0639 ${benefit}`,\n `${product} \u0648\u0635\u0644 \u062d\u062f\u064a\u062b\u0627\u064b - \u0627\u0637\u0644\u0628 \u0642\u0628\u0644 \u0627\u0644\u062c\u0645\u064a\u0639`\n ];\n } else if (type === 'shipping') {\n templates = [\n `${product} - \u062a\u0648\u0635\u064a\u0644 \u0645\u062c\u0627\u0646\u064a \u0644\u0628\u0627\u0628 \u0628\u064a\u062a\u0643`,\n `${product} \u0645\u0639 ${benefit} - \u0634\u062d\u0646 \u0633\u0631\u064a\u0639 \u0644\u0644\u0631\u064a\u0627\u0636`,\n `\u0627\u0637\u0644\u0628 ${product} \u0648\u0627\u0644\u062f\u0641\u0639 \u0639\u0646\u062f \u0627\u0644\u0627\u0633\u062a\u0644\u0627\u0645`,\n `${product} \u0623\u0635\u0644\u064a 100% - \u062a\u0648\u0635\u064a\u0644 \u0633\u0631\u064a\u0639`\n ];\n } else {\n templates = [\n `${product} - ${benefit} \u0628\u0636\u0645\u0627\u0646 \u0630\u0647\u0628\u064a`,\n `\u062c\u0631\u0628 \u0641\u062e\u0627\u0645\u0629 ${product} - ${benefit}`,\n `\u0627\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0623\u0648\u0644 \u0641\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629: ${product}`,\n `\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631 ${product}\u061f \u0627\u0643\u062a\u0634\u0641 ${benefit}`\n ];\n }\n \n const resultList = document.getElementById('hl-list');\n resultList.innerHTML = '';\n templates.forEach(text => {\n const div = document.createElement('div');\n div.className = \"bg-gray-50 p-3 rounded border border-gray-200 cursor-pointer hover:bg-green-50 hover:border-green-300 transition flex justify-between items-center\";\n div.innerHTML = `<span>${text}<\/span> <i class=\"far fa-copy text-gray-400\"><\/i>`;\n div.onclick = () => {\n navigator.clipboard.writeText(text);\n div.classList.add('bg-green-100');\n setTimeout(() => div.classList.remove('bg-green-100'), 200);\n };\n resultList.appendChild(div);\n });\n document.getElementById('hl-results').classList.remove('hidden');\n },\n\n \/\/ 2. Budget Calculator\n calcBudget: () => {\n const revenue = parseFloat(document.getElementById('bc-revenue').value);\n const aov = parseFloat(document.getElementById('bc-aov').value);\n const convRate = parseFloat(document.getElementById('bc-conv').value) \/ 100;\n const cpc = parseFloat(document.getElementById('bc-cpc').value);\n \n if(!revenue || !aov || !convRate || !cpc) return;\n \n \/\/ Logic\n const ordersNeeded = Math.ceil(revenue \/ aov);\n const clicksNeeded = Math.ceil(ordersNeeded \/ convRate);\n const totalCost = clicksNeeded * cpc;\n const roas = (revenue \/ totalCost).toFixed(2);\n \n \/\/ Update UI\n document.getElementById('bc-total-cost').innerText = totalCost.toLocaleString() + \" \u0631.\u0633\";\n document.getElementById('bc-orders').innerText = ordersNeeded;\n document.getElementById('bc-clicks').innerText = clicksNeeded.toLocaleString();\n document.getElementById('bc-roas').innerText = roas + \"x\";\n },\n\n \/\/ 3. Keyword Mixer\n mixKeywords: () => {\n const colA = document.getElementById('kw-a').value.split('\\n').filter(x => x.trim());\n const colB = document.getElementById('kw-b').value.split('\\n').filter(x => x.trim());\n const colC = document.getElementById('kw-c').value.split('\\n').filter(x => x.trim());\n \n let results = [];\n \n const isBroad = document.getElementById('match-broad').checked;\n const isPhrase = document.getElementById('match-phrase').checked;\n const isExact = document.getElementById('match-exact').checked;\n \n colA.forEach(a => {\n colB.forEach(b => {\n let base = `${a.trim()} ${b.trim()}`;\n \n \/\/ If Col C exists, create versions with and without it\n let phrases = [base];\n if (colC.length > 0) {\n colC.forEach(c => {\n phrases.push(`${base} ${c.trim()}`);\n });\n }\n \n phrases.forEach(p => {\n if(isBroad) results.push(p);\n if(isPhrase) results.push(`\"${p}\"`);\n if(isExact) results.push(`[${p}]`);\n });\n });\n });\n \n document.getElementById('kw-result').value = results.join('\\n');\n document.getElementById('kw-count').innerText = results.length;\n },\n \n \/\/ 4. UTM Builder\n buildUTM: () => {\n const url = document.getElementById('utm-url').value;\n const source = document.getElementById('utm-source').value;\n const medium = document.getElementById('utm-medium').value;\n const campaign = document.getElementById('utm-campaign').value;\n const content = document.getElementById('utm-content').value;\n \n if (!url) return alert(\"\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639\");\n \n let finalUrl = new URL(url);\n if(source) finalUrl.searchParams.set('utm_source', source);\n if(medium) finalUrl.searchParams.set('utm_medium', medium);\n if(campaign) finalUrl.searchParams.set('utm_campaign', campaign);\n if(content) finalUrl.searchParams.set('utm_content', content);\n \n document.getElementById('utm-result').value = finalUrl.toString();\n document.getElementById('utm-result-box').classList.remove('hidden');\n },\n \n copyUTM: () => {\n const copyText = document.getElementById(\"utm-result\");\n copyText.select();\n document.execCommand(\"copy\");\n }\n };\n\n \/\/ --- INIT ---\n window.addEventListener('load', () => {\n const user = JSON.parse(localStorage.getItem('mo3len_user'));\n if (user) {\n document.getElementById('user-name').innerText = user.name;\n router.navigate('app');\n } else {\n router.navigate('landing');\n }\n });\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648 | \u0645\u0633\u0627\u0639\u062f \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644 \u0644\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0627\u0628\u062f\u0623 \u0645\u062c\u0627\u0646\u0627\u064b \u0623\u062f\u0627\u062a\u0643 \u0627\u0644\u0630\u0643\u064a\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644\u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u0648\u0641\u0651\u0631 \u0633\u0627\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u0639\u0645\u0644 \u0645\u0639 \u0623\u062f\u0648\u0627\u062a \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0644\u0647\u062c\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u0629\u060c \u0648\u0645\u0648\u0644\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629. \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f. \u062c\u0631\u0628 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0622\u0646 \u0643\u0627\u062a\u0628 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0633\u0639\u0648\u062f\u064a \u062a\u0648\u0644\u064a\u062f \u0639\u0646\u0627\u0648\u064a\u0646 \u0648\u0646\u0635\u0648\u0635 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u062c\u0630\u0627\u0628\u0629 \u0628\u0627\u0644\u0644\u0647\u062c\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"brizy-blank-template.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1016","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/1016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/types\/page"}],"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=1016"}],"version-history":[{"count":0,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/1016\/revisions"}],"wp:attachment":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/media?parent=1016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1016,"date":"2026-01-20T16:42:03","date_gmt":"2026-01-20T16:42:03","guid":{"rendered":"https:\/\/marketing-coaching.uk\/?page_id=1016"},"modified":"2026-01-20T18:55:42","modified_gmt":"2026-01-20T18:55:42","slug":"mo3len-pro","status":"publish","type":"page","link":"https:\/\/marketing-coaching.uk\/en\/mo3len-pro\/","title":{"rendered":"Mo3len-Pro"},"content":{"rendered":"\n\n\n\n \n \n \u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648 | \u0645\u0633\u0627\u0639\u062f \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644 \u0644\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Tajawal', 'sans-serif'],\n },\n colors: {\n primary: '#065f46', \/\/ Emerald 800\n secondary: '#d1fae5', \/\/ Emerald 100\n accent: '#f59e0b', \/\/ Amber 500\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Custom UI Tweaks *\/\n body { background-color: #f3f4f6; }\n .glass-panel { background: white; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }\n .sidebar-link { transition: all 0.2s; border-right: 3px solid transparent; }\n .sidebar-link:hover, .sidebar-link.active { background-color: #ecfdf5; color: #065f46; border-right-color: #065f46; }\n .tool-card { transition: transform 0.2s; }\n .tool-card:hover { transform: translateY(-3px); }\n \n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: #f1f1f1; }\n ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }\n \n \/* Login Animation *\/\n .fade-in { animation: fadeIn 0.3s ease-in-out; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n \n \/* RTL inputs fix *\/\n input[type=\"email\"], input[type=\"password\"] { direction: ltr; text-align: right; }\n \n \/* Loading Overlay *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #065f46;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n <\/style>\n<\/head>\n<body class=\"text-gray-800 h-screen flex flex-col overflow-hidden\">\n\n \n \n \n <div id=\"view-landing\" class=\"h-full overflow-y-auto bg-white flex flex-col\">\n \n <header class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <div class=\"flex items-center gap-2\">\n <i class=\"fas fa-chart-line text-3xl text-primary\"><\/i>\n <span class=\"text-2xl font-extrabold text-gray-900\">\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648<\/span>\n <\/div>\n <div>\n <button onclick=\"router.navigate('login')\" class=\"text-gray-600 font-bold hover:text-primary ml-4\">\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644<\/button>\n <button onclick=\"router.navigate('register')\" class=\"bg-primary text-white px-6 py-2 rounded-full font-bold hover:bg-green-800 transition shadow-lg\">\u0627\u0628\u062f\u0623 \u0645\u062c\u0627\u0646\u0627\u064b<\/button>\n <\/div>\n <\/header>\n\n \n <section class=\"container mx-auto px-6 py-16 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight\">\n \u0623\u062f\u0627\u062a\u0643 \u0627\u0644\u0630\u0643\u064a\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 <span class=\"text-primary\">\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644<\/span><br>\u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\n <\/h1>\n <p class=\"text-xl text-gray-600 mb-10 max-w-2xl mx-auto\">\n \u0648\u0641\u0651\u0631 \u0633\u0627\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u0639\u0645\u0644 \u0645\u0639 \u0623\u062f\u0648\u0627\u062a \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0644\u0647\u062c\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u0629\u060c \u0648\u0645\u0648\u0644\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629. \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f.\n <\/p>\n <button onclick=\"router.navigate('register')\" class=\"bg-accent text-white text-xl px-10 py-4 rounded-lg font-bold hover:bg-yellow-600 transition shadow-xl transform hover:scale-105\">\n \u062c\u0631\u0628 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0622\u0646\n <\/button>\n <\/section>\n\n \n <section class=\"bg-gray-50 py-16\">\n <div class=\"container mx-auto px-6\">\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"bg-white p-8 rounded-2xl shadow-sm text-center\">\n <div class=\"w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\"><i class=\"fas fa-pen-nib\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u0643\u0627\u062a\u0628 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0633\u0639\u0648\u062f\u064a<\/h3>\n <p class=\"text-gray-500\">\u062a\u0648\u0644\u064a\u062f \u0639\u0646\u0627\u0648\u064a\u0646 \u0648\u0646\u0635\u0648\u0635 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u062c\u0630\u0627\u0628\u0629 \u0628\u0627\u0644\u0644\u0647\u062c\u0629 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0633\u0639\u0648\u062f\u064a.<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-sm text-center\">\n <div class=\"w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\"><i class=\"fas fa-calculator\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/h3>\n <p class=\"text-gray-500\">\u0627\u0639\u0631\u0641 \u0643\u0645 \u062a\u062d\u062a\u0627\u062c \u0623\u0646 \u062a\u0635\u0631\u0641 \u0628\u0627\u0644\u0636\u0628\u0637 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641 \u0645\u0628\u064a\u0639\u0627\u062a\u0643 \u0628\u0627\u0644\u0631\u064a\u0627\u0644 \u0627\u0644\u0633\u0639\u0648\u062f\u064a.<\/p>\n <\/div>\n <div class=\"bg-white p-8 rounded-2xl shadow-sm text-center\">\n <div class=\"w-16 h-16 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\"><i class=\"fas fa-filter\"><\/i><\/div>\n <h3 class=\"text-xl font-bold mb-2\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/h3>\n <p class=\"text-gray-500\">\u0623\u062f\u0627\u0629 \u062f\u0645\u062c \u0648\u062a\u063a\u0644\u064a\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 (Broad, Phrase, Exact) \u0628\u0636\u063a\u0637\u0629 \u0632\u0631.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n \n <div id=\"view-auth\" class=\"hidden h-full flex items-center justify-center bg-gray-100 p-4\">\n <div class=\"bg-white p-8 rounded-2xl shadow-xl w-full max-w-md fade-in\">\n <div class=\"text-center mb-8\">\n <i class=\"fas fa-chart-line text-4xl text-primary mb-2\"><\/i>\n <h2 id=\"auth-title\" class=\"text-2xl font-bold text-gray-800\">\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644<\/h2>\n <p id=\"auth-subtitle\" class=\"text-gray-500 text-sm\">\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0639\u0648\u062f\u062a\u0643 \u0644\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648<\/p>\n <\/div>\n \n <form onsubmit=\"handleAuth(event)\" class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\n <input type=\"email\" required class=\"w-full border border-gray-300 p-3 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none\" placeholder=\"name@company.com\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631<\/label>\n <input type=\"password\" required class=\"w-full border border-gray-300 p-3 rounded-lg focus:ring-2 focus:ring-primary focus:outline-none\" placeholder=\"********\">\n <\/div>\n <button type=\"submit\" class=\"w-full bg-primary text-white font-bold py-3 rounded-lg hover:bg-green-800 transition\">\u062f\u062e\u0648\u0644<\/button>\n <\/form>\n\n <div class=\"mt-6 text-center text-sm\">\n <p id=\"auth-toggle-text\" class=\"text-gray-600\">\n \u0644\u064a\u0633 \u0644\u062f\u064a\u0643 \u062d\u0633\u0627\u0628\u061f \n <button onclick=\"toggleAuthMode()\" class=\"text-primary font-bold hover:underline\">\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628\u0627\u064b \u062c\u062f\u064a\u062f\u0627\u064b<\/button>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n <div id=\"view-app\" class=\"hidden flex h-full\">\n \n \n <aside class=\"w-64 bg-white border-l border-gray-200 flex-shrink-0 flex flex-col z-20 hidden md:flex\">\n <div class=\"p-6 border-b border-gray-100 flex items-center gap-2\">\n <i class=\"fas fa-chart-line text-2xl text-primary\"><\/i>\n <span class=\"font-extrabold text-xl tracking-tight\">\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648<\/span>\n <\/div>\n \n <div class=\"p-4\">\n <div class=\"bg-gradient-to-br from-primary to-green-600 rounded-xl p-4 text-white mb-6\">\n <div class=\"flex justify-between items-start mb-2\">\n <span class=\"text-xs font-bold bg-white\/20 px-2 py-0.5 rounded\">PRO<\/span>\n <i class=\"fas fa-crown text-yellow-300\"><\/i>\n <\/div>\n <p class=\"text-sm opacity-90\">\u0627\u0634\u062a\u0631\u0627\u0643\u0643 \u0646\u0634\u0637<\/p>\n <p class=\"font-bold text-lg\">\u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/p>\n <\/div>\n\n <nav class=\"space-y-1\">\n <button onclick=\"app.nav('dashboard')\" id=\"nav-dashboard\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-home w-5\"><\/i> \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645\n <\/button>\n \n <div class=\"pt-4 pb-2 text-xs font-bold text-gray-400 px-4\">\u0627\u0644\u0623\u062f\u0648\u0627\u062a<\/div>\n \n <button onclick=\"app.nav('tool-headlines')\" id=\"nav-tool-headlines\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-pen-fancy w-5\"><\/i> \u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646\n <\/button>\n <button onclick=\"app.nav('tool-keywords')\" id=\"nav-tool-keywords\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-tags w-5\"><\/i> \u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a\n <\/button>\n <button onclick=\"app.nav('tool-budget')\" id=\"nav-tool-budget\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-calculator w-5\"><\/i> \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629\n <\/button>\n <button onclick=\"app.nav('tool-utm')\" id=\"nav-tool-utm\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-link w-5\"><\/i> \u0635\u0627\u0646\u0639 \u0627\u0644\u0631\u0648\u0627\u0628\u0637 (UTM)\n <\/button>\n\n <div class=\"pt-4 pb-2 text-xs font-bold text-gray-400 px-4\">\u0627\u0644\u0645\u0639\u0631\u0641\u0629<\/div>\n\n <button onclick=\"app.nav('academy')\" id=\"nav-academy\" class=\"sidebar-link w-full text-right px-4 py-3 rounded-lg text-gray-600 font-medium flex items-center gap-3\">\n <i class=\"fas fa-graduation-cap w-5\"><\/i> \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629\n <\/button>\n <\/nav>\n <\/div>\n \n <div class=\"mt-auto p-4 border-t border-gray-100\">\n <button onclick=\"handleLogout()\" class=\"w-full text-right px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition flex items-center gap-2\">\n <i class=\"fas fa-sign-out-alt\"><\/i> \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062e\u0631\u0648\u062c\n <\/button>\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 overflow-y-auto bg-gray-50 p-4 md:p-8 relative\">\n \n \n <button onclick=\"toggleMobileMenu()\" class=\"md:hidden absolute top-4 left-4 text-gray-600 text-2xl z-30\">\n <i class=\"fas fa-bars\"><\/i>\n <\/button>\n\n \n <div id=\"view-dashboard\" class=\"app-view max-w-5xl mx-auto fade-in\">\n <header class=\"mb-8\">\n <h1 class=\"text-3xl font-bold text-gray-800\">\u0645\u0631\u062d\u0628\u0627\u064b\u060c <span id=\"user-name\">\u0639\u0628\u062f\u0627\u0644\u0644\u0647<\/span> \ud83d\udc4b<\/h1>\n <p class=\"text-gray-500\">\u0625\u0644\u064a\u0643 \u0645\u0644\u062e\u0635 \u0623\u062f\u0627\u0626\u0643 \u0648\u0623\u062f\u0648\u0627\u062a\u0643 \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0627\u0644\u064a\u0648\u0645.<\/p>\n <\/header>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-8\">\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">\u0627\u0644\u0635\u0631\u0641 \u0647\u0630\u0627 \u0627\u0644\u0634\u0647\u0631<\/div>\n <div class=\"text-2xl font-bold text-gray-800\">4,250 <span class=\"text-xs font-normal\">\u0631.\u0633<\/span><\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">\u0627\u0644\u0646\u0642\u0631\u0627\u062a<\/div>\n <div class=\"text-2xl font-bold text-gray-800\">1,840<\/div>\n <div class=\"text-xs text-green-500 font-bold\">12% <i class=\"fas fa-arrow-up\"><\/i><\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">\u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/div>\n <div class=\"text-2xl font-bold text-gray-800\">3.2%<\/div>\n <\/div>\n <div class=\"bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <div class=\"text-xs text-gray-400 mb-1\">ROAS<\/div>\n <div class=\"text-2xl font-bold text-primary\">4.5x<\/div>\n <\/div>\n <\/div>\n\n <h2 class=\"text-lg font-bold text-gray-700 mb-4\">\u0627\u0644\u0648\u0635\u0648\u0644 \u0627\u0644\u0633\u0631\u064a\u0639 \u0644\u0644\u0623\u062f\u0648\u0627\u062a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <div onclick=\"app.nav('tool-headlines')\" class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-200 cursor-pointer tool-card group\">\n <div class=\"w-12 h-12 bg-green-50 text-green-600 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-600 group-hover:text-white transition\">\n <i class=\"fas fa-pen-fancy text-xl\"><\/i>\n <\/div>\n <h3 class=\"font-bold text-gray-800\">\u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/h3>\n <p class=\"text-sm text-gray-500 mt-2\">\u0623\u0646\u0634\u0626 10 \u0639\u0646\u0627\u0648\u064a\u0646 \u062c\u0630\u0627\u0628\u0629 \u0628\u0644\u0647\u062c\u0629 \u0645\u062d\u0644\u064a\u0629 \u0628\u0636\u063a\u0637\u0629 \u0632\u0631.<\/p>\n <\/div>\n \n <div onclick=\"app.nav('tool-budget')\" class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-200 cursor-pointer tool-card group\">\n <div class=\"w-12 h-12 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-600 group-hover:text-white transition\">\n <i class=\"fas fa-calculator text-xl\"><\/i>\n <\/div>\n <h3 class=\"font-bold text-gray-800\">\u0645\u062e\u0637\u0637 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/h3>\n <p class=\"text-sm text-gray-500 mt-2\">\u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0647\u062f\u0641 \u0645\u0628\u064a\u0639\u0627\u062a\u0643.<\/p>\n <\/div>\n\n <div onclick=\"app.nav('tool-keywords')\" class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-200 cursor-pointer tool-card group\">\n <div class=\"w-12 h-12 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-600 group-hover:text-white transition\">\n <i class=\"fas fa-tags text-xl\"><\/i>\n <\/div>\n <h3 class=\"font-bold text-gray-800\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/h3>\n <p class=\"text-sm text-gray-500 mt-2\">\u062f\u0645\u062c \u0648\u062a\u063a\u0644\u064a\u0641 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 \u0628\u0633\u0631\u0639\u0629.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tool-headlines\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629 (Copy Generator)<\/h1>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6\">\n <div class=\"grid md:grid-cols-2 gap-4 mb-4\">\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c \/ \u0627\u0644\u062e\u062f\u0645\u0629<\/label>\n <input type=\"text\" id=\"hl-product\" class=\"w-full border p-2 rounded\" placeholder=\"\u0645\u062b\u0627\u0644: \u0639\u0637\u0631 \u0627\u0644\u0639\u0648\u062f \u0627\u0644\u0645\u0644\u0643\u064a\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0645\u064a\u0632\u0629 \u062a\u0646\u0627\u0641\u0633\u064a\u0629 \u0631\u0626\u064a\u0633\u064a\u0629<\/label>\n <input type=\"text\" id=\"hl-benefit\" class=\"w-full border p-2 rounded\" placeholder=\"\u0645\u062b\u0627\u0644: \u062b\u0628\u0627\u062a 24 \u0633\u0627\u0639\u0629\">\n <\/div>\n <\/div>\n <div class=\"flex gap-4 mb-4\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0646\u0648\u0639 \u0627\u0644\u0639\u0631\u0636<\/label>\n <select id=\"hl-offer\" class=\"w-full border p-2 rounded\">\n <option value=\"discount\">\u062e\u0635\u0645 \/ \u062a\u062e\u0641\u064a\u0636<\/option>\n <option value=\"urgent\">\u0627\u0633\u062a\u0639\u062c\u0627\u0644 (\u0643\u0645\u064a\u0629 \u0645\u062d\u062f\u0648\u062f\u0629)<\/option>\n <option value=\"shipping\">\u0634\u062d\u0646 \/ \u062a\u0648\u0635\u064a\u0644<\/option>\n <option value=\"quality\">\u062c\u0648\u062f\u0629 \/ \u0641\u062e\u0627\u0645\u0629<\/option>\n <\/select>\n <\/div>\n <div class=\"flex items-end\">\n <button onclick=\"tools.generateHeadlines()\" class=\"bg-primary text-white px-6 py-2 rounded font-bold hover:bg-green-800 transition h-10 w-full\">\u062a\u0648\u0644\u064a\u062f \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"hl-results\" class=\"space-y-3 hidden\">\n <h3 class=\"font-bold text-gray-700\">\u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0645\u0642\u062a\u0631\u062d\u0629 (\u0627\u0636\u063a\u0637 \u0644\u0644\u0646\u0633\u062e):<\/h3>\n <div class=\"grid gap-3\" id=\"hl-list\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tool-budget\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 (Budget Planner)<\/h1>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 md:col-span-1 space-y-4\">\n <h3 class=\"font-bold border-b pb-2\">\u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a<\/h3>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0647\u062f\u0641 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a (\u0631\u064a\u0627\u0644)<\/label>\n <input type=\"number\" id=\"bc-revenue\" class=\"w-full border p-2 rounded\" value=\"50000\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0645\u062a\u0648\u0633\u0637 \u0642\u064a\u0645\u0629 \u0627\u0644\u0637\u0644\u0628 (AOV)<\/label>\n <input type=\"number\" id=\"bc-aov\" class=\"w-full border p-2 rounded\" value=\"300\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0645\u062a\u0648\u0642\u0639 (%)<\/label>\n <input type=\"number\" id=\"bc-conv\" class=\"w-full border p-2 rounded\" value=\"2.5\" step=\"0.1\">\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0645\u062a\u0648\u0633\u0637 \u0633\u0639\u0631 \u0627\u0644\u0646\u0642\u0631\u0629 (CPC)<\/label>\n <input type=\"number\" id=\"bc-cpc\" class=\"w-full border p-2 rounded\" value=\"3.5\" step=\"0.1\">\n <\/div>\n <button onclick=\"tools.calcBudget()\" class=\"w-full bg-blue-600 text-white py-2 rounded font-bold hover:bg-blue-700\">\u0627\u062d\u0633\u0628<\/button>\n <\/div>\n\n \n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 md:col-span-2\">\n <h3 class=\"font-bold border-b pb-2 mb-4\">\u0627\u0644\u062e\u0637\u0629 \u0627\u0644\u0645\u0642\u062a\u0631\u062d\u0629<\/h3>\n <div class=\"grid grid-cols-2 gap-4 mb-6\">\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u0634\u0647\u0631\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/div>\n <div class=\"text-2xl font-bold text-blue-600\" id=\"bc-total-cost\">0 \u0631.\u0633<\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0627\u0644\u0639\u0627\u0626\u062f \u0639\u0644\u0649 \u0627\u0644\u0625\u0646\u0641\u0627\u0642 (ROAS)<\/div>\n <div class=\"text-2xl font-bold text-green-600\" id=\"bc-roas\">0x<\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0639\u062f\u062f \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0645\u062a\u0648\u0642\u0639<\/div>\n <div class=\"text-xl font-bold text-gray-800\" id=\"bc-orders\">0<\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded text-center\">\n <div class=\"text-sm text-gray-500\">\u0627\u0644\u0646\u0642\u0631\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/div>\n <div class=\"text-xl font-bold text-gray-800\" id=\"bc-clicks\">0<\/div>\n <\/div>\n <\/div>\n <div class=\"text-sm text-gray-600 bg-yellow-50 p-3 rounded border border-yellow-100\">\n <i class=\"fas fa-lightbulb text-yellow-500 ml-1\"><\/i>\n <strong>\u0646\u0635\u064a\u062d\u0629:<\/strong> \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0640 ROAS \u0645\u0646\u062e\u0641\u0636\u0627\u064b\u060c \u062d\u0627\u0648\u0644 \u062a\u062d\u0633\u064a\u0646 \u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0641\u064a \u0645\u0648\u0642\u0639\u0643 \u0623\u0648 \u062e\u0641\u0636 \u062a\u0643\u0644\u0641\u0629 \u0627\u0644\u0646\u0642\u0631\u0629 \u0639\u0628\u0631 \u0631\u0641\u0639 \u0646\u0642\u0627\u0637 \u0627\u0644\u062c\u0648\u062f\u0629.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tool-keywords\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629 (Keyword Mixer)<\/h1>\n <\/div>\n\n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6\">\n <div class=\"grid grid-cols-3 gap-4 mb-4\">\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0639\u0645\u0648\u062f A (\u0643\u0644\u0645\u0627\u062a \u0634\u0631\u0627\u0621)<\/label>\n <textarea id=\"kw-a\" class=\"w-full border p-2 rounded h-32 text-sm\" placeholder=\"\u0634\u0631\u0627\u0621 \u0627\u0641\u0636\u0644 \u0639\u0631\u0648\u0636 \u0633\u0639\u0631\"><\/textarea>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0639\u0645\u0648\u062f B (\u0627\u0644\u0645\u0646\u062a\u062c)<\/label>\n <textarea id=\"kw-b\" class=\"w-full border p-2 rounded h-32 text-sm\" placeholder=\"\u0639\u0637\u0631 \u0639\u0648\u062f \u0645\u0633\u0643 \u062f\u0647\u0646 \u0639\u0648\u062f\"><\/textarea>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0639\u0645\u0648\u062f C (\u0627\u0644\u0645\u0643\u0627\u0646\/\u0627\u0644\u0635\u0641\u0629 – \u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\n <textarea id=\"kw-c\" class=\"w-full border p-2 rounded h-32 text-sm\" placeholder=\"\u0627\u0644\u0631\u064a\u0627\u0636 \u0627\u0635\u0644\u064a \u0637\u0628\u064a\u0639\u064a\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"flex flex-wrap gap-4 mb-4 items-center bg-gray-50 p-3 rounded border border-gray-200\">\n <span class=\"text-sm font-bold text-gray-600\">\u0646\u0648\u0639 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629:<\/span>\n <label class=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"match-broad\" class=\"rounded text-primary focus:ring-primary\"> \u0648\u0627\u0633\u0639\u0629 (Broad)\n <\/label>\n <label class=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"match-phrase\" class=\"rounded text-primary focus:ring-primary\" checked> \u0639\u0628\u0627\u0631\u0629 “Phrase”\n <\/label>\n <label class=\"flex items-center gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"match-exact\" class=\"rounded text-primary focus:ring-primary\"> \u062a\u0627\u0645\u0629 [Exact]\n <\/label>\n <button onclick=\"tools.mixKeywords()\" class=\"mr-auto bg-purple-600 text-white px-6 py-2 rounded font-bold hover:bg-purple-700\">\u062f\u0645\u062c \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/button>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-bold text-gray-500 mb-1\">\u0627\u0644\u0646\u062a\u064a\u062c\u0629 (<span id=\"kw-count\">0<\/span> \u0643\u0644\u0645\u0629)<\/label>\n <textarea id=\"kw-result\" class=\"w-full border p-2 rounded h-40 bg-gray-50 font-mono text-left\" dir=\"ltr\" readonly><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"view-tool-utm\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u0635\u0627\u0646\u0639 \u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062a\u062a\u0628\u0639 (UTM Builder)<\/h1>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6\">\n <div class=\"grid md:grid-cols-2 gap-4 mb-4\">\n <div class=\"md:col-span-2\">\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639 (Website URL)<\/label>\n <input type=\"url\" id=\"utm-url\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"https:\/\/www.example.com\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0645\u0635\u062f\u0631 (Campaign Source)<\/label>\n <input type=\"text\" id=\"utm-source\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"google\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0648\u0633\u064a\u0637 (Campaign Medium)<\/label>\n <input type=\"text\" id=\"utm-medium\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"cpc\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0633\u0645 \u0627\u0644\u062d\u0645\u0644\u0629 (Campaign Name)<\/label>\n <input type=\"text\" id=\"utm-campaign\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"summer_sale\">\n <\/div>\n <div>\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0645\u062d\u062a\u0648\u0649 (Content) – \u0627\u062e\u062a\u064a\u0627\u0631\u064a<\/label>\n <input type=\"text\" id=\"utm-content\" class=\"w-full border p-2 rounded text-left ltr\" dir=\"ltr\" placeholder=\"banner_v1\">\n <\/div>\n <\/div>\n <button onclick=\"tools.buildUTM()\" class=\"bg-primary text-white px-6 py-2 rounded font-bold hover:bg-green-800 transition\">\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0631\u0627\u0628\u0637<\/button>\n \n <div class=\"mt-4 hidden\" id=\"utm-result-box\">\n <label class=\"block text-sm font-bold text-gray-700 mb-1\">\u0627\u0644\u0631\u0627\u0628\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a:<\/label>\n <div class=\"flex gap-2\">\n <input type=\"text\" id=\"utm-result\" class=\"w-full border p-2 rounded bg-gray-50 text-left ltr\" dir=\"ltr\" readonly>\n <button onclick=\"tools.copyUTM()\" class=\"bg-gray-200 px-4 rounded hover:bg-gray-300\">\u0646\u0633\u062e<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-academy\" class=\"app-view hidden max-w-4xl mx-auto fade-in\">\n <div class=\"mb-6 flex items-center gap-3\">\n <button onclick=\"app.nav('dashboard')\" class=\"text-gray-400 hover:text-gray-600\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <h1 class=\"text-2xl font-bold\">\u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629<\/h1>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-blue-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">1. \u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u0645\u0632\u0627\u062f<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0643\u064a\u0641 \u064a\u0639\u0645\u0644 Ad Rank \u0648\u0644\u0645\u0627\u0630\u0627 \u0644\u0627 \u064a\u0641\u0648\u0632 \u062f\u0627\u0626\u0645\u0627\u064b \u0645\u0646 \u064a\u062f\u0641\u0639 \u0623\u0643\u062b\u0631.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-green-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">2. \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 Broad, Phrase, Exact \u0648\u0645\u062a\u0649 \u062a\u0633\u062a\u062e\u062f\u0645 \u0643\u0644 \u0646\u0648\u0639.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-yellow-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">3. \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u062a\u0633\u0648\u0642 (Shopping)<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0627\u0644\u062f\u0644\u064a\u0644 \u0627\u0644\u0643\u0627\u0645\u0644 \u0644\u0625\u0639\u062f\u0627\u062f Google Merchant Center \u0641\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n \n <div class=\"bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200\">\n <div class=\"h-2 bg-purple-500\"><\/div>\n <div class=\"p-6\">\n <h3 class=\"font-bold text-lg mb-2\">4. \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0639\u0631\u0648\u0636 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/h3>\n <p class=\"text-gray-500 text-sm mb-4\">\u0645\u062a\u0649 \u062a\u0633\u062a\u062e\u062f\u0645 Maximize Clicks \u0645\u0642\u0627\u0628\u0644 Target ROAS.<\/p>\n <button class=\"text-blue-600 font-bold text-sm hover:underline\">\u0627\u0642\u0631\u0623 \u0627\u0644\u062f\u0631\u0633<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div>\n\n \n <div id=\"mobile-menu\" class=\"hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-40\" onclick=\"toggleMobileMenu()\">\n <div class=\"bg-white w-64 h-full p-4 overflow-y-auto absolute right-0\" onclick=\"event.stopPropagation()\">\n <h2 class=\"font-bold text-lg mb-6\">\u0627\u0644\u0642\u0627\u0626\u0645\u0629<\/h2>\n <nav class=\"space-y-2\">\n <button onclick=\"app.nav('dashboard'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645<\/button>\n <button onclick=\"app.nav('tool-headlines'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u0635\u0627\u0646\u0639 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646<\/button>\n <button onclick=\"app.nav('tool-budget'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629<\/button>\n <button onclick=\"app.nav('tool-keywords'); toggleMobileMenu()\" class=\"w-full text-right p-3 rounded hover:bg-gray-100\">\u062e\u0644\u0627\u0637 \u0627\u0644\u0643\u0644\u0645\u0627\u062a<\/button>\n <button onclick=\"handleLogout()\" class=\"w-full text-right p-3 rounded text-red-600\">\u062e\u0631\u0648\u062c<\/button>\n <\/nav>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- ROUTING & AUTH LOGIC ---\n \n const router = {\n navigate: (viewId) => {\n \/\/ Hide all main containers\n ['view-landing', 'view-auth', 'view-app'].forEach(id => {\n document.getElementById(id).classList.add('hidden');\n document.getElementById(id).classList.remove('flex'); \/\/ specific fix\n });\n\n if (viewId === 'login' || viewId === 'register') {\n document.getElementById('view-auth').classList.remove('hidden');\n document.getElementById('view-auth').classList.add('flex');\n document.getElementById('auth-title').innerText = viewId === 'login' ? '\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644' : '\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u062c\u062f\u064a\u062f';\n document.getElementById('auth-subtitle').innerText = viewId === 'login' ? '\u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0639\u0648\u062f\u062a\u0643' : '\u0627\u0628\u062f\u0623 \u062a\u062c\u0631\u0628\u062a\u0643 \u0627\u0644\u0645\u062c\u0627\u0646\u064a\u0629 \u0627\u0644\u064a\u0648\u0645';\n } else if (viewId === 'app') {\n document.getElementById('view-app').classList.remove('hidden');\n document.getElementById('view-app').classList.add('flex');\n app.nav('dashboard'); \/\/ Default to dashboard\n } else {\n document.getElementById('view-landing').classList.remove('hidden');\n document.getElementById('view-landing').classList.add('flex');\n }\n }\n };\n\n let authMode = 'login';\n \n function toggleAuthMode() {\n authMode = authMode === 'login' ? 'register' : 'login';\n router.navigate(authMode);\n }\n\n function handleAuth(e) {\n e.preventDefault();\n \/\/ Simulate API Call\n const btn = e.target.querySelector('button');\n const originalText = btn.innerText;\n btn.innerHTML = '<div class=\"loader mx-auto border-t-white\"><\/div>';\n \n setTimeout(() => {\n localStorage.setItem('mo3len_user', JSON.stringify({ name: '\u0639\u0628\u062f\u0627\u0644\u0644\u0647', plan: 'pro' }));\n router.navigate('app');\n btn.innerText = originalText;\n }, 1000);\n }\n\n function handleLogout() {\n localStorage.removeItem('mo3len_user');\n router.navigate('landing');\n }\n\n \/\/ --- APP NAVIGATION ---\n \n const app = {\n nav: (viewId) => {\n \/\/ Hide all inner app views\n document.querySelectorAll('.app-view').forEach(el => el.classList.add('hidden'));\n document.getElementById('view-' + viewId).classList.remove('hidden');\n \n \/\/ Update Sidebar Active State\n document.querySelectorAll('.sidebar-link').forEach(el => el.classList.remove('active', 'bg-green-50', 'text-primary', 'border-primary'));\n const activeLink = document.getElementById('nav-' + viewId);\n if(activeLink) activeLink.classList.add('active');\n }\n };\n\n function toggleMobileMenu() {\n document.getElementById('mobile-menu').classList.toggle('hidden');\n }\n\n \/\/ --- TOOLS LOGIC ---\n\n const tools = {\n \n \/\/ 1. Headline Generator\n generateHeadlines: () => {\n const product = document.getElementById('hl-product').value || \"\u0627\u0644\u0645\u0646\u062a\u062c\";\n const benefit = document.getElementById('hl-benefit').value || \"\u0623\u0641\u0636\u0644 \u062c\u0648\u062f\u0629\";\n const type = document.getElementById('hl-offer').value;\n \n let templates = [];\n \n if (type === 'discount') {\n templates = [\n `\u062e\u0635\u0645 \u062e\u0627\u0635 \u0639\u0644\u0649 ${product} - \u0644\u0641\u062a\u0631\u0629 \u0645\u062d\u062f\u0648\u062f\u0629`,\n `\u0623\u0642\u0648\u0649 \u0639\u0631\u0648\u0636 ${product} \u0641\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629`,\n `\u0648\u0641\u0631 \u062d\u062a\u0649 50% \u0639\u0644\u0649 ${product} - \u0627\u0637\u0644\u0628 \u0627\u0644\u0622\u0646`,\n `${product} \u0628\u0623\u0641\u0636\u0644 \u0633\u0639\u0631 \u0641\u064a \u0627\u0644\u0631\u064a\u0627\u0636`,\n `\u0644\u0627 \u064a\u0641\u0648\u062a\u0643 \u0639\u0631\u0636 ${product} - \u0627\u0644\u0643\u0645\u064a\u0629 \u0645\u062d\u062f\u0648\u062f\u0629`\n ];\n } else if (type === 'urgent') {\n templates = [\n `${product} - \u0628\u0627\u0642\u064a 3 \u0642\u0637\u0639 \u0641\u0642\u0637!`,\n `\u0627\u0637\u0644\u0628 ${product} \u0642\u0628\u0644 \u0627\u0646\u062a\u0647\u0627\u0621 \u0627\u0644\u0643\u0645\u064a\u0629`,\n `\u0641\u0631\u0635\u0629 \u0623\u062e\u064a\u0631\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 ${product} \u0645\u0639 ${benefit}`,\n `${product} \u0648\u0635\u0644 \u062d\u062f\u064a\u062b\u0627\u064b - \u0627\u0637\u0644\u0628 \u0642\u0628\u0644 \u0627\u0644\u062c\u0645\u064a\u0639`\n ];\n } else if (type === 'shipping') {\n templates = [\n `${product} - \u062a\u0648\u0635\u064a\u0644 \u0645\u062c\u0627\u0646\u064a \u0644\u0628\u0627\u0628 \u0628\u064a\u062a\u0643`,\n `${product} \u0645\u0639 ${benefit} - \u0634\u062d\u0646 \u0633\u0631\u064a\u0639 \u0644\u0644\u0631\u064a\u0627\u0636`,\n `\u0627\u0637\u0644\u0628 ${product} \u0648\u0627\u0644\u062f\u0641\u0639 \u0639\u0646\u062f \u0627\u0644\u0627\u0633\u062a\u0644\u0627\u0645`,\n `${product} \u0623\u0635\u0644\u064a 100% - \u062a\u0648\u0635\u064a\u0644 \u0633\u0631\u064a\u0639`\n ];\n } else {\n templates = [\n `${product} - ${benefit} \u0628\u0636\u0645\u0627\u0646 \u0630\u0647\u0628\u064a`,\n `\u062c\u0631\u0628 \u0641\u062e\u0627\u0645\u0629 ${product} - ${benefit}`,\n `\u0627\u0644\u062e\u064a\u0627\u0631 \u0627\u0644\u0623\u0648\u0644 \u0641\u064a \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629: ${product}`,\n `\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631 ${product}\u061f \u0627\u0643\u062a\u0634\u0641 ${benefit}`\n ];\n }\n \n const resultList = document.getElementById('hl-list');\n resultList.innerHTML = '';\n templates.forEach(text => {\n const div = document.createElement('div');\n div.className = \"bg-gray-50 p-3 rounded border border-gray-200 cursor-pointer hover:bg-green-50 hover:border-green-300 transition flex justify-between items-center\";\n div.innerHTML = `<span>${text}<\/span> <i class=\"far fa-copy text-gray-400\"><\/i>`;\n div.onclick = () => {\n navigator.clipboard.writeText(text);\n div.classList.add('bg-green-100');\n setTimeout(() => div.classList.remove('bg-green-100'), 200);\n };\n resultList.appendChild(div);\n });\n document.getElementById('hl-results').classList.remove('hidden');\n },\n\n \/\/ 2. Budget Calculator\n calcBudget: () => {\n const revenue = parseFloat(document.getElementById('bc-revenue').value);\n const aov = parseFloat(document.getElementById('bc-aov').value);\n const convRate = parseFloat(document.getElementById('bc-conv').value) \/ 100;\n const cpc = parseFloat(document.getElementById('bc-cpc').value);\n \n if(!revenue || !aov || !convRate || !cpc) return;\n \n \/\/ Logic\n const ordersNeeded = Math.ceil(revenue \/ aov);\n const clicksNeeded = Math.ceil(ordersNeeded \/ convRate);\n const totalCost = clicksNeeded * cpc;\n const roas = (revenue \/ totalCost).toFixed(2);\n \n \/\/ Update UI\n document.getElementById('bc-total-cost').innerText = totalCost.toLocaleString() + \" \u0631.\u0633\";\n document.getElementById('bc-orders').innerText = ordersNeeded;\n document.getElementById('bc-clicks').innerText = clicksNeeded.toLocaleString();\n document.getElementById('bc-roas').innerText = roas + \"x\";\n },\n\n \/\/ 3. Keyword Mixer\n mixKeywords: () => {\n const colA = document.getElementById('kw-a').value.split('\\n').filter(x => x.trim());\n const colB = document.getElementById('kw-b').value.split('\\n').filter(x => x.trim());\n const colC = document.getElementById('kw-c').value.split('\\n').filter(x => x.trim());\n \n let results = [];\n \n const isBroad = document.getElementById('match-broad').checked;\n const isPhrase = document.getElementById('match-phrase').checked;\n const isExact = document.getElementById('match-exact').checked;\n \n colA.forEach(a => {\n colB.forEach(b => {\n let base = `${a.trim()} ${b.trim()}`;\n \n \/\/ If Col C exists, create versions with and without it\n let phrases = [base];\n if (colC.length > 0) {\n colC.forEach(c => {\n phrases.push(`${base} ${c.trim()}`);\n });\n }\n \n phrases.forEach(p => {\n if(isBroad) results.push(p);\n if(isPhrase) results.push(`\"${p}\"`);\n if(isExact) results.push(`[${p}]`);\n });\n });\n });\n \n document.getElementById('kw-result').value = results.join('\\n');\n document.getElementById('kw-count').innerText = results.length;\n },\n \n \/\/ 4. UTM Builder\n buildUTM: () => {\n const url = document.getElementById('utm-url').value;\n const source = document.getElementById('utm-source').value;\n const medium = document.getElementById('utm-medium').value;\n const campaign = document.getElementById('utm-campaign').value;\n const content = document.getElementById('utm-content').value;\n \n if (!url) return alert(\"\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639\");\n \n let finalUrl = new URL(url);\n if(source) finalUrl.searchParams.set('utm_source', source);\n if(medium) finalUrl.searchParams.set('utm_medium', medium);\n if(campaign) finalUrl.searchParams.set('utm_campaign', campaign);\n if(content) finalUrl.searchParams.set('utm_content', content);\n \n document.getElementById('utm-result').value = finalUrl.toString();\n document.getElementById('utm-result-box').classList.remove('hidden');\n },\n \n copyUTM: () => {\n const copyText = document.getElementById(\"utm-result\");\n copyText.select();\n document.execCommand(\"copy\");\n }\n };\n\n \/\/ --- INIT ---\n window.addEventListener('load', () => {\n const user = JSON.parse(localStorage.getItem('mo3len_user'));\n if (user) {\n document.getElementById('user-name').innerText = user.name;\n router.navigate('app');\n } else {\n router.navigate('landing');\n }\n });\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648 | \u0645\u0633\u0627\u0639\u062f \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644 \u0644\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u0627\u0644\u0645\u064f\u0639\u0644\u0646 \u0628\u0631\u0648 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0627\u0628\u062f\u0623 \u0645\u062c\u0627\u0646\u0627\u064b \u0623\u062f\u0627\u062a\u0643 \u0627\u0644\u0630\u0643\u064a\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062c\u0648\u062c\u0644\u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0633\u0639\u0648\u062f\u064a \u0648\u0641\u0651\u0631 \u0633\u0627\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u0639\u0645\u0644 \u0645\u0639 \u0623\u062f\u0648\u0627\u062a \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0628\u0627\u0644\u0644\u0647\u062c\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629\u060c \u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u0629\u060c \u0648\u0645\u0648\u0644\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u0641\u062a\u0627\u062d\u064a\u0629. \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f. \u062c\u0631\u0628 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0622\u0646 \u0643\u0627\u062a\u0628 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0633\u0639\u0648\u062f\u064a \u062a\u0648\u0644\u064a\u062f \u0639\u0646\u0627\u0648\u064a\u0646 \u0648\u0646\u0635\u0648\u0635 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u062c\u0630\u0627\u0628\u0629 \u0628\u0627\u0644\u0644\u0647\u062c\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"brizy-blank-template.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1016","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/1016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/types\/page"}],"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=1016"}],"version-history":[{"count":0,"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/pages\/1016\/revisions"}],"wp:attachment":[{"href":"https:\/\/marketing-coaching.uk\/en\/wp-json\/wp\/v2\/media?parent=1016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}