\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n \r\n .simulation-container {\r\n margin: 2rem 0;\r\n padding: 1.5rem;\r\n background-color: rgba(0, 0, 0, 0.2);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n }\r\n \r\n .canvas-container {\r\n display: flex;\r\n justify-content: center;\r\n margin: 1rem 0;\r\n }\r\n \r\n canvas {\r\n border-radius: 0.5rem;\r\n background-color: rgba(15, 23, 42, 0.8);\r\n }\r\n \r\n .control-btn {\r\n background: linear-gradient(135deg, #4f46e5, #7c3aed);\r\n color: white;\r\n border: none;\r\n padding: 0.5rem 1rem;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n font-family: 'Cairo', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .control-btn:hover {\r\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\r\n }\r\n \r\n .control-btn:active {\r\n transform: translateY(0);\r\n }\r\n \r\n .reset-btn {\r\n background: rgba(239, 68, 68, 0.2);\r\n color: #fca5a5;\r\n border: 1px solid rgba(239, 68, 68, 0.3);\r\n }\r\n \r\n .reset-btn:hover {\r\n background: rgba(239, 68, 68, 0.3);\r\n box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);\r\n }\r\n \r\n .stats-box {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 0.5rem;\r\n padding: 0.75rem;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631 - \u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/acidsAndBases.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/acidsAndBases.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 text-right\">\r\n \r\n<div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n <h1 class=\"text-2xl l:text-3xl font-bold text-purple-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0627\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f - \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h1>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0661. \u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0645\u0627 \u0647\u064a \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f\u061f<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0627\u0644\u062d\u0645\u0648\u0636 (\u0627\u0644\u0623\u062d\u0645\u0627\u0636)<\/h3>\r\n <p class=\"mb-2 text-l l:text-base\">\u0645\u0648\u0627\u062f \u062a\u0646\u062a\u062c \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 H<sup>+<\/sup> \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629.<\/p>\r\n <p class=\"font-semibold text-slate-300 text-l l:text-base mt-2\">\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-l l:text-base mt-1\">\r\n <li>\u0637\u0639\u0645 \u0644\u0627\u0630\u0639<\/li>\r\n <li>\u062a\u0648\u0635\u0644 \u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/li>\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0637\u0644\u0642\u0629 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646<\/li>\r\n <li>\u062a\u062d\u0645\u0631 \u0635\u0628\u063a\u0629 \u0639\u0628\u0627\u062f \u0627\u0644\u0634\u0645\u0633<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f (\u0627\u0644\u0642\u0644\u0648\u064a\u0627\u062a)<\/h3>\r\n <p class=\"mb-2 text-l l:text-base\">\u0645\u0648\u0627\u062f \u062a\u0646\u062a\u062c \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f OH<sup>-<\/sup> \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629.<\/p>\r\n <p class=\"font-semibold text-slate-300 text-l l:text-base mt-2\">\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-l l:text-base mt-1\">\r\n <li>\u0637\u0639\u0645 \u0645\u0631<\/li>\r\n <li>\u0645\u0644\u0645\u0633 \u0635\u0627\u0628\u0648\u0646\u064a<\/li>\r\n <li>\u062a\u0648\u0635\u0644 \u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/li>\r\n <li>\u062a\u0632\u0631\u0642 \u0635\u0628\u063a\u0629 \u0639\u0628\u0627\u062f \u0627\u0644\u0634\u0645\u0633<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0645\u0627\u0643\u0646 \u062a\u0648\u0627\u062c\u062f \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0648\u0623\u0634\u0647\u0631 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a\u0647\u0627<\/h2>\r\n <p class=\"text-slate-300 mb-4 text-l l:text-base\">\u062a\u062a\u0648\u0627\u062c\u062f \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0628\u0643\u062b\u0631\u0629 \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629\u060c \u0648\u0644\u0647\u0627 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629 \u0648\u0645\u0647\u0645\u0629:<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-red-400 mb-2\">\u0627\u0644\u062d\u0645\u0648\u0636:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-l l:text-base\">\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u063a\u0630\u0627\u0621:<\/strong> \u0627\u0644\u0644\u064a\u0645\u0648\u0646 \u0648\u0627\u0644\u0628\u0631\u062a\u0642\u0627\u0644 (\u062d\u0645\u0636 \u0627\u0644\u0633\u062a\u0631\u064a\u0643)\u060c \u0627\u0644\u062e\u0644 (\u062d\u0645\u0636 \u0627\u0644\u0623\u0633\u064a\u062a\u064a\u0643)\u060c \u0627\u0644\u0644\u0628\u0646 (\u062d\u0645\u0636 \u0627\u0644\u0644\u0627\u0643\u062a\u064a\u0643).<\/li>\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629:<\/strong>\r\n <ul class=\"list-disc list-inside ml-4 mt-1 space-y-1 text-l l:text-base\">\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u0643 (H\u2082SO\u2084): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0633\u0645\u062f\u0629\u060c \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0627\u062a\u060c \u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643\u060c \u0648\u0627\u0644\u0645\u0646\u0638\u0641\u0627\u062a.<\/li>\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 (HCl): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646\u060c \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643\u060c \u0648\u0641\u064a \u0627\u0644\u0647\u0636\u0645 \u0628\u0627\u0644\u0645\u0639\u062f\u0629.<\/li>\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0646\u064a\u062a\u0631\u064a\u0643 (HNO\u2083): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062a\u0641\u062c\u0631\u0627\u062a \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629.<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-blue-400 mb-2\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-l l:text-base\">\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629:<\/strong> \u0627\u0644\u0635\u0627\u0628\u0648\u0646 \u0648\u0627\u0644\u0645\u0646\u0638\u0641\u0627\u062a (\u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 \u0623\u0648 \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645)\u060c \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 (NH\u2083) \u0641\u064a \u0633\u0648\u0627\u0626\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0641.<\/li>\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629:<\/strong>\r\n <ul class=\"list-disc list-inside ml-4 mt-1 space-y-1 text-l l:text-base\">\r\n <li>\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (NaOH): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0635\u0627\u0628\u0648\u0646 \u0648\u0627\u0644\u0648\u0631\u0642 \u0648\u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0645\u064a\u0627\u0647.<\/li>\r\n <li>\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca(OH)\u2082): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0628\u0646\u0627\u0621 (\u0627\u0644\u062c\u064a\u0631 \u0627\u0644\u0645\u0637\u0641\u0623) \u0648\u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u062a\u0631\u0628\u0629 \u0627\u0644\u062d\u0645\u0636\u064a\u0629.<\/li>\r\n <li>\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg(OH)\u2082): \u064a\u0633\u062a\u062e\u062f\u0645 \u0643\u0645\u0636\u0627\u062f \u0644\u0644\u062d\u0645\u0648\u0636\u0629 (\u062d\u0644\u064a\u0628 \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0627).<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0662. \u0645\u0641\u0647\u0648\u0645 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0623. \u0627\u0644\u062d\u0645\u0636 \u062d\u0633\u0628 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300 mb-2\">\u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0648\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a H<sup>+<\/sup>.<\/p>\r\n \r\n <p class=\"text-l l:text-base text-slate-300 font-semibold mt-2\">\u0645\u062b\u0627\u0644 (\u062a\u0623\u064a\u0646 \u0643\u0644\u064a \u0644\u062d\u0645\u0636 \u0642\u0648\u064a):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">HCl \u2192 H<sup>+<\/sup> + Cl<sup>-<\/sup><\/div>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">H<sub>2<\/sub>SO<sub>4<\/sub> \u2192 2H<sup>+<\/sup> + SO<sub>4<\/sub><sup>2-<\/sup><\/div>\r\n\r\n <p class=\"text-l l:text-base text-slate-300 font-semibold mt-3\">\u0645\u062b\u0627\u0644 (\u062a\u0623\u064a\u0646 \u062c\u0632\u0626\u064a \u0644\u062d\u0645\u0636 \u0636\u0639\u064a\u0641):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">CH<sub>3<\/sub>COOH \u21cc CH<sub>3<\/sub>COO<sup>-<\/sup> + H<sup>+<\/sup><\/div>\r\n <p class=\"text-l l:text-base text-slate-400 mt-1\">\u0645\u0644\u0627\u062d\u0638\u0629: \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0645\u0632\u062f\u0648\u062c (\u21cc) \u064a\u062f\u0644 \u0639\u0644\u0649 \u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0646\u0639\u0643\u0633 \u0648\u0623\u0646 \u0627\u0644\u062d\u0645\u0636 \u064a\u062a\u0623\u064a\u0646 \u0628\u0634\u0643\u0644 \u062c\u0632\u0626\u064a \u0641\u0642\u0637\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0648\u0627\u062d\u062f (\u2192) \u064a\u062f\u0644 \u0639\u0644\u0649 \u062a\u0623\u064a\u0646 \u0643\u0644\u064a.<\/p>\r\n\r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0641\u0647\u0648\u0645 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u062a\u062a\u0641\u0643\u0643 \u0627\u0644\u0623\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0642\u0648\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0646\u062a\u062c \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0623\u0648 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f.<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"arrhenius-canvas\" width=\"300\" height=\"220\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"add-acid-btn\" class=\"control-btn\">\u0623\u0636\u0641 \u062d\u0645\u0636 (HCl)<\/button>\r\n <button id=\"add-base-btn\" class=\"control-btn\">\u0623\u0636\u0641 \u0642\u0627\u0639\u062f\u0629 (NaOH)<\/button>\r\n <button id=\"reset-arrhenius-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 mb-4\">\r\n <div class=\"stats-box\">\r\n <p class=\"text-slate-400 mb-1\">\u0639\u062f\u062f \u0623\u064a\u0648\u0646\u0627\u062a H\u207a<\/p>\r\n <p class=\"text-xl font-bold text-red-400\" id=\"h-ion-count\">0<\/p>\r\n <\/div>\r\n <div class=\"stats-box\">\r\n <p class=\"text-slate-400 mb-1\">\u0639\u062f\u062f \u0623\u064a\u0648\u0646\u0627\u062a OH\u207b<\/p>\r\n <p class=\"text-xl font-bold text-blue-400\" id=\"oh-ion-count\">0<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg\">\r\n <p class=\"text-l l:text-base text-slate-300\" id=\"arrhenius-status\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u062d\u0645\u0636 \u0623\u0648 \u0642\u0627\u0639\u062f\u0629 \u0648\u0645\u0634\u0627\u0647\u062f\u0629 \u0627\u0644\u062a\u0641\u0643\u0643.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u0628. \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u062d\u0633\u0628 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300 mb-2\">\u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0648\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a OH<sup>-<\/sup>.<\/p>\r\n <p class=\"text-l l:text-base text-slate-300 font-semibold\">\u0623\u0645\u062b\u0644\u0629:<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">NaOH \u2192 Na<sup>+<\/sup> + OH<sup>-<\/sup><\/div>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">Ca(OH)<sub>2<\/sub> \u2192 Ca<sup>2+<\/sup> + 2OH<sup>-<\/sup><\/div>\r\n \r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u062c. \u0642\u064a\u0648\u062f \u0645\u0641\u0647\u0648\u0645 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base\">\r\n <li>\u064a\u0642\u062a\u0635\u0631 \u0639\u0644\u0649 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629 \u0641\u0642\u0637.<\/li>\r\n <li>\u0644\u0645 \u064a\u062a\u0645\u0643\u0646 \u0645\u0646 \u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0642\u0627\u0639\u062f\u064a \u0644\u0645\u0648\u0627\u062f \u0644\u0627 \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f (\u0645\u062b\u0644 NH\u2083).<\/li>\r\n <li>\u0644\u0645 \u064a\u062a\u0645\u0643\u0646 \u0645\u0646 \u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u062d\u0645\u0636\u064a \u0623\u0648 \u0627\u0644\u0642\u0627\u0639\u062f\u064a \u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0628\u0639\u0636 \u0627\u0644\u0623\u0645\u0644\u0627\u062d (\u0645\u062b\u0644 NH\u2084Cl).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0642\u0648\u064a\u0629 \u0648\u0627\u0644\u0636\u0639\u064a\u0641\u0629<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-right text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase tracking-wider\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u0646\u0648\u0639<\/th>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0623\u0645\u062b\u0644\u0629 \u0634\u0627\u0626\u0639\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold text-red-400\">\u062d\u0645\u0648\u0636 \u0642\u0648\u064a\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">HCl, HBr, HI, HNO<sub>3<\/sub>, H<sub>2<\/sub>SO<sub>4<\/sub>, HClO<sub>4<\/sub><\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold text-orange-400\">\u062d\u0645\u0648\u0636 \u0636\u0639\u064a\u0641\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">CH<sub>3<\/sub>COOH, H<sub>2<\/sub>CO<sub>3<\/sub>, HF, H<sub>3<\/sub>PO<sub>4<\/sub><\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold text-blue-400\">\u0642\u0648\u0627\u0639\u062f \u0642\u0648\u064a\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">LiOH, NaOH, KOH, Ca(OH)<sub>2<\/sub>, Sr(OH)<sub>2<\/sub>, Ba(OH)<sub>2<\/sub><\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-6 py-4 font-semibold text-sky-400\">\u0642\u0648\u0627\u0639\u062f \u0636\u0639\u064a\u0641\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">NH<sub>3<\/sub>, CH<sub>3<\/sub>NH<sub>2<\/sub>, C<sub>5<\/sub>H<sub>5<\/sub>N<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mt-2 text-l l:text-base text-slate-400\">\u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0642\u0648\u064a\u0629 \u062a\u062a\u0623\u064a\u0646 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0636\u0639\u064a\u0641\u0629 \u062a\u062a\u0623\u064a\u0646 \u0628\u0634\u0643\u0644 \u062c\u0632\u0626\u064a.<\/p>\r\n <\/section>\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062a\u0643\u0648\u0651\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base\">\u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629\u060c \u0644\u0627 \u064a\u0648\u062c\u062f \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H<sup>+<\/sup>) \u0623\u0648 \u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646 \u0628\u0634\u0643\u0644 \u062d\u0631. \u0646\u0638\u0631\u0627\u064b \u0644\u0635\u063a\u0631 \u062d\u062c\u0645\u0647 \u0648\u0634\u062d\u0646\u062a\u0647 \u0627\u0644\u0639\u0627\u0644\u064a\u0629\u060c \u0641\u0625\u0646\u0647 \u064a\u0631\u062a\u0628\u0637 \u0645\u0628\u0627\u0634\u0631\u0629 \u0628\u0623\u062d\u062f \u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u063a\u064a\u0631 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0639\u0644\u0649 \u0630\u0631\u0629 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0641\u064a \u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621\u060c \u0645\u0643\u0648\u0646\u0627\u064b \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645 (H<sub>3<\/sub>O<sup>+<\/sup>).<\/p>\r\n <div class=\"bg-slate-900\/50 p-3 my-4 rounded-lg border-l-4 border-purple-400\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0642\u064a\u0629 (Coordinate Bond)<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-2\">\r\n \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0642\u064a\u0629 \u0647\u064a \u0646\u0648\u0639 \u062e\u0627\u0635 \u0645\u0646 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0627\u0644\u062a\u0633\u0627\u0647\u0645\u064a\u0629\u060c \u062d\u064a\u062b \u064a\u0623\u062a\u064a \u0632\u0648\u062c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0634\u0627\u0631\u0643 \u0641\u064a \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0645\u0646 \u0630\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u0641\u0642\u0637 (\u0627\u0644\u0630\u0631\u0629 \u0627\u0644\u0645\u0627\u0646\u062d\u0629) \u0625\u0644\u0649 \u0630\u0631\u0629 \u0623\u062e\u0631\u0649 \u062a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627 (\u0627\u0644\u0630\u0631\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u0629).\r\n <\/p>\r\n <p class=\"text-slate-300 text-l l:text-base\">\r\n \u0641\u064a \u062d\u0627\u0644\u0629 \u062a\u0643\u0648\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645\u060c \u064a\u0639\u0645\u0644 \u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621 \u0643\u0630\u0631\u0629 \u0645\u0627\u0646\u062d\u0629 (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646)\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0639\u0645\u0644 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 H\u207a \u0643\u0630\u0631\u0629 \u0645\u0633\u062a\u0642\u0628\u0644\u0629 (\u064a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627).\r\n <\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u062a\u0643\u0648\u064a\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u064a\u0631\u062a\u0628\u0637 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u207a) \u0628\u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0643\u0648\u064a\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645 (H\u2083O\u207a).<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"hydronium-canvas\" width=\"450\" height=\"200\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"start-hydronium-btn\" class=\"control-btn\">\u0628\u062f\u0621 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629<\/button>\r\n <button id=\"reset-hydronium-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg\">\r\n <p class=\"text-l l:text-base text-slate-300\">\r\n <span class=\"text-yellow-300 font-bold\">\u062a\u0641\u0633\u064a\u0631:<\/span> \u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621 (H\u2082O) \u064a\u0645\u062a\u0644\u0643 \u0632\u0648\u062c\u064b\u0627 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u064b\u0627 \u063a\u064a\u0631 \u0631\u0627\u0628\u0637 \u0639\u0644\u0649 \u0630\u0631\u0629 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0639\u0646\u062f\u0645\u0627 \u064a\u0642\u062a\u0631\u0628 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u207a) - \u0627\u0644\u0630\u064a \u064a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627 - \u064a\u062a\u0643\u0648\u0646 \u0631\u0627\u0628\u0637\u0629 \u062a\u0646\u0627\u0633\u0642\u064a\u0629\u060c \u0645\u0646\u062a\u062c\u064b\u0627 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645 (H\u2083O\u207a).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0663. \u0645\u0641\u0647\u0648\u0645 \u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0623. \u0627\u0644\u062a\u0639\u0631\u064a\u0641:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base\">\r\n <li><strong>\u0627\u0644\u062d\u0645\u0636:<\/strong> \u0645\u0627\u062f\u0629 \u062a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646 (H<sup>+<\/sup>).<\/li>\r\n <li><strong>\u0627\u0644\u0642\u0627\u0639\u062f\u0629:<\/strong> \u0645\u0627\u062f\u0629 \u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646 (H<sup>+<\/sup>).<\/li>\r\n <\/ul>\r\n\r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u0628. \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629:<\/h3>\r\n <ol class=\"list-decimal list-inside space-y-2 text-slate-300 text-l l:text-base\">\r\n <li><strong>\u0627\u0644\u0632\u0648\u062c \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642 (Conjugate Pair):<\/strong>\r\n <ul class=\"list-disc list-inside ml-4\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0628\u0639\u062f \u0627\u0643\u062a\u0633\u0627\u0628 \u0628\u0631\u0648\u062a\u0648\u0646.<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: \u0627\u0644\u062d\u0645\u0636 \u0628\u0639\u062f \u0641\u0642\u062f \u0628\u0631\u0648\u062a\u0648\u0646.<\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0639\u0627\u0645:<\/strong>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">\u062d\u0645\u0636<sub>1<\/sub> + \u0642\u0627\u0639\u062f\u0629<sub>2<\/sub> \u21cc \u0642\u0627\u0639\u062f\u0629<sub>1<\/sub>(\u0645\u062a\u0631\u0627\u0641\u0642\u0629) + \u062d\u0645\u0636<sub>2<\/sub>(\u0645\u062a\u0631\u0627\u0641\u0642)<\/div>\r\n <\/li>\r\n <\/ol>\r\n\r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0641\u0647\u0648\u0645 \u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646 \u0628\u064a\u0646 \u0627\u0644\u0623\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0645\u0639 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629.<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"bronsted-canvas\" width=\"450\" height=\"180\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"hcl-reaction-btn\" class=\"control-btn bg-purple-600\">HCl + H\u2082O<\/button>\r\n <button id=\"nh3-reaction-btn\" class=\"control-btn\">NH\u2083 + H\u2082O<\/button>\r\n <button id=\"play-bronsted-btn\" class=\"control-btn\">\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <button id=\"reset-bronsted-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 mb-4\">\r\n <div class=\"stats-box text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629:<\/p>\r\n <p class=\"text-l l:text-base font-mono text-yellow-300\" id=\"bronsted-equation\">HCl + H\u2082O \u2192 H\u2083O\u207a + Cl\u207b<\/p>\r\n <\/div>\r\n <div class=\"stats-box text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u062d\u0627\u0644\u0629:<\/p>\r\n <p class=\"text-l l:text-base font-bold\" id=\"bronsted-status\">\u062c\u0627\u0647\u0632<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u062d\u0645\u0636<\/p>\r\n <p class=\"text-l l:text-base font-bold text-red-300\" id=\"acid-label\">HCl<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629<\/p>\r\n <p class=\"text-l l:text-base font-bold text-blue-300\" id=\"base-label\">H\u2082O<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/p>\r\n <p class=\"text-l l:text-base font-bold text-sky-300\" id=\"conj-base-label\"><\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642<\/p>\r\n <p class=\"text-l l:text-base font-bold text-purple-300\" id=\"conj-acid-label\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u062c. \u0623\u0645\u062b\u0644\u0629 \u062a\u0637\u0628\u064a\u0642\u064a\u0629:<\/h3>\r\n <div class=\"space-y-4 mt-2\">\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u0627\u0644\u0645\u062b\u0627\u0644 (\u0661): \u062a\u0623\u064a\u0646 \u062d\u0645\u0636 \u0642\u0648\u064a (HCl)<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">HCl + H<sub>2<\/sub>O \u2192 H<sub>3<\/sub>O<sup>+<\/sup> + Cl<sup>-<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 (\u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646): HCl<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646): H\u2082O<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: H\u2083O\u207a<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: Cl\u207b<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u0627\u0644\u0645\u062b\u0627\u0644 (\u0662): \u062a\u0623\u064a\u0646 \u062d\u0645\u0636 \u0636\u0639\u064a\u0641 (CH\u2083COOH)<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">CH<sub>3<\/sub>COOH + H<sub>2<\/sub>O \u21cc H<sub>3<\/sub>O<sup>+<\/sup> + CH<sub>3<\/sub>COO<sup>-<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 (\u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646): CH\u2083COOH<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646): H\u2082O<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: H\u2083O\u207a<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: CH\u2083COO\u207b<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u0627\u0644\u0645\u062b\u0627\u0644 (\u0663): \u062a\u0623\u064a\u0646 \u0642\u0627\u0639\u062f\u0629 \u0636\u0639\u064a\u0641\u0629 (NH\u2083)<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">NH<sub>3<\/sub> + H<sub>2<\/sub>O \u21cc NH<sub>4<\/sub><sup>+<\/sup> + OH<sup>-<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300\">\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646): NH\u2083<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 (\u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646): H\u2082O<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: NH\u2084\u207a<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: OH\u207b<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0629 \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base mb-3\">\u0647\u0646\u0627\u0643 \u0639\u0644\u0627\u0642\u0629 \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0642\u0648\u0629 \u0627\u0644\u062d\u0645\u0636 \u0648\u0642\u0648\u0629 \u0642\u0627\u0639\u062f\u062a\u0647 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629 (\u0648\u0627\u0644\u0639\u0643\u0633 \u0635\u062d\u064a\u062d).<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base mb-4\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 <strong class=\"text-red-400\">\u0627\u0644\u0642\u0648\u064a<\/strong> \u064a\u0646\u062a\u062c \u0642\u0627\u0639\u062f\u0629 \u0645\u062a\u0631\u0627\u0641\u0642\u0629 <strong class=\"text-sky-300\">\u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u0627\u064b<\/strong>.<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 <strong class=\"text-orange-400\">\u0627\u0644\u0636\u0639\u064a\u0641<\/strong> \u064a\u0646\u062a\u062c \u0642\u0627\u0639\u062f\u0629 \u0645\u062a\u0631\u0627\u0641\u0642\u0629 <strong class=\"text-blue-300\">\u0642\u0648\u064a\u0629 \u0646\u0633\u0628\u064a\u0627\u064b<\/strong>.<\/li>\r\n <\/ul>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-center text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u062d\u0645\u0636<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">HCl<\/td>\r\n <td class=\"px-4 py-2 text-red-400 font-semibold\">\u0642\u0648\u064a<\/td>\r\n <td class=\"px-4 py-2 font-mono\">Cl<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-sky-300\">\u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u0627\u064b<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">CH<sub>3<\/sub>COOH<\/td>\r\n <td class=\"px-4 py-2 text-orange-400\">\u0636\u0639\u064a\u0641<\/td>\r\n <td class=\"px-4 py-2 font-mono\">CH<sub>3<\/sub>COO<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-blue-300\">\u0642\u0648\u064a\u0629 \u0646\u0633\u0628\u064a\u0627\u064b<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">H\u2082O<\/td>\r\n <td class=\"px-4 py-2 text-orange-400\">\u0636\u0639\u064a\u0641 \u062c\u062f\u064b\u0627<\/td>\r\n <td class=\"px-4 py-2 font-mono\">OH<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-blue-400 font-semibold\">\u0642\u0648\u064a\u0629<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0629 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0648\u0627\u0644\u062d\u0645\u0648\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base mb-3\">\u0648\u0628\u0627\u0644\u0645\u062b\u0644\u060c \u0647\u0646\u0627\u0643 \u0639\u0644\u0627\u0642\u0629 \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0642\u0648\u0629 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0648\u0642\u0648\u0629 \u062d\u0645\u0636\u0647\u0627 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642.<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base mb-4\">\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 <strong class=\"text-blue-400\">\u0627\u0644\u0642\u0648\u064a\u0629<\/strong> \u062a\u0646\u062a\u062c \u062d\u0645\u0636\u064b\u0627 \u0645\u062a\u0631\u0627\u0641\u0642\u064b\u0627 <strong class=\"text-orange-300\">\u0636\u0639\u064a\u0641\u064b\u0627 \u062c\u062f\u064b\u0627<\/strong>.<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 <strong class=\"text-sky-300\">\u0627\u0644\u0636\u0639\u064a\u0641\u0629<\/strong> \u062a\u0646\u062a\u062c \u062d\u0645\u0636\u064b\u0627 \u0645\u062a\u0631\u0627\u0641\u0642\u064b\u0627 <strong class=\"text-red-300\">\u0642\u0648\u064a\u064b\u0627 \u0646\u0633\u0628\u064a\u064b\u0627<\/strong>.<\/li>\r\n <\/ul>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-center text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">OH<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-blue-400 font-semibold\">\u0642\u0648\u064a\u0629<\/td>\r\n <td class=\"px-4 py-2 font-mono\">H\u2082O<\/td>\r\n <td class=\"px-4 py-2 text-orange-300\">\u0636\u0639\u064a\u0641 \u062c\u062f\u064b\u0627<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">NH\u2083<\/td>\r\n <td class=\"px-4 py-2 text-sky-300\">\u0636\u0639\u064a\u0641\u0629<\/td>\r\n <td class=\"px-4 py-2 font-mono\">NH\u2084\u207a<\/td>\r\n <td class=\"px-4 py-2 text-red-300\">\u0642\u0648\u064a \u0646\u0633\u0628\u064a\u064b\u0627<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">Cl<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-sky-300\">\u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627<\/td>\r\n <td class=\"px-4 py-2 font-mono\">HCl<\/td>\r\n <td class=\"px-4 py-2 text-red-400 font-semibold\">\u0642\u0648\u064a<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u0645\u0641\u0648\u062a\u064a\u0631\u064a\u0629 (\u0627\u0644\u0645\u062a\u0631\u062f\u062f\u0629)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base mb-2\">\u0647\u064a \u0645\u0648\u0627\u062f \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u0633\u0644\u0643 \u0633\u0644\u0648\u0643 \u0627\u0644\u062d\u0645\u0636 \u0641\u064a \u062a\u0641\u0627\u0639\u0644 \u0645\u0627\u060c \u0648\u0633\u0644\u0648\u0643 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0641\u064a \u062a\u0641\u0627\u0639\u0644 \u0622\u062e\u0631. \u0627\u0644\u0645\u0627\u0621 \u0647\u0648 \u0623\u0634\u0647\u0631 \u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u0645\u0641\u0648\u062a\u064a\u0631\u064a\u0629.<\/p>\r\n <div class=\"space-y-3 mt-3\">\r\n <div>\r\n <p class=\"font-semibold text-white\/80 text-l l:text-base\">\u0627\u0644\u0645\u0627\u0621 \u0643\u0642\u0627\u0639\u062f\u0629 (\u0645\u0639 \u062d\u0645\u0636):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">HCl + H<sub>2<\/sub>O \u2192 H<sub>3<\/sub>O<sup>+<\/sup> + Cl<sup>-<\/sup><\/div>\r\n <p class=\"text-l l:text-base text-slate-400\">\u0647\u0646\u0627 \u0627\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0645\u0627\u0621 \u0628\u0631\u0648\u062a\u0648\u0646\u064b\u0627 \u0645\u0646 HCl\u060c \u0644\u0630\u0627 \u0641\u0647\u0648 \u0642\u0627\u0639\u062f\u0629.<\/p>\r\n <\/div>\r\n <div>\r\n <p class=\"font-semibold text-white\/80 text-l l:text-base\">\u0627\u0644\u0645\u0627\u0621 \u0643\u062d\u0645\u0636 (\u0645\u0639 \u0642\u0627\u0639\u062f\u0629):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">NH<sub>3<\/sub> + H<sub>2<\/sub>O \u21cc NH<sub>4<\/sub><sup>+<\/sup> + OH<sup>-<\/sup><\/div>\r\n <p class=\"text-l l:text-base text-slate-400\">\u0647\u0646\u0627 \u0645\u0646\u062d \u0627\u0644\u0645\u0627\u0621 \u0628\u0631\u0648\u062a\u0648\u0646\u064b\u0627 \u0644\u0640 NH\u2083\u060c \u0644\u0630\u0627 \u0641\u0647\u0648 \u062d\u0645\u0636.<\/p>\r\n <\/div>\r\n <\/div>\r\n <h4 class=\"font-bold text-white\/90 mt-4 mb-2\">\u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0645\u0648\u0627\u062f \u0648\u0623\u064a\u0648\u0646\u0627\u062a \u0645\u062a\u0631\u062f\u062f\u0629 (\u0623\u0645\u0641\u0648\u062a\u064a\u0631\u064a\u0629):<\/h4>\r\n <div class=\"flex flex-wrap gap-2 text-l l:text-base\">\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">H<sub>2<\/sub>O<\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">HCO<sub>3<\/sub><sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">HSO<sub>3<\/sub><sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">H<sub>2<\/sub>PO<sub>4<\/sub><sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">HS<sup>-<\/sup><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0664. \u0645\u0641\u0647\u0648\u0645 \u0644\u0648\u064a\u0633<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg space-y-4\">\r\n <div>\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0623. \u062d\u0645\u0636 \u0644\u0648\u064a\u0633 (Lewis Acid):<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300\">\u0645\u0627\u062f\u0629 \u062a\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c\u064b\u0627 \u0645\u0646 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a\u060c \u0648\u063a\u0627\u0644\u0628\u064b\u0627 \u0645\u0627 \u062a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627.<\/p>\r\n <div class=\"mt-2\">\r\n <p class=\"text-l l:text-base text-slate-400 mb-1\">\u0623\u0645\u062b\u0644\u0629 (\u0645\u0631\u0643\u0628\u0627\u062a \u0630\u0627\u062a \u0646\u0642\u0635 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0623\u064a\u0648\u0646\u0627\u062a \u0645\u0648\u062c\u0628\u0629):<\/p>\r\n <div class=\"flex flex-wrap gap-2 text-l l:text-base\">\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">BF<sub>3<\/sub><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">AlCl<sub>3<\/sub><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">H<sup>+<\/sup><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">Mg<sup>2+<\/sup><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">Cu<sup>2+<\/sup><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0628. \u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633 (Lewis Base):<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300\">\u0645\u0627\u062f\u0629 \u062a\u0645\u0646\u062d \u0632\u0648\u062c\u064b\u0627 \u0623\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u063a\u064a\u0631 \u0627\u0644\u0631\u0627\u0628\u0637\u0629.<\/p>\r\n <div class=\"mt-2\">\r\n <p class=\"text-l l:text-base text-slate-400 mb-1\">\u0623\u0645\u062b\u0644\u0629 (\u0645\u0631\u0643\u0628\u0627\u062a \u0645\u062a\u0639\u0627\u062f\u0644\u0629 \u0648\u0623\u064a\u0648\u0646\u0627\u062a \u0633\u0627\u0644\u0628\u0629):<\/p>\r\n <div class=\"flex flex-wrap gap-2 text-l l:text-base\">\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">NH<sub>3<\/sub><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">H<sub>2<\/sub>O<\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">OH<sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">Cl<sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">CN<sup>-<\/sup><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0641\u0647\u0648\u0645 \u0644\u0648\u064a\u0633<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0627\u0646\u062a\u0642\u0627\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0645\u0646 \u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633 \u0625\u0644\u0649 \u062d\u0645\u0636 \u0644\u0648\u064a\u0633 \u0644\u062a\u0643\u0648\u064a\u0646 \u0631\u0627\u0628\u0637\u0629 \u062a\u0646\u0627\u0633\u0642\u064a\u0629.<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"lewis-canvas\" width=\"450\" height=\"180\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"play-lewis-btn\" class=\"control-btn\">\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <button id=\"reset-lewis-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg\">\r\n <p class=\"text-l l:text-base text-slate-300\">\r\n <span class=\"text-yellow-300 font-bold\">\u062a\u0641\u0627\u0639\u0644 NH\u2083 \u0645\u0639 BF\u2083:<\/span> \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 (NH\u2083) \u0643\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633 \u062a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u063a\u064a\u0631 \u0631\u0627\u0628\u0637 \u0625\u0644\u0649 \u062b\u0644\u0627\u062b\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0628\u0648\u0631\u0648\u0646 (BF\u2083) \u0643\u062d\u0645\u0636 \u0644\u0648\u064a\u0633\u060c \u0645\u0643\u0648\u0646\u0629 \u0645\u0639\u0642\u062f H\u2083N-BF\u2083.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"pt-2 border-t border-white\/10\">\r\n <h3 class=\"font-bold text-white\/90 mt-2 mb-2\">\u062c. \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0644\u0648\u064a\u0633:<\/h3>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u062a\u0641\u0627\u0639\u0644 NH\u2083 \u0645\u0639 BF\u2083:<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">NH<sub>3<\/sub> + BF<sub>3<\/sub> \u2192 H<sub>3<\/sub>N-BF<sub>3<\/sub><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300 mt-2\">\r\n <li>\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633: NH\u2083 (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/li>\r\n <li>\u062d\u0645\u0636 \u0644\u0648\u064a\u0633: BF\u2083 (\u064a\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0641\u064a \u0641\u0644\u0643\u0647 \u0627\u0644\u0641\u0627\u0631\u063a)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u062a\u0643\u0648\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645:<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">H<sub>2<\/sub>O + H<sup>+<\/sup> \u2192 H<sub>3<\/sub>O<sup>+<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300 mt-2\">\r\n <li>\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633: H\u2082O (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u0646 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646)<\/li>\r\n <li>\u062d\u0645\u0636 \u0644\u0648\u064a\u0633: H\u207a (\u064a\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0632\u0648\u062c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u062a\u0643\u0648\u0646 \u0623\u064a\u0648\u0646 \u0645\u0639\u0642\u062f:<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">Ag<sup>+<\/sup> + 2NH<sub>3<\/sub> \u2192 [Ag(NH<sub>3<\/sub>)<sub>2<\/sub>]<sup>+<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300 mt-2\">\r\n <li>\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633: NH\u2083 (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/li>\r\n <li>\u062d\u0645\u0636 \u0644\u0648\u064a\u0633: Ag\u207a (\u0623\u064a\u0648\u0646 \u0641\u0644\u0632 \u0627\u0646\u062a\u0642\u0627\u0644\u064a \u064a\u0633\u062a\u0642\u0628\u0644 \u0623\u0632\u0648\u0627\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0665. \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u064a\u0646 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u062b\u0644\u0627\u062b<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-right text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase tracking-wider\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u0645\u0641\u0647\u0648\u0645<\/th>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u062a\u0639\u0631\u064a\u0641<\/th>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u0645\u062d\u062f\u062f\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold\">\u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u062d\u0645\u0636: \u064a\u0646\u062a\u062c H\u207a\u060c \u0627\u0644\u0642\u0627\u0639\u062f\u0629: \u064a\u0646\u062a\u062c OH\u207b<\/td>\r\n <td class=\"px-6 py-4\">\u064a\u0642\u062a\u0635\u0631 \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629<\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold\">\u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u062d\u0645\u0636: \u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646\u060c \u0627\u0644\u0642\u0627\u0639\u062f\u0629: \u064a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646<\/td>\r\n <td class=\"px-6 py-4\">\u064a\u0634\u0645\u0644 \u0645\u062d\u0627\u0644\u064a\u0644 \u063a\u064a\u0631 \u0645\u0627\u0626\u064a\u0629<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-6 py-4 font-semibold\">\u0644\u0648\u064a\u0633<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u062d\u0645\u0636: \u064a\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u060c \u0627\u0644\u0642\u0627\u0639\u062f\u0629: \u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u0645\u0648\u0644\u064a\u0629<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u062e\u0644\u0627\u0635\u0629 \u0648\u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-l l:text-base\">\u062b\u0644\u0627\u062b \u0645\u0641\u0627\u0647\u064a\u0645 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f:<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base mt-2\">\r\n <li><strong>\u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/strong> \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 H\u207a \u0648 OH\u207b.<\/li>\r\n <li><strong>\u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a:<\/strong> \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0645\u0646\u062d \u0648\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646 \u0648\u0627\u0644\u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629.<\/li>\r\n <li><strong>\u0644\u0648\u064a\u0633:<\/strong> \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0645\u0646\u062d \u0648\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ ============================================\r\n \/\/ Arrhenius Simulation\r\n \/\/ ============================================\r\n class ArrheniusSimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('arrhenius-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 300;\r\n this.height = 220;\r\n this.waterLevel = 80;\r\n this.particles = [];\r\n this.animationId = null;\r\n this.activeChemical = 'none';\r\n this.ionCounts = { h: 0, oh: 0 };\r\n \r\n this.particleConfig = {\r\n 'H2O': { color: 'rgba(56, 189, 248, 0.3)', radius: 4, label: '' },\r\n 'HCl': { color: '#e2e8f0', radius: 8, label: 'HCl' },\r\n 'NaOH': { color: '#e2e8f0', radius: 8, label: 'NaOH' },\r\n 'H+': { color: '#f87171', radius: 5, label: 'H\u207a' },\r\n 'Cl-': { color: '#34d399', radius: 6, label: 'Cl\u207b' },\r\n 'Na+': { color: '#fde047', radius: 6, label: 'Na\u207a' },\r\n 'OH-': { color: '#c084fc', radius: 6, label: 'OH\u207b' }\r\n };\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.particles = [];\r\n \/\/ Create water background particles\r\n for (let i = 0; i < 50; i++) {\r\n this.particles.push({\r\n id: `h2o-${i}`, \r\n type: 'H2O',\r\n x: Math.random() * this.width, \r\n y: Math.random() * (this.height - this.waterLevel) + this.waterLevel,\r\n vx: (Math.random() - 0.5) * 0.5, \r\n vy: (Math.random() - 0.5) * 0.5,\r\n radius: 3 + Math.random() * 2, \r\n color: this.particleConfig['H2O'].color\r\n });\r\n }\r\n this.ionCounts = { h: 0, oh: 0 };\r\n this.updateIonCounts();\r\n }\r\n \r\n addChemical(type) {\r\n this.activeChemical = type;\r\n const count = 5;\r\n const particleType = type === 'acid' ? 'HCl' : 'NaOH';\r\n const config = this.particleConfig[particleType];\r\n \r\n for(let i = 0; i < count; i++) {\r\n this.particles.push({\r\n id: `${particleType}-${Date.now()}-${i}`,\r\n type: particleType,\r\n x: Math.random() * (this.width - 100) + 50,\r\n y: -20 - (Math.random() * 50),\r\n vx: (Math.random() - 0.5) * 1,\r\n vy: 3 + Math.random() * 2,\r\n radius: config.radius, \r\n color: config.color,\r\n label: config.label\r\n });\r\n }\r\n \r\n document.getElementById('arrhenius-status').textContent = \r\n type === 'acid' \r\n ? '\u062d\u0645\u0636 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633: \u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u207a).'\r\n : '\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633: \u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f (OH\u207b).';\r\n }\r\n \r\n reset() {\r\n this.activeChemical = 'none';\r\n this.init();\r\n document.getElementById('arrhenius-status').textContent = '\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u062d\u0645\u0636 \u0623\u0648 \u0642\u0627\u0639\u062f\u0629 \u0648\u0645\u0634\u0627\u0647\u062f\u0629 \u0627\u0644\u062a\u0641\u0643\u0643.';\r\n }\r\n \r\n updateIonCounts() {\r\n document.getElementById('h-ion-count').textContent = this.ionCounts.h;\r\n document.getElementById('oh-ion-count').textContent = this.ionCounts.oh;\r\n }\r\n \r\n drawBeaker() {\r\n const ctx = this.ctx;\r\n ctx.strokeStyle = '#64748b';\r\n ctx.lineWidth = 4;\r\n ctx.beginPath();\r\n ctx.moveTo(10, 10);\r\n ctx.lineTo(10, this.height - 10);\r\n ctx.lineTo(this.width - 10, this.height - 10);\r\n ctx.lineTo(this.width - 10, 10);\r\n ctx.stroke();\r\n \r\n \/\/ Draw liquid\r\n const gradient = ctx.createLinearGradient(0, this.waterLevel, 0, this.height);\r\n gradient.addColorStop(0, \"rgba(14, 165, 233, 0.2)\");\r\n gradient.addColorStop(1, \"rgba(14, 165, 233, 0.4)\");\r\n ctx.fillStyle = gradient;\r\n ctx.fillRect(12, this.waterLevel, this.width - 24, this.height - this.waterLevel - 12);\r\n \r\n \/\/ Water surface\r\n ctx.beginPath();\r\n ctx.moveTo(12, this.waterLevel);\r\n ctx.lineTo(this.width - 12, this.waterLevel);\r\n ctx.strokeStyle = \"rgba(56, 189, 248, 0.5)\";\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n \r\n drawParticles() {\r\n const ctx = this.ctx;\r\n const nextParticles = [];\r\n let currentH = 0;\r\n let currentOH = 0;\r\n\r\n this.particles.forEach(p => {\r\n \/\/ Physics update\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n\r\n \/\/ Wall collisions\r\n if (p.x < 20 || p.x > this.width - 20) p.vx *= -1;\r\n \r\n \/\/ Floor collision\r\n if (p.y > this.height - 20 - p.radius) {\r\n p.y = this.height - 20 - p.radius;\r\n p.vy *= -0.5;\r\n p.vx *= 0.9;\r\n }\r\n\r\n \/\/ Dissociation Logic\r\n let dissociated = false;\r\n if ((p.type === 'HCl' || p.type === 'NaOH') && p.y > this.waterLevel + 10) {\r\n dissociated = true;\r\n \/\/ Create ions\r\n const type1 = p.type === 'HCl' ? 'H+' : 'Na+';\r\n const type2 = p.type === 'HCl' ? 'Cl-' : 'OH-';\r\n \r\n const config1 = this.particleConfig[type1];\r\n const config2 = this.particleConfig[type2];\r\n\r\n nextParticles.push({\r\n id: `${p.id}-ion1`, type: type1,\r\n x: p.x - 5, y: p.y,\r\n vx: (Math.random() - 0.5) * 2 - 1, vy: (Math.random() - 0.5) * 2,\r\n radius: config1.radius, color: config1.color, label: config1.label\r\n });\r\n nextParticles.push({\r\n id: `${p.id}-ion2`, type: type2,\r\n x: p.x + 5, y: p.y,\r\n vx: (Math.random() - 0.5) * 2 + 1, vy: (Math.random() - 0.5) * 2,\r\n radius: config2.radius, color: config2.color, label: config2.label\r\n });\r\n }\r\n\r\n if (!dissociated) {\r\n \/\/ Keep particle\r\n \/\/ Float water\r\n if (p.type === 'H2O') {\r\n if (p.y < this.waterLevel) p.y = this.waterLevel;\r\n if (p.y > this.height - 20) p.y = this.height - 20;\r\n if (p.x < 20) p.x = 20;\r\n if (p.x > this.width - 20) p.x = this.width - 20;\r\n }\r\n \r\n \/\/ Keep ions in liquid\r\n if (['H+', 'Cl-', 'Na+', 'OH-'].includes(p.type)) {\r\n if (p.y < this.waterLevel + p.radius) {\r\n p.y = this.waterLevel + p.radius;\r\n p.vy *= -1;\r\n }\r\n p.vx *= 0.99;\r\n p.vy *= 0.99;\r\n \r\n \/\/ Count ions\r\n if (p.type === 'H+') currentH++;\r\n if (p.type === 'OH-') currentOH++;\r\n }\r\n\r\n nextParticles.push(p);\r\n }\r\n });\r\n\r\n this.particles = nextParticles;\r\n this.ionCounts = { h: currentH, oh: currentOH };\r\n this.updateIonCounts();\r\n\r\n \/\/ Draw particles\r\n this.particles.forEach(p => {\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n \r\n ctx.strokeStyle = 'rgba(0,0,0,0.2)';\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n\r\n if (p.label && p.type !== 'H2O') {\r\n ctx.fillStyle = '#1e293b';\r\n ctx.font = 'bold 10px sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(p.label, p.x, p.y);\r\n }\r\n });\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.drawBeaker();\r\n this.drawParticles();\r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n start() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stop() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Bronsted-Lowry Simulation\r\n \/\/ ============================================\r\n class BronstedLowrySimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('bronsted-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 450;\r\n this.height = 180;\r\n this.reaction = 'hcl_water';\r\n this.state = 'initial';\r\n this.animationId = null;\r\n this.species = {};\r\n this.proton = null;\r\n \r\n this.reactions = {\r\n hcl_water: {\r\n equation: 'HCl + H\u2082O \u2192 H\u2083O\u207a + Cl\u207b',\r\n species: { acid: 'HCl', base: 'H\u2082O', conjAcid: 'H\u2083O\u207a', conjBase: 'Cl\u207b' }\r\n },\r\n nh3_water: {\r\n equation: 'NH\u2083 + H\u2082O \u21cc NH\u2084\u207a + OH\u207b',\r\n species: { acid: 'H\u2082O', base: 'NH\u2083', conjAcid: 'NH\u2084\u207a', conjBase: 'OH\u207b' }\r\n }\r\n };\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.setupState('initial');\r\n }\r\n \r\n setupState(targetState) {\r\n const config = this.reactions[this.reaction];\r\n this.species = {};\r\n this.proton = null;\r\n \r\n const setupSpecies = (label, initialX, initialY, targetX, targetY, initialOpacity) => {\r\n this.species[label] = { \r\n label, \r\n x: initialX, \r\n y: initialY, \r\n targetX, \r\n targetY, \r\n vx: 0, \r\n vy: 0, \r\n opacity: initialOpacity \r\n };\r\n };\r\n\r\n const acidLabel = config.species.acid;\r\n const baseLabel = config.species.base;\r\n const conjAcidLabel = config.species.conjAcid;\r\n const conjBaseLabel = config.species.conjBase;\r\n\r\n if (targetState === 'initial' || targetState === 'transfer') {\r\n setupSpecies(acidLabel, 50, this.height \/ 2, 50, this.height\/2, 1);\r\n setupSpecies(baseLabel, this.width - 50, this.height \/ 2, this.width-50, this.height\/2, 1);\r\n setupSpecies(conjAcidLabel, this.width - 50, this.height \/ 2, this.width - 50, this.height\/2, 0);\r\n setupSpecies(conjBaseLabel, 50, this.height \/ 2, 50, this.height\/2, 0);\r\n } else if (targetState === 'final') {\r\n setupSpecies(acidLabel, 50, this.height \/ 2, 50, this.height\/2, 0);\r\n setupSpecies(baseLabel, this.width - 50, this.height \/ 2, this.width-50, this.height\/2, 0);\r\n setupSpecies(conjAcidLabel, this.width - 50, this.height \/ 2, this.width - 50, this.height\/2, 1);\r\n setupSpecies(conjBaseLabel, 50, this.height \/ 2, 50, this.height\/2, 1);\r\n }\r\n\r\n if (targetState === 'transfer') {\r\n const acid = this.species[acidLabel];\r\n this.proton = { x: acid.x, y: acid.y, opacity: 1 };\r\n }\r\n\r\n this.state = targetState;\r\n this.updateLabels();\r\n }\r\n \r\n play() {\r\n if (this.state === 'initial') {\r\n this.setupState('transfer');\r\n setTimeout(() => {\r\n this.setupState('final');\r\n }, 1500);\r\n }\r\n }\r\n \r\n reset() {\r\n this.setupState('initial');\r\n }\r\n \r\n setReaction(reaction) {\r\n this.reaction = reaction;\r\n document.getElementById('bronsted-equation').textContent = this.reactions[reaction].equation;\r\n this.setupState('initial');\r\n this.updateLabels();\r\n }\r\n \r\n updateLabels() {\r\n const config = this.reactions[this.reaction];\r\n document.getElementById('acid-label').textContent = this.state !== 'final' ? config.species.acid : '';\r\n document.getElementById('base-label').textContent = this.state !== 'final' ? config.species.base : '';\r\n document.getElementById('conj-base-label').textContent = this.state === 'final' ? config.species.conjBase : '';\r\n document.getElementById('conj-acid-label').textContent = this.state === 'final' ? config.species.conjAcid : '';\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.ctx.fillStyle = '#0f172a';\r\n this.ctx.fillRect(0, 0, this.width, this.height);\r\n\r\n \/\/ Draw species\r\n Object.values(this.species).forEach(s => {\r\n this.ctx.globalAlpha = s.opacity;\r\n this.ctx.fillStyle = '#e2e8f0';\r\n this.ctx.font = 'bold 24px monospace';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.fillText(s.label, s.x, s.y);\r\n });\r\n this.ctx.globalAlpha = 1;\r\n\r\n \/\/ Draw proton if in transfer state\r\n if (this.state === 'transfer' && this.proton) {\r\n const base = this.species[this.reactions[this.reaction].species.base];\r\n this.proton.x += (base.x - this.proton.x) * 0.05;\r\n this.proton.y += (base.y - this.proton.y) * 0.05;\r\n \r\n this.ctx.fillStyle = '#f87171';\r\n this.ctx.font = 'bold 24px monospace';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.fillText('H\u207a', this.proton.x, this.proton.y);\r\n }\r\n \r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n start() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stop() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Hydronium Formation Simulation\r\n \/\/ ============================================\r\n class HydroniumSimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('hydronium-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 450;\r\n this.height = 200;\r\n this.waterMolecules = [];\r\n this.proton = null;\r\n this.animationId = null;\r\n this.state = 'idle';\r\n this.numWaterMolecules = 15;\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.waterMolecules = [];\r\n for (let i = 0; i < this.numWaterMolecules; i++) {\r\n this.waterMolecules.push({\r\n id: i,\r\n x: Math.random() * (this.width - 100) + 50,\r\n y: Math.random() * (this.height - 100) + 50,\r\n vx: (Math.random() - 0.5) * 0.2,\r\n vy: (Math.random() - 0.5) * 0.2,\r\n angle: Math.random() * Math.PI * 2,\r\n va: (Math.random() - 0.5) * 0.01,\r\n isTarget: false\r\n });\r\n }\r\n this.proton = null;\r\n this.state = 'idle';\r\n }\r\n \r\n start() {\r\n if (this.state === 'idle') {\r\n \/\/ Find target molecule near center\r\n let targetMolecule = this.waterMolecules.reduce((prev, curr) => {\r\n const prevDist = Math.hypot(prev.x - this.width \/ 2, prev.y - this.height \/ 2);\r\n const currDist = Math.hypot(curr.x - this.width \/ 2, curr.y - this.height \/ 2);\r\n return currDist < prevDist ? curr : prev;\r\n });\r\n \r\n targetMolecule.isTarget = true;\r\n \r\n this.proton = {\r\n x: 20, \r\n y: this.height \/ 2,\r\n vx: (targetMolecule.x - 20) \/ 120,\r\n vy: (targetMolecule.y - (this.height \/ 2)) \/ 120,\r\n target: targetMolecule\r\n };\r\n \r\n this.state = 'proton_moving';\r\n }\r\n }\r\n \r\n reset() {\r\n this.state = 'idle';\r\n this.init();\r\n }\r\n \r\n drawWater(molecule, isHydronium = false) {\r\n const ctx = this.ctx;\r\n ctx.save();\r\n ctx.translate(molecule.x, molecule.y);\r\n ctx.rotate(molecule.angle);\r\n\r\n \/\/ Oxygen\r\n ctx.fillStyle = '#ef4444';\r\n ctx.beginPath();\r\n ctx.arc(0, 0, 12, 0, 2 * Math.PI);\r\n ctx.fill();\r\n\r\n \/\/ Hydrogens\r\n ctx.fillStyle = '#f1f5f9';\r\n ctx.beginPath();\r\n ctx.arc(15, -10, 6, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.beginPath();\r\n ctx.arc(15, 10, 6, 0, 2 * Math.PI);\r\n ctx.fill();\r\n \r\n if (isHydronium) {\r\n ctx.beginPath();\r\n ctx.arc(-15, 0, 6, 0, 2 * Math.PI);\r\n ctx.fill();\r\n \r\n \/\/ Draw charge\r\n ctx.fillStyle = '#facc15';\r\n ctx.font = 'bold 20px sans-serif';\r\n ctx.fillText('+', 0, -20);\r\n }\r\n ctx.restore();\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.ctx.fillStyle = '#0f172a';\r\n this.ctx.fillRect(0, 0, this.width, this.height);\r\n\r\n \/\/ Update and draw water molecules\r\n this.waterMolecules.forEach(m => {\r\n if (this.state !== 'hydronium_formed' || !m.isTarget) {\r\n m.x += m.vx; \r\n m.y += m.vy;\r\n m.angle += m.va;\r\n \r\n if (m.x < 15 || m.x > this.width - 15) m.vx *= -1;\r\n if (m.y < 15 || m.y > this.height - 15) m.vy *= -1;\r\n }\r\n \r\n const isHydronium = this.state === 'hydronium_formed' && m.isTarget;\r\n this.drawWater(m, isHydronium);\r\n });\r\n\r\n \/\/ Update and draw proton\r\n if (this.state === 'proton_moving' && this.proton) {\r\n const proton = this.proton;\r\n const target = this.proton.target;\r\n \r\n if (target) {\r\n const dist = Math.hypot(proton.x - target.x, proton.y - target.y);\r\n if (dist < 5) {\r\n this.proton = null;\r\n this.state = 'hydronium_formed';\r\n } else {\r\n \/\/ Accelerate towards target\r\n const dx = target.x - proton.x;\r\n const dy = target.y - proton.y;\r\n proton.vx = dx \/ 50;\r\n proton.vy = dy \/ 50;\r\n proton.x += proton.vx;\r\n proton.y += proton.vy;\r\n }\r\n }\r\n \r\n if (this.proton) {\r\n this.ctx.fillStyle = '#f87171';\r\n this.ctx.beginPath();\r\n this.ctx.arc(proton.x, proton.y, 6, 0, 2 * Math.PI);\r\n this.ctx.fill();\r\n this.ctx.fillStyle = 'white';\r\n this.ctx.font = 'bold 10px sans-serif';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.textBaseline = 'middle';\r\n this.ctx.fillText('+', proton.x, proton.y);\r\n }\r\n }\r\n \r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n startAnimation() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stopAnimation() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Lewis Simulation\r\n \/\/ ============================================\r\n class LewisSimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('lewis-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 450;\r\n this.height = 180;\r\n this.state = 'initial';\r\n this.animationId = null;\r\n this.progress = 0;\r\n \r\n this.nh3 = { x: 100, y: this.height \/ 2 };\r\n this.bf3 = { x: this.width - 100, y: this.height \/ 2 };\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.state = 'initial';\r\n this.progress = 0;\r\n }\r\n \r\n play() {\r\n if(this.state === 'initial') {\r\n this.state = 'bonding';\r\n }\r\n }\r\n \r\n reset() {\r\n this.state = 'initial';\r\n this.progress = 0;\r\n }\r\n \r\n drawMolecule(label, x, y, color) {\r\n this.ctx.fillStyle = color;\r\n this.ctx.font = 'bold 24px monospace';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.fillText(label, x, y);\r\n }\r\n \r\n drawLonePair(x, y, p) {\r\n const endX = this.nh3.x + (this.bf3.x - this.nh3.x) * p;\r\n this.ctx.fillStyle = '#fde047';\r\n this.ctx.beginPath();\r\n this.ctx.arc(x + (endX - x) * p, y, 3, 0, Math.PI * 2);\r\n this.ctx.fill();\r\n this.ctx.beginPath();\r\n this.ctx.arc(x + 5 + (endX - (x + 5)) * p, y - 5, 3, 0, Math.PI * 2);\r\n this.ctx.fill();\r\n }\r\n \r\n drawBond(p) {\r\n if (p <= 0) return;\r\n this.ctx.strokeStyle = '#fde047';\r\n this.ctx.lineWidth = 2;\r\n this.ctx.beginPath();\r\n this.ctx.moveTo(this.nh3.x + 30, this.nh3.y);\r\n this.ctx.lineTo(this.nh3.x + 30 + (this.bf3.x - 40 - (this.nh3.x + 30)) * p, this.nh3.y);\r\n this.ctx.stroke();\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.ctx.fillStyle = '#0f172a';\r\n this.ctx.fillRect(0, 0, this.width, this.height);\r\n\r\n \/\/ Animate progress\r\n if (this.state === 'bonding' && this.progress < 1) {\r\n this.progress += 0.02;\r\n } else if (this.state === 'bonding' && this.progress >= 1) {\r\n this.state = 'final';\r\n } else if (this.state === 'initial') {\r\n this.progress = 0;\r\n }\r\n \r\n \/\/ Draw molecules\r\n this.drawMolecule('NH\u2083', this.nh3.x, this.nh3.y, '#c084fc');\r\n this.drawMolecule('BF\u2083', this.bf3.x, this.bf3.y, '#67e8f9');\r\n\r\n \/\/ Draw lone pair and bond\r\n if(this.state === 'final') {\r\n this.drawBond(1);\r\n } else {\r\n this.drawLonePair(this.nh3.x + 25, this.nh3.y, this.progress);\r\n this.drawBond(this.progress);\r\n }\r\n\r\n \/\/ Draw labels\r\n this.ctx.fillStyle = '#e2e8f0';\r\n this.ctx.font = '14px Cairo';\r\n this.ctx.fillText('\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633', this.nh3.x, this.nh3.y + 35);\r\n this.ctx.fillText('(\u0645\u0627\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a)', this.nh3.x, this.nh3.y + 55);\r\n \r\n this.ctx.fillText('\u062d\u0645\u0636 \u0644\u0648\u064a\u0633', this.bf3.x, this.bf3.y + 35);\r\n this.ctx.fillText('(\u0645\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a)', this.bf3.x, this.bf3.y + 55);\r\n \r\n \/\/ Draw plus sign\r\n if(this.state !== 'final') {\r\n this.ctx.font = '30px Cairo';\r\n this.ctx.fillText('+', this.width\/2, this.height\/2 + 10);\r\n }\r\n \r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n start() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stop() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Initialize all simulations when page loads\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ Initialize Arrhenius simulation\r\n const arrheniusSim = new ArrheniusSimulation();\r\n arrheniusSim.start();\r\n \r\n document.getElementById('add-acid-btn').addEventListener('click', () => {\r\n arrheniusSim.addChemical('acid');\r\n });\r\n \r\n document.getElementById('add-base-btn').addEventListener('click', () => {\r\n arrheniusSim.addChemical('base');\r\n });\r\n \r\n document.getElementById('reset-arrhenius-btn').addEventListener('click', () => {\r\n arrheniusSim.reset();\r\n });\r\n \r\n \/\/ Initialize Bronsted-Lowry simulation\r\n const bronstedSim = new BronstedLowrySimulation();\r\n bronstedSim.start();\r\n \r\n document.getElementById('hcl-reaction-btn').addEventListener('click', () => {\r\n bronstedSim.setReaction('hcl_water');\r\n document.getElementById('hcl-reaction-btn').classList.add('bg-purple-600');\r\n document.getElementById('hcl-reaction-btn').classList.remove('hover:bg-slate-600\/50');\r\n document.getElementById('nh3-reaction-btn').classList.remove('bg-purple-600');\r\n document.getElementById('nh3-reaction-btn').classList.add('hover:bg-slate-600\/50');\r\n });\r\n \r\n document.getElementById('nh3-reaction-btn').addEventListener('click', () => {\r\n bronstedSim.setReaction('nh3_water');\r\n document.getElementById('nh3-reaction-btn').classList.add('bg-purple-600');\r\n document.getElementById('nh3-reaction-btn').classList.remove('hover:bg-slate-600\/50');\r\n document.getElementById('hcl-reaction-btn').classList.remove('bg-purple-600');\r\n document.getElementById('hcl-reaction-btn').classList.add('hover:bg-slate-600\/50');\r\n });\r\n \r\n document.getElementById('play-bronsted-btn').addEventListener('click', () => {\r\n bronstedSim.play();\r\n });\r\n \r\n document.getElementById('reset-bronsted-btn').addEventListener('click', () => {\r\n bronstedSim.reset();\r\n });\r\n \r\n \/\/ Initialize Hydronium simulation\r\n const hydroniumSim = new HydroniumSimulation();\r\n hydroniumSim.startAnimation();\r\n \r\n document.getElementById('start-hydronium-btn').addEventListener('click', () => {\r\n hydroniumSim.start();\r\n });\r\n \r\n document.getElementById('reset-hydronium-btn').addEventListener('click', () => {\r\n hydroniumSim.reset();\r\n });\r\n \r\n \/\/ Initialize Lewis simulation\r\n const lewisSim = new LewisSimulation();\r\n lewisSim.start();\r\n \r\n document.getElementById('play-lewis-btn').addEventListener('click', () => {\r\n lewisSim.play();\r\n });\r\n \r\n document.getElementById('reset-lewis-btn').addEventListener('click', () => {\r\n lewisSim.reset();\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17312","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/comments?post=17312"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17312\/revisions"}],"predecessor-version":[{"id":17313,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17312\/revisions\/17313"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n \r\n .simulation-container {\r\n margin: 2rem 0;\r\n padding: 1.5rem;\r\n background-color: rgba(0, 0, 0, 0.2);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n }\r\n \r\n .canvas-container {\r\n display: flex;\r\n justify-content: center;\r\n margin: 1rem 0;\r\n }\r\n \r\n canvas {\r\n border-radius: 0.5rem;\r\n background-color: rgba(15, 23, 42, 0.8);\r\n }\r\n \r\n .control-btn {\r\n background: linear-gradient(135deg, #4f46e5, #7c3aed);\r\n color: white;\r\n border: none;\r\n padding: 0.5rem 1rem;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n font-family: 'Cairo', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .control-btn:hover {\r\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\r\n }\r\n \r\n .control-btn:active {\r\n transform: translateY(0);\r\n }\r\n \r\n .reset-btn {\r\n background: rgba(239, 68, 68, 0.2);\r\n color: #fca5a5;\r\n border: 1px solid rgba(239, 68, 68, 0.3);\r\n }\r\n \r\n .reset-btn:hover {\r\n background: rgba(239, 68, 68, 0.3);\r\n box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);\r\n }\r\n \r\n .stats-box {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 0.5rem;\r\n padding: 0.75rem;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631 - \u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/acidsAndBases.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/acidsAndBases.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 text-right\">\r\n \r\n<div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n <h1 class=\"text-2xl l:text-3xl font-bold text-purple-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0627\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f - \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h1>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0661. \u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0645\u0627 \u0647\u064a \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f\u061f<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0627\u0644\u062d\u0645\u0648\u0636 (\u0627\u0644\u0623\u062d\u0645\u0627\u0636)<\/h3>\r\n <p class=\"mb-2 text-l l:text-base\">\u0645\u0648\u0627\u062f \u062a\u0646\u062a\u062c \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 H<sup>+<\/sup> \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629.<\/p>\r\n <p class=\"font-semibold text-slate-300 text-l l:text-base mt-2\">\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-l l:text-base mt-1\">\r\n <li>\u0637\u0639\u0645 \u0644\u0627\u0630\u0639<\/li>\r\n <li>\u062a\u0648\u0635\u0644 \u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/li>\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0637\u0644\u0642\u0629 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646<\/li>\r\n <li>\u062a\u062d\u0645\u0631 \u0635\u0628\u063a\u0629 \u0639\u0628\u0627\u062f \u0627\u0644\u0634\u0645\u0633<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f (\u0627\u0644\u0642\u0644\u0648\u064a\u0627\u062a)<\/h3>\r\n <p class=\"mb-2 text-l l:text-base\">\u0645\u0648\u0627\u062f \u062a\u0646\u062a\u062c \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f OH<sup>-<\/sup> \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629.<\/p>\r\n <p class=\"font-semibold text-slate-300 text-l l:text-base mt-2\">\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-l l:text-base mt-1\">\r\n <li>\u0637\u0639\u0645 \u0645\u0631<\/li>\r\n <li>\u0645\u0644\u0645\u0633 \u0635\u0627\u0628\u0648\u0646\u064a<\/li>\r\n <li>\u062a\u0648\u0635\u0644 \u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/li>\r\n <li>\u062a\u0632\u0631\u0642 \u0635\u0628\u063a\u0629 \u0639\u0628\u0627\u062f \u0627\u0644\u0634\u0645\u0633<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0645\u0627\u0643\u0646 \u062a\u0648\u0627\u062c\u062f \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0648\u0623\u0634\u0647\u0631 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a\u0647\u0627<\/h2>\r\n <p class=\"text-slate-300 mb-4 text-l l:text-base\">\u062a\u062a\u0648\u0627\u062c\u062f \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0628\u0643\u062b\u0631\u0629 \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629\u060c \u0648\u0644\u0647\u0627 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629 \u0648\u0645\u0647\u0645\u0629:<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-red-400 mb-2\">\u0627\u0644\u062d\u0645\u0648\u0636:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-l l:text-base\">\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u063a\u0630\u0627\u0621:<\/strong> \u0627\u0644\u0644\u064a\u0645\u0648\u0646 \u0648\u0627\u0644\u0628\u0631\u062a\u0642\u0627\u0644 (\u062d\u0645\u0636 \u0627\u0644\u0633\u062a\u0631\u064a\u0643)\u060c \u0627\u0644\u062e\u0644 (\u062d\u0645\u0636 \u0627\u0644\u0623\u0633\u064a\u062a\u064a\u0643)\u060c \u0627\u0644\u0644\u0628\u0646 (\u062d\u0645\u0636 \u0627\u0644\u0644\u0627\u0643\u062a\u064a\u0643).<\/li>\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629:<\/strong>\r\n <ul class=\"list-disc list-inside ml-4 mt-1 space-y-1 text-l l:text-base\">\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0643\u0628\u0631\u064a\u062a\u064a\u0643 (H\u2082SO\u2084): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0633\u0645\u062f\u0629\u060c \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0627\u062a\u060c \u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643\u060c \u0648\u0627\u0644\u0645\u0646\u0638\u0641\u0627\u062a.<\/li>\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 (HCl): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u0645\u0639\u0627\u062f\u0646\u060c \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643\u060c \u0648\u0641\u064a \u0627\u0644\u0647\u0636\u0645 \u0628\u0627\u0644\u0645\u0639\u062f\u0629.<\/li>\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0646\u064a\u062a\u0631\u064a\u0643 (HNO\u2083): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062a\u0641\u062c\u0631\u0627\u062a \u0648\u0627\u0644\u0623\u0633\u0645\u062f\u0629.<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-blue-400 mb-2\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-l l:text-base\">\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629:<\/strong> \u0627\u0644\u0635\u0627\u0628\u0648\u0646 \u0648\u0627\u0644\u0645\u0646\u0638\u0641\u0627\u062a (\u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 \u0623\u0648 \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645)\u060c \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 (NH\u2083) \u0641\u064a \u0633\u0648\u0627\u0626\u0644 \u0627\u0644\u062a\u0646\u0638\u064a\u0641.<\/li>\r\n <li><strong class=\"text-white\">\u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629:<\/strong>\r\n <ul class=\"list-disc list-inside ml-4 mt-1 space-y-1 text-l l:text-base\">\r\n <li>\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (NaOH): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0635\u0627\u0628\u0648\u0646 \u0648\u0627\u0644\u0648\u0631\u0642 \u0648\u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0645\u064a\u0627\u0647.<\/li>\r\n <li>\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca(OH)\u2082): \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0628\u0646\u0627\u0621 (\u0627\u0644\u062c\u064a\u0631 \u0627\u0644\u0645\u0637\u0641\u0623) \u0648\u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u062a\u0631\u0628\u0629 \u0627\u0644\u062d\u0645\u0636\u064a\u0629.<\/li>\r\n <li>\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg(OH)\u2082): \u064a\u0633\u062a\u062e\u062f\u0645 \u0643\u0645\u0636\u0627\u062f \u0644\u0644\u062d\u0645\u0648\u0636\u0629 (\u062d\u0644\u064a\u0628 \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0627).<\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0662. \u0645\u0641\u0647\u0648\u0645 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0623. \u0627\u0644\u062d\u0645\u0636 \u062d\u0633\u0628 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300 mb-2\">\u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0648\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a H<sup>+<\/sup>.<\/p>\r\n \r\n <p class=\"text-l l:text-base text-slate-300 font-semibold mt-2\">\u0645\u062b\u0627\u0644 (\u062a\u0623\u064a\u0646 \u0643\u0644\u064a \u0644\u062d\u0645\u0636 \u0642\u0648\u064a):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">HCl \u2192 H<sup>+<\/sup> + Cl<sup>-<\/sup><\/div>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">H<sub>2<\/sub>SO<sub>4<\/sub> \u2192 2H<sup>+<\/sup> + SO<sub>4<\/sub><sup>2-<\/sup><\/div>\r\n\r\n <p class=\"text-l l:text-base text-slate-300 font-semibold mt-3\">\u0645\u062b\u0627\u0644 (\u062a\u0623\u064a\u0646 \u062c\u0632\u0626\u064a \u0644\u062d\u0645\u0636 \u0636\u0639\u064a\u0641):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">CH<sub>3<\/sub>COOH \u21cc CH<sub>3<\/sub>COO<sup>-<\/sup> + H<sup>+<\/sup><\/div>\r\n <p class=\"text-l l:text-base text-slate-400 mt-1\">\u0645\u0644\u0627\u062d\u0638\u0629: \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0645\u0632\u062f\u0648\u062c (\u21cc) \u064a\u062f\u0644 \u0639\u0644\u0649 \u0623\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0646\u0639\u0643\u0633 \u0648\u0623\u0646 \u0627\u0644\u062d\u0645\u0636 \u064a\u062a\u0623\u064a\u0646 \u0628\u0634\u0643\u0644 \u062c\u0632\u0626\u064a \u0641\u0642\u0637\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0633\u0647\u0645 \u0627\u0644\u0648\u0627\u062d\u062f (\u2192) \u064a\u062f\u0644 \u0639\u0644\u0649 \u062a\u0623\u064a\u0646 \u0643\u0644\u064a.<\/p>\r\n\r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0641\u0647\u0648\u0645 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u062a\u062a\u0641\u0643\u0643 \u0627\u0644\u0623\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0642\u0648\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0646\u062a\u062c \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0623\u0648 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f.<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"arrhenius-canvas\" width=\"300\" height=\"220\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"add-acid-btn\" class=\"control-btn\">\u0623\u0636\u0641 \u062d\u0645\u0636 (HCl)<\/button>\r\n <button id=\"add-base-btn\" class=\"control-btn\">\u0623\u0636\u0641 \u0642\u0627\u0639\u062f\u0629 (NaOH)<\/button>\r\n <button id=\"reset-arrhenius-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 mb-4\">\r\n <div class=\"stats-box\">\r\n <p class=\"text-slate-400 mb-1\">\u0639\u062f\u062f \u0623\u064a\u0648\u0646\u0627\u062a H\u207a<\/p>\r\n <p class=\"text-xl font-bold text-red-400\" id=\"h-ion-count\">0<\/p>\r\n <\/div>\r\n <div class=\"stats-box\">\r\n <p class=\"text-slate-400 mb-1\">\u0639\u062f\u062f \u0623\u064a\u0648\u0646\u0627\u062a OH\u207b<\/p>\r\n <p class=\"text-xl font-bold text-blue-400\" id=\"oh-ion-count\">0<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg\">\r\n <p class=\"text-l l:text-base text-slate-300\" id=\"arrhenius-status\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u062d\u0645\u0636 \u0623\u0648 \u0642\u0627\u0639\u062f\u0629 \u0648\u0645\u0634\u0627\u0647\u062f\u0629 \u0627\u0644\u062a\u0641\u0643\u0643.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u0628. \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u062d\u0633\u0628 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300 mb-2\">\u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0648\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a OH<sup>-<\/sup>.<\/p>\r\n <p class=\"text-l l:text-base text-slate-300 font-semibold\">\u0623\u0645\u062b\u0644\u0629:<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">NaOH \u2192 Na<sup>+<\/sup> + OH<sup>-<\/sup><\/div>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">Ca(OH)<sub>2<\/sub> \u2192 Ca<sup>2+<\/sup> + 2OH<sup>-<\/sup><\/div>\r\n \r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u062c. \u0642\u064a\u0648\u062f \u0645\u0641\u0647\u0648\u0645 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base\">\r\n <li>\u064a\u0642\u062a\u0635\u0631 \u0639\u0644\u0649 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629 \u0641\u0642\u0637.<\/li>\r\n <li>\u0644\u0645 \u064a\u062a\u0645\u0643\u0646 \u0645\u0646 \u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0642\u0627\u0639\u062f\u064a \u0644\u0645\u0648\u0627\u062f \u0644\u0627 \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f (\u0645\u062b\u0644 NH\u2083).<\/li>\r\n <li>\u0644\u0645 \u064a\u062a\u0645\u0643\u0646 \u0645\u0646 \u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u062d\u0645\u0636\u064a \u0623\u0648 \u0627\u0644\u0642\u0627\u0639\u062f\u064a \u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0628\u0639\u0636 \u0627\u0644\u0623\u0645\u0644\u0627\u062d (\u0645\u062b\u0644 NH\u2084Cl).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0642\u0648\u064a\u0629 \u0648\u0627\u0644\u0636\u0639\u064a\u0641\u0629<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-right text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase tracking-wider\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u0646\u0648\u0639<\/th>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0623\u0645\u062b\u0644\u0629 \u0634\u0627\u0626\u0639\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold text-red-400\">\u062d\u0645\u0648\u0636 \u0642\u0648\u064a\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">HCl, HBr, HI, HNO<sub>3<\/sub>, H<sub>2<\/sub>SO<sub>4<\/sub>, HClO<sub>4<\/sub><\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold text-orange-400\">\u062d\u0645\u0648\u0636 \u0636\u0639\u064a\u0641\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">CH<sub>3<\/sub>COOH, H<sub>2<\/sub>CO<sub>3<\/sub>, HF, H<sub>3<\/sub>PO<sub>4<\/sub><\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold text-blue-400\">\u0642\u0648\u0627\u0639\u062f \u0642\u0648\u064a\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">LiOH, NaOH, KOH, Ca(OH)<sub>2<\/sub>, Sr(OH)<sub>2<\/sub>, Ba(OH)<sub>2<\/sub><\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-6 py-4 font-semibold text-sky-400\">\u0642\u0648\u0627\u0639\u062f \u0636\u0639\u064a\u0641\u0629<\/td>\r\n <td class=\"px-6 py-4 font-mono text-left\" dir=\"ltr\">NH<sub>3<\/sub>, CH<sub>3<\/sub>NH<sub>2<\/sub>, C<sub>5<\/sub>H<sub>5<\/sub>N<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mt-2 text-l l:text-base text-slate-400\">\u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0642\u0648\u064a\u0629 \u062a\u062a\u0623\u064a\u0646 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0636\u0639\u064a\u0641\u0629 \u062a\u062a\u0623\u064a\u0646 \u0628\u0634\u0643\u0644 \u062c\u0632\u0626\u064a.<\/p>\r\n <\/section>\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062a\u0643\u0648\u0651\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base\">\u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629\u060c \u0644\u0627 \u064a\u0648\u062c\u062f \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H<sup>+<\/sup>) \u0623\u0648 \u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646 \u0628\u0634\u0643\u0644 \u062d\u0631. \u0646\u0638\u0631\u0627\u064b \u0644\u0635\u063a\u0631 \u062d\u062c\u0645\u0647 \u0648\u0634\u062d\u0646\u062a\u0647 \u0627\u0644\u0639\u0627\u0644\u064a\u0629\u060c \u0641\u0625\u0646\u0647 \u064a\u0631\u062a\u0628\u0637 \u0645\u0628\u0627\u0634\u0631\u0629 \u0628\u0623\u062d\u062f \u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u063a\u064a\u0631 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0639\u0644\u0649 \u0630\u0631\u0629 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0641\u064a \u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621\u060c \u0645\u0643\u0648\u0646\u0627\u064b \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645 (H<sub>3<\/sub>O<sup>+<\/sup>).<\/p>\r\n <div class=\"bg-slate-900\/50 p-3 my-4 rounded-lg border-l-4 border-purple-400\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0642\u064a\u0629 (Coordinate Bond)<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-2\">\r\n \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0627\u0644\u062a\u0646\u0627\u0633\u0642\u064a\u0629 \u0647\u064a \u0646\u0648\u0639 \u062e\u0627\u0635 \u0645\u0646 \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0627\u0644\u062a\u0633\u0627\u0647\u0645\u064a\u0629\u060c \u062d\u064a\u062b \u064a\u0623\u062a\u064a \u0632\u0648\u062c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0634\u0627\u0631\u0643 \u0641\u064a \u0627\u0644\u0631\u0627\u0628\u0637\u0629 \u0645\u0646 \u0630\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u0641\u0642\u0637 (\u0627\u0644\u0630\u0631\u0629 \u0627\u0644\u0645\u0627\u0646\u062d\u0629) \u0625\u0644\u0649 \u0630\u0631\u0629 \u0623\u062e\u0631\u0649 \u062a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627 (\u0627\u0644\u0630\u0631\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u0629).\r\n <\/p>\r\n <p class=\"text-slate-300 text-l l:text-base\">\r\n \u0641\u064a \u062d\u0627\u0644\u0629 \u062a\u0643\u0648\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645\u060c \u064a\u0639\u0645\u0644 \u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621 \u0643\u0630\u0631\u0629 \u0645\u0627\u0646\u062d\u0629 (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646)\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0639\u0645\u0644 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 H\u207a \u0643\u0630\u0631\u0629 \u0645\u0633\u062a\u0642\u0628\u0644\u0629 (\u064a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627).\r\n <\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u062a\u0643\u0648\u064a\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u064a\u0631\u062a\u0628\u0637 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u207a) \u0628\u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0643\u0648\u064a\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645 (H\u2083O\u207a).<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"hydronium-canvas\" width=\"450\" height=\"200\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"start-hydronium-btn\" class=\"control-btn\">\u0628\u062f\u0621 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629<\/button>\r\n <button id=\"reset-hydronium-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg\">\r\n <p class=\"text-l l:text-base text-slate-300\">\r\n <span class=\"text-yellow-300 font-bold\">\u062a\u0641\u0633\u064a\u0631:<\/span> \u062c\u0632\u064a\u0621 \u0627\u0644\u0645\u0627\u0621 (H\u2082O) \u064a\u0645\u062a\u0644\u0643 \u0632\u0648\u062c\u064b\u0627 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u064b\u0627 \u063a\u064a\u0631 \u0631\u0627\u0628\u0637 \u0639\u0644\u0649 \u0630\u0631\u0629 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0639\u0646\u062f\u0645\u0627 \u064a\u0642\u062a\u0631\u0628 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u207a) - \u0627\u0644\u0630\u064a \u064a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627 - \u064a\u062a\u0643\u0648\u0646 \u0631\u0627\u0628\u0637\u0629 \u062a\u0646\u0627\u0633\u0642\u064a\u0629\u060c \u0645\u0646\u062a\u062c\u064b\u0627 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645 (H\u2083O\u207a).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0663. \u0645\u0641\u0647\u0648\u0645 \u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0623. \u0627\u0644\u062a\u0639\u0631\u064a\u0641:<\/h3>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base\">\r\n <li><strong>\u0627\u0644\u062d\u0645\u0636:<\/strong> \u0645\u0627\u062f\u0629 \u062a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646 (H<sup>+<\/sup>).<\/li>\r\n <li><strong>\u0627\u0644\u0642\u0627\u0639\u062f\u0629:<\/strong> \u0645\u0627\u062f\u0629 \u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646 (H<sup>+<\/sup>).<\/li>\r\n <\/ul>\r\n\r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u0628. \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629:<\/h3>\r\n <ol class=\"list-decimal list-inside space-y-2 text-slate-300 text-l l:text-base\">\r\n <li><strong>\u0627\u0644\u0632\u0648\u062c \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642 (Conjugate Pair):<\/strong>\r\n <ul class=\"list-disc list-inside ml-4\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0628\u0639\u062f \u0627\u0643\u062a\u0633\u0627\u0628 \u0628\u0631\u0648\u062a\u0648\u0646.<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: \u0627\u0644\u062d\u0645\u0636 \u0628\u0639\u062f \u0641\u0642\u062f \u0628\u0631\u0648\u062a\u0648\u0646.<\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><strong>\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0639\u0627\u0645:<\/strong>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">\u062d\u0645\u0636<sub>1<\/sub> + \u0642\u0627\u0639\u062f\u0629<sub>2<\/sub> \u21cc \u0642\u0627\u0639\u062f\u0629<sub>1<\/sub>(\u0645\u062a\u0631\u0627\u0641\u0642\u0629) + \u062d\u0645\u0636<sub>2<\/sub>(\u0645\u062a\u0631\u0627\u0641\u0642)<\/div>\r\n <\/li>\r\n <\/ol>\r\n\r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0641\u0647\u0648\u0645 \u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646 \u0628\u064a\u0646 \u0627\u0644\u0623\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0645\u0639 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629.<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"bronsted-canvas\" width=\"450\" height=\"180\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"hcl-reaction-btn\" class=\"control-btn bg-purple-600\">HCl + H\u2082O<\/button>\r\n <button id=\"nh3-reaction-btn\" class=\"control-btn\">NH\u2083 + H\u2082O<\/button>\r\n <button id=\"play-bronsted-btn\" class=\"control-btn\">\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <button id=\"reset-bronsted-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 mb-4\">\r\n <div class=\"stats-box text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629:<\/p>\r\n <p class=\"text-l l:text-base font-mono text-yellow-300\" id=\"bronsted-equation\">HCl + H\u2082O \u2192 H\u2083O\u207a + Cl\u207b<\/p>\r\n <\/div>\r\n <div class=\"stats-box text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u062d\u0627\u0644\u0629:<\/p>\r\n <p class=\"text-l l:text-base font-bold\" id=\"bronsted-status\">\u062c\u0627\u0647\u0632<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u062d\u0645\u0636<\/p>\r\n <p class=\"text-l l:text-base font-bold text-red-300\" id=\"acid-label\">HCl<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629<\/p>\r\n <p class=\"text-l l:text-base font-bold text-blue-300\" id=\"base-label\">H\u2082O<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/p>\r\n <p class=\"text-l l:text-base font-bold text-sky-300\" id=\"conj-base-label\"><\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg text-center\">\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642<\/p>\r\n <p class=\"text-l l:text-base font-bold text-purple-300\" id=\"conj-acid-label\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"font-bold text-white\/90 mt-4 mb-2\">\u062c. \u0623\u0645\u062b\u0644\u0629 \u062a\u0637\u0628\u064a\u0642\u064a\u0629:<\/h3>\r\n <div class=\"space-y-4 mt-2\">\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u0627\u0644\u0645\u062b\u0627\u0644 (\u0661): \u062a\u0623\u064a\u0646 \u062d\u0645\u0636 \u0642\u0648\u064a (HCl)<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">HCl + H<sub>2<\/sub>O \u2192 H<sub>3<\/sub>O<sup>+<\/sup> + Cl<sup>-<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 (\u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646): HCl<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646): H\u2082O<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: H\u2083O\u207a<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: Cl\u207b<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u0627\u0644\u0645\u062b\u0627\u0644 (\u0662): \u062a\u0623\u064a\u0646 \u062d\u0645\u0636 \u0636\u0639\u064a\u0641 (CH\u2083COOH)<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">CH<sub>3<\/sub>COOH + H<sub>2<\/sub>O \u21cc H<sub>3<\/sub>O<sup>+<\/sup> + CH<sub>3<\/sub>COO<sup>-<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 (\u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646): CH\u2083COOH<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646): H\u2082O<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: H\u2083O\u207a<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: CH\u2083COO\u207b<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u0627\u0644\u0645\u062b\u0627\u0644 (\u0663): \u062a\u0623\u064a\u0646 \u0642\u0627\u0639\u062f\u0629 \u0636\u0639\u064a\u0641\u0629 (NH\u2083)<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">NH<sub>3<\/sub> + H<sub>2<\/sub>O \u21cc NH<sub>4<\/sub><sup>+<\/sup> + OH<sup>-<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300\">\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 (\u062a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646): NH\u2083<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 (\u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646): H\u2082O<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642: NH\u2084\u207a<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629: OH\u207b<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0629 \u0627\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base mb-3\">\u0647\u0646\u0627\u0643 \u0639\u0644\u0627\u0642\u0629 \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0642\u0648\u0629 \u0627\u0644\u062d\u0645\u0636 \u0648\u0642\u0648\u0629 \u0642\u0627\u0639\u062f\u062a\u0647 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629 (\u0648\u0627\u0644\u0639\u0643\u0633 \u0635\u062d\u064a\u062d).<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base mb-4\">\r\n <li>\u0627\u0644\u062d\u0645\u0636 <strong class=\"text-red-400\">\u0627\u0644\u0642\u0648\u064a<\/strong> \u064a\u0646\u062a\u062c \u0642\u0627\u0639\u062f\u0629 \u0645\u062a\u0631\u0627\u0641\u0642\u0629 <strong class=\"text-sky-300\">\u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u0627\u064b<\/strong>.<\/li>\r\n <li>\u0627\u0644\u062d\u0645\u0636 <strong class=\"text-orange-400\">\u0627\u0644\u0636\u0639\u064a\u0641<\/strong> \u064a\u0646\u062a\u062c \u0642\u0627\u0639\u062f\u0629 \u0645\u062a\u0631\u0627\u0641\u0642\u0629 <strong class=\"text-blue-300\">\u0642\u0648\u064a\u0629 \u0646\u0633\u0628\u064a\u0627\u064b<\/strong>.<\/li>\r\n <\/ul>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-center text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u062d\u0645\u0636<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">HCl<\/td>\r\n <td class=\"px-4 py-2 text-red-400 font-semibold\">\u0642\u0648\u064a<\/td>\r\n <td class=\"px-4 py-2 font-mono\">Cl<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-sky-300\">\u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u0627\u064b<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">CH<sub>3<\/sub>COOH<\/td>\r\n <td class=\"px-4 py-2 text-orange-400\">\u0636\u0639\u064a\u0641<\/td>\r\n <td class=\"px-4 py-2 font-mono\">CH<sub>3<\/sub>COO<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-blue-300\">\u0642\u0648\u064a\u0629 \u0646\u0633\u0628\u064a\u0627\u064b<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">H\u2082O<\/td>\r\n <td class=\"px-4 py-2 text-orange-400\">\u0636\u0639\u064a\u0641 \u062c\u062f\u064b\u0627<\/td>\r\n <td class=\"px-4 py-2 font-mono\">OH<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-blue-400 font-semibold\">\u0642\u0648\u064a\u0629<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0629 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0648\u0627\u0644\u062d\u0645\u0648\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base mb-3\">\u0648\u0628\u0627\u0644\u0645\u062b\u0644\u060c \u0647\u0646\u0627\u0643 \u0639\u0644\u0627\u0642\u0629 \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0642\u0648\u0629 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0648\u0642\u0648\u0629 \u062d\u0645\u0636\u0647\u0627 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642.<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base mb-4\">\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 <strong class=\"text-blue-400\">\u0627\u0644\u0642\u0648\u064a\u0629<\/strong> \u062a\u0646\u062a\u062c \u062d\u0645\u0636\u064b\u0627 \u0645\u062a\u0631\u0627\u0641\u0642\u064b\u0627 <strong class=\"text-orange-300\">\u0636\u0639\u064a\u0641\u064b\u0627 \u062c\u062f\u064b\u0627<\/strong>.<\/li>\r\n <li>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 <strong class=\"text-sky-300\">\u0627\u0644\u0636\u0639\u064a\u0641\u0629<\/strong> \u062a\u0646\u062a\u062c \u062d\u0645\u0636\u064b\u0627 \u0645\u062a\u0631\u0627\u0641\u0642\u064b\u0627 <strong class=\"text-red-300\">\u0642\u0648\u064a\u064b\u0627 \u0646\u0633\u0628\u064a\u064b\u0627<\/strong>.<\/li>\r\n <\/ul>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-center text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0627\u0639\u062f\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">\u0627\u0644\u0642\u0648\u0629<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">OH<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-blue-400 font-semibold\">\u0642\u0648\u064a\u0629<\/td>\r\n <td class=\"px-4 py-2 font-mono\">H\u2082O<\/td>\r\n <td class=\"px-4 py-2 text-orange-300\">\u0636\u0639\u064a\u0641 \u062c\u062f\u064b\u0627<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">NH\u2083<\/td>\r\n <td class=\"px-4 py-2 text-sky-300\">\u0636\u0639\u064a\u0641\u0629<\/td>\r\n <td class=\"px-4 py-2 font-mono\">NH\u2084\u207a<\/td>\r\n <td class=\"px-4 py-2 text-red-300\">\u0642\u0648\u064a \u0646\u0633\u0628\u064a\u064b\u0627<\/td>\r\n <\/tr>\r\n <tr class=\"border-t border-white\/10\">\r\n <td class=\"px-4 py-2 font-mono\">Cl<sup>-<\/sup><\/td>\r\n <td class=\"px-4 py-2 text-sky-300\">\u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627<\/td>\r\n <td class=\"px-4 py-2 font-mono\">HCl<\/td>\r\n <td class=\"px-4 py-2 text-red-400 font-semibold\">\u0642\u0648\u064a<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u0645\u0641\u0648\u062a\u064a\u0631\u064a\u0629 (\u0627\u0644\u0645\u062a\u0631\u062f\u062f\u0629)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-slate-300 text-l l:text-base mb-2\">\u0647\u064a \u0645\u0648\u0627\u062f \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u0633\u0644\u0643 \u0633\u0644\u0648\u0643 \u0627\u0644\u062d\u0645\u0636 \u0641\u064a \u062a\u0641\u0627\u0639\u0644 \u0645\u0627\u060c \u0648\u0633\u0644\u0648\u0643 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0641\u064a \u062a\u0641\u0627\u0639\u0644 \u0622\u062e\u0631. \u0627\u0644\u0645\u0627\u0621 \u0647\u0648 \u0623\u0634\u0647\u0631 \u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0623\u0645\u0641\u0648\u062a\u064a\u0631\u064a\u0629.<\/p>\r\n <div class=\"space-y-3 mt-3\">\r\n <div>\r\n <p class=\"font-semibold text-white\/80 text-l l:text-base\">\u0627\u0644\u0645\u0627\u0621 \u0643\u0642\u0627\u0639\u062f\u0629 (\u0645\u0639 \u062d\u0645\u0636):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">HCl + H<sub>2<\/sub>O \u2192 H<sub>3<\/sub>O<sup>+<\/sup> + Cl<sup>-<\/sup><\/div>\r\n <p class=\"text-l l:text-base text-slate-400\">\u0647\u0646\u0627 \u0627\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0645\u0627\u0621 \u0628\u0631\u0648\u062a\u0648\u0646\u064b\u0627 \u0645\u0646 HCl\u060c \u0644\u0630\u0627 \u0641\u0647\u0648 \u0642\u0627\u0639\u062f\u0629.<\/p>\r\n <\/div>\r\n <div>\r\n <p class=\"font-semibold text-white\/80 text-l l:text-base\">\u0627\u0644\u0645\u0627\u0621 \u0643\u062d\u0645\u0636 (\u0645\u0639 \u0642\u0627\u0639\u062f\u0629):<\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded my-1\" dir=\"ltr\">NH<sub>3<\/sub> + H<sub>2<\/sub>O \u21cc NH<sub>4<\/sub><sup>+<\/sup> + OH<sup>-<\/sup><\/div>\r\n <p class=\"text-l l:text-base text-slate-400\">\u0647\u0646\u0627 \u0645\u0646\u062d \u0627\u0644\u0645\u0627\u0621 \u0628\u0631\u0648\u062a\u0648\u0646\u064b\u0627 \u0644\u0640 NH\u2083\u060c \u0644\u0630\u0627 \u0641\u0647\u0648 \u062d\u0645\u0636.<\/p>\r\n <\/div>\r\n <\/div>\r\n <h4 class=\"font-bold text-white\/90 mt-4 mb-2\">\u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0645\u0648\u0627\u062f \u0648\u0623\u064a\u0648\u0646\u0627\u062a \u0645\u062a\u0631\u062f\u062f\u0629 (\u0623\u0645\u0641\u0648\u062a\u064a\u0631\u064a\u0629):<\/h4>\r\n <div class=\"flex flex-wrap gap-2 text-l l:text-base\">\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">H<sub>2<\/sub>O<\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">HCO<sub>3<\/sub><sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">HSO<sub>3<\/sub><sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">H<sub>2<\/sub>PO<sub>4<\/sub><sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">HS<sup>-<\/sup><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0664. \u0645\u0641\u0647\u0648\u0645 \u0644\u0648\u064a\u0633<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg space-y-4\">\r\n <div>\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0623. \u062d\u0645\u0636 \u0644\u0648\u064a\u0633 (Lewis Acid):<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300\">\u0645\u0627\u062f\u0629 \u062a\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c\u064b\u0627 \u0645\u0646 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a\u060c \u0648\u063a\u0627\u0644\u0628\u064b\u0627 \u0645\u0627 \u062a\u0645\u062a\u0644\u0643 \u0641\u0644\u0643\u064b\u0627 \u0641\u0627\u0631\u063a\u064b\u0627.<\/p>\r\n <div class=\"mt-2\">\r\n <p class=\"text-l l:text-base text-slate-400 mb-1\">\u0623\u0645\u062b\u0644\u0629 (\u0645\u0631\u0643\u0628\u0627\u062a \u0630\u0627\u062a \u0646\u0642\u0635 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0648\u0623\u064a\u0648\u0646\u0627\u062a \u0645\u0648\u062c\u0628\u0629):<\/p>\r\n <div class=\"flex flex-wrap gap-2 text-l l:text-base\">\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">BF<sub>3<\/sub><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">AlCl<sub>3<\/sub><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">H<sup>+<\/sup><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">Mg<sup>2+<\/sup><\/span>\r\n <span class=\"font-mono bg-sky-500\/20 text-sky-300 px-2 py-1 rounded\">Cu<sup>2+<\/sup><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u0628. \u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633 (Lewis Base):<\/h3>\r\n <p class=\"text-l l:text-base text-slate-300\">\u0645\u0627\u062f\u0629 \u062a\u0645\u0646\u062d \u0632\u0648\u062c\u064b\u0627 \u0623\u0648 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u063a\u064a\u0631 \u0627\u0644\u0631\u0627\u0628\u0637\u0629.<\/p>\r\n <div class=\"mt-2\">\r\n <p class=\"text-l l:text-base text-slate-400 mb-1\">\u0623\u0645\u062b\u0644\u0629 (\u0645\u0631\u0643\u0628\u0627\u062a \u0645\u062a\u0639\u0627\u062f\u0644\u0629 \u0648\u0623\u064a\u0648\u0646\u0627\u062a \u0633\u0627\u0644\u0628\u0629):<\/p>\r\n <div class=\"flex flex-wrap gap-2 text-l l:text-base\">\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">NH<sub>3<\/sub><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">H<sub>2<\/sub>O<\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">OH<sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">Cl<sup>-<\/sup><\/span>\r\n <span class=\"font-mono bg-purple-500\/20 text-purple-300 px-2 py-1 rounded\">CN<sup>-<\/sup><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"simulation-container mt-6\">\r\n <h3 class=\"text-lg font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0641\u0647\u0648\u0645 \u0644\u0648\u064a\u0633<\/h3>\r\n <p class=\"text-slate-300 text-l l:text-base mb-4\">\u0634\u0627\u0647\u062f \u0627\u0646\u062a\u0642\u0627\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0645\u0646 \u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633 \u0625\u0644\u0649 \u062d\u0645\u0636 \u0644\u0648\u064a\u0633 \u0644\u062a\u0643\u0648\u064a\u0646 \u0631\u0627\u0628\u0637\u0629 \u062a\u0646\u0627\u0633\u0642\u064a\u0629.<\/p>\r\n \r\n <div class=\"canvas-container mb-4\">\r\n <div style=\"display: flex; justify-content: center;\">\r\n <canvas id=\"lewis-canvas\" width=\"450\" height=\"180\" style=\"background: #0f172a; border-radius: 0.5rem;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap gap-3 mb-4 justify-center\">\r\n <button id=\"play-lewis-btn\" class=\"control-btn\">\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <button id=\"reset-lewis-btn\" class=\"control-btn reset-btn\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-900\/50 p-3 rounded-lg\">\r\n <p class=\"text-l l:text-base text-slate-300\">\r\n <span class=\"text-yellow-300 font-bold\">\u062a\u0641\u0627\u0639\u0644 NH\u2083 \u0645\u0639 BF\u2083:<\/span> \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 (NH\u2083) \u0643\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633 \u062a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u063a\u064a\u0631 \u0631\u0627\u0628\u0637 \u0625\u0644\u0649 \u062b\u0644\u0627\u062b\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0628\u0648\u0631\u0648\u0646 (BF\u2083) \u0643\u062d\u0645\u0636 \u0644\u0648\u064a\u0633\u060c \u0645\u0643\u0648\u0646\u0629 \u0645\u0639\u0642\u062f H\u2083N-BF\u2083.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"pt-2 border-t border-white\/10\">\r\n <h3 class=\"font-bold text-white\/90 mt-2 mb-2\">\u062c. \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0644\u0648\u064a\u0633:<\/h3>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u062a\u0641\u0627\u0639\u0644 NH\u2083 \u0645\u0639 BF\u2083:<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">NH<sub>3<\/sub> + BF<sub>3<\/sub> \u2192 H<sub>3<\/sub>N-BF<sub>3<\/sub><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300 mt-2\">\r\n <li>\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633: NH\u2083 (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/li>\r\n <li>\u062d\u0645\u0636 \u0644\u0648\u064a\u0633: BF\u2083 (\u064a\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0641\u064a \u0641\u0644\u0643\u0647 \u0627\u0644\u0641\u0627\u0631\u063a)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u062a\u0643\u0648\u0646 \u0623\u064a\u0648\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0646\u064a\u0648\u0645:<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">H<sub>2<\/sub>O + H<sup>+<\/sup> \u2192 H<sub>3<\/sub>O<sup>+<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300 mt-2\">\r\n <li>\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633: H\u2082O (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u0646 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646)<\/li>\r\n <li>\u062d\u0645\u0636 \u0644\u0648\u064a\u0633: H\u207a (\u064a\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0632\u0648\u062c \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <p class=\"text-l l:text-base\"><strong>\u062a\u0643\u0648\u0646 \u0623\u064a\u0648\u0646 \u0645\u0639\u0642\u062f:<\/strong><\/p>\r\n <div class=\"font-mono text-l l:text-base text-yellow-300 bg-black\/20 p-2 rounded mt-1\" dir=\"ltr\">Ag<sup>+<\/sup> + 2NH<sub>3<\/sub> \u2192 [Ag(NH<sub>3<\/sub>)<sub>2<\/sub>]<sup>+<\/sup><\/div>\r\n <ul class=\"list-disc list-inside text-l l:text-base text-slate-300 mt-2\">\r\n <li>\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633: NH\u2083 (\u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/li>\r\n <li>\u062d\u0645\u0636 \u0644\u0648\u064a\u0633: Ag\u207a (\u0623\u064a\u0648\u0646 \u0641\u0644\u0632 \u0627\u0646\u062a\u0642\u0627\u0644\u064a \u064a\u0633\u062a\u0642\u0628\u0644 \u0623\u0632\u0648\u0627\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0665. \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u064a\u0646 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u062b\u0644\u0627\u062b<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l l:text-base text-right text-slate-300\">\r\n <thead class=\"bg-white\/10 text-slate-200 uppercase tracking-wider\">\r\n <tr>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u0645\u0641\u0647\u0648\u0645<\/th>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u062a\u0639\u0631\u064a\u0641<\/th>\r\n <th scope=\"col\" class=\"px-6 py-3\">\u0627\u0644\u0645\u062d\u062f\u062f\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold\">\u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u062d\u0645\u0636: \u064a\u0646\u062a\u062c H\u207a\u060c \u0627\u0644\u0642\u0627\u0639\u062f\u0629: \u064a\u0646\u062a\u062c OH\u207b<\/td>\r\n <td class=\"px-6 py-4\">\u064a\u0642\u062a\u0635\u0631 \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629<\/td>\r\n <\/tr>\r\n <tr class=\"border-b border-white\/10\">\r\n <td class=\"px-6 py-4 font-semibold\">\u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u062d\u0645\u0636: \u064a\u0645\u0646\u062d \u0628\u0631\u0648\u062a\u0648\u0646\u060c \u0627\u0644\u0642\u0627\u0639\u062f\u0629: \u064a\u0633\u062a\u0642\u0628\u0644 \u0628\u0631\u0648\u062a\u0648\u0646<\/td>\r\n <td class=\"px-6 py-4\">\u064a\u0634\u0645\u0644 \u0645\u062d\u0627\u0644\u064a\u0644 \u063a\u064a\u0631 \u0645\u0627\u0626\u064a\u0629<\/td>\r\n <\/tr>\r\n <tr>\r\n <td class=\"px-6 py-4 font-semibold\">\u0644\u0648\u064a\u0633<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u062d\u0645\u0636: \u064a\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u060c \u0627\u0644\u0642\u0627\u0639\u062f\u0629: \u064a\u0645\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/td>\r\n <td class=\"px-6 py-4\">\u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u0645\u0648\u0644\u064a\u0629<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u062e\u0644\u0627\u0635\u0629 \u0648\u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <p class=\"text-l l:text-base\">\u062b\u0644\u0627\u062b \u0645\u0641\u0627\u0647\u064a\u0645 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u062d\u0645\u0648\u0636 \u0648\u0627\u0644\u0642\u0648\u0627\u0639\u062f:<\/p>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l l:text-base mt-2\">\r\n <li><strong>\u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633:<\/strong> \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 H\u207a \u0648 OH\u207b.<\/li>\r\n <li><strong>\u0628\u0631\u0648\u0646\u0633\u062a\u062f-\u0644\u0648\u0631\u064a:<\/strong> \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0645\u0646\u062d \u0648\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646 \u0648\u0627\u0644\u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0645\u062a\u0631\u0627\u0641\u0642\u0629.<\/li>\r\n <li><strong>\u0644\u0648\u064a\u0633:<\/strong> \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0645\u0646\u062d \u0648\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ ============================================\r\n \/\/ Arrhenius Simulation\r\n \/\/ ============================================\r\n class ArrheniusSimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('arrhenius-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 300;\r\n this.height = 220;\r\n this.waterLevel = 80;\r\n this.particles = [];\r\n this.animationId = null;\r\n this.activeChemical = 'none';\r\n this.ionCounts = { h: 0, oh: 0 };\r\n \r\n this.particleConfig = {\r\n 'H2O': { color: 'rgba(56, 189, 248, 0.3)', radius: 4, label: '' },\r\n 'HCl': { color: '#e2e8f0', radius: 8, label: 'HCl' },\r\n 'NaOH': { color: '#e2e8f0', radius: 8, label: 'NaOH' },\r\n 'H+': { color: '#f87171', radius: 5, label: 'H\u207a' },\r\n 'Cl-': { color: '#34d399', radius: 6, label: 'Cl\u207b' },\r\n 'Na+': { color: '#fde047', radius: 6, label: 'Na\u207a' },\r\n 'OH-': { color: '#c084fc', radius: 6, label: 'OH\u207b' }\r\n };\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.particles = [];\r\n \/\/ Create water background particles\r\n for (let i = 0; i < 50; i++) {\r\n this.particles.push({\r\n id: `h2o-${i}`, \r\n type: 'H2O',\r\n x: Math.random() * this.width, \r\n y: Math.random() * (this.height - this.waterLevel) + this.waterLevel,\r\n vx: (Math.random() - 0.5) * 0.5, \r\n vy: (Math.random() - 0.5) * 0.5,\r\n radius: 3 + Math.random() * 2, \r\n color: this.particleConfig['H2O'].color\r\n });\r\n }\r\n this.ionCounts = { h: 0, oh: 0 };\r\n this.updateIonCounts();\r\n }\r\n \r\n addChemical(type) {\r\n this.activeChemical = type;\r\n const count = 5;\r\n const particleType = type === 'acid' ? 'HCl' : 'NaOH';\r\n const config = this.particleConfig[particleType];\r\n \r\n for(let i = 0; i < count; i++) {\r\n this.particles.push({\r\n id: `${particleType}-${Date.now()}-${i}`,\r\n type: particleType,\r\n x: Math.random() * (this.width - 100) + 50,\r\n y: -20 - (Math.random() * 50),\r\n vx: (Math.random() - 0.5) * 1,\r\n vy: 3 + Math.random() * 2,\r\n radius: config.radius, \r\n color: config.color,\r\n label: config.label\r\n });\r\n }\r\n \r\n document.getElementById('arrhenius-status').textContent = \r\n type === 'acid' \r\n ? '\u062d\u0645\u0636 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633: \u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u207a).'\r\n : '\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u0647\u064a\u0646\u064a\u0648\u0633: \u0645\u0627\u062f\u0629 \u062a\u062a\u0641\u0643\u0643 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0639\u0637\u064a \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f (OH\u207b).';\r\n }\r\n \r\n reset() {\r\n this.activeChemical = 'none';\r\n this.init();\r\n document.getElementById('arrhenius-status').textContent = '\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u062d\u0645\u0636 \u0623\u0648 \u0642\u0627\u0639\u062f\u0629 \u0648\u0645\u0634\u0627\u0647\u062f\u0629 \u0627\u0644\u062a\u0641\u0643\u0643.';\r\n }\r\n \r\n updateIonCounts() {\r\n document.getElementById('h-ion-count').textContent = this.ionCounts.h;\r\n document.getElementById('oh-ion-count').textContent = this.ionCounts.oh;\r\n }\r\n \r\n drawBeaker() {\r\n const ctx = this.ctx;\r\n ctx.strokeStyle = '#64748b';\r\n ctx.lineWidth = 4;\r\n ctx.beginPath();\r\n ctx.moveTo(10, 10);\r\n ctx.lineTo(10, this.height - 10);\r\n ctx.lineTo(this.width - 10, this.height - 10);\r\n ctx.lineTo(this.width - 10, 10);\r\n ctx.stroke();\r\n \r\n \/\/ Draw liquid\r\n const gradient = ctx.createLinearGradient(0, this.waterLevel, 0, this.height);\r\n gradient.addColorStop(0, \"rgba(14, 165, 233, 0.2)\");\r\n gradient.addColorStop(1, \"rgba(14, 165, 233, 0.4)\");\r\n ctx.fillStyle = gradient;\r\n ctx.fillRect(12, this.waterLevel, this.width - 24, this.height - this.waterLevel - 12);\r\n \r\n \/\/ Water surface\r\n ctx.beginPath();\r\n ctx.moveTo(12, this.waterLevel);\r\n ctx.lineTo(this.width - 12, this.waterLevel);\r\n ctx.strokeStyle = \"rgba(56, 189, 248, 0.5)\";\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n \r\n drawParticles() {\r\n const ctx = this.ctx;\r\n const nextParticles = [];\r\n let currentH = 0;\r\n let currentOH = 0;\r\n\r\n this.particles.forEach(p => {\r\n \/\/ Physics update\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n\r\n \/\/ Wall collisions\r\n if (p.x < 20 || p.x > this.width - 20) p.vx *= -1;\r\n \r\n \/\/ Floor collision\r\n if (p.y > this.height - 20 - p.radius) {\r\n p.y = this.height - 20 - p.radius;\r\n p.vy *= -0.5;\r\n p.vx *= 0.9;\r\n }\r\n\r\n \/\/ Dissociation Logic\r\n let dissociated = false;\r\n if ((p.type === 'HCl' || p.type === 'NaOH') && p.y > this.waterLevel + 10) {\r\n dissociated = true;\r\n \/\/ Create ions\r\n const type1 = p.type === 'HCl' ? 'H+' : 'Na+';\r\n const type2 = p.type === 'HCl' ? 'Cl-' : 'OH-';\r\n \r\n const config1 = this.particleConfig[type1];\r\n const config2 = this.particleConfig[type2];\r\n\r\n nextParticles.push({\r\n id: `${p.id}-ion1`, type: type1,\r\n x: p.x - 5, y: p.y,\r\n vx: (Math.random() - 0.5) * 2 - 1, vy: (Math.random() - 0.5) * 2,\r\n radius: config1.radius, color: config1.color, label: config1.label\r\n });\r\n nextParticles.push({\r\n id: `${p.id}-ion2`, type: type2,\r\n x: p.x + 5, y: p.y,\r\n vx: (Math.random() - 0.5) * 2 + 1, vy: (Math.random() - 0.5) * 2,\r\n radius: config2.radius, color: config2.color, label: config2.label\r\n });\r\n }\r\n\r\n if (!dissociated) {\r\n \/\/ Keep particle\r\n \/\/ Float water\r\n if (p.type === 'H2O') {\r\n if (p.y < this.waterLevel) p.y = this.waterLevel;\r\n if (p.y > this.height - 20) p.y = this.height - 20;\r\n if (p.x < 20) p.x = 20;\r\n if (p.x > this.width - 20) p.x = this.width - 20;\r\n }\r\n \r\n \/\/ Keep ions in liquid\r\n if (['H+', 'Cl-', 'Na+', 'OH-'].includes(p.type)) {\r\n if (p.y < this.waterLevel + p.radius) {\r\n p.y = this.waterLevel + p.radius;\r\n p.vy *= -1;\r\n }\r\n p.vx *= 0.99;\r\n p.vy *= 0.99;\r\n \r\n \/\/ Count ions\r\n if (p.type === 'H+') currentH++;\r\n if (p.type === 'OH-') currentOH++;\r\n }\r\n\r\n nextParticles.push(p);\r\n }\r\n });\r\n\r\n this.particles = nextParticles;\r\n this.ionCounts = { h: currentH, oh: currentOH };\r\n this.updateIonCounts();\r\n\r\n \/\/ Draw particles\r\n this.particles.forEach(p => {\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n \r\n ctx.strokeStyle = 'rgba(0,0,0,0.2)';\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n\r\n if (p.label && p.type !== 'H2O') {\r\n ctx.fillStyle = '#1e293b';\r\n ctx.font = 'bold 10px sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(p.label, p.x, p.y);\r\n }\r\n });\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.drawBeaker();\r\n this.drawParticles();\r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n start() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stop() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Bronsted-Lowry Simulation\r\n \/\/ ============================================\r\n class BronstedLowrySimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('bronsted-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 450;\r\n this.height = 180;\r\n this.reaction = 'hcl_water';\r\n this.state = 'initial';\r\n this.animationId = null;\r\n this.species = {};\r\n this.proton = null;\r\n \r\n this.reactions = {\r\n hcl_water: {\r\n equation: 'HCl + H\u2082O \u2192 H\u2083O\u207a + Cl\u207b',\r\n species: { acid: 'HCl', base: 'H\u2082O', conjAcid: 'H\u2083O\u207a', conjBase: 'Cl\u207b' }\r\n },\r\n nh3_water: {\r\n equation: 'NH\u2083 + H\u2082O \u21cc NH\u2084\u207a + OH\u207b',\r\n species: { acid: 'H\u2082O', base: 'NH\u2083', conjAcid: 'NH\u2084\u207a', conjBase: 'OH\u207b' }\r\n }\r\n };\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.setupState('initial');\r\n }\r\n \r\n setupState(targetState) {\r\n const config = this.reactions[this.reaction];\r\n this.species = {};\r\n this.proton = null;\r\n \r\n const setupSpecies = (label, initialX, initialY, targetX, targetY, initialOpacity) => {\r\n this.species[label] = { \r\n label, \r\n x: initialX, \r\n y: initialY, \r\n targetX, \r\n targetY, \r\n vx: 0, \r\n vy: 0, \r\n opacity: initialOpacity \r\n };\r\n };\r\n\r\n const acidLabel = config.species.acid;\r\n const baseLabel = config.species.base;\r\n const conjAcidLabel = config.species.conjAcid;\r\n const conjBaseLabel = config.species.conjBase;\r\n\r\n if (targetState === 'initial' || targetState === 'transfer') {\r\n setupSpecies(acidLabel, 50, this.height \/ 2, 50, this.height\/2, 1);\r\n setupSpecies(baseLabel, this.width - 50, this.height \/ 2, this.width-50, this.height\/2, 1);\r\n setupSpecies(conjAcidLabel, this.width - 50, this.height \/ 2, this.width - 50, this.height\/2, 0);\r\n setupSpecies(conjBaseLabel, 50, this.height \/ 2, 50, this.height\/2, 0);\r\n } else if (targetState === 'final') {\r\n setupSpecies(acidLabel, 50, this.height \/ 2, 50, this.height\/2, 0);\r\n setupSpecies(baseLabel, this.width - 50, this.height \/ 2, this.width-50, this.height\/2, 0);\r\n setupSpecies(conjAcidLabel, this.width - 50, this.height \/ 2, this.width - 50, this.height\/2, 1);\r\n setupSpecies(conjBaseLabel, 50, this.height \/ 2, 50, this.height\/2, 1);\r\n }\r\n\r\n if (targetState === 'transfer') {\r\n const acid = this.species[acidLabel];\r\n this.proton = { x: acid.x, y: acid.y, opacity: 1 };\r\n }\r\n\r\n this.state = targetState;\r\n this.updateLabels();\r\n }\r\n \r\n play() {\r\n if (this.state === 'initial') {\r\n this.setupState('transfer');\r\n setTimeout(() => {\r\n this.setupState('final');\r\n }, 1500);\r\n }\r\n }\r\n \r\n reset() {\r\n this.setupState('initial');\r\n }\r\n \r\n setReaction(reaction) {\r\n this.reaction = reaction;\r\n document.getElementById('bronsted-equation').textContent = this.reactions[reaction].equation;\r\n this.setupState('initial');\r\n this.updateLabels();\r\n }\r\n \r\n updateLabels() {\r\n const config = this.reactions[this.reaction];\r\n document.getElementById('acid-label').textContent = this.state !== 'final' ? config.species.acid : '';\r\n document.getElementById('base-label').textContent = this.state !== 'final' ? config.species.base : '';\r\n document.getElementById('conj-base-label').textContent = this.state === 'final' ? config.species.conjBase : '';\r\n document.getElementById('conj-acid-label').textContent = this.state === 'final' ? config.species.conjAcid : '';\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.ctx.fillStyle = '#0f172a';\r\n this.ctx.fillRect(0, 0, this.width, this.height);\r\n\r\n \/\/ Draw species\r\n Object.values(this.species).forEach(s => {\r\n this.ctx.globalAlpha = s.opacity;\r\n this.ctx.fillStyle = '#e2e8f0';\r\n this.ctx.font = 'bold 24px monospace';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.fillText(s.label, s.x, s.y);\r\n });\r\n this.ctx.globalAlpha = 1;\r\n\r\n \/\/ Draw proton if in transfer state\r\n if (this.state === 'transfer' && this.proton) {\r\n const base = this.species[this.reactions[this.reaction].species.base];\r\n this.proton.x += (base.x - this.proton.x) * 0.05;\r\n this.proton.y += (base.y - this.proton.y) * 0.05;\r\n \r\n this.ctx.fillStyle = '#f87171';\r\n this.ctx.font = 'bold 24px monospace';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.fillText('H\u207a', this.proton.x, this.proton.y);\r\n }\r\n \r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n start() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stop() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Hydronium Formation Simulation\r\n \/\/ ============================================\r\n class HydroniumSimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('hydronium-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 450;\r\n this.height = 200;\r\n this.waterMolecules = [];\r\n this.proton = null;\r\n this.animationId = null;\r\n this.state = 'idle';\r\n this.numWaterMolecules = 15;\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.waterMolecules = [];\r\n for (let i = 0; i < this.numWaterMolecules; i++) {\r\n this.waterMolecules.push({\r\n id: i,\r\n x: Math.random() * (this.width - 100) + 50,\r\n y: Math.random() * (this.height - 100) + 50,\r\n vx: (Math.random() - 0.5) * 0.2,\r\n vy: (Math.random() - 0.5) * 0.2,\r\n angle: Math.random() * Math.PI * 2,\r\n va: (Math.random() - 0.5) * 0.01,\r\n isTarget: false\r\n });\r\n }\r\n this.proton = null;\r\n this.state = 'idle';\r\n }\r\n \r\n start() {\r\n if (this.state === 'idle') {\r\n \/\/ Find target molecule near center\r\n let targetMolecule = this.waterMolecules.reduce((prev, curr) => {\r\n const prevDist = Math.hypot(prev.x - this.width \/ 2, prev.y - this.height \/ 2);\r\n const currDist = Math.hypot(curr.x - this.width \/ 2, curr.y - this.height \/ 2);\r\n return currDist < prevDist ? curr : prev;\r\n });\r\n \r\n targetMolecule.isTarget = true;\r\n \r\n this.proton = {\r\n x: 20, \r\n y: this.height \/ 2,\r\n vx: (targetMolecule.x - 20) \/ 120,\r\n vy: (targetMolecule.y - (this.height \/ 2)) \/ 120,\r\n target: targetMolecule\r\n };\r\n \r\n this.state = 'proton_moving';\r\n }\r\n }\r\n \r\n reset() {\r\n this.state = 'idle';\r\n this.init();\r\n }\r\n \r\n drawWater(molecule, isHydronium = false) {\r\n const ctx = this.ctx;\r\n ctx.save();\r\n ctx.translate(molecule.x, molecule.y);\r\n ctx.rotate(molecule.angle);\r\n\r\n \/\/ Oxygen\r\n ctx.fillStyle = '#ef4444';\r\n ctx.beginPath();\r\n ctx.arc(0, 0, 12, 0, 2 * Math.PI);\r\n ctx.fill();\r\n\r\n \/\/ Hydrogens\r\n ctx.fillStyle = '#f1f5f9';\r\n ctx.beginPath();\r\n ctx.arc(15, -10, 6, 0, 2 * Math.PI);\r\n ctx.fill();\r\n ctx.beginPath();\r\n ctx.arc(15, 10, 6, 0, 2 * Math.PI);\r\n ctx.fill();\r\n \r\n if (isHydronium) {\r\n ctx.beginPath();\r\n ctx.arc(-15, 0, 6, 0, 2 * Math.PI);\r\n ctx.fill();\r\n \r\n \/\/ Draw charge\r\n ctx.fillStyle = '#facc15';\r\n ctx.font = 'bold 20px sans-serif';\r\n ctx.fillText('+', 0, -20);\r\n }\r\n ctx.restore();\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.ctx.fillStyle = '#0f172a';\r\n this.ctx.fillRect(0, 0, this.width, this.height);\r\n\r\n \/\/ Update and draw water molecules\r\n this.waterMolecules.forEach(m => {\r\n if (this.state !== 'hydronium_formed' || !m.isTarget) {\r\n m.x += m.vx; \r\n m.y += m.vy;\r\n m.angle += m.va;\r\n \r\n if (m.x < 15 || m.x > this.width - 15) m.vx *= -1;\r\n if (m.y < 15 || m.y > this.height - 15) m.vy *= -1;\r\n }\r\n \r\n const isHydronium = this.state === 'hydronium_formed' && m.isTarget;\r\n this.drawWater(m, isHydronium);\r\n });\r\n\r\n \/\/ Update and draw proton\r\n if (this.state === 'proton_moving' && this.proton) {\r\n const proton = this.proton;\r\n const target = this.proton.target;\r\n \r\n if (target) {\r\n const dist = Math.hypot(proton.x - target.x, proton.y - target.y);\r\n if (dist < 5) {\r\n this.proton = null;\r\n this.state = 'hydronium_formed';\r\n } else {\r\n \/\/ Accelerate towards target\r\n const dx = target.x - proton.x;\r\n const dy = target.y - proton.y;\r\n proton.vx = dx \/ 50;\r\n proton.vy = dy \/ 50;\r\n proton.x += proton.vx;\r\n proton.y += proton.vy;\r\n }\r\n }\r\n \r\n if (this.proton) {\r\n this.ctx.fillStyle = '#f87171';\r\n this.ctx.beginPath();\r\n this.ctx.arc(proton.x, proton.y, 6, 0, 2 * Math.PI);\r\n this.ctx.fill();\r\n this.ctx.fillStyle = 'white';\r\n this.ctx.font = 'bold 10px sans-serif';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.textBaseline = 'middle';\r\n this.ctx.fillText('+', proton.x, proton.y);\r\n }\r\n }\r\n \r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n startAnimation() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stopAnimation() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Lewis Simulation\r\n \/\/ ============================================\r\n class LewisSimulation {\r\n constructor() {\r\n this.canvas = document.getElementById('lewis-canvas');\r\n this.ctx = this.canvas.getContext('2d');\r\n this.width = 450;\r\n this.height = 180;\r\n this.state = 'initial';\r\n this.animationId = null;\r\n this.progress = 0;\r\n \r\n this.nh3 = { x: 100, y: this.height \/ 2 };\r\n this.bf3 = { x: this.width - 100, y: this.height \/ 2 };\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.state = 'initial';\r\n this.progress = 0;\r\n }\r\n \r\n play() {\r\n if(this.state === 'initial') {\r\n this.state = 'bonding';\r\n }\r\n }\r\n \r\n reset() {\r\n this.state = 'initial';\r\n this.progress = 0;\r\n }\r\n \r\n drawMolecule(label, x, y, color) {\r\n this.ctx.fillStyle = color;\r\n this.ctx.font = 'bold 24px monospace';\r\n this.ctx.textAlign = 'center';\r\n this.ctx.fillText(label, x, y);\r\n }\r\n \r\n drawLonePair(x, y, p) {\r\n const endX = this.nh3.x + (this.bf3.x - this.nh3.x) * p;\r\n this.ctx.fillStyle = '#fde047';\r\n this.ctx.beginPath();\r\n this.ctx.arc(x + (endX - x) * p, y, 3, 0, Math.PI * 2);\r\n this.ctx.fill();\r\n this.ctx.beginPath();\r\n this.ctx.arc(x + 5 + (endX - (x + 5)) * p, y - 5, 3, 0, Math.PI * 2);\r\n this.ctx.fill();\r\n }\r\n \r\n drawBond(p) {\r\n if (p <= 0) return;\r\n this.ctx.strokeStyle = '#fde047';\r\n this.ctx.lineWidth = 2;\r\n this.ctx.beginPath();\r\n this.ctx.moveTo(this.nh3.x + 30, this.nh3.y);\r\n this.ctx.lineTo(this.nh3.x + 30 + (this.bf3.x - 40 - (this.nh3.x + 30)) * p, this.nh3.y);\r\n this.ctx.stroke();\r\n }\r\n \r\n animate() {\r\n this.ctx.clearRect(0, 0, this.width, this.height);\r\n this.ctx.fillStyle = '#0f172a';\r\n this.ctx.fillRect(0, 0, this.width, this.height);\r\n\r\n \/\/ Animate progress\r\n if (this.state === 'bonding' && this.progress < 1) {\r\n this.progress += 0.02;\r\n } else if (this.state === 'bonding' && this.progress >= 1) {\r\n this.state = 'final';\r\n } else if (this.state === 'initial') {\r\n this.progress = 0;\r\n }\r\n \r\n \/\/ Draw molecules\r\n this.drawMolecule('NH\u2083', this.nh3.x, this.nh3.y, '#c084fc');\r\n this.drawMolecule('BF\u2083', this.bf3.x, this.bf3.y, '#67e8f9');\r\n\r\n \/\/ Draw lone pair and bond\r\n if(this.state === 'final') {\r\n this.drawBond(1);\r\n } else {\r\n this.drawLonePair(this.nh3.x + 25, this.nh3.y, this.progress);\r\n this.drawBond(this.progress);\r\n }\r\n\r\n \/\/ Draw labels\r\n this.ctx.fillStyle = '#e2e8f0';\r\n this.ctx.font = '14px Cairo';\r\n this.ctx.fillText('\u0642\u0627\u0639\u062f\u0629 \u0644\u0648\u064a\u0633', this.nh3.x, this.nh3.y + 35);\r\n this.ctx.fillText('(\u0645\u0627\u0646\u062d \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a)', this.nh3.x, this.nh3.y + 55);\r\n \r\n this.ctx.fillText('\u062d\u0645\u0636 \u0644\u0648\u064a\u0633', this.bf3.x, this.bf3.y + 35);\r\n this.ctx.fillText('(\u0645\u0633\u062a\u0642\u0628\u0644 \u0632\u0648\u062c \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a)', this.bf3.x, this.bf3.y + 55);\r\n \r\n \/\/ Draw plus sign\r\n if(this.state !== 'final') {\r\n this.ctx.font = '30px Cairo';\r\n this.ctx.fillText('+', this.width\/2, this.height\/2 + 10);\r\n }\r\n \r\n this.animationId = requestAnimationFrame(() => this.animate());\r\n }\r\n \r\n start() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n }\r\n this.animate();\r\n }\r\n \r\n stop() {\r\n if (this.animationId) {\r\n cancelAnimationFrame(this.animationId);\r\n this.animationId = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ Initialize all simulations when page loads\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ Initialize Arrhenius simulation\r\n const arrheniusSim = new ArrheniusSimulation();\r\n arrheniusSim.start();\r\n \r\n document.getElementById('add-acid-btn').addEventListener('click', () => {\r\n arrheniusSim.addChemical('acid');\r\n });\r\n \r\n document.getElementById('add-base-btn').addEventListener('click', () => {\r\n arrheniusSim.addChemical('base');\r\n });\r\n \r\n document.getElementById('reset-arrhenius-btn').addEventListener('click', () => {\r\n arrheniusSim.reset();\r\n });\r\n \r\n \/\/ Initialize Bronsted-Lowry simulation\r\n const bronstedSim = new BronstedLowrySimulation();\r\n bronstedSim.start();\r\n \r\n document.getElementById('hcl-reaction-btn').addEventListener('click', () => {\r\n bronstedSim.setReaction('hcl_water');\r\n document.getElementById('hcl-reaction-btn').classList.add('bg-purple-600');\r\n document.getElementById('hcl-reaction-btn').classList.remove('hover:bg-slate-600\/50');\r\n document.getElementById('nh3-reaction-btn').classList.remove('bg-purple-600');\r\n document.getElementById('nh3-reaction-btn').classList.add('hover:bg-slate-600\/50');\r\n });\r\n \r\n document.getElementById('nh3-reaction-btn').addEventListener('click', () => {\r\n bronstedSim.setReaction('nh3_water');\r\n document.getElementById('nh3-reaction-btn').classList.add('bg-purple-600');\r\n document.getElementById('nh3-reaction-btn').classList.remove('hover:bg-slate-600\/50');\r\n document.getElementById('hcl-reaction-btn').classList.remove('bg-purple-600');\r\n document.getElementById('hcl-reaction-btn').classList.add('hover:bg-slate-600\/50');\r\n });\r\n \r\n document.getElementById('play-bronsted-btn').addEventListener('click', () => {\r\n bronstedSim.play();\r\n });\r\n \r\n document.getElementById('reset-bronsted-btn').addEventListener('click', () => {\r\n bronstedSim.reset();\r\n });\r\n \r\n \/\/ Initialize Hydronium simulation\r\n const hydroniumSim = new HydroniumSimulation();\r\n hydroniumSim.startAnimation();\r\n \r\n document.getElementById('start-hydronium-btn').addEventListener('click', () => {\r\n hydroniumSim.start();\r\n });\r\n \r\n document.getElementById('reset-hydronium-btn').addEventListener('click', () => {\r\n hydroniumSim.reset();\r\n });\r\n \r\n \/\/ Initialize Lewis simulation\r\n const lewisSim = new LewisSimulation();\r\n lewisSim.start();\r\n \r\n document.getElementById('play-lewis-btn').addEventListener('click', () => {\r\n lewisSim.play();\r\n });\r\n \r\n document.getElementById('reset-lewis-btn').addEventListener('click', () => {\r\n lewisSim.reset();\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17312","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/comments?post=17312"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17312\/revisions"}],"predecessor-version":[{"id":17313,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17312\/revisions\/17313"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}