\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0641\u0644\u0632\u0627\u062a (\u0645\u0639 \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u0643\u0627\u0645\u0644\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\r\n \/* \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a *\/\r\n .simulation {\r\n background: #0f172a;\r\n border: 1px solid #334155;\r\n border-radius: 1rem;\r\n padding: 1.5rem;\r\n margin: 2rem 0;\r\n box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);\r\n }\r\n .metal-btn {\r\n padding: 0.5rem 1rem;\r\n border-radius: 0.5rem;\r\n font-weight: bold;\r\n transition: all 0.2s;\r\n background: #1e293b;\r\n color: #94a3b8;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 0.9rem;\r\n }\r\n .metal-btn.active {\r\n background: #2563eb;\r\n color: white;\r\n box-shadow: 0 0 15px #2563eb80;\r\n transform: scale(1.05);\r\n }\r\n .metal-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n .visual-area {\r\n background: #1e293b80;\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n min-height: 300px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n .test-tube, .beaker {\r\n position: relative;\r\n width: 8rem;\r\n height: 16rem;\r\n border-bottom: 4px solid #64748b80;\r\n border-left: 4px solid #64748b80;\r\n border-right: 4px solid #64748b80;\r\n border-radius: 0 0 3rem 3rem;\r\n background: rgba(255,255,255,0.03);\r\n backdrop-filter: blur(4px);\r\n margin: 0 auto;\r\n overflow: hidden;\r\n }\r\n .beaker {\r\n border-radius: 0 0 4rem 4rem;\r\n }\r\n .liquid {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 70%;\r\n transition: background-color 0.5s;\r\n }\r\n .metal-piece {\r\n position: absolute;\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n border-radius: 0.5rem;\r\n background: #cbd5e1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n color: #0f172a;\r\n box-shadow: 0 4px 6px #00000060;\r\n border: 1px solid #ffffff40;\r\n transition: bottom 0.2s, left 0.2s;\r\n }\r\n .metal-circle {\r\n border-radius: 50%;\r\n }\r\n .bubble {\r\n position: absolute;\r\n width: 0.4rem;\r\n height: 0.4rem;\r\n background: white;\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n pointer-events: none;\r\n bottom: 20%;\r\n }\r\n @keyframes float-up {\r\n 0% { bottom: 10%; opacity: 0; transform: scale(0); }\r\n 10% { opacity: 0.8; transform: scale(1); }\r\n 100% { bottom: 90%; opacity: 0; transform: scale(0.5); }\r\n }\r\n .float-animation {\r\n animation: float-up 2s infinite;\r\n }\r\n @keyframes shake {\r\n 0% { transform: translateX(0) translateY(0); }\r\n 25% { transform: translateX(-3px) translateY(-1px); }\r\n 75% { transform: translateX(3px) translateY(1px); }\r\n 100% { transform: translateX(0) translateY(0); }\r\n }\r\n .reacting .metal-piece {\r\n animation: shake 0.2s infinite;\r\n }\r\n .flame {\r\n position: absolute;\r\n top: -20px; left: 50%;\r\n transform: translateX(-50%);\r\n width: 3rem; height: 4rem;\r\n background: radial-gradient(circle, #fbbf24, transparent 70%);\r\n filter: blur(8px);\r\n border-radius: 50%;\r\n z-index: 30;\r\n }\r\n .progress-bar {\r\n height: 0.5rem;\r\n border-radius: 999px;\r\n background: #334155;\r\n overflow: hidden;\r\n flex: 1;\r\n }\r\n .progress-fill {\r\n height: 100%;\r\n border-radius: 999px;\r\n transition: width 0.3s;\r\n }\r\n .oxygen-sample {\r\n transition: background-color 0.5s;\r\n }\r\n #oxygen-overlay {\r\n transition: opacity 0.5s;\r\n }\r\n .hidden {\r\n display: none !important;\r\n }\r\n .bubbles-container {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n }\r\n .atmosphere-particle {\r\n position: absolute;\r\n color: #7dd3fc;\r\n font-size: 0.7rem;\r\n font-weight: bold;\r\n top: -10px;\r\n animation: fall 2s linear infinite;\r\n }\r\n @keyframes fall {\r\n 0% { top: -10px; opacity: 0; }\r\n 10% { opacity: 1; }\r\n 100% { top: 100%; opacity: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"content-container\">\r\n\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\u0623\u0648\u0644: \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0641\u0644\u0632\u0627\u062a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/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\/metal_reactions.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\/metal_reactions.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\">\r\n\r\n \r\n <div class=\"bg-indigo-900\/30 border border-indigo-500\/30 rounded-xl p-6 mb-8\">\r\n <h2 class=\"text-2xl font-bold text-indigo-300 mb-4\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u062f\u0631\u0633<\/h2>\r\n <p class=\"text-gray-200 leading-relaxed mb-4\">\u062a\u062a\u0641\u0627\u0648\u062a \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0641\u064a \u0633\u0631\u0639\u0629 \u062a\u0641\u0627\u0639\u0644\u0647\u0627 \u0645\u0639 \u0643\u0644 \u0645\u0646:<\/p>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-2 mb-4\">\r\n <li>\u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082)<\/li>\r\n <li>\u0627\u0644\u0645\u0627\u0621 (H\u2082O)<\/li>\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0627\u0644\u0645\u062e\u0641\u0641 (HCl)<\/li>\r\n <\/ul>\r\n <p class=\"text-gray-200\">\u0648\u064a\u064f\u0639\u0628\u064e\u0651\u0631 \u0639\u0646 \u0647\u0630\u0647 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0628\u0645\u0639\u0627\u062f\u0644\u0627\u062a \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0645\u0648\u0632\u0648\u0646\u0629.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632 (Metal Reactivity)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u0647\u0648 \u0642\u062f\u0631\u0629 \u0627\u0644\u0641\u0644\u0632 \u0639\u0644\u0649 \u0641\u0642\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0648\u062a\u0643\u0648\u064a\u0646 \u0623\u064a\u0648\u0646\u0647 \u0627\u0644\u0645\u0648\u062c\u0628. \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0633\u0647\u0648\u0644\u0629 \u0641\u0642\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a\u060c \u0632\u0627\u062f \u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632 (Metal Oxide)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u0645\u0631\u0643\u0628 \u0643\u064a\u0645\u064a\u0627\u0626\u064a \u064a\u0646\u062a\u062c \u0645\u0646 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632 \u0645\u0639 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0627\u0644\u0645\u0644\u062d (Salt)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u0645\u0631\u0643\u0628 \u0623\u064a\u0648\u0646\u064a \u064a\u0646\u062a\u062c \u0645\u0646 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u062d\u0645\u0636 \u0645\u0639 \u0642\u0627\u0639\u062f\u0629 \u0623\u0648 \u0645\u0639 \u0641\u0644\u0632. \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633\u060c \u0646\u0627\u062a\u062c \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632 \u0645\u0639 \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0647\u0648 \u0645\u0644\u062d \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0641\u0644\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0627\u0644\u0633\u0628\u0627\u0626\u0643 (Alloys)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u062e\u0644\u064a\u0637 \u0645\u0646 \u0641\u0644\u0632 \u0648\u0639\u0646\u0627\u0635\u0631 \u0623\u062e\u0631\u0649 (\u0642\u062f \u062a\u0643\u0648\u0646 \u0641\u0644\u0632\u0627\u062a \u0623\u0648 \u0644\u0627 \u0641\u0644\u0632\u0627\u062a) \u0644\u062a\u062d\u0633\u064a\u0646 \u062e\u0635\u0627\u0626\u0635\u0647\u060c \u0645\u062b\u0644 \u0633\u0628\u064a\u0643\u0629 \u0627\u0644\u0641\u0648\u0644\u0627\u0630 \u0627\u0644\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0635\u062f\u0623.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0623\u0648\u0644\u0627\u064b: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u062a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639\u0638\u0645 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0623\u0643\u0633\u062c\u064a\u0646 \u0627\u0644\u0647\u0648\u0627\u0621 \u0644\u062a\u0643\u0648\u064a\u0646 \u0637\u0628\u0642\u0629 \u0635\u0644\u0628\u0629 \u0639\u0644\u0649 \u0633\u0637\u062d\u0647\u0627 \u062a\u0633\u0645\u0649 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632. \u062a\u062e\u062a\u0644\u0641 \u0633\u0631\u0639\u0629 \u0647\u0630\u0627 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0646 \u0641\u0644\u0632 \u0644\u0622\u062e\u0631.<\/p>\r\n\r\n \r\n <div class=\"bg-black\/30 p-4 rounded-lg text-center mb-8 border border-gray-700\">\r\n <p class=\"text-yellow-400 font-bold mb-2\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <p class=\"text-xl text-white\">\u0641\u0644\u0632 + \u0623\u0643\u0633\u062c\u064a\u0646 \u2190 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-6 mb-12\">\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-red-500\">\r\n <h3 class=\"text-xl font-bold text-red-400 mb-3\">1. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 (\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 1): \u0634\u062f\u064a\u062f\u0629 \u0627\u0644\u0646\u0634\u0627\u0637<\/h3>\r\n <p class=\"text-gray-300 mb-3\"><strong>\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na):<\/strong> \u0639\u0646\u062f \u0642\u0637\u0639\u0647 \u0628\u0633\u0643\u064a\u0646\u060c \u064a\u062a\u062d\u0648\u0644 \u0644\u0648\u0646\u0647 \u0645\u0646 \u0627\u0644\u0631\u0645\u0627\u062f\u064a \u0627\u0644\u0644\u0627\u0645\u0639 \u0625\u0644\u0649 \u0627\u0644\u0631\u0645\u0627\u062f\u064a \u0627\u0644\u0628\u0627\u0647\u062a \u062e\u0644\u0627\u0644 \u062b\u0648\u0627\u0646\u064d.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">4Na(s) + O\u2082(g) \u2192 2Na\u2082O(s)<\/div>\r\n <p class=\"text-center text-gray-500 text-l mt-1\">(\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645)<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-orange-500\">\r\n <h3 class=\"text-xl font-bold text-orange-400 mb-3\">2. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 (\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 2): \u0646\u0634\u0637\u0629 \u0648\u0644\u0643\u0646 \u0628\u0633\u0631\u0639\u0629 \u0623\u0642\u0644<\/h3>\r\n <div class=\"mb-4\">\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u062e\u0644\u0627\u0644 \u062f\u0642\u0627\u0626\u0642.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">2Ca(s) + O\u2082(g) \u2192 2CaO(s)<\/div>\r\n <p class=\"text-center text-gray-500 text-l mt-1\">(\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645)<\/p>\r\n <\/div>\r\n <div>\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg):<\/strong> \u064a\u062d\u062a\u0631\u0642 \u0628\u0644\u0647\u0628 \u0623\u0628\u064a\u0636 \u0645\u0628\u0647\u0631 \u0639\u0646\u062f \u062a\u0633\u062e\u064a\u0646\u0647 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0645\u0643\u0648\u0646\u064b\u0627 \u0631\u0645\u0627\u062f\u064b\u0627 \u0623\u0628\u064a\u0636 \u0645\u0646 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">2Mg(s) + O\u2082(g) \u2192 2MgO(s)<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-yellow-500\">\r\n <h3 class=\"text-xl font-bold text-yellow-400 mb-3\">3. \u0641\u0644\u0632\u0627\u062a \u0623\u062e\u0631\u0649<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-3\">\r\n <li><strong>\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0628\u0637\u0621 \u0641\u064a \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0645\u0643\u0648\u0646\u064b\u0627 \u0637\u0628\u0642\u0629 \u0631\u0642\u064a\u0642\u0629 \u0648\u0645\u062a\u0645\u0627\u0633\u0643\u0629 \u0645\u0646 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al\u2082O\u2083) \u062a\u062d\u0645\u064a\u0647 \u0645\u0646 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644. \u0644\u0647\u0630\u0627 \u0646\u0633\u062a\u062e\u062f\u0645 \u0623\u0648\u0627\u0646\u064a \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0641\u064a \u0627\u0644\u0637\u0647\u064a.<\/li>\r\n <li><strong>\u0627\u0644\u062d\u062f\u064a\u062f (Fe):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0628\u0637\u0621 \u0645\u0639 \u0623\u0643\u0633\u062c\u064a\u0646 \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0631\u0637\u0628 \u0645\u0643\u0648\u0646\u064b\u0627 \u0627\u0644\u0635\u062f\u0623 (\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0627\u0626\u064a) \u0648\u0647\u0648 \u0637\u0628\u0642\u0629 \u0628\u0646\u064a\u0629 \u0647\u0634\u0629 \u0644\u0627 \u062a\u062d\u0645\u064a \u0627\u0644\u062d\u062f\u064a\u062f.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"simulation\" id=\"oxygen-sim\">\r\n <h3 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646<\/h3>\r\n <div class=\"flex flex-wrap justify-center gap-3 mb-8\" id=\"oxygen-metal-btns\">\r\n <button class=\"metal-btn active\" data-metal=\"Na\">\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Ca\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Mg\">\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Al\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Fe\">\u0627\u0644\u062d\u062f\u064a\u062f (Fe)<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"visual-area\">\r\n <div class=\"relative w-48 h-32 flex items-center justify-center\">\r\n <div id=\"oxygen-sample\" class=\"w-full h-full rounded-lg shadow-2xl bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 relative overflow-hidden\">\r\n <div id=\"oxygen-overlay\" class=\"absolute inset-0 rounded-lg opacity-0\" style=\"background-color: #9ca3af;\"><\/div>\r\n <div id=\"oxygen-flame\" class=\"absolute inset-0 rounded-lg hidden bg-white mix-blend-overlay animate-pulse\"><\/div>\r\n <\/div>\r\n <div class=\"absolute -bottom-8 text-slate-400 font-mono font-bold\" id=\"oxygen-label\">\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645<\/div>\r\n <\/div>\r\n <div id=\"oxygen-particles\" class=\"absolute inset-0 pointer-events-none hidden\">\r\n <div class=\"atmosphere-particle\" style=\"left:20%; animation-delay:0s;\">O\u2082<\/div>\r\n <div class=\"atmosphere-particle\" style=\"left:40%; animation-delay:0.5s;\">O\u2082<\/div>\r\n <div class=\"atmosphere-particle\" style=\"left:60%; animation-delay:1s;\">O\u2082<\/div>\r\n <div class=\"atmosphere-particle\" style=\"left:80%; animation-delay:1.5s;\">O\u2082<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col gap-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/h4>\r\n <p class=\"text-gray-300 text-l leading-relaxed\" id=\"oxygen-desc\">\u064a\u0641\u0642\u062f \u0628\u0631\u064a\u0642\u0647 \u0628\u0633\u0631\u0639\u0629 \u0643\u0628\u064a\u0631\u0629 \u0639\u0646\u062f \u062a\u0639\u0631\u0636\u0647 \u0644\u0644\u0647\u0648\u0627\u0621.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-slate-700 text-center\">\r\n <h4 class=\"text-yellow-500 text-l font-bold mb-2 uppercase tracking-wider\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h4>\r\n <div class=\"font-mono text-lg text-green-400\" dir=\"ltr\" id=\"oxygen-equation\">4Na(s) + O\u2082(g) \u2192 2Na\u2082O(s)<\/div>\r\n <\/div>\r\n <div class=\"flex gap-3 mt-auto\">\r\n <button class=\"flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 transition-all shadow-lg\" id=\"oxygen-start\">\u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <button class=\"px-6 py-3 rounded-xl bg-slate-700 text-white font-bold hover:bg-slate-600 disabled:opacity-50 transition-all\" id=\"oxygen-reset\" disabled>\u0625\u0639\u0627\u062f\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-blue-900\/20 border border-blue-500\/30 p-4 rounded-xl mb-12\">\r\n <h4 class=\"font-bold text-blue-300 mb-2\">\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0647\u0627\u0645\u0629:<\/h4>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-2 text-l\">\r\n <li>\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0623\u0643\u062b\u0631 \u0646\u0634\u0627\u0637\u064b\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645) \u062a\u0641\u0642\u062f \u0628\u0631\u064a\u0642\u0647\u0627 \u0628\u0633\u0631\u0639\u0629.<\/li>\r\n <li>\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0642\u0644\u064a\u0644\u0629 \u0627\u0644\u0646\u0634\u0627\u0637 (\u0645\u062b\u0644 \u0627\u0644\u0630\u0647\u0628 \u0648\u0627\u0644\u0641\u0636\u0629) \u062a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0628\u0631\u064a\u0642\u0647\u0627 \u0644\u0622\u0644\u0627\u0641 \u0627\u0644\u0633\u0646\u064a\u0646.<\/li>\r\n <li>\u0638\u0627\u0647\u0631\u0629 \u0627\u0644\u0632\u0646\u062c\u0627\u0631 (Patina): \u0647\u0648 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0646\u062d\u0627\u0633 \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0648\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 \u0648\u0627\u0644\u0631\u0637\u0648\u0628\u0629 \u0645\u0643\u0648\u0646\u064b\u0627 \u0637\u0628\u0642\u0629 \u062e\u0636\u0631\u0627\u0621 \u0645\u0646 \u0643\u0631\u0628\u0648\u0646\u0627\u062a \u0627\u0644\u0646\u062d\u0627\u0633 \u0627\u0644\u0642\u0627\u0639\u062f\u064a\u0629\u060c \u0648\u0647\u064a \u062a\u062d\u0645\u064a \u0627\u0644\u0646\u062d\u0627\u0633 \u0645\u0646 \u0627\u0644\u062a\u0622\u0643\u0644\u060c \u0648\u0644\u0643\u0646\u0647\u0627 \u0633\u0627\u0645\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 (H\u2082O)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621. \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u062d\u062f\u062b \u0628\u0634\u0643\u0644 \u0648\u0627\u0636\u062d \u0645\u0639 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0634\u062f\u064a\u062f\u0629 \u0627\u0644\u0646\u0634\u0627\u0637.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-lg text-center mb-8 border border-gray-700\">\r\n <p class=\"text-yellow-400 font-bold mb-2\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <p class=\"text-xl text-white\">\u0641\u0644\u0632 + \u0645\u0627\u0621 \u2190 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632 + \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 + \u062d\u0631\u0627\u0631\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-6 mb-12\">\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-red-500\">\r\n <h3 class=\"text-xl font-bold text-red-400 mb-3\">1. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 (\u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f): \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u0639\u0646\u0641<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-2 mb-4\">\r\n <li><strong>\u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0633\u0631\u0639\u0629.<\/li>\r\n <li><strong>\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0633\u0631\u0639\u0629 \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645\u060c \u0648\u064a\u0634\u062a\u0639\u0644 \u0623\u062d\u064a\u0627\u0646\u064b\u0627.<\/li>\r\n <li><strong>\u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645 (K):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0639\u0646\u0641 \u0634\u062f\u064a\u062f\u060c \u0648\u062a\u0635\u0644 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0634\u062a\u0639\u0627\u0644 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0627\u0644\u0646\u0627\u062a\u062c \u0628\u0641\u0631\u0642\u0639\u0629.<\/li>\r\n <\/ul>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">2K(s) + 2H\u2082O(l) \u2192 2KOH(aq) + H\u2082(g) + Heat<\/div>\r\n <p class=\"text-center text-gray-500 text-l mt-1\">(\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645)<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-orange-500\">\r\n <h3 class=\"text-xl font-bold text-orange-400 mb-3\">2. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629<\/h3>\r\n <div class=\"mb-4\">\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f \u0628\u0648\u0636\u0648\u062d\u060c \u0648\u062a\u062a\u0635\u0627\u0639\u062f \u0641\u0642\u0627\u0639\u0627\u062a \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">Ca(s) + 2H\u2082O(l) \u2192 Ca(OH)\u2082(aq) + H\u2082(g) + Heat<\/div>\r\n <\/div>\r\n <div>\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg):<\/strong> \u064a\u0643\u0627\u062f \u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f\u060c \u0648\u0644\u0643\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u0632\u062f\u0627\u062f \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0633\u0627\u062e\u0646 \u0623\u0648 \u0627\u0644\u0628\u062e\u0627\u0631.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">Mg(s) + 2H\u2082O(l) \u2192 Mg(OH)\u2082(s) + H\u2082(g) + Heat (\u062a\u0633\u062e\u064a\u0646)<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-gray-500\">\r\n <h3 class=\"text-xl font-bold text-gray-400 mb-3\">3. \u0641\u0644\u0632\u0627\u062a \u0623\u062e\u0631\u0649<\/h3>\r\n <p class=\"text-gray-300\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645\u060c \u0627\u0644\u062d\u062f\u064a\u062f\u060c \u0627\u0644\u062e\u0627\u0631\u0635\u064a\u0646\u060c \u0648\u0627\u0644\u0646\u062d\u0627\u0633 \u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f (\u0623\u0648 \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u0628\u0637\u0621 \u0634\u062f\u064a\u062f \u062c\u062f\u064b\u0627 \u0644\u0627 \u064a\u064f\u0644\u0627\u062d\u0638).<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"simulation\" id=\"water-sim\">\r\n <h3 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621<\/h3>\r\n <div class=\"flex flex-wrap justify-center gap-3 mb-8\" id=\"water-metal-btns\">\r\n <button class=\"metal-btn active\" data-metal=\"K\">\u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645 (K)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Na\">\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Li\">\u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Ca\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Mg\">\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg)<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"visual-area\">\r\n <div class=\"relative w-48 h-64 border-b-4 border-x-4 border-slate-400\/50 rounded-b-3xl backdrop-blur-sm\">\r\n <div id=\"water-liquid\" class=\"absolute bottom-0 left-0 right-0 h-48 bg-cyan-400\/30 transition-colors duration-1000 rounded-b-2xl\"><\/div>\r\n <div id=\"water-metal-piece\" class=\"absolute metal-piece metal-circle hidden\" style=\"top:20%; left:50%; transform:translateX(-50%);\">K<\/div>\r\n <div id=\"water-flame\" class=\"flame hidden\"><\/div>\r\n <div id=\"water-bubbles\" class=\"bubbles-container\"><\/div>\r\n <div class=\"absolute top-4 right-2 text-l text-slate-500 font-mono\">H\u2082O<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col gap-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/h4>\r\n <p class=\"text-gray-300 text-l leading-relaxed\" id=\"water-desc\">\u062a\u0641\u0627\u0639\u0644 \u0639\u0646\u064a\u0641 \u062c\u062f\u0627\u064b \u0645\u0639 \u0641\u0631\u0642\u0639\u0629 \u0648\u0644\u0647\u0628 \u0628\u0646\u0641\u0633\u062c\u064a.<\/p>\r\n <div class=\"mt-4 flex items-center gap-2\">\r\n <span class=\"text-l text-slate-400\">\u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0646\u0627\u062a\u062c:<\/span>\r\n <span class=\"px-2 py-1 rounded text-l font-bold bg-cyan-600 text-white\" id=\"water-ph\">\u0645\u062a\u0639\u0627\u062f\u0644<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-slate-700 text-center\">\r\n <h4 class=\"text-yellow-500 text-l font-bold mb-2 uppercase tracking-wider\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h4>\r\n <div class=\"font-mono text-l md:text-base text-green-400\" dir=\"ltr\" id=\"water-equation\">2K(s) + 2H\u2082O(l) \u2192 2KOH(aq) + H\u2082(g)<\/div>\r\n <\/div>\r\n <div class=\"flex gap-3 mt-auto\">\r\n <button class=\"flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 transition-all\" id=\"water-start\">\u0623\u0636\u0641 \u0627\u0644\u0641\u0644\u0632 \u0644\u0644\u0645\u0627\u0621<\/button>\r\n <button class=\"px-6 py-3 rounded-xl bg-slate-700 text-white font-bold hover:bg-slate-600 disabled:opacity-50 transition-all\" id=\"water-reset\" disabled>\u0625\u0639\u0627\u062f\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0627\u0644\u0645\u062e\u0641\u0641 (HCl)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u064a\u064f\u0639\u062a\u0628\u0631 \u0647\u0630\u0627 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u062e\u062a\u0628\u0627\u0631\u064b\u0627 \u062c\u064a\u062f\u064b\u0627 \u0644\u0645\u0642\u0627\u0631\u0646\u0629 \u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632\u0627\u062a. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u064a\u0646\u0645\u0627 \u063a\u064a\u0631 \u0627\u0644\u0646\u0634\u0637\u0629 \u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-lg text-center mb-8 border border-gray-700\">\r\n <p class=\"text-yellow-400 font-bold mb-2\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <p class=\"text-xl text-white\">\u0641\u0644\u0632 + \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u2190 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0641\u0644\u0632 + \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-right text-white-200 border-collapse min-w-[600px]\">\r\n <thead><tr class=\"bg-white-800 text-white-300\"><th class=\"p-3 border border-gray-700\">\u0627\u0644\u0641\u0644\u0632<\/th><th class=\"p-3 border border-gray-700\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a<\/th><th class=\"p-3 border border-gray-700\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-red-400\">\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 \u062c\u062f\u064b\u0627\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u063a\u0632\u064a\u0631\u0629\u060c \u064a\u062e\u062a\u0641\u064a \u0627\u0644\u0641\u0644\u0632.<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">Mg(s) + 2HCl(aq) \u2192 MgCl\u2082(aq) + H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-orange-400\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al)<\/td><td class=\"p-3 border border-gray-700\">\u0633\u0631\u064a\u0639 (\u0642\u062f \u064a\u062a\u0623\u062e\u0631 \u0628\u0633\u0628\u0628 \u0637\u0628\u0642\u0629 \u0627\u0644\u0623\u0643\u0633\u064a\u062f).<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">2Al(s) + 6HCl(aq) \u2192 2AlCl\u2083(aq) + 3H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-yellow-400\">\u0627\u0644\u062e\u0627\u0631\u0635\u064a\u0646 (Zn)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0633\u0631\u0639\u0629.<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">Zn(s) + 2HCl(aq) \u2192 ZnCl\u2082(aq) + H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-green-400\">\u0627\u0644\u062d\u062f\u064a\u062f (Fe)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u0642\u0644\u064a\u0644\u0629.<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">Fe(s) + 2HCl(aq) \u2192 FeCl\u2082(aq) + H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-gray-400\">\u0627\u0644\u0631\u0635\u0627\u0635 (Pb)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621 \u062c\u062f\u064b\u0627.<\/td><td class=\"p-3 border border-gray-700 text-center\">-<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-gray-500\">\u0627\u0644\u0646\u062d\u0627\u0633 (Cu)\u060c \u0627\u0644\u0641\u0636\u0629 (Ag)\u060c \u0627\u0644\u0630\u0647\u0628 (Au)<\/td><td class=\"p-3 border border-gray-700\">\u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644.<\/td><td class=\"p-3 border border-gray-700 text-center\">-<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div class=\"simulation\" id=\"acid-sim\">\r\n <h3 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u062d\u0645\u0636 HCl<\/h3>\r\n <div class=\"flex flex-wrap justify-center gap-3 mb-8\" id=\"acid-metal-btns\">\r\n <button class=\"metal-btn active\" data-metal=\"Mg\">Mg<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Al\">Al<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Zn\">Zn<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Fe\">Fe<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Pb\">Pb<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Cu\">Cu<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"visual-area\">\r\n <div class=\"relative w-24 h-64 border-b-4 border-x-4 border-slate-400\/30 rounded-b-full backdrop-blur-sm bg-white\/5 overflow-hidden\">\r\n <div id=\"acid-liquid\" class=\"absolute bottom-0 left-0 right-0 h-48 bg-yellow-100\/10\"><\/div>\r\n <div id=\"acid-metal-piece\" class=\"absolute metal-piece hidden\" style=\"bottom:1rem; left:50%; transform:translateX(-50%);\">Mg<\/div>\r\n <div id=\"acid-bubbles\" class=\"bubbles-container\"><\/div>\r\n <div class=\"absolute top-4 right-2 text-l text-slate-500 font-mono\">HCl (aq)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col gap-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/h4>\r\n <p class=\"text-gray-300 text-l leading-relaxed\" id=\"acid-desc\">\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b\u060c \u0641\u0648\u0631\u0627\u0646 \u0634\u062f\u064a\u062f \u0648\u0627\u062e\u062a\u0641\u0627\u0621 \u0627\u0644\u0641\u0644\u0632.<\/p>\r\n <div class=\"mt-4 flex items-center gap-2\">\r\n <span class=\"text-l text-slate-400\">\u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644:<\/span>\r\n <div class=\"progress-bar\"><div id=\"acid-progress\" class=\"progress-fill bg-red-500 w-full\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-slate-700 text-center\">\r\n <h4 class=\"text-yellow-500 text-l font-bold mb-2 uppercase tracking-wider\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h4>\r\n <div class=\"font-mono text-l md:text-base text-green-400\" dir=\"ltr\" id=\"acid-equation\">Mg(s) + 2HCl(aq) \u2192 MgCl\u2082(aq) + H\u2082(g)<\/div>\r\n <\/div>\r\n <div class=\"flex gap-3 mt-auto\">\r\n <button class=\"flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 transition-all\" id=\"acid-start\">\u0623\u0636\u0641 \u0627\u0644\u0641\u0644\u0632 \u0644\u0644\u062d\u0645\u0636<\/button>\r\n <button class=\"px-6 py-3 rounded-xl bg-slate-700 text-white font-bold hover:bg-slate-600 disabled:opacity-50 transition-all\" id=\"acid-reset\" disabled>\u0625\u0639\u0627\u062f\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-right text-gray-200 border-collapse min-w-[600px]\">\r\n <thead><tr class=\"bg-indigo-900\/50 text-indigo-200\"><th>\u0627\u0644\u0641\u0644\u0632<\/th><th>\u0627\u0644\u0631\u0645\u0632<\/th><th>\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f<\/th><th>\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u062d\u0645\u0636 HCl \u0627\u0644\u0645\u062e\u0641\u0641<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr class=\"bg-red-900\/20\"><td>\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645<\/td><td>K<\/td><td class=\"text-red-300\">\u0639\u0646\u064a\u0641 \u062c\u062f\u0627\u064b (\u0641\u0631\u0642\u0639\u0629)<\/td><td class=\"text-red-300\">\u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b<\/td><\/tr>\r\n <tr class=\"bg-red-900\/10\"><td>\u0635\u0648\u062f\u064a\u0648\u0645<\/td><td>Na<\/td><td class=\"text-red-200\">\u0633\u0631\u064a\u0639<\/td><td class=\"text-red-200\">\u0633\u0631\u064a\u0639<\/td><\/tr>\r\n <tr class=\"bg-orange-900\/10\"><td>\u0643\u0627\u0644\u0633\u064a\u0648\u0645<\/td><td>Ca<\/td><td class=\"text-orange-200\">\u0633\u0631\u064a\u0639 (\u0641\u0642\u0627\u0639\u0627\u062a)<\/td><td class=\"text-orange-200\">\u0633\u0631\u064a\u0639<\/td><\/tr>\r\n <tr class=\"bg-yellow-900\/10\"><td>\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645<\/td><td>Mg<\/td><td class=\"text-yellow-200\">\u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b<\/td><td class=\"text-red-300\">\u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b<\/td><\/tr>\r\n <tr><td>\u0623\u0644\u0645\u0646\u064a\u0648\u0645<\/td><td>Al<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-orange-200\">\u0633\u0631\u064a\u0639<\/td><\/tr>\r\n <tr><td>\u062e\u0627\u0631\u0635\u064a\u0646<\/td><td>Zn<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-yellow-200\">\u0645\u062a\u0648\u0633\u0637<\/td><\/tr>\r\n <tr><td>\u062d\u062f\u064a\u062f<\/td><td>Fe<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-green-200\">\u0628\u0637\u064a\u0621<\/td><\/tr>\r\n <tr><td>\u0631\u0635\u0627\u0635<\/td><td>Pb<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-gray-400\">\u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b<\/td><\/tr>\r\n <tr class=\"bg-gray-900\/30\"><td>\u0646\u062d\u0627\u0633<\/td><td>Cu<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><\/tr>\r\n <tr class=\"bg-gray-900\/30\"><td>\u0641\u0636\u0629<\/td><td>Ag<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\r\n <div class=\"bg-green-900\/20 border border-green-500\/30 p-6 rounded-2xl\">\r\n <h3 class=\"text-xl font-bold text-green-300 mb-4\">\u0631\u0627\u0628\u0637 \u0628\u0627\u0644\u0635\u0646\u0627\u0639\u0629: \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645<\/h3>\r\n <p class=\"text-gray-300 leading-relaxed\">\u0639\u0645\u0644\u064a\u0629 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0645\u0646 \u062e\u0627\u0645 \u0627\u0644\u0628\u0648\u0643\u0633\u064a\u062a \u0645\u0643\u0644\u0641\u0629 \u062c\u062f\u0627\u064b\u060c \u0644\u0630\u0627 \u0641\u0625\u0646 \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0639\u0644\u0628 \u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u062a\u0648\u0641\u0631 \u0627\u0644\u0637\u0627\u0642\u0629 \u0648\u062a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0627\u0644\u0628\u064a\u0626\u0629. \u062a\u062a\u0645 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631 \u0628\u062e\u0637\u0648\u0627\u062a: \u0627\u0644\u062c\u0645\u0639\u060c \u0627\u0644\u062a\u0642\u0637\u064a\u0639\u060c \u0627\u0644\u062a\u0646\u0638\u064a\u0641\u060c \u0627\u0644\u0635\u0647\u0631\u060c \u062b\u0645 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0634\u0643\u064a\u0644.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-100\/10 border border-white\/20 p-6 rounded-2xl\">\r\n <h3 class=\"text-xl font-bold text-white mb-4\">\u0631\u0627\u0628\u0637 \u0628\u0627\u0644\u062d\u064a\u0627\u0629: \u0627\u0644\u0628\u0644\u0627\u062a\u064a\u0646<\/h3>\r\n <p class=\"text-gray-300 leading-relaxed\">\u0627\u0644\u0628\u0644\u0627\u062a\u064a\u0646 \u0641\u0644\u0632 \u062b\u0645\u064a\u0646\u060c \u0623\u0628\u064a\u0636 \u0644\u0627\u0645\u0639\u060c \u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0623\u0648 \u0627\u0644\u0647\u0648\u0627\u0621. \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u062d\u0644\u064a\u060c \u0648\u0641\u064a \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0637\u0628\u064a \u0644\u0635\u0646\u0627\u0639\u0629 \u062d\u0634\u0648\u0627\u062a \u0627\u0644\u0623\u0633\u0646\u0627\u0646\u060c \u0648\u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0645\u0646\u0638\u0645\u0629 \u0644\u0636\u0631\u0628\u0627\u062a \u0627\u0644\u0642\u0644\u0628\u060c \u0648\u0627\u0644\u0628\u0631\u0627\u063a\u064a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0641\u064a \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0639\u0638\u0627\u0645.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0633\u0628\u0627\u0626\u0643 (Alloys)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u0646\u0627\u062f\u0631\u064b\u0627 \u0645\u0627 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0641\u064a \u062d\u0627\u0644\u062a\u0647\u0627 \u0627\u0644\u0646\u0642\u064a\u0629 \u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629\u060c \u0628\u0644 \u064a\u062a\u0645 \u062e\u0644\u0637\u0647\u0627 \u0645\u0639 \u0639\u0646\u0627\u0635\u0631 \u0623\u062e\u0631\u0649 \u0644\u062a\u062d\u0633\u064a\u0646 \u0635\u0641\u0627\u062a\u0647\u0627.<\/p>\r\n <div class=\"bg-gray-800\/50 p-6 rounded-xl border border-gray-700 mb-8\">\r\n <h3 class=\"text-xl font-bold text-purple-300 mb-3\">\u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0633\u0628\u064a\u0643\u0629<\/h3>\r\n <p class=\"text-gray-300 leading-relaxed\">\u0647\u064a \u062e\u0644\u064a\u0637 \u0645\u0646 \u0641\u0644\u0632 \u0648\u0639\u0646\u0635\u0631 \u0622\u062e\u0631 \u0623\u0648 \u0623\u0643\u062b\u0631 (\u0642\u062f \u062a\u0643\u0648\u0646 \u0641\u0644\u0632\u0627\u062a \u0623\u0648 \u0644\u0627 \u0641\u0644\u0632\u0627\u062a) \u064a\u062a\u0645 \u0635\u0647\u0631\u0647\u0627 \u0645\u0639\u064b\u0627 \u062b\u0645 \u062a\u0628\u0631\u064a\u062f\u0647\u0627. \u0627\u0644\u0647\u062f\u0641 \u0645\u0646 \u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0633\u0628\u0627\u0626\u0643 \u0647\u0648 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0635\u0641\u0627\u062a \u062c\u062f\u064a\u062f\u0629 \u0645\u0631\u063a\u0648\u0628\u0629 \u0644\u0627 \u062a\u062a\u0648\u0641\u0631 \u0641\u064a \u0627\u0644\u0641\u0644\u0632 \u0627\u0644\u0646\u0642\u064a\u060c \u0645\u062b\u0644 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0635\u0644\u0627\u0628\u0629\u060c \u0645\u0642\u0627\u0648\u0645\u0629 \u0627\u0644\u062a\u0622\u0643\u0644\u060c \u0623\u0648 \u062a\u063a\u064a\u064a\u0631 \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-gray-400\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u0641\u0648\u0644\u0627\u0630 \u0627\u0644\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0635\u062f\u0623 (Stainless Steel)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u062d\u062f\u064a\u062f + \u0643\u0631\u0628\u0648\u0646 + \u0643\u0631\u0648\u0645 + \u0646\u064a\u0643\u0644.<\/p><p class=\"text-gray-300 text-l\">\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0635\u062f\u0623\u060c \u0635\u0644\u0628\u060c \u0648\u0644\u0627\u0645\u0639. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0627\u0626\u062f\u0629 \u0648\u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062c\u0631\u0627\u062d\u064a\u0629.<\/p><\/div>\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-yellow-600\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u0628\u0631\u0648\u0646\u0632 (Bronze)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u0646\u062d\u0627\u0633 + \u0642\u0635\u062f\u064a\u0631.<\/p><p class=\"text-gray-300 text-l\">\u0623\u0643\u062b\u0631 \u0635\u0644\u0627\u0628\u0629 \u0645\u0646 \u0627\u0644\u0646\u062d\u0627\u0633 \u0627\u0644\u0646\u0642\u064a\u060c \u0648\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u062a\u0622\u0643\u0644. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u062a\u0645\u0627\u062b\u064a\u0644 \u0648\u0627\u0644\u0645\u064a\u062f\u0627\u0644\u064a\u0627\u062a.<\/p><\/div>\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-yellow-400\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u0646\u062d\u0627\u0633 \u0627\u0644\u0623\u0635\u0641\u0631 (Brass)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u0646\u062d\u0627\u0633 + \u062e\u0627\u0631\u0635\u064a\u0646.<\/p><p class=\"text-gray-300 text-l\">\u0644\u0648\u0646\u0647 \u0630\u0647\u0628\u064a \u0644\u0627\u0645\u0639\u060c \u0633\u0647\u0644 \u0627\u0644\u062a\u0634\u0643\u064a\u0644\u060c \u0648\u0644\u0647 \u0631\u0646\u064a\u0646 \u062c\u064a\u062f. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0622\u0644\u0627\u062a \u0627\u0644\u0645\u0648\u0633\u064a\u0642\u064a\u0629 \u0648\u0627\u0644\u0645\u0642\u0627\u0628\u0636.<\/p><\/div>\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-blue-400\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u062f\u064a\u0648\u0631\u0627\u0644\u0648\u0645\u064a\u0646 (Duralumin)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u0623\u0644\u0645\u0646\u064a\u0648\u0645 + \u0646\u062d\u0627\u0633 + \u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 + \u0645\u0646\u063a\u0646\u064a\u0632.<\/p><p class=\"text-gray-300 text-l\">\u062e\u0641\u064a\u0641 \u0627\u0644\u0648\u0632\u0646 \u062c\u062f\u064b\u0627 \u0648\u0635\u0644\u0628. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0647\u064a\u0627\u0643\u0644 \u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a.<\/p><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-indigo-900\/40 border border-indigo-500\/30 rounded-2xl p-6\">\r\n <h2 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633<\/h2>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-3 leading-relaxed\">\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0644\u062a\u0643\u0648\u064a\u0646 \u0623\u0643\u0627\u0633\u064a\u062f \u0641\u0644\u0632\u064a\u0629.<\/li>\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0643\u0648\u064a\u0646 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632 \u0648\u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.<\/li>\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0644\u062a\u0643\u0648\u064a\u0646 \u0645\u0644\u062d \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0641\u0644\u0632 \u0648\u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.<\/li>\r\n <li>\u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u062a\u062e\u062a\u0644\u0641 \u062d\u0633\u0628 \u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632. \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645 \u0648\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 \u0645\u0646 \u0623\u0643\u062b\u0631\u0647\u0627 \u0646\u0634\u0627\u0637\u064b\u0627\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0630\u0647\u0628 \u0648\u0627\u0644\u0641\u0636\u0629 \u0645\u0646 \u0623\u0642\u0644\u0647\u0627.<\/li>\r\n <li>\u0628\u0639\u0636 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a (\u0645\u062b\u0644 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0645\u0639 \u0627\u0644\u062d\u0645\u0636) \u0647\u064a \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0625\u062d\u0644\u0627\u0644\u060c \u062d\u064a\u062b \u064a\u062d\u0644 \u0627\u0644\u0641\u0644\u0632 \u0645\u062d\u0644 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0641\u064a \u0627\u0644\u062d\u0645\u0636.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function() {\r\n \/\/ -------------------- \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a --------------------\r\n const oxygenMetals = {\r\n Na: { name: '\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645', label: '\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645', desc: '\u064a\u0641\u0642\u062f \u0628\u0631\u064a\u0642\u0647 \u0628\u0633\u0631\u0639\u0629 \u0643\u0628\u064a\u0631\u0629 \u0639\u0646\u062f \u062a\u0639\u0631\u0636\u0647 \u0644\u0644\u0647\u0648\u0627\u0621.', eq: '4Na(s) + O\u2082(g) \u2192 2Na\u2082O(s)', before: 'from-gray-300 via-gray-100 to-gray-300', after: '#9ca3af', duration: 2000 },\r\n Ca: { name: '\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645', label: '\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645', desc: '\u064a\u062a\u0641\u0627\u0639\u0644 \u062e\u0644\u0627\u0644 \u062f\u0642\u0627\u0626\u0642 \u0648\u062a\u062a\u0643\u0648\u0646 \u0637\u0628\u0642\u0629 \u0631\u0645\u0627\u062f\u064a\u0629 \u0628\u064a\u0636\u0627\u0621.', eq: '2Ca(s) + O\u2082(g) \u2192 2CaO(s)', before: 'from-gray-400 via-gray-200 to-gray-400', after: '#cbd5e1', duration: 4000 },\r\n Mg: { name: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', label: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', desc: '\u064a\u062d\u062a\u0631\u0642 \u0628\u0644\u0647\u0628 \u0623\u0628\u064a\u0636 \u0645\u0628\u0647\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u0633\u062e\u064a\u0646.', eq: '2Mg(s) + O\u2082(g) \u2192 2MgO(s)', before: 'from-slate-400 via-slate-200 to-slate-400', after: '#ffffff', duration: 3000 },\r\n Al: { name: '\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645', label: '\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645', desc: '\u062a\u062a\u0643\u0648\u0646 \u0637\u0628\u0642\u0629 \u0631\u0642\u064a\u0642\u0629 \u0645\u062a\u0645\u0627\u0633\u0643\u0629 \u062a\u062d\u0645\u064a\u0647 \u0645\u0646 \u0627\u0644\u062a\u0622\u0643\u0644.', eq: '4Al(s) + 3O\u2082(g) \u2192 2Al\u2082O\u2083(s)', before: 'from-blue-100 via-white to-blue-100', after: '#94a3b8', duration: 5000 },\r\n Fe: { name: '\u0627\u0644\u062d\u062f\u064a\u062f', label: '\u0627\u0644\u062d\u062f\u064a\u062f', desc: '\u064a\u0635\u062f\u0623 \u0628\u0628\u0637\u0621 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0631\u0637\u0628 (\u0637\u0628\u0642\u0629 \u0628\u0646\u064a\u0629 \u0647\u0634\u0629).', eq: '4Fe(s) + 3O\u2082(g) \u2192 2Fe\u2082O\u2083(s)', before: 'from-gray-600 via-gray-400 to-gray-600', after: '#b45309', duration: 6000 }\r\n };\r\n\r\n const waterMetals = {\r\n K: { name: '\u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645', symbol: 'K', desc: '\u062a\u0641\u0627\u0639\u0644 \u0639\u0646\u064a\u0641 \u062c\u062f\u0627\u064b \u0645\u0639 \u0641\u0631\u0642\u0639\u0629 \u0648\u0644\u0647\u0628 \u0628\u0646\u0641\u0633\u062c\u064a.', eq: '2K(s) + 2H\u2082O(l) \u2192 2KOH(aq) + H\u2082(g)', flame: '#d8b4fe', ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-purple-200' },\r\n Na: { name: '\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645', symbol: 'Na', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639\u060c \u064a\u0646\u0635\u0647\u0631 \u0627\u0644\u0641\u0644\u0632 \u0648\u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d.', eq: '2Na(s) + 2H\u2082O(l) \u2192 2NaOH(aq) + H\u2082(g)', flame: '#facc15', ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-yellow-200' },\r\n Li: { name: '\u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645', symbol: 'Li', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639\u060c \u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.', eq: '2Li(s) + 2H\u2082O(l) \u2192 2LiOH(aq) + H\u2082(g)', flame: null, ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-slate-200' },\r\n Ca: { name: '\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645', symbol: 'Ca', desc: '\u062a\u0641\u0627\u0639\u0644 \u0648\u0627\u0636\u062d\u060c \u062a\u062a\u0635\u0627\u0639\u062f \u0641\u0642\u0627\u0639\u0627\u062a \u0648\u064a\u063a\u0648\u0635 \u0627\u0644\u0641\u0644\u0632 \u062b\u0645 \u064a\u0637\u0641\u0648.', eq: 'Ca(s) + 2H\u2082O(l) \u2192 Ca(OH)\u2082(aq) + H\u2082(g)', flame: null, ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-stone-200' },\r\n Mg: { name: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', symbol: 'Mg', desc: '\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f (\u064a\u0643\u0627\u062f \u0644\u0627 \u064a\u0630\u0643\u0631).', eq: 'Mg(s) + 2H\u2082O(l) \u2192 Mg(OH)\u2082(s) + H\u2082(g)', flame: null, ph: '\u0645\u062a\u0639\u0627\u062f\u0644', color: 'bg-slate-300' }\r\n };\r\n\r\n const acidMetals = {\r\n Mg: { name: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b\u060c \u0641\u0648\u0631\u0627\u0646 \u0634\u062f\u064a\u062f \u0648\u0627\u062e\u062a\u0641\u0627\u0621 \u0627\u0644\u0641\u0644\u0632.', eq: 'Mg(s) + 2HCl(aq) \u2192 MgCl\u2082(aq) + H\u2082(g)', progress: 'w-full', color: 'bg-slate-200' },\r\n Al: { name: '\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 (\u0628\u0639\u062f \u0625\u0632\u0627\u0644\u0629 \u0637\u0628\u0642\u0629 \u0627\u0644\u0623\u0643\u0633\u064a\u062f).', eq: '2Al(s) + 6HCl(aq) \u2192 2AlCl\u2083(aq) + 3H\u2082(g)', progress: 'w-3\/4', color: 'bg-gray-300' },\r\n Zn: { name: '\u0627\u0644\u062e\u0627\u0631\u0635\u064a\u0646', desc: '\u062a\u0641\u0627\u0639\u0644 \u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u062a\u0635\u0627\u0639\u062f \u0645\u0646\u062a\u0638\u0645 \u0644\u0644\u063a\u0627\u0632.', eq: 'Zn(s) + 2HCl(aq) \u2192 ZnCl\u2082(aq) + H\u2082(g)', progress: 'w-1\/2', color: 'bg-slate-400' },\r\n Fe: { name: '\u0627\u0644\u062d\u062f\u064a\u062f', desc: '\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u0642\u0644\u064a\u0644\u0629.', eq: 'Fe(s) + 2HCl(aq) \u2192 FeCl\u2082(aq) + H\u2082(g)', progress: 'w-1\/4', color: 'bg-stone-500' },\r\n Pb: { name: '\u0627\u0644\u0631\u0635\u0627\u0635', desc: '\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u0646\u0627\u062f\u0631\u0629.', eq: '-', progress: 'w-[10%]', color: 'bg-slate-600' },\r\n Cu: { name: '\u0627\u0644\u0646\u062d\u0627\u0633', desc: '\u0644\u0627 \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644.', eq: '-', progress: 'w-0', color: 'bg-orange-400' }\r\n };\r\n\r\n \/\/ -------------------- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 --------------------\r\n (function() {\r\n const btns = document.querySelectorAll('#oxygen-metal-btns .metal-btn');\r\n const sample = document.getElementById('oxygen-sample');\r\n const overlay = document.getElementById('oxygen-overlay');\r\n const flame = document.getElementById('oxygen-flame');\r\n const label = document.getElementById('oxygen-label');\r\n const desc = document.getElementById('oxygen-desc');\r\n const eq = document.getElementById('oxygen-equation');\r\n const startBtn = document.getElementById('oxygen-start');\r\n const resetBtn = document.getElementById('oxygen-reset');\r\n const particles = document.getElementById('oxygen-particles');\r\n\r\n let currentMetal = 'Na';\r\n let reacting = false;\r\n let timeout;\r\n\r\n function setMetal(metal) {\r\n if (reacting) return;\r\n currentMetal = metal;\r\n btns.forEach(btn => btn.classList.toggle('active', btn.dataset.metal === metal));\r\n const m = oxygenMetals[metal];\r\n sample.className = `w-full h-full rounded-lg shadow-2xl bg-gradient-to-br ${m.before} relative overflow-hidden`;\r\n overlay.style.backgroundColor = m.after;\r\n overlay.style.opacity = '0';\r\n flame.classList.add('hidden');\r\n particles.classList.add('hidden');\r\n label.innerText = m.label;\r\n desc.innerText = m.desc;\r\n eq.innerText = m.eq;\r\n resetBtn.disabled = true;\r\n }\r\n\r\n btns.forEach(btn => btn.addEventListener('click', () => setMetal(btn.dataset.metal)));\r\n\r\n startBtn.addEventListener('click', () => {\r\n if (reacting) return;\r\n reacting = true;\r\n startBtn.disabled = true;\r\n resetBtn.disabled = false;\r\n particles.classList.remove('hidden');\r\n const m = oxygenMetals[currentMetal];\r\n overlay.style.opacity = '0';\r\n if (currentMetal === 'Mg') flame.classList.remove('hidden');\r\n timeout = setTimeout(() => {\r\n overlay.style.opacity = '1';\r\n flame.classList.add('hidden');\r\n particles.classList.add('hidden');\r\n reacting = false;\r\n startBtn.disabled = false;\r\n }, m.duration);\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n clearTimeout(timeout);\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n overlay.style.opacity = '0';\r\n flame.classList.add('hidden');\r\n particles.classList.add('hidden');\r\n });\r\n\r\n setMetal('Na');\r\n })();\r\n\r\n \/\/ -------------------- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0645\u0627\u0621 --------------------\r\n (function() {\r\n const btns = document.querySelectorAll('#water-metal-btns .metal-btn');\r\n const metalPiece = document.getElementById('water-metal-piece');\r\n const liquid = document.getElementById('water-liquid');\r\n const flame = document.getElementById('water-flame');\r\n const phSpan = document.getElementById('water-ph');\r\n const desc = document.getElementById('water-desc');\r\n const eq = document.getElementById('water-equation');\r\n const startBtn = document.getElementById('water-start');\r\n const resetBtn = document.getElementById('water-reset');\r\n const bubblesContainer = document.getElementById('water-bubbles');\r\n\r\n let currentMetal = 'K';\r\n let reacting = false;\r\n let timeout;\r\n\r\n function clearBubbles() {\r\n while (bubblesContainer.firstChild) bubblesContainer.firstChild.remove();\r\n }\r\n\r\n function setMetal(metal) {\r\n if (reacting) return;\r\n currentMetal = metal;\r\n btns.forEach(btn => btn.classList.toggle('active', btn.dataset.metal === metal));\r\n const m = waterMetals[metal];\r\n metalPiece.innerText = m.symbol;\r\n metalPiece.classList.add('hidden');\r\n flame.classList.add('hidden');\r\n clearBubbles();\r\n liquid.className = `absolute bottom-0 left-0 right-0 h-48 bg-cyan-400\/30 transition-colors duration-1000 rounded-b-2xl`;\r\n phSpan.innerText = '\u0645\u062a\u0639\u0627\u062f\u0644';\r\n phSpan.className = 'px-2 py-1 rounded text-l font-bold bg-cyan-600 text-white';\r\n desc.innerText = m.desc;\r\n eq.innerText = m.eq;\r\n resetBtn.disabled = true;\r\n }\r\n\r\n btns.forEach(btn => btn.addEventListener('click', () => setMetal(btn.dataset.metal)));\r\n\r\n startBtn.addEventListener('click', () => {\r\n if (reacting) return;\r\n reacting = true;\r\n startBtn.disabled = true;\r\n resetBtn.disabled = false;\r\n const m = waterMetals[currentMetal];\r\n metalPiece.classList.remove('hidden');\r\n metalPiece.style.background = m.color;\r\n liquid.className = `absolute bottom-0 left-0 right-0 h-48 bg-purple-500\/40 transition-colors duration-1000 rounded-b-2xl`;\r\n phSpan.innerText = m.ph;\r\n phSpan.className = 'px-2 py-1 rounded text-l font-bold bg-purple-600 text-white';\r\n if (m.flame) {\r\n flame.style.background = `radial-gradient(circle, ${m.flame}, transparent 70%)`;\r\n flame.classList.remove('hidden');\r\n }\r\n clearBubbles();\r\n for (let i = 0; i < 15; i++) {\r\n let bubble = document.createElement('div');\r\n bubble.className = 'bubble';\r\n bubble.style.left = Math.random() * 80 + 10 + '%';\r\n bubble.style.animation = `float-up ${1 + Math.random() * 2}s infinite`;\r\n bubble.style.animationDelay = Math.random() + 's';\r\n bubblesContainer.appendChild(bubble);\r\n }\r\n metalPiece.style.transition = 'top 2s, left 2s';\r\n metalPiece.style.top = '60%';\r\n metalPiece.style.left = '50%';\r\n timeout = setTimeout(() => {\r\n reacting = false;\r\n startBtn.disabled = false;\r\n }, 5000);\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n clearTimeout(timeout);\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n metalPiece.classList.add('hidden');\r\n flame.classList.add('hidden');\r\n clearBubbles();\r\n liquid.className = `absolute bottom-0 left-0 right-0 h-48 bg-cyan-400\/30 transition-colors duration-1000 rounded-b-2xl`;\r\n phSpan.innerText = '\u0645\u062a\u0639\u0627\u062f\u0644';\r\n phSpan.className = 'px-2 py-1 rounded text-l font-bold bg-cyan-600 text-white';\r\n });\r\n\r\n setMetal('K');\r\n })();\r\n\r\n \/\/ -------------------- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062d\u0645\u0636 --------------------\r\n (function() {\r\n const btns = document.querySelectorAll('#acid-metal-btns .metal-btn');\r\n const metalPiece = document.getElementById('acid-metal-piece');\r\n const progress = document.getElementById('acid-progress');\r\n const desc = document.getElementById('acid-desc');\r\n const eq = document.getElementById('acid-equation');\r\n const startBtn = document.getElementById('acid-start');\r\n const resetBtn = document.getElementById('acid-reset');\r\n const bubblesContainer = document.getElementById('acid-bubbles');\r\n\r\n let currentMetal = 'Mg';\r\n let reacting = false;\r\n let timeout;\r\n\r\n function clearBubbles() {\r\n while (bubblesContainer.firstChild) bubblesContainer.firstChild.remove();\r\n }\r\n\r\n function setMetal(metal) {\r\n if (reacting) return;\r\n currentMetal = metal;\r\n btns.forEach(btn => btn.classList.toggle('active', btn.dataset.metal === metal));\r\n const m = acidMetals[metal];\r\n metalPiece.innerText = metal;\r\n metalPiece.classList.add('hidden');\r\n clearBubbles();\r\n progress.className = `progress-fill ${m.progress}`;\r\n desc.innerText = m.desc;\r\n eq.innerText = m.eq;\r\n resetBtn.disabled = true;\r\n }\r\n\r\n btns.forEach(btn => btn.addEventListener('click', () => setMetal(btn.dataset.metal)));\r\n\r\n startBtn.addEventListener('click', () => {\r\n if (reacting) return;\r\n reacting = true;\r\n startBtn.disabled = true;\r\n resetBtn.disabled = false;\r\n const m = acidMetals[currentMetal];\r\n if (currentMetal === 'Cu') {\r\n desc.innerText = '\u0644\u0627 \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644';\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n return;\r\n }\r\n metalPiece.classList.remove('hidden');\r\n metalPiece.style.background = m.color;\r\n let bubbleCount = 0;\r\n if (m.progress === 'w-full') bubbleCount = 20;\r\n else if (m.progress === 'w-3\/4') bubbleCount = 15;\r\n else if (m.progress === 'w-1\/2') bubbleCount = 10;\r\n else if (m.progress === 'w-1\/4') bubbleCount = 5;\r\n else if (m.progress === 'w-[10%]') bubbleCount = 2;\r\n clearBubbles();\r\n for (let i = 0; i < bubbleCount; i++) {\r\n let bubble = document.createElement('div');\r\n bubble.className = 'bubble';\r\n bubble.style.left = Math.random() * 80 + 10 + '%';\r\n bubble.style.animation = `float-up ${0.8 + Math.random()}s infinite`;\r\n bubble.style.animationDelay = Math.random() + 's';\r\n bubblesContainer.appendChild(bubble);\r\n }\r\n let duration = 3000;\r\n if (currentMetal === 'Mg') duration = 2000;\r\n else if (currentMetal === 'Al') duration = 3000;\r\n else if (currentMetal === 'Zn') duration = 4000;\r\n else if (currentMetal === 'Fe') duration = 5000;\r\n else if (currentMetal === 'Pb') duration = 6000;\r\n timeout = setTimeout(() => {\r\n metalPiece.classList.add('hidden');\r\n clearBubbles();\r\n reacting = false;\r\n startBtn.disabled = false;\r\n }, duration);\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n clearTimeout(timeout);\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n metalPiece.classList.add('hidden');\r\n clearBubbles();\r\n });\r\n\r\n setMetal('Mg');\r\n })();\r\n})();\r\n<\/script>\r\n\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-17567","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17567","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=17567"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17567\/revisions"}],"predecessor-version":[{"id":17569,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17567\/revisions\/17569"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0641\u0644\u0632\u0627\u062a (\u0645\u0639 \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u0643\u0627\u0645\u0644\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\r\n \/* \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a *\/\r\n .simulation {\r\n background: #0f172a;\r\n border: 1px solid #334155;\r\n border-radius: 1rem;\r\n padding: 1.5rem;\r\n margin: 2rem 0;\r\n box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);\r\n }\r\n .metal-btn {\r\n padding: 0.5rem 1rem;\r\n border-radius: 0.5rem;\r\n font-weight: bold;\r\n transition: all 0.2s;\r\n background: #1e293b;\r\n color: #94a3b8;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 0.9rem;\r\n }\r\n .metal-btn.active {\r\n background: #2563eb;\r\n color: white;\r\n box-shadow: 0 0 15px #2563eb80;\r\n transform: scale(1.05);\r\n }\r\n .metal-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n .visual-area {\r\n background: #1e293b80;\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n min-height: 300px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n .test-tube, .beaker {\r\n position: relative;\r\n width: 8rem;\r\n height: 16rem;\r\n border-bottom: 4px solid #64748b80;\r\n border-left: 4px solid #64748b80;\r\n border-right: 4px solid #64748b80;\r\n border-radius: 0 0 3rem 3rem;\r\n background: rgba(255,255,255,0.03);\r\n backdrop-filter: blur(4px);\r\n margin: 0 auto;\r\n overflow: hidden;\r\n }\r\n .beaker {\r\n border-radius: 0 0 4rem 4rem;\r\n }\r\n .liquid {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 70%;\r\n transition: background-color 0.5s;\r\n }\r\n .metal-piece {\r\n position: absolute;\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n border-radius: 0.5rem;\r\n background: #cbd5e1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n color: #0f172a;\r\n box-shadow: 0 4px 6px #00000060;\r\n border: 1px solid #ffffff40;\r\n transition: bottom 0.2s, left 0.2s;\r\n }\r\n .metal-circle {\r\n border-radius: 50%;\r\n }\r\n .bubble {\r\n position: absolute;\r\n width: 0.4rem;\r\n height: 0.4rem;\r\n background: white;\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n pointer-events: none;\r\n bottom: 20%;\r\n }\r\n @keyframes float-up {\r\n 0% { bottom: 10%; opacity: 0; transform: scale(0); }\r\n 10% { opacity: 0.8; transform: scale(1); }\r\n 100% { bottom: 90%; opacity: 0; transform: scale(0.5); }\r\n }\r\n .float-animation {\r\n animation: float-up 2s infinite;\r\n }\r\n @keyframes shake {\r\n 0% { transform: translateX(0) translateY(0); }\r\n 25% { transform: translateX(-3px) translateY(-1px); }\r\n 75% { transform: translateX(3px) translateY(1px); }\r\n 100% { transform: translateX(0) translateY(0); }\r\n }\r\n .reacting .metal-piece {\r\n animation: shake 0.2s infinite;\r\n }\r\n .flame {\r\n position: absolute;\r\n top: -20px; left: 50%;\r\n transform: translateX(-50%);\r\n width: 3rem; height: 4rem;\r\n background: radial-gradient(circle, #fbbf24, transparent 70%);\r\n filter: blur(8px);\r\n border-radius: 50%;\r\n z-index: 30;\r\n }\r\n .progress-bar {\r\n height: 0.5rem;\r\n border-radius: 999px;\r\n background: #334155;\r\n overflow: hidden;\r\n flex: 1;\r\n }\r\n .progress-fill {\r\n height: 100%;\r\n border-radius: 999px;\r\n transition: width 0.3s;\r\n }\r\n .oxygen-sample {\r\n transition: background-color 0.5s;\r\n }\r\n #oxygen-overlay {\r\n transition: opacity 0.5s;\r\n }\r\n .hidden {\r\n display: none !important;\r\n }\r\n .bubbles-container {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n }\r\n .atmosphere-particle {\r\n position: absolute;\r\n color: #7dd3fc;\r\n font-size: 0.7rem;\r\n font-weight: bold;\r\n top: -10px;\r\n animation: fall 2s linear infinite;\r\n }\r\n @keyframes fall {\r\n 0% { top: -10px; opacity: 0; }\r\n 10% { opacity: 1; }\r\n 100% { top: 100%; opacity: 0; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"content-container\">\r\n\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\u0623\u0648\u0644: \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0641\u0644\u0632\u0627\u062a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/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\/metal_reactions.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\/metal_reactions.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\">\r\n\r\n \r\n <div class=\"bg-indigo-900\/30 border border-indigo-500\/30 rounded-xl p-6 mb-8\">\r\n <h2 class=\"text-2xl font-bold text-indigo-300 mb-4\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u062f\u0631\u0633<\/h2>\r\n <p class=\"text-gray-200 leading-relaxed mb-4\">\u062a\u062a\u0641\u0627\u0648\u062a \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0641\u064a \u0633\u0631\u0639\u0629 \u062a\u0641\u0627\u0639\u0644\u0647\u0627 \u0645\u0639 \u0643\u0644 \u0645\u0646:<\/p>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-2 mb-4\">\r\n <li>\u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082)<\/li>\r\n <li>\u0627\u0644\u0645\u0627\u0621 (H\u2082O)<\/li>\r\n <li>\u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0627\u0644\u0645\u062e\u0641\u0641 (HCl)<\/li>\r\n <\/ul>\r\n <p class=\"text-gray-200\">\u0648\u064a\u064f\u0639\u0628\u064e\u0651\u0631 \u0639\u0646 \u0647\u0630\u0647 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0628\u0645\u0639\u0627\u062f\u0644\u0627\u062a \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0645\u0648\u0632\u0648\u0646\u0629.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632 (Metal Reactivity)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u0647\u0648 \u0642\u062f\u0631\u0629 \u0627\u0644\u0641\u0644\u0632 \u0639\u0644\u0649 \u0641\u0642\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a \u0648\u062a\u0643\u0648\u064a\u0646 \u0623\u064a\u0648\u0646\u0647 \u0627\u0644\u0645\u0648\u062c\u0628. \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0633\u0647\u0648\u0644\u0629 \u0641\u0642\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a\u060c \u0632\u0627\u062f \u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632 (Metal Oxide)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u0645\u0631\u0643\u0628 \u0643\u064a\u0645\u064a\u0627\u0626\u064a \u064a\u0646\u062a\u062c \u0645\u0646 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632 \u0645\u0639 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0627\u0644\u0645\u0644\u062d (Salt)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u0645\u0631\u0643\u0628 \u0623\u064a\u0648\u0646\u064a \u064a\u0646\u062a\u062c \u0645\u0646 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u062d\u0645\u0636 \u0645\u0639 \u0642\u0627\u0639\u062f\u0629 \u0623\u0648 \u0645\u0639 \u0641\u0644\u0632. \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633\u060c \u0646\u0627\u062a\u062c \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632 \u0645\u0639 \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0647\u0648 \u0645\u0644\u062d \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0641\u0644\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/50 p-5 rounded-xl border border-gray-700\">\r\n <h3 class=\"text-lg font-bold text-purple-300 mb-2\">\u0627\u0644\u0633\u0628\u0627\u0626\u0643 (Alloys)<\/h3>\r\n <p class=\"text-gray-400 text-l\">\u062e\u0644\u064a\u0637 \u0645\u0646 \u0641\u0644\u0632 \u0648\u0639\u0646\u0627\u0635\u0631 \u0623\u062e\u0631\u0649 (\u0642\u062f \u062a\u0643\u0648\u0646 \u0641\u0644\u0632\u0627\u062a \u0623\u0648 \u0644\u0627 \u0641\u0644\u0632\u0627\u062a) \u0644\u062a\u062d\u0633\u064a\u0646 \u062e\u0635\u0627\u0626\u0635\u0647\u060c \u0645\u062b\u0644 \u0633\u0628\u064a\u0643\u0629 \u0627\u0644\u0641\u0648\u0644\u0627\u0630 \u0627\u0644\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0635\u062f\u0623.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0623\u0648\u0644\u0627\u064b: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u062a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639\u0638\u0645 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0623\u0643\u0633\u062c\u064a\u0646 \u0627\u0644\u0647\u0648\u0627\u0621 \u0644\u062a\u0643\u0648\u064a\u0646 \u0637\u0628\u0642\u0629 \u0635\u0644\u0628\u0629 \u0639\u0644\u0649 \u0633\u0637\u062d\u0647\u0627 \u062a\u0633\u0645\u0649 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632. \u062a\u062e\u062a\u0644\u0641 \u0633\u0631\u0639\u0629 \u0647\u0630\u0627 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0646 \u0641\u0644\u0632 \u0644\u0622\u062e\u0631.<\/p>\r\n\r\n \r\n <div class=\"bg-black\/30 p-4 rounded-lg text-center mb-8 border border-gray-700\">\r\n <p class=\"text-yellow-400 font-bold mb-2\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <p class=\"text-xl text-white\">\u0641\u0644\u0632 + \u0623\u0643\u0633\u062c\u064a\u0646 \u2190 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-6 mb-12\">\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-red-500\">\r\n <h3 class=\"text-xl font-bold text-red-400 mb-3\">1. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 (\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 1): \u0634\u062f\u064a\u062f\u0629 \u0627\u0644\u0646\u0634\u0627\u0637<\/h3>\r\n <p class=\"text-gray-300 mb-3\"><strong>\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na):<\/strong> \u0639\u0646\u062f \u0642\u0637\u0639\u0647 \u0628\u0633\u0643\u064a\u0646\u060c \u064a\u062a\u062d\u0648\u0644 \u0644\u0648\u0646\u0647 \u0645\u0646 \u0627\u0644\u0631\u0645\u0627\u062f\u064a \u0627\u0644\u0644\u0627\u0645\u0639 \u0625\u0644\u0649 \u0627\u0644\u0631\u0645\u0627\u062f\u064a \u0627\u0644\u0628\u0627\u0647\u062a \u062e\u0644\u0627\u0644 \u062b\u0648\u0627\u0646\u064d.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">4Na(s) + O\u2082(g) \u2192 2Na\u2082O(s)<\/div>\r\n <p class=\"text-center text-gray-500 text-l mt-1\">(\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645)<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-orange-500\">\r\n <h3 class=\"text-xl font-bold text-orange-400 mb-3\">2. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629 (\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 2): \u0646\u0634\u0637\u0629 \u0648\u0644\u0643\u0646 \u0628\u0633\u0631\u0639\u0629 \u0623\u0642\u0644<\/h3>\r\n <div class=\"mb-4\">\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u062e\u0644\u0627\u0644 \u062f\u0642\u0627\u0626\u0642.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">2Ca(s) + O\u2082(g) \u2192 2CaO(s)<\/div>\r\n <p class=\"text-center text-gray-500 text-l mt-1\">(\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645)<\/p>\r\n <\/div>\r\n <div>\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg):<\/strong> \u064a\u062d\u062a\u0631\u0642 \u0628\u0644\u0647\u0628 \u0623\u0628\u064a\u0636 \u0645\u0628\u0647\u0631 \u0639\u0646\u062f \u062a\u0633\u062e\u064a\u0646\u0647 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0645\u0643\u0648\u0646\u064b\u0627 \u0631\u0645\u0627\u062f\u064b\u0627 \u0623\u0628\u064a\u0636 \u0645\u0646 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">2Mg(s) + O\u2082(g) \u2192 2MgO(s)<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-yellow-500\">\r\n <h3 class=\"text-xl font-bold text-yellow-400 mb-3\">3. \u0641\u0644\u0632\u0627\u062a \u0623\u062e\u0631\u0649<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-3\">\r\n <li><strong>\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0628\u0637\u0621 \u0641\u064a \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0645\u0643\u0648\u0646\u064b\u0627 \u0637\u0628\u0642\u0629 \u0631\u0642\u064a\u0642\u0629 \u0648\u0645\u062a\u0645\u0627\u0633\u0643\u0629 \u0645\u0646 \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al\u2082O\u2083) \u062a\u062d\u0645\u064a\u0647 \u0645\u0646 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644. \u0644\u0647\u0630\u0627 \u0646\u0633\u062a\u062e\u062f\u0645 \u0623\u0648\u0627\u0646\u064a \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0641\u064a \u0627\u0644\u0637\u0647\u064a.<\/li>\r\n <li><strong>\u0627\u0644\u062d\u062f\u064a\u062f (Fe):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0628\u0637\u0621 \u0645\u0639 \u0623\u0643\u0633\u062c\u064a\u0646 \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0631\u0637\u0628 \u0645\u0643\u0648\u0646\u064b\u0627 \u0627\u0644\u0635\u062f\u0623 (\u0623\u0643\u0633\u064a\u062f \u0627\u0644\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0627\u0626\u064a) \u0648\u0647\u0648 \u0637\u0628\u0642\u0629 \u0628\u0646\u064a\u0629 \u0647\u0634\u0629 \u0644\u0627 \u062a\u062d\u0645\u064a \u0627\u0644\u062d\u062f\u064a\u062f.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"simulation\" id=\"oxygen-sim\">\r\n <h3 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646<\/h3>\r\n <div class=\"flex flex-wrap justify-center gap-3 mb-8\" id=\"oxygen-metal-btns\">\r\n <button class=\"metal-btn active\" data-metal=\"Na\">\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Ca\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Mg\">\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Al\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Fe\">\u0627\u0644\u062d\u062f\u064a\u062f (Fe)<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"visual-area\">\r\n <div class=\"relative w-48 h-32 flex items-center justify-center\">\r\n <div id=\"oxygen-sample\" class=\"w-full h-full rounded-lg shadow-2xl bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 relative overflow-hidden\">\r\n <div id=\"oxygen-overlay\" class=\"absolute inset-0 rounded-lg opacity-0\" style=\"background-color: #9ca3af;\"><\/div>\r\n <div id=\"oxygen-flame\" class=\"absolute inset-0 rounded-lg hidden bg-white mix-blend-overlay animate-pulse\"><\/div>\r\n <\/div>\r\n <div class=\"absolute -bottom-8 text-slate-400 font-mono font-bold\" id=\"oxygen-label\">\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645<\/div>\r\n <\/div>\r\n <div id=\"oxygen-particles\" class=\"absolute inset-0 pointer-events-none hidden\">\r\n <div class=\"atmosphere-particle\" style=\"left:20%; animation-delay:0s;\">O\u2082<\/div>\r\n <div class=\"atmosphere-particle\" style=\"left:40%; animation-delay:0.5s;\">O\u2082<\/div>\r\n <div class=\"atmosphere-particle\" style=\"left:60%; animation-delay:1s;\">O\u2082<\/div>\r\n <div class=\"atmosphere-particle\" style=\"left:80%; animation-delay:1.5s;\">O\u2082<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col gap-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/h4>\r\n <p class=\"text-gray-300 text-l leading-relaxed\" id=\"oxygen-desc\">\u064a\u0641\u0642\u062f \u0628\u0631\u064a\u0642\u0647 \u0628\u0633\u0631\u0639\u0629 \u0643\u0628\u064a\u0631\u0629 \u0639\u0646\u062f \u062a\u0639\u0631\u0636\u0647 \u0644\u0644\u0647\u0648\u0627\u0621.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-slate-700 text-center\">\r\n <h4 class=\"text-yellow-500 text-l font-bold mb-2 uppercase tracking-wider\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h4>\r\n <div class=\"font-mono text-lg text-green-400\" dir=\"ltr\" id=\"oxygen-equation\">4Na(s) + O\u2082(g) \u2192 2Na\u2082O(s)<\/div>\r\n <\/div>\r\n <div class=\"flex gap-3 mt-auto\">\r\n <button class=\"flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 transition-all shadow-lg\" id=\"oxygen-start\">\u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/button>\r\n <button class=\"px-6 py-3 rounded-xl bg-slate-700 text-white font-bold hover:bg-slate-600 disabled:opacity-50 transition-all\" id=\"oxygen-reset\" disabled>\u0625\u0639\u0627\u062f\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-blue-900\/20 border border-blue-500\/30 p-4 rounded-xl mb-12\">\r\n <h4 class=\"font-bold text-blue-300 mb-2\">\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0647\u0627\u0645\u0629:<\/h4>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-2 text-l\">\r\n <li>\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0623\u0643\u062b\u0631 \u0646\u0634\u0627\u0637\u064b\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645) \u062a\u0641\u0642\u062f \u0628\u0631\u064a\u0642\u0647\u0627 \u0628\u0633\u0631\u0639\u0629.<\/li>\r\n <li>\u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0642\u0644\u064a\u0644\u0629 \u0627\u0644\u0646\u0634\u0627\u0637 (\u0645\u062b\u0644 \u0627\u0644\u0630\u0647\u0628 \u0648\u0627\u0644\u0641\u0636\u0629) \u062a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0628\u0631\u064a\u0642\u0647\u0627 \u0644\u0622\u0644\u0627\u0641 \u0627\u0644\u0633\u0646\u064a\u0646.<\/li>\r\n <li>\u0638\u0627\u0647\u0631\u0629 \u0627\u0644\u0632\u0646\u062c\u0627\u0631 (Patina): \u0647\u0648 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0646\u062d\u0627\u0633 \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0648\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 \u0648\u0627\u0644\u0631\u0637\u0648\u0628\u0629 \u0645\u0643\u0648\u0646\u064b\u0627 \u0637\u0628\u0642\u0629 \u062e\u0636\u0631\u0627\u0621 \u0645\u0646 \u0643\u0631\u0628\u0648\u0646\u0627\u062a \u0627\u0644\u0646\u062d\u0627\u0633 \u0627\u0644\u0642\u0627\u0639\u062f\u064a\u0629\u060c \u0648\u0647\u064a \u062a\u062d\u0645\u064a \u0627\u0644\u0646\u062d\u0627\u0633 \u0645\u0646 \u0627\u0644\u062a\u0622\u0643\u0644\u060c \u0648\u0644\u0643\u0646\u0647\u0627 \u0633\u0627\u0645\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 (H\u2082O)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621. \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u062d\u062f\u062b \u0628\u0634\u0643\u0644 \u0648\u0627\u0636\u062d \u0645\u0639 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0634\u062f\u064a\u062f\u0629 \u0627\u0644\u0646\u0634\u0627\u0637.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-lg text-center mb-8 border border-gray-700\">\r\n <p class=\"text-yellow-400 font-bold mb-2\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <p class=\"text-xl text-white\">\u0641\u0644\u0632 + \u0645\u0627\u0621 \u2190 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632 + \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 + \u062d\u0631\u0627\u0631\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-6 mb-12\">\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-red-500\">\r\n <h3 class=\"text-xl font-bold text-red-400 mb-3\">1. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 (\u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f): \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u0639\u0646\u0641<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-2 mb-4\">\r\n <li><strong>\u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0633\u0631\u0639\u0629.<\/li>\r\n <li><strong>\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0633\u0631\u0639\u0629 \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645\u060c \u0648\u064a\u0634\u062a\u0639\u0644 \u0623\u062d\u064a\u0627\u0646\u064b\u0627.<\/li>\r\n <li><strong>\u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645 (K):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0628\u0639\u0646\u0641 \u0634\u062f\u064a\u062f\u060c \u0648\u062a\u0635\u0644 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0634\u062a\u0639\u0627\u0644 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0627\u0644\u0646\u0627\u062a\u062c \u0628\u0641\u0631\u0642\u0639\u0629.<\/li>\r\n <\/ul>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">2K(s) + 2H\u2082O(l) \u2192 2KOH(aq) + H\u2082(g) + Heat<\/div>\r\n <p class=\"text-center text-gray-500 text-l mt-1\">(\u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645)<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-orange-500\">\r\n <h3 class=\"text-xl font-bold text-orange-400 mb-3\">2. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0642\u0644\u0648\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629<\/h3>\r\n <div class=\"mb-4\">\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca):<\/strong> \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f \u0628\u0648\u0636\u0648\u062d\u060c \u0648\u062a\u062a\u0635\u0627\u0639\u062f \u0641\u0642\u0627\u0639\u0627\u062a \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">Ca(s) + 2H\u2082O(l) \u2192 Ca(OH)\u2082(aq) + H\u2082(g) + Heat<\/div>\r\n <\/div>\r\n <div>\r\n <p class=\"text-gray-300 mb-2\"><strong>\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg):<\/strong> \u064a\u0643\u0627\u062f \u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f\u060c \u0648\u0644\u0643\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u064a\u0632\u062f\u0627\u062f \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0633\u0627\u062e\u0646 \u0623\u0648 \u0627\u0644\u0628\u062e\u0627\u0631.<\/p>\r\n <div class=\"bg-black\/40 p-3 rounded text-center font-mono text-green-400 text-lg\" dir=\"ltr\">Mg(s) + 2H\u2082O(l) \u2192 Mg(OH)\u2082(s) + H\u2082(g) + Heat (\u062a\u0633\u062e\u064a\u0646)<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-900\/40 p-6 rounded-xl border-r-4 border-gray-500\">\r\n <h3 class=\"text-xl font-bold text-gray-400 mb-3\">3. \u0641\u0644\u0632\u0627\u062a \u0623\u062e\u0631\u0649<\/h3>\r\n <p class=\"text-gray-300\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645\u060c \u0627\u0644\u062d\u062f\u064a\u062f\u060c \u0627\u0644\u062e\u0627\u0631\u0635\u064a\u0646\u060c \u0648\u0627\u0644\u0646\u062d\u0627\u0633 \u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f (\u0623\u0648 \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u0628\u0637\u0621 \u0634\u062f\u064a\u062f \u062c\u062f\u064b\u0627 \u0644\u0627 \u064a\u064f\u0644\u0627\u062d\u0638).<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"simulation\" id=\"water-sim\">\r\n <h3 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621<\/h3>\r\n <div class=\"flex flex-wrap justify-center gap-3 mb-8\" id=\"water-metal-btns\">\r\n <button class=\"metal-btn active\" data-metal=\"K\">\u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645 (K)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Na\">\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 (Na)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Li\">\u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645 (Li)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Ca\">\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645 (Ca)<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Mg\">\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg)<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"visual-area\">\r\n <div class=\"relative w-48 h-64 border-b-4 border-x-4 border-slate-400\/50 rounded-b-3xl backdrop-blur-sm\">\r\n <div id=\"water-liquid\" class=\"absolute bottom-0 left-0 right-0 h-48 bg-cyan-400\/30 transition-colors duration-1000 rounded-b-2xl\"><\/div>\r\n <div id=\"water-metal-piece\" class=\"absolute metal-piece metal-circle hidden\" style=\"top:20%; left:50%; transform:translateX(-50%);\">K<\/div>\r\n <div id=\"water-flame\" class=\"flame hidden\"><\/div>\r\n <div id=\"water-bubbles\" class=\"bubbles-container\"><\/div>\r\n <div class=\"absolute top-4 right-2 text-l text-slate-500 font-mono\">H\u2082O<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col gap-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/h4>\r\n <p class=\"text-gray-300 text-l leading-relaxed\" id=\"water-desc\">\u062a\u0641\u0627\u0639\u0644 \u0639\u0646\u064a\u0641 \u062c\u062f\u0627\u064b \u0645\u0639 \u0641\u0631\u0642\u0639\u0629 \u0648\u0644\u0647\u0628 \u0628\u0646\u0641\u0633\u062c\u064a.<\/p>\r\n <div class=\"mt-4 flex items-center gap-2\">\r\n <span class=\"text-l text-slate-400\">\u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0646\u0627\u062a\u062c:<\/span>\r\n <span class=\"px-2 py-1 rounded text-l font-bold bg-cyan-600 text-white\" id=\"water-ph\">\u0645\u062a\u0639\u0627\u062f\u0644<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-slate-700 text-center\">\r\n <h4 class=\"text-yellow-500 text-l font-bold mb-2 uppercase tracking-wider\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h4>\r\n <div class=\"font-mono text-l md:text-base text-green-400\" dir=\"ltr\" id=\"water-equation\">2K(s) + 2H\u2082O(l) \u2192 2KOH(aq) + H\u2082(g)<\/div>\r\n <\/div>\r\n <div class=\"flex gap-3 mt-auto\">\r\n <button class=\"flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 transition-all\" id=\"water-start\">\u0623\u0636\u0641 \u0627\u0644\u0641\u0644\u0632 \u0644\u0644\u0645\u0627\u0621<\/button>\r\n <button class=\"px-6 py-3 rounded-xl bg-slate-700 text-white font-bold hover:bg-slate-600 disabled:opacity-50 transition-all\" id=\"water-reset\" disabled>\u0625\u0639\u0627\u062f\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0627\u0644\u0645\u062e\u0641\u0641 (HCl)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u064a\u064f\u0639\u062a\u0628\u0631 \u0647\u0630\u0627 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u062e\u062a\u0628\u0627\u0631\u064b\u0627 \u062c\u064a\u062f\u064b\u0627 \u0644\u0645\u0642\u0627\u0631\u0646\u0629 \u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632\u0627\u062a. \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u064a\u0646\u0645\u0627 \u063a\u064a\u0631 \u0627\u0644\u0646\u0634\u0637\u0629 \u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-lg text-center mb-8 border border-gray-700\">\r\n <p class=\"text-yellow-400 font-bold mb-2\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\r\n <p class=\"text-xl text-white\">\u0641\u0644\u0632 + \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u2190 \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0641\u0644\u0632 + \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-right text-white-200 border-collapse min-w-[600px]\">\r\n <thead><tr class=\"bg-white-800 text-white-300\"><th class=\"p-3 border border-gray-700\">\u0627\u0644\u0641\u0644\u0632<\/th><th class=\"p-3 border border-gray-700\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a<\/th><th class=\"p-3 border border-gray-700\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-red-400\">\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 (Mg)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 \u062c\u062f\u064b\u0627\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u063a\u0632\u064a\u0631\u0629\u060c \u064a\u062e\u062a\u0641\u064a \u0627\u0644\u0641\u0644\u0632.<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">Mg(s) + 2HCl(aq) \u2192 MgCl\u2082(aq) + H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-orange-400\">\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 (Al)<\/td><td class=\"p-3 border border-gray-700\">\u0633\u0631\u064a\u0639 (\u0642\u062f \u064a\u062a\u0623\u062e\u0631 \u0628\u0633\u0628\u0628 \u0637\u0628\u0642\u0629 \u0627\u0644\u0623\u0643\u0633\u064a\u062f).<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">2Al(s) + 6HCl(aq) \u2192 2AlCl\u2083(aq) + 3H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-yellow-400\">\u0627\u0644\u062e\u0627\u0631\u0635\u064a\u0646 (Zn)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0633\u0631\u0639\u0629.<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">Zn(s) + 2HCl(aq) \u2192 ZnCl\u2082(aq) + H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-green-400\">\u0627\u0644\u062d\u062f\u064a\u062f (Fe)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u0642\u0644\u064a\u0644\u0629.<\/td><td class=\"p-3 border border-gray-700 font-mono text-l\" dir=\"ltr\">Fe(s) + 2HCl(aq) \u2192 FeCl\u2082(aq) + H\u2082(g)<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-gray-400\">\u0627\u0644\u0631\u0635\u0627\u0635 (Pb)<\/td><td class=\"p-3 border border-gray-700\">\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621 \u062c\u062f\u064b\u0627.<\/td><td class=\"p-3 border border-gray-700 text-center\">-<\/td><\/tr>\r\n <tr class=\"hover:bg-white\/5\"><td class=\"p-3 border border-gray-700 font-bold text-gray-500\">\u0627\u0644\u0646\u062d\u0627\u0633 (Cu)\u060c \u0627\u0644\u0641\u0636\u0629 (Ag)\u060c \u0627\u0644\u0630\u0647\u0628 (Au)<\/td><td class=\"p-3 border border-gray-700\">\u0644\u0627 \u062a\u062a\u0641\u0627\u0639\u0644.<\/td><td class=\"p-3 border border-gray-700 text-center\">-<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div class=\"simulation\" id=\"acid-sim\">\r\n <h3 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u062d\u0645\u0636 HCl<\/h3>\r\n <div class=\"flex flex-wrap justify-center gap-3 mb-8\" id=\"acid-metal-btns\">\r\n <button class=\"metal-btn active\" data-metal=\"Mg\">Mg<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Al\">Al<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Zn\">Zn<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Fe\">Fe<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Pb\">Pb<\/button>\r\n <button class=\"metal-btn\" data-metal=\"Cu\">Cu<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\r\n <div class=\"visual-area\">\r\n <div class=\"relative w-24 h-64 border-b-4 border-x-4 border-slate-400\/30 rounded-b-full backdrop-blur-sm bg-white\/5 overflow-hidden\">\r\n <div id=\"acid-liquid\" class=\"absolute bottom-0 left-0 right-0 h-48 bg-yellow-100\/10\"><\/div>\r\n <div id=\"acid-metal-piece\" class=\"absolute metal-piece hidden\" style=\"bottom:1rem; left:50%; transform:translateX(-50%);\">Mg<\/div>\r\n <div id=\"acid-bubbles\" class=\"bubbles-container\"><\/div>\r\n <div class=\"absolute top-4 right-2 text-l text-slate-500 font-mono\">HCl (aq)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col gap-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:<\/h4>\r\n <p class=\"text-gray-300 text-l leading-relaxed\" id=\"acid-desc\">\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b\u060c \u0641\u0648\u0631\u0627\u0646 \u0634\u062f\u064a\u062f \u0648\u0627\u062e\u062a\u0641\u0627\u0621 \u0627\u0644\u0641\u0644\u0632.<\/p>\r\n <div class=\"mt-4 flex items-center gap-2\">\r\n <span class=\"text-l text-slate-400\">\u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644:<\/span>\r\n <div class=\"progress-bar\"><div id=\"acid-progress\" class=\"progress-fill bg-red-500 w-full\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-slate-700 text-center\">\r\n <h4 class=\"text-yellow-500 text-l font-bold mb-2 uppercase tracking-wider\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629<\/h4>\r\n <div class=\"font-mono text-l md:text-base text-green-400\" dir=\"ltr\" id=\"acid-equation\">Mg(s) + 2HCl(aq) \u2192 MgCl\u2082(aq) + H\u2082(g)<\/div>\r\n <\/div>\r\n <div class=\"flex gap-3 mt-auto\">\r\n <button class=\"flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 transition-all\" id=\"acid-start\">\u0623\u0636\u0641 \u0627\u0644\u0641\u0644\u0632 \u0644\u0644\u062d\u0645\u0636<\/button>\r\n <button class=\"px-6 py-3 rounded-xl bg-slate-700 text-white font-bold hover:bg-slate-600 disabled:opacity-50 transition-all\" id=\"acid-reset\" disabled>\u0625\u0639\u0627\u062f\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-right text-gray-200 border-collapse min-w-[600px]\">\r\n <thead><tr class=\"bg-indigo-900\/50 text-indigo-200\"><th>\u0627\u0644\u0641\u0644\u0632<\/th><th>\u0627\u0644\u0631\u0645\u0632<\/th><th>\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f<\/th><th>\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u062d\u0645\u0636 HCl \u0627\u0644\u0645\u062e\u0641\u0641<\/th><\/tr><\/thead>\r\n <tbody>\r\n <tr class=\"bg-red-900\/20\"><td>\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645<\/td><td>K<\/td><td class=\"text-red-300\">\u0639\u0646\u064a\u0641 \u062c\u062f\u0627\u064b (\u0641\u0631\u0642\u0639\u0629)<\/td><td class=\"text-red-300\">\u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b<\/td><\/tr>\r\n <tr class=\"bg-red-900\/10\"><td>\u0635\u0648\u062f\u064a\u0648\u0645<\/td><td>Na<\/td><td class=\"text-red-200\">\u0633\u0631\u064a\u0639<\/td><td class=\"text-red-200\">\u0633\u0631\u064a\u0639<\/td><\/tr>\r\n <tr class=\"bg-orange-900\/10\"><td>\u0643\u0627\u0644\u0633\u064a\u0648\u0645<\/td><td>Ca<\/td><td class=\"text-orange-200\">\u0633\u0631\u064a\u0639 (\u0641\u0642\u0627\u0639\u0627\u062a)<\/td><td class=\"text-orange-200\">\u0633\u0631\u064a\u0639<\/td><\/tr>\r\n <tr class=\"bg-yellow-900\/10\"><td>\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645<\/td><td>Mg<\/td><td class=\"text-yellow-200\">\u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b<\/td><td class=\"text-red-300\">\u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b<\/td><\/tr>\r\n <tr><td>\u0623\u0644\u0645\u0646\u064a\u0648\u0645<\/td><td>Al<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-orange-200\">\u0633\u0631\u064a\u0639<\/td><\/tr>\r\n <tr><td>\u062e\u0627\u0631\u0635\u064a\u0646<\/td><td>Zn<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-yellow-200\">\u0645\u062a\u0648\u0633\u0637<\/td><\/tr>\r\n <tr><td>\u062d\u062f\u064a\u062f<\/td><td>Fe<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-green-200\">\u0628\u0637\u064a\u0621<\/td><\/tr>\r\n <tr><td>\u0631\u0635\u0627\u0635<\/td><td>Pb<\/td><td class=\"text-gray-400\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-gray-400\">\u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b<\/td><\/tr>\r\n <tr class=\"bg-gray-900\/30\"><td>\u0646\u062d\u0627\u0633<\/td><td>Cu<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><\/tr>\r\n <tr class=\"bg-gray-900\/30\"><td>\u0641\u0636\u0629<\/td><td>Ag<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><td class=\"text-gray-500\">\u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\r\n <div class=\"bg-green-900\/20 border border-green-500\/30 p-6 rounded-2xl\">\r\n <h3 class=\"text-xl font-bold text-green-300 mb-4\">\u0631\u0627\u0628\u0637 \u0628\u0627\u0644\u0635\u0646\u0627\u0639\u0629: \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645<\/h3>\r\n <p class=\"text-gray-300 leading-relaxed\">\u0639\u0645\u0644\u064a\u0629 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0645\u0646 \u062e\u0627\u0645 \u0627\u0644\u0628\u0648\u0643\u0633\u064a\u062a \u0645\u0643\u0644\u0641\u0629 \u062c\u062f\u0627\u064b\u060c \u0644\u0630\u0627 \u0641\u0625\u0646 \u0625\u0639\u0627\u062f\u0629 \u062a\u062f\u0648\u064a\u0631 \u0639\u0644\u0628 \u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u062a\u0648\u0641\u0631 \u0627\u0644\u0637\u0627\u0642\u0629 \u0648\u062a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0627\u0644\u0628\u064a\u0626\u0629. \u062a\u062a\u0645 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u062f\u0648\u064a\u0631 \u0628\u062e\u0637\u0648\u0627\u062a: \u0627\u0644\u062c\u0645\u0639\u060c \u0627\u0644\u062a\u0642\u0637\u064a\u0639\u060c \u0627\u0644\u062a\u0646\u0638\u064a\u0641\u060c \u0627\u0644\u0635\u0647\u0631\u060c \u062b\u0645 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062a\u0634\u0643\u064a\u0644.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-100\/10 border border-white\/20 p-6 rounded-2xl\">\r\n <h3 class=\"text-xl font-bold text-white mb-4\">\u0631\u0627\u0628\u0637 \u0628\u0627\u0644\u062d\u064a\u0627\u0629: \u0627\u0644\u0628\u0644\u0627\u062a\u064a\u0646<\/h3>\r\n <p class=\"text-gray-300 leading-relaxed\">\u0627\u0644\u0628\u0644\u0627\u062a\u064a\u0646 \u0641\u0644\u0632 \u062b\u0645\u064a\u0646\u060c \u0623\u0628\u064a\u0636 \u0644\u0627\u0645\u0639\u060c \u0644\u0627 \u064a\u062a\u0641\u0627\u0639\u0644 \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0623\u0648 \u0627\u0644\u0647\u0648\u0627\u0621. \u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u062d\u0644\u064a\u060c \u0648\u0641\u064a \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0637\u0628\u064a \u0644\u0635\u0646\u0627\u0639\u0629 \u062d\u0634\u0648\u0627\u062a \u0627\u0644\u0623\u0633\u0646\u0627\u0646\u060c \u0648\u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0645\u0646\u0638\u0645\u0629 \u0644\u0636\u0631\u0628\u0627\u062a \u0627\u0644\u0642\u0644\u0628\u060c \u0648\u0627\u0644\u0628\u0631\u0627\u063a\u064a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0641\u064a \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0639\u0638\u0627\u0645.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0633\u0628\u0627\u0626\u0643 (Alloys)<\/h2>\r\n <p class=\"text-gray-200 mb-4\">\u0646\u0627\u062f\u0631\u064b\u0627 \u0645\u0627 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0641\u064a \u062d\u0627\u0644\u062a\u0647\u0627 \u0627\u0644\u0646\u0642\u064a\u0629 \u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629\u060c \u0628\u0644 \u064a\u062a\u0645 \u062e\u0644\u0637\u0647\u0627 \u0645\u0639 \u0639\u0646\u0627\u0635\u0631 \u0623\u062e\u0631\u0649 \u0644\u062a\u062d\u0633\u064a\u0646 \u0635\u0641\u0627\u062a\u0647\u0627.<\/p>\r\n <div class=\"bg-gray-800\/50 p-6 rounded-xl border border-gray-700 mb-8\">\r\n <h3 class=\"text-xl font-bold text-purple-300 mb-3\">\u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0633\u0628\u064a\u0643\u0629<\/h3>\r\n <p class=\"text-gray-300 leading-relaxed\">\u0647\u064a \u062e\u0644\u064a\u0637 \u0645\u0646 \u0641\u0644\u0632 \u0648\u0639\u0646\u0635\u0631 \u0622\u062e\u0631 \u0623\u0648 \u0623\u0643\u062b\u0631 (\u0642\u062f \u062a\u0643\u0648\u0646 \u0641\u0644\u0632\u0627\u062a \u0623\u0648 \u0644\u0627 \u0641\u0644\u0632\u0627\u062a) \u064a\u062a\u0645 \u0635\u0647\u0631\u0647\u0627 \u0645\u0639\u064b\u0627 \u062b\u0645 \u062a\u0628\u0631\u064a\u062f\u0647\u0627. \u0627\u0644\u0647\u062f\u0641 \u0645\u0646 \u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0633\u0628\u0627\u0626\u0643 \u0647\u0648 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0635\u0641\u0627\u062a \u062c\u062f\u064a\u062f\u0629 \u0645\u0631\u063a\u0648\u0628\u0629 \u0644\u0627 \u062a\u062a\u0648\u0641\u0631 \u0641\u064a \u0627\u0644\u0641\u0644\u0632 \u0627\u0644\u0646\u0642\u064a\u060c \u0645\u062b\u0644 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0635\u0644\u0627\u0628\u0629\u060c \u0645\u0642\u0627\u0648\u0645\u0629 \u0627\u0644\u062a\u0622\u0643\u0644\u060c \u0623\u0648 \u062a\u063a\u064a\u064a\u0631 \u062f\u0631\u062c\u0629 \u0627\u0644\u0627\u0646\u0635\u0647\u0627\u0631.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12\">\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-gray-400\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u0641\u0648\u0644\u0627\u0630 \u0627\u0644\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0635\u062f\u0623 (Stainless Steel)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u062d\u062f\u064a\u062f + \u0643\u0631\u0628\u0648\u0646 + \u0643\u0631\u0648\u0645 + \u0646\u064a\u0643\u0644.<\/p><p class=\"text-gray-300 text-l\">\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u0635\u062f\u0623\u060c \u0635\u0644\u0628\u060c \u0648\u0644\u0627\u0645\u0639. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0627\u0626\u062f\u0629 \u0648\u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062c\u0631\u0627\u062d\u064a\u0629.<\/p><\/div>\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-yellow-600\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u0628\u0631\u0648\u0646\u0632 (Bronze)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u0646\u062d\u0627\u0633 + \u0642\u0635\u062f\u064a\u0631.<\/p><p class=\"text-gray-300 text-l\">\u0623\u0643\u062b\u0631 \u0635\u0644\u0627\u0628\u0629 \u0645\u0646 \u0627\u0644\u0646\u062d\u0627\u0633 \u0627\u0644\u0646\u0642\u064a\u060c \u0648\u0645\u0642\u0627\u0648\u0645 \u0644\u0644\u062a\u0622\u0643\u0644. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u062a\u0645\u0627\u062b\u064a\u0644 \u0648\u0627\u0644\u0645\u064a\u062f\u0627\u0644\u064a\u0627\u062a.<\/p><\/div>\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-yellow-400\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u0646\u062d\u0627\u0633 \u0627\u0644\u0623\u0635\u0641\u0631 (Brass)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u0646\u062d\u0627\u0633 + \u062e\u0627\u0631\u0635\u064a\u0646.<\/p><p class=\"text-gray-300 text-l\">\u0644\u0648\u0646\u0647 \u0630\u0647\u0628\u064a \u0644\u0627\u0645\u0639\u060c \u0633\u0647\u0644 \u0627\u0644\u062a\u0634\u0643\u064a\u0644\u060c \u0648\u0644\u0647 \u0631\u0646\u064a\u0646 \u062c\u064a\u062f. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0622\u0644\u0627\u062a \u0627\u0644\u0645\u0648\u0633\u064a\u0642\u064a\u0629 \u0648\u0627\u0644\u0645\u0642\u0627\u0628\u0636.<\/p><\/div>\r\n <div class=\"bg-gray-900\/40 p-5 rounded-xl border-r-4 border-blue-400\"><h4 class=\"text-lg font-bold text-white mb-2\">\u0627\u0644\u062f\u064a\u0648\u0631\u0627\u0644\u0648\u0645\u064a\u0646 (Duralumin)<\/h4><p class=\"text-gray-400 text-l mb-2\"><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a:<\/strong> \u0623\u0644\u0645\u0646\u064a\u0648\u0645 + \u0646\u062d\u0627\u0633 + \u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645 + \u0645\u0646\u063a\u0646\u064a\u0632.<\/p><p class=\"text-gray-300 text-l\">\u062e\u0641\u064a\u0641 \u0627\u0644\u0648\u0632\u0646 \u062c\u062f\u064b\u0627 \u0648\u0635\u0644\u0628. \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0647\u064a\u0627\u0643\u0644 \u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a.<\/p><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-indigo-900\/40 border border-indigo-500\/30 rounded-2xl p-6\">\r\n <h2 class=\"text-2xl font-bold text-center text-white mb-6\">\u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633<\/h2>\r\n <ul class=\"list-disc list-inside text-gray-300 space-y-3 leading-relaxed\">\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u0644\u062a\u0643\u0648\u064a\u0646 \u0623\u0643\u0627\u0633\u064a\u062f \u0641\u0644\u0632\u064a\u0629.<\/li>\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0644\u062a\u0643\u0648\u064a\u0646 \u0647\u064a\u062f\u0631\u0648\u0643\u0633\u064a\u062f \u0627\u0644\u0641\u0644\u0632 \u0648\u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.<\/li>\r\n <li>\u062a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0641\u0644\u0632\u0627\u062a \u0645\u0639 \u062d\u0645\u0636 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0643\u0644\u0648\u0631\u064a\u0643 \u0644\u062a\u0643\u0648\u064a\u0646 \u0645\u0644\u062d \u0643\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0641\u0644\u0632 \u0648\u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.<\/li>\r\n <li>\u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u062a\u062e\u062a\u0644\u0641 \u062d\u0633\u0628 \u0646\u0634\u0627\u0637 \u0627\u0644\u0641\u0644\u0632. \u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645 \u0648\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645 \u0645\u0646 \u0623\u0643\u062b\u0631\u0647\u0627 \u0646\u0634\u0627\u0637\u064b\u0627\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0630\u0647\u0628 \u0648\u0627\u0644\u0641\u0636\u0629 \u0645\u0646 \u0623\u0642\u0644\u0647\u0627.<\/li>\r\n <li>\u0628\u0639\u0636 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u0627\u062a (\u0645\u062b\u0644 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645 \u0645\u0639 \u0627\u0644\u062d\u0645\u0636) \u0647\u064a \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u062a\u0641\u0627\u0639\u0644\u0627\u062a \u0627\u0644\u0625\u062d\u0644\u0627\u0644\u060c \u062d\u064a\u062b \u064a\u062d\u0644 \u0627\u0644\u0641\u0644\u0632 \u0645\u062d\u0644 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0641\u064a \u0627\u0644\u062d\u0645\u0636.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function() {\r\n \/\/ -------------------- \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a --------------------\r\n const oxygenMetals = {\r\n Na: { name: '\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645', label: '\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645', desc: '\u064a\u0641\u0642\u062f \u0628\u0631\u064a\u0642\u0647 \u0628\u0633\u0631\u0639\u0629 \u0643\u0628\u064a\u0631\u0629 \u0639\u0646\u062f \u062a\u0639\u0631\u0636\u0647 \u0644\u0644\u0647\u0648\u0627\u0621.', eq: '4Na(s) + O\u2082(g) \u2192 2Na\u2082O(s)', before: 'from-gray-300 via-gray-100 to-gray-300', after: '#9ca3af', duration: 2000 },\r\n Ca: { name: '\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645', label: '\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645', desc: '\u064a\u062a\u0641\u0627\u0639\u0644 \u062e\u0644\u0627\u0644 \u062f\u0642\u0627\u0626\u0642 \u0648\u062a\u062a\u0643\u0648\u0646 \u0637\u0628\u0642\u0629 \u0631\u0645\u0627\u062f\u064a\u0629 \u0628\u064a\u0636\u0627\u0621.', eq: '2Ca(s) + O\u2082(g) \u2192 2CaO(s)', before: 'from-gray-400 via-gray-200 to-gray-400', after: '#cbd5e1', duration: 4000 },\r\n Mg: { name: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', label: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', desc: '\u064a\u062d\u062a\u0631\u0642 \u0628\u0644\u0647\u0628 \u0623\u0628\u064a\u0636 \u0645\u0628\u0647\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u0633\u062e\u064a\u0646.', eq: '2Mg(s) + O\u2082(g) \u2192 2MgO(s)', before: 'from-slate-400 via-slate-200 to-slate-400', after: '#ffffff', duration: 3000 },\r\n Al: { name: '\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645', label: '\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645', desc: '\u062a\u062a\u0643\u0648\u0646 \u0637\u0628\u0642\u0629 \u0631\u0642\u064a\u0642\u0629 \u0645\u062a\u0645\u0627\u0633\u0643\u0629 \u062a\u062d\u0645\u064a\u0647 \u0645\u0646 \u0627\u0644\u062a\u0622\u0643\u0644.', eq: '4Al(s) + 3O\u2082(g) \u2192 2Al\u2082O\u2083(s)', before: 'from-blue-100 via-white to-blue-100', after: '#94a3b8', duration: 5000 },\r\n Fe: { name: '\u0627\u0644\u062d\u062f\u064a\u062f', label: '\u0627\u0644\u062d\u062f\u064a\u062f', desc: '\u064a\u0635\u062f\u0623 \u0628\u0628\u0637\u0621 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0631\u0637\u0628 (\u0637\u0628\u0642\u0629 \u0628\u0646\u064a\u0629 \u0647\u0634\u0629).', eq: '4Fe(s) + 3O\u2082(g) \u2192 2Fe\u2082O\u2083(s)', before: 'from-gray-600 via-gray-400 to-gray-600', after: '#b45309', duration: 6000 }\r\n };\r\n\r\n const waterMetals = {\r\n K: { name: '\u0627\u0644\u0628\u0648\u062a\u0627\u0633\u064a\u0648\u0645', symbol: 'K', desc: '\u062a\u0641\u0627\u0639\u0644 \u0639\u0646\u064a\u0641 \u062c\u062f\u0627\u064b \u0645\u0639 \u0641\u0631\u0642\u0639\u0629 \u0648\u0644\u0647\u0628 \u0628\u0646\u0641\u0633\u062c\u064a.', eq: '2K(s) + 2H\u2082O(l) \u2192 2KOH(aq) + H\u2082(g)', flame: '#d8b4fe', ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-purple-200' },\r\n Na: { name: '\u0627\u0644\u0635\u0648\u062f\u064a\u0648\u0645', symbol: 'Na', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639\u060c \u064a\u0646\u0635\u0647\u0631 \u0627\u0644\u0641\u0644\u0632 \u0648\u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d.', eq: '2Na(s) + 2H\u2082O(l) \u2192 2NaOH(aq) + H\u2082(g)', flame: '#facc15', ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-yellow-200' },\r\n Li: { name: '\u0627\u0644\u0644\u064a\u062b\u064a\u0648\u0645', symbol: 'Li', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639\u060c \u064a\u062a\u0635\u0627\u0639\u062f \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646.', eq: '2Li(s) + 2H\u2082O(l) \u2192 2LiOH(aq) + H\u2082(g)', flame: null, ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-slate-200' },\r\n Ca: { name: '\u0627\u0644\u0643\u0627\u0644\u0633\u064a\u0648\u0645', symbol: 'Ca', desc: '\u062a\u0641\u0627\u0639\u0644 \u0648\u0627\u0636\u062d\u060c \u062a\u062a\u0635\u0627\u0639\u062f \u0641\u0642\u0627\u0639\u0627\u062a \u0648\u064a\u063a\u0648\u0635 \u0627\u0644\u0641\u0644\u0632 \u062b\u0645 \u064a\u0637\u0641\u0648.', eq: 'Ca(s) + 2H\u2082O(l) \u2192 Ca(OH)\u2082(aq) + H\u2082(g)', flame: null, ph: '\u0642\u0627\u0639\u062f\u064a (\u0642\u0644\u0648\u064a)', color: 'bg-stone-200' },\r\n Mg: { name: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', symbol: 'Mg', desc: '\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b \u0645\u0639 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0628\u0627\u0631\u062f (\u064a\u0643\u0627\u062f \u0644\u0627 \u064a\u0630\u0643\u0631).', eq: 'Mg(s) + 2H\u2082O(l) \u2192 Mg(OH)\u2082(s) + H\u2082(g)', flame: null, ph: '\u0645\u062a\u0639\u0627\u062f\u0644', color: 'bg-slate-300' }\r\n };\r\n\r\n const acidMetals = {\r\n Mg: { name: '\u0627\u0644\u0645\u063a\u0646\u064a\u0633\u064a\u0648\u0645', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 \u062c\u062f\u0627\u064b\u060c \u0641\u0648\u0631\u0627\u0646 \u0634\u062f\u064a\u062f \u0648\u0627\u062e\u062a\u0641\u0627\u0621 \u0627\u0644\u0641\u0644\u0632.', eq: 'Mg(s) + 2HCl(aq) \u2192 MgCl\u2082(aq) + H\u2082(g)', progress: 'w-full', color: 'bg-slate-200' },\r\n Al: { name: '\u0627\u0644\u0623\u0644\u0645\u0646\u064a\u0648\u0645', desc: '\u062a\u0641\u0627\u0639\u0644 \u0633\u0631\u064a\u0639 (\u0628\u0639\u062f \u0625\u0632\u0627\u0644\u0629 \u0637\u0628\u0642\u0629 \u0627\u0644\u0623\u0643\u0633\u064a\u062f).', eq: '2Al(s) + 6HCl(aq) \u2192 2AlCl\u2083(aq) + 3H\u2082(g)', progress: 'w-3\/4', color: 'bg-gray-300' },\r\n Zn: { name: '\u0627\u0644\u062e\u0627\u0631\u0635\u064a\u0646', desc: '\u062a\u0641\u0627\u0639\u0644 \u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u062a\u0635\u0627\u0639\u062f \u0645\u0646\u062a\u0638\u0645 \u0644\u0644\u063a\u0627\u0632.', eq: 'Zn(s) + 2HCl(aq) \u2192 ZnCl\u2082(aq) + H\u2082(g)', progress: 'w-1\/2', color: 'bg-slate-400' },\r\n Fe: { name: '\u0627\u0644\u062d\u062f\u064a\u062f', desc: '\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u0642\u0644\u064a\u0644\u0629.', eq: 'Fe(s) + 2HCl(aq) \u2192 FeCl\u2082(aq) + H\u2082(g)', progress: 'w-1\/4', color: 'bg-stone-500' },\r\n Pb: { name: '\u0627\u0644\u0631\u0635\u0627\u0635', desc: '\u062a\u0641\u0627\u0639\u0644 \u0628\u0637\u064a\u0621 \u062c\u062f\u0627\u064b\u060c \u0641\u0642\u0627\u0639\u0627\u062a \u0646\u0627\u062f\u0631\u0629.', eq: '-', progress: 'w-[10%]', color: 'bg-slate-600' },\r\n Cu: { name: '\u0627\u0644\u0646\u062d\u0627\u0633', desc: '\u0644\u0627 \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644.', eq: '-', progress: 'w-0', color: 'bg-orange-400' }\r\n };\r\n\r\n \/\/ -------------------- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 --------------------\r\n (function() {\r\n const btns = document.querySelectorAll('#oxygen-metal-btns .metal-btn');\r\n const sample = document.getElementById('oxygen-sample');\r\n const overlay = document.getElementById('oxygen-overlay');\r\n const flame = document.getElementById('oxygen-flame');\r\n const label = document.getElementById('oxygen-label');\r\n const desc = document.getElementById('oxygen-desc');\r\n const eq = document.getElementById('oxygen-equation');\r\n const startBtn = document.getElementById('oxygen-start');\r\n const resetBtn = document.getElementById('oxygen-reset');\r\n const particles = document.getElementById('oxygen-particles');\r\n\r\n let currentMetal = 'Na';\r\n let reacting = false;\r\n let timeout;\r\n\r\n function setMetal(metal) {\r\n if (reacting) return;\r\n currentMetal = metal;\r\n btns.forEach(btn => btn.classList.toggle('active', btn.dataset.metal === metal));\r\n const m = oxygenMetals[metal];\r\n sample.className = `w-full h-full rounded-lg shadow-2xl bg-gradient-to-br ${m.before} relative overflow-hidden`;\r\n overlay.style.backgroundColor = m.after;\r\n overlay.style.opacity = '0';\r\n flame.classList.add('hidden');\r\n particles.classList.add('hidden');\r\n label.innerText = m.label;\r\n desc.innerText = m.desc;\r\n eq.innerText = m.eq;\r\n resetBtn.disabled = true;\r\n }\r\n\r\n btns.forEach(btn => btn.addEventListener('click', () => setMetal(btn.dataset.metal)));\r\n\r\n startBtn.addEventListener('click', () => {\r\n if (reacting) return;\r\n reacting = true;\r\n startBtn.disabled = true;\r\n resetBtn.disabled = false;\r\n particles.classList.remove('hidden');\r\n const m = oxygenMetals[currentMetal];\r\n overlay.style.opacity = '0';\r\n if (currentMetal === 'Mg') flame.classList.remove('hidden');\r\n timeout = setTimeout(() => {\r\n overlay.style.opacity = '1';\r\n flame.classList.add('hidden');\r\n particles.classList.add('hidden');\r\n reacting = false;\r\n startBtn.disabled = false;\r\n }, m.duration);\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n clearTimeout(timeout);\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n overlay.style.opacity = '0';\r\n flame.classList.add('hidden');\r\n particles.classList.add('hidden');\r\n });\r\n\r\n setMetal('Na');\r\n })();\r\n\r\n \/\/ -------------------- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0645\u0627\u0621 --------------------\r\n (function() {\r\n const btns = document.querySelectorAll('#water-metal-btns .metal-btn');\r\n const metalPiece = document.getElementById('water-metal-piece');\r\n const liquid = document.getElementById('water-liquid');\r\n const flame = document.getElementById('water-flame');\r\n const phSpan = document.getElementById('water-ph');\r\n const desc = document.getElementById('water-desc');\r\n const eq = document.getElementById('water-equation');\r\n const startBtn = document.getElementById('water-start');\r\n const resetBtn = document.getElementById('water-reset');\r\n const bubblesContainer = document.getElementById('water-bubbles');\r\n\r\n let currentMetal = 'K';\r\n let reacting = false;\r\n let timeout;\r\n\r\n function clearBubbles() {\r\n while (bubblesContainer.firstChild) bubblesContainer.firstChild.remove();\r\n }\r\n\r\n function setMetal(metal) {\r\n if (reacting) return;\r\n currentMetal = metal;\r\n btns.forEach(btn => btn.classList.toggle('active', btn.dataset.metal === metal));\r\n const m = waterMetals[metal];\r\n metalPiece.innerText = m.symbol;\r\n metalPiece.classList.add('hidden');\r\n flame.classList.add('hidden');\r\n clearBubbles();\r\n liquid.className = `absolute bottom-0 left-0 right-0 h-48 bg-cyan-400\/30 transition-colors duration-1000 rounded-b-2xl`;\r\n phSpan.innerText = '\u0645\u062a\u0639\u0627\u062f\u0644';\r\n phSpan.className = 'px-2 py-1 rounded text-l font-bold bg-cyan-600 text-white';\r\n desc.innerText = m.desc;\r\n eq.innerText = m.eq;\r\n resetBtn.disabled = true;\r\n }\r\n\r\n btns.forEach(btn => btn.addEventListener('click', () => setMetal(btn.dataset.metal)));\r\n\r\n startBtn.addEventListener('click', () => {\r\n if (reacting) return;\r\n reacting = true;\r\n startBtn.disabled = true;\r\n resetBtn.disabled = false;\r\n const m = waterMetals[currentMetal];\r\n metalPiece.classList.remove('hidden');\r\n metalPiece.style.background = m.color;\r\n liquid.className = `absolute bottom-0 left-0 right-0 h-48 bg-purple-500\/40 transition-colors duration-1000 rounded-b-2xl`;\r\n phSpan.innerText = m.ph;\r\n phSpan.className = 'px-2 py-1 rounded text-l font-bold bg-purple-600 text-white';\r\n if (m.flame) {\r\n flame.style.background = `radial-gradient(circle, ${m.flame}, transparent 70%)`;\r\n flame.classList.remove('hidden');\r\n }\r\n clearBubbles();\r\n for (let i = 0; i < 15; i++) {\r\n let bubble = document.createElement('div');\r\n bubble.className = 'bubble';\r\n bubble.style.left = Math.random() * 80 + 10 + '%';\r\n bubble.style.animation = `float-up ${1 + Math.random() * 2}s infinite`;\r\n bubble.style.animationDelay = Math.random() + 's';\r\n bubblesContainer.appendChild(bubble);\r\n }\r\n metalPiece.style.transition = 'top 2s, left 2s';\r\n metalPiece.style.top = '60%';\r\n metalPiece.style.left = '50%';\r\n timeout = setTimeout(() => {\r\n reacting = false;\r\n startBtn.disabled = false;\r\n }, 5000);\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n clearTimeout(timeout);\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n metalPiece.classList.add('hidden');\r\n flame.classList.add('hidden');\r\n clearBubbles();\r\n liquid.className = `absolute bottom-0 left-0 right-0 h-48 bg-cyan-400\/30 transition-colors duration-1000 rounded-b-2xl`;\r\n phSpan.innerText = '\u0645\u062a\u0639\u0627\u062f\u0644';\r\n phSpan.className = 'px-2 py-1 rounded text-l font-bold bg-cyan-600 text-white';\r\n });\r\n\r\n setMetal('K');\r\n })();\r\n\r\n \/\/ -------------------- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062d\u0645\u0636 --------------------\r\n (function() {\r\n const btns = document.querySelectorAll('#acid-metal-btns .metal-btn');\r\n const metalPiece = document.getElementById('acid-metal-piece');\r\n const progress = document.getElementById('acid-progress');\r\n const desc = document.getElementById('acid-desc');\r\n const eq = document.getElementById('acid-equation');\r\n const startBtn = document.getElementById('acid-start');\r\n const resetBtn = document.getElementById('acid-reset');\r\n const bubblesContainer = document.getElementById('acid-bubbles');\r\n\r\n let currentMetal = 'Mg';\r\n let reacting = false;\r\n let timeout;\r\n\r\n function clearBubbles() {\r\n while (bubblesContainer.firstChild) bubblesContainer.firstChild.remove();\r\n }\r\n\r\n function setMetal(metal) {\r\n if (reacting) return;\r\n currentMetal = metal;\r\n btns.forEach(btn => btn.classList.toggle('active', btn.dataset.metal === metal));\r\n const m = acidMetals[metal];\r\n metalPiece.innerText = metal;\r\n metalPiece.classList.add('hidden');\r\n clearBubbles();\r\n progress.className = `progress-fill ${m.progress}`;\r\n desc.innerText = m.desc;\r\n eq.innerText = m.eq;\r\n resetBtn.disabled = true;\r\n }\r\n\r\n btns.forEach(btn => btn.addEventListener('click', () => setMetal(btn.dataset.metal)));\r\n\r\n startBtn.addEventListener('click', () => {\r\n if (reacting) return;\r\n reacting = true;\r\n startBtn.disabled = true;\r\n resetBtn.disabled = false;\r\n const m = acidMetals[currentMetal];\r\n if (currentMetal === 'Cu') {\r\n desc.innerText = '\u0644\u0627 \u064a\u062d\u062f\u062b \u062a\u0641\u0627\u0639\u0644';\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n return;\r\n }\r\n metalPiece.classList.remove('hidden');\r\n metalPiece.style.background = m.color;\r\n let bubbleCount = 0;\r\n if (m.progress === 'w-full') bubbleCount = 20;\r\n else if (m.progress === 'w-3\/4') bubbleCount = 15;\r\n else if (m.progress === 'w-1\/2') bubbleCount = 10;\r\n else if (m.progress === 'w-1\/4') bubbleCount = 5;\r\n else if (m.progress === 'w-[10%]') bubbleCount = 2;\r\n clearBubbles();\r\n for (let i = 0; i < bubbleCount; i++) {\r\n let bubble = document.createElement('div');\r\n bubble.className = 'bubble';\r\n bubble.style.left = Math.random() * 80 + 10 + '%';\r\n bubble.style.animation = `float-up ${0.8 + Math.random()}s infinite`;\r\n bubble.style.animationDelay = Math.random() + 's';\r\n bubblesContainer.appendChild(bubble);\r\n }\r\n let duration = 3000;\r\n if (currentMetal === 'Mg') duration = 2000;\r\n else if (currentMetal === 'Al') duration = 3000;\r\n else if (currentMetal === 'Zn') duration = 4000;\r\n else if (currentMetal === 'Fe') duration = 5000;\r\n else if (currentMetal === 'Pb') duration = 6000;\r\n timeout = setTimeout(() => {\r\n metalPiece.classList.add('hidden');\r\n clearBubbles();\r\n reacting = false;\r\n startBtn.disabled = false;\r\n }, duration);\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n clearTimeout(timeout);\r\n reacting = false;\r\n startBtn.disabled = false;\r\n resetBtn.disabled = true;\r\n metalPiece.classList.add('hidden');\r\n clearBubbles();\r\n });\r\n\r\n setMetal('Mg');\r\n })();\r\n})();\r\n<\/script>\r\n\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-17567","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17567","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=17567"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17567\/revisions"}],"predecessor-version":[{"id":17569,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17567\/revisions\/17569"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}