\u062f\u0631\u0633 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700&display=swap');\n * {\n font-family: 'Cairo', sans-serif;\n }\n \n \/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\n input[type=\"range\"] {\n -webkit-appearance: none;\n height: 6px;\n border-radius: 5px;\n background: #374151;\n outline: none;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: 2px solid #7c3aed;\n }\n \n input[type=\"range\"]::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: 2px solid #7c3aed;\n }\n \n \/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u0633\u062f\u0644\u0629 *\/\n select {\n background-color: #374151;\n color: white;\n border: 1px solid #4b5563;\n border-radius: 0.375rem;\n padding: 0.5rem;\n cursor: pointer;\n }\n \n select:focus {\n outline: none;\n ring: 2px solid #a78bfa;\n }\n \n \/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0627\u0644\u0640 canvas *\/\n canvas {\n display: block;\n margin: 0 auto;\n background-color: rgba(15, 23, 42, 0.5);\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-900 text-white min-h-screen p-4\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"space-y-4 text-right\" dir=\"rtl\">\n <h1 class=\"text-2xl sm:text-3xl font-bold text-purple-300 mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629<\/h1>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631:<\/strong> \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629.<\/li>\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/strong> \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647.<\/li>\n <li><strong class=\"text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627:<\/strong> \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647 \u0631\u063a\u0645 \u0627\u062e\u062a\u0644\u0627\u0641 \u062a\u0631\u0643\u064a\u0628\u0647\u0627.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u0641\u062a\u0631\u0636 \u0647\u0630\u0647 \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0623\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li>\u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0627\u0644\u0635\u063a\u0631 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u062c\u062f\u064b\u0627 (\u0645\u0639\u0638\u0645 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0641\u0631\u0627\u063a).<\/li>\n <li>\u062a\u062a\u062d\u0631\u0643 \u0628\u0634\u0643\u0644 \u0639\u0634\u0648\u0627\u0626\u064a \u0648\u0633\u0631\u064a\u0639 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a.<\/li>\n <li>\u062a\u062a\u0635\u0627\u062f\u0645 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0631\u0646\u0629 (\u0644\u0627 \u0641\u0642\u062f\u0627\u0646 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0644\u064a\u0629).<\/li>\n <li>\u0637\u0627\u0642\u062a\u0647\u0627 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0641\u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <\/ul>\n <p class=\"mt-2 text-slate-400 text-xs sm:text-sm\">\u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0648\u0636 \u062a\u0641\u0633\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 \u0648\u0627\u0644\u0636\u063a\u0637.<\/p>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a vs. \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-purple-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a<\/h3>\n <p class=\"text-sm\">\u063a\u0627\u0632 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u064a\u062d\u0642\u0642 \u062c\u0645\u064a\u0639 \u0628\u0646\u0648\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 (\u062d\u062c\u0645 \u062c\u0632\u064a\u0626\u0627\u062a\u0647 \u0635\u0641\u0631\u060c \u0648\u0644\u0627 \u062a\u0648\u062c\u062f \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646\u0647\u0627).<\/p>\n <\/div>\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-teal-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n <p class=\"text-sm\">\u064a\u062d\u064a\u062f \u0639\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0639\u0646\u062f:<\/p>\n <ul class=\"list-disc list-inside text-xs mt-1 text-slate-300\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <li><strong>\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u0644\u0627 \u062a\u062a\u063a\u0644\u0628 \u0639\u0644\u0649 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <p class=\"mt-3 bg-blue-900\/20 p-2 rounded border-r-4 border-blue-500 text-slate-300 text-sm\">\n <strong class=\"text-blue-300\">\u0645\u062b\u0627\u0644:<\/strong> \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 \u064a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u063a\u0627\u0632 \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 NH\u2083 \u064a\u062d\u064a\u062f \u0639\u0646\u0647 \u0628\u0633\u0628\u0628 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0627\u0644\u0642\u0648\u064a\u0629.\n <\/p>\n <\/section>\n\n \n <div id=\"gas-simulation-container\"><\/div>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0635\u0641 \u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u060c \u0648\u064a\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a. \u064a\u0646\u0634\u0623 \u0636\u063a\u0637 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646 \u062a\u0635\u0627\u062f\u0645 \u062c\u0633\u064a\u0645\u0627\u062a\u0647 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647.<\/p>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">\u0648\u062d\u062f\u0627\u062a \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646\u0647\u0627<\/h3>\n <p class=\"mb-2 text-sm text-slate-300\">\u064a\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0648\u0646 \u0639\u062f\u0629 \u0648\u062d\u062f\u0627\u062a \u0644\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm mb-4\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (Atmosphere):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">atm<\/code>.<\/li>\n <li><strong>\u0645\u0644\u064a\u0645\u062a\u0631 \u0632\u0626\u0628\u0642 (Millimeter of mercury):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">mmHg<\/code>.<\/li>\n <li><strong>\u062a\u0648\u0631 (Torr):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">torr<\/code>.<\/li>\n <li><strong>\u0628\u0627\u0633\u0643\u0627\u0644 (Pascal):<\/strong> \u0648\u0647\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 (SI)\u060c \u0648\u064a\u0631\u0645\u0632 \u0644\u0647\u0627 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">Pa<\/code>.<\/li>\n <\/ul>\n \n <div class=\"bg-black\/20 p-3 rounded-lg border border-white\/10\">\n <h4 class=\"text-base font-semibold text-white mb-2 text-center\">\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h4>\n <div class=\"font-mono text-center text-yellow-200 space-y-1 text-sm sm:text-base\" dir=\"ltr\">\n <p>1 atm = 760 mmHg<\/p>\n <p>1 mmHg = 1 torr<\/p>\n <p>1 atm = 101325 Pa = 101.325 kPa<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-2 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n <\/h4>\n <div class=\"space-y-3\">\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 1:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 1.5 atm \u0625\u0644\u0649 mmHg.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (mmHg) = 1.5 atm \u00d7 (760 mmHg \/ 1 atm)<\/p>\n <p>Pressure (mmHg) = 1140 mmHg<\/p>\n <\/div>\n <\/div>\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 2:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 95 kPa \u0625\u0644\u0649 atm.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (atm) = 95 kPa \u00d7 (1 atm \/ 101.325 kPa)<\/p>\n <p>Pressure (atm) \u2248 0.938 atm<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a (Gas Laws)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0647\u064a \u0639\u0644\u0627\u0642\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (P)\u060c \u0627\u0644\u062d\u062c\u0645 (V)\u060c \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (T)\u060c \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a (n).<\/p>\n\n <div class=\"space-y-6\">\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">1. \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 (Boyle’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \u00d7 V\u2081 = P\u2082 \u00d7 V\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u062a\u0642\u0644\u0644 \u0627\u0644\u062d\u062c\u0645 \u0628\u0633\u0628\u0628 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0648\u0639\u0627\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 5.6 \u0644\u062a\u0631 \u0645\u0646 \u063a\u0627\u0632 \u0639\u0646\u062f \u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0625\u0630\u0627 \u0627\u0631\u062a\u0641\u0639 \u0627\u0644\u0636\u063a\u0637 \u0625\u0644\u0649 4.5 \u0636\u063a\u0637 \u062c\u0648\u064a \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081 = 1.5 atm, V\u2081 = 5.6 L<br>\n 2. P\u2082 = 4.5 atm, V\u2082 = ?<br>\n 3. P\u2081V\u2081 = P\u2082V\u2082 => V\u2082 = (P\u2081V\u2081) \/ P\u2082<br>\n 4. V\u2082 = (1.5 atm \u00d7 5.6 L) \/ 4.5 atm<br>\n 5. V\u2082 \u2248 1.87 L\n <\/div>\n <\/div>\n \n <div id=\"boyle-law-simulation-container\"><\/div>\n \n <div id=\"boyle-law-graph-container\"><\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">2. \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644 (Charles’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ T\u2081 = V\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 (\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0627\u0644\u0643\u0644\u0641\u0646).<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u062a\u0645\u062f\u062f \u0627\u0644\u063a\u0627\u0632.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0628\u0627\u0644\u0648\u0646 \u062d\u062c\u0645\u0647 2 \u0644\u062a\u0631 \u0639\u0646\u062f 25\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647 \u0625\u0630\u0627 \u0633\u062e\u0646 \u0625\u0644\u0649 50\u00b0C \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 25 + 273 = 298 K, V\u2081 = 2 L<br>\n 2. T\u2082 = 50 + 273 = 323 K, V\u2082 = ?<br>\n 3. V\u2081\/T\u2081 = V\u2082\/T\u2082 => V\u2082 = (V\u2081T\u2082) \/ T\u2081<br>\n 4. V\u2082 = (2 L \u00d7 323 K) \/ 298 K<br>\n 5. V\u2082 \u2248 2.17 L\n <\/div>\n <\/div>\n \n <div id=\"charles-law-simulation-container\"><\/div>\n \n <div id=\"charles-law-graph-container\"><\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">3. \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643 (Gay-Lussac’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u0636\u063a\u0637 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \/ T\u2081 = P\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0637\u0627\u0631 \u0633\u064a\u0627\u0631\u0629 \u0636\u063a\u0637\u0647 2.2 \u0636\u063a\u0637 \u062c\u0648\u064a \u0639\u0646\u062f 15\u00b0C. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0628\u0639\u062f \u0631\u062d\u0644\u0629 \u0637\u0648\u064a\u0644\u0629 \u0625\u0630\u0627 \u0623\u0635\u0628\u062d\u062a \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 40\u00b0C\u061f (\u0628\u0627\u0641\u062a\u0631\u0627\u0636 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u062c\u0645)<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 15 + 273 = 288 K, P\u2081 = 2.2 atm<br>\n 2. T\u2082 = 40 + 273 = 313 K, P\u2082 = ?<br>\n 3. P\u2081\/T\u2081 = P\u2082\/T\u2082 => P\u2082 = (P\u2081T\u2082) \/ T\u2081<br>\n 4. P\u2082 = (2.2 atm \u00d7 313 K) \/ 288 K<br>\n 5. P\u2082 \u2248 2.39 atm\n <\/div>\n <\/div>\n \n <div id=\"gay-lussac-law-simulation-container\"><\/div>\n \n <div id=\"gay-lussac-law-graph-container\"><\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">4. \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0627\u0645\u0639 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">(P\u2081 \u00d7 V\u2081) \/ T\u2081 = (P\u2082 \u00d7 V\u2082) \/ T\u2082<\/div>\n <p class=\"text-slate-300 text-sm mb-3\">\u064a\u062c\u0645\u0639 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632.<\/p>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u062d\u062c\u0645\u0647\u0627 10 \u0644\u062a\u0631 \u0639\u0646\u062f \u0636\u063a\u0637 1 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 27\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP: 1 atm, 0\u00b0C)\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081=1 atm, V\u2081=10 L, T\u2081=27+273=300 K<br>\n 2. P\u2082=1 atm, T\u2082=0+273=273 K, V\u2082=?<br>\n 3. (P\u2081V\u2081)\/T\u2081 = (P\u2082V\u2082)\/T\u2082 => V\u2082 = (P\u2081V\u2081T\u2082) \/ (P\u2082T\u2081)<br>\n 4. V\u2082 = (1 atm \u00d7 10 L \u00d7 273 K) \/ (1 atm \u00d7 300 K)<br>\n 5. V\u2082 = 9.1 L\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">5. \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648 (Avogadro’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0648\u0645 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a (\u0627\u0644\u0645\u0648\u0644\u0627\u062a) \u062a\u0643\u0648\u0646 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ n\u2081 = V\u2082 \/ n\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a.<\/li>\n <li><strong>\u0645\u0644\u062d\u0648\u0638\u0629:<\/strong> \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u0648\u0644\u064a \u0644\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP)\u060c \u0648\u0647\u064a <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">0\u00b0C (273 K)<\/code> \u0648 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">1 atm<\/code>\u060c \u0647\u0648 22.4 \u0644\u062a\u0631\/\u0645\u0648\u0644.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0630\u0627 \u0643\u0627\u0646 2 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u064a\u0634\u063a\u0644 \u062d\u062c\u0645\u064b\u0627 \u0642\u062f\u0631\u0647 44.8 \u0644\u062a\u0631\u060c \u0641\u0645\u0627 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0630\u064a \u064a\u0634\u063a\u0644\u0647 3 \u0645\u0648\u0644 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. n\u2081 = 2 mol, V\u2081 = 44.8 L<br>\n 2. n\u2082 = 3 mol, V\u2082 = ?<br>\n 3. V\u2081\/n\u2081 = V\u2082\/n\u2082 => V\u2082 = (V\u2081n\u2082) \/ n\u2081<br>\n 4. V\u2082 = (44.8 L \u00d7 3 mol) \/ 2 mol<br>\n 5. V\u2082 = 67.2 L\n <\/div>\n <\/div>\n \n <div id=\"avogadro-law-simulation-container\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Gas Law)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u062c\u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0645\u064a\u0639 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632 (P, V, T, n) \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0635\u0641 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0648\u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0627\u062f\u0629.<\/p>\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 text-center relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\"><\/div>\n <p class=\"text-3xl font-mono font-bold text-white mb-4 tracking-widest\" dir=\"ltr\">PV = nRT<\/p>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs sm:text-sm\">\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">P<\/strong> \u0627\u0644\u0636\u063a\u0637<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">V<\/strong> \u0627\u0644\u062d\u062c\u0645<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">n<\/strong> \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">T<\/strong> \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/div>\n <\/div>\n <div class=\"mt-4 pt-3 border-t border-white\/10 text-xs sm:text-sm\">\n <strong class=\"text-indigo-300\">R (\u0627\u0644\u062b\u0627\u0628\u062a \u0627\u0644\u0639\u0627\u0645):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">0.0821 L\u00b7atm\/mol\u00b7K<\/span>\n <span class=\"mx-2\">|<\/span>\n <strong class=\"text-indigo-300\">T (\u0628\u0627\u0644\u0643\u0644\u0641\u0646):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">\u00b0C + 273<\/span>\n <\/div>\n <\/div>\n \n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0627\u062d\u0633\u0628 \u0636\u063a\u0637 0.45 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0641\u064a \u0648\u0639\u0627\u0621 \u062d\u062c\u0645\u0647 1.5 \u0644\u062a\u0631 \u0639\u0646\u062f 20\u00b0C.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T = 20 + 273 = 293 K<br>\n 2. P = nRT \/ V<br>\n 3. P = (0.45 \u00d7 0.0821 \u00d7 293) \/ 1.5<br>\n 4. P \u2248 7.2 atm\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h2>\n <div class=\"mb-3\">\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u064a\u0646\u0635 \u0639\u0644\u0649:<\/strong> \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u062e\u0644\u064a\u0637 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u064a\u0633\u0627\u0648\u064a \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632.<\/p>\n <p class=\"font-mono text-yellow-300 text-center text-lg bg-white\/5 p-2 rounded-lg\" dir=\"ltr\">P_Total = P_A + P_B + P_C + …<\/p>\n <p class=\"text-xs text-slate-400 mt-1\"><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a:<\/strong> \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0630\u064a \u064a\u0624\u062b\u0631 \u0628\u0647 \u0627\u0644\u063a\u0627\u0632 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0637 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u064a\u0634\u063a\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0648\u062d\u062f\u0647.<\/p>\n <\/div>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u064a\u062d\u062a\u0648\u064a \u0648\u0639\u0627\u0621 \u0639\u0644\u0649 \u062e\u0644\u064a\u0637 \u0645\u0646 \u063a\u0627\u0632\u064a \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 0.78 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 0.21 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0639\u0627\u0621\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n P_Total = P_Nitrogen + P_Oxygen<br>\n P_Total = 0.78 atm + 0.21 atm<br>\n P_Total = 0.99 atm\n <\/div>\n <\/div>\n \n <div id=\"dalton-law-simulation-container\"><\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 (Diffusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0627\u062e\u062a\u0644\u0627\u0637 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u0628\u0639\u0636\u0647\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0639\u0637\u0631).<\/p>\n <\/div>\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u062a\u062f\u0641\u0642 (Effusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0645\u0631\u0648\u0631 \u0627\u0644\u063a\u0627\u0632 \u0639\u0628\u0631 \u0641\u062a\u062d\u0629 \u0635\u063a\u064a\u0631\u0629 (\u0645\u062b\u0644 \u062a\u0633\u0631\u0628 \u0627\u0644\u0647\u0648\u0627\u0621).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\n <h3 class=\"text-base font-bold text-purple-300 mb-1\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 (Graham’s Law)<\/h3>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u063a\u0627\u0632 \u062a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u062c\u0630\u0631 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0644\u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629.<\/p>\n <div class=\"my-2 text-center bg-black\/20 p-2 rounded\">\n <span class=\"font-mono text-base text-yellow-300\" dir=\"ltr\">Rate A \/ Rate B = \u221a(Molar Mass B \/ Molar Mass A)<\/span>\n <\/div>\n <p class=\"text-xs text-slate-400 italic\">\u0645\u062b\u0627\u0644: H\u2082 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639 \u0645\u0646 O\u2082 \u0644\u0623\u0646 \u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0623\u0635\u063a\u0631.<\/p>\n <\/div>\n \n <div id=\"graham-law-simulation-container\"><\/div>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-sm\">\n <li>\u062a\u0641\u0633\u0631 <span class=\"text-purple-300\">\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629<\/span> \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a.<\/li>\n <li><span class=\"text-purple-300\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/span> \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 P, V, T, n.<\/li>\n <li>\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0648<span class=\"text-teal-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629<\/span> \u062a\u062d\u064a\u062f \u0639\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629.<\/li>\n <li>\u064a\u0633\u062a\u062e\u062f\u0645 <span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/span> \u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062e\u0644\u064a\u0637\u060c \u0648<span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/span> \u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631.<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <div>\n <p class=\"font-bold mb-1\">1. (\u062a\u0641\u0643\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645\u064a): \u0644\u0645\u0627\u0630\u0627 \u064a\u0646\u0643\u0645\u0634 \u0628\u0627\u0644\u0648\u0646 \u0645\u0646\u0641\u0648\u062e \u0639\u0646\u062f \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062b\u0644\u0627\u062c\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0648\u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 (\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644).<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">2. (\u062d\u0633\u0627\u0628\u0627\u062a): \u0625\u0630\u0627 \u0643\u0627\u0646 \u062d\u062c\u0645 \u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 200 \u0645\u0644 \u0639\u0646\u062f \u0636\u063a\u0637 1.0 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0636\u063a\u0637\u0647\u0627 \u0625\u0630\u0627 \u062a\u0645 \u0636\u063a\u0637\u0647\u0627 \u0625\u0644\u0649 \u062d\u062c\u0645 100 \u0645\u0644 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u062b\u0627\u0628\u062a\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 P\u2081V\u2081 = P\u2082V\u2082.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">3. (\u062a\u0641\u0643\u064a\u0631 \u0646\u0642\u062f\u064a): \u0623\u064a \u0627\u0644\u063a\u0627\u0632\u064a\u0646 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639\u060c \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 (He) \u0623\u0645 \u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 (CO\u2082)\u060c \u0648\u0644\u0645\u0627\u0630\u0627\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0631\u062c\u0639 \u0625\u0644\u0649 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0648\u0642\u0627\u0631\u0646 \u0627\u0644\u0643\u062a\u0644 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u064a\u0646.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">4. (\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629): \u0627\u062d\u0633\u0628 \u062d\u062c\u0645 16 \u062c\u0631\u0627\u0645\u064b\u0627 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082) \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 25\u00b0C \u0648\u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. (\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082 \u2248 32 g\/mol)<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a PV=nRT. \u0644\u0627 \u062a\u0646\u0633 \u062a\u062d\u0648\u064a\u0644 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u0643\u0644\u0641\u0646 \u0648\u062d\u0633\u0627\u0628 \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a \u0623\u0648\u0644\u0627\u064b.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"bg-yellow-900\/20 p-4 rounded-xl border-l-4 border-yellow-400 mt-6\">\n <h2 class=\"text-xl font-semibold text-yellow-300 mb-3 flex items-center gap-2\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.311a7.5 7.5 0 0 1-7.5 0c-1.421-.62-2.8-1.5-3.995-2.582a9.753 9.753 0 0 1-2.28-4.117c-.164-1.03-.164-2.07 0-3.1a9.753 9.753 0 0 1 2.28-4.117c1.195-1.082 2.574-1.962 3.995-2.582a7.5 7.5 0 0 1 7.5 0c1.421.62 2.8 1.5 3.995 2.582a9.753 9.753 0 0 1 2.28 4.117c.164 1.03.164 2.07 0 3.1a9.753 9.753 0 0 1-2.28 4.117c-1.195-1.082-2.574-1.962-3.995-2.582Z\"><\/path>\n <\/svg>\n <span>\u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/span>\n <\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-sm\">\n <li><strong>\u0627\u062d\u0641\u0638 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0648\u062a\u062d\u0648\u064a\u0644\u0627\u062a\u0647\u0627:<\/strong> \u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646 atm, mmHg, kPa \u0623\u0633\u0627\u0633\u064a \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644.<\/li>\n <li><strong>\u062a\u062f\u0631\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629:<\/strong> \u0644\u0643\u0644 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0632 \u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u060c \u0648\u0627\u0644\u062a\u0645\u0631\u064a\u0646 \u0647\u0648 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646.<\/li>\n <li><strong>\u0627\u0641\u0647\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0644\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u062d\u0641\u0638 \u0641\u0642\u0637:<\/strong> \u0627\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0633\u0644\u0648\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629.<\/li>\n <li><strong>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\u0629 \u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a:<\/strong> \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u064a\u0648\u0636\u062d \u0627\u0644\u0639\u0644\u0627\u0642\u0629 (\u0637\u0631\u062f\u064a\u0629 \u0623\u0645 \u0639\u0643\u0633\u064a\u0629) \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629.<\/li>\n <\/ul>\n <\/section>\n\n <\/div>\n <\/div>\n \n \n <script>\n \/\/ =============================================\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629\n \/\/ =============================================\n function createGasSimulation() {\n const container = document.getElementById('gas-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <button id=\"gas-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex justify-center mb-4\">\n <canvas id=\"gas-canvas\" width=\"450\" height=\"300\" class=\"rounded-md w-full max-w-[450px]\"><\/canvas>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6\">\n <div class=\"flex flex-col items-center\">\n <label class=\"font-semibold mb-2 text-slate-300\">\u0646\u0648\u0639 \u0627\u0644\u063a\u0627\u0632<\/label>\n <div class=\"flex gap-2 p-1 bg-slate-700\/50 rounded-lg\">\n <button id=\"gas-ideal-btn\" class=\"px-3 py-1 text-sm rounded-md transition-colors bg-purple-600 text-white shadow-md\">\u0645\u062b\u0627\u0644\u064a<\/button>\n <button id=\"gas-real-btn\" class=\"px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50\">\u062d\u0642\u064a\u0642\u064a<\/button>\n <\/div>\n <\/div>\n <div class=\"flex flex-col\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center text-sm\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"temp-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"temperature-slider\" min=\"1\" max=\"10\" step=\"1\" value=\"5\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"temp-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"flex flex-col\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center text-sm\">\u0627\u0644\u0636\u063a\u0637 (\u0639\u0628\u0631 \u0627\u0644\u062d\u062c\u0645)<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"pressure-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"pressure-slider\" min=\"1\" max=\"10\" step=\"1\" value=\"3\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"pressure-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-6 text-sm text-center text-slate-400 p-3 bg-slate-800\/30 rounded-md\">\n <p><span class=\"font-bold text-purple-300\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a:<\/span> \u062c\u0633\u064a\u0645\u0627\u062a \u0646\u0642\u0637\u064a\u0629 \u0645\u0647\u0645\u0644\u0629 \u0627\u0644\u062d\u062c\u0645\u060c \u0644\u0627 \u062a\u062a\u062c\u0627\u0630\u0628\u060c \u0648\u062a\u0635\u0627\u062f\u0645\u0627\u062a\u0647\u0627 \u0645\u0631\u0646\u0629.<\/p>\n <p class=\"mt-1\"><span class=\"font-bold text-teal-300\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a:<\/span> \u062c\u0633\u064a\u0645\u0627\u062a \u0644\u0647\u0627 \u062d\u062c\u0645\u060c \u0648\u062a\u0638\u0647\u0631 \u0628\u064a\u0646\u0647\u0627 \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0639\u0646\u062f \u0627\u0646\u062e\u0641\u0627\u0636 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0636\u063a\u0637.<\/p>\n <p class=\"mt-2 text-xs text-slate-500\">\u062c\u0631\u0651\u0628 \u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0644\u0645\u0644\u0627\u062d\u0638\u0629 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/p>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n const canvas = document.getElementById('gas-canvas');\n const ctx = canvas.getContext('2d');\n let gasType = 'ideal';\n let temperature = 5;\n let pressure = 3;\n const width = canvas.width;\n const height = 300;\n const numParticles = 60;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, x, y, vx, vy, radius, color) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n this.color = color;\n }\n }\n \n function resetParticles() {\n particles = [];\n for (let i = 0; i < numParticles; i++) {\n particles.push(new Particle(\n i,\n Math.random() * width,\n Math.random() * height,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n gasType === 'ideal' ? 2 : 5,\n gasType === 'ideal' ? '#a78bfa' : '#2dd4bf'\n ));\n }\n }\n \n function updateParticleProperties() {\n particles.forEach(p => {\n p.radius = gasType === 'ideal' ? 2 : 5;\n p.color = gasType === 'ideal' ? '#a78bfa' : '#2dd4bf';\n });\n }\n \n function render() {\n const currentHeight = height * (1 - (pressure - 1) \/ 12);\n ctx.clearRect(0, 0, width, height);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, 0, width, currentHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, width, height);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, currentHeight - 2, width + 2, 4);\n \n const speedMultiplier = Math.max(0.1, temperature \/ 5);\n \n particles.forEach((p, i) => {\n p.x += p.vx * speedMultiplier;\n p.y += p.vy * speedMultiplier;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > width) { p.x = width - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > currentHeight) { p.y = currentHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0644\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\n if (gasType === 'real' && temperature < 4 && pressure > 6) {\n for (let j = i + 1; j < particles.length; j++) {\n const other = particles[j];\n const dx = other.x - p.x;\n const dy = other.y - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const attractionRange = 40;\n \n if (dist < attractionRange) {\n const force = 0.005 * (1 - dist \/ attractionRange);\n const ax = force * dx \/ dist;\n const ay = force * dy \/ dist;\n p.vx += ax;\n p.vy += ay;\n other.vx -= ax;\n other.vy -= ay;\n }\n }\n }\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u0639 \u0628\u0639\u0636\u0647\u0627\n for (let j = i + 1; j < particles.length; j++) {\n const other = particles[j];\n const dx = other.x - p.x;\n const dy = other.y - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const minDist = p.radius + other.radius;\n if (dist < minDist) {\n const angle = Math.atan2(dy, dx);\n const targetX = p.x + Math.cos(angle) * minDist;\n const targetY = p.y + Math.sin(angle) * minDist;\n const ax = (targetX - other.x) * 0.1;\n const ay = (targetY - other.y) * 0.1;\n p.vx -= ax;\n p.vy -= ay;\n other.vx += ax;\n other.vy += ay;\n }\n }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = p.color;\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\n resetParticles();\n render();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('gas-ideal-btn').addEventListener('click', () => {\n gasType = 'ideal';\n document.getElementById('gas-ideal-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors bg-purple-600 text-white shadow-md';\n document.getElementById('gas-real-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50';\n updateParticleProperties();\n });\n \n document.getElementById('gas-real-btn').addEventListener('click', () => {\n gasType = 'real';\n document.getElementById('gas-ideal-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50';\n document.getElementById('gas-real-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors bg-teal-600 text-white shadow-md';\n updateParticleProperties();\n });\n \n document.getElementById('temperature-slider').addEventListener('input', (e) => {\n temperature = parseInt(e.target.value);\n });\n \n document.getElementById('pressure-slider').addEventListener('input', (e) => {\n pressure = parseInt(e.target.value);\n });\n \n document.getElementById('temp-decrease-btn').addEventListener('click', () => {\n temperature = Math.max(1, temperature - 1);\n document.getElementById('temperature-slider').value = temperature;\n });\n \n document.getElementById('temp-increase-btn').addEventListener('click', () => {\n temperature = Math.min(10, temperature + 1);\n document.getElementById('temperature-slider').value = temperature;\n });\n \n document.getElementById('pressure-decrease-btn').addEventListener('click', () => {\n pressure = Math.max(1, pressure - 1);\n document.getElementById('pressure-slider').value = pressure;\n });\n \n document.getElementById('pressure-increase-btn').addEventListener('click', () => {\n pressure = Math.min(10, pressure + 1);\n document.getElementById('pressure-slider').value = pressure;\n });\n \n document.getElementById('gas-reset-btn').addEventListener('click', () => {\n gasType = 'ideal';\n temperature = 5;\n pressure = 3;\n document.getElementById('temperature-slider').value = temperature;\n document.getElementById('pressure-slider').value = pressure;\n document.getElementById('gas-ideal-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors bg-purple-600 text-white shadow-md';\n document.getElementById('gas-real-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50';\n resetParticles();\n });\n }\n \n \/\/ =============================================\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644\n \/\/ =============================================\n function createBoyleLawSimulation() {\n const container = document.getElementById('boyle-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <button id=\"boyle-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas id=\"boyle-canvas\" width=\"350\" height=\"280\" class=\"rounded-md\"><\/canvas>\n <div id=\"boyle-pressure-gauge\"><\/div>\n <\/div>\n <div class=\"w-full max-w-md mx-auto mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u062d\u062c\u0645 \u0627\u0644\u0645\u0643\u0628\u0633<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"boyle-volume-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"boyle-volume-slider\" min=\"2\" max=\"10\" step=\"0.1\" value=\"7\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"boyle-volume-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div class=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span id=\"boyle-volume-value\">\u0627\u0644\u062d\u062c\u0645: 7.0<\/span>\n <span id=\"boyle-pressure-value\">\u0627\u0644\u0636\u063a\u0637: 14.3<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u062d\u0631\u0643 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0644\u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u062c\u0645. \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u062a\u0632\u062f\u0627\u062f \u0627\u0635\u0637\u062f\u0627\u0645\u0627\u062a \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\n function createPressureGauge(pressure, maxPressure) {\n const gaugeContainer = document.getElementById('boyle-pressure-gauge');\n const height = 150;\n const width = 30;\n const paddingTop = 10;\n const paddingBottom = 10;\n const fillableHeight = height - paddingTop - paddingBottom;\n \n const pressureRatio = Math.min(pressure \/ maxPressure, 1);\n const fillHeight = fillableHeight * pressureRatio;\n \n const r = Math.floor(255 * pressureRatio);\n const g = Math.floor(255 * (1 - pressureRatio));\n const fillColor = `rgb(${r}, ${g}, 80)`;\n \n gaugeContainer.innerHTML = `\n <div class=\"flex flex-col items-center\">\n <svg width=\"${width}\" height=\"${height}\" class=\"bg-slate-700\/50 rounded-lg\">\n <rect x=\"0\" y=\"${height - paddingBottom - fillHeight}\" width=\"${width}\" height=\"${fillHeight}\" fill=\"${fillColor}\" class=\"transition-all duration-200\"><\/rect>\n <\/svg>\n <span class=\"text-xs mt-1 text-slate-400\">\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637<\/span>\n <\/div>\n `;\n }\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('boyle-canvas');\n const ctx = canvas.getContext('2d');\n let volume = 7;\n const containerWidth = 350;\n const containerHeight = 280;\n const numParticles = 40;\n const k = 100;\n const minVolume = 2;\n const maxVolume = 10;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, x, y, vx, vy, radius) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n }\n }\n \n function initParticles() {\n particles = [];\n for (let i = 0; i < numParticles; i++) {\n particles.push(new Particle(\n i,\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3\n ));\n }\n }\n \n function updateSimulation() {\n const pressure = k \/ volume;\n const maxPressure = k \/ minVolume;\n \n document.getElementById('boyle-volume-value').textContent = `\u0627\u0644\u062d\u062c\u0645: ${volume.toFixed(1)}`;\n document.getElementById('boyle-pressure-value').textContent = `\u0627\u0644\u0636\u063a\u0637: ${pressure.toFixed(1)}`;\n createPressureGauge(pressure, maxPressure);\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n const pistonHeight = containerHeight * (volume \/ maxVolume);\n \n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, 0, containerWidth, pistonHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, pistonHeight - 2, containerWidth + 2, 4);\n \n particles.forEach(p => {\n p.x += p.vx;\n p.y += p.vy;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > pistonHeight) { p.y = pistonHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#c4b5fd';\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n initParticles();\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('boyle-volume-slider').addEventListener('input', (e) => {\n volume = parseFloat(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('boyle-volume-decrease-btn').addEventListener('click', () => {\n volume = Math.max(minVolume, parseFloat((volume - 0.5).toFixed(1)));\n document.getElementById('boyle-volume-slider').value = volume;\n updateSimulation();\n });\n \n document.getElementById('boyle-volume-increase-btn').addEventListener('click', () => {\n volume = Math.min(maxVolume, parseFloat((volume + 0.5).toFixed(1)));\n document.getElementById('boyle-volume-slider').value = volume;\n updateSimulation();\n });\n \n document.getElementById('boyle-reset-btn').addEventListener('click', () => {\n volume = 7;\n document.getElementById('boyle-volume-slider').value = volume;\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 3. \u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644\n \/\/ =============================================\n function createBoyleLawGraph() {\n const container = document.getElementById('boyle-law-graph-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 class=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <svg id=\"boyle-graph\" width=\"100%\" height=\"300\" viewBox=\"0 0 400 300\"><\/svg>\n <div class=\"w-full max-w-sm mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u062d\u062c\u0645<\/label>\n <input type=\"range\" id=\"boyle-graph-slider\" min=\"1\" max=\"10\" step=\"0.1\" value=\"5\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <div class=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span id=\"boyle-graph-volume\">\u0627\u0644\u062d\u062c\u0645: 5.0 \u0644\u062a\u0631<\/span>\n <span id=\"boyle-graph-pressure\">\u0627\u0644\u0636\u063a\u0637: 8.0 \u0636\u063a\u0637 \u062c\u0648\u064a<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637 \u0628\u0634\u0643\u0644 \u0639\u0643\u0633\u064a \u0645\u0639 \u062a\u063a\u064a\u0631 \u0627\u0644\u062d\u062c\u0645 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.\n <\/p>\n <\/div>\n `;\n \n const k = 40;\n let volume = 5;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = 10;\n const maxPressure = k \/ 1;\n \n const svg = document.getElementById('boyle-graph');\n \n function getX(v) {\n return padding + ((v - 1) \/ (maxVolume - 1)) * (width - 2 * padding);\n }\n \n function getY(p) {\n return height - padding - (p \/ maxPressure) * (height - 2 * padding);\n }\n \n function createPathData() {\n let path = `M ${getX(1)} ${getY(k \/ 1)}`;\n for (let v = 1.1; v <= maxVolume; v += 0.1) {\n path += ` L ${getX(v)} ${getY(k \/ v)}`;\n }\n return path;\n }\n \n function updateGraph() {\n const pressure = k \/ volume;\n const currentX = getX(volume);\n const currentY = getY(pressure);\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\n document.getElementById('boyle-graph-volume').textContent = `\u0627\u0644\u062d\u062c\u0645: ${volume.toFixed(1)} \u0644\u062a\u0631`;\n document.getElementById('boyle-graph-pressure').textContent = `\u0627\u0644\u0636\u063a\u0637: ${pressure.toFixed(1)} \u0636\u063a\u0637 \u062c\u0648\u064a`;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b SVG\n svg.innerHTML = '';\n \n \/\/ \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const axes = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes.setAttribute('x1', padding);\n axes.setAttribute('y1', height - padding);\n axes.setAttribute('x2', width - padding);\n axes.setAttribute('y2', height - padding);\n axes.setAttribute('stroke', '#6b7280');\n axes.setAttribute('stroke-width', '2');\n svg.appendChild(axes);\n \n const axes2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes2.setAttribute('x1', padding);\n axes2.setAttribute('y1', height - padding);\n axes2.setAttribute('x2', padding);\n axes2.setAttribute('y2', padding);\n axes2.setAttribute('stroke', '#6b7280');\n axes2.setAttribute('stroke-width', '2');\n svg.appendChild(axes2);\n \n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const labelX = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelX.setAttribute('x', width \/ 2);\n labelX.setAttribute('y', height - 5);\n labelX.setAttribute('fill', '#9ca3af');\n labelX.setAttribute('text-anchor', 'middle');\n labelX.setAttribute('font-size', '12');\n labelX.textContent = '\u0627\u0644\u062d\u062c\u0645 (V)';\n svg.appendChild(labelX);\n \n const labelY = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelY.setAttribute('x', 15);\n labelY.setAttribute('y', height \/ 2);\n labelY.setAttribute('fill', '#9ca3af');\n labelY.setAttribute('text-anchor', 'middle');\n labelY.setAttribute('transform', `rotate(-90, 15, ${height\/2})`);\n labelY.setAttribute('font-size', '12');\n labelY.textContent = '\u0627\u0644\u0636\u063a\u0637 (P)';\n svg.appendChild(labelY);\n \n \/\/ \u0627\u0644\u0645\u0646\u062d\u0646\u0649\n const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n path.setAttribute('d', createPathData());\n path.setAttribute('fill', 'none');\n path.setAttribute('stroke', '#a78bfa');\n path.setAttribute('stroke-width', '3');\n svg.appendChild(path);\n \n \/\/ \u0627\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\n const point = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n point.setAttribute('cx', currentX);\n point.setAttribute('cy', currentY);\n point.setAttribute('r', '6');\n point.setAttribute('fill', '#c4b5fd');\n point.setAttribute('stroke', '#a78bfa');\n point.setAttribute('stroke-width', '2');\n svg.appendChild(point);\n \n \/\/ \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0646\u0642\u0637\u0629 \u0644\u0644\u0645\u062d\u0627\u0648\u0631\n const line1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line1.setAttribute('x1', currentX);\n line1.setAttribute('y1', currentY);\n line1.setAttribute('x2', currentX);\n line1.setAttribute('y2', height - padding);\n line1.setAttribute('stroke', '#c4b5fd');\n line1.setAttribute('stroke-width', '1');\n line1.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line1);\n \n const line2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line2.setAttribute('x1', currentX);\n line2.setAttribute('y1', currentY);\n line2.setAttribute('x2', padding);\n line2.setAttribute('y2', currentY);\n line2.setAttribute('stroke', '#c4b5fd');\n line2.setAttribute('stroke-width', '1');\n line2.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line2);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\n updateGraph();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c \u0627\u0644\u062d\u062f\u062b\n document.getElementById('boyle-graph-slider').addEventListener('input', (e) => {\n volume = parseFloat(e.target.value);\n updateGraph();\n });\n }\n \n \/\/ =============================================\n \/\/ 4. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644\n \/\/ =============================================\n function createCharlesLawSimulation() {\n const container = document.getElementById('charles-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <button id=\"charles-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas id=\"charles-canvas\" width=\"350\" height=\"280\" class=\"rounded-md\"><\/canvas>\n <div id=\"charles-thermometer\"><\/div>\n <\/div>\n <div class=\"w-full max-w-md mx-auto mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"charles-temp-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"charles-temp-slider\" min=\"100\" max=\"500\" step=\"1\" value=\"300\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"charles-temp-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div class=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span id=\"charles-temp-value\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629: 300 K (27 \u00b0C)<\/span>\n <span id=\"charles-volume-value\">\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: 6.8<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u062d\u0631\u0643 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0644\u0632\u064a\u0627\u062f\u0629 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629. \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u062a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0648\u064a\u062a\u0645\u062f\u062f \u0627\u0644\u0648\u0639\u0627\u0621 (\u064a\u0632\u062f\u0627\u062f \u0627\u0644\u062d\u062c\u0645) \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0636\u063a\u0637 \u062b\u0627\u0628\u062a\u064b\u0627.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\n function createThermometer(temperature, minTemp, maxTemp) {\n const thermometerContainer = document.getElementById('charles-thermometer');\n const height = 150;\n const width = 30;\n \n const tempRatio = (temperature - minTemp) \/ (maxTemp - minTemp);\n const fillHeight = (height - 20) * tempRatio;\n \n const r = Math.floor(255 * tempRatio);\n const b = Math.floor(255 * (1 - tempRatio));\n const fillColor = `rgb(${r}, 80, ${b})`;\n \n thermometerContainer.innerHTML = `\n <div class=\"flex flex-col items-center\">\n <svg width=\"${width}\" height=\"${height}\" class=\"bg-slate-700\/50 rounded-full border-2 border-slate-600\">\n <rect x=\"5\" y=\"${height - 10 - fillHeight}\" width=\"${width - 10}\" height=\"${fillHeight}\" fill=\"${fillColor}\" rx=\"5\" ry=\"5\" class=\"transition-all duration-200\"><\/rect>\n <circle cx=\"${width \/ 2}\" cy=\"${height - 10}\" r=\"8\" fill=\"${fillColor}\" class=\"transition-all duration-200\"><\/circle>\n <\/svg>\n <span class=\"text-xs mt-1 text-slate-400\">\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/span>\n <\/div>\n `;\n }\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('charles-canvas');\n const ctx = canvas.getContext('2d');\n const minTempK = 100;\n const maxTempK = 500;\n let temperatureK = 300;\n const containerWidth = 350;\n const containerHeight = 280;\n const numParticles = 40;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, x, y, vx, vy, radius) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n }\n }\n \n function initParticles() {\n particles = [];\n for (let i = 0; i < numParticles; i++) {\n particles.push(new Particle(\n i,\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3\n ));\n }\n }\n \n function updateSimulation() {\n const tempC = temperatureK - 273.15;\n const volumeRatio = temperatureK \/ maxTempK;\n const volume = (volumeRatio * 8) + 2;\n \n document.getElementById('charles-temp-value').textContent = `\u0627\u0644\u062d\u0631\u0627\u0631\u0629: ${temperatureK.toFixed(0)} K (${tempC.toFixed(0)} \u00b0C)`;\n document.getElementById('charles-volume-value').textContent = `\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: ${volume.toFixed(1)}`;\n createThermometer(temperatureK, minTempK, maxTempK);\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n const pistonHeight = containerHeight * (temperatureK \/ maxTempK);\n const speedMultiplier = Math.sqrt(temperatureK \/ minTempK);\n const pistonY = containerHeight - pistonHeight;\n \n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u063a\u0627\u0632\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, pistonY, containerWidth, pistonHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n \n particles.forEach(p => {\n p.x += p.vx * speedMultiplier;\n p.y += p.vy * speedMultiplier;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#c4b5fd';\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n initParticles();\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('charles-temp-slider').addEventListener('input', (e) => {\n temperatureK = parseFloat(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('charles-temp-decrease-btn').addEventListener('click', () => {\n temperatureK = Math.max(minTempK, temperatureK - 10);\n document.getElementById('charles-temp-slider').value = temperatureK;\n updateSimulation();\n });\n \n document.getElementById('charles-temp-increase-btn').addEventListener('click', () => {\n temperatureK = Math.min(maxTempK, temperatureK + 10);\n document.getElementById('charles-temp-slider').value = temperatureK;\n updateSimulation();\n });\n \n document.getElementById('charles-reset-btn').addEventListener('click', () => {\n temperatureK = 300;\n document.getElementById('charles-temp-slider').value = temperatureK;\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 5. \u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644\n \/\/ =============================================\n function createCharlesLawGraph() {\n const container = document.getElementById('charles-law-graph-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 class=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <svg id=\"charles-graph\" width=\"100%\" height=\"300\" viewBox=\"0 0 400 300\"><\/svg>\n <div class=\"w-full max-w-sm mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0631\u064a\u0643 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label>\n <input type=\"range\" id=\"charles-graph-slider\" min=\"100\" max=\"500\" step=\"1\" value=\"300\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <div class=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span id=\"charles-graph-temp\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629: 300 K (27\u00b0C)<\/span>\n <span id=\"charles-graph-volume\">\u0627\u0644\u062d\u062c\u0645: 15.00 \u0644\u062a\u0631<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u062d\u062c\u0645 \u0628\u0634\u0643\u0644 \u0637\u0631\u062f\u064a \u0645\u0639 \u062a\u063a\u064a\u0631 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.\n <\/p>\n <\/div>\n `;\n \n const minTempK = 100;\n const maxTempK = 500;\n let temperatureK = 300;\n const k = 0.05;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = k * maxTempK;\n \n const svg = document.getElementById('charles-graph');\n \n function getX(t) {\n return padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n }\n \n function getY(v) {\n return height - padding - (v \/ maxVolume) * (height - 2 * padding);\n }\n \n function updateGraph() {\n const volume = k * temperatureK;\n const tempC = temperatureK - 273.15;\n const x1 = getX(minTempK);\n const y1 = getY(k * minTempK);\n const x2 = getX(maxTempK);\n const y2 = getY(k * maxTempK);\n const currentX = getX(temperatureK);\n const currentY = getY(volume);\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\n document.getElementById('charles-graph-temp').textContent = `\u0627\u0644\u062d\u0631\u0627\u0631\u0629: ${temperatureK.toFixed(0)} K (${tempC.toFixed(0)}\u00b0C)`;\n document.getElementById('charles-graph-volume').textContent = `\u0627\u0644\u062d\u062c\u0645: ${volume.toFixed(2)} \u0644\u062a\u0631`;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b SVG\n svg.innerHTML = '';\n \n \/\/ \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const axes = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes.setAttribute('x1', padding);\n axes.setAttribute('y1', height - padding);\n axes.setAttribute('x2', width - padding);\n axes.setAttribute('y2', height - padding);\n axes.setAttribute('stroke', '#6b7280');\n axes.setAttribute('stroke-width', '2');\n svg.appendChild(axes);\n \n const axes2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes2.setAttribute('x1', padding);\n axes2.setAttribute('y1', height - padding);\n axes2.setAttribute('x2', padding);\n axes2.setAttribute('y2', padding);\n axes2.setAttribute('stroke', '#6b7280');\n axes2.setAttribute('stroke-width', '2');\n svg.appendChild(axes2);\n \n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const labelX = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelX.setAttribute('x', width \/ 2);\n labelX.setAttribute('y', height - 5);\n labelX.setAttribute('fill', '#9ca3af');\n labelX.setAttribute('text-anchor', 'middle');\n labelX.setAttribute('font-size', '12');\n labelX.textContent = '\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)';\n svg.appendChild(labelX);\n \n const labelY = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelY.setAttribute('x', 15);\n labelY.setAttribute('y', height \/ 2);\n labelY.setAttribute('fill', '#9ca3af');\n labelY.setAttribute('text-anchor', 'middle');\n labelY.setAttribute('transform', `rotate(-90, 15, ${height\/2})`);\n labelY.setAttribute('font-size', '12');\n labelY.textContent = '\u0627\u0644\u062d\u062c\u0645 (V)';\n svg.appendChild(labelY);\n \n \/\/ \u0627\u0644\u062e\u0637\n const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line.setAttribute('x1', x1);\n line.setAttribute('y1', y1);\n line.setAttribute('x2', x2);\n line.setAttribute('y2', y2);\n line.setAttribute('stroke', '#a78bfa');\n line.setAttribute('stroke-width', '3');\n svg.appendChild(line);\n \n \/\/ \u0627\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\n const point = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n point.setAttribute('cx', currentX);\n point.setAttribute('cy', currentY);\n point.setAttribute('r', '6');\n point.setAttribute('fill', '#c4b5fd');\n point.setAttribute('stroke', '#a78bfa');\n point.setAttribute('stroke-width', '2');\n svg.appendChild(point);\n \n \/\/ \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0646\u0642\u0637\u0629 \u0644\u0644\u0645\u062d\u0627\u0648\u0631\n const line1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line1.setAttribute('x1', currentX);\n line1.setAttribute('y1', currentY);\n line1.setAttribute('x2', currentX);\n line1.setAttribute('y2', height - padding);\n line1.setAttribute('stroke', '#c4b5fd');\n line1.setAttribute('stroke-width', '1');\n line1.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line1);\n \n const line2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line2.setAttribute('x1', currentX);\n line2.setAttribute('y1', currentY);\n line2.setAttribute('x2', padding);\n line2.setAttribute('y2', currentY);\n line2.setAttribute('stroke', '#c4b5fd');\n line2.setAttribute('stroke-width', '1');\n line2.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line2);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\n updateGraph();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c \u0627\u0644\u062d\u062f\u062b\n document.getElementById('charles-graph-slider').addEventListener('input', (e) => {\n temperatureK = parseFloat(e.target.value);\n updateGraph();\n });\n }\n \n \/\/ =============================================\n \/\/ 6. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\n \/\/ =============================================\n function createAvogadroLawSimulation() {\n const container = document.getElementById('avogadro-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648<\/h3>\n <button id=\"avogadro-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex flex-col justify-center items-center gap-6\">\n <canvas id=\"avogadro-canvas\" width=\"350\" height=\"280\" class=\"rounded-md\"><\/canvas>\n <\/div>\n <div class=\"w-full max-w-md mx-auto mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632 (\u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"avogadro-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"avogadro-slider\" min=\"20\" max=\"100\" step=\"1\" value=\"60\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"avogadro-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div class=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span id=\"avogadro-count\">\u0627\u0644\u0643\u0645\u064a\u0629 (n): 60 \u062c\u0633\u064a\u0645<\/span>\n <span id=\"avogadro-volume\">\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): 6.8<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u0639\u0646\u062f \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u063a\u0627\u0632\u060c \u064a\u0632\u062f\u0627\u062f \u0639\u062f\u062f \u0627\u0644\u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621. \u0648\u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0636\u063a\u0637 \u062b\u0627\u0628\u062a\u060c \u064a\u062a\u0645\u062f\u062f \u0627\u0644\u0648\u0639\u0627\u0621 \u0644\u064a\u0632\u062f\u0627\u062f \u0627\u0644\u062d\u062c\u0645.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('avogadro-canvas');\n const ctx = canvas.getContext('2d');\n const minParticles = 20;\n const maxParticles = 100;\n let numParticles = 60;\n const containerWidth = 350;\n const containerHeight = 280;\n let particles = [];\n let animationId = null;\n let allParticles = []; \/\/ \u0644\u062a\u062e\u0632\u064a\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u0645\u062d\u062a\u0645\u0644\u0629\n \n class Particle {\n constructor(id, x, y, vx, vy, radius) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n }\n }\n \n function initAllParticles() {\n allParticles = [];\n for (let i = 0; i < maxParticles; i++) {\n allParticles.push(new Particle(\n i,\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 3,\n (Math.random() - 0.5) * 3,\n 3\n ));\n }\n particles = allParticles.slice(0, numParticles);\n }\n \n function updateSimulation() {\n const volumeRatio = numParticles \/ maxParticles;\n const volume = (volumeRatio * 8) + 2;\n \n document.getElementById('avogadro-count').textContent = `\u0627\u0644\u0643\u0645\u064a\u0629 (n): ${numParticles} \u062c\u0633\u064a\u0645`;\n document.getElementById('avogadro-volume').textContent = `\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): ${volume.toFixed(1)}`;\n \n particles = allParticles.slice(0, numParticles);\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n const pistonHeight = containerHeight * (numParticles \/ maxParticles);\n const pistonY = containerHeight - pistonHeight;\n \n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u063a\u0627\u0632\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, pistonY, containerWidth, pistonHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n \n particles.forEach(p => {\n p.x += p.vx;\n p.y += p.vy;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#c4b5fd';\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n initAllParticles();\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('avogadro-slider').addEventListener('input', (e) => {\n numParticles = parseInt(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('avogadro-decrease-btn').addEventListener('click', () => {\n numParticles = Math.max(minParticles, numParticles - 5);\n document.getElementById('avogadro-slider').value = numParticles;\n updateSimulation();\n });\n \n document.getElementById('avogadro-increase-btn').addEventListener('click', () => {\n numParticles = Math.min(maxParticles, numParticles + 5);\n document.getElementById('avogadro-slider').value = numParticles;\n updateSimulation();\n });\n \n document.getElementById('avogadro-reset-btn').addEventListener('click', () => {\n numParticles = 60;\n document.getElementById('avogadro-slider').value = numParticles;\n initAllParticles();\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 7. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646\n \/\/ =============================================\n function createDaltonLawSimulation() {\n const container = document.getElementById('dalton-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h3>\n <button id=\"dalton-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex justify-center items-center gap-6\">\n <div id=\"dalton-gauge-a\"><\/div>\n <div id=\"dalton-gauge-b\"><\/div>\n <canvas id=\"dalton-canvas\" width=\"300\" height=\"250\" class=\"rounded-md\"><\/canvas>\n <div id=\"dalton-gauge-total\"><\/div>\n <\/div>\n <div class=\"w-full max-w-lg mx-auto mt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label class=\"font-semibold mb-2 text-slate-300 text-center block text-sm\">\u0643\u0645\u064a\u0629 \u063a\u0627\u0632 A<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"dalton-a-decrease-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">-<\/button>\n <input type=\"range\" id=\"dalton-a-slider\" min=\"0\" max=\"50\" step=\"1\" value=\"25\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"dalton-a-increase-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">+<\/button>\n <\/div>\n <div class=\"mt-1 text-xs text-center text-slate-300 font-mono\" id=\"dalton-a-count\">25 \u062c\u0633\u064a\u0645<\/div>\n <\/div>\n <div>\n <label class=\"font-semibold mb-2 text-slate-300 text-center block text-sm\">\u0643\u0645\u064a\u0629 \u063a\u0627\u0632 B<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"dalton-b-decrease-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">-<\/button>\n <input type=\"range\" id=\"dalton-b-slider\" min=\"0\" max=\"50\" step=\"1\" value=\"25\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-teal-400\">\n <button id=\"dalton-b-increase-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">+<\/button>\n <\/div>\n <div class=\"mt-1 text-xs text-center text-slate-300 font-mono\" id=\"dalton-b-count\">25 \u062c\u0633\u064a\u0645<\/div>\n <\/div>\n <\/div>\n <div class=\"mt-4 text-center p-3 bg-slate-800\/40 rounded-md font-mono text-lg tracking-wider text-slate-200\" id=\"dalton-equation\">\n P<sub class=\"text-red-400\">Total<\/sub> (25.0) = P<sub class=\"text-purple-300\">A<\/sub> (12.5) + P<sub class=\"text-teal-300\">B<\/sub> (12.5)\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u062c\u0631\u0651\u0628 \u062a\u063a\u064a\u064a\u0631 \u0643\u0645\u064a\u0629 \u0643\u0644 \u063a\u0627\u0632. \u0633\u062a\u0644\u0627\u062d\u0638 \u0623\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u0644\u062e\u0644\u064a\u0637 \u064a\u0633\u0627\u0648\u064a \u062f\u0627\u0626\u0645\u064b\u0627 \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632 \u0639\u0644\u0649 \u062d\u062f\u0629.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0645\u0642\u0627\u064a\u064a\u0633 \u0627\u0644\u0636\u063a\u0637\n function createPressureGauge(containerId, pressure, maxPressure, color, label) {\n const gaugeContainer = document.getElementById(containerId);\n const height = 120;\n const width = 25;\n const paddingTop = 8;\n const paddingBottom = 8;\n const fillableHeight = height - paddingTop - paddingBottom;\n \n const pressureRatio = Math.min(pressure \/ maxPressure, 1);\n const fillHeight = fillableHeight * pressureRatio;\n \n gaugeContainer.innerHTML = `\n <div class=\"flex flex-col items-center\">\n <span class=\"text-xs mb-1 font-semibold\" style=\"color: ${color}\">${label}<\/span>\n <svg width=\"${width}\" height=\"${height}\" class=\"bg-slate-700\/50 rounded-lg\">\n <rect x=\"0\" y=\"${height - paddingBottom - fillHeight}\" width=\"${width}\" height=\"${fillHeight}\" fill=\"${color}\" class=\"transition-all duration-200\"><\/rect>\n <\/svg>\n <\/div>\n `;\n }\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('dalton-canvas');\n const ctx = canvas.getContext('2d');\n const containerWidth = 300;\n const containerHeight = 250;\n const maxParticlesPerGas = 50;\n let numParticlesA = 25;\n let numParticlesB = 25;\n const pressureConstant = 0.5;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, type, x, y, vx, vy, radius, color) {\n this.id = id;\n this.type = type;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n this.color = color;\n }\n }\n \n function initParticles() {\n particles = [];\n \n \/\/ \u063a\u0627\u0632 A\n for (let i = 0; i < numParticlesA; i++) {\n particles.push(new Particle(\n i,\n 'A',\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3,\n '#c4b5fd'\n ));\n }\n \n \/\/ \u063a\u0627\u0632 B\n for (let i = 0; i < numParticlesB; i++) {\n particles.push(new Particle(\n numParticlesA + i,\n 'B',\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3,\n '#5eead4'\n ));\n }\n }\n \n function updateSimulation() {\n const pressureA = numParticlesA * pressureConstant;\n const pressureB = numParticlesB * pressureConstant;\n const totalPressure = pressureA + pressureB;\n const maxTotalPressure = (maxParticlesPerGas * 2) * pressureConstant;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\n document.getElementById('dalton-a-count').textContent = `${numParticlesA} \u062c\u0633\u064a\u0645`;\n document.getElementById('dalton-b-count').textContent = `${numParticlesB} \u062c\u0633\u064a\u0645`;\n document.getElementById('dalton-equation').innerHTML = `P<sub class=\"text-red-400\">Total<\/sub> (${totalPressure.toFixed(1)}) = P<sub class=\"text-purple-300\">A<\/sub> (${pressureA.toFixed(1)}) + P<sub class=\"text-teal-300\">B<\/sub> (${pressureB.toFixed(1)})`;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0642\u0627\u064a\u064a\u0633 \u0627\u0644\u0636\u063a\u0637\n createPressureGauge('dalton-gauge-a', pressureA, maxTotalPressure, '#c4b5fd', 'P (A)');\n createPressureGauge('dalton-gauge-b', pressureB, maxTotalPressure, '#5eead4', 'P (B)');\n createPressureGauge('dalton-gauge-total', totalPressure, maxTotalPressure, '#f87171', 'P (Total)');\n \n initParticles();\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, 0, containerWidth, containerHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n particles.forEach(p => {\n p.x += p.vx;\n p.y += p.vy;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = p.color;\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('dalton-a-slider').addEventListener('input', (e) => {\n numParticlesA = parseInt(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('dalton-b-slider').addEventListener('input', (e) => {\n numParticlesB = parseInt(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('dalton-a-decrease-btn').addEventListener('click', () => {\n numParticlesA = Math.max(0, numParticlesA - 5);\n document.getElementById('dalton-a-slider').value = numParticlesA;\n updateSimulation();\n });\n \n document.getElementById('dalton-a-increase-btn').addEventListener('click', () => {\n numParticlesA = Math.min(maxParticlesPerGas, numParticlesA + 5);\n document.getElementById('dalton-a-slider').value = numParticlesA;\n updateSimulation();\n });\n \n document.getElementById('dalton-b-decrease-btn').addEventListener('click', () => {\n numParticlesB = Math.max(0, numParticlesB - 5);\n document.getElementById('dalton-b-slider').value = numParticlesB;\n updateSimulation();\n });\n \n document.getElementById('dalton-b-increase-btn').addEventListener('click', () => {\n numParticlesB = Math.min(maxParticlesPerGas, numParticlesB + 5);\n document.getElementById('dalton-b-slider').value = numParticlesB;\n updateSimulation();\n });\n \n document.getElementById('dalton-reset-btn').addEventListener('click', () => {\n numParticlesA = 25;\n numParticlesB = 25;\n document.getElementById('dalton-a-slider').value = numParticlesA;\n document.getElementById('dalton-b-slider').value = numParticlesB;\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 8. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645\n \/\/ =============================================\n function createGrahamLawSimulation() {\n const container = document.getElementById('graham-law-simulation-container');\n if (!container) return;\n \n const GASES = {\n h2: { name: '\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646', formula: 'H\u2082', molarMass: 2.02, color: '#fca5a5' },\n he: { name: '\u0647\u064a\u0644\u064a\u0648\u0645', formula: 'He', molarMass: 4.00, color: '#fdba74' },\n ch4: { name: '\u0645\u064a\u062b\u0627\u0646', formula: 'CH\u2084', molarMass: 16.04, color: '#fde047' },\n n2: { name: '\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646', formula: 'N\u2082', molarMass: 28.01, color: '#86efac' },\n o2: { name: '\u0623\u0643\u0633\u062c\u064a\u0646', formula: 'O\u2082', molarMass: 32.00, color: '#7dd3fc' },\n co2: { name: '\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646', formula: 'CO\u2082', molarMass: 44.01, color: '#a5b4fc' },\n sf6: { name: '\u0633\u062f\u0627\u0633\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0628\u0631\u064a\u062a', formula: 'SF\u2086', molarMass: 146.06, color: '#d8b4fe' }\n };\n const GAS_KEYS = Object.keys(GASES);\n const HEAVIEST_GAS_MM = GASES.sf6.molarMass;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 class=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0644\u0644\u0627\u0646\u062a\u0634\u0627\u0631<\/h3>\n <div class=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <div class=\"w-full md:w-56 space-y-4\">\n <div>\n <label for=\"graham-gas-a-select\" class=\"font-semibold mb-1 block\" style=\"color: #fca5a5\">\u063a\u0627\u0632 A (\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0623\u064a\u0633\u0631)<\/label>\n <select id=\"graham-gas-a-select\" class=\"w-full p-2 rounded-md bg-slate-700 border border-slate-600 text-white\">\n ${GAS_KEYS.map(key => `<option value=\"${key}\">${GASES[key].name} (${GASES[key].formula})<\/option>`).join('')}\n <\/select>\n <p class=\"text-xs mt-1 text-slate-400\" id=\"graham-gas-a-mass\">\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: 2.02 g\/mol<\/p>\n <\/div>\n <div>\n <label for=\"graham-gas-b-select\" class=\"font-semibold mb-1 block\" style=\"color: #d8b4fe\">\u063a\u0627\u0632 B (\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0623\u064a\u0645\u0646)<\/label>\n <select id=\"graham-gas-b-select\" class=\"w-full p-2 rounded-md bg-slate-700 border border-slate-600 text-white\">\n ${GAS_KEYS.map(key => `<option value=\"${key}\" ${key === 'sf6' ? 'selected' : ''}>${GASES[key].name} (${GASES[key].formula})<\/option>`).join('')}\n <\/select>\n <p class=\"text-xs mt-1 text-slate-400\" id=\"graham-gas-b-mass\">\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: 146.06 g\/mol<\/p>\n <\/div>\n <div class=\"pt-2\">\n <button id=\"graham-start-btn\" class=\"w-full bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 font-semibold\">\u0628\u062f\u0621 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631<\/button>\n <button id=\"graham-reset-btn\" class=\"w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600 font-semibold mt-2 hidden\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\n <\/div>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <canvas id=\"graham-canvas\" width=\"400\" height=\"200\" class=\"rounded-md bg-slate-900\/50\"><\/canvas>\n <div class=\"grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm font-mono text-center\">\n <span id=\"graham-a-left\" style=\"color: #fca5a5\">\u063a\u0627\u0632 A \u064a\u0633\u0627\u0631\u064b\u0627: 60<\/span>\n <span id=\"graham-b-left\" style=\"color: #d8b4fe\">\u063a\u0627\u0632 B \u064a\u0633\u0627\u0631\u064b\u0627: 0<\/span>\n <span id=\"graham-a-right\" style=\"color: #fca5a5\">\u063a\u0627\u0632 A \u064a\u0645\u064a\u0646\u064b\u0627: 0<\/span>\n <span id=\"graham-b-right\" style=\"color: #d8b4fe\">\u063a\u0627\u0632 B \u064a\u0645\u064a\u0646\u064b\u0627: 60<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-4 text-center p-3 bg-slate-800\/40 rounded-md\">\n <p class=\"text-sm text-slate-300\">\n \u0645\u0639\u062f\u0644 \u0627\u0646\u062a\u0634\u0627\u0631 \u063a\u0627\u0632 A \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u063a\u0627\u0632 B \u0647\u0648 <span id=\"graham-rate\" class=\"font-bold text-lg text-white\">85.17<\/span> \u0645\u0631\u0629 \u0623\u0633\u0631\u0639.\n <\/p>\n <p class=\"text-xs text-slate-400 mt-1\">\u0645\u062d\u0633\u0648\u0628\u0629 \u0645\u0646:<\/p>\n <div class=\"not-prose my-2 p-3 text-sm bg-black\/20 rounded-lg border border-white\/10 overflow-x-auto font-mono text-center\" id=\"graham-calculation\">\n <p>rate_A \/ rate_B = \u221a (M_B \/ M_A)<\/p>\n <p>= \u221a (146.06 \/ 2.02)<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('graham-canvas');\n const ctx = canvas.getContext('2d');\n const containerWidth = 400;\n const containerHeight = 200;\n const numParticlesPerGas = 60;\n const baseSpeed = 0.5;\n \n let gasAKey = 'h2';\n let gasBKey = 'sf6';\n let simulationState = 'idle';\n let particles = [];\n let animationId = null;\n let counterIntervalId = null;\n \n class Particle {\n constructor(id, gasKey, x, y, vx, vy, radius, speedMultiplier) {\n this.id = id;\n this.gasKey = gasKey;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n this.speedMultiplier = speedMultiplier;\n }\n }\n \n function createParticles() {\n particles = [];\n const speedMultiplierA = Math.sqrt(HEAVIEST_GAS_MM \/ GASES[gasAKey].molarMass);\n const speedMultiplierB = Math.sqrt(HEAVIEST_GAS_MM \/ GASES[gasBKey].molarMass);\n \n \/\/ \u063a\u0627\u0632 A \u0641\u064a \u0627\u0644\u064a\u0633\u0627\u0631\n for (let i = 0; i < numParticlesPerGas; i++) {\n particles.push(new Particle(\n i,\n gasAKey,\n Math.random() * (containerWidth \/ 2 - 10),\n Math.random() * containerHeight,\n (Math.random() - 0.5) * baseSpeed,\n (Math.random() - 0.5) * baseSpeed,\n 3,\n speedMultiplierA\n ));\n }\n \n \/\/ \u063a\u0627\u0632 B \u0641\u064a \u0627\u0644\u064a\u0645\u064a\u0646\n for (let i = 0; i < numParticlesPerGas; i++) {\n particles.push(new Particle(\n numParticlesPerGas + i,\n gasBKey,\n containerWidth \/ 2 + 5 + Math.random() * (containerWidth \/ 2 - 10),\n Math.random() * containerHeight,\n (Math.random() - 0.5) * baseSpeed,\n (Math.random() - 0.5) * baseSpeed,\n 3,\n speedMultiplierB\n ));\n }\n \n updateCounts();\n updateRate();\n }\n \n function updateCounts() {\n let aLeft = 0, aRight = 0, bLeft = 0, bRight = 0;\n particles.forEach(p => {\n if (p.gasKey === gasAKey) {\n if (p.x < containerWidth \/ 2) aLeft++; else aRight++;\n } else {\n if (p.x < containerWidth \/ 2) bLeft++; else bRight++;\n }\n });\n \n document.getElementById('graham-a-left').textContent = `\u063a\u0627\u0632 A \u064a\u0633\u0627\u0631\u064b\u0627: ${aLeft}`;\n document.getElementById('graham-a-right').textContent = `\u063a\u0627\u0632 A \u064a\u0645\u064a\u0646\u064b\u0627: ${aRight}`;\n document.getElementById('graham-b-left').textContent = `\u063a\u0627\u0632 B \u064a\u0633\u0627\u0631\u064b\u0627: ${bLeft}`;\n document.getElementById('graham-b-right').textContent = `\u063a\u0627\u0632 B \u064a\u0645\u064a\u0646\u064b\u0627: ${bRight}`;\n }\n \n function updateRate() {\n const selectedGasA = GASES[gasAKey];\n const selectedGasB = GASES[gasBKey];\n const relativeRate = Math.sqrt(selectedGasB.molarMass \/ selectedGasA.molarMass);\n \n document.getElementById('graham-rate').textContent = relativeRate.toFixed(2);\n document.getElementById('graham-calculation').innerHTML = `\n <p>rate_A \/ rate_B = \u221a (M_B \/ M_A)<\/p>\n <p>= \u221a (${selectedGasB.molarMass.toFixed(2)} \/ ${selectedGasA.molarMass.toFixed(2)})<\/p>\n `;\n }\n \n function render() {\n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062d\u0627\u062c\u0632 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0648\u0636\u0639 \u0645\u062a\u0648\u0642\u0641\n if (simulationState === 'idle') {\n ctx.beginPath();\n ctx.moveTo(containerWidth \/ 2, 0);\n ctx.lineTo(containerWidth \/ 2, containerHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';\n ctx.stroke();\n }\n \n particles.forEach(p => {\n \/\/ \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\n p.x += p.vx * p.speedMultiplier;\n p.y += p.vy * p.speedMultiplier;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062d\u0627\u062c\u0632 (\u0641\u0642\u0637 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0648\u0636\u0639 \u0645\u062a\u0648\u0642\u0641)\n if (simulationState === 'idle') {\n if (p.gasKey === gasAKey && p.x + p.radius > containerWidth \/ 2) {\n p.x = containerWidth \/ 2 - p.radius;\n p.vx *= -1;\n }\n if (p.gasKey === gasBKey && p.x - p.radius < containerWidth \/ 2) {\n p.x = containerWidth \/ 2 + p.radius;\n p.vx *= -1;\n }\n }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = GASES[p.gasKey].color;\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n function startSimulation() {\n simulationState = 'running';\n document.getElementById('graham-start-btn').classList.add('hidden');\n document.getElementById('graham-reset-btn').classList.remove('hidden');\n \n \/\/ \u0628\u062f\u0621 \u0627\u0644\u0639\u062f \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\n counterIntervalId = setInterval(updateCounts, 250);\n }\n \n function resetSimulation() {\n simulationState = 'idle';\n document.getElementById('graham-start-btn').classList.remove('hidden');\n document.getElementById('graham-reset-btn').classList.add('hidden');\n \n if (counterIntervalId) {\n clearInterval(counterIntervalId);\n counterIntervalId = null;\n }\n \n createParticles();\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n createParticles();\n render();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('graham-gas-a-select').addEventListener('change', (e) => {\n gasAKey = e.target.value;\n document.getElementById('graham-gas-a-mass').textContent = `\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: ${GASES[gasAKey].molarMass.toFixed(2)} g\/mol`;\n document.querySelector('label[for=\"graham-gas-a-select\"]').style.color = GASES[gasAKey].color;\n resetSimulation();\n });\n \n document.getElementById('graham-gas-b-select').addEventListener('change', (e) => {\n gasBKey = e.target.value;\n document.getElementById('graham-gas-b-mass').textContent = `\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: ${GASES[gasBKey].molarMass.toFixed(2)} g\/mol`;\n document.querySelector('label[for=\"graham-gas-b-select\"]').style.color = GASES[gasBKey].color;\n resetSimulation();\n });\n \n document.getElementById('graham-start-btn').addEventListener('click', startSimulation);\n document.getElementById('graham-reset-btn').addEventListener('click', resetSimulation);\n }\n \n \/\/ =============================================\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n \/\/ =============================================\n document.addEventListener('DOMContentLoaded', function() {\n createGasSimulation();\n createBoyleLawSimulation();\n createBoyleLawGraph();\n createCharlesLawSimulation();\n createCharlesLawGraph();\n createAvogadroLawSimulation();\n createDaltonLawSimulation();\n createGrahamLawSimulation();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631\u0633 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627: \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631: \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629. \u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637: \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647. \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627: \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 […]<\/p>\n","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-16930","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16930","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=16930"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16930\/revisions"}],"predecessor-version":[{"id":16931,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16930\/revisions\/16931"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=16930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16930,"date":"2026-01-26T18:49:16","date_gmt":"2026-01-26T18:49:16","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=16930"},"modified":"2026-01-26T18:49:19","modified_gmt":"2026-01-26T18:49:19","slug":"16930-2","status":"publish","type":"page","link":"https:\/\/smartedujo.com\/ar\/16930-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n \u062f\u0631\u0633 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700&display=swap');\n * {\n font-family: 'Cairo', sans-serif;\n }\n \n \/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 *\/\n input[type=\"range\"] {\n -webkit-appearance: none;\n height: 6px;\n border-radius: 5px;\n background: #374151;\n outline: none;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: 2px solid #7c3aed;\n }\n \n input[type=\"range\"]::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: 2px solid #7c3aed;\n }\n \n \/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u0633\u062f\u0644\u0629 *\/\n select {\n background-color: #374151;\n color: white;\n border: 1px solid #4b5563;\n border-radius: 0.375rem;\n padding: 0.5rem;\n cursor: pointer;\n }\n \n select:focus {\n outline: none;\n ring: 2px solid #a78bfa;\n }\n \n \/* \u062a\u062d\u0633\u064a\u0646 \u0645\u0638\u0647\u0631 \u0627\u0644\u0640 canvas *\/\n canvas {\n display: block;\n margin: 0 auto;\n background-color: rgba(15, 23, 42, 0.5);\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-900 text-white min-h-screen p-4\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"space-y-4 text-right\" dir=\"rtl\">\n <h1 class=\"text-2xl sm:text-3xl font-bold text-purple-300 mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629<\/h1>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631:<\/strong> \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629.<\/li>\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/strong> \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647.<\/li>\n <li><strong class=\"text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627:<\/strong> \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647 \u0631\u063a\u0645 \u0627\u062e\u062a\u0644\u0627\u0641 \u062a\u0631\u0643\u064a\u0628\u0647\u0627.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u0641\u062a\u0631\u0636 \u0647\u0630\u0647 \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0623\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li>\u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0627\u0644\u0635\u063a\u0631 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u062c\u062f\u064b\u0627 (\u0645\u0639\u0638\u0645 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0641\u0631\u0627\u063a).<\/li>\n <li>\u062a\u062a\u062d\u0631\u0643 \u0628\u0634\u0643\u0644 \u0639\u0634\u0648\u0627\u0626\u064a \u0648\u0633\u0631\u064a\u0639 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a.<\/li>\n <li>\u062a\u062a\u0635\u0627\u062f\u0645 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0631\u0646\u0629 (\u0644\u0627 \u0641\u0642\u062f\u0627\u0646 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0644\u064a\u0629).<\/li>\n <li>\u0637\u0627\u0642\u062a\u0647\u0627 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0641\u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <\/ul>\n <p class=\"mt-2 text-slate-400 text-xs sm:text-sm\">\u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0648\u0636 \u062a\u0641\u0633\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 \u0648\u0627\u0644\u0636\u063a\u0637.<\/p>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a vs. \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-purple-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a<\/h3>\n <p class=\"text-sm\">\u063a\u0627\u0632 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u064a\u062d\u0642\u0642 \u062c\u0645\u064a\u0639 \u0628\u0646\u0648\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 (\u062d\u062c\u0645 \u062c\u0632\u064a\u0626\u0627\u062a\u0647 \u0635\u0641\u0631\u060c \u0648\u0644\u0627 \u062a\u0648\u062c\u062f \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646\u0647\u0627).<\/p>\n <\/div>\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-teal-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n <p class=\"text-sm\">\u064a\u062d\u064a\u062f \u0639\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0639\u0646\u062f:<\/p>\n <ul class=\"list-disc list-inside text-xs mt-1 text-slate-300\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <li><strong>\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u0644\u0627 \u062a\u062a\u063a\u0644\u0628 \u0639\u0644\u0649 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <p class=\"mt-3 bg-blue-900\/20 p-2 rounded border-r-4 border-blue-500 text-slate-300 text-sm\">\n <strong class=\"text-blue-300\">\u0645\u062b\u0627\u0644:<\/strong> \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 \u064a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u063a\u0627\u0632 \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 NH\u2083 \u064a\u062d\u064a\u062f \u0639\u0646\u0647 \u0628\u0633\u0628\u0628 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0627\u0644\u0642\u0648\u064a\u0629.\n <\/p>\n <\/section>\n\n \n <div id=\"gas-simulation-container\"><\/div>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0635\u0641 \u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u060c \u0648\u064a\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a. \u064a\u0646\u0634\u0623 \u0636\u063a\u0637 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646 \u062a\u0635\u0627\u062f\u0645 \u062c\u0633\u064a\u0645\u0627\u062a\u0647 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647.<\/p>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">\u0648\u062d\u062f\u0627\u062a \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646\u0647\u0627<\/h3>\n <p class=\"mb-2 text-sm text-slate-300\">\u064a\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0648\u0646 \u0639\u062f\u0629 \u0648\u062d\u062f\u0627\u062a \u0644\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm mb-4\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (Atmosphere):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">atm<\/code>.<\/li>\n <li><strong>\u0645\u0644\u064a\u0645\u062a\u0631 \u0632\u0626\u0628\u0642 (Millimeter of mercury):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">mmHg<\/code>.<\/li>\n <li><strong>\u062a\u0648\u0631 (Torr):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">torr<\/code>.<\/li>\n <li><strong>\u0628\u0627\u0633\u0643\u0627\u0644 (Pascal):<\/strong> \u0648\u0647\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 (SI)\u060c \u0648\u064a\u0631\u0645\u0632 \u0644\u0647\u0627 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">Pa<\/code>.<\/li>\n <\/ul>\n \n <div class=\"bg-black\/20 p-3 rounded-lg border border-white\/10\">\n <h4 class=\"text-base font-semibold text-white mb-2 text-center\">\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h4>\n <div class=\"font-mono text-center text-yellow-200 space-y-1 text-sm sm:text-base\" dir=\"ltr\">\n <p>1 atm = 760 mmHg<\/p>\n <p>1 mmHg = 1 torr<\/p>\n <p>1 atm = 101325 Pa = 101.325 kPa<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-2 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n <\/h4>\n <div class=\"space-y-3\">\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 1:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 1.5 atm \u0625\u0644\u0649 mmHg.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (mmHg) = 1.5 atm \u00d7 (760 mmHg \/ 1 atm)<\/p>\n <p>Pressure (mmHg) = 1140 mmHg<\/p>\n <\/div>\n <\/div>\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 2:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 95 kPa \u0625\u0644\u0649 atm.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (atm) = 95 kPa \u00d7 (1 atm \/ 101.325 kPa)<\/p>\n <p>Pressure (atm) \u2248 0.938 atm<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a (Gas Laws)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0647\u064a \u0639\u0644\u0627\u0642\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (P)\u060c \u0627\u0644\u062d\u062c\u0645 (V)\u060c \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (T)\u060c \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a (n).<\/p>\n\n <div class=\"space-y-6\">\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">1. \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 (Boyle’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \u00d7 V\u2081 = P\u2082 \u00d7 V\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u062a\u0642\u0644\u0644 \u0627\u0644\u062d\u062c\u0645 \u0628\u0633\u0628\u0628 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0648\u0639\u0627\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 5.6 \u0644\u062a\u0631 \u0645\u0646 \u063a\u0627\u0632 \u0639\u0646\u062f \u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0625\u0630\u0627 \u0627\u0631\u062a\u0641\u0639 \u0627\u0644\u0636\u063a\u0637 \u0625\u0644\u0649 4.5 \u0636\u063a\u0637 \u062c\u0648\u064a \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081 = 1.5 atm, V\u2081 = 5.6 L<br>\n 2. P\u2082 = 4.5 atm, V\u2082 = ?<br>\n 3. P\u2081V\u2081 = P\u2082V\u2082 => V\u2082 = (P\u2081V\u2081) \/ P\u2082<br>\n 4. V\u2082 = (1.5 atm \u00d7 5.6 L) \/ 4.5 atm<br>\n 5. V\u2082 \u2248 1.87 L\n <\/div>\n <\/div>\n \n <div id=\"boyle-law-simulation-container\"><\/div>\n \n <div id=\"boyle-law-graph-container\"><\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">2. \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644 (Charles’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ T\u2081 = V\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 (\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0627\u0644\u0643\u0644\u0641\u0646).<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u062a\u0645\u062f\u062f \u0627\u0644\u063a\u0627\u0632.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0628\u0627\u0644\u0648\u0646 \u062d\u062c\u0645\u0647 2 \u0644\u062a\u0631 \u0639\u0646\u062f 25\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647 \u0625\u0630\u0627 \u0633\u062e\u0646 \u0625\u0644\u0649 50\u00b0C \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 25 + 273 = 298 K, V\u2081 = 2 L<br>\n 2. T\u2082 = 50 + 273 = 323 K, V\u2082 = ?<br>\n 3. V\u2081\/T\u2081 = V\u2082\/T\u2082 => V\u2082 = (V\u2081T\u2082) \/ T\u2081<br>\n 4. V\u2082 = (2 L \u00d7 323 K) \/ 298 K<br>\n 5. V\u2082 \u2248 2.17 L\n <\/div>\n <\/div>\n \n <div id=\"charles-law-simulation-container\"><\/div>\n \n <div id=\"charles-law-graph-container\"><\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">3. \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643 (Gay-Lussac’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u0636\u063a\u0637 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \/ T\u2081 = P\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0637\u0627\u0631 \u0633\u064a\u0627\u0631\u0629 \u0636\u063a\u0637\u0647 2.2 \u0636\u063a\u0637 \u062c\u0648\u064a \u0639\u0646\u062f 15\u00b0C. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0628\u0639\u062f \u0631\u062d\u0644\u0629 \u0637\u0648\u064a\u0644\u0629 \u0625\u0630\u0627 \u0623\u0635\u0628\u062d\u062a \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 40\u00b0C\u061f (\u0628\u0627\u0641\u062a\u0631\u0627\u0636 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u062c\u0645)<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 15 + 273 = 288 K, P\u2081 = 2.2 atm<br>\n 2. T\u2082 = 40 + 273 = 313 K, P\u2082 = ?<br>\n 3. P\u2081\/T\u2081 = P\u2082\/T\u2082 => P\u2082 = (P\u2081T\u2082) \/ T\u2081<br>\n 4. P\u2082 = (2.2 atm \u00d7 313 K) \/ 288 K<br>\n 5. P\u2082 \u2248 2.39 atm\n <\/div>\n <\/div>\n \n <div id=\"gay-lussac-law-simulation-container\"><\/div>\n \n <div id=\"gay-lussac-law-graph-container\"><\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">4. \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0627\u0645\u0639 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">(P\u2081 \u00d7 V\u2081) \/ T\u2081 = (P\u2082 \u00d7 V\u2082) \/ T\u2082<\/div>\n <p class=\"text-slate-300 text-sm mb-3\">\u064a\u062c\u0645\u0639 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632.<\/p>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u062d\u062c\u0645\u0647\u0627 10 \u0644\u062a\u0631 \u0639\u0646\u062f \u0636\u063a\u0637 1 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 27\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP: 1 atm, 0\u00b0C)\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081=1 atm, V\u2081=10 L, T\u2081=27+273=300 K<br>\n 2. P\u2082=1 atm, T\u2082=0+273=273 K, V\u2082=?<br>\n 3. (P\u2081V\u2081)\/T\u2081 = (P\u2082V\u2082)\/T\u2082 => V\u2082 = (P\u2081V\u2081T\u2082) \/ (P\u2082T\u2081)<br>\n 4. V\u2082 = (1 atm \u00d7 10 L \u00d7 273 K) \/ (1 atm \u00d7 300 K)<br>\n 5. V\u2082 = 9.1 L\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">5. \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648 (Avogadro’s Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0648\u0645 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a (\u0627\u0644\u0645\u0648\u0644\u0627\u062a) \u062a\u0643\u0648\u0646 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ n\u2081 = V\u2082 \/ n\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a.<\/li>\n <li><strong>\u0645\u0644\u062d\u0648\u0638\u0629:<\/strong> \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u0648\u0644\u064a \u0644\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP)\u060c \u0648\u0647\u064a <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">0\u00b0C (273 K)<\/code> \u0648 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">1 atm<\/code>\u060c \u0647\u0648 22.4 \u0644\u062a\u0631\/\u0645\u0648\u0644.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0630\u0627 \u0643\u0627\u0646 2 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u064a\u0634\u063a\u0644 \u062d\u062c\u0645\u064b\u0627 \u0642\u062f\u0631\u0647 44.8 \u0644\u062a\u0631\u060c \u0641\u0645\u0627 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0630\u064a \u064a\u0634\u063a\u0644\u0647 3 \u0645\u0648\u0644 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. n\u2081 = 2 mol, V\u2081 = 44.8 L<br>\n 2. n\u2082 = 3 mol, V\u2082 = ?<br>\n 3. V\u2081\/n\u2081 = V\u2082\/n\u2082 => V\u2082 = (V\u2081n\u2082) \/ n\u2081<br>\n 4. V\u2082 = (44.8 L \u00d7 3 mol) \/ 2 mol<br>\n 5. V\u2082 = 67.2 L\n <\/div>\n <\/div>\n \n <div id=\"avogadro-law-simulation-container\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Gas Law)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u062c\u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0645\u064a\u0639 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632 (P, V, T, n) \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0635\u0641 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0648\u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0627\u062f\u0629.<\/p>\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 text-center relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\"><\/div>\n <p class=\"text-3xl font-mono font-bold text-white mb-4 tracking-widest\" dir=\"ltr\">PV = nRT<\/p>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs sm:text-sm\">\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">P<\/strong> \u0627\u0644\u0636\u063a\u0637<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">V<\/strong> \u0627\u0644\u062d\u062c\u0645<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">n<\/strong> \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">T<\/strong> \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/div>\n <\/div>\n <div class=\"mt-4 pt-3 border-t border-white\/10 text-xs sm:text-sm\">\n <strong class=\"text-indigo-300\">R (\u0627\u0644\u062b\u0627\u0628\u062a \u0627\u0644\u0639\u0627\u0645):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">0.0821 L\u00b7atm\/mol\u00b7K<\/span>\n <span class=\"mx-2\">|<\/span>\n <strong class=\"text-indigo-300\">T (\u0628\u0627\u0644\u0643\u0644\u0641\u0646):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">\u00b0C + 273<\/span>\n <\/div>\n <\/div>\n \n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0627\u062d\u0633\u0628 \u0636\u063a\u0637 0.45 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0641\u064a \u0648\u0639\u0627\u0621 \u062d\u062c\u0645\u0647 1.5 \u0644\u062a\u0631 \u0639\u0646\u062f 20\u00b0C.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T = 20 + 273 = 293 K<br>\n 2. P = nRT \/ V<br>\n 3. P = (0.45 \u00d7 0.0821 \u00d7 293) \/ 1.5<br>\n 4. P \u2248 7.2 atm\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h2>\n <div class=\"mb-3\">\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u064a\u0646\u0635 \u0639\u0644\u0649:<\/strong> \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u062e\u0644\u064a\u0637 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u064a\u0633\u0627\u0648\u064a \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632.<\/p>\n <p class=\"font-mono text-yellow-300 text-center text-lg bg-white\/5 p-2 rounded-lg\" dir=\"ltr\">P_Total = P_A + P_B + P_C + …<\/p>\n <p class=\"text-xs text-slate-400 mt-1\"><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a:<\/strong> \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0630\u064a \u064a\u0624\u062b\u0631 \u0628\u0647 \u0627\u0644\u063a\u0627\u0632 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0637 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u064a\u0634\u063a\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0648\u062d\u062f\u0647.<\/p>\n <\/div>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u064a\u062d\u062a\u0648\u064a \u0648\u0639\u0627\u0621 \u0639\u0644\u0649 \u062e\u0644\u064a\u0637 \u0645\u0646 \u063a\u0627\u0632\u064a \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 0.78 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 0.21 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0639\u0627\u0621\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n P_Total = P_Nitrogen + P_Oxygen<br>\n P_Total = 0.78 atm + 0.21 atm<br>\n P_Total = 0.99 atm\n <\/div>\n <\/div>\n \n <div id=\"dalton-law-simulation-container\"><\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 (Diffusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0627\u062e\u062a\u0644\u0627\u0637 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u0628\u0639\u0636\u0647\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0639\u0637\u0631).<\/p>\n <\/div>\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u062a\u062f\u0641\u0642 (Effusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0645\u0631\u0648\u0631 \u0627\u0644\u063a\u0627\u0632 \u0639\u0628\u0631 \u0641\u062a\u062d\u0629 \u0635\u063a\u064a\u0631\u0629 (\u0645\u062b\u0644 \u062a\u0633\u0631\u0628 \u0627\u0644\u0647\u0648\u0627\u0621).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\n <h3 class=\"text-base font-bold text-purple-300 mb-1\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 (Graham’s Law)<\/h3>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u063a\u0627\u0632 \u062a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u062c\u0630\u0631 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0644\u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629.<\/p>\n <div class=\"my-2 text-center bg-black\/20 p-2 rounded\">\n <span class=\"font-mono text-base text-yellow-300\" dir=\"ltr\">Rate A \/ Rate B = \u221a(Molar Mass B \/ Molar Mass A)<\/span>\n <\/div>\n <p class=\"text-xs text-slate-400 italic\">\u0645\u062b\u0627\u0644: H\u2082 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639 \u0645\u0646 O\u2082 \u0644\u0623\u0646 \u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0623\u0635\u063a\u0631.<\/p>\n <\/div>\n \n <div id=\"graham-law-simulation-container\"><\/div>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-sm\">\n <li>\u062a\u0641\u0633\u0631 <span class=\"text-purple-300\">\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629<\/span> \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a.<\/li>\n <li><span class=\"text-purple-300\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/span> \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 P, V, T, n.<\/li>\n <li>\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0648<span class=\"text-teal-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629<\/span> \u062a\u062d\u064a\u062f \u0639\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629.<\/li>\n <li>\u064a\u0633\u062a\u062e\u062f\u0645 <span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/span> \u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062e\u0644\u064a\u0637\u060c \u0648<span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/span> \u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631.<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <div>\n <p class=\"font-bold mb-1\">1. (\u062a\u0641\u0643\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645\u064a): \u0644\u0645\u0627\u0630\u0627 \u064a\u0646\u0643\u0645\u0634 \u0628\u0627\u0644\u0648\u0646 \u0645\u0646\u0641\u0648\u062e \u0639\u0646\u062f \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062b\u0644\u0627\u062c\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0648\u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 (\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644).<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">2. (\u062d\u0633\u0627\u0628\u0627\u062a): \u0625\u0630\u0627 \u0643\u0627\u0646 \u062d\u062c\u0645 \u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 200 \u0645\u0644 \u0639\u0646\u062f \u0636\u063a\u0637 1.0 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0636\u063a\u0637\u0647\u0627 \u0625\u0630\u0627 \u062a\u0645 \u0636\u063a\u0637\u0647\u0627 \u0625\u0644\u0649 \u062d\u062c\u0645 100 \u0645\u0644 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u062b\u0627\u0628\u062a\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 P\u2081V\u2081 = P\u2082V\u2082.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">3. (\u062a\u0641\u0643\u064a\u0631 \u0646\u0642\u062f\u064a): \u0623\u064a \u0627\u0644\u063a\u0627\u0632\u064a\u0646 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639\u060c \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 (He) \u0623\u0645 \u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 (CO\u2082)\u060c \u0648\u0644\u0645\u0627\u0630\u0627\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0631\u062c\u0639 \u0625\u0644\u0649 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0648\u0642\u0627\u0631\u0646 \u0627\u0644\u0643\u062a\u0644 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u064a\u0646.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">4. (\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629): \u0627\u062d\u0633\u0628 \u062d\u062c\u0645 16 \u062c\u0631\u0627\u0645\u064b\u0627 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082) \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 25\u00b0C \u0648\u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. (\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082 \u2248 32 g\/mol)<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a PV=nRT. \u0644\u0627 \u062a\u0646\u0633 \u062a\u062d\u0648\u064a\u0644 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u0643\u0644\u0641\u0646 \u0648\u062d\u0633\u0627\u0628 \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a \u0623\u0648\u0644\u0627\u064b.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"bg-yellow-900\/20 p-4 rounded-xl border-l-4 border-yellow-400 mt-6\">\n <h2 class=\"text-xl font-semibold text-yellow-300 mb-3 flex items-center gap-2\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.311a7.5 7.5 0 0 1-7.5 0c-1.421-.62-2.8-1.5-3.995-2.582a9.753 9.753 0 0 1-2.28-4.117c-.164-1.03-.164-2.07 0-3.1a9.753 9.753 0 0 1 2.28-4.117c1.195-1.082 2.574-1.962 3.995-2.582a7.5 7.5 0 0 1 7.5 0c1.421.62 2.8 1.5 3.995 2.582a9.753 9.753 0 0 1 2.28 4.117c.164 1.03.164 2.07 0 3.1a9.753 9.753 0 0 1-2.28 4.117c-1.195-1.082-2.574-1.962-3.995-2.582Z\"><\/path>\n <\/svg>\n <span>\u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/span>\n <\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-sm\">\n <li><strong>\u0627\u062d\u0641\u0638 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0648\u062a\u062d\u0648\u064a\u0644\u0627\u062a\u0647\u0627:<\/strong> \u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646 atm, mmHg, kPa \u0623\u0633\u0627\u0633\u064a \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644.<\/li>\n <li><strong>\u062a\u062f\u0631\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629:<\/strong> \u0644\u0643\u0644 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0632 \u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u060c \u0648\u0627\u0644\u062a\u0645\u0631\u064a\u0646 \u0647\u0648 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646.<\/li>\n <li><strong>\u0627\u0641\u0647\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0644\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u062d\u0641\u0638 \u0641\u0642\u0637:<\/strong> \u0627\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0633\u0644\u0648\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629.<\/li>\n <li><strong>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\u0629 \u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a:<\/strong> \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u064a\u0648\u0636\u062d \u0627\u0644\u0639\u0644\u0627\u0642\u0629 (\u0637\u0631\u062f\u064a\u0629 \u0623\u0645 \u0639\u0643\u0633\u064a\u0629) \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629.<\/li>\n <\/ul>\n <\/section>\n\n <\/div>\n <\/div>\n \n \n <script>\n \/\/ =============================================\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629\n \/\/ =============================================\n function createGasSimulation() {\n const container = document.getElementById('gas-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <button id=\"gas-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex justify-center mb-4\">\n <canvas id=\"gas-canvas\" width=\"450\" height=\"300\" class=\"rounded-md w-full max-w-[450px]\"><\/canvas>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6\">\n <div class=\"flex flex-col items-center\">\n <label class=\"font-semibold mb-2 text-slate-300\">\u0646\u0648\u0639 \u0627\u0644\u063a\u0627\u0632<\/label>\n <div class=\"flex gap-2 p-1 bg-slate-700\/50 rounded-lg\">\n <button id=\"gas-ideal-btn\" class=\"px-3 py-1 text-sm rounded-md transition-colors bg-purple-600 text-white shadow-md\">\u0645\u062b\u0627\u0644\u064a<\/button>\n <button id=\"gas-real-btn\" class=\"px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50\">\u062d\u0642\u064a\u0642\u064a<\/button>\n <\/div>\n <\/div>\n <div class=\"flex flex-col\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center text-sm\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"temp-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"temperature-slider\" min=\"1\" max=\"10\" step=\"1\" value=\"5\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"temp-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"flex flex-col\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center text-sm\">\u0627\u0644\u0636\u063a\u0637 (\u0639\u0628\u0631 \u0627\u0644\u062d\u062c\u0645)<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"pressure-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"pressure-slider\" min=\"1\" max=\"10\" step=\"1\" value=\"3\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"pressure-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-6 text-sm text-center text-slate-400 p-3 bg-slate-800\/30 rounded-md\">\n <p><span class=\"font-bold text-purple-300\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a:<\/span> \u062c\u0633\u064a\u0645\u0627\u062a \u0646\u0642\u0637\u064a\u0629 \u0645\u0647\u0645\u0644\u0629 \u0627\u0644\u062d\u062c\u0645\u060c \u0644\u0627 \u062a\u062a\u062c\u0627\u0630\u0628\u060c \u0648\u062a\u0635\u0627\u062f\u0645\u0627\u062a\u0647\u0627 \u0645\u0631\u0646\u0629.<\/p>\n <p class=\"mt-1\"><span class=\"font-bold text-teal-300\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a:<\/span> \u062c\u0633\u064a\u0645\u0627\u062a \u0644\u0647\u0627 \u062d\u062c\u0645\u060c \u0648\u062a\u0638\u0647\u0631 \u0628\u064a\u0646\u0647\u0627 \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0639\u0646\u062f \u0627\u0646\u062e\u0641\u0627\u0636 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0636\u063a\u0637.<\/p>\n <p class=\"mt-2 text-xs text-slate-500\">\u062c\u0631\u0651\u0628 \u062e\u0641\u0636 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0644\u0645\u0644\u0627\u062d\u0638\u0629 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/p>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n const canvas = document.getElementById('gas-canvas');\n const ctx = canvas.getContext('2d');\n let gasType = 'ideal';\n let temperature = 5;\n let pressure = 3;\n const width = canvas.width;\n const height = 300;\n const numParticles = 60;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, x, y, vx, vy, radius, color) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n this.color = color;\n }\n }\n \n function resetParticles() {\n particles = [];\n for (let i = 0; i < numParticles; i++) {\n particles.push(new Particle(\n i,\n Math.random() * width,\n Math.random() * height,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n gasType === 'ideal' ? 2 : 5,\n gasType === 'ideal' ? '#a78bfa' : '#2dd4bf'\n ));\n }\n }\n \n function updateParticleProperties() {\n particles.forEach(p => {\n p.radius = gasType === 'ideal' ? 2 : 5;\n p.color = gasType === 'ideal' ? '#a78bfa' : '#2dd4bf';\n });\n }\n \n function render() {\n const currentHeight = height * (1 - (pressure - 1) \/ 12);\n ctx.clearRect(0, 0, width, height);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, 0, width, currentHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, width, height);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, currentHeight - 2, width + 2, 4);\n \n const speedMultiplier = Math.max(0.1, temperature \/ 5);\n \n particles.forEach((p, i) => {\n p.x += p.vx * speedMultiplier;\n p.y += p.vy * speedMultiplier;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > width) { p.x = width - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > currentHeight) { p.y = currentHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0644\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\n if (gasType === 'real' && temperature < 4 && pressure > 6) {\n for (let j = i + 1; j < particles.length; j++) {\n const other = particles[j];\n const dx = other.x - p.x;\n const dy = other.y - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const attractionRange = 40;\n \n if (dist < attractionRange) {\n const force = 0.005 * (1 - dist \/ attractionRange);\n const ax = force * dx \/ dist;\n const ay = force * dy \/ dist;\n p.vx += ax;\n p.vy += ay;\n other.vx -= ax;\n other.vy -= ay;\n }\n }\n }\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u0639 \u0628\u0639\u0636\u0647\u0627\n for (let j = i + 1; j < particles.length; j++) {\n const other = particles[j];\n const dx = other.x - p.x;\n const dy = other.y - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const minDist = p.radius + other.radius;\n if (dist < minDist) {\n const angle = Math.atan2(dy, dx);\n const targetX = p.x + Math.cos(angle) * minDist;\n const targetY = p.y + Math.sin(angle) * minDist;\n const ax = (targetX - other.x) * 0.1;\n const ay = (targetY - other.y) * 0.1;\n p.vx -= ax;\n p.vy -= ay;\n other.vx += ax;\n other.vy += ay;\n }\n }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = p.color;\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\n resetParticles();\n render();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('gas-ideal-btn').addEventListener('click', () => {\n gasType = 'ideal';\n document.getElementById('gas-ideal-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors bg-purple-600 text-white shadow-md';\n document.getElementById('gas-real-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50';\n updateParticleProperties();\n });\n \n document.getElementById('gas-real-btn').addEventListener('click', () => {\n gasType = 'real';\n document.getElementById('gas-ideal-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50';\n document.getElementById('gas-real-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors bg-teal-600 text-white shadow-md';\n updateParticleProperties();\n });\n \n document.getElementById('temperature-slider').addEventListener('input', (e) => {\n temperature = parseInt(e.target.value);\n });\n \n document.getElementById('pressure-slider').addEventListener('input', (e) => {\n pressure = parseInt(e.target.value);\n });\n \n document.getElementById('temp-decrease-btn').addEventListener('click', () => {\n temperature = Math.max(1, temperature - 1);\n document.getElementById('temperature-slider').value = temperature;\n });\n \n document.getElementById('temp-increase-btn').addEventListener('click', () => {\n temperature = Math.min(10, temperature + 1);\n document.getElementById('temperature-slider').value = temperature;\n });\n \n document.getElementById('pressure-decrease-btn').addEventListener('click', () => {\n pressure = Math.max(1, pressure - 1);\n document.getElementById('pressure-slider').value = pressure;\n });\n \n document.getElementById('pressure-increase-btn').addEventListener('click', () => {\n pressure = Math.min(10, pressure + 1);\n document.getElementById('pressure-slider').value = pressure;\n });\n \n document.getElementById('gas-reset-btn').addEventListener('click', () => {\n gasType = 'ideal';\n temperature = 5;\n pressure = 3;\n document.getElementById('temperature-slider').value = temperature;\n document.getElementById('pressure-slider').value = pressure;\n document.getElementById('gas-ideal-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors bg-purple-600 text-white shadow-md';\n document.getElementById('gas-real-btn').className = 'px-3 py-1 text-sm rounded-md transition-colors text-slate-300 hover:bg-slate-600\/50';\n resetParticles();\n });\n }\n \n \/\/ =============================================\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644\n \/\/ =============================================\n function createBoyleLawSimulation() {\n const container = document.getElementById('boyle-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <button id=\"boyle-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas id=\"boyle-canvas\" width=\"350\" height=\"280\" class=\"rounded-md\"><\/canvas>\n <div id=\"boyle-pressure-gauge\"><\/div>\n <\/div>\n <div class=\"w-full max-w-md mx-auto mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u062d\u062c\u0645 \u0627\u0644\u0645\u0643\u0628\u0633<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"boyle-volume-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"boyle-volume-slider\" min=\"2\" max=\"10\" step=\"0.1\" value=\"7\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"boyle-volume-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div class=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span id=\"boyle-volume-value\">\u0627\u0644\u062d\u062c\u0645: 7.0<\/span>\n <span id=\"boyle-pressure-value\">\u0627\u0644\u0636\u063a\u0637: 14.3<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u062d\u0631\u0643 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0644\u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u062c\u0645. \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u062a\u0632\u062f\u0627\u062f \u0627\u0635\u0637\u062f\u0627\u0645\u0627\u062a \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\n function createPressureGauge(pressure, maxPressure) {\n const gaugeContainer = document.getElementById('boyle-pressure-gauge');\n const height = 150;\n const width = 30;\n const paddingTop = 10;\n const paddingBottom = 10;\n const fillableHeight = height - paddingTop - paddingBottom;\n \n const pressureRatio = Math.min(pressure \/ maxPressure, 1);\n const fillHeight = fillableHeight * pressureRatio;\n \n const r = Math.floor(255 * pressureRatio);\n const g = Math.floor(255 * (1 - pressureRatio));\n const fillColor = `rgb(${r}, ${g}, 80)`;\n \n gaugeContainer.innerHTML = `\n <div class=\"flex flex-col items-center\">\n <svg width=\"${width}\" height=\"${height}\" class=\"bg-slate-700\/50 rounded-lg\">\n <rect x=\"0\" y=\"${height - paddingBottom - fillHeight}\" width=\"${width}\" height=\"${fillHeight}\" fill=\"${fillColor}\" class=\"transition-all duration-200\"><\/rect>\n <\/svg>\n <span class=\"text-xs mt-1 text-slate-400\">\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637<\/span>\n <\/div>\n `;\n }\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('boyle-canvas');\n const ctx = canvas.getContext('2d');\n let volume = 7;\n const containerWidth = 350;\n const containerHeight = 280;\n const numParticles = 40;\n const k = 100;\n const minVolume = 2;\n const maxVolume = 10;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, x, y, vx, vy, radius) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n }\n }\n \n function initParticles() {\n particles = [];\n for (let i = 0; i < numParticles; i++) {\n particles.push(new Particle(\n i,\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3\n ));\n }\n }\n \n function updateSimulation() {\n const pressure = k \/ volume;\n const maxPressure = k \/ minVolume;\n \n document.getElementById('boyle-volume-value').textContent = `\u0627\u0644\u062d\u062c\u0645: ${volume.toFixed(1)}`;\n document.getElementById('boyle-pressure-value').textContent = `\u0627\u0644\u0636\u063a\u0637: ${pressure.toFixed(1)}`;\n createPressureGauge(pressure, maxPressure);\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n const pistonHeight = containerHeight * (volume \/ maxVolume);\n \n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, 0, containerWidth, pistonHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, pistonHeight - 2, containerWidth + 2, 4);\n \n particles.forEach(p => {\n p.x += p.vx;\n p.y += p.vy;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > pistonHeight) { p.y = pistonHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#c4b5fd';\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n initParticles();\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('boyle-volume-slider').addEventListener('input', (e) => {\n volume = parseFloat(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('boyle-volume-decrease-btn').addEventListener('click', () => {\n volume = Math.max(minVolume, parseFloat((volume - 0.5).toFixed(1)));\n document.getElementById('boyle-volume-slider').value = volume;\n updateSimulation();\n });\n \n document.getElementById('boyle-volume-increase-btn').addEventListener('click', () => {\n volume = Math.min(maxVolume, parseFloat((volume + 0.5).toFixed(1)));\n document.getElementById('boyle-volume-slider').value = volume;\n updateSimulation();\n });\n \n document.getElementById('boyle-reset-btn').addEventListener('click', () => {\n volume = 7;\n document.getElementById('boyle-volume-slider').value = volume;\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 3. \u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644\n \/\/ =============================================\n function createBoyleLawGraph() {\n const container = document.getElementById('boyle-law-graph-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 class=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <svg id=\"boyle-graph\" width=\"100%\" height=\"300\" viewBox=\"0 0 400 300\"><\/svg>\n <div class=\"w-full max-w-sm mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u062d\u062c\u0645<\/label>\n <input type=\"range\" id=\"boyle-graph-slider\" min=\"1\" max=\"10\" step=\"0.1\" value=\"5\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <div class=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span id=\"boyle-graph-volume\">\u0627\u0644\u062d\u062c\u0645: 5.0 \u0644\u062a\u0631<\/span>\n <span id=\"boyle-graph-pressure\">\u0627\u0644\u0636\u063a\u0637: 8.0 \u0636\u063a\u0637 \u062c\u0648\u064a<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637 \u0628\u0634\u0643\u0644 \u0639\u0643\u0633\u064a \u0645\u0639 \u062a\u063a\u064a\u0631 \u0627\u0644\u062d\u062c\u0645 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.\n <\/p>\n <\/div>\n `;\n \n const k = 40;\n let volume = 5;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = 10;\n const maxPressure = k \/ 1;\n \n const svg = document.getElementById('boyle-graph');\n \n function getX(v) {\n return padding + ((v - 1) \/ (maxVolume - 1)) * (width - 2 * padding);\n }\n \n function getY(p) {\n return height - padding - (p \/ maxPressure) * (height - 2 * padding);\n }\n \n function createPathData() {\n let path = `M ${getX(1)} ${getY(k \/ 1)}`;\n for (let v = 1.1; v <= maxVolume; v += 0.1) {\n path += ` L ${getX(v)} ${getY(k \/ v)}`;\n }\n return path;\n }\n \n function updateGraph() {\n const pressure = k \/ volume;\n const currentX = getX(volume);\n const currentY = getY(pressure);\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\n document.getElementById('boyle-graph-volume').textContent = `\u0627\u0644\u062d\u062c\u0645: ${volume.toFixed(1)} \u0644\u062a\u0631`;\n document.getElementById('boyle-graph-pressure').textContent = `\u0627\u0644\u0636\u063a\u0637: ${pressure.toFixed(1)} \u0636\u063a\u0637 \u062c\u0648\u064a`;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b SVG\n svg.innerHTML = '';\n \n \/\/ \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const axes = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes.setAttribute('x1', padding);\n axes.setAttribute('y1', height - padding);\n axes.setAttribute('x2', width - padding);\n axes.setAttribute('y2', height - padding);\n axes.setAttribute('stroke', '#6b7280');\n axes.setAttribute('stroke-width', '2');\n svg.appendChild(axes);\n \n const axes2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes2.setAttribute('x1', padding);\n axes2.setAttribute('y1', height - padding);\n axes2.setAttribute('x2', padding);\n axes2.setAttribute('y2', padding);\n axes2.setAttribute('stroke', '#6b7280');\n axes2.setAttribute('stroke-width', '2');\n svg.appendChild(axes2);\n \n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const labelX = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelX.setAttribute('x', width \/ 2);\n labelX.setAttribute('y', height - 5);\n labelX.setAttribute('fill', '#9ca3af');\n labelX.setAttribute('text-anchor', 'middle');\n labelX.setAttribute('font-size', '12');\n labelX.textContent = '\u0627\u0644\u062d\u062c\u0645 (V)';\n svg.appendChild(labelX);\n \n const labelY = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelY.setAttribute('x', 15);\n labelY.setAttribute('y', height \/ 2);\n labelY.setAttribute('fill', '#9ca3af');\n labelY.setAttribute('text-anchor', 'middle');\n labelY.setAttribute('transform', `rotate(-90, 15, ${height\/2})`);\n labelY.setAttribute('font-size', '12');\n labelY.textContent = '\u0627\u0644\u0636\u063a\u0637 (P)';\n svg.appendChild(labelY);\n \n \/\/ \u0627\u0644\u0645\u0646\u062d\u0646\u0649\n const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n path.setAttribute('d', createPathData());\n path.setAttribute('fill', 'none');\n path.setAttribute('stroke', '#a78bfa');\n path.setAttribute('stroke-width', '3');\n svg.appendChild(path);\n \n \/\/ \u0627\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\n const point = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n point.setAttribute('cx', currentX);\n point.setAttribute('cy', currentY);\n point.setAttribute('r', '6');\n point.setAttribute('fill', '#c4b5fd');\n point.setAttribute('stroke', '#a78bfa');\n point.setAttribute('stroke-width', '2');\n svg.appendChild(point);\n \n \/\/ \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0646\u0642\u0637\u0629 \u0644\u0644\u0645\u062d\u0627\u0648\u0631\n const line1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line1.setAttribute('x1', currentX);\n line1.setAttribute('y1', currentY);\n line1.setAttribute('x2', currentX);\n line1.setAttribute('y2', height - padding);\n line1.setAttribute('stroke', '#c4b5fd');\n line1.setAttribute('stroke-width', '1');\n line1.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line1);\n \n const line2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line2.setAttribute('x1', currentX);\n line2.setAttribute('y1', currentY);\n line2.setAttribute('x2', padding);\n line2.setAttribute('y2', currentY);\n line2.setAttribute('stroke', '#c4b5fd');\n line2.setAttribute('stroke-width', '1');\n line2.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line2);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\n updateGraph();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c \u0627\u0644\u062d\u062f\u062b\n document.getElementById('boyle-graph-slider').addEventListener('input', (e) => {\n volume = parseFloat(e.target.value);\n updateGraph();\n });\n }\n \n \/\/ =============================================\n \/\/ 4. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644\n \/\/ =============================================\n function createCharlesLawSimulation() {\n const container = document.getElementById('charles-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <button id=\"charles-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas id=\"charles-canvas\" width=\"350\" height=\"280\" class=\"rounded-md\"><\/canvas>\n <div id=\"charles-thermometer\"><\/div>\n <\/div>\n <div class=\"w-full max-w-md mx-auto mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"charles-temp-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"charles-temp-slider\" min=\"100\" max=\"500\" step=\"1\" value=\"300\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"charles-temp-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div class=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span id=\"charles-temp-value\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629: 300 K (27 \u00b0C)<\/span>\n <span id=\"charles-volume-value\">\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: 6.8<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u062d\u0631\u0643 \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0644\u0632\u064a\u0627\u062f\u0629 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629. \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u062a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0648\u064a\u062a\u0645\u062f\u062f \u0627\u0644\u0648\u0639\u0627\u0621 (\u064a\u0632\u062f\u0627\u062f \u0627\u0644\u062d\u062c\u0645) \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0636\u063a\u0637 \u062b\u0627\u0628\u062a\u064b\u0627.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\n function createThermometer(temperature, minTemp, maxTemp) {\n const thermometerContainer = document.getElementById('charles-thermometer');\n const height = 150;\n const width = 30;\n \n const tempRatio = (temperature - minTemp) \/ (maxTemp - minTemp);\n const fillHeight = (height - 20) * tempRatio;\n \n const r = Math.floor(255 * tempRatio);\n const b = Math.floor(255 * (1 - tempRatio));\n const fillColor = `rgb(${r}, 80, ${b})`;\n \n thermometerContainer.innerHTML = `\n <div class=\"flex flex-col items-center\">\n <svg width=\"${width}\" height=\"${height}\" class=\"bg-slate-700\/50 rounded-full border-2 border-slate-600\">\n <rect x=\"5\" y=\"${height - 10 - fillHeight}\" width=\"${width - 10}\" height=\"${fillHeight}\" fill=\"${fillColor}\" rx=\"5\" ry=\"5\" class=\"transition-all duration-200\"><\/rect>\n <circle cx=\"${width \/ 2}\" cy=\"${height - 10}\" r=\"8\" fill=\"${fillColor}\" class=\"transition-all duration-200\"><\/circle>\n <\/svg>\n <span class=\"text-xs mt-1 text-slate-400\">\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/span>\n <\/div>\n `;\n }\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('charles-canvas');\n const ctx = canvas.getContext('2d');\n const minTempK = 100;\n const maxTempK = 500;\n let temperatureK = 300;\n const containerWidth = 350;\n const containerHeight = 280;\n const numParticles = 40;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, x, y, vx, vy, radius) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n }\n }\n \n function initParticles() {\n particles = [];\n for (let i = 0; i < numParticles; i++) {\n particles.push(new Particle(\n i,\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3\n ));\n }\n }\n \n function updateSimulation() {\n const tempC = temperatureK - 273.15;\n const volumeRatio = temperatureK \/ maxTempK;\n const volume = (volumeRatio * 8) + 2;\n \n document.getElementById('charles-temp-value').textContent = `\u0627\u0644\u062d\u0631\u0627\u0631\u0629: ${temperatureK.toFixed(0)} K (${tempC.toFixed(0)} \u00b0C)`;\n document.getElementById('charles-volume-value').textContent = `\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: ${volume.toFixed(1)}`;\n createThermometer(temperatureK, minTempK, maxTempK);\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n const pistonHeight = containerHeight * (temperatureK \/ maxTempK);\n const speedMultiplier = Math.sqrt(temperatureK \/ minTempK);\n const pistonY = containerHeight - pistonHeight;\n \n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u063a\u0627\u0632\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, pistonY, containerWidth, pistonHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n \n particles.forEach(p => {\n p.x += p.vx * speedMultiplier;\n p.y += p.vy * speedMultiplier;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#c4b5fd';\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n initParticles();\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('charles-temp-slider').addEventListener('input', (e) => {\n temperatureK = parseFloat(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('charles-temp-decrease-btn').addEventListener('click', () => {\n temperatureK = Math.max(minTempK, temperatureK - 10);\n document.getElementById('charles-temp-slider').value = temperatureK;\n updateSimulation();\n });\n \n document.getElementById('charles-temp-increase-btn').addEventListener('click', () => {\n temperatureK = Math.min(maxTempK, temperatureK + 10);\n document.getElementById('charles-temp-slider').value = temperatureK;\n updateSimulation();\n });\n \n document.getElementById('charles-reset-btn').addEventListener('click', () => {\n temperatureK = 300;\n document.getElementById('charles-temp-slider').value = temperatureK;\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 5. \u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644\n \/\/ =============================================\n function createCharlesLawGraph() {\n const container = document.getElementById('charles-law-graph-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 class=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <svg id=\"charles-graph\" width=\"100%\" height=\"300\" viewBox=\"0 0 400 300\"><\/svg>\n <div class=\"w-full max-w-sm mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0631\u064a\u0643 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label>\n <input type=\"range\" id=\"charles-graph-slider\" min=\"100\" max=\"500\" step=\"1\" value=\"300\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <div class=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span id=\"charles-graph-temp\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629: 300 K (27\u00b0C)<\/span>\n <span id=\"charles-graph-volume\">\u0627\u0644\u062d\u062c\u0645: 15.00 \u0644\u062a\u0631<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u062d\u062c\u0645 \u0628\u0634\u0643\u0644 \u0637\u0631\u062f\u064a \u0645\u0639 \u062a\u063a\u064a\u0631 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.\n <\/p>\n <\/div>\n `;\n \n const minTempK = 100;\n const maxTempK = 500;\n let temperatureK = 300;\n const k = 0.05;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = k * maxTempK;\n \n const svg = document.getElementById('charles-graph');\n \n function getX(t) {\n return padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n }\n \n function getY(v) {\n return height - padding - (v \/ maxVolume) * (height - 2 * padding);\n }\n \n function updateGraph() {\n const volume = k * temperatureK;\n const tempC = temperatureK - 273.15;\n const x1 = getX(minTempK);\n const y1 = getY(k * minTempK);\n const x2 = getX(maxTempK);\n const y2 = getY(k * maxTempK);\n const currentX = getX(temperatureK);\n const currentY = getY(volume);\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\n document.getElementById('charles-graph-temp').textContent = `\u0627\u0644\u062d\u0631\u0627\u0631\u0629: ${temperatureK.toFixed(0)} K (${tempC.toFixed(0)}\u00b0C)`;\n document.getElementById('charles-graph-volume').textContent = `\u0627\u0644\u062d\u062c\u0645: ${volume.toFixed(2)} \u0644\u062a\u0631`;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b SVG\n svg.innerHTML = '';\n \n \/\/ \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const axes = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes.setAttribute('x1', padding);\n axes.setAttribute('y1', height - padding);\n axes.setAttribute('x2', width - padding);\n axes.setAttribute('y2', height - padding);\n axes.setAttribute('stroke', '#6b7280');\n axes.setAttribute('stroke-width', '2');\n svg.appendChild(axes);\n \n const axes2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n axes2.setAttribute('x1', padding);\n axes2.setAttribute('y1', height - padding);\n axes2.setAttribute('x2', padding);\n axes2.setAttribute('y2', padding);\n axes2.setAttribute('stroke', '#6b7280');\n axes2.setAttribute('stroke-width', '2');\n svg.appendChild(axes2);\n \n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0648\u0631\n const labelX = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelX.setAttribute('x', width \/ 2);\n labelX.setAttribute('y', height - 5);\n labelX.setAttribute('fill', '#9ca3af');\n labelX.setAttribute('text-anchor', 'middle');\n labelX.setAttribute('font-size', '12');\n labelX.textContent = '\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)';\n svg.appendChild(labelX);\n \n const labelY = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n labelY.setAttribute('x', 15);\n labelY.setAttribute('y', height \/ 2);\n labelY.setAttribute('fill', '#9ca3af');\n labelY.setAttribute('text-anchor', 'middle');\n labelY.setAttribute('transform', `rotate(-90, 15, ${height\/2})`);\n labelY.setAttribute('font-size', '12');\n labelY.textContent = '\u0627\u0644\u062d\u062c\u0645 (V)';\n svg.appendChild(labelY);\n \n \/\/ \u0627\u0644\u062e\u0637\n const line = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line.setAttribute('x1', x1);\n line.setAttribute('y1', y1);\n line.setAttribute('x2', x2);\n line.setAttribute('y2', y2);\n line.setAttribute('stroke', '#a78bfa');\n line.setAttribute('stroke-width', '3');\n svg.appendChild(line);\n \n \/\/ \u0627\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\n const point = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n point.setAttribute('cx', currentX);\n point.setAttribute('cy', currentY);\n point.setAttribute('r', '6');\n point.setAttribute('fill', '#c4b5fd');\n point.setAttribute('stroke', '#a78bfa');\n point.setAttribute('stroke-width', '2');\n svg.appendChild(point);\n \n \/\/ \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u0646\u0642\u0637\u0629 \u0644\u0644\u0645\u062d\u0627\u0648\u0631\n const line1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line1.setAttribute('x1', currentX);\n line1.setAttribute('y1', currentY);\n line1.setAttribute('x2', currentX);\n line1.setAttribute('y2', height - padding);\n line1.setAttribute('stroke', '#c4b5fd');\n line1.setAttribute('stroke-width', '1');\n line1.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line1);\n \n const line2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n line2.setAttribute('x1', currentX);\n line2.setAttribute('y1', currentY);\n line2.setAttribute('x2', padding);\n line2.setAttribute('y2', currentY);\n line2.setAttribute('stroke', '#c4b5fd');\n line2.setAttribute('stroke-width', '1');\n line2.setAttribute('stroke-dasharray', '4');\n svg.appendChild(line2);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\n updateGraph();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c \u0627\u0644\u062d\u062f\u062b\n document.getElementById('charles-graph-slider').addEventListener('input', (e) => {\n temperatureK = parseFloat(e.target.value);\n updateGraph();\n });\n }\n \n \/\/ =============================================\n \/\/ 6. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\n \/\/ =============================================\n function createAvogadroLawSimulation() {\n const container = document.getElementById('avogadro-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648<\/h3>\n <button id=\"avogadro-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex flex-col justify-center items-center gap-6\">\n <canvas id=\"avogadro-canvas\" width=\"350\" height=\"280\" class=\"rounded-md\"><\/canvas>\n <\/div>\n <div class=\"w-full max-w-md mx-auto mt-4\">\n <label class=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632 (\u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"avogadro-decrease-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" id=\"avogadro-slider\" min=\"20\" max=\"100\" step=\"1\" value=\"60\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"avogadro-increase-btn\" class=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div class=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span id=\"avogadro-count\">\u0627\u0644\u0643\u0645\u064a\u0629 (n): 60 \u062c\u0633\u064a\u0645<\/span>\n <span id=\"avogadro-volume\">\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): 6.8<\/span>\n <\/div>\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u0639\u0646\u062f \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u063a\u0627\u0632\u060c \u064a\u0632\u062f\u0627\u062f \u0639\u062f\u062f \u0627\u0644\u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621. \u0648\u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0636\u063a\u0637 \u062b\u0627\u0628\u062a\u060c \u064a\u062a\u0645\u062f\u062f \u0627\u0644\u0648\u0639\u0627\u0621 \u0644\u064a\u0632\u062f\u0627\u062f \u0627\u0644\u062d\u062c\u0645.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('avogadro-canvas');\n const ctx = canvas.getContext('2d');\n const minParticles = 20;\n const maxParticles = 100;\n let numParticles = 60;\n const containerWidth = 350;\n const containerHeight = 280;\n let particles = [];\n let animationId = null;\n let allParticles = []; \/\/ \u0644\u062a\u062e\u0632\u064a\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u0645\u062d\u062a\u0645\u0644\u0629\n \n class Particle {\n constructor(id, x, y, vx, vy, radius) {\n this.id = id;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n }\n }\n \n function initAllParticles() {\n allParticles = [];\n for (let i = 0; i < maxParticles; i++) {\n allParticles.push(new Particle(\n i,\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 3,\n (Math.random() - 0.5) * 3,\n 3\n ));\n }\n particles = allParticles.slice(0, numParticles);\n }\n \n function updateSimulation() {\n const volumeRatio = numParticles \/ maxParticles;\n const volume = (volumeRatio * 8) + 2;\n \n document.getElementById('avogadro-count').textContent = `\u0627\u0644\u0643\u0645\u064a\u0629 (n): ${numParticles} \u062c\u0633\u064a\u0645`;\n document.getElementById('avogadro-volume').textContent = `\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): ${volume.toFixed(1)}`;\n \n particles = allParticles.slice(0, numParticles);\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n const pistonHeight = containerHeight * (numParticles \/ maxParticles);\n const pistonY = containerHeight - pistonHeight;\n \n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u063a\u0627\u0632\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, pistonY, containerWidth, pistonHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0643\u0628\u0633\n ctx.fillStyle = 'rgba(71, 85, 105, 0.7)';\n ctx.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n \n particles.forEach(p => {\n p.x += p.vx;\n p.y += p.vy;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#c4b5fd';\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n initAllParticles();\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('avogadro-slider').addEventListener('input', (e) => {\n numParticles = parseInt(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('avogadro-decrease-btn').addEventListener('click', () => {\n numParticles = Math.max(minParticles, numParticles - 5);\n document.getElementById('avogadro-slider').value = numParticles;\n updateSimulation();\n });\n \n document.getElementById('avogadro-increase-btn').addEventListener('click', () => {\n numParticles = Math.min(maxParticles, numParticles + 5);\n document.getElementById('avogadro-slider').value = numParticles;\n updateSimulation();\n });\n \n document.getElementById('avogadro-reset-btn').addEventListener('click', () => {\n numParticles = 60;\n document.getElementById('avogadro-slider').value = numParticles;\n initAllParticles();\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 7. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646\n \/\/ =============================================\n function createDaltonLawSimulation() {\n const container = document.getElementById('dalton-law-simulation-container');\n if (!container) return;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h3>\n <button id=\"dalton-reset-btn\" class=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div class=\"flex justify-center items-center gap-6\">\n <div id=\"dalton-gauge-a\"><\/div>\n <div id=\"dalton-gauge-b\"><\/div>\n <canvas id=\"dalton-canvas\" width=\"300\" height=\"250\" class=\"rounded-md\"><\/canvas>\n <div id=\"dalton-gauge-total\"><\/div>\n <\/div>\n <div class=\"w-full max-w-lg mx-auto mt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <label class=\"font-semibold mb-2 text-slate-300 text-center block text-sm\">\u0643\u0645\u064a\u0629 \u063a\u0627\u0632 A<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"dalton-a-decrease-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">-<\/button>\n <input type=\"range\" id=\"dalton-a-slider\" min=\"0\" max=\"50\" step=\"1\" value=\"25\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\">\n <button id=\"dalton-a-increase-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">+<\/button>\n <\/div>\n <div class=\"mt-1 text-xs text-center text-slate-300 font-mono\" id=\"dalton-a-count\">25 \u062c\u0633\u064a\u0645<\/div>\n <\/div>\n <div>\n <label class=\"font-semibold mb-2 text-slate-300 text-center block text-sm\">\u0643\u0645\u064a\u0629 \u063a\u0627\u0632 B<\/label>\n <div class=\"flex items-center gap-2\">\n <button id=\"dalton-b-decrease-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">-<\/button>\n <input type=\"range\" id=\"dalton-b-slider\" min=\"0\" max=\"50\" step=\"1\" value=\"25\" class=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-teal-400\">\n <button id=\"dalton-b-increase-btn\" class=\"w-6 h-6 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold text-xs\">+<\/button>\n <\/div>\n <div class=\"mt-1 text-xs text-center text-slate-300 font-mono\" id=\"dalton-b-count\">25 \u062c\u0633\u064a\u0645<\/div>\n <\/div>\n <\/div>\n <div class=\"mt-4 text-center p-3 bg-slate-800\/40 rounded-md font-mono text-lg tracking-wider text-slate-200\" id=\"dalton-equation\">\n P<sub class=\"text-red-400\">Total<\/sub> (25.0) = P<sub class=\"text-purple-300\">A<\/sub> (12.5) + P<sub class=\"text-teal-300\">B<\/sub> (12.5)\n <\/div>\n <p class=\"mt-4 text-sm text-center text-slate-400\">\n \u062c\u0631\u0651\u0628 \u062a\u063a\u064a\u064a\u0631 \u0643\u0645\u064a\u0629 \u0643\u0644 \u063a\u0627\u0632. \u0633\u062a\u0644\u0627\u062d\u0638 \u0623\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u0644\u062e\u0644\u064a\u0637 \u064a\u0633\u0627\u0648\u064a \u062f\u0627\u0626\u0645\u064b\u0627 \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632 \u0639\u0644\u0649 \u062d\u062f\u0629.\n <\/p>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0645\u0642\u0627\u064a\u064a\u0633 \u0627\u0644\u0636\u063a\u0637\n function createPressureGauge(containerId, pressure, maxPressure, color, label) {\n const gaugeContainer = document.getElementById(containerId);\n const height = 120;\n const width = 25;\n const paddingTop = 8;\n const paddingBottom = 8;\n const fillableHeight = height - paddingTop - paddingBottom;\n \n const pressureRatio = Math.min(pressure \/ maxPressure, 1);\n const fillHeight = fillableHeight * pressureRatio;\n \n gaugeContainer.innerHTML = `\n <div class=\"flex flex-col items-center\">\n <span class=\"text-xs mb-1 font-semibold\" style=\"color: ${color}\">${label}<\/span>\n <svg width=\"${width}\" height=\"${height}\" class=\"bg-slate-700\/50 rounded-lg\">\n <rect x=\"0\" y=\"${height - paddingBottom - fillHeight}\" width=\"${width}\" height=\"${fillHeight}\" fill=\"${color}\" class=\"transition-all duration-200\"><\/rect>\n <\/svg>\n <\/div>\n `;\n }\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('dalton-canvas');\n const ctx = canvas.getContext('2d');\n const containerWidth = 300;\n const containerHeight = 250;\n const maxParticlesPerGas = 50;\n let numParticlesA = 25;\n let numParticlesB = 25;\n const pressureConstant = 0.5;\n let particles = [];\n let animationId = null;\n \n class Particle {\n constructor(id, type, x, y, vx, vy, radius, color) {\n this.id = id;\n this.type = type;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n this.color = color;\n }\n }\n \n function initParticles() {\n particles = [];\n \n \/\/ \u063a\u0627\u0632 A\n for (let i = 0; i < numParticlesA; i++) {\n particles.push(new Particle(\n i,\n 'A',\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3,\n '#c4b5fd'\n ));\n }\n \n \/\/ \u063a\u0627\u0632 B\n for (let i = 0; i < numParticlesB; i++) {\n particles.push(new Particle(\n numParticlesA + i,\n 'B',\n Math.random() * containerWidth,\n Math.random() * containerHeight,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n 3,\n '#5eead4'\n ));\n }\n }\n \n function updateSimulation() {\n const pressureA = numParticlesA * pressureConstant;\n const pressureB = numParticlesB * pressureConstant;\n const totalPressure = pressureA + pressureB;\n const maxTotalPressure = (maxParticlesPerGas * 2) * pressureConstant;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\n document.getElementById('dalton-a-count').textContent = `${numParticlesA} \u062c\u0633\u064a\u0645`;\n document.getElementById('dalton-b-count').textContent = `${numParticlesB} \u062c\u0633\u064a\u0645`;\n document.getElementById('dalton-equation').innerHTML = `P<sub class=\"text-red-400\">Total<\/sub> (${totalPressure.toFixed(1)}) = P<sub class=\"text-purple-300\">A<\/sub> (${pressureA.toFixed(1)}) + P<sub class=\"text-teal-300\">B<\/sub> (${pressureB.toFixed(1)})`;\n \n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0642\u0627\u064a\u064a\u0633 \u0627\u0644\u0636\u063a\u0637\n createPressureGauge('dalton-gauge-a', pressureA, maxTotalPressure, '#c4b5fd', 'P (A)');\n createPressureGauge('dalton-gauge-b', pressureB, maxTotalPressure, '#5eead4', 'P (B)');\n createPressureGauge('dalton-gauge-total', totalPressure, maxTotalPressure, '#f87171', 'P (Total)');\n \n initParticles();\n \n if (animationId) {\n cancelAnimationFrame(animationId);\n }\n \n render();\n }\n \n function render() {\n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';\n ctx.fillRect(0, 0, containerWidth, containerHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n particles.forEach(p => {\n p.x += p.vx;\n p.y += p.vy;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = p.color;\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n updateSimulation();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('dalton-a-slider').addEventListener('input', (e) => {\n numParticlesA = parseInt(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('dalton-b-slider').addEventListener('input', (e) => {\n numParticlesB = parseInt(e.target.value);\n updateSimulation();\n });\n \n document.getElementById('dalton-a-decrease-btn').addEventListener('click', () => {\n numParticlesA = Math.max(0, numParticlesA - 5);\n document.getElementById('dalton-a-slider').value = numParticlesA;\n updateSimulation();\n });\n \n document.getElementById('dalton-a-increase-btn').addEventListener('click', () => {\n numParticlesA = Math.min(maxParticlesPerGas, numParticlesA + 5);\n document.getElementById('dalton-a-slider').value = numParticlesA;\n updateSimulation();\n });\n \n document.getElementById('dalton-b-decrease-btn').addEventListener('click', () => {\n numParticlesB = Math.max(0, numParticlesB - 5);\n document.getElementById('dalton-b-slider').value = numParticlesB;\n updateSimulation();\n });\n \n document.getElementById('dalton-b-increase-btn').addEventListener('click', () => {\n numParticlesB = Math.min(maxParticlesPerGas, numParticlesB + 5);\n document.getElementById('dalton-b-slider').value = numParticlesB;\n updateSimulation();\n });\n \n document.getElementById('dalton-reset-btn').addEventListener('click', () => {\n numParticlesA = 25;\n numParticlesB = 25;\n document.getElementById('dalton-a-slider').value = numParticlesA;\n document.getElementById('dalton-b-slider').value = numParticlesB;\n updateSimulation();\n });\n }\n \n \/\/ =============================================\n \/\/ 8. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645\n \/\/ =============================================\n function createGrahamLawSimulation() {\n const container = document.getElementById('graham-law-simulation-container');\n if (!container) return;\n \n const GASES = {\n h2: { name: '\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646', formula: 'H\u2082', molarMass: 2.02, color: '#fca5a5' },\n he: { name: '\u0647\u064a\u0644\u064a\u0648\u0645', formula: 'He', molarMass: 4.00, color: '#fdba74' },\n ch4: { name: '\u0645\u064a\u062b\u0627\u0646', formula: 'CH\u2084', molarMass: 16.04, color: '#fde047' },\n n2: { name: '\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646', formula: 'N\u2082', molarMass: 28.01, color: '#86efac' },\n o2: { name: '\u0623\u0643\u0633\u062c\u064a\u0646', formula: 'O\u2082', molarMass: 32.00, color: '#7dd3fc' },\n co2: { name: '\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646', formula: 'CO\u2082', molarMass: 44.01, color: '#a5b4fc' },\n sf6: { name: '\u0633\u062f\u0627\u0633\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0628\u0631\u064a\u062a', formula: 'SF\u2086', molarMass: 146.06, color: '#d8b4fe' }\n };\n const GAS_KEYS = Object.keys(GASES);\n const HEAVIEST_GAS_MM = GASES.sf6.molarMass;\n \n container.innerHTML = `\n <div class=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 class=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0644\u0644\u0627\u0646\u062a\u0634\u0627\u0631<\/h3>\n <div class=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <div class=\"w-full md:w-56 space-y-4\">\n <div>\n <label for=\"graham-gas-a-select\" class=\"font-semibold mb-1 block\" style=\"color: #fca5a5\">\u063a\u0627\u0632 A (\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0623\u064a\u0633\u0631)<\/label>\n <select id=\"graham-gas-a-select\" class=\"w-full p-2 rounded-md bg-slate-700 border border-slate-600 text-white\">\n ${GAS_KEYS.map(key => `<option value=\"${key}\">${GASES[key].name} (${GASES[key].formula})<\/option>`).join('')}\n <\/select>\n <p class=\"text-xs mt-1 text-slate-400\" id=\"graham-gas-a-mass\">\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: 2.02 g\/mol<\/p>\n <\/div>\n <div>\n <label for=\"graham-gas-b-select\" class=\"font-semibold mb-1 block\" style=\"color: #d8b4fe\">\u063a\u0627\u0632 B (\u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0623\u064a\u0645\u0646)<\/label>\n <select id=\"graham-gas-b-select\" class=\"w-full p-2 rounded-md bg-slate-700 border border-slate-600 text-white\">\n ${GAS_KEYS.map(key => `<option value=\"${key}\" ${key === 'sf6' ? 'selected' : ''}>${GASES[key].name} (${GASES[key].formula})<\/option>`).join('')}\n <\/select>\n <p class=\"text-xs mt-1 text-slate-400\" id=\"graham-gas-b-mass\">\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: 146.06 g\/mol<\/p>\n <\/div>\n <div class=\"pt-2\">\n <button id=\"graham-start-btn\" class=\"w-full bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 font-semibold\">\u0628\u062f\u0621 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631<\/button>\n <button id=\"graham-reset-btn\" class=\"w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600 font-semibold mt-2 hidden\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button>\n <\/div>\n <\/div>\n <div class=\"flex flex-col items-center\">\n <canvas id=\"graham-canvas\" width=\"400\" height=\"200\" class=\"rounded-md bg-slate-900\/50\"><\/canvas>\n <div class=\"grid grid-cols-2 gap-x-6 gap-y-1 mt-2 text-sm font-mono text-center\">\n <span id=\"graham-a-left\" style=\"color: #fca5a5\">\u063a\u0627\u0632 A \u064a\u0633\u0627\u0631\u064b\u0627: 60<\/span>\n <span id=\"graham-b-left\" style=\"color: #d8b4fe\">\u063a\u0627\u0632 B \u064a\u0633\u0627\u0631\u064b\u0627: 0<\/span>\n <span id=\"graham-a-right\" style=\"color: #fca5a5\">\u063a\u0627\u0632 A \u064a\u0645\u064a\u0646\u064b\u0627: 0<\/span>\n <span id=\"graham-b-right\" style=\"color: #d8b4fe\">\u063a\u0627\u0632 B \u064a\u0645\u064a\u0646\u064b\u0627: 60<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-4 text-center p-3 bg-slate-800\/40 rounded-md\">\n <p class=\"text-sm text-slate-300\">\n \u0645\u0639\u062f\u0644 \u0627\u0646\u062a\u0634\u0627\u0631 \u063a\u0627\u0632 A \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u063a\u0627\u0632 B \u0647\u0648 <span id=\"graham-rate\" class=\"font-bold text-lg text-white\">85.17<\/span> \u0645\u0631\u0629 \u0623\u0633\u0631\u0639.\n <\/p>\n <p class=\"text-xs text-slate-400 mt-1\">\u0645\u062d\u0633\u0648\u0628\u0629 \u0645\u0646:<\/p>\n <div class=\"not-prose my-2 p-3 text-sm bg-black\/20 rounded-lg border border-white\/10 overflow-x-auto font-mono text-center\" id=\"graham-calculation\">\n <p>rate_A \/ rate_B = \u221a (M_B \/ M_A)<\/p>\n <p>= \u221a (146.06 \/ 2.02)<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n \n \/\/ \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n const canvas = document.getElementById('graham-canvas');\n const ctx = canvas.getContext('2d');\n const containerWidth = 400;\n const containerHeight = 200;\n const numParticlesPerGas = 60;\n const baseSpeed = 0.5;\n \n let gasAKey = 'h2';\n let gasBKey = 'sf6';\n let simulationState = 'idle';\n let particles = [];\n let animationId = null;\n let counterIntervalId = null;\n \n class Particle {\n constructor(id, gasKey, x, y, vx, vy, radius, speedMultiplier) {\n this.id = id;\n this.gasKey = gasKey;\n this.x = x;\n this.y = y;\n this.vx = vx;\n this.vy = vy;\n this.radius = radius;\n this.speedMultiplier = speedMultiplier;\n }\n }\n \n function createParticles() {\n particles = [];\n const speedMultiplierA = Math.sqrt(HEAVIEST_GAS_MM \/ GASES[gasAKey].molarMass);\n const speedMultiplierB = Math.sqrt(HEAVIEST_GAS_MM \/ GASES[gasBKey].molarMass);\n \n \/\/ \u063a\u0627\u0632 A \u0641\u064a \u0627\u0644\u064a\u0633\u0627\u0631\n for (let i = 0; i < numParticlesPerGas; i++) {\n particles.push(new Particle(\n i,\n gasAKey,\n Math.random() * (containerWidth \/ 2 - 10),\n Math.random() * containerHeight,\n (Math.random() - 0.5) * baseSpeed,\n (Math.random() - 0.5) * baseSpeed,\n 3,\n speedMultiplierA\n ));\n }\n \n \/\/ \u063a\u0627\u0632 B \u0641\u064a \u0627\u0644\u064a\u0645\u064a\u0646\n for (let i = 0; i < numParticlesPerGas; i++) {\n particles.push(new Particle(\n numParticlesPerGas + i,\n gasBKey,\n containerWidth \/ 2 + 5 + Math.random() * (containerWidth \/ 2 - 10),\n Math.random() * containerHeight,\n (Math.random() - 0.5) * baseSpeed,\n (Math.random() - 0.5) * baseSpeed,\n 3,\n speedMultiplierB\n ));\n }\n \n updateCounts();\n updateRate();\n }\n \n function updateCounts() {\n let aLeft = 0, aRight = 0, bLeft = 0, bRight = 0;\n particles.forEach(p => {\n if (p.gasKey === gasAKey) {\n if (p.x < containerWidth \/ 2) aLeft++; else aRight++;\n } else {\n if (p.x < containerWidth \/ 2) bLeft++; else bRight++;\n }\n });\n \n document.getElementById('graham-a-left').textContent = `\u063a\u0627\u0632 A \u064a\u0633\u0627\u0631\u064b\u0627: ${aLeft}`;\n document.getElementById('graham-a-right').textContent = `\u063a\u0627\u0632 A \u064a\u0645\u064a\u0646\u064b\u0627: ${aRight}`;\n document.getElementById('graham-b-left').textContent = `\u063a\u0627\u0632 B \u064a\u0633\u0627\u0631\u064b\u0627: ${bLeft}`;\n document.getElementById('graham-b-right').textContent = `\u063a\u0627\u0632 B \u064a\u0645\u064a\u0646\u064b\u0627: ${bRight}`;\n }\n \n function updateRate() {\n const selectedGasA = GASES[gasAKey];\n const selectedGasB = GASES[gasBKey];\n const relativeRate = Math.sqrt(selectedGasB.molarMass \/ selectedGasA.molarMass);\n \n document.getElementById('graham-rate').textContent = relativeRate.toFixed(2);\n document.getElementById('graham-calculation').innerHTML = `\n <p>rate_A \/ rate_B = \u221a (M_B \/ M_A)<\/p>\n <p>= \u221a (${selectedGasB.molarMass.toFixed(2)} \/ ${selectedGasA.molarMass.toFixed(2)})<\/p>\n `;\n }\n \n function render() {\n ctx.clearRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0648\u0639\u0627\u0621\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n ctx.lineWidth = 2;\n ctx.strokeRect(0, 0, containerWidth, containerHeight);\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062d\u0627\u062c\u0632 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0648\u0636\u0639 \u0645\u062a\u0648\u0642\u0641\n if (simulationState === 'idle') {\n ctx.beginPath();\n ctx.moveTo(containerWidth \/ 2, 0);\n ctx.lineTo(containerWidth \/ 2, containerHeight);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';\n ctx.stroke();\n }\n \n particles.forEach(p => {\n \/\/ \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\n p.x += p.vx * p.speedMultiplier;\n p.y += p.vy * p.speedMultiplier;\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062c\u062f\u0631\u0627\u0646\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > containerHeight) { p.y = containerHeight - p.radius; p.vy *= -1; }\n \n \/\/ \u062a\u0635\u0627\u062f\u0645 \u0645\u0639 \u0627\u0644\u062d\u0627\u062c\u0632 (\u0641\u0642\u0637 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0648\u0636\u0639 \u0645\u062a\u0648\u0642\u0641)\n if (simulationState === 'idle') {\n if (p.gasKey === gasAKey && p.x + p.radius > containerWidth \/ 2) {\n p.x = containerWidth \/ 2 - p.radius;\n p.vx *= -1;\n }\n if (p.gasKey === gasBKey && p.x - p.radius < containerWidth \/ 2) {\n p.x = containerWidth \/ 2 + p.radius;\n p.vx *= -1;\n }\n }\n \n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n ctx.fillStyle = GASES[p.gasKey].color;\n ctx.fill();\n ctx.closePath();\n });\n \n animationId = requestAnimationFrame(render);\n }\n \n function startSimulation() {\n simulationState = 'running';\n document.getElementById('graham-start-btn').classList.add('hidden');\n document.getElementById('graham-reset-btn').classList.remove('hidden');\n \n \/\/ \u0628\u062f\u0621 \u0627\u0644\u0639\u062f \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\n counterIntervalId = setInterval(updateCounts, 250);\n }\n \n function resetSimulation() {\n simulationState = 'idle';\n document.getElementById('graham-start-btn').classList.remove('hidden');\n document.getElementById('graham-reset-btn').classList.add('hidden');\n \n if (counterIntervalId) {\n clearInterval(counterIntervalId);\n counterIntervalId = null;\n }\n \n createParticles();\n }\n \n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\n createParticles();\n render();\n \n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0639\u0627\u0644\u062c\u0627\u062a \u0627\u0644\u0623\u062d\u062f\u0627\u062b\n document.getElementById('graham-gas-a-select').addEventListener('change', (e) => {\n gasAKey = e.target.value;\n document.getElementById('graham-gas-a-mass').textContent = `\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: ${GASES[gasAKey].molarMass.toFixed(2)} g\/mol`;\n document.querySelector('label[for=\"graham-gas-a-select\"]').style.color = GASES[gasAKey].color;\n resetSimulation();\n });\n \n document.getElementById('graham-gas-b-select').addEventListener('change', (e) => {\n gasBKey = e.target.value;\n document.getElementById('graham-gas-b-mass').textContent = `\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629: ${GASES[gasBKey].molarMass.toFixed(2)} g\/mol`;\n document.querySelector('label[for=\"graham-gas-b-select\"]').style.color = GASES[gasBKey].color;\n resetSimulation();\n });\n \n document.getElementById('graham-start-btn').addEventListener('click', startSimulation);\n document.getElementById('graham-reset-btn').addEventListener('click', resetSimulation);\n }\n \n \/\/ =============================================\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n \/\/ =============================================\n document.addEventListener('DOMContentLoaded', function() {\n createGasSimulation();\n createBoyleLawSimulation();\n createBoyleLawGraph();\n createCharlesLawSimulation();\n createCharlesLawGraph();\n createAvogadroLawSimulation();\n createDaltonLawSimulation();\n createGrahamLawSimulation();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631\u0633 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u064a\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 \u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627: \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631: \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629. \u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637: \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647. \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627: \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 […]<\/p>\n","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-16930","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16930","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=16930"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16930\/revisions"}],"predecessor-version":[{"id":16931,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16930\/revisions\/16931"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=16930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}