\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a + \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/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 canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0.5rem; }\r\n .sim-card { background: rgba(15,23,42,0.8); border-radius: 1rem; padding: 1.5rem; margin: 2rem 0; border: 1px solid rgba(255,255,255,0.1); }\r\n button { transition: all 0.2s; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n \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\u062b\u0627\u0644\u062b: \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/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\/electrolyticCells12.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\/electrolyticCells12.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\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\u062b\u0627\u0644\u062b: \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h1>\r\n \r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0661. \u0627\u0644\u0645\u0641\u0647\u0648\u0645 \u0648\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border-r-4 border-yellow-500\">\r\n <p class=\"text-slate-300 text-l mb-3\">\r\n <strong>\u062e\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a:<\/strong> \u0647\u064a \u062e\u0644\u064a\u0629 \u0643\u0647\u0631\u0648\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a\u0647\u0627 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 (\u0645\u0635\u062f\u0631 \u062e\u0627\u0631\u062c\u064a) \u0644\u0625\u062d\u062f\u0627\u062b \u062a\u0641\u0627\u0639\u0644 \u062a\u0623\u0643\u0633\u062f \u0648\u0627\u062e\u062a\u0632\u0627\u0644 <strong>\u063a\u064a\u0631 \u062a\u0644\u0642\u0627\u0626\u064a<\/strong>.\r\n <\/p>\r\n <div class=\"bg-black\/20 p-3 rounded text-l flex justify-around text-center\">\r\n <div>\r\n <strong class=\"text-green-400 block mb-1\">\u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629<\/strong>\r\n <span class=\"text-slate-400 text-l\">\u062a\u0641\u0627\u0639\u0644 \u062a\u0644\u0642\u0627\u0626\u064a \u2190 \u064a\u0646\u062a\u062c \u0643\u0647\u0631\u0628\u0627\u0621<\/span>\r\n <\/div>\r\n <div class=\"border-l border-white\/10 mx-2\"><\/div>\r\n <div>\r\n <strong class=\"text-yellow-400 block mb-1\">\u062e\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/strong>\r\n <span class=\"text-slate-400 text-l\">\u0643\u0647\u0631\u0628\u0627\u0621 \u2190 \u062a\u0641\u0627\u0639\u0644 \u063a\u064a\u0631 \u062a\u0644\u0642\u0627\u0626\u064a<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0662. \u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u062e\u0644\u064a\u0629 \u0648\u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border-t-4 border-red-500\">\r\n <h3 class=\"font-bold text-red-300 mb-2\">\u0627\u0644\u0645\u0635\u0639\u062f (Anode) - \u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0645\u0648\u062c\u0628 (+)<\/h3>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u064a\u062a\u0635\u0644 \u0628\u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0645\u0648\u062c\u0628 \u0644\u0644\u0628\u0637\u0627\u0631\u064a\u0629.<\/li>\r\n <li>\u062a\u0646\u062c\u0630\u0628 \u0625\u0644\u064a\u0647 <strong>\u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0633\u0627\u0644\u0628\u0629 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646\u0627\u062a)<\/strong>.<\/li>\r\n <li>\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0647 \u062a\u0641\u0627\u0639\u0644 <strong>\u0627\u0644\u062a\u0623\u0643\u0633\u062f<\/strong> (\u0641\u0642\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border-t-4 border-green-500\">\r\n <h3 class=\"font-bold text-green-300 mb-2\">\u0627\u0644\u0645\u0647\u0628\u0637 (Cathode) - \u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0633\u0627\u0644\u0628 (-)<\/h3>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u064a\u062a\u0635\u0644 \u0628\u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0633\u0627\u0644\u0628 \u0644\u0644\u0628\u0637\u0627\u0631\u064a\u0629.<\/li>\r\n <li>\u062a\u0646\u062c\u0630\u0628 \u0625\u0644\u064a\u0647 <strong>\u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0648\u062c\u0628\u0629 (\u0627\u0644\u0643\u0627\u062a\u064a\u0648\u0646\u0627\u062a)<\/strong>.<\/li>\r\n <li>\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0647 \u062a\u0641\u0627\u0639\u0644 <strong>\u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644<\/strong> (\u0643\u0633\u0628 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border-t-4 border-yellow-500 mb-6\">\r\n <h3 class=\"font-bold text-yellow-300 mb-2\">\u0645\u0635\u062f\u0631 \u0627\u0644\u0637\u0627\u0642\u0629 (\u062c\u0647\u062f \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629 \u0627\u0644\u0644\u0627\u0632\u0645)<\/h3>\r\n <p class=\"text-l text-slate-300 mb-2\">\r\n \u0644\u0625\u062d\u062f\u0627\u062b \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u060c \u064a\u062c\u0628 \u062a\u0648\u0635\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629 \u0628\u0645\u0635\u062f\u0631 \u062c\u0647\u062f \u062e\u0627\u0631\u062c\u064a (\u0628\u0637\u0627\u0631\u064a\u0629). \u0627\u0644\u0634\u0631\u0637 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0647\u0648 \u0623\u0646 \u064a\u0643\u0648\u0646 \u062c\u0647\u062f \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629 <strong>\u0623\u0643\u0628\u0631 \u0642\u0644\u064a\u0644\u0627\u064b<\/strong> \u0645\u0646 \u062c\u0647\u062f \u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629 \u0627\u0644\u0639\u0643\u0633\u064a \u0627\u0644\u0645\u062a\u0648\u0642\u0639.\r\n <\/p>\r\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4 bg-black\/20 p-3 rounded\">\r\n <div class=\"text-center\">\r\n <span class=\"text-l text-slate-400 block mb-1\">\u0627\u0644\u0634\u0631\u0637 \u0627\u0644\u0631\u064a\u0627\u0636\u064a:<\/span>\r\n <span class=\"font-mono text-white dir-ltr font-bold text-lg\">E<sub>battery<\/sub> > E\u00b0<sub>cell<\/sub><\/span>\r\n <\/div>\r\n <div class=\"text-center border-r border-white\/10 pr-4\">\r\n <p class=\"text-l text-slate-300\">\u062a\u0639\u0645\u0644 \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629 \u0639\u0644\u0649 \"\u0636\u062e\" \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0645\u0635\u0639\u062f \u0625\u0644\u0649 \u0627\u0644\u0645\u0647\u0628\u0637 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647\u0647\u0627 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-6\">\r\n <h3 class=\"text-lg font-bold text-white mb-2 text-center\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a:<\/h3>\r\n <p class=\"text-l text-center text-slate-400 mb-4\">\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u062a\u062a\u062c\u0647 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u0646\u062d\u0648 \u0627\u0644\u0645\u0647\u0628\u0637 \u0648\u062a\u062a\u0631\u0633\u0628\u060c \u0628\u064a\u0646\u0645\u0627 \u062a\u062a\u062c\u0647 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0633\u0627\u0644\u0628\u0629 \u0646\u062d\u0648 \u0627\u0644\u0645\u0635\u0639\u062f \u0648\u062a\u062a\u0635\u0627\u0639\u062f \u0643\u063a\u0627\u0632.<\/p>\r\n \r\n <div id=\"electrolysis-simulation-container\" class=\"sim-card\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0663. \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0644\u0645\u0635\u0647\u0648\u0631\u0627\u062a (Molten Salts)<\/h2>\r\n <div class=\"bg-orange-900\/20 p-4 rounded-lg border-r-4 border-orange-500 mb-4\">\r\n <h3 class=\"font-bold text-orange-300 mb-2\">\u0645\u0627 \u0647\u0648 \u0627\u0644\u0645\u0635\u0647\u0648\u0631\u061f<\/h3>\r\n <p class=\"text-l text-slate-300\">\r\n \u0647\u0648 \u0645\u0631\u0643\u0628 \u0623\u064a\u0648\u0646\u064a \u0641\u064a \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0646\u062a\u062c \u0639\u0646 \u0635\u0647\u0631\u0647 \u0628\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0639\u0627\u0644\u064a\u0629 (\u062f\u0648\u0646 \u0648\u062c\u0648\u062f \u0645\u0627\u0621). \u0641\u064a \u0627\u0644\u0645\u0635\u0647\u0648\u0631\u060c \u062a\u0643\u0648\u0646 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u062d\u0631\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0628\u0645\u0631\u0648\u0631 \u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a.\r\n <\/p>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mb-3\">\u0639\u0646\u062f \u0635\u0647\u0631 \u0627\u0644\u0645\u0644\u062d \u0627\u0644\u0623\u064a\u0648\u0646\u064a\u060c \u062a\u062a\u0641\u0643\u0643 \u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0644\u0648\u0631\u064a\u0629 \u0648\u062a\u0635\u0628\u062d \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u062d\u0631\u0629 \u0627\u0644\u062d\u0631\u0643\u0629.<\/p>\r\n \r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0661: \u0645\u0635\u0647\u0648\u0631 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (NaCl)<\/h3>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-):<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u062a\u064f\u062e\u062a\u0632\u0644 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645:<\/p>\r\n <div class=\"font-mono text-white ltr\">Na\u207a(l) + e\u207b \u2192 Na(l) <span class=\"text-green-400 text-l ml-2\">(E\u00b0 = -2.71 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u0646\u062a\u062c \u0641\u0644\u0632 \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+):<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u062a\u062a\u0623\u0643\u0633\u062f \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0643\u0644\u0648\u0631\u064a\u062f:<\/p>\r\n <div class=\"font-mono text-white ltr\">2Cl\u207b(l) \u2192 Cl\u2082(g) + 2e\u207b <span class=\"text-red-400 text-l ml-2\">(E\u00b0ox = -1.36 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0643\u0644\u0648\u0631.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0643\u0644\u064a:<\/strong>\r\n <div class=\"font-mono text-yellow-300 ltr\">2NaCl(l) \u2192 2Na(l) + Cl\u2082(g)<\/div>\r\n <div class=\"text-l text-slate-400 mt-1 font-mono ltr\">E\u00b0cell = -4.07 V<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u062c\u0647\u062f \u0627\u0644\u062e\u0644\u064a\u0629 \u0633\u0627\u0644\u0628\u060c \u0623\u064a \u064a\u062d\u062a\u0627\u062c \u0644\u062c\u0647\u062f \u062e\u0627\u0631\u062c\u064a > 4.07V.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0662: \u0645\u0635\u0647\u0648\u0631 \u0628\u0631\u0648\u0645\u064a\u062f \u0627\u0644\u0631\u0635\u0627\u0635 (PbBr\u2082)<\/h3>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-) \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644:<\/strong>\r\n <div class=\"font-mono text-white ltr\">Pb\u00b2\u207a + 2e\u207b \u2192 Pb(l) <span class=\"text-green-400 text-l ml-2\">(E\u00b0 = -0.13 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0631\u0633\u0628 \u0631\u0635\u0627\u0635 \u0645\u0646\u0635\u0647\u0631 (\u0641\u0636\u064a).<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+) \u0627\u0644\u062a\u0623\u0643\u0633\u062f:<\/strong>\r\n <div class=\"font-mono text-white ltr\">2Br\u207b \u2192 Br\u2082 + 2e\u207b <span class=\"text-red-400 text-l ml-2\">(E\u00b0 = +1.07 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u062a\u062a\u0635\u0627\u0639\u062f \u0623\u0628\u062e\u0631\u0629 \u0627\u0644\u0628\u0631\u0648\u0645 (\u0628\u0646\u064a\u0629 \u062d\u0645\u0631\u0627\u0621).<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <div class=\"text-l text-slate-400 font-mono ltr\">E\u00b0cell = -0.13 - 1.07 = -1.20 V<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062d\u062a\u0627\u062c \u062c\u0647\u062f \u0628\u0637\u0627\u0631\u064a\u0629 > 1.20 V.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0663: \u0645\u0635\u0647\u0648\u0631 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (MgCl\u2082)<\/h3>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-) \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644:<\/strong>\r\n <div class=\"font-mono text-white ltr\">Mg\u00b2\u207a + 2e\u207b \u2192 Mg(l) <span class=\"text-green-400 text-l ml-2\">(E\u00b0 = -2.37 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u0646\u062a\u062c \u0641\u0644\u0632 \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+) \u0627\u0644\u062a\u0623\u0643\u0633\u062f:<\/strong>\r\n <div class=\"font-mono text-white ltr\">2Cl\u207b \u2192 Cl\u2082 + 2e\u207b <span class=\"text-red-400 text-l ml-2\">(E\u00b0 = +1.36 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0643\u0644\u0648\u0631.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <div class=\"text-l text-slate-400 font-mono ltr\">E\u00b0cell = -2.37 - 1.36 = -3.73 V<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062d\u062a\u0627\u062c \u062c\u0647\u062f \u0628\u0637\u0627\u0631\u064a\u0629 > 3.73 V.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0664. \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629<\/h2>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border-r-4 border-blue-500 mb-4\">\r\n <h3 class=\"font-bold text-blue-300 mb-2\">\u0645\u0627 \u0647\u0648 \u0627\u0644\u0645\u062d\u0644\u0648\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u061f<\/h3>\r\n <p class=\"text-l text-slate-300\">\r\n \u0647\u0648 \u0645\u062e\u0644\u0648\u0637 \u0645\u062a\u062c\u0627\u0646\u0633 \u0646\u0627\u062a\u062c \u0639\u0646 \u0625\u0630\u0627\u0628\u0629 \u0645\u0627\u062f\u0629 (\u0645\u0644\u062d) \u0641\u064a \u0627\u0644\u0645\u0627\u0621. \u0647\u0646\u0627\u060c \u062a\u0643\u0648\u0646 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u062d\u0631\u0629 \u0627\u0644\u062d\u0631\u0643\u0629\u060c \u0648\u0644\u0643\u0646 \u064a\u0648\u062c\u062f \u0623\u064a\u0636\u0627\u064b <strong>\u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u0645\u0627\u0621<\/strong> \u0627\u0644\u062a\u064a \u0642\u062f \u062a\u0634\u0627\u0631\u0643 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-lg border-l-4 border-indigo-500 mb-4\">\r\n <strong class=\"text-indigo-300 block mb-2\">\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621!<\/strong>\r\n <p class=\"text-l text-slate-300\">\r\n \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629\u060c \u064a\u0648\u062c\u062f \u0627\u0644\u0645\u0627\u0621 (H\u2082O) \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0644\u062d. \u0627\u0644\u0645\u0627\u0621 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u062a\u0623\u0643\u0633\u062f \u0623\u0648 \u064a\u062e\u062a\u0632\u0644\u060c \u0644\u0630\u0627 \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644 \u0645\u0646\u0627\u0641\u0633\u0629 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062c\u0647\u0648\u062f \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 \u0627\u0644\u0645\u0639\u064a\u0627\u0631\u064a\u0629 (E\u00b0).\r\n <\/p>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white mb-2 text-l\">\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u062a\u0646\u0627\u0641\u0633 (\u0645\u0646 \u064a\u0631\u0628\u062d\u061f)<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-l\">\r\n <div>\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (\u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644):<\/strong>\r\n <p class=\"text-slate-400 text-l mb-1\">\u0627\u0644\u0623\u0639\u0644\u0649 \u0641\u064a \u062c\u0647\u062f \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 (E\u00b0) \u0647\u0648 \u0627\u0644\u0630\u064a \u064a\u062e\u062a\u0632\u0644.<\/p>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0644\u0632 \u0646\u0634\u0637\u0627\u064b \u062c\u062f\u0627\u064b (Na, K, Mg, Al) \u2190 <strong>\u0627\u0644\u0645\u0627\u0621 \u064a\u062e\u062a\u0632\u0644<\/strong> \u0648\u064a\u0646\u062a\u062c H\u2082.\r\n <div class=\"font-mono text-[10px] text-green-300 mt-1 mr-4 bg-black\/20 p-1 rounded ltr\">2H\u2082O + 2e\u207b \u2192 H\u2082 + 2OH\u207b (E\u00b0 = -0.83 V)<\/div>\r\n <\/li>\r\n <li>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0644\u0632 \u0646\u0628\u064a\u0644\u0627\u064b (Cu, Ag) \u2190 <strong>\u0627\u0644\u0641\u0644\u0632 \u064a\u062e\u062a\u0632\u0644<\/strong> \u0648\u064a\u062a\u0631\u0633\u0628.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (\u0627\u0644\u062a\u0623\u0643\u0633\u062f):<\/strong>\r\n <p class=\"text-slate-400 text-l mb-1\">\u0627\u0644\u0623\u0642\u0644 \u0641\u064a \u062c\u0647\u062f \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 (\u0623\u0648 \u0627\u0644\u0623\u0633\u0647\u0644 \u062a\u0623\u0643\u0633\u062f\u0627\u064b) \u0647\u0648 \u0627\u0644\u0630\u064a \u064a\u062a\u0623\u0643\u0633\u062f.<\/p>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u0627\u0644\u0647\u0627\u0644\u0648\u062c\u064a\u0646\u0627\u062a (Cl\u207b, Br\u207b, I\u207b) \u2190 <strong>\u062a\u062a\u0623\u0643\u0633\u062f<\/strong> (\u062a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632\u0627\u062a).<\/li>\r\n <li>\u0623\u0646\u064a\u0648\u0646\u0627\u062a \u0622\u062e\u0631\u0649 (SO\u2084\u00b2\u207b, NO\u2083\u207b) \u2190 <strong>\u0627\u0644\u0645\u0627\u0621 \u064a\u062a\u0623\u0643\u0633\u062f<\/strong> \u0648\u064a\u0646\u062a\u062c O\u2082.\r\n <div class=\"font-mono text-[10px] text-red-300 mt-1 mr-4 bg-black\/20 p-1 rounded ltr\">2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b (E\u00b0ox = -1.23 V)<\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border border-white\/10\">\r\n <h3 class=\"font-bold text-yellow-300 mb-2\">\u0645\u062b\u0627\u0644 \u0661: \u0645\u062d\u0644\u0648\u0644 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (NaCl)<\/h3>\r\n <div class=\"space-y-2 text-l\">\r\n <p class=\"text-slate-300\"><strong>\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637:<\/strong> \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 Na\u207a \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"pl-4 border-r-2 border-slate-600 text-l font-mono text-slate-400\">\r\n Na\u207a + e\u207b \u2192 Na (E\u00b0 = -2.71 V)<br\/>\r\n 2H\u2082O + 2e\u207b \u2192 H\u2082 + 2OH\u207b (E\u00b0 = -0.83 V) \r\n <\/div>\r\n <p class=\"text-green-400 text-l\">\u0627\u0644\u0645\u0627\u0621 \u0623\u0633\u0647\u0644 \u0627\u062e\u062a\u0632\u0627\u0644\u0627\u064b \u2190 \u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u2082).<\/p>\r\n <p class=\"text-slate-300 mt-2\"><strong>\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f:<\/strong> \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 Cl\u207b \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"pl-4 border-r-2 border-slate-600 text-l font-mono text-slate-400\">\r\n 2Cl\u207b \u2192 Cl\u2082 + 2e\u207b (E\u00b0ox = -1.36 V) <br\/>\r\n 2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b (E\u00b0ox = -1.23 V)\r\n <\/div>\r\n <p class=\"text-red-400 text-l\">\u0631\u063a\u0645 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u0642\u064a\u0645\u060c \u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0643\u0644\u0648\u0631\u064a\u062f (\u0628\u0633\u0628\u0628 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062a\u0631\u0643\u064a\u0632) \u2190 \u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0643\u0644\u0648\u0631 (Cl\u2082).<\/p>\r\n <div class=\"mt-3 p-2 bg-white\/5 rounded text-center\">\r\n <strong class=\"text-white text-l\">\u0627\u0644\u0646\u0627\u062a\u062c \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0641\u064a \u0627\u0644\u0648\u0639\u0627\u0621:<\/strong> \u0623\u064a\u0648\u0646\u0627\u062a Na\u207a \u0648 OH\u207b (\u0645\u062d\u0644\u0648\u0644 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645).\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0662: \u0645\u062d\u0644\u0648\u0644 \u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0627\u0644\u0646\u062d\u0627\u0633 (CuSO\u2084)<\/h3>\r\n <p class=\"text-l text-slate-400 mb-2\">(\u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0642\u0637\u0627\u0628 \u062e\u0627\u0645\u0644\u0629 \u0645\u062b\u0644 \u0627\u0644\u062c\u0631\u0627\u0641\u064a\u062a)<\/p>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-) \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644:<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 Cu\u00b2\u207a \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"font-mono text-white ltr text-l\">Cu\u00b2\u207a + 2e\u207b \u2192 Cu(s) (E\u00b0 = +0.34 V) <\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u062c\u0647\u062f \u0627\u062e\u062a\u0632\u0627\u0644 \u0627\u0644\u0646\u062d\u0627\u0633 \u0623\u0639\u0644\u0649 \u0645\u0646 \u0627\u0644\u0645\u0627\u0621\u060c \u0644\u0630\u0627 \u064a\u062a\u0631\u0633\u0628 \u0627\u0644\u0646\u062d\u0627\u0633 (\u0637\u0628\u0642\u0629 \u062d\u0645\u0631\u0627\u0621).<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+) \u0627\u0644\u062a\u0623\u0643\u0633\u062f:<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 SO\u2084\u00b2\u207b \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"font-mono text-white ltr text-l\">2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b (E\u00b0ox = -1.23 V) <\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0635\u0639\u0628\u0629 \u0627\u0644\u062a\u0623\u0643\u0633\u062f\u060c \u0644\u0630\u0627 \u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u0646\u0627\u062a\u062c \u0641\u064a \u0627\u0644\u0645\u062d\u0644\u0648\u0644:<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062a\u062a\u0628\u0642\u0649 \u0623\u064a\u0648\u0646\u0627\u062a H\u207a \u0648 SO\u2084\u00b2\u207b (\u064a\u0635\u0628\u062d \u0627\u0644\u0645\u062d\u0644\u0648\u0644 \u062d\u0645\u0636\u064a\u0627\u064b H\u2082SO\u2084).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0663: \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0621 \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0627\u064b<\/h3>\r\n <p class=\"text-l text-slate-400 mb-2\">(\u0645\u0627\u0621 \u0645\u062d\u0645\u0636 \u0628\u0642\u0637\u0631\u0627\u062a H\u2082SO\u2084 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0648\u0635\u064a\u0644)<\/p>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-):<\/strong>\r\n <div class=\"font-mono text-white ltr text-l\">2H\u207a + 2e\u207b \u2192 H\u2082(g)<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062e\u062a\u0632\u0644 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0648\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 H\u2082.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+):<\/strong>\r\n <div class=\"font-mono text-white ltr text-l\">2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <strong class=\"text-white block mb-1\">\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062d\u062c\u0645 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0627\u0644\u0646\u0627\u062a\u062c \u0636\u0639\u0641 \u062d\u062c\u0645 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (2:1).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0665. \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-l mb-6\">\r\n <div class=\"bg-slate-800 p-3 rounded-lg border-t-2 border-yellow-500\">\r\n <strong class=\"text-white block mb-1\">1. \u0627\u0644\u0637\u0644\u0627\u0621 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062a\u063a\u0637\u064a\u0629 \u0641\u0644\u0632 \u0628\u0637\u0628\u0642\u0629 \u0631\u0642\u064a\u0642\u0629 \u0645\u0646 \u0641\u0644\u0632 \u0622\u062e\u0631 (\u0645\u062b\u0644 \u0637\u0644\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u0639\u0642 \u0628\u0627\u0644\u0641\u0636\u0629) \u0644\u0644\u062d\u0645\u0627\u064a\u0629 \u0645\u0646 \u0627\u0644\u062a\u0622\u0643\u0644 \u0623\u0648 \u0644\u0644\u0632\u064a\u0646\u0629.<\/p>\r\n <p class=\"text-l text-slate-500 mt-1\">\u0627\u0644\u0645\u0647\u0628\u0637: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0645\u0631\u0627\u062f \u0637\u0644\u0627\u0624\u0647\u0627.<br\/>\u0627\u0644\u0645\u0635\u0639\u062f: \u0627\u0644\u0641\u0644\u0632 \u0627\u0644\u0645\u0631\u0627\u062f \u0627\u0644\u0637\u0644\u0627\u0621 \u0628\u0647.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800 p-3 rounded-lg border-t-2 border-blue-500\">\r\n <strong class=\"text-white block mb-1\">2. \u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0641\u0644\u0632\u0627\u062a<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0646\u062d\u0627\u0633 \u063a\u064a\u0631 \u0627\u0644\u0646\u0642\u064a (\u0627\u0644\u0645\u0635\u0639\u062f) \u0644\u062a\u0631\u0633\u064a\u0628 \u0646\u062d\u0627\u0633 \u0646\u0642\u064a \u062c\u062f\u0627\u064b (99.9%) \u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 \u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0641\u064a \u0627\u0644\u0623\u0633\u0644\u0627\u0643.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800 p-3 rounded-lg border-t-2 border-purple-500\">\r\n <strong class=\"text-white block mb-1\">3. \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a<\/strong>\r\n <p class=\"text-l text-slate-400\">\u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 (\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645\u060c \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645\u060c \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645) \u0645\u0646 \u062e\u0627\u0645\u0627\u062a\u0647\u0627 \u0627\u0644\u0645\u0635\u0647\u0648\u0631\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border-l-4 border-purple-500 mb-6\">\r\n <h3 class=\"font-bold text-purple-300 mb-2\">\u0644\u0645\u0627\u0630\u0627 \u0646\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a\u061f<\/h3>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u062a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0644\u0627\u0633\u062a\u062e\u0644\u0627\u0635 <strong>\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 \u062c\u062f\u0627\u064b<\/strong> (\u0645\u062b\u0644 K, Na, Ca, Mg, Al) \u0627\u0644\u062a\u064a \u062a\u0642\u0639 \u0641\u064a \u0642\u0645\u0629 \u0633\u0644\u0633\u0644\u0629 \u0627\u0644\u0646\u0634\u0627\u0637 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a.\r\n <br\/>\r\n \u0647\u0630\u0647 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u062a\u0645\u0633\u0643 \u0628\u0645\u0631\u0643\u0628\u0627\u062a\u0647\u0627 \u0628\u0642\u0648\u0629 \u0643\u0628\u064a\u0631\u0629\u060c \u0648\u0644\u0627 \u064a\u0645\u0643\u0646 \u0644\u0644\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u0645\u062e\u062a\u0632\u0644\u0629 \u0627\u0644\u0639\u0627\u062f\u064a\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0643\u0631\u0628\u0648\u0646\/\u0627\u0644\u0641\u062d\u0645) \u0623\u0646 \u062a\u0646\u062a\u0632\u0639\u0647\u0627 \u0645\u0646 \u062e\u0627\u0645\u0627\u062a\u0647\u0627. \u0644\u0630\u0627\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \"\u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a\" (\u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a) \u0643\u0645\u0635\u062f\u0631 \u0637\u0627\u0642\u0629 \u0642\u0648\u064a \u0644\u0625\u062c\u0628\u0627\u0631 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0641\u0644\u0632 \u0639\u0644\u0649 \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u062d\u0627\u0644\u062a\u0647\u0627 \u0627\u0644\u0646\u0642\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"bg-slate-900\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3 border-b border-white\/10 pb-2\">\u062f\u0631\u0627\u0633\u0629 \u062d\u0627\u0644\u0629: \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (\u0639\u0645\u0644\u064a\u0629 \u0647\u0648\u0644-\u0647\u064a\u0631\u0648\u0644\u062a)<\/h3>\r\n <p class=\"text-l text-slate-300 mb-3\">\u064a\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0645\u0646 \u062e\u0627\u0645 <strong>\u0627\u0644\u0628\u0648\u0643\u0633\u064a\u062a (Al\u2082O\u2083)<\/strong>. \u0646\u0638\u0631\u0627\u064b \u0644\u062f\u0631\u062c\u0629 \u0627\u0646\u0635\u0647\u0627\u0631\u0647 \u0627\u0644\u0639\u0627\u0644\u064a\u0629 \u062c\u062f\u0627\u064b (2050\u00b0C)\u060c \u064a\u0630\u0627\u0628 \u0641\u064a \u0645\u0635\u0647\u0648\u0631 <strong>\u0627\u0644\u0643\u0631\u064a\u0648\u0644\u064a\u062a (Na\u2083AlF\u2086)<\/strong> \u0644\u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 \u0625\u0644\u0649 \u062d\u0648\u0627\u0644\u064a 950\u00b0C \u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0637\u0627\u0642\u0629.<\/p>\r\n \r\n \r\n <div id=\"aluminum-simulation-container\" class=\"sim-card\"><\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 text-l mt-4\">\r\n <div class=\"bg-black\/20 p-3 rounded-lg\">\r\n <strong class=\"text-green-400 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (\u062c\u062f\u0627\u0631 \u0627\u0644\u0648\u0639\u0627\u0621 - \u063a\u0631\u0627\u0641\u064a\u062a):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-1\">\u062a\u062e\u062a\u0632\u0644 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645:<\/p>\r\n <div class=\"font-mono text-white ltr\">Al\u00b3\u207a + 3e\u207b \u2192 Al(l)<\/div>\r\n <p class=\"text-l text-slate-500 mt-1\">\u064a\u062a\u0631\u0633\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0627\u0644\u0645\u0635\u0647\u0648\u0631 \u0641\u064a \u0642\u0627\u0639 \u0627\u0644\u062e\u0644\u064a\u0629 \u0648\u064a\u0633\u062d\u0628 \u0645\u0646 \u0641\u062a\u062d\u0629 \u062e\u0627\u0635\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded-lg\">\r\n <strong class=\"text-red-400 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (\u0623\u0642\u0637\u0627\u0628 \u063a\u0631\u0627\u0641\u064a\u062a):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-1\">\u062a\u062a\u0623\u0643\u0633\u062f \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0623\u0643\u0633\u064a\u062f:<\/p>\r\n <div class=\"font-mono text-white ltr\">2O\u00b2\u207b \u2192 O\u2082 + 4e\u207b<\/div>\r\n <p class=\"text-l text-slate-500 mt-1\">\u064a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0627\u0644\u0646\u0627\u062a\u062c \u0645\u0639 \u0623\u0642\u0637\u0627\u0628 \u0627\u0644\u063a\u0631\u0627\u0641\u064a\u062a (C) \u0645\u0643\u0648\u0646\u0627\u064b CO\u2082\u060c \u0644\u0630\u0627 \u062a\u062a\u0622\u0643\u0644 \u0627\u0644\u0623\u0642\u0637\u0627\u0628 \u0648\u064a\u062c\u0628 \u0627\u0633\u062a\u0628\u062f\u0627\u0644\u0647\u0627 \u062f\u0648\u0631\u064a\u0627\u064b.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"text-l text-yellow-300 bg-yellow-900\/20 px-2 py-1 rounded\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0643\u0644\u064a: 2Al\u2082O\u2083 + 3C \u2192 4Al + 3CO\u2082<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0666. \u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0627\u062a<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border-r-4 border-green-500 mb-4\">\r\n <h3 class=\"font-bold text-green-300 mb-2\">1. \u0623\u0647\u0645\u064a\u0629 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631<\/h3>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li><strong>\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0641\u064a\u0633\u0629:<\/strong> \u0645\u062b\u0644 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li)\u060c \u0627\u0644\u0643\u0648\u0628\u0627\u0644\u062a (Co)\u060c \u0648\u0627\u0644\u0646\u064a\u0643\u0644 (Ni).<\/li>\r\n <li><strong>\u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062a\u0644\u0648\u062b \u0627\u0644\u0628\u064a\u0626\u064a:<\/strong> \u0645\u0646\u0639 \u062a\u0633\u0631\u0628 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0633\u0627\u0645\u0629 \u0625\u0644\u0649 \u0627\u0644\u062a\u0631\u0628\u0629 \u0648\u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u062c\u0648\u0641\u064a\u0629.<\/li>\r\n <li><strong>\u062d\u0641\u0638 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629:<\/strong> \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0627\u062c\u0629 \u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062a\u0639\u062f\u064a\u0646 \u0627\u0644\u0645\u0643\u0644\u0641\u0629 \u0648\u0627\u0644\u0645\u0644\u0648\u062b\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg mb-4\">\r\n <h3 class=\"font-bold text-white mb-2\">2. \u062e\u0637\u0648\u0627\u062a \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0628\u0637\u0627\u0631\u064a\u0627\u062a \u0623\u064a\u0648\u0646 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645<\/h3>\r\n <ol class=\"list-decimal list-inside text-l text-slate-300 space-y-2\">\r\n <li><strong>\u0627\u0644\u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u064a\u062f\u0648\u064a:<\/strong> \u0641\u0635\u0644 \u0627\u0644\u063a\u0644\u0627\u0641 \u0648\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643\u064a\u0629.<\/li>\r\n <li><strong>\u0627\u0644\u0637\u062d\u0646 (Crushing):<\/strong> \u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0625\u0644\u0649 \u0645\u0633\u062d\u0648\u0642 \u0623\u0633\u0648\u062f.<\/li>\r\n <li><strong>\u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a:<\/strong> \u0641\u0635\u0644 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629 \u0648\u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643 \u0639\u0646 \u0627\u0644\u0645\u0633\u062d\u0648\u0642 \u0627\u0644\u0645\u0639\u062f\u0646\u064a.<\/li>\r\n <li><strong>\u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a.<\/li>\r\n <\/ol>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border-r-4 border-yellow-500\">\r\n <h3 class=\"font-bold text-yellow-300 mb-2\">3. \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0641\u064a \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631<\/h3>\r\n <p class=\"text-l text-slate-300 mb-3\">\u062a\u0633\u062a\u062e\u062f\u0645 \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u062a\u0631\u0633\u064a\u0628 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0642\u064a\u0629 \u0645\u0646 \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0639\u0627\u0644\u062c\u0629.<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-2\">\u0627\u0644\u0643\u062a\u0631\u0648\u0644\u064a\u062a \u064a\u062d\u062a\u0648\u064a \u0623\u064a\u0648\u0646\u0627\u062a Li\u207a \u2190 \u064a\u062a\u0631\u0633\u0628 Li.<\/p>\r\n <div class=\"font-mono text-center text-green-300 bg-slate-900\/50 p-2 rounded ltr text-l\">Li\u207a + e\u207b \u2192 Li(s)<\/div>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0643\u0648\u0628\u0627\u0644\u062a (Co):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-2\">\u0645\u0646 \u0645\u062d\u0644\u0648\u0644 \u0623\u064a\u0648\u0646\u0627\u062a Co\u00b2\u207a.<\/p>\r\n <div class=\"font-mono text-center text-green-300 bg-slate-900\/50 p-2 rounded ltr text-l\">Co\u00b2\u207a + 2e\u207b \u2192 Co(s)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bg-indigo-900\/20 p-5 rounded-xl border-l-4 border-indigo-500 mt-8\">\r\n <h2 class=\"text-xl font-bold text-indigo-300 mb-4 flex items-center gap-2\">\u0646\u0635\u0627\u0626\u062d \u0630\u0647\u0628\u064a\u0629 \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/h2>\r\n <div class=\"space-y-4 text-l text-slate-300\">\r\n <div>\r\n <strong class=\"text-white block mb-1\">1. \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 \u0647\u064a \u0627\u0644\u0645\u0641\u062a\u0627\u062d:<\/strong>\r\n <p>\u062f\u0627\u0626\u0645\u0627\u064b \u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629 \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a. \u062a\u0630\u0643\u0631 \u0623\u0646 \u0627\u0644\u0625\u0634\u0627\u0631\u0627\u062a \u062a\u0646\u0639\u0643\u0633 (\u0627\u0644\u0645\u0635\u0639\u062f \u0645\u0648\u062c\u0628 \u0641\u064a \u0627\u0644\u062a\u062d\u0644\u064a\u0644\u060c \u0633\u0627\u0644\u0628 \u0641\u064a \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629)\u060c \u0644\u0643\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0646\u0641\u0633\u0647 (\u0627\u0644\u0645\u0635\u0639\u062f = \u062a\u0623\u0643\u0633\u062f\u060c \u0627\u0644\u0645\u0647\u0628\u0637 = \u0627\u062e\u062a\u0632\u0627\u0644) \u064a\u0628\u0642\u0649 \u062b\u0627\u0628\u062a\u0627\u064b.<\/p>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-white block mb-1\">2. \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644:<\/strong>\r\n <ul class=\"list-disc list-inside mt-1 text-l\">\r\n <li>\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637: \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0644\u0632 \u0646\u0634\u0637\u0627\u064b (\u0645\u062c\u0645\u0648\u0639\u0627\u062a 1, 2, Al)\u060c \u064a\u062e\u062a\u0632\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u0646\u062a\u062c H\u2082. \u0625\u0630\u0627 \u0643\u0627\u0646 \u063a\u064a\u0631 \u0646\u0634\u0637 (Cu, Ag)\u060c \u064a\u062e\u062a\u0632\u0644 \u0627\u0644\u0641\u0644\u0632.<\/li>\r\n <li>\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f: \u0627\u0644\u0647\u0627\u0644\u0648\u062c\u064a\u0646\u0627\u062a (Cl, Br, I) \u062a\u062a\u0623\u0643\u0633\u062f \u0623\u0648\u0644\u0627\u064b. \u0625\u0630\u0627 \u0644\u0645 \u062a\u0648\u062c\u062f\u060c \u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u0646\u062a\u062c O\u2082.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-white block mb-1\">3. \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645:<\/strong>\r\n <p>\u0631\u0643\u0632 \u0639\u0644\u0649 \u062f\u0648\u0631 \u0627\u0644\u0643\u0631\u064a\u0648\u0644\u064a\u062a (\u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631) \u0648\u0633\u0628\u0628 \u062a\u0622\u0643\u0644 \u0623\u0642\u0637\u0627\u0628 \u0627\u0644\u062c\u0631\u0627\u0641\u064a\u062a (\u062a\u0641\u0627\u0639\u0644 C \u0645\u0639 O\u2082 \u0627\u0644\u0646\u0627\u062a\u062c).<\/p>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-white block mb-1\">4. \u0627\u0644\u0645\u0635\u0647\u0648\u0631 vs \u0627\u0644\u0645\u062d\u0644\u0648\u0644:<\/strong>\r\n <p>\u0627\u0646\u062a\u0628\u0647 \u062c\u064a\u062f\u0627\u064b \u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u0627\u062f\u0629 \u0641\u064a \u0627\u0644\u0633\u0624\u0627\u0644 (\u0645\u0635\u0647\u0648\u0631 \u0623\u0645 \u0645\u062d\u0644\u0648\u0644)\u060c \u0641\u0627\u0644\u0646\u0648\u0627\u062a\u062c \u062a\u062e\u062a\u0644\u0641 \u0643\u0644\u064a\u0627\u064b \u0628\u0648\u062c\u0648\u062f \u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div> \r\n <\/div> \r\n\r\n \r\n <script>\r\n (function() {\r\n \"use strict\";\r\n\r\n \/\/ ---------- 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a (\u062a\u062c\u0631\u0628\u0629 \u0641\u0627\u0631\u0627\u062f\u0627\u064a) ----------\r\n function initElectrolysisSim(containerId) {\r\n const container = document.getElementById(containerId);\r\n if (!container) return;\r\n container.innerHTML = ''; \/\/ \u062a\u0641\u0631\u064a\u063a \u0623\u064a \u0645\u062d\u062a\u0648\u0649 \u0633\u0627\u0628\u0642\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0648\u0627\u062c\u0647\u0629\r\n const canvas = document.createElement('canvas');\r\n canvas.width = 400;\r\n canvas.height = 300;\r\n canvas.className = 'border border-slate-600 shadow-lg';\r\n container.appendChild(canvas);\r\n\r\n const controls = document.createElement('div');\r\n controls.className = 'flex justify-center gap-4 mt-4 flex-wrap';\r\n container.appendChild(controls);\r\n\r\n const toggleBtn = document.createElement('button');\r\n toggleBtn.className = 'px-6 py-2 rounded-full font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u064a\u0627\u0631';\r\n controls.appendChild(toggleBtn);\r\n\r\n const resetBtn = document.createElement('button');\r\n resetBtn.className = 'px-6 py-2 rounded-full font-bold text-white bg-slate-600 hover:bg-slate-500 shadow-lg';\r\n resetBtn.innerHTML = '\u27f2 \u0625\u0639\u0627\u062f\u0629 \u0636\u0628\u0637';\r\n controls.appendChild(resetBtn);\r\n\r\n \/\/ \u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n let isOn = false;\r\n let deposit = 0;\r\n let gas = 0;\r\n let animationId = null;\r\n\r\n \/\/ \u062b\u0648\u0627\u0628\u062a \u0627\u0644\u0631\u0633\u0645\r\n const width = 400, height = 300;\r\n const liquidY = 100;\r\n const electrodeY = 100;\r\n const electrodeH = 130;\r\n const electrodeW = 20;\r\n const anodeX = 120;\r\n const cathodeX = 260;\r\n const tubeWidth = 50;\r\n const anodeTubeX = anodeX - (tubeWidth - electrodeW) \/ 2;\r\n const tubeTopY = liquidY - 40;\r\n const tubeHeight = 180; \/\/ \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0623\u0646\u0628\u0648\u0628\r\n\r\n \/\/ \u0645\u0635\u0641\u0648\u0641\u0629 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a\r\n let ions = [];\r\n\r\n function initIons() {\r\n ions = [];\r\n for (let i = 0; i < 50; i++) {\r\n ions.push({\r\n id: i,\r\n x: Math.random() * (width - 40) + 20,\r\n y: liquidY + 20 + Math.random() * (height - liquidY - 40),\r\n type: i % 2 === 0 ? 'cation' : 'anion',\r\n state: 'free',\r\n vx: (Math.random() - 0.5) * 0.5,\r\n vy: (Math.random() - 0.5) * 0.5,\r\n opacity: 1\r\n });\r\n }\r\n }\r\n initIons();\r\n\r\n function render() {\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n \/\/ 1. \u0648\u0639\u0627\u0621 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\r\n ctx.fillStyle = 'rgba(255,255,255,0.05)';\r\n ctx.fillRect(20, liquidY, width-40, height-liquidY-10);\r\n ctx.strokeStyle = '#94a3b8';\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(20, liquidY-20, width-40, height-liquidY-10+20);\r\n ctx.fillStyle = 'rgba(56,189,248,0.2)';\r\n ctx.fillRect(25, liquidY, width-50, height-liquidY-15);\r\n\r\n \/\/ 2. \u0627\u0644\u0623\u0642\u0637\u0627\u0628\r\n ctx.fillStyle = '#64748b';\r\n ctx.fillRect(anodeX, electrodeY, electrodeW, electrodeH);\r\n ctx.fillRect(cathodeX, electrodeY, electrodeW, electrodeH);\r\n\r\n \/\/ \u0637\u0628\u0642\u0629 \u0627\u0644\u062a\u0631\u0633\u064a\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0647\u0628\u0637\r\n if (deposit > 0) {\r\n const thickness = Math.min(15, deposit \/ 5);\r\n ctx.fillStyle = '#e2e8f0';\r\n ctx.fillRect(cathodeX - thickness, electrodeY+10, electrodeW+thickness*2, electrodeH-20);\r\n ctx.strokeStyle = '#cbd5e1';\r\n ctx.lineWidth = 1;\r\n ctx.strokeRect(cathodeX - thickness, electrodeY+10, electrodeW+thickness*2, electrodeH-20);\r\n ctx.fillStyle = 'rgba(255,255,255,0.4)';\r\n ctx.fillRect(cathodeX - thickness+2, electrodeY+10, 3, electrodeH-20);\r\n }\r\n\r\n \/\/ \u0623\u0646\u0628\u0648\u0628 \u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(anodeTubeX, electrodeY+electrodeH-20);\r\n ctx.lineTo(anodeTubeX, tubeTopY+10);\r\n ctx.quadraticCurveTo(anodeTubeX+tubeWidth\/2, tubeTopY-10, anodeTubeX+tubeWidth, tubeTopY+10);\r\n ctx.lineTo(anodeTubeX+tubeWidth, electrodeY+electrodeH-20);\r\n ctx.stroke();\r\n\r\n \/\/ \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062a\u062c\u0645\u0639\r\n const maxGas = 100;\r\n const gasHeight = Math.min(tubeHeight-20, (gas \/ maxGas) * (tubeHeight-50));\r\n const gasY = tubeTopY + gasHeight;\r\n if (gas > 0) {\r\n ctx.fillStyle = 'rgba(252,211,77,0.3)';\r\n ctx.beginPath();\r\n ctx.moveTo(anodeTubeX+2, gasY);\r\n ctx.lineTo(anodeTubeX+2, tubeTopY+10);\r\n ctx.quadraticCurveTo(anodeTubeX+tubeWidth\/2, tubeTopY-8, anodeTubeX+tubeWidth-2, tubeTopY+10);\r\n ctx.lineTo(anodeTubeX+tubeWidth-2, gasY);\r\n ctx.fill();\r\n }\r\n\r\n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a \u0627\u0644\u0623\u0642\u0637\u0627\u0628\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 12px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(isOn ? '+ (\u0627\u0644\u0645\u0635\u0639\u062f)' : '\u0627\u0644\u0645\u0635\u0639\u062f', anodeX+electrodeW\/2, electrodeY+electrodeH+20);\r\n ctx.fillText(isOn ? '- (\u0627\u0644\u0645\u0647\u0628\u0637)' : '\u0627\u0644\u0645\u0647\u0628\u0637', cathodeX+electrodeW\/2, electrodeY+electrodeH+20);\r\n\r\n \/\/ \u0627\u0644\u062f\u0627\u0631\u0629 \u0648\u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629\r\n ctx.strokeStyle = '#cbd5e1';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(anodeX+electrodeW\/2, electrodeY);\r\n ctx.lineTo(anodeX+electrodeW\/2, 20);\r\n ctx.lineTo(width\/2-20, 20);\r\n ctx.moveTo(cathodeX+electrodeW\/2, electrodeY);\r\n ctx.lineTo(cathodeX+electrodeW\/2, 20);\r\n ctx.lineTo(width\/2+20, 20);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(width\/2-20, 10); ctx.lineTo(width\/2-20, 30);\r\n ctx.lineWidth = 3; ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(width\/2+20, 15); ctx.lineTo(width\/2+20, 25);\r\n ctx.lineWidth = 3; ctx.stroke();\r\n\r\n if (isOn) {\r\n ctx.beginPath(); ctx.moveTo(width\/2-10, 20); ctx.lineTo(width\/2+10, 20);\r\n ctx.lineWidth = 2; ctx.strokeStyle = '#facc15'; ctx.shadowColor = '#facc15'; ctx.shadowBlur = 10; ctx.stroke(); ctx.shadowBlur = 0;\r\n } else {\r\n ctx.beginPath(); ctx.moveTo(width\/2-10, 20); ctx.lineTo(width\/2+5, 10);\r\n ctx.lineWidth = 2; ctx.strokeStyle = '#cbd5e1'; ctx.stroke();\r\n }\r\n\r\n \/\/ \u062d\u0631\u0643\u0629 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a\r\n const depositThick = Math.min(15, deposit\/5);\r\n const tubeLeft = anodeTubeX + 5;\r\n const tubeRight = anodeTubeX + tubeWidth - 5;\r\n\r\n ions.forEach(ion => {\r\n if (ion.state === 'free') {\r\n if (isOn) {\r\n if (ion.type === 'cation') {\r\n const targetX = cathodeX - depositThick;\r\n ion.vx += (targetX - ion.x) * 0.002;\r\n } else {\r\n const targetX = anodeX + electrodeW\/2;\r\n ion.vx += (targetX - ion.x) * 0.002;\r\n }\r\n ion.vx *= 0.95;\r\n ion.vy *= 0.95;\r\n } else {\r\n ion.vx += (Math.random() - 0.5) * 0.1;\r\n ion.vy += (Math.random() - 0.5) * 0.1;\r\n }\r\n ion.x += ion.vx;\r\n ion.y += ion.vy;\r\n\r\n \/\/ \u0627\u0644\u062d\u062f\u0648\u062f\r\n if (ion.x < 30) { ion.x = 30; ion.vx *= -1; }\r\n if (ion.x > width - 30) { ion.x = width - 30; ion.vx *= -1; }\r\n if (ion.y < liquidY + 10) { ion.y = liquidY + 10; ion.vy *= -1; }\r\n if (ion.y > height - 20) { ion.y = height - 20; ion.vy *= -1; }\r\n\r\n if (isOn) {\r\n if (ion.type === 'cation' && ion.x > cathodeX - depositThick - 5 && ion.x < cathodeX + electrodeW + depositThick + 5 && ion.y > electrodeY) {\r\n ion.state = 'depositing';\r\n }\r\n if (ion.type === 'anion' && ion.x > anodeX - 5 && ion.x < anodeX + electrodeW + 5 && ion.y > electrodeY) {\r\n ion.state = 'gas';\r\n ion.x = Math.max(tubeLeft, Math.min(tubeRight, ion.x));\r\n ion.vx = (Math.random() - 0.5) * 0.5;\r\n ion.vy = -1.5;\r\n }\r\n }\r\n } else if (ion.state === 'depositing') {\r\n ion.opacity -= 0.1;\r\n ion.x += (cathodeX + electrodeW\/2 - ion.x) * 0.1;\r\n if (ion.opacity <= 0) {\r\n deposit += 0.5;\r\n ion.state = 'free';\r\n ion.opacity = 1;\r\n ion.x = Math.random() * (width\/2) + 20;\r\n ion.y = liquidY + 20 + Math.random() * (height - liquidY - 40);\r\n ion.vx = 0; ion.vy = 0;\r\n }\r\n } else if (ion.state === 'gas') {\r\n ion.y += ion.vy;\r\n ion.x += Math.sin(ion.y * 0.1) * 0.5;\r\n if (ion.x < tubeLeft) ion.x = tubeLeft;\r\n if (ion.x > tubeRight) ion.x = tubeRight;\r\n if (ion.y < gasY) {\r\n gas += 0.5;\r\n ion.state = 'free';\r\n ion.opacity = 1;\r\n ion.type = 'anion';\r\n ion.x = cathodeX + (Math.random() - 0.5) * 50;\r\n ion.y = height - 40;\r\n ion.vy = 0;\r\n }\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0623\u064a\u0648\u0646\r\n ctx.beginPath();\r\n ctx.globalAlpha = ion.opacity;\r\n if (ion.state === 'gas') {\r\n ctx.arc(ion.x, ion.y, 3, 0, Math.PI*2);\r\n ctx.fillStyle = '#fef08a';\r\n ctx.strokeStyle = '#eab308';\r\n ctx.fill(); ctx.stroke();\r\n } else if (ion.state === 'depositing') {\r\n ctx.arc(ion.x, ion.y, 6, 0, Math.PI*2);\r\n ctx.fillStyle = '#e2e8f0';\r\n ctx.fill();\r\n ctx.fillStyle = 'white';\r\n ctx.beginPath(); ctx.arc(ion.x-2, ion.y-2, 2, 0, Math.PI*2); ctx.fill();\r\n } else {\r\n ctx.arc(ion.x, ion.y, 6, 0, Math.PI*2);\r\n ctx.fillStyle = ion.type === 'cation' ? '#f87171' : '#34d399';\r\n ctx.fill();\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 10px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(ion.type === 'cation' ? '+' : '-', ion.x, ion.y+1);\r\n }\r\n ctx.globalAlpha = 1;\r\n });\r\n\r\n animationId = requestAnimationFrame(render);\r\n }\r\n\r\n \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n toggleBtn.addEventListener('click', function() {\r\n isOn = !isOn;\r\n toggleBtn.className = `px-6 py-2 rounded-full font-bold text-white shadow-lg flex items-center gap-2 ${isOn ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'}`;\r\n toggleBtn.innerHTML = isOn ? '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u0642\u0637\u0639 \u0627\u0644\u062a\u064a\u0627\u0631' : '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u064a\u0627\u0631';\r\n });\r\n\r\n resetBtn.addEventListener('click', function() {\r\n isOn = false;\r\n toggleBtn.className = 'px-6 py-2 rounded-full font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u064a\u0627\u0631';\r\n deposit = 0;\r\n gas = 0;\r\n initIons();\r\n });\r\n\r\n render();\r\n }\r\n\r\n \/\/ ---------- 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (\u0647\u0648\u0644-\u0647\u064a\u0631\u0648\u0644\u062a) ----------\r\n function initAluminumSim(containerId) {\r\n const container = document.getElementById(containerId);\r\n if (!container) return;\r\n container.innerHTML = '';\r\n\r\n const canvas = document.createElement('canvas');\r\n canvas.width = 500;\r\n canvas.height = 350;\r\n canvas.className = 'border border-slate-600 shadow-lg';\r\n container.appendChild(canvas);\r\n\r\n const controls = document.createElement('div');\r\n controls.className = 'flex justify-center gap-4 mt-4 flex-wrap';\r\n container.appendChild(controls);\r\n\r\n const toggleBtn = document.createElement('button');\r\n toggleBtn.className = 'px-6 py-2 rounded-lg font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629';\r\n controls.appendChild(toggleBtn);\r\n\r\n const tapBtn = document.createElement('button');\r\n tapBtn.className = 'px-4 py-2 rounded-lg font-bold shadow-md bg-slate-600 hover:bg-slate-500 text-white';\r\n tapBtn.innerHTML = '\u0633\u062d\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645';\r\n controls.appendChild(tapBtn);\r\n\r\n const resetBtn = document.createElement('button');\r\n resetBtn.className = 'px-4 py-2 rounded-lg font-bold bg-slate-600 hover:bg-slate-500 text-white shadow-md';\r\n resetBtn.innerHTML = '\u27f2 \u0625\u0639\u0627\u062f\u0629 \u0636\u0628\u0637';\r\n controls.appendChild(resetBtn);\r\n\r\n \/\/ \u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n let isOn = false;\r\n let aluminumPoolHeight = 10;\r\n let anodeWear = 0;\r\n let tapOpen = false;\r\n let particles = [];\r\n let animationId = null;\r\n\r\n \/\/ \u062b\u0648\u0627\u0628\u062a \u0627\u0644\u062e\u0644\u064a\u0629\r\n const width = 500, height = 350;\r\n const tankX = 50, tankY = 80, tankW = 400, tankH = 220;\r\n const electrolyteLevel = tankY + 20;\r\n const anodeWid = 60, anodeHei = 100, anodeSpacing = 40;\r\n const anodeStartX = tankX + (tankW - (3 * anodeWid + 2 * anodeSpacing)) \/ 2;\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < 40; i++) {\r\n const type = Math.random() > 0.4 ? 'O2-' : 'Al3+';\r\n particles.push({\r\n id: Math.random(),\r\n type: type,\r\n x: tankX + 20 + Math.random() * (tankW - 40),\r\n y: electrolyteLevel + 20 + Math.random() * (tankH - 60),\r\n vx: (Math.random() - 0.5) * 0.5,\r\n vy: (Math.random() - 0.5) * 0.5,\r\n radius: type === 'Al3+' ? 4 : 5,\r\n color: type === 'Al3+' ? '#a5b4fc' : '#f87171',\r\n opacity: 1\r\n });\r\n }\r\n }\r\n initParticles();\r\n\r\n function render() {\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n \/\/ \u063a\u0644\u0627\u0641 \u0627\u0644\u062e\u0644\u064a\u0629\r\n ctx.fillStyle = '#475569';\r\n ctx.fillRect(tankX-10, tankY, tankW+20, tankH+10);\r\n ctx.fillStyle = '#1e293b';\r\n ctx.fillRect(tankX, tankY, tankW, tankH);\r\n\r\n \/\/ \u0628\u0631\u0643\u0629 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645\r\n const alY = tankY + tankH - aluminumPoolHeight;\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.fillRect(tankX, alY, tankW, aluminumPoolHeight);\r\n ctx.fillStyle = 'rgba(255,255,255,0.2)';\r\n ctx.fillRect(tankX, alY, tankW, 5);\r\n\r\n \/\/ \u0627\u0644\u0643\u0647\u0631\u0644\r\n ctx.fillStyle = 'rgba(254,243,199,0.3)';\r\n ctx.fillRect(tankX, electrolyteLevel, tankW, alY - electrolyteLevel);\r\n\r\n \/\/ \u0623\u0646\u0648\u062f\u0627\u062a \u0627\u0644\u0643\u0631\u0628\u0648\u0646\r\n for (let i=0; i<3; i++) {\r\n const x = anodeStartX + i*(anodeWid + anodeSpacing);\r\n const currentH = anodeHei - (isOn ? anodeWear : 0) * 0.8;\r\n ctx.fillStyle = '#171717';\r\n ctx.fillRect(x, tankY-40, anodeWid, currentH+40);\r\n ctx.fillStyle = '#b45309';\r\n ctx.fillRect(x + anodeWid\/2 -5, tankY-60, 10, 20);\r\n if (isOn && Math.random() < 0.3) {\r\n particles.push({\r\n id: Math.random(),\r\n type: 'CO2',\r\n x: x + Math.random() * anodeWid,\r\n y: tankY + currentH -5,\r\n vx: (Math.random()-0.5)*0.5,\r\n vy: -1 - Math.random(),\r\n radius: 3,\r\n color: '#d4d4d4',\r\n opacity: 0.8\r\n });\r\n }\r\n }\r\n\r\n \/\/ \u0642\u0636\u064a\u0628 \u0627\u0644\u062a\u0648\u0635\u064a\u0644\r\n ctx.fillStyle = '#94a3b8';\r\n ctx.fillRect(tankX, tankY-70, tankW, 10);\r\n\r\n \/\/ \u0635\u0646\u0628\u0648\u0631 \u0627\u0644\u0633\u062d\u0628\r\n const tapX = tankX + tankW, tapY = tankY + tankH -15;\r\n ctx.fillStyle = '#64748b';\r\n ctx.beginPath();\r\n ctx.moveTo(tapX, tapY);\r\n ctx.lineTo(tapX+20, tapY);\r\n ctx.lineTo(tapX+25, tapY+10);\r\n ctx.lineTo(tapX+5, tapY+10);\r\n ctx.fill();\r\n\r\n if (tapOpen && aluminumPoolHeight > 5) {\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.beginPath();\r\n ctx.moveTo(tapX+22, tapY+10);\r\n ctx.lineTo(tapX+8, tapY+10);\r\n ctx.lineTo(tapX+10, tapY+60);\r\n ctx.lineTo(tapX+20, tapY+60);\r\n ctx.fill();\r\n aluminumPoolHeight -= 0.1;\r\n if (aluminumPoolHeight < 0) aluminumPoolHeight = 0;\r\n }\r\n\r\n \/\/ \u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\r\n const poolSurfaceY = tankY + tankH - aluminumPoolHeight;\r\n const newParticles = [];\r\n\r\n particles.forEach(p => {\r\n if (p.type === 'CO2') {\r\n p.y += p.vy;\r\n p.x += p.vx + Math.sin(p.y * 0.1) * 0.5;\r\n p.opacity -= 0.005;\r\n if (p.y < tankY - 50 || p.opacity <= 0) return; \/\/ \u062d\u0630\u0641\r\n } else if (isOn) {\r\n if (p.type === 'Al3+') {\r\n p.vy += 0.05;\r\n p.y += p.vy;\r\n p.x += p.vx;\r\n if (p.y >= poolSurfaceY) {\r\n aluminumPoolHeight += 0.05;\r\n p.y = electrolyteLevel + Math.random() * 20;\r\n p.x = tankX + 20 + Math.random() * (tankW - 40);\r\n p.vy = 0;\r\n }\r\n } else if (p.type === 'O2-') {\r\n p.vy -= 0.05;\r\n p.y += p.vy;\r\n p.x += p.vx;\r\n let hitAnode = false;\r\n for (let i=0; i<3; i++) {\r\n const ax = anodeStartX + i*(anodeWid + anodeSpacing);\r\n const ay = tankY - 40;\r\n const ah = anodeHei - anodeWear * 0.8;\r\n if (p.x > ax && p.x < ax + anodeWid && p.y < tankY + ah) hitAnode = true;\r\n }\r\n if (hitAnode) {\r\n anodeWear += 0.005;\r\n p.y = poolSurfaceY - Math.random() * 20;\r\n p.x = tankX + 20 + Math.random() * (tankW - 40);\r\n p.vy = 0;\r\n }\r\n if (p.y < electrolyteLevel) { p.y = poolSurfaceY - 5; p.vy = 0; }\r\n }\r\n } else {\r\n p.x += (Math.random() - 0.5);\r\n p.y += (Math.random() - 0.5);\r\n }\r\n\r\n \/\/ \u062d\u062f\u0648\u062f\r\n if (p.x < tankX + 10) p.x = tankX + 10;\r\n if (p.x > tankX + tankW - 10) p.x = tankX + tankW - 10;\r\n if (p.y > poolSurfaceY) p.y = poolSurfaceY;\r\n if (p.y < electrolyteLevel) p.y = electrolyteLevel;\r\n\r\n newParticles.push(p);\r\n\r\n \/\/ \u0631\u0633\u0645\r\n ctx.globalAlpha = p.opacity;\r\n ctx.fillStyle = p.color;\r\n ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI*2); ctx.fill();\r\n if (p.type !== 'CO2') {\r\n ctx.fillStyle = 'black';\r\n ctx.font = '8px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(p.type === 'Al3+' ? 'Al' : 'O', p.x, p.y);\r\n }\r\n ctx.globalAlpha = 1;\r\n });\r\n particles = newParticles;\r\n\r\n \/\/ \u0646\u0635\u0648\u0635\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 12px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('\u0645\u0635\u0639\u062f (+) \u063a\u0631\u0627\u0641\u064a\u062a', width\/2, tankY - 80);\r\n ctx.fillText('\u0645\u0647\u0628\u0637 (-) \u0637\u0628\u0642\u0629 \u0627\u0644\u063a\u0631\u0627\u0641\u064a\u062a', width\/2, tankY + tankH + 20);\r\n if (isOn) {\r\n ctx.fillStyle = '#facc15';\r\n ctx.fillText('CO\u2082', anodeStartX + anodeWid\/2, electrolyteLevel - 10);\r\n ctx.fillText('Al (\u0645\u0635\u0647\u0648\u0631)', width\/2, tankY + tankH - 5);\r\n }\r\n\r\n animationId = requestAnimationFrame(render);\r\n }\r\n\r\n toggleBtn.addEventListener('click', function() {\r\n isOn = !isOn;\r\n toggleBtn.className = `px-6 py-2 rounded-lg font-bold text-white shadow-lg flex items-center gap-2 ${isOn ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'}`;\r\n toggleBtn.innerHTML = isOn ? '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062e\u0644\u064a\u0629' : '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629';\r\n });\r\n\r\n tapBtn.addEventListener('click', function() {\r\n tapOpen = !tapOpen;\r\n tapBtn.innerHTML = tapOpen ? '\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0645\u0635\u0628' : '\u0633\u062d\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645';\r\n });\r\n\r\n resetBtn.addEventListener('click', function() {\r\n isOn = false;\r\n toggleBtn.className = 'px-6 py-2 rounded-lg font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629';\r\n tapOpen = false;\r\n tapBtn.innerHTML = '\u0633\u062d\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645';\r\n aluminumPoolHeight = 10;\r\n anodeWear = 0;\r\n initParticles();\r\n });\r\n\r\n render();\r\n }\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a \u0628\u0639\u062f \u062a\u062d\u0645\u064a\u0644 DOM\r\n window.addEventListener('DOMContentLoaded', function() {\r\n if (document.getElementById('electrolysis-simulation-container')) {\r\n initElectrolysisSim('electrolysis-simulation-container');\r\n }\r\n if (document.getElementById('aluminum-simulation-container')) {\r\n initAluminumSim('aluminum-simulation-container');\r\n }\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-17346","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17346","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=17346"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17346\/revisions"}],"predecessor-version":[{"id":17347,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17346\/revisions\/17347"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17346"}],"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\u062b\u0627\u0644\u062b: \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a + \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/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 canvas { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 0.5rem; }\r\n .sim-card { background: rgba(15,23,42,0.8); border-radius: 1rem; padding: 1.5rem; margin: 2rem 0; border: 1px solid rgba(255,255,255,0.1); }\r\n button { transition: all 0.2s; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n \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\u062b\u0627\u0644\u062b: \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/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\/electrolyticCells12.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\/electrolyticCells12.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\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\u062b\u0627\u0644\u062b: \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h1>\r\n \r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0661. \u0627\u0644\u0645\u0641\u0647\u0648\u0645 \u0648\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border-r-4 border-yellow-500\">\r\n <p class=\"text-slate-300 text-l mb-3\">\r\n <strong>\u062e\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a:<\/strong> \u0647\u064a \u062e\u0644\u064a\u0629 \u0643\u0647\u0631\u0648\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a\u0647\u0627 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 (\u0645\u0635\u062f\u0631 \u062e\u0627\u0631\u062c\u064a) \u0644\u0625\u062d\u062f\u0627\u062b \u062a\u0641\u0627\u0639\u0644 \u062a\u0623\u0643\u0633\u062f \u0648\u0627\u062e\u062a\u0632\u0627\u0644 <strong>\u063a\u064a\u0631 \u062a\u0644\u0642\u0627\u0626\u064a<\/strong>.\r\n <\/p>\r\n <div class=\"bg-black\/20 p-3 rounded text-l flex justify-around text-center\">\r\n <div>\r\n <strong class=\"text-green-400 block mb-1\">\u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629<\/strong>\r\n <span class=\"text-slate-400 text-l\">\u062a\u0641\u0627\u0639\u0644 \u062a\u0644\u0642\u0627\u0626\u064a \u2190 \u064a\u0646\u062a\u062c \u0643\u0647\u0631\u0628\u0627\u0621<\/span>\r\n <\/div>\r\n <div class=\"border-l border-white\/10 mx-2\"><\/div>\r\n <div>\r\n <strong class=\"text-yellow-400 block mb-1\">\u062e\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/strong>\r\n <span class=\"text-slate-400 text-l\">\u0643\u0647\u0631\u0628\u0627\u0621 \u2190 \u062a\u0641\u0627\u0639\u0644 \u063a\u064a\u0631 \u062a\u0644\u0642\u0627\u0626\u064a<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0662. \u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u062e\u0644\u064a\u0629 \u0648\u0622\u0644\u064a\u0629 \u0627\u0644\u0639\u0645\u0644<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border-t-4 border-red-500\">\r\n <h3 class=\"font-bold text-red-300 mb-2\">\u0627\u0644\u0645\u0635\u0639\u062f (Anode) - \u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0645\u0648\u062c\u0628 (+)<\/h3>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u064a\u062a\u0635\u0644 \u0628\u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0645\u0648\u062c\u0628 \u0644\u0644\u0628\u0637\u0627\u0631\u064a\u0629.<\/li>\r\n <li>\u062a\u0646\u062c\u0630\u0628 \u0625\u0644\u064a\u0647 <strong>\u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0633\u0627\u0644\u0628\u0629 (\u0627\u0644\u0623\u0646\u064a\u0648\u0646\u0627\u062a)<\/strong>.<\/li>\r\n <li>\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0647 \u062a\u0641\u0627\u0639\u0644 <strong>\u0627\u0644\u062a\u0623\u0643\u0633\u062f<\/strong> (\u0641\u0642\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border-t-4 border-green-500\">\r\n <h3 class=\"font-bold text-green-300 mb-2\">\u0627\u0644\u0645\u0647\u0628\u0637 (Cathode) - \u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0633\u0627\u0644\u0628 (-)<\/h3>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u064a\u062a\u0635\u0644 \u0628\u0627\u0644\u0642\u0637\u0628 \u0627\u0644\u0633\u0627\u0644\u0628 \u0644\u0644\u0628\u0637\u0627\u0631\u064a\u0629.<\/li>\r\n <li>\u062a\u0646\u062c\u0630\u0628 \u0625\u0644\u064a\u0647 <strong>\u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0648\u062c\u0628\u0629 (\u0627\u0644\u0643\u0627\u062a\u064a\u0648\u0646\u0627\u062a)<\/strong>.<\/li>\r\n <li>\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0647 \u062a\u0641\u0627\u0639\u0644 <strong>\u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644<\/strong> (\u0643\u0633\u0628 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border-t-4 border-yellow-500 mb-6\">\r\n <h3 class=\"font-bold text-yellow-300 mb-2\">\u0645\u0635\u062f\u0631 \u0627\u0644\u0637\u0627\u0642\u0629 (\u062c\u0647\u062f \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629 \u0627\u0644\u0644\u0627\u0632\u0645)<\/h3>\r\n <p class=\"text-l text-slate-300 mb-2\">\r\n \u0644\u0625\u062d\u062f\u0627\u062b \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u060c \u064a\u062c\u0628 \u062a\u0648\u0635\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629 \u0628\u0645\u0635\u062f\u0631 \u062c\u0647\u062f \u062e\u0627\u0631\u062c\u064a (\u0628\u0637\u0627\u0631\u064a\u0629). \u0627\u0644\u0634\u0631\u0637 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0647\u0648 \u0623\u0646 \u064a\u0643\u0648\u0646 \u062c\u0647\u062f \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629 <strong>\u0623\u0643\u0628\u0631 \u0642\u0644\u064a\u0644\u0627\u064b<\/strong> \u0645\u0646 \u062c\u0647\u062f \u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629 \u0627\u0644\u0639\u0643\u0633\u064a \u0627\u0644\u0645\u062a\u0648\u0642\u0639.\r\n <\/p>\r\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4 bg-black\/20 p-3 rounded\">\r\n <div class=\"text-center\">\r\n <span class=\"text-l text-slate-400 block mb-1\">\u0627\u0644\u0634\u0631\u0637 \u0627\u0644\u0631\u064a\u0627\u0636\u064a:<\/span>\r\n <span class=\"font-mono text-white dir-ltr font-bold text-lg\">E<sub>battery<\/sub> > E\u00b0<sub>cell<\/sub><\/span>\r\n <\/div>\r\n <div class=\"text-center border-r border-white\/10 pr-4\">\r\n <p class=\"text-l text-slate-300\">\u062a\u0639\u0645\u0644 \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629 \u0639\u0644\u0649 \"\u0636\u062e\" \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0645\u0635\u0639\u062f \u0625\u0644\u0649 \u0627\u0644\u0645\u0647\u0628\u0637 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647\u0647\u0627 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-6\">\r\n <h3 class=\"text-lg font-bold text-white mb-2 text-center\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a:<\/h3>\r\n <p class=\"text-l text-center text-slate-400 mb-4\">\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u062a\u062a\u062c\u0647 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u0646\u062d\u0648 \u0627\u0644\u0645\u0647\u0628\u0637 \u0648\u062a\u062a\u0631\u0633\u0628\u060c \u0628\u064a\u0646\u0645\u0627 \u062a\u062a\u062c\u0647 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0633\u0627\u0644\u0628\u0629 \u0646\u062d\u0648 \u0627\u0644\u0645\u0635\u0639\u062f \u0648\u062a\u062a\u0635\u0627\u0639\u062f \u0643\u063a\u0627\u0632.<\/p>\r\n \r\n <div id=\"electrolysis-simulation-container\" class=\"sim-card\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0663. \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0644\u0645\u0635\u0647\u0648\u0631\u0627\u062a (Molten Salts)<\/h2>\r\n <div class=\"bg-orange-900\/20 p-4 rounded-lg border-r-4 border-orange-500 mb-4\">\r\n <h3 class=\"font-bold text-orange-300 mb-2\">\u0645\u0627 \u0647\u0648 \u0627\u0644\u0645\u0635\u0647\u0648\u0631\u061f<\/h3>\r\n <p class=\"text-l text-slate-300\">\r\n \u0647\u0648 \u0645\u0631\u0643\u0628 \u0623\u064a\u0648\u0646\u064a \u0641\u064a \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0633\u0627\u0626\u0644\u0629 \u0646\u062a\u062c \u0639\u0646 \u0635\u0647\u0631\u0647 \u0628\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0639\u0627\u0644\u064a\u0629 (\u062f\u0648\u0646 \u0648\u062c\u0648\u062f \u0645\u0627\u0621). \u0641\u064a \u0627\u0644\u0645\u0635\u0647\u0648\u0631\u060c \u062a\u0643\u0648\u0646 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u062d\u0631\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0628\u0645\u0631\u0648\u0631 \u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a.\r\n <\/p>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 mb-3\">\u0639\u0646\u062f \u0635\u0647\u0631 \u0627\u0644\u0645\u0644\u062d \u0627\u0644\u0623\u064a\u0648\u0646\u064a\u060c \u062a\u062a\u0641\u0643\u0643 \u0627\u0644\u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0644\u0648\u0631\u064a\u0629 \u0648\u062a\u0635\u0628\u062d \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u062d\u0631\u0629 \u0627\u0644\u062d\u0631\u0643\u0629.<\/p>\r\n \r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0661: \u0645\u0635\u0647\u0648\u0631 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (NaCl)<\/h3>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-):<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u062a\u064f\u062e\u062a\u0632\u0644 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645:<\/p>\r\n <div class=\"font-mono text-white ltr\">Na\u207a(l) + e\u207b \u2192 Na(l) <span class=\"text-green-400 text-l ml-2\">(E\u00b0 = -2.71 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u0646\u062a\u062c \u0641\u0644\u0632 \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+):<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u062a\u062a\u0623\u0643\u0633\u062f \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0643\u0644\u0648\u0631\u064a\u062f:<\/p>\r\n <div class=\"font-mono text-white ltr\">2Cl\u207b(l) \u2192 Cl\u2082(g) + 2e\u207b <span class=\"text-red-400 text-l ml-2\">(E\u00b0ox = -1.36 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0643\u0644\u0648\u0631.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0643\u0644\u064a:<\/strong>\r\n <div class=\"font-mono text-yellow-300 ltr\">2NaCl(l) \u2192 2Na(l) + Cl\u2082(g)<\/div>\r\n <div class=\"text-l text-slate-400 mt-1 font-mono ltr\">E\u00b0cell = -4.07 V<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u062c\u0647\u062f \u0627\u0644\u062e\u0644\u064a\u0629 \u0633\u0627\u0644\u0628\u060c \u0623\u064a \u064a\u062d\u062a\u0627\u062c \u0644\u062c\u0647\u062f \u062e\u0627\u0631\u062c\u064a > 4.07V.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0662: \u0645\u0635\u0647\u0648\u0631 \u0628\u0631\u0648\u0645\u064a\u062f \u0627\u0644\u0631\u0635\u0627\u0635 (PbBr\u2082)<\/h3>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-) \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644:<\/strong>\r\n <div class=\"font-mono text-white ltr\">Pb\u00b2\u207a + 2e\u207b \u2192 Pb(l) <span class=\"text-green-400 text-l ml-2\">(E\u00b0 = -0.13 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0631\u0633\u0628 \u0631\u0635\u0627\u0635 \u0645\u0646\u0635\u0647\u0631 (\u0641\u0636\u064a).<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+) \u0627\u0644\u062a\u0623\u0643\u0633\u062f:<\/strong>\r\n <div class=\"font-mono text-white ltr\">2Br\u207b \u2192 Br\u2082 + 2e\u207b <span class=\"text-red-400 text-l ml-2\">(E\u00b0 = +1.07 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u062a\u062a\u0635\u0627\u0639\u062f \u0623\u0628\u062e\u0631\u0629 \u0627\u0644\u0628\u0631\u0648\u0645 (\u0628\u0646\u064a\u0629 \u062d\u0645\u0631\u0627\u0621).<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <div class=\"text-l text-slate-400 font-mono ltr\">E\u00b0cell = -0.13 - 1.07 = -1.20 V<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062d\u062a\u0627\u062c \u062c\u0647\u062f \u0628\u0637\u0627\u0631\u064a\u0629 > 1.20 V.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0663: \u0645\u0635\u0647\u0648\u0631 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (MgCl\u2082)<\/h3>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-) \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644:<\/strong>\r\n <div class=\"font-mono text-white ltr\">Mg\u00b2\u207a + 2e\u207b \u2192 Mg(l) <span class=\"text-green-400 text-l ml-2\">(E\u00b0 = -2.37 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u0646\u062a\u062c \u0641\u0644\u0632 \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+) \u0627\u0644\u062a\u0623\u0643\u0633\u062f:<\/strong>\r\n <div class=\"font-mono text-white ltr\">2Cl\u207b \u2192 Cl\u2082 + 2e\u207b <span class=\"text-red-400 text-l ml-2\">(E\u00b0 = +1.36 V)<\/span><\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0643\u0644\u0648\u0631.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <div class=\"text-l text-slate-400 font-mono ltr\">E\u00b0cell = -2.37 - 1.36 = -3.73 V<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062d\u062a\u0627\u062c \u062c\u0647\u062f \u0628\u0637\u0627\u0631\u064a\u0629 > 3.73 V.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0664. \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629<\/h2>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border-r-4 border-blue-500 mb-4\">\r\n <h3 class=\"font-bold text-blue-300 mb-2\">\u0645\u0627 \u0647\u0648 \u0627\u0644\u0645\u062d\u0644\u0648\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u061f<\/h3>\r\n <p class=\"text-l text-slate-300\">\r\n \u0647\u0648 \u0645\u062e\u0644\u0648\u0637 \u0645\u062a\u062c\u0627\u0646\u0633 \u0646\u0627\u062a\u062c \u0639\u0646 \u0625\u0630\u0627\u0628\u0629 \u0645\u0627\u062f\u0629 (\u0645\u0644\u062d) \u0641\u064a \u0627\u0644\u0645\u0627\u0621. \u0647\u0646\u0627\u060c \u062a\u0643\u0648\u0646 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a \u062d\u0631\u0629 \u0627\u0644\u062d\u0631\u0643\u0629\u060c \u0648\u0644\u0643\u0646 \u064a\u0648\u062c\u062f \u0623\u064a\u0636\u0627\u064b <strong>\u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u0645\u0627\u0621<\/strong> \u0627\u0644\u062a\u064a \u0642\u062f \u062a\u0634\u0627\u0631\u0643 \u0641\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-lg border-l-4 border-indigo-500 mb-4\">\r\n <strong class=\"text-indigo-300 block mb-2\">\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621!<\/strong>\r\n <p class=\"text-l text-slate-300\">\r\n \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0626\u064a\u0629\u060c \u064a\u0648\u062c\u062f \u0627\u0644\u0645\u0627\u0621 (H\u2082O) \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u0644\u062d. \u0627\u0644\u0645\u0627\u0621 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u062a\u0623\u0643\u0633\u062f \u0623\u0648 \u064a\u062e\u062a\u0632\u0644\u060c \u0644\u0630\u0627 \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644 \u0645\u0646\u0627\u0641\u0633\u0629 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062c\u0647\u0648\u062f \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 \u0627\u0644\u0645\u0639\u064a\u0627\u0631\u064a\u0629 (E\u00b0).\r\n <\/p>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white mb-2 text-l\">\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u062a\u0646\u0627\u0641\u0633 (\u0645\u0646 \u064a\u0631\u0628\u062d\u061f)<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-l\">\r\n <div>\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (\u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644):<\/strong>\r\n <p class=\"text-slate-400 text-l mb-1\">\u0627\u0644\u0623\u0639\u0644\u0649 \u0641\u064a \u062c\u0647\u062f \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 (E\u00b0) \u0647\u0648 \u0627\u0644\u0630\u064a \u064a\u062e\u062a\u0632\u0644.<\/p>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0644\u0632 \u0646\u0634\u0637\u0627\u064b \u062c\u062f\u0627\u064b (Na, K, Mg, Al) \u2190 <strong>\u0627\u0644\u0645\u0627\u0621 \u064a\u062e\u062a\u0632\u0644<\/strong> \u0648\u064a\u0646\u062a\u062c H\u2082.\r\n <div class=\"font-mono text-[10px] text-green-300 mt-1 mr-4 bg-black\/20 p-1 rounded ltr\">2H\u2082O + 2e\u207b \u2192 H\u2082 + 2OH\u207b (E\u00b0 = -0.83 V)<\/div>\r\n <\/li>\r\n <li>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0644\u0632 \u0646\u0628\u064a\u0644\u0627\u064b (Cu, Ag) \u2190 <strong>\u0627\u0644\u0641\u0644\u0632 \u064a\u062e\u062a\u0632\u0644<\/strong> \u0648\u064a\u062a\u0631\u0633\u0628.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (\u0627\u0644\u062a\u0623\u0643\u0633\u062f):<\/strong>\r\n <p class=\"text-slate-400 text-l mb-1\">\u0627\u0644\u0623\u0642\u0644 \u0641\u064a \u062c\u0647\u062f \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 (\u0623\u0648 \u0627\u0644\u0623\u0633\u0647\u0644 \u062a\u0623\u0643\u0633\u062f\u0627\u064b) \u0647\u0648 \u0627\u0644\u0630\u064a \u064a\u062a\u0623\u0643\u0633\u062f.<\/p>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li>\u0627\u0644\u0647\u0627\u0644\u0648\u062c\u064a\u0646\u0627\u062a (Cl\u207b, Br\u207b, I\u207b) \u2190 <strong>\u062a\u062a\u0623\u0643\u0633\u062f<\/strong> (\u062a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632\u0627\u062a).<\/li>\r\n <li>\u0623\u0646\u064a\u0648\u0646\u0627\u062a \u0622\u062e\u0631\u0649 (SO\u2084\u00b2\u207b, NO\u2083\u207b) \u2190 <strong>\u0627\u0644\u0645\u0627\u0621 \u064a\u062a\u0623\u0643\u0633\u062f<\/strong> \u0648\u064a\u0646\u062a\u062c O\u2082.\r\n <div class=\"font-mono text-[10px] text-red-300 mt-1 mr-4 bg-black\/20 p-1 rounded ltr\">2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b (E\u00b0ox = -1.23 V)<\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border border-white\/10\">\r\n <h3 class=\"font-bold text-yellow-300 mb-2\">\u0645\u062b\u0627\u0644 \u0661: \u0645\u062d\u0644\u0648\u0644 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (NaCl)<\/h3>\r\n <div class=\"space-y-2 text-l\">\r\n <p class=\"text-slate-300\"><strong>\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637:<\/strong> \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 Na\u207a \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"pl-4 border-r-2 border-slate-600 text-l font-mono text-slate-400\">\r\n Na\u207a + e\u207b \u2192 Na (E\u00b0 = -2.71 V)<br\/>\r\n 2H\u2082O + 2e\u207b \u2192 H\u2082 + 2OH\u207b (E\u00b0 = -0.83 V) \r\n <\/div>\r\n <p class=\"text-green-400 text-l\">\u0627\u0644\u0645\u0627\u0621 \u0623\u0633\u0647\u0644 \u0627\u062e\u062a\u0632\u0627\u0644\u0627\u064b \u2190 \u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 (H\u2082).<\/p>\r\n <p class=\"text-slate-300 mt-2\"><strong>\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f:<\/strong> \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 Cl\u207b \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"pl-4 border-r-2 border-slate-600 text-l font-mono text-slate-400\">\r\n 2Cl\u207b \u2192 Cl\u2082 + 2e\u207b (E\u00b0ox = -1.36 V) <br\/>\r\n 2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b (E\u00b0ox = -1.23 V)\r\n <\/div>\r\n <p class=\"text-red-400 text-l\">\u0631\u063a\u0645 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u0642\u064a\u0645\u060c \u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0643\u0644\u0648\u0631\u064a\u062f (\u0628\u0633\u0628\u0628 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u062a\u0631\u0643\u064a\u0632) \u2190 \u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0643\u0644\u0648\u0631 (Cl\u2082).<\/p>\r\n <div class=\"mt-3 p-2 bg-white\/5 rounded text-center\">\r\n <strong class=\"text-white text-l\">\u0627\u0644\u0646\u0627\u062a\u062c \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0641\u064a \u0627\u0644\u0648\u0639\u0627\u0621:<\/strong> \u0623\u064a\u0648\u0646\u0627\u062a Na\u207a \u0648 OH\u207b (\u0645\u062d\u0644\u0648\u0644 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645).\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0662: \u0645\u062d\u0644\u0648\u0644 \u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0627\u0644\u0646\u062d\u0627\u0633 (CuSO\u2084)<\/h3>\r\n <p class=\"text-l text-slate-400 mb-2\">(\u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0642\u0637\u0627\u0628 \u062e\u0627\u0645\u0644\u0629 \u0645\u062b\u0644 \u0627\u0644\u062c\u0631\u0627\u0641\u064a\u062a)<\/p>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-) \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644:<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 Cu\u00b2\u207a \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"font-mono text-white ltr text-l\">Cu\u00b2\u207a + 2e\u207b \u2192 Cu(s) (E\u00b0 = +0.34 V) <\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u062c\u0647\u062f \u0627\u062e\u062a\u0632\u0627\u0644 \u0627\u0644\u0646\u062d\u0627\u0633 \u0623\u0639\u0644\u0649 \u0645\u0646 \u0627\u0644\u0645\u0627\u0621\u060c \u0644\u0630\u0627 \u064a\u062a\u0631\u0633\u0628 \u0627\u0644\u0646\u062d\u0627\u0633 (\u0637\u0628\u0642\u0629 \u062d\u0645\u0631\u0627\u0621).<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+) \u0627\u0644\u062a\u0623\u0643\u0633\u062f:<\/strong>\r\n <p class=\"text-slate-400 mb-1\">\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0628\u064a\u0646 SO\u2084\u00b2\u207b \u0648\u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <div class=\"font-mono text-white ltr text-l\">2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b (E\u00b0ox = -1.23 V) <\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u0627\u0644\u0643\u0628\u0631\u064a\u062a\u0627\u062a \u0635\u0639\u0628\u0629 \u0627\u0644\u062a\u0623\u0643\u0633\u062f\u060c \u0644\u0630\u0627 \u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u0646\u0627\u062a\u062c \u0641\u064a \u0627\u0644\u0645\u062d\u0644\u0648\u0644:<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062a\u062a\u0628\u0642\u0649 \u0623\u064a\u0648\u0646\u0627\u062a H\u207a \u0648 SO\u2084\u00b2\u207b (\u064a\u0635\u0628\u062d \u0627\u0644\u0645\u062d\u0644\u0648\u0644 \u062d\u0645\u0636\u064a\u0627\u064b H\u2082SO\u2084).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3\">\u0645\u062b\u0627\u0644 \u0663: \u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u0627\u0621 \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0627\u064b<\/h3>\r\n <p class=\"text-l text-slate-400 mb-2\">(\u0645\u0627\u0621 \u0645\u062d\u0645\u0636 \u0628\u0642\u0637\u0631\u0627\u062a H\u2082SO\u2084 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062a\u0648\u0635\u064a\u0644)<\/p>\r\n <div class=\"space-y-3 text-l\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-green-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (-):<\/strong>\r\n <div class=\"font-mono text-white ltr text-l\">2H\u207a + 2e\u207b \u2192 H\u2082(g)<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062e\u062a\u0632\u0644 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0648\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 H\u2082.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-red-300 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (+):<\/strong>\r\n <div class=\"font-mono text-white ltr text-l\">2H\u2082O \u2192 O\u2082 + 4H\u207a + 4e\u207b<\/div>\r\n <p class=\"text-[10px] text-slate-500 mt-1\">\u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082.<\/p>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/10 text-center\">\r\n <strong class=\"text-white block mb-1\">\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062d\u062c\u0645 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0627\u0644\u0646\u0627\u062a\u062c \u0636\u0639\u0641 \u062d\u062c\u0645 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (2:1).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0665. \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-l mb-6\">\r\n <div class=\"bg-slate-800 p-3 rounded-lg border-t-2 border-yellow-500\">\r\n <strong class=\"text-white block mb-1\">1. \u0627\u0644\u0637\u0644\u0627\u0621 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062a\u063a\u0637\u064a\u0629 \u0641\u0644\u0632 \u0628\u0637\u0628\u0642\u0629 \u0631\u0642\u064a\u0642\u0629 \u0645\u0646 \u0641\u0644\u0632 \u0622\u062e\u0631 (\u0645\u062b\u0644 \u0637\u0644\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u0639\u0642 \u0628\u0627\u0644\u0641\u0636\u0629) \u0644\u0644\u062d\u0645\u0627\u064a\u0629 \u0645\u0646 \u0627\u0644\u062a\u0622\u0643\u0644 \u0623\u0648 \u0644\u0644\u0632\u064a\u0646\u0629.<\/p>\r\n <p class=\"text-l text-slate-500 mt-1\">\u0627\u0644\u0645\u0647\u0628\u0637: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0645\u0631\u0627\u062f \u0637\u0644\u0627\u0624\u0647\u0627.<br\/>\u0627\u0644\u0645\u0635\u0639\u062f: \u0627\u0644\u0641\u0644\u0632 \u0627\u0644\u0645\u0631\u0627\u062f \u0627\u0644\u0637\u0644\u0627\u0621 \u0628\u0647.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800 p-3 rounded-lg border-t-2 border-blue-500\">\r\n <strong class=\"text-white block mb-1\">2. \u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0641\u0644\u0632\u0627\u062a<\/strong>\r\n <p class=\"text-l text-slate-400\">\u062a\u0646\u0642\u064a\u0629 \u0627\u0644\u0646\u062d\u0627\u0633 \u063a\u064a\u0631 \u0627\u0644\u0646\u0642\u064a (\u0627\u0644\u0645\u0635\u0639\u062f) \u0644\u062a\u0631\u0633\u064a\u0628 \u0646\u062d\u0627\u0633 \u0646\u0642\u064a \u062c\u062f\u0627\u064b (99.9%) \u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 \u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0641\u064a \u0627\u0644\u0623\u0633\u0644\u0627\u0643.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800 p-3 rounded-lg border-t-2 border-purple-500\">\r\n <strong class=\"text-white block mb-1\">3. \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a<\/strong>\r\n <p class=\"text-l text-slate-400\">\u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 (\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645\u060c \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645\u060c \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645) \u0645\u0646 \u062e\u0627\u0645\u0627\u062a\u0647\u0627 \u0627\u0644\u0645\u0635\u0647\u0648\u0631\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border-l-4 border-purple-500 mb-6\">\r\n <h3 class=\"font-bold text-purple-300 mb-2\">\u0644\u0645\u0627\u0630\u0627 \u0646\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a\u061f<\/h3>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u062a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0644\u0627\u0633\u062a\u062e\u0644\u0627\u0635 <strong>\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 \u062c\u062f\u0627\u064b<\/strong> (\u0645\u062b\u0644 K, Na, Ca, Mg, Al) \u0627\u0644\u062a\u064a \u062a\u0642\u0639 \u0641\u064a \u0642\u0645\u0629 \u0633\u0644\u0633\u0644\u0629 \u0627\u0644\u0646\u0634\u0627\u0637 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a.\r\n <br\/>\r\n \u0647\u0630\u0647 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u062a\u0645\u0633\u0643 \u0628\u0645\u0631\u0643\u0628\u0627\u062a\u0647\u0627 \u0628\u0642\u0648\u0629 \u0643\u0628\u064a\u0631\u0629\u060c \u0648\u0644\u0627 \u064a\u0645\u0643\u0646 \u0644\u0644\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u0645\u062e\u062a\u0632\u0644\u0629 \u0627\u0644\u0639\u0627\u062f\u064a\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0643\u0631\u0628\u0648\u0646\/\u0627\u0644\u0641\u062d\u0645) \u0623\u0646 \u062a\u0646\u062a\u0632\u0639\u0647\u0627 \u0645\u0646 \u062e\u0627\u0645\u0627\u062a\u0647\u0627. \u0644\u0630\u0627\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \"\u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a\" (\u0627\u0644\u062a\u064a\u0627\u0631 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a) \u0643\u0645\u0635\u062f\u0631 \u0637\u0627\u0642\u0629 \u0642\u0648\u064a \u0644\u0625\u062c\u0628\u0627\u0631 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0641\u0644\u0632 \u0639\u0644\u0649 \u0627\u0644\u0627\u062e\u062a\u0632\u0627\u0644 \u0648\u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u062d\u0627\u0644\u062a\u0647\u0627 \u0627\u0644\u0646\u0642\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"bg-slate-900\/50 p-5 rounded-xl border border-white\/10\">\r\n <h3 class=\"text-lg font-bold text-white mb-3 border-b border-white\/10 pb-2\">\u062f\u0631\u0627\u0633\u0629 \u062d\u0627\u0644\u0629: \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (\u0639\u0645\u0644\u064a\u0629 \u0647\u0648\u0644-\u0647\u064a\u0631\u0648\u0644\u062a)<\/h3>\r\n <p class=\"text-l text-slate-300 mb-3\">\u064a\u0633\u062a\u062e\u0644\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0645\u0646 \u062e\u0627\u0645 <strong>\u0627\u0644\u0628\u0648\u0643\u0633\u064a\u062a (Al\u2082O\u2083)<\/strong>. \u0646\u0638\u0631\u0627\u064b \u0644\u062f\u0631\u062c\u0629 \u0627\u0646\u0635\u0647\u0627\u0631\u0647 \u0627\u0644\u0639\u0627\u0644\u064a\u0629 \u062c\u062f\u0627\u064b (2050\u00b0C)\u060c \u064a\u0630\u0627\u0628 \u0641\u064a \u0645\u0635\u0647\u0648\u0631 <strong>\u0627\u0644\u0643\u0631\u064a\u0648\u0644\u064a\u062a (Na\u2083AlF\u2086)<\/strong> \u0644\u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631 \u0625\u0644\u0649 \u062d\u0648\u0627\u0644\u064a 950\u00b0C \u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0637\u0627\u0642\u0629.<\/p>\r\n \r\n \r\n <div id=\"aluminum-simulation-container\" class=\"sim-card\"><\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 text-l mt-4\">\r\n <div class=\"bg-black\/20 p-3 rounded-lg\">\r\n <strong class=\"text-green-400 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637 (\u062c\u062f\u0627\u0631 \u0627\u0644\u0648\u0639\u0627\u0621 - \u063a\u0631\u0627\u0641\u064a\u062a):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-1\">\u062a\u062e\u062a\u0632\u0644 \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645:<\/p>\r\n <div class=\"font-mono text-white ltr\">Al\u00b3\u207a + 3e\u207b \u2192 Al(l)<\/div>\r\n <p class=\"text-l text-slate-500 mt-1\">\u064a\u062a\u0631\u0633\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0627\u0644\u0645\u0635\u0647\u0648\u0631 \u0641\u064a \u0642\u0627\u0639 \u0627\u0644\u062e\u0644\u064a\u0629 \u0648\u064a\u0633\u062d\u0628 \u0645\u0646 \u0641\u062a\u062d\u0629 \u062e\u0627\u0635\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded-lg\">\r\n <strong class=\"text-red-400 block mb-1\">\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f (\u0623\u0642\u0637\u0627\u0628 \u063a\u0631\u0627\u0641\u064a\u062a):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-1\">\u062a\u062a\u0623\u0643\u0633\u062f \u0623\u064a\u0648\u0646\u0627\u062a \u0627\u0644\u0623\u0643\u0633\u064a\u062f:<\/p>\r\n <div class=\"font-mono text-white ltr\">2O\u00b2\u207b \u2192 O\u2082 + 4e\u207b<\/div>\r\n <p class=\"text-l text-slate-500 mt-1\">\u064a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0627\u0644\u0646\u0627\u062a\u062c \u0645\u0639 \u0623\u0642\u0637\u0627\u0628 \u0627\u0644\u063a\u0631\u0627\u0641\u064a\u062a (C) \u0645\u0643\u0648\u0646\u0627\u064b CO\u2082\u060c \u0644\u0630\u0627 \u062a\u062a\u0622\u0643\u0644 \u0627\u0644\u0623\u0642\u0637\u0627\u0628 \u0648\u064a\u062c\u0628 \u0627\u0633\u062a\u0628\u062f\u0627\u0644\u0647\u0627 \u062f\u0648\u0631\u064a\u0627\u064b.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-3 text-center\">\r\n <span class=\"text-l text-yellow-300 bg-yellow-900\/20 px-2 py-1 rounded\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0643\u0644\u064a: 2Al\u2082O\u2083 + 3C \u2192 4Al + 3CO\u2082<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0666. \u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0627\u062a<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border-r-4 border-green-500 mb-4\">\r\n <h3 class=\"font-bold text-green-300 mb-2\">1. \u0623\u0647\u0645\u064a\u0629 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631<\/h3>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 space-y-1\">\r\n <li><strong>\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0641\u064a\u0633\u0629:<\/strong> \u0645\u062b\u0644 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li)\u060c \u0627\u0644\u0643\u0648\u0628\u0627\u0644\u062a (Co)\u060c \u0648\u0627\u0644\u0646\u064a\u0643\u0644 (Ni).<\/li>\r\n <li><strong>\u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062a\u0644\u0648\u062b \u0627\u0644\u0628\u064a\u0626\u064a:<\/strong> \u0645\u0646\u0639 \u062a\u0633\u0631\u0628 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0633\u0627\u0645\u0629 \u0625\u0644\u0649 \u0627\u0644\u062a\u0631\u0628\u0629 \u0648\u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u062c\u0648\u0641\u064a\u0629.<\/li>\r\n <li><strong>\u062d\u0641\u0638 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629:<\/strong> \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0627\u062c\u0629 \u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062a\u0639\u062f\u064a\u0646 \u0627\u0644\u0645\u0643\u0644\u0641\u0629 \u0648\u0627\u0644\u0645\u0644\u0648\u062b\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg mb-4\">\r\n <h3 class=\"font-bold text-white mb-2\">2. \u062e\u0637\u0648\u0627\u062a \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0628\u0637\u0627\u0631\u064a\u0627\u062a \u0623\u064a\u0648\u0646 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645<\/h3>\r\n <ol class=\"list-decimal list-inside text-l text-slate-300 space-y-2\">\r\n <li><strong>\u0627\u0644\u062a\u0641\u0643\u064a\u0643 \u0627\u0644\u064a\u062f\u0648\u064a:<\/strong> \u0641\u0635\u0644 \u0627\u0644\u063a\u0644\u0627\u0641 \u0648\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643\u064a\u0629.<\/li>\r\n <li><strong>\u0627\u0644\u0637\u062d\u0646 (Crushing):<\/strong> \u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0625\u0644\u0649 \u0645\u0633\u062d\u0648\u0642 \u0623\u0633\u0648\u062f.<\/li>\r\n <li><strong>\u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0626\u064a:<\/strong> \u0641\u0635\u0644 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629 \u0648\u0627\u0644\u0628\u0644\u0627\u0633\u062a\u064a\u0643 \u0639\u0646 \u0627\u0644\u0645\u0633\u062d\u0648\u0642 \u0627\u0644\u0645\u0639\u062f\u0646\u064a.<\/li>\r\n <li><strong>\u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u062d\u0645\u0627\u0636 \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0641\u0644\u0632\u0627\u062a.<\/li>\r\n <\/ol>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border-r-4 border-yellow-500\">\r\n <h3 class=\"font-bold text-yellow-300 mb-2\">3. \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0641\u064a \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631<\/h3>\r\n <p class=\"text-l text-slate-300 mb-3\">\u062a\u0633\u062a\u062e\u062f\u0645 \u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u062a\u0631\u0633\u064a\u0628 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0642\u064a\u0629 \u0645\u0646 \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644 \u0627\u0644\u0645\u0639\u0627\u0644\u062c\u0629.<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-2\">\u0627\u0644\u0643\u062a\u0631\u0648\u0644\u064a\u062a \u064a\u062d\u062a\u0648\u064a \u0623\u064a\u0648\u0646\u0627\u062a Li\u207a \u2190 \u064a\u062a\u0631\u0633\u0628 Li.<\/p>\r\n <div class=\"font-mono text-center text-green-300 bg-slate-900\/50 p-2 rounded ltr text-l\">Li\u207a + e\u207b \u2192 Li(s)<\/div>\r\n <\/div>\r\n <div class=\"bg-black\/20 p-3 rounded\">\r\n <strong class=\"text-white block mb-1\">\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0643\u0648\u0628\u0627\u0644\u062a (Co):<\/strong>\r\n <p class=\"text-l text-slate-400 mb-2\">\u0645\u0646 \u0645\u062d\u0644\u0648\u0644 \u0623\u064a\u0648\u0646\u0627\u062a Co\u00b2\u207a.<\/p>\r\n <div class=\"font-mono text-center text-green-300 bg-slate-900\/50 p-2 rounded ltr text-l\">Co\u00b2\u207a + 2e\u207b \u2192 Co(s)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bg-indigo-900\/20 p-5 rounded-xl border-l-4 border-indigo-500 mt-8\">\r\n <h2 class=\"text-xl font-bold text-indigo-300 mb-4 flex items-center gap-2\">\u0646\u0635\u0627\u0626\u062d \u0630\u0647\u0628\u064a\u0629 \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/h2>\r\n <div class=\"space-y-4 text-l text-slate-300\">\r\n <div>\r\n <strong class=\"text-white block mb-1\">1. \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 \u0647\u064a \u0627\u0644\u0645\u0641\u062a\u0627\u062d:<\/strong>\r\n <p>\u062f\u0627\u0626\u0645\u0627\u064b \u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629 \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a. \u062a\u0630\u0643\u0631 \u0623\u0646 \u0627\u0644\u0625\u0634\u0627\u0631\u0627\u062a \u062a\u0646\u0639\u0643\u0633 (\u0627\u0644\u0645\u0635\u0639\u062f \u0645\u0648\u062c\u0628 \u0641\u064a \u0627\u0644\u062a\u062d\u0644\u064a\u0644\u060c \u0633\u0627\u0644\u0628 \u0641\u064a \u0627\u0644\u062c\u0644\u0641\u0627\u0646\u064a\u0629)\u060c \u0644\u0643\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0646\u0641\u0633\u0647 (\u0627\u0644\u0645\u0635\u0639\u062f = \u062a\u0623\u0643\u0633\u062f\u060c \u0627\u0644\u0645\u0647\u0628\u0637 = \u0627\u062e\u062a\u0632\u0627\u0644) \u064a\u0628\u0642\u0649 \u062b\u0627\u0628\u062a\u0627\u064b.<\/p>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-white block mb-1\">2. \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u0629 \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0644\u064a\u0644:<\/strong>\r\n <ul class=\"list-disc list-inside mt-1 text-l\">\r\n <li>\u0639\u0646\u062f \u0627\u0644\u0645\u0647\u0628\u0637: \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0641\u0644\u0632 \u0646\u0634\u0637\u0627\u064b (\u0645\u062c\u0645\u0648\u0639\u0627\u062a 1, 2, Al)\u060c \u064a\u062e\u062a\u0632\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u0646\u062a\u062c H\u2082. \u0625\u0630\u0627 \u0643\u0627\u0646 \u063a\u064a\u0631 \u0646\u0634\u0637 (Cu, Ag)\u060c \u064a\u062e\u062a\u0632\u0644 \u0627\u0644\u0641\u0644\u0632.<\/li>\r\n <li>\u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f: \u0627\u0644\u0647\u0627\u0644\u0648\u062c\u064a\u0646\u0627\u062a (Cl, Br, I) \u062a\u062a\u0623\u0643\u0633\u062f \u0623\u0648\u0644\u0627\u064b. \u0625\u0630\u0627 \u0644\u0645 \u062a\u0648\u062c\u062f\u060c \u064a\u062a\u0623\u0643\u0633\u062f \u0627\u0644\u0645\u0627\u0621 \u0648\u064a\u0646\u062a\u062c O\u2082.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-white block mb-1\">3. \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645:<\/strong>\r\n <p>\u0631\u0643\u0632 \u0639\u0644\u0649 \u062f\u0648\u0631 \u0627\u0644\u0643\u0631\u064a\u0648\u0644\u064a\u062a (\u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631) \u0648\u0633\u0628\u0628 \u062a\u0622\u0643\u0644 \u0623\u0642\u0637\u0627\u0628 \u0627\u0644\u062c\u0631\u0627\u0641\u064a\u062a (\u062a\u0641\u0627\u0639\u0644 C \u0645\u0639 O\u2082 \u0627\u0644\u0646\u0627\u062a\u062c).<\/p>\r\n <\/div>\r\n <div>\r\n <strong class=\"text-white block mb-1\">4. \u0627\u0644\u0645\u0635\u0647\u0648\u0631 vs \u0627\u0644\u0645\u062d\u0644\u0648\u0644:<\/strong>\r\n <p>\u0627\u0646\u062a\u0628\u0647 \u062c\u064a\u062f\u0627\u064b \u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u0627\u062f\u0629 \u0641\u064a \u0627\u0644\u0633\u0624\u0627\u0644 (\u0645\u0635\u0647\u0648\u0631 \u0623\u0645 \u0645\u062d\u0644\u0648\u0644)\u060c \u0641\u0627\u0644\u0646\u0648\u0627\u062a\u062c \u062a\u062e\u062a\u0644\u0641 \u0643\u0644\u064a\u0627\u064b \u0628\u0648\u062c\u0648\u062f \u0627\u0644\u0645\u0627\u0621.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div> \r\n <\/div> \r\n\r\n \r\n <script>\r\n (function() {\r\n \"use strict\";\r\n\r\n \/\/ ---------- 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a (\u062a\u062c\u0631\u0628\u0629 \u0641\u0627\u0631\u0627\u062f\u0627\u064a) ----------\r\n function initElectrolysisSim(containerId) {\r\n const container = document.getElementById(containerId);\r\n if (!container) return;\r\n container.innerHTML = ''; \/\/ \u062a\u0641\u0631\u064a\u063a \u0623\u064a \u0645\u062d\u062a\u0648\u0649 \u0633\u0627\u0628\u0642\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0648\u0627\u062c\u0647\u0629\r\n const canvas = document.createElement('canvas');\r\n canvas.width = 400;\r\n canvas.height = 300;\r\n canvas.className = 'border border-slate-600 shadow-lg';\r\n container.appendChild(canvas);\r\n\r\n const controls = document.createElement('div');\r\n controls.className = 'flex justify-center gap-4 mt-4 flex-wrap';\r\n container.appendChild(controls);\r\n\r\n const toggleBtn = document.createElement('button');\r\n toggleBtn.className = 'px-6 py-2 rounded-full font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u064a\u0627\u0631';\r\n controls.appendChild(toggleBtn);\r\n\r\n const resetBtn = document.createElement('button');\r\n resetBtn.className = 'px-6 py-2 rounded-full font-bold text-white bg-slate-600 hover:bg-slate-500 shadow-lg';\r\n resetBtn.innerHTML = '\u27f2 \u0625\u0639\u0627\u062f\u0629 \u0636\u0628\u0637';\r\n controls.appendChild(resetBtn);\r\n\r\n \/\/ \u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n let isOn = false;\r\n let deposit = 0;\r\n let gas = 0;\r\n let animationId = null;\r\n\r\n \/\/ \u062b\u0648\u0627\u0628\u062a \u0627\u0644\u0631\u0633\u0645\r\n const width = 400, height = 300;\r\n const liquidY = 100;\r\n const electrodeY = 100;\r\n const electrodeH = 130;\r\n const electrodeW = 20;\r\n const anodeX = 120;\r\n const cathodeX = 260;\r\n const tubeWidth = 50;\r\n const anodeTubeX = anodeX - (tubeWidth - electrodeW) \/ 2;\r\n const tubeTopY = liquidY - 40;\r\n const tubeHeight = 180; \/\/ \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0623\u0646\u0628\u0648\u0628\r\n\r\n \/\/ \u0645\u0635\u0641\u0648\u0641\u0629 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a\r\n let ions = [];\r\n\r\n function initIons() {\r\n ions = [];\r\n for (let i = 0; i < 50; i++) {\r\n ions.push({\r\n id: i,\r\n x: Math.random() * (width - 40) + 20,\r\n y: liquidY + 20 + Math.random() * (height - liquidY - 40),\r\n type: i % 2 === 0 ? 'cation' : 'anion',\r\n state: 'free',\r\n vx: (Math.random() - 0.5) * 0.5,\r\n vy: (Math.random() - 0.5) * 0.5,\r\n opacity: 1\r\n });\r\n }\r\n }\r\n initIons();\r\n\r\n function render() {\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n \/\/ 1. \u0648\u0639\u0627\u0621 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\r\n ctx.fillStyle = 'rgba(255,255,255,0.05)';\r\n ctx.fillRect(20, liquidY, width-40, height-liquidY-10);\r\n ctx.strokeStyle = '#94a3b8';\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(20, liquidY-20, width-40, height-liquidY-10+20);\r\n ctx.fillStyle = 'rgba(56,189,248,0.2)';\r\n ctx.fillRect(25, liquidY, width-50, height-liquidY-15);\r\n\r\n \/\/ 2. \u0627\u0644\u0623\u0642\u0637\u0627\u0628\r\n ctx.fillStyle = '#64748b';\r\n ctx.fillRect(anodeX, electrodeY, electrodeW, electrodeH);\r\n ctx.fillRect(cathodeX, electrodeY, electrodeW, electrodeH);\r\n\r\n \/\/ \u0637\u0628\u0642\u0629 \u0627\u0644\u062a\u0631\u0633\u064a\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0647\u0628\u0637\r\n if (deposit > 0) {\r\n const thickness = Math.min(15, deposit \/ 5);\r\n ctx.fillStyle = '#e2e8f0';\r\n ctx.fillRect(cathodeX - thickness, electrodeY+10, electrodeW+thickness*2, electrodeH-20);\r\n ctx.strokeStyle = '#cbd5e1';\r\n ctx.lineWidth = 1;\r\n ctx.strokeRect(cathodeX - thickness, electrodeY+10, electrodeW+thickness*2, electrodeH-20);\r\n ctx.fillStyle = 'rgba(255,255,255,0.4)';\r\n ctx.fillRect(cathodeX - thickness+2, electrodeY+10, 3, electrodeH-20);\r\n }\r\n\r\n \/\/ \u0623\u0646\u0628\u0648\u0628 \u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0645\u0635\u0639\u062f\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(anodeTubeX, electrodeY+electrodeH-20);\r\n ctx.lineTo(anodeTubeX, tubeTopY+10);\r\n ctx.quadraticCurveTo(anodeTubeX+tubeWidth\/2, tubeTopY-10, anodeTubeX+tubeWidth, tubeTopY+10);\r\n ctx.lineTo(anodeTubeX+tubeWidth, electrodeY+electrodeH-20);\r\n ctx.stroke();\r\n\r\n \/\/ \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062a\u062c\u0645\u0639\r\n const maxGas = 100;\r\n const gasHeight = Math.min(tubeHeight-20, (gas \/ maxGas) * (tubeHeight-50));\r\n const gasY = tubeTopY + gasHeight;\r\n if (gas > 0) {\r\n ctx.fillStyle = 'rgba(252,211,77,0.3)';\r\n ctx.beginPath();\r\n ctx.moveTo(anodeTubeX+2, gasY);\r\n ctx.lineTo(anodeTubeX+2, tubeTopY+10);\r\n ctx.quadraticCurveTo(anodeTubeX+tubeWidth\/2, tubeTopY-8, anodeTubeX+tubeWidth-2, tubeTopY+10);\r\n ctx.lineTo(anodeTubeX+tubeWidth-2, gasY);\r\n ctx.fill();\r\n }\r\n\r\n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a \u0627\u0644\u0623\u0642\u0637\u0627\u0628\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 12px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(isOn ? '+ (\u0627\u0644\u0645\u0635\u0639\u062f)' : '\u0627\u0644\u0645\u0635\u0639\u062f', anodeX+electrodeW\/2, electrodeY+electrodeH+20);\r\n ctx.fillText(isOn ? '- (\u0627\u0644\u0645\u0647\u0628\u0637)' : '\u0627\u0644\u0645\u0647\u0628\u0637', cathodeX+electrodeW\/2, electrodeY+electrodeH+20);\r\n\r\n \/\/ \u0627\u0644\u062f\u0627\u0631\u0629 \u0648\u0627\u0644\u0628\u0637\u0627\u0631\u064a\u0629\r\n ctx.strokeStyle = '#cbd5e1';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(anodeX+electrodeW\/2, electrodeY);\r\n ctx.lineTo(anodeX+electrodeW\/2, 20);\r\n ctx.lineTo(width\/2-20, 20);\r\n ctx.moveTo(cathodeX+electrodeW\/2, electrodeY);\r\n ctx.lineTo(cathodeX+electrodeW\/2, 20);\r\n ctx.lineTo(width\/2+20, 20);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(width\/2-20, 10); ctx.lineTo(width\/2-20, 30);\r\n ctx.lineWidth = 3; ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(width\/2+20, 15); ctx.lineTo(width\/2+20, 25);\r\n ctx.lineWidth = 3; ctx.stroke();\r\n\r\n if (isOn) {\r\n ctx.beginPath(); ctx.moveTo(width\/2-10, 20); ctx.lineTo(width\/2+10, 20);\r\n ctx.lineWidth = 2; ctx.strokeStyle = '#facc15'; ctx.shadowColor = '#facc15'; ctx.shadowBlur = 10; ctx.stroke(); ctx.shadowBlur = 0;\r\n } else {\r\n ctx.beginPath(); ctx.moveTo(width\/2-10, 20); ctx.lineTo(width\/2+5, 10);\r\n ctx.lineWidth = 2; ctx.strokeStyle = '#cbd5e1'; ctx.stroke();\r\n }\r\n\r\n \/\/ \u062d\u0631\u0643\u0629 \u0627\u0644\u0623\u064a\u0648\u0646\u0627\u062a\r\n const depositThick = Math.min(15, deposit\/5);\r\n const tubeLeft = anodeTubeX + 5;\r\n const tubeRight = anodeTubeX + tubeWidth - 5;\r\n\r\n ions.forEach(ion => {\r\n if (ion.state === 'free') {\r\n if (isOn) {\r\n if (ion.type === 'cation') {\r\n const targetX = cathodeX - depositThick;\r\n ion.vx += (targetX - ion.x) * 0.002;\r\n } else {\r\n const targetX = anodeX + electrodeW\/2;\r\n ion.vx += (targetX - ion.x) * 0.002;\r\n }\r\n ion.vx *= 0.95;\r\n ion.vy *= 0.95;\r\n } else {\r\n ion.vx += (Math.random() - 0.5) * 0.1;\r\n ion.vy += (Math.random() - 0.5) * 0.1;\r\n }\r\n ion.x += ion.vx;\r\n ion.y += ion.vy;\r\n\r\n \/\/ \u0627\u0644\u062d\u062f\u0648\u062f\r\n if (ion.x < 30) { ion.x = 30; ion.vx *= -1; }\r\n if (ion.x > width - 30) { ion.x = width - 30; ion.vx *= -1; }\r\n if (ion.y < liquidY + 10) { ion.y = liquidY + 10; ion.vy *= -1; }\r\n if (ion.y > height - 20) { ion.y = height - 20; ion.vy *= -1; }\r\n\r\n if (isOn) {\r\n if (ion.type === 'cation' && ion.x > cathodeX - depositThick - 5 && ion.x < cathodeX + electrodeW + depositThick + 5 && ion.y > electrodeY) {\r\n ion.state = 'depositing';\r\n }\r\n if (ion.type === 'anion' && ion.x > anodeX - 5 && ion.x < anodeX + electrodeW + 5 && ion.y > electrodeY) {\r\n ion.state = 'gas';\r\n ion.x = Math.max(tubeLeft, Math.min(tubeRight, ion.x));\r\n ion.vx = (Math.random() - 0.5) * 0.5;\r\n ion.vy = -1.5;\r\n }\r\n }\r\n } else if (ion.state === 'depositing') {\r\n ion.opacity -= 0.1;\r\n ion.x += (cathodeX + electrodeW\/2 - ion.x) * 0.1;\r\n if (ion.opacity <= 0) {\r\n deposit += 0.5;\r\n ion.state = 'free';\r\n ion.opacity = 1;\r\n ion.x = Math.random() * (width\/2) + 20;\r\n ion.y = liquidY + 20 + Math.random() * (height - liquidY - 40);\r\n ion.vx = 0; ion.vy = 0;\r\n }\r\n } else if (ion.state === 'gas') {\r\n ion.y += ion.vy;\r\n ion.x += Math.sin(ion.y * 0.1) * 0.5;\r\n if (ion.x < tubeLeft) ion.x = tubeLeft;\r\n if (ion.x > tubeRight) ion.x = tubeRight;\r\n if (ion.y < gasY) {\r\n gas += 0.5;\r\n ion.state = 'free';\r\n ion.opacity = 1;\r\n ion.type = 'anion';\r\n ion.x = cathodeX + (Math.random() - 0.5) * 50;\r\n ion.y = height - 40;\r\n ion.vy = 0;\r\n }\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0623\u064a\u0648\u0646\r\n ctx.beginPath();\r\n ctx.globalAlpha = ion.opacity;\r\n if (ion.state === 'gas') {\r\n ctx.arc(ion.x, ion.y, 3, 0, Math.PI*2);\r\n ctx.fillStyle = '#fef08a';\r\n ctx.strokeStyle = '#eab308';\r\n ctx.fill(); ctx.stroke();\r\n } else if (ion.state === 'depositing') {\r\n ctx.arc(ion.x, ion.y, 6, 0, Math.PI*2);\r\n ctx.fillStyle = '#e2e8f0';\r\n ctx.fill();\r\n ctx.fillStyle = 'white';\r\n ctx.beginPath(); ctx.arc(ion.x-2, ion.y-2, 2, 0, Math.PI*2); ctx.fill();\r\n } else {\r\n ctx.arc(ion.x, ion.y, 6, 0, Math.PI*2);\r\n ctx.fillStyle = ion.type === 'cation' ? '#f87171' : '#34d399';\r\n ctx.fill();\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 10px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(ion.type === 'cation' ? '+' : '-', ion.x, ion.y+1);\r\n }\r\n ctx.globalAlpha = 1;\r\n });\r\n\r\n animationId = requestAnimationFrame(render);\r\n }\r\n\r\n \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n toggleBtn.addEventListener('click', function() {\r\n isOn = !isOn;\r\n toggleBtn.className = `px-6 py-2 rounded-full font-bold text-white shadow-lg flex items-center gap-2 ${isOn ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'}`;\r\n toggleBtn.innerHTML = isOn ? '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u0642\u0637\u0639 \u0627\u0644\u062a\u064a\u0627\u0631' : '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u064a\u0627\u0631';\r\n });\r\n\r\n resetBtn.addEventListener('click', function() {\r\n isOn = false;\r\n toggleBtn.className = 'px-6 py-2 rounded-full font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u064a\u0627\u0631';\r\n deposit = 0;\r\n gas = 0;\r\n initIons();\r\n });\r\n\r\n render();\r\n }\r\n\r\n \/\/ ---------- 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0633\u062a\u062e\u0644\u0627\u0635 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (\u0647\u0648\u0644-\u0647\u064a\u0631\u0648\u0644\u062a) ----------\r\n function initAluminumSim(containerId) {\r\n const container = document.getElementById(containerId);\r\n if (!container) return;\r\n container.innerHTML = '';\r\n\r\n const canvas = document.createElement('canvas');\r\n canvas.width = 500;\r\n canvas.height = 350;\r\n canvas.className = 'border border-slate-600 shadow-lg';\r\n container.appendChild(canvas);\r\n\r\n const controls = document.createElement('div');\r\n controls.className = 'flex justify-center gap-4 mt-4 flex-wrap';\r\n container.appendChild(controls);\r\n\r\n const toggleBtn = document.createElement('button');\r\n toggleBtn.className = 'px-6 py-2 rounded-lg font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629';\r\n controls.appendChild(toggleBtn);\r\n\r\n const tapBtn = document.createElement('button');\r\n tapBtn.className = 'px-4 py-2 rounded-lg font-bold shadow-md bg-slate-600 hover:bg-slate-500 text-white';\r\n tapBtn.innerHTML = '\u0633\u062d\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645';\r\n controls.appendChild(tapBtn);\r\n\r\n const resetBtn = document.createElement('button');\r\n resetBtn.className = 'px-4 py-2 rounded-lg font-bold bg-slate-600 hover:bg-slate-500 text-white shadow-md';\r\n resetBtn.innerHTML = '\u27f2 \u0625\u0639\u0627\u062f\u0629 \u0636\u0628\u0637';\r\n controls.appendChild(resetBtn);\r\n\r\n \/\/ \u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n let isOn = false;\r\n let aluminumPoolHeight = 10;\r\n let anodeWear = 0;\r\n let tapOpen = false;\r\n let particles = [];\r\n let animationId = null;\r\n\r\n \/\/ \u062b\u0648\u0627\u0628\u062a \u0627\u0644\u062e\u0644\u064a\u0629\r\n const width = 500, height = 350;\r\n const tankX = 50, tankY = 80, tankW = 400, tankH = 220;\r\n const electrolyteLevel = tankY + 20;\r\n const anodeWid = 60, anodeHei = 100, anodeSpacing = 40;\r\n const anodeStartX = tankX + (tankW - (3 * anodeWid + 2 * anodeSpacing)) \/ 2;\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < 40; i++) {\r\n const type = Math.random() > 0.4 ? 'O2-' : 'Al3+';\r\n particles.push({\r\n id: Math.random(),\r\n type: type,\r\n x: tankX + 20 + Math.random() * (tankW - 40),\r\n y: electrolyteLevel + 20 + Math.random() * (tankH - 60),\r\n vx: (Math.random() - 0.5) * 0.5,\r\n vy: (Math.random() - 0.5) * 0.5,\r\n radius: type === 'Al3+' ? 4 : 5,\r\n color: type === 'Al3+' ? '#a5b4fc' : '#f87171',\r\n opacity: 1\r\n });\r\n }\r\n }\r\n initParticles();\r\n\r\n function render() {\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n \/\/ \u063a\u0644\u0627\u0641 \u0627\u0644\u062e\u0644\u064a\u0629\r\n ctx.fillStyle = '#475569';\r\n ctx.fillRect(tankX-10, tankY, tankW+20, tankH+10);\r\n ctx.fillStyle = '#1e293b';\r\n ctx.fillRect(tankX, tankY, tankW, tankH);\r\n\r\n \/\/ \u0628\u0631\u0643\u0629 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645\r\n const alY = tankY + tankH - aluminumPoolHeight;\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.fillRect(tankX, alY, tankW, aluminumPoolHeight);\r\n ctx.fillStyle = 'rgba(255,255,255,0.2)';\r\n ctx.fillRect(tankX, alY, tankW, 5);\r\n\r\n \/\/ \u0627\u0644\u0643\u0647\u0631\u0644\r\n ctx.fillStyle = 'rgba(254,243,199,0.3)';\r\n ctx.fillRect(tankX, electrolyteLevel, tankW, alY - electrolyteLevel);\r\n\r\n \/\/ \u0623\u0646\u0648\u062f\u0627\u062a \u0627\u0644\u0643\u0631\u0628\u0648\u0646\r\n for (let i=0; i<3; i++) {\r\n const x = anodeStartX + i*(anodeWid + anodeSpacing);\r\n const currentH = anodeHei - (isOn ? anodeWear : 0) * 0.8;\r\n ctx.fillStyle = '#171717';\r\n ctx.fillRect(x, tankY-40, anodeWid, currentH+40);\r\n ctx.fillStyle = '#b45309';\r\n ctx.fillRect(x + anodeWid\/2 -5, tankY-60, 10, 20);\r\n if (isOn && Math.random() < 0.3) {\r\n particles.push({\r\n id: Math.random(),\r\n type: 'CO2',\r\n x: x + Math.random() * anodeWid,\r\n y: tankY + currentH -5,\r\n vx: (Math.random()-0.5)*0.5,\r\n vy: -1 - Math.random(),\r\n radius: 3,\r\n color: '#d4d4d4',\r\n opacity: 0.8\r\n });\r\n }\r\n }\r\n\r\n \/\/ \u0642\u0636\u064a\u0628 \u0627\u0644\u062a\u0648\u0635\u064a\u0644\r\n ctx.fillStyle = '#94a3b8';\r\n ctx.fillRect(tankX, tankY-70, tankW, 10);\r\n\r\n \/\/ \u0635\u0646\u0628\u0648\u0631 \u0627\u0644\u0633\u062d\u0628\r\n const tapX = tankX + tankW, tapY = tankY + tankH -15;\r\n ctx.fillStyle = '#64748b';\r\n ctx.beginPath();\r\n ctx.moveTo(tapX, tapY);\r\n ctx.lineTo(tapX+20, tapY);\r\n ctx.lineTo(tapX+25, tapY+10);\r\n ctx.lineTo(tapX+5, tapY+10);\r\n ctx.fill();\r\n\r\n if (tapOpen && aluminumPoolHeight > 5) {\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.beginPath();\r\n ctx.moveTo(tapX+22, tapY+10);\r\n ctx.lineTo(tapX+8, tapY+10);\r\n ctx.lineTo(tapX+10, tapY+60);\r\n ctx.lineTo(tapX+20, tapY+60);\r\n ctx.fill();\r\n aluminumPoolHeight -= 0.1;\r\n if (aluminumPoolHeight < 0) aluminumPoolHeight = 0;\r\n }\r\n\r\n \/\/ \u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\r\n const poolSurfaceY = tankY + tankH - aluminumPoolHeight;\r\n const newParticles = [];\r\n\r\n particles.forEach(p => {\r\n if (p.type === 'CO2') {\r\n p.y += p.vy;\r\n p.x += p.vx + Math.sin(p.y * 0.1) * 0.5;\r\n p.opacity -= 0.005;\r\n if (p.y < tankY - 50 || p.opacity <= 0) return; \/\/ \u062d\u0630\u0641\r\n } else if (isOn) {\r\n if (p.type === 'Al3+') {\r\n p.vy += 0.05;\r\n p.y += p.vy;\r\n p.x += p.vx;\r\n if (p.y >= poolSurfaceY) {\r\n aluminumPoolHeight += 0.05;\r\n p.y = electrolyteLevel + Math.random() * 20;\r\n p.x = tankX + 20 + Math.random() * (tankW - 40);\r\n p.vy = 0;\r\n }\r\n } else if (p.type === 'O2-') {\r\n p.vy -= 0.05;\r\n p.y += p.vy;\r\n p.x += p.vx;\r\n let hitAnode = false;\r\n for (let i=0; i<3; i++) {\r\n const ax = anodeStartX + i*(anodeWid + anodeSpacing);\r\n const ay = tankY - 40;\r\n const ah = anodeHei - anodeWear * 0.8;\r\n if (p.x > ax && p.x < ax + anodeWid && p.y < tankY + ah) hitAnode = true;\r\n }\r\n if (hitAnode) {\r\n anodeWear += 0.005;\r\n p.y = poolSurfaceY - Math.random() * 20;\r\n p.x = tankX + 20 + Math.random() * (tankW - 40);\r\n p.vy = 0;\r\n }\r\n if (p.y < electrolyteLevel) { p.y = poolSurfaceY - 5; p.vy = 0; }\r\n }\r\n } else {\r\n p.x += (Math.random() - 0.5);\r\n p.y += (Math.random() - 0.5);\r\n }\r\n\r\n \/\/ \u062d\u062f\u0648\u062f\r\n if (p.x < tankX + 10) p.x = tankX + 10;\r\n if (p.x > tankX + tankW - 10) p.x = tankX + tankW - 10;\r\n if (p.y > poolSurfaceY) p.y = poolSurfaceY;\r\n if (p.y < electrolyteLevel) p.y = electrolyteLevel;\r\n\r\n newParticles.push(p);\r\n\r\n \/\/ \u0631\u0633\u0645\r\n ctx.globalAlpha = p.opacity;\r\n ctx.fillStyle = p.color;\r\n ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI*2); ctx.fill();\r\n if (p.type !== 'CO2') {\r\n ctx.fillStyle = 'black';\r\n ctx.font = '8px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(p.type === 'Al3+' ? 'Al' : 'O', p.x, p.y);\r\n }\r\n ctx.globalAlpha = 1;\r\n });\r\n particles = newParticles;\r\n\r\n \/\/ \u0646\u0635\u0648\u0635\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 12px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('\u0645\u0635\u0639\u062f (+) \u063a\u0631\u0627\u0641\u064a\u062a', width\/2, tankY - 80);\r\n ctx.fillText('\u0645\u0647\u0628\u0637 (-) \u0637\u0628\u0642\u0629 \u0627\u0644\u063a\u0631\u0627\u0641\u064a\u062a', width\/2, tankY + tankH + 20);\r\n if (isOn) {\r\n ctx.fillStyle = '#facc15';\r\n ctx.fillText('CO\u2082', anodeStartX + anodeWid\/2, electrolyteLevel - 10);\r\n ctx.fillText('Al (\u0645\u0635\u0647\u0648\u0631)', width\/2, tankY + tankH - 5);\r\n }\r\n\r\n animationId = requestAnimationFrame(render);\r\n }\r\n\r\n toggleBtn.addEventListener('click', function() {\r\n isOn = !isOn;\r\n toggleBtn.className = `px-6 py-2 rounded-lg font-bold text-white shadow-lg flex items-center gap-2 ${isOn ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'}`;\r\n toggleBtn.innerHTML = isOn ? '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062e\u0644\u064a\u0629' : '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629';\r\n });\r\n\r\n tapBtn.addEventListener('click', function() {\r\n tapOpen = !tapOpen;\r\n tapBtn.innerHTML = tapOpen ? '\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0645\u0635\u0628' : '\u0633\u062d\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645';\r\n });\r\n\r\n resetBtn.addEventListener('click', function() {\r\n isOn = false;\r\n toggleBtn.className = 'px-6 py-2 rounded-lg font-bold text-white shadow-lg bg-green-600 hover:bg-green-700 flex items-center gap-2';\r\n toggleBtn.innerHTML = '<span style=\"font-size:1.2rem;\">\u26a1<\/span> \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062e\u0644\u064a\u0629';\r\n tapOpen = false;\r\n tapBtn.innerHTML = '\u0633\u062d\u0628 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645';\r\n aluminumPoolHeight = 10;\r\n anodeWear = 0;\r\n initParticles();\r\n });\r\n\r\n render();\r\n }\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a \u0628\u0639\u062f \u062a\u062d\u0645\u064a\u0644 DOM\r\n window.addEventListener('DOMContentLoaded', function() {\r\n if (document.getElementById('electrolysis-simulation-container')) {\r\n initElectrolysisSim('electrolysis-simulation-container');\r\n }\r\n if (document.getElementById('aluminum-simulation-container')) {\r\n initAluminumSim('aluminum-simulation-container');\r\n }\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-17346","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17346","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=17346"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17346\/revisions"}],"predecessor-version":[{"id":17347,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17346\/revisions\/17347"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}