\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0627\u0644\u0645\u0633\u0644\u064a\u0629 | \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 \u0648\u0628\u0631\u0646\u0648\u0644\u064a)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n direction: rtl;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6366f1; }\r\n input[type=\"range\"] {\r\n direction: ltr;\r\n -webkit-appearance: none;\r\n background: #334155;\r\n height: 4px;\r\n border-radius: 5px;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 16px;\r\n width: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .ltr { direction: ltr; text-align: left; }\r\n .ltr-inline { direction: ltr; display: inline-block; }\r\n button {\r\n transition: all 0.2s ease;\r\n }\r\n .simulation-container {\r\n margin: 1.5rem 0;\r\n padding: 1rem;\r\n background-color: rgba(0, 0, 0, 0.2);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n }\r\n select {\r\n background-color: #1e293b;\r\n border: 1px solid #334155;\r\n border-radius: 0.5rem;\r\n padding: 0.5rem;\r\n color: white;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n \r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (Fluids in Motion)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u0639\u0627\u0634\u0631<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0646\u064a__\u0627\u0644\u0645\u0648\u0627\u0626\u0639_\u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629_audio.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0646\u064a__\u0627\u0644\u0645\u0648\u0627\u0626\u0639_\u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 \u0648\u0628\u0631\u0646\u0648\u0644\u064a)<\/h2>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border border-blue-500\/30\">\r\n <p class=\"text-base text-slate-300 leading-relaxed\">\u0647\u0644 \u0644\u0627\u062d\u0638\u062a \u0643\u064a\u0641 \u062a\u0646\u062f\u0641\u0639 \u0627\u0644\u0645\u064a\u0627\u0647 \u0628\u0642\u0648\u0629 \u0623\u0643\u0628\u0631 \u0639\u0646\u062f\u0645\u0627 \u062a\u0636\u063a\u0637 \u0639\u0644\u0649 \u0641\u0648\u0647\u0629 \u0627\u0644\u062e\u0631\u0637\u0648\u0645\u061f \u0623\u0648 \u0643\u064a\u0641 \u062a\u0631\u062a\u0641\u0639 \u0627\u0644\u0637\u0627\u0626\u0631\u0629 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0631\u063a\u0645 \u062b\u0642\u0644\u0647\u0627\u061f \u0647\u0630\u0647 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0648\u063a\u064a\u0631\u0647\u0627 \u062a\u0641\u0633\u0631\u0647\u0627 <strong class=\"text-blue-400\">\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629<\/strong> \u0648 <strong class=\"text-blue-400\">\u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a<\/strong>\u060c \u0648\u0647\u0645\u0627 \u0623\u0633\u0627\u0633 \u062f\u0631\u0627\u0633\u0629 \u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0648\u0627\u0626\u0639.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-blue-300\">\u0627\u0644\u062c\u0631\u064a\u0627\u0646 (Flow)<\/h3><p class=\"text-slate-300 text-l\">\u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u0639\u0628\u0631 \u0627\u0644\u0623\u0646\u0627\u0628\u064a\u0628 \u0623\u0648 \u0627\u0644\u0645\u062c\u0627\u0631\u064a.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-blue-300\">\u0627\u0644\u0644\u0632\u0648\u062c\u0629 (Viscosity)<\/h3><p class=\"text-slate-300 text-l\">\u0645\u0645\u0627\u0646\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u0644\u0644\u062c\u0631\u064a\u0627\u0646.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-blue-300\">\u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637<\/h3><p class=\"text-slate-300 text-l\">\u062a\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0645\u0627\u0626\u0639 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-emerald-900\/20 p-3 rounded-lg border border-emerald-500\/30\"><h3 class=\"font-bold text-emerald-300\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645 (\u0627\u0646\u0633\u064a\u0627\u0628\u064a)<\/h3><p class=\"text-emerald-100\/80 text-l\">\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u0629\u060c \u0648\u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u062b\u0627\u0628\u062a\u0629 \u0639\u0646\u062f \u0623\u064a \u0646\u0642\u0637\u0629 \u0645\u0639 \u0627\u0644\u0632\u0645\u0646.<\/p><\/div>\r\n <div class=\"bg-rose-900\/20 p-3 rounded-lg border border-rose-500\/30\"><h3 class=\"font-bold text-rose-300\">\u062c\u0631\u064a\u0627\u0646 \u063a\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 (\u0645\u0636\u0637\u0631\u0628)<\/h3><p class=\"text-rose-100\/80 text-l\">\u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u062a\u062a\u063a\u064a\u0631 \u0645\u0639 \u0627\u0644\u0632\u0645\u0646\u060c \u0648\u062a\u0638\u0647\u0631 \u062f\u0648\u0627\u0645\u0627\u062a.<\/p><\/div>\r\n <\/div>\r\n \r\n <div id=\"flow-types-sim\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 (Streamlines)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\">\u062e\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0647\u0648 \u062e\u0637 \u0648\u0647\u0645\u064a \u064a\u0645\u062b\u0644 \u0645\u0633\u0627\u0631 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u0645\u0627\u0626\u0639 \u0623\u062b\u0646\u0627\u0621 \u062c\u0631\u064a\u0627\u0646\u0647\u0627. \u062e\u0635\u0627\u0626\u0635\u0647:<\/p>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 mt-2\">\r\n <li>\u0644\u0627 \u062a\u062a\u0642\u0627\u0637\u0639 \u0623\u0628\u062f\u0627\u064b.<\/li>\r\n <li>\u0627\u0644\u0645\u0645\u0627\u0633 \u0639\u0646\u062f \u0623\u064a \u0646\u0642\u0637\u0629 \u064a\u062d\u062f\u062f \u0627\u062a\u062c\u0627\u0647 \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639.<\/li>\r\n <li>\u062a\u062a\u0642\u0627\u0631\u0628 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062a\u064a \u062a\u0632\u062f\u0627\u062f \u0641\u064a\u0647\u0627 \u0627\u0644\u0633\u0631\u0639\u0629 (\u0627\u0644\u0623\u0646\u0627\u0628\u064a\u0628 \u0627\u0644\u0636\u064a\u0642\u0629).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 (Compressibility)<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-blue-900\/20 p-3 rounded-lg border border-blue-500\/30\"><h3 class=\"font-bold text-blue-300\">\u0627\u0644\u0633\u0648\u0627\u0626\u0644 (\u063a\u064a\u0631 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)<\/h3><p class=\"text-blue-100\/80 text-l\">\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0635\u063a\u064a\u0631\u0629\u060c \u0641\u0644\u0627 \u064a\u062a\u063a\u064a\u0631 \u062d\u062c\u0645\u0647\u0627 \u0623\u0648 \u0643\u062b\u0627\u0641\u062a\u0647\u0627 \u0628\u0634\u0643\u0644 \u0645\u0644\u062d\u0648\u0638 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <div class=\"bg-rose-900\/20 p-3 rounded-lg border border-rose-500\/30\"><h3 class=\"font-bold text-rose-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a (\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)<\/h3><p class=\"text-rose-100\/80 text-l\">\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0643\u0628\u064a\u0631\u0629\u060c \u0641\u064a\u062a\u063a\u064a\u0631 \u062d\u062c\u0645\u0647\u0627 \u0648\u0643\u062b\u0627\u0641\u062a\u0647\u0627 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <\/div>\r\n \r\n <div id=\"compressibility-sim\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0644\u0632\u0648\u062c\u0629 (Viscosity)<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-amber-900\/20 p-3 rounded-lg border border-amber-500\/30\"><h3 class=\"font-bold text-amber-300\">\u0645\u0648\u0627\u0626\u0639 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629<\/h3><p class=\"text-amber-100\/80 text-l\">\u0645\u062b\u0644 \u0627\u0644\u0639\u0633\u0644 \u0648\u0627\u0644\u0632\u064a\u062a \u0627\u0644\u0628\u0627\u0631\u062f\u060c \u062a\u062c\u0631\u064a \u0628\u0628\u0637\u0621.<\/p><\/div>\r\n <div class=\"bg-cyan-900\/20 p-3 rounded-lg border border-cyan-500\/30\"><h3 class=\"font-bold text-cyan-300\">\u0645\u0648\u0627\u0626\u0639 \u0645\u0646\u062e\u0641\u0636\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629<\/h3><p class=\"text-cyan-100\/80 text-l\">\u0645\u062b\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u0647\u0648\u0627\u0621\u060c \u062a\u062c\u0631\u064a \u0628\u0633\u0647\u0648\u0644\u0629.<\/p><\/div>\r\n <\/div>\r\n \r\n <div id=\"viscosity-sim\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Fluid)<\/h2>\r\n <div class=\"bg-purple-900\/20 p-4 rounded-lg border border-purple-500\/30\">\r\n <p class=\"text-l text-purple-100\/80\">\u0646\u0645\u0648\u0630\u062c \u0646\u0638\u0631\u064a \u0644\u062a\u0633\u0647\u064a\u0644 \u062f\u0631\u0627\u0633\u0629 \u0627\u0644\u0645\u0648\u0627\u0626\u0639\u060c \u064a\u062a\u0645\u064a\u0632 \u0628\u0640: \u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645\u060c \u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637\u060c \u063a\u064a\u0631 \u0644\u0632\u062c\u060c \u063a\u064a\u0631 \u062f\u0648\u0627\u0645\u064a.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 (Continuity Equation)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\r\n <p class=\"text-l text-slate-300\">\u062a\u0639\u0628\u0631 \u0639\u0646 <strong class=\"text-emerald-400\">\u062d\u0641\u0638 \u0627\u0644\u0643\u062a\u0644\u0629<\/strong> \u0641\u064a \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u063a\u064a\u0631 \u0627\u0644\u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/p>\r\n <div class=\"text-center my-3\"><span class=\"font-mono text-emerald-400 text-xl\">A<sub>1<\/sub> v<sub>1<\/sub> = A<sub>2<\/sub> v<sub>2<\/sub><\/span><\/div>\r\n <p class=\"text-l text-slate-300\">\u062d\u064a\u062b <span class=\"font-mono\">A<\/span> \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639\u060c <span class=\"font-mono\">v<\/span> \u0627\u0644\u0633\u0631\u0639\u0629. \u0639\u0646\u062f\u0645\u0627 \u064a\u0636\u064a\u0642 \u0627\u0644\u0623\u0646\u0628\u0648\u0628\u060c \u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639.<\/p>\r\n <\/div>\r\n \r\n <div id=\"continuity-sim\" class=\"simulation-container\"><\/div>\r\n \r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-4\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 7 (\u0635 80) \u2013 \u062a\u062f\u0641\u0642 \u0627\u0644\u062f\u0645<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0634\u0631\u064a\u0627\u0646 \u0645\u0633\u0627\u062d\u0629 \u0645\u0642\u0637\u0639\u0647 <span class=\"font-mono\">6 mm\u00b2<\/span>\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 <span class=\"font-mono\">5\u00d710\u207b\u00b2 m\/s<\/span>. \u064a\u062a\u0641\u0631\u0639 \u0625\u0644\u0649 \u0634\u0639\u064a\u0631\u0627\u062a \u062f\u0645\u0648\u064a\u0629 \u0645\u0633\u0627\u062d\u0629 \u0645\u0642\u0637\u0639 \u0627\u0644\u0634\u0639\u064a\u0631\u0629 <span class=\"font-mono\">0.3 mm\u00b2<\/span>\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 \u0641\u064a\u0647\u0627 <span class=\"font-mono\">2\u00d710\u207b\u00b3 m\/s<\/span>. \u0639\u062f\u062f \u0627\u0644\u0634\u0639\u064a\u0631\u0627\u062a = 500.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-2\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 8 (\u0635 81) \u2013 \u0634\u0644\u0627\u0644\u0627\u062a \u0646\u064a\u0627\u062c\u0627\u0631\u0627<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0639\u0631\u0636 \u0627\u0644\u0645\u062c\u0631\u0649 <span class=\"font-mono\">670 m<\/span>\u060c \u0639\u0645\u0642 \u0627\u0644\u0645\u0627\u0621 <span class=\"font-mono\">2 m<\/span>\u060c \u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062f\u0641\u0642 <span class=\"font-mono\">5525 m\u00b3\/s<\/span>. \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0621 \u2248 4.12 m\/s\u060c \u062d\u062c\u0645\u0647 \u0641\u064a 5 \u062f\u0642\u0627\u0626\u0642 = 1.6575\u00d710\u2076 m\u00b3.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a (Bernoulli\u2019s Equation)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\r\n <p class=\"text-l text-slate-300\">\u062a\u0637\u0628\u064a\u0642 \u0645\u0628\u062f\u0623 <strong class=\"text-purple-400\">\u062d\u0641\u0638 \u0627\u0644\u0637\u0627\u0642\u0629<\/strong> \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062b\u0627\u0644\u064a:<\/p>\r\n <div class=\"text-center my-3 overflow-x-auto\"><span class=\"font-mono text-purple-400 text-lg md:text-xl whitespace-nowrap\">P<sub>1<\/sub> + \u00bd\u03c1v<sub>1<\/sub>\u00b2 + \u03c1gh<sub>1<\/sub> = P<sub>2<\/sub> + \u00bd\u03c1v<sub>2<\/sub>\u00b2 + \u03c1gh<sub>2<\/sub><\/span><\/div>\r\n <p class=\"text-l text-slate-300\">\u0644\u0644\u0623\u0646\u0628\u0648\u0628 \u0627\u0644\u0623\u0641\u0642\u064a (<span class=\"font-mono\">h<sub>1<\/sub>=h<sub>2<\/sub><\/span>): <span class=\"font-mono\">P<sub>1<\/sub> + \u00bd\u03c1v<sub>1<\/sub>\u00b2 = P<sub>2<\/sub> + \u00bd\u03c1v<sub>2<\/sub>\u00b2<\/span> (\u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0627\u0644\u0633\u0631\u0639\u0629 \u0642\u0644 \u0627\u0644\u0636\u063a\u0637).<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-4\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 9 (\u0635 84) \u2013 \u062e\u0631\u0637\u0648\u0645 \u0623\u0641\u0642\u064a<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0621 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0648\u0627\u0633\u0639 <span class=\"font-mono\">3 m\/s<\/span>\u060c \u0636\u063a\u0637\u0647 <span class=\"font-mono\">1.4\u00d710\u2075 Pa<\/span>. \u0628\u0639\u062f \u0627\u0644\u062a\u0636\u064a\u064a\u0642\u060c \u0627\u0644\u0636\u063a\u0637 <span class=\"font-mono\">1.1\u00d710\u2075 Pa<\/span>. \u0627\u0644\u0633\u0631\u0639\u0629 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0636\u064a\u0642 \u2248 8.3 m\/s.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-2\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 10 (\u0635 85) \u2013 \u0636\u062e \u0627\u0644\u0645\u0627\u0621<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0637\u0627\u0628\u0642 \u0623\u0631\u0636\u064a: <span class=\"font-mono\">r=2cm, v=0.5m\/s, P=3\u00d710\u2075Pa<\/span>. \u0637\u0627\u0628\u0642 \u062b\u0627\u0646\u064d: <span class=\"font-mono\">h=6m, r=1.2cm<\/span>. \u0627\u0644\u0633\u0631\u0639\u0629 = 1.39 m\/s\u060c \u0627\u0644\u0636\u063a\u0637 = 2.39\u00d710\u2075 Pa.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0623\u062c\u0646\u062d\u0629 \u0627\u0644\u0637\u0627\u0626\u0631\u0629 (\u0642\u0648\u0629 \u0627\u0644\u0631\u0641\u0639)<\/h3><p class=\"text-slate-300 text-l\">\u0634\u0643\u0644 \u0627\u0644\u062c\u0646\u0627\u062d \u064a\u0632\u064a\u062f \u0633\u0631\u0639\u0629 \u0627\u0644\u0647\u0648\u0627\u0621 \u0623\u0639\u0644\u0627\u0647 \u0641\u064a\u0642\u0644 \u0627\u0644\u0636\u063a\u0637\u060c \u0641\u064a\u0631\u062a\u0641\u0639 \u0627\u0644\u062c\u0646\u0627\u062d.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0627\u0644\u0645\u0631\u0630\u0627\u0630 (Atomizer)<\/h3><p class=\"text-slate-300 text-l\">\u062a\u064a\u0627\u0631 \u0647\u0648\u0627\u0621 \u0633\u0631\u064a\u0639 \u064a\u0642\u0644\u0644 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a\u0633\u062d\u0628 \u0627\u0644\u0633\u0627\u0626\u0644 \u0648\u064a\u062a\u0641\u062a\u062a \u0625\u0644\u0649 \u0631\u0630\u0627\u0630.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0645\u0642\u064a\u0627\u0633 \u0641\u0646\u062a\u0648\u0631\u064a<\/h3><p class=\"text-slate-300 text-l\">\u064a\u0642\u064a\u0633 \u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062f\u0641\u0642 \u0645\u0646 \u0641\u0631\u0642 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0627\u062e\u062a\u0646\u0627\u0642.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0623\u0633\u0642\u0641 \u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0641\u064a \u0627\u0644\u0639\u0648\u0627\u0635\u0641<\/h3><p class=\"text-slate-300 text-l\">\u0627\u0644\u0631\u064a\u0627\u062d \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u062a\u0642\u0644\u0644 \u0627\u0644\u0636\u063a\u0637 \u0641\u0648\u0642 \u0627\u0644\u0633\u0637\u062d \u0641\u064a\u0631\u062a\u0641\u0639.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0627\u0645\u0633\u0627\u064b: \u0645\u0644\u062e\u0635 \u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 \u0648\u0627\u0644\u0645\u062a\u062d\u0631\u0643<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l text-right text-slate-300\">\r\n <thead class=\"bg-white\/10\"><tr><th class=\"px-4 py-3\">\u0627\u0644\u062e\u0627\u0635\u064a\u0629<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 (\u0627\u0644\u0645\u062b\u0627\u0644\u064a)<\/th><\/tr><\/thead>\r\n <tbody class=\"divide-y divide-white\/10\">\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0633\u0631\u0639\u0629<\/td><td class=\"px-4 py-3\">\u0635\u0641\u0631<\/td><td class=\"px-4 py-3\">\u0645\u062a\u063a\u064a\u0631\u0629 \u062d\u0633\u0628 \u0627\u0644\u0645\u0642\u0637\u0639 \u0648\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0636\u063a\u0637<\/td><td class=\"px-4 py-3 font-mono\">\u03c1gh<\/td><td class=\"px-4 py-3\">\u0645\u0646 \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/td><td class=\"px-4 py-3\">\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633<\/td><td class=\"px-4 py-3\">\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 + \u0628\u0631\u0646\u0648\u0644\u064a<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/td><td class=\"px-4 py-3\">\u0637\u0641\u0648 \u0627\u0644\u0633\u0641\u0646\u060c \u0627\u0644\u063a\u0648\u0627\u0635\u0627\u062a<\/td><td class=\"px-4 py-3\">\u0623\u062c\u0646\u062d\u0629 \u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a\u060c \u0641\u0646\u062a\u0648\u0631\u064a\u060c \u0645\u0631\u0630\u0627\u0630<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0633\u0627\u062f\u0633\u0627\u064b: \u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u062f\u0631\u064a\u0628\u0627\u062a \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628 (\u0635 88\u201389)<\/h2>\r\n <div class=\"space-y-3\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-yellow-300\">\u062a\u0637\u0627\u064a\u0631 \u0627\u0644\u0623\u0633\u0642\u0641 \u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629<\/h3><p class=\"text-slate-300\">\u0627\u0644\u0631\u064a\u0627\u062d \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u062a\u0642\u0644\u0644 \u0627\u0644\u0636\u063a\u0637 \u0641\u0648\u0642 \u0627\u0644\u0633\u0637\u062d \u0641\u064a\u0631\u062a\u0641\u0639. \u0627\u0644\u0646\u0635\u064a\u062d\u0629: \u0641\u062a\u062d \u0646\u0648\u0627\u0641\u0630 \u0623\u0648 \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0633\u0637\u062d.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-yellow-300\">\u0645\u0633\u0623\u0644\u0629 3 (\u0635 88)<\/h3><p class=\"text-slate-300\">\u0623\u0646\u0628\u0648\u0628 \u0645\u0627\u0621 \u0627\u0631\u062a\u0641\u0627\u0639\u0647 6 m\u060c \u0645\u0633\u0627\u062d\u0629 \u0645\u0642\u0637\u0639 \u0627\u0644\u0639\u0644\u0648\u064a 0.2 m\u00b2\u060c \u0636\u063a\u0637\u0647 1.5\u00d710\u2075 Pa\u060c \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0641\u0644\u064a 0.05 m\u00b2\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0621 \u0641\u064a\u0647 4 m\/s. \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 = 1 m\/s\u060c \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0633\u0641\u0644\u064a = 2.025\u00d710\u2075 Pa\u060c \u0627\u0644\u062d\u062c\u0645 \u0641\u064a 2 min = 24 m\u00b3.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-yellow-300\">\u0645\u0633\u0623\u0644\u0629 5 (\u0635 88)<\/h3><p class=\"text-slate-300\">\u0627\u0644\u0634\u0631\u064a\u0627\u0646 \u0627\u0644\u0623\u0628\u0647\u0631 \u0642\u0637\u0631\u0647 2 cm (\u0645\u0633\u0627\u062d\u0629 3.14\u00d710\u207b\u2074 m\u00b2)\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 0.2 m\/s\u060c \u064a\u062a\u0641\u0631\u0639 \u0625\u0644\u0649 \u0634\u0631\u064a\u0627\u0646\u064a\u0646 \u0642\u0637\u0631\u0647\u0645\u0627 1 cm \u0644\u0643\u0644. \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 \u0641\u064a \u0627\u0644\u0634\u0631\u064a\u0627\u0646 = 0.4 m\/s.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\">\u0628\u0647\u0630\u0627 \u0646\u0643\u0648\u0646 \u0642\u062f \u0623\u062a\u0645\u0645\u0646\u0627 \u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a \u0645\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062e\u0627\u0645\u0633\u0629: \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629. \u0644\u0642\u062f \u0641\u0647\u0645\u0646\u0627 \u0643\u064a\u0641 \u062a\u0631\u062a\u0628\u0637 \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u0628\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639\u060c \u0648\u0643\u064a\u0641 \u062a\u0624\u062b\u0631 \u0627\u0644\u0633\u0631\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u062a\u0639\u0644\u0645\u0646\u0627 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0647\u0645\u0629 \u0641\u064a \u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0627\u0644\u0647\u0646\u062f\u0633\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ============================================\r\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 (FlowTypesSimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('flow-types-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646<\/h3>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n <div class=\"lg:col-span-1 space-y-6 bg-slate-800 p-5 rounded-xl\">\r\n <div><label class=\"block text-slate-300 mb-3 font-bold\">\u0646\u0648\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646<\/label><div class=\"space-y-2\"><button id=\"flow-steady\" class=\"w-full py-2 rounded-lg bg-emerald-500 text-white\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645<\/button><button id=\"flow-turbulent\" class=\"w-full py-2 rounded-lg bg-slate-700 text-slate-300 hover:bg-slate-600\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0636\u0637\u0631\u0628<\/button><\/div><\/div>\r\n <div><label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062f\u0641\u0642<\/span><span id=\"flow-speed-val\" class=\"text-blue-400\">2<\/span><\/div><input id=\"flow-speed\" type=\"range\" min=\"1\" max=\"10\" step=\"1\" value=\"2\" class=\"w-full accent-blue-500\"\/><\/label><p class=\"text-l text-slate-500 mt-3\">\u0627\u0644\u0633\u0631\u0639\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u064a\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u0627\u062d\u062a\u0645\u0627\u0644\u064a\u0629 \u062a\u062d\u0648\u0644 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0625\u0644\u0649 \u0645\u0636\u0637\u0631\u0628.<\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-3 bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[300px]\"><canvas id=\"flow-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><div class=\"absolute top-4 right-4 bg-black\/60 p-3 rounded-lg\"><h4 id=\"flow-type-label\" class=\"font-bold text-l text-emerald-400\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645<\/h4><p id=\"flow-type-desc\" class=\"text-l text-slate-300\">\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u0629 \u0648\u0644\u0627 \u062a\u062a\u0642\u0627\u0637\u0639.<\/p><\/div><\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('flow-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let flowType = 'steady';\r\n let speed = 2;\r\n let time = 0;\r\n let particles = [];\r\n const numParticles = 300;\r\n const obstacle = { x: 0, y: 0, radius: 35 };\r\n let animationId = null;\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < numParticles; i++) {\r\n particles.push({\r\n x: Math.random() * 800,\r\n y: Math.random() * 400,\r\n baseY: 0,\r\n vx: speed,\r\n vy: 0,\r\n size: Math.random() * 2 + 1,\r\n color: `hsla(${190 + Math.random() * 40}, 100%, 70%, ${0.5 + Math.random() * 0.5})`\r\n });\r\n }\r\n }\r\n\r\n function updateSize() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n obstacle.x = width \/ 3;\r\n obstacle.y = height \/ 2;\r\n for (let p of particles) {\r\n p.x = Math.random() * width;\r\n p.y = Math.random() * height;\r\n p.baseY = p.y;\r\n }\r\n }\r\n }\r\n\r\n function drawFlow() {\r\n if (!ctx) return;\r\n updateSize();\r\n if (width === 0 || height === 0) { animationId = requestAnimationFrame(drawFlow); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n ctx.fillStyle = 'rgba(15, 23, 42, 0.3)';\r\n ctx.fillRect(0, 0, width, height);\r\n time += 0.05;\r\n ctx.beginPath();\r\n ctx.arc(obstacle.x, obstacle.y, obstacle.radius, 0, Math.PI * 2);\r\n ctx.fillStyle = '#64748b';\r\n ctx.fill();\r\n ctx.strokeStyle = '#334155';\r\n ctx.stroke();\r\n for (let p of particles) {\r\n const dx = p.x - obstacle.x, dy = p.y - obstacle.y;\r\n const dist = Math.sqrt(dx * dx + dy * dy);\r\n if (flowType === 'steady') {\r\n p.vx = speed;\r\n if (dist < obstacle.radius * 4) {\r\n const angle = Math.atan2(dy, dx);\r\n const deflection = Math.pow(1 - dist \/ (obstacle.radius * 4), 2) * obstacle.radius * 0.8;\r\n p.y += Math.sin(angle) * deflection * 0.1;\r\n p.vx = speed * (0.6 + 0.4 * (dist \/ (obstacle.radius * 4)));\r\n }\r\n p.y += (p.baseY - p.y) * 0.03;\r\n p.x += p.vx;\r\n } else {\r\n p.vx = speed;\r\n if (dist < obstacle.radius + 5) {\r\n const angle = Math.atan2(dy, dx);\r\n p.y += Math.sin(angle) * speed;\r\n p.x += Math.cos(angle) * speed;\r\n } else if (p.x > obstacle.x && p.x < obstacle.x + 400 && Math.abs(p.y - obstacle.y) < 150) {\r\n const wakeX = p.x - obstacle.x;\r\n const intensity = Math.max(0, 1 - wakeX \/ 400);\r\n const vortexForce = Math.sin(wakeX * 0.04 - time * 2) * speed * intensity * 2;\r\n if (p.y < obstacle.y) p.vy += vortexForce * 0.25;\r\n else p.vy -= vortexForce * 0.25;\r\n p.vy += (Math.random() - 0.5) * speed * intensity * 1.5;\r\n p.vx -= Math.random() * speed * 0.6 * intensity;\r\n }\r\n p.vy *= 0.92;\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n }\r\n if (p.x > width + 20 || p.y < -50 || p.y > height + 50) {\r\n p.x = -Math.random() * 50;\r\n p.y = Math.random() * height;\r\n p.baseY = p.y;\r\n p.vy = 0;\r\n }\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n ctx.beginPath();\r\n ctx.moveTo(p.x, p.y);\r\n const trailLen = flowType === 'steady' ? p.vx * 4 : Math.sqrt(p.vx * p.vx + p.vy * p.vy) * 2;\r\n ctx.lineTo(p.x - p.vx * trailLen, p.y - p.vy * trailLen);\r\n ctx.strokeStyle = p.color;\r\n ctx.globalAlpha = 0.4;\r\n ctx.lineWidth = p.size * 0.8;\r\n ctx.stroke();\r\n ctx.globalAlpha = 1;\r\n }\r\n animationId = requestAnimationFrame(drawFlow);\r\n }\r\n\r\n function setFlowType(type) {\r\n flowType = type;\r\n const steadyBtn = document.getElementById('flow-steady');\r\n const turbBtn = document.getElementById('flow-turbulent');\r\n const typeLabel = document.getElementById('flow-type-label');\r\n const typeDesc = document.getElementById('flow-type-desc');\r\n if (type === 'steady') {\r\n steadyBtn.classList.add('bg-emerald-500', 'text-white');\r\n steadyBtn.classList.remove('bg-slate-700', 'text-slate-300');\r\n turbBtn.classList.remove('bg-rose-500', 'text-white');\r\n turbBtn.classList.add('bg-slate-700', 'text-slate-300');\r\n typeLabel.className = 'font-bold text-l text-emerald-400';\r\n typeLabel.innerText = '\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645';\r\n typeDesc.innerText = '\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u0629 \u0648\u0644\u0627 \u062a\u062a\u0642\u0627\u0637\u0639. \u0627\u0644\u0645\u0627\u0626\u0639 \u064a\u062a\u062d\u0631\u0643 \u0628\u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0626\u0642.';\r\n document.getElementById('flow-speed').value = 2;\r\n document.getElementById('flow-speed-val').innerText = '2';\r\n speed = 2;\r\n } else {\r\n turbBtn.classList.add('bg-rose-500', 'text-white');\r\n turbBtn.classList.remove('bg-slate-700', 'text-slate-300');\r\n steadyBtn.classList.remove('bg-emerald-500', 'text-white');\r\n steadyBtn.classList.add('bg-slate-700', 'text-slate-300');\r\n typeLabel.className = 'font-bold text-l text-rose-400';\r\n typeLabel.innerText = '\u062c\u0631\u064a\u0627\u0646 \u0645\u0636\u0637\u0631\u0628';\r\n typeDesc.innerText = '\u062a\u062a\u0643\u0648\u0646 \u062f\u0648\u0627\u0645\u0627\u062a \u062e\u0644\u0641 \u0627\u0644\u0639\u0627\u0626\u0642 \u0628\u0633\u0628\u0628 \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0639\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643.';\r\n document.getElementById('flow-speed').value = 6;\r\n document.getElementById('flow-speed-val').innerText = '6';\r\n speed = 6;\r\n }\r\n initParticles();\r\n }\r\n\r\n document.getElementById('flow-steady').addEventListener('click', () => setFlowType('steady'));\r\n document.getElementById('flow-turbulent').addEventListener('click', () => setFlowType('turbulent'));\r\n document.getElementById('flow-speed').addEventListener('input', (e) => {\r\n speed = parseInt(e.target.value);\r\n document.getElementById('flow-speed-val').innerText = speed;\r\n if (flowType === 'steady') setFlowType('steady');\r\n else setFlowType('turbulent');\r\n });\r\n initParticles();\r\n drawFlow();\r\n })();\r\n\r\n \/\/ ============================================\r\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 (CompressibilitySimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('compressibility-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637<\/h3>\r\n <div class=\"bg-black\/20 p-4 rounded-xl max-w-md mx-auto\"><label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0643\u0628\u0633<\/span><span id=\"comp-force-val\" class=\"text-purple-400\">0%<\/span><\/div><input id=\"comp-force\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"0\" class=\"w-full accent-purple-500\"\/><\/label><p class=\"text-l text-slate-500 mt-3\">\u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u0642\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u0639\u0646\u062f \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0642\u0648\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0628\u0642\u0649 \u062d\u062c\u0645 \u0627\u0644\u0633\u0627\u0626\u0644 \u062b\u0627\u0628\u062a\u0627\u064b \u062a\u0642\u0631\u064a\u0628\u0627\u064b.<\/p><\/div>\r\n <div class=\"bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[350px] mt-4\"><canvas id=\"comp-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('comp-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let force = 0;\r\n let particles = [];\r\n const numParticles = 80;\r\n const cylWidth = 120;\r\n const cylHeight = 220;\r\n const startY = 60;\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < numParticles; i++) {\r\n particles.push({ x: Math.random() * cylWidth, y: Math.random() * cylHeight, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6, radius: 3 });\r\n }\r\n }\r\n\r\n function drawComp() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n }\r\n if (width === 0 || height === 0) { requestAnimationFrame(drawComp); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n const liquidX = width \/ 4 - cylWidth \/ 2;\r\n const gasX = (3 * width) \/ 4 - cylWidth \/ 2;\r\n const liquidCompression = force * 0.05;\r\n const gasCompression = force * 1.4;\r\n ctx.fillStyle = 'rgba(56, 189, 248, 0.6)';\r\n ctx.fillRect(liquidX + 2, startY + liquidCompression + 15, cylWidth - 4, cylHeight - liquidCompression - 15);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(liquidX, startY, cylWidth, cylHeight);\r\n ctx.fillStyle = '#60a5fa';\r\n ctx.font = 'bold 16px system-ui';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('\u0633\u0627\u0626\u0644 (\u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)', liquidX + cylWidth \/ 2, startY + cylHeight + 30);\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.fillRect(liquidX + 2, startY + liquidCompression, cylWidth - 4, 15);\r\n if (force > 0) {\r\n ctx.fillStyle = '#ef4444';\r\n const arrowY = startY - 40 + liquidCompression;\r\n ctx.beginPath();\r\n ctx.moveTo(liquidX + cylWidth \/ 2, arrowY + 10);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 - 10, arrowY - 5);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 - 4, arrowY - 5);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 - 4, arrowY - 25);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 + 4, arrowY - 25);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 + 4, arrowY - 5);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 + 10, arrowY - 5);\r\n ctx.fill();\r\n }\r\n ctx.fillStyle = 'rgba(244, 63, 94, 0.1)';\r\n ctx.fillRect(gasX + 2, startY + gasCompression + 15, cylWidth - 4, cylHeight - gasCompression - 15);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.strokeRect(gasX, startY, cylWidth, cylHeight);\r\n ctx.fillStyle = '#fb7185';\r\n ctx.fillText('\u063a\u0627\u0632 (\u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)', gasX + cylWidth \/ 2, startY + cylHeight + 30);\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.fillRect(gasX + 2, startY + gasCompression, cylWidth - 4, 15);\r\n if (force > 0) {\r\n ctx.fillStyle = '#ef4444';\r\n const arrowY = startY - 40 + gasCompression;\r\n ctx.beginPath();\r\n ctx.moveTo(gasX + cylWidth \/ 2, arrowY + 10);\r\n ctx.lineTo(gasX + cylWidth \/ 2 - 10, arrowY - 5);\r\n ctx.lineTo(gasX + cylWidth \/ 2 - 4, arrowY - 5);\r\n ctx.lineTo(gasX + cylWidth \/ 2 - 4, arrowY - 25);\r\n ctx.lineTo(gasX + cylWidth \/ 2 + 4, arrowY - 25);\r\n ctx.lineTo(gasX + cylWidth \/ 2 + 4, arrowY - 5);\r\n ctx.lineTo(gasX + cylWidth \/ 2 + 10, arrowY - 5);\r\n ctx.fill();\r\n }\r\n ctx.fillStyle = '#fb7185';\r\n for (let p of particles) {\r\n const speedMult = 1 + (force \/ 100) * 0.5;\r\n p.x += p.vx * speedMult;\r\n p.y += p.vy * speedMult;\r\n if (p.x < 5) { p.x = 5; p.vx *= -1; }\r\n if (p.x > cylWidth - 5) { p.x = cylWidth - 5; p.vx *= -1; }\r\n if (p.y > cylHeight - 5) { p.y = cylHeight - 5; p.vy *= -1; }\r\n const pistonBottom = gasCompression + 15;\r\n if (p.y < pistonBottom + 5) { p.y = pistonBottom + 5; p.vy *= -1; }\r\n ctx.beginPath();\r\n ctx.arc(gasX + p.x, startY + p.y, p.radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n requestAnimationFrame(drawComp);\r\n }\r\n\r\n document.getElementById('comp-force').addEventListener('input', (e) => {\r\n force = parseInt(e.target.value);\r\n document.getElementById('comp-force-val').innerText = force + '%';\r\n });\r\n initParticles();\r\n drawComp();\r\n })();\r\n\r\n \/\/ ============================================\r\n \/\/ 3. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629 (ViscositySimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('viscosity-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629<\/h3>\r\n <div class=\"flex justify-center gap-4 mb-4\"><button id=\"viscosity-drop\" class=\"px-6 py-2 bg-amber-500 hover:bg-amber-600 text-white font-bold rounded-xl\">\u0625\u0633\u0642\u0627\u0637 \u0627\u0644\u0643\u0631\u0627\u062a<\/button><button id=\"viscosity-reset\" class=\"px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded-xl\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button><\/div>\r\n <div class=\"bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[400px]\"><canvas id=\"viscosity-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('viscosity-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let isDropping = false;\r\n let positions = [0, 0, 0];\r\n const speeds = [6, 2.5, 0.4];\r\n const maxDropReference = 250;\r\n let animationId = null;\r\n\r\n function drawViscosity() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n }\r\n if (width === 0 || height === 0) { animationId = requestAnimationFrame(drawViscosity); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n const cylWidth = Math.min(80, width \/ 5);\r\n const cylHeight = height - 100;\r\n const startY = 40;\r\n const spacing = width \/ 4;\r\n const fluids = [\r\n { name: '\u0645\u0627\u0621 (\u0644\u0632\u0648\u062c\u0629 \u0645\u0646\u062e\u0641\u0636\u0629)', color: 'rgba(56, 189, 248, 0.6)', labelColor: '#38bdf8' },\r\n { name: '\u0632\u064a\u062a (\u0644\u0632\u0648\u062c\u0629 \u0645\u062a\u0648\u0633\u0637\u0629)', color: 'rgba(250, 204, 21, 0.6)', labelColor: '#facc15' },\r\n { name: '\u0639\u0633\u0644 (\u0644\u0632\u0648\u062c\u0629 \u0639\u0627\u0644\u064a\u0629)', color: 'rgba(217, 119, 6, 0.8)', labelColor: '#d97706' }\r\n ];\r\n for (let i = 0; i < fluids.length; i++) {\r\n const f = fluids[i];\r\n const x = spacing * (i + 1) - cylWidth \/ 2;\r\n ctx.fillStyle = f.color;\r\n ctx.fillRect(x, startY, cylWidth, cylHeight);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(x, startY, cylWidth, cylHeight);\r\n ctx.fillStyle = f.labelColor;\r\n ctx.font = 'bold 14px system-ui';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(f.name, x + cylWidth \/ 2, startY + cylHeight + 25);\r\n const maxDrop = cylHeight - 30;\r\n const currentDrop = Math.min(positions[i] * (maxDrop \/ maxDropReference), maxDrop);\r\n ctx.beginPath();\r\n ctx.arc(x + cylWidth \/ 2, startY + 15 + currentDrop, 12, 0, Math.PI * 2);\r\n const gradient = ctx.createRadialGradient(x + cylWidth \/ 2 - 4, startY + 15 + currentDrop - 4, 2, x + cylWidth \/ 2, startY + 15 + currentDrop, 12);\r\n gradient.addColorStop(0, '#ffffff');\r\n gradient.addColorStop(1, '#94a3b8');\r\n ctx.fillStyle = gradient;\r\n ctx.fill();\r\n ctx.strokeStyle = '#475569';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n animationId = requestAnimationFrame(drawViscosity);\r\n }\r\n\r\n function drop() {\r\n if (isDropping) return;\r\n isDropping = true;\r\n positions = [0, 0, 0];\r\n function updateDrop() {\r\n let allFinished = true;\r\n for (let i = 0; i < speeds.length; i++) {\r\n if (positions[i] < maxDropReference) {\r\n positions[i] = Math.min(positions[i] + speeds[i], maxDropReference);\r\n allFinished = false;\r\n }\r\n }\r\n if (!allFinished) setTimeout(updateDrop, 20);\r\n else isDropping = false;\r\n }\r\n updateDrop();\r\n }\r\n\r\n function resetDrop() { isDropping = false; positions = [0, 0, 0]; }\r\n document.getElementById('viscosity-drop').addEventListener('click', drop);\r\n document.getElementById('viscosity-reset').addEventListener('click', resetDrop);\r\n drawViscosity();\r\n })();\r\n\r\n \/\/ ============================================\r\n \/\/ 4. \u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 (ContinuitySimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('continuity-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629<\/h3>\r\n <div class=\"bg-black\/20 p-4 rounded-xl max-w-md mx-auto\"><label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639 \u0627\u0644\u0623\u064a\u0645\u0646 (A\u2082)<\/span><span id=\"cont-area-val\" class=\"text-emerald-400\">40%<\/span><\/div><input id=\"cont-area\" type=\"range\" min=\"20\" max=\"100\" step=\"1\" value=\"40\" class=\"w-full accent-emerald-500\"\/><\/label><p class=\"text-l text-slate-500 mt-3\">\u0643\u0644\u0645\u0627 \u0642\u0644\u062a \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639\u060c \u0632\u0627\u062f\u062a \u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u0645\u0627\u0626\u0639.<\/p><\/div>\r\n <div class=\"bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[300px] mt-4\"><canvas id=\"cont-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('cont-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let area2 = 40;\r\n let particles = [];\r\n const numParticles = 300;\r\n let animationId = null;\r\n\r\n function initContParticles() {\r\n particles = [];\r\n for (let i = 0; i < numParticles; i++) particles.push({ x: Math.random() * 1000, y: 0, ny: (Math.random() - 0.5) * 0.9 });\r\n }\r\n\r\n function drawCont() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n }\r\n if (width === 0 || height === 0) { animationId = requestAnimationFrame(drawCont); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n const centerY = height \/ 2 - 20;\r\n const H1 = 120;\r\n const H2 = (area2 \/ 100) * 120;\r\n const transStart = width \/ 2 - 60;\r\n const transEnd = width \/ 2 + 60;\r\n const getH = (x) => {\r\n if (x < transStart) return H1;\r\n if (x > transEnd) return H2;\r\n const t = (x - transStart) \/ (transEnd - transStart);\r\n const loothT = t * t * (3 - 2 * t);\r\n return H1 + loothT * (H2 - H1);\r\n };\r\n ctx.fillStyle = 'rgba(16, 185, 129, 0.1)';\r\n ctx.beginPath();\r\n for (let x = 0; x <= width; x += 5) ctx.lineTo(x, centerY - getH(x) \/ 2);\r\n for (let x = width; x >= 0; x -= 5) ctx.lineTo(x, centerY + getH(x) \/ 2);\r\n ctx.closePath();\r\n ctx.fill();\r\n ctx.strokeStyle = 'rgba(255,255,255,0.6)';\r\n ctx.lineWidth = 4;\r\n ctx.beginPath();\r\n for (let x = 0; x <= width; x += 5) ctx.lineTo(x, centerY - getH(x) \/ 2);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n for (let x = 0; x <= width; x += 5) ctx.lineTo(x, centerY + getH(x) \/ 2);\r\n ctx.stroke();\r\n const v1 = 1.5;\r\n const Q = H1 * v1;\r\n ctx.fillStyle = '#34d399';\r\n for (let p of particles) {\r\n const currentH = getH(p.x);\r\n const vx = Q \/ currentH;\r\n p.x += vx;\r\n if (p.x > width) { p.x = 0; p.ny = (Math.random() - 0.5) * 0.9; }\r\n const y = centerY + p.ny * currentH;\r\n ctx.beginPath();\r\n ctx.arc(p.x, y, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 16px system-ui';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(`A\u2081 = 100%`, width \/ 4, height - 30);\r\n ctx.fillStyle = '#94a3b8';\r\n ctx.fillText(`v\u2081 = 1.0x`, width \/ 4, height - 10);\r\n ctx.fillStyle = 'white';\r\n ctx.fillText(`A\u2082 = ${area2}%`, (3 * width) \/ 4, height - 30);\r\n const v2Ratio = (H1 \/ H2).toFixed(1);\r\n ctx.fillStyle = '#34d399';\r\n ctx.fillText(`v\u2082 = ${v2Ratio}x`, (3 * width) \/ 4, height - 10);\r\n animationId = requestAnimationFrame(drawCont);\r\n }\r\n\r\n document.getElementById('cont-area').addEventListener('input', (e) => {\r\n area2 = parseInt(e.target.value);\r\n document.getElementById('cont-area-val').innerText = area2 + '%';\r\n });\r\n initContParticles();\r\n drawCont();\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18510","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18510","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=18510"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18510\/revisions"}],"predecessor-version":[{"id":18512,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18510\/revisions\/18512"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0627\u0644\u0645\u0633\u0644\u064a\u0629 | \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 \u0648\u0628\u0631\u0646\u0648\u0644\u064a)<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n direction: rtl;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6366f1; }\r\n input[type=\"range\"] {\r\n direction: ltr;\r\n -webkit-appearance: none;\r\n background: #334155;\r\n height: 4px;\r\n border-radius: 5px;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 16px;\r\n width: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .ltr { direction: ltr; text-align: left; }\r\n .ltr-inline { direction: ltr; display: inline-block; }\r\n button {\r\n transition: all 0.2s ease;\r\n }\r\n .simulation-container {\r\n margin: 1.5rem 0;\r\n padding: 1rem;\r\n background-color: rgba(0, 0, 0, 0.2);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n }\r\n select {\r\n background-color: #1e293b;\r\n border: 1px solid #334155;\r\n border-radius: 0.5rem;\r\n padding: 0.5rem;\r\n color: white;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n \r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (Fluids in Motion)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u0639\u0627\u0634\u0631<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0646\u064a__\u0627\u0644\u0645\u0648\u0627\u0626\u0639_\u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629_audio.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0646\u064a__\u0627\u0644\u0645\u0648\u0627\u0626\u0639_\u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 (\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 \u0648\u0628\u0631\u0646\u0648\u0644\u064a)<\/h2>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border border-blue-500\/30\">\r\n <p class=\"text-base text-slate-300 leading-relaxed\">\u0647\u0644 \u0644\u0627\u062d\u0638\u062a \u0643\u064a\u0641 \u062a\u0646\u062f\u0641\u0639 \u0627\u0644\u0645\u064a\u0627\u0647 \u0628\u0642\u0648\u0629 \u0623\u0643\u0628\u0631 \u0639\u0646\u062f\u0645\u0627 \u062a\u0636\u063a\u0637 \u0639\u0644\u0649 \u0641\u0648\u0647\u0629 \u0627\u0644\u062e\u0631\u0637\u0648\u0645\u061f \u0623\u0648 \u0643\u064a\u0641 \u062a\u0631\u062a\u0641\u0639 \u0627\u0644\u0637\u0627\u0626\u0631\u0629 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0631\u063a\u0645 \u062b\u0642\u0644\u0647\u0627\u061f \u0647\u0630\u0647 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0648\u063a\u064a\u0631\u0647\u0627 \u062a\u0641\u0633\u0631\u0647\u0627 <strong class=\"text-blue-400\">\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629<\/strong> \u0648 <strong class=\"text-blue-400\">\u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a<\/strong>\u060c \u0648\u0647\u0645\u0627 \u0623\u0633\u0627\u0633 \u062f\u0631\u0627\u0633\u0629 \u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0648\u0627\u0626\u0639.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-blue-300\">\u0627\u0644\u062c\u0631\u064a\u0627\u0646 (Flow)<\/h3><p class=\"text-slate-300 text-l\">\u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u0639\u0628\u0631 \u0627\u0644\u0623\u0646\u0627\u0628\u064a\u0628 \u0623\u0648 \u0627\u0644\u0645\u062c\u0627\u0631\u064a.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-blue-300\">\u0627\u0644\u0644\u0632\u0648\u062c\u0629 (Viscosity)<\/h3><p class=\"text-slate-300 text-l\">\u0645\u0645\u0627\u0646\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u0644\u0644\u062c\u0631\u064a\u0627\u0646.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-blue-300\">\u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637<\/h3><p class=\"text-slate-300 text-l\">\u062a\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0645\u0627\u0626\u0639 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-emerald-900\/20 p-3 rounded-lg border border-emerald-500\/30\"><h3 class=\"font-bold text-emerald-300\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645 (\u0627\u0646\u0633\u064a\u0627\u0628\u064a)<\/h3><p class=\"text-emerald-100\/80 text-l\">\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u0629\u060c \u0648\u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u062b\u0627\u0628\u062a\u0629 \u0639\u0646\u062f \u0623\u064a \u0646\u0642\u0637\u0629 \u0645\u0639 \u0627\u0644\u0632\u0645\u0646.<\/p><\/div>\r\n <div class=\"bg-rose-900\/20 p-3 rounded-lg border border-rose-500\/30\"><h3 class=\"font-bold text-rose-300\">\u062c\u0631\u064a\u0627\u0646 \u063a\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 (\u0645\u0636\u0637\u0631\u0628)<\/h3><p class=\"text-rose-100\/80 text-l\">\u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u062a\u062a\u063a\u064a\u0631 \u0645\u0639 \u0627\u0644\u0632\u0645\u0646\u060c \u0648\u062a\u0638\u0647\u0631 \u062f\u0648\u0627\u0645\u0627\u062a.<\/p><\/div>\r\n <\/div>\r\n \r\n <div id=\"flow-types-sim\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 (Streamlines)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\">\u062e\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0647\u0648 \u062e\u0637 \u0648\u0647\u0645\u064a \u064a\u0645\u062b\u0644 \u0645\u0633\u0627\u0631 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a \u0627\u0644\u0645\u0627\u0626\u0639 \u0623\u062b\u0646\u0627\u0621 \u062c\u0631\u064a\u0627\u0646\u0647\u0627. \u062e\u0635\u0627\u0626\u0635\u0647:<\/p>\r\n <ul class=\"list-disc list-inside text-l text-slate-300 mt-2\">\r\n <li>\u0644\u0627 \u062a\u062a\u0642\u0627\u0637\u0639 \u0623\u0628\u062f\u0627\u064b.<\/li>\r\n <li>\u0627\u0644\u0645\u0645\u0627\u0633 \u0639\u0646\u062f \u0623\u064a \u0646\u0642\u0637\u0629 \u064a\u062d\u062f\u062f \u0627\u062a\u062c\u0627\u0647 \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639.<\/li>\r\n <li>\u062a\u062a\u0642\u0627\u0631\u0628 \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u062a\u064a \u062a\u0632\u062f\u0627\u062f \u0641\u064a\u0647\u0627 \u0627\u0644\u0633\u0631\u0639\u0629 (\u0627\u0644\u0623\u0646\u0627\u0628\u064a\u0628 \u0627\u0644\u0636\u064a\u0642\u0629).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 (Compressibility)<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-blue-900\/20 p-3 rounded-lg border border-blue-500\/30\"><h3 class=\"font-bold text-blue-300\">\u0627\u0644\u0633\u0648\u0627\u0626\u0644 (\u063a\u064a\u0631 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)<\/h3><p class=\"text-blue-100\/80 text-l\">\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0635\u063a\u064a\u0631\u0629\u060c \u0641\u0644\u0627 \u064a\u062a\u063a\u064a\u0631 \u062d\u062c\u0645\u0647\u0627 \u0623\u0648 \u0643\u062b\u0627\u0641\u062a\u0647\u0627 \u0628\u0634\u0643\u0644 \u0645\u0644\u062d\u0648\u0638 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <div class=\"bg-rose-900\/20 p-3 rounded-lg border border-rose-500\/30\"><h3 class=\"font-bold text-rose-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a (\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)<\/h3><p class=\"text-rose-100\/80 text-l\">\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0643\u0628\u064a\u0631\u0629\u060c \u0641\u064a\u062a\u063a\u064a\u0631 \u062d\u062c\u0645\u0647\u0627 \u0648\u0643\u062b\u0627\u0641\u062a\u0647\u0627 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <\/div>\r\n \r\n <div id=\"compressibility-sim\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0644\u0632\u0648\u062c\u0629 (Viscosity)<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div class=\"bg-amber-900\/20 p-3 rounded-lg border border-amber-500\/30\"><h3 class=\"font-bold text-amber-300\">\u0645\u0648\u0627\u0626\u0639 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629<\/h3><p class=\"text-amber-100\/80 text-l\">\u0645\u062b\u0644 \u0627\u0644\u0639\u0633\u0644 \u0648\u0627\u0644\u0632\u064a\u062a \u0627\u0644\u0628\u0627\u0631\u062f\u060c \u062a\u062c\u0631\u064a \u0628\u0628\u0637\u0621.<\/p><\/div>\r\n <div class=\"bg-cyan-900\/20 p-3 rounded-lg border border-cyan-500\/30\"><h3 class=\"font-bold text-cyan-300\">\u0645\u0648\u0627\u0626\u0639 \u0645\u0646\u062e\u0641\u0636\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629<\/h3><p class=\"text-cyan-100\/80 text-l\">\u0645\u062b\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u0647\u0648\u0627\u0621\u060c \u062a\u062c\u0631\u064a \u0628\u0633\u0647\u0648\u0644\u0629.<\/p><\/div>\r\n <\/div>\r\n \r\n <div id=\"viscosity-sim\" class=\"simulation-container\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Fluid)<\/h2>\r\n <div class=\"bg-purple-900\/20 p-4 rounded-lg border border-purple-500\/30\">\r\n <p class=\"text-l text-purple-100\/80\">\u0646\u0645\u0648\u0630\u062c \u0646\u0638\u0631\u064a \u0644\u062a\u0633\u0647\u064a\u0644 \u062f\u0631\u0627\u0633\u0629 \u0627\u0644\u0645\u0648\u0627\u0626\u0639\u060c \u064a\u062a\u0645\u064a\u0632 \u0628\u0640: \u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645\u060c \u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637\u060c \u063a\u064a\u0631 \u0644\u0632\u062c\u060c \u063a\u064a\u0631 \u062f\u0648\u0627\u0645\u064a.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 (Continuity Equation)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\r\n <p class=\"text-l text-slate-300\">\u062a\u0639\u0628\u0631 \u0639\u0646 <strong class=\"text-emerald-400\">\u062d\u0641\u0638 \u0627\u0644\u0643\u062a\u0644\u0629<\/strong> \u0641\u064a \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u063a\u064a\u0631 \u0627\u0644\u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/p>\r\n <div class=\"text-center my-3\"><span class=\"font-mono text-emerald-400 text-xl\">A<sub>1<\/sub> v<sub>1<\/sub> = A<sub>2<\/sub> v<sub>2<\/sub><\/span><\/div>\r\n <p class=\"text-l text-slate-300\">\u062d\u064a\u062b <span class=\"font-mono\">A<\/span> \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639\u060c <span class=\"font-mono\">v<\/span> \u0627\u0644\u0633\u0631\u0639\u0629. \u0639\u0646\u062f\u0645\u0627 \u064a\u0636\u064a\u0642 \u0627\u0644\u0623\u0646\u0628\u0648\u0628\u060c \u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639.<\/p>\r\n <\/div>\r\n \r\n <div id=\"continuity-sim\" class=\"simulation-container\"><\/div>\r\n \r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-4\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 7 (\u0635 80) \u2013 \u062a\u062f\u0641\u0642 \u0627\u0644\u062f\u0645<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0634\u0631\u064a\u0627\u0646 \u0645\u0633\u0627\u062d\u0629 \u0645\u0642\u0637\u0639\u0647 <span class=\"font-mono\">6 mm\u00b2<\/span>\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 <span class=\"font-mono\">5\u00d710\u207b\u00b2 m\/s<\/span>. \u064a\u062a\u0641\u0631\u0639 \u0625\u0644\u0649 \u0634\u0639\u064a\u0631\u0627\u062a \u062f\u0645\u0648\u064a\u0629 \u0645\u0633\u0627\u062d\u0629 \u0645\u0642\u0637\u0639 \u0627\u0644\u0634\u0639\u064a\u0631\u0629 <span class=\"font-mono\">0.3 mm\u00b2<\/span>\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 \u0641\u064a\u0647\u0627 <span class=\"font-mono\">2\u00d710\u207b\u00b3 m\/s<\/span>. \u0639\u062f\u062f \u0627\u0644\u0634\u0639\u064a\u0631\u0627\u062a = 500.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-2\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 8 (\u0635 81) \u2013 \u0634\u0644\u0627\u0644\u0627\u062a \u0646\u064a\u0627\u062c\u0627\u0631\u0627<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0639\u0631\u0636 \u0627\u0644\u0645\u062c\u0631\u0649 <span class=\"font-mono\">670 m<\/span>\u060c \u0639\u0645\u0642 \u0627\u0644\u0645\u0627\u0621 <span class=\"font-mono\">2 m<\/span>\u060c \u0645\u0639\u062f\u0644 \u0627\u0644\u062a\u062f\u0641\u0642 <span class=\"font-mono\">5525 m\u00b3\/s<\/span>. \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0621 \u2248 4.12 m\/s\u060c \u062d\u062c\u0645\u0647 \u0641\u064a 5 \u062f\u0642\u0627\u0626\u0642 = 1.6575\u00d710\u2076 m\u00b3.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a (Bernoulli\u2019s Equation)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\r\n <p class=\"text-l text-slate-300\">\u062a\u0637\u0628\u064a\u0642 \u0645\u0628\u062f\u0623 <strong class=\"text-purple-400\">\u062d\u0641\u0638 \u0627\u0644\u0637\u0627\u0642\u0629<\/strong> \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062b\u0627\u0644\u064a:<\/p>\r\n <div class=\"text-center my-3 overflow-x-auto\"><span class=\"font-mono text-purple-400 text-lg md:text-xl whitespace-nowrap\">P<sub>1<\/sub> + \u00bd\u03c1v<sub>1<\/sub>\u00b2 + \u03c1gh<sub>1<\/sub> = P<sub>2<\/sub> + \u00bd\u03c1v<sub>2<\/sub>\u00b2 + \u03c1gh<sub>2<\/sub><\/span><\/div>\r\n <p class=\"text-l text-slate-300\">\u0644\u0644\u0623\u0646\u0628\u0648\u0628 \u0627\u0644\u0623\u0641\u0642\u064a (<span class=\"font-mono\">h<sub>1<\/sub>=h<sub>2<\/sub><\/span>): <span class=\"font-mono\">P<sub>1<\/sub> + \u00bd\u03c1v<sub>1<\/sub>\u00b2 = P<sub>2<\/sub> + \u00bd\u03c1v<sub>2<\/sub>\u00b2<\/span> (\u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0627\u0644\u0633\u0631\u0639\u0629 \u0642\u0644 \u0627\u0644\u0636\u063a\u0637).<\/p>\r\n <\/div>\r\n \r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-4\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 9 (\u0635 84) \u2013 \u062e\u0631\u0637\u0648\u0645 \u0623\u0641\u0642\u064a<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0621 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0648\u0627\u0633\u0639 <span class=\"font-mono\">3 m\/s<\/span>\u060c \u0636\u063a\u0637\u0647 <span class=\"font-mono\">1.4\u00d710\u2075 Pa<\/span>. \u0628\u0639\u062f \u0627\u0644\u062a\u0636\u064a\u064a\u0642\u060c \u0627\u0644\u0636\u063a\u0637 <span class=\"font-mono\">1.1\u00d710\u2075 Pa<\/span>. \u0627\u0644\u0633\u0631\u0639\u0629 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0636\u064a\u0642 \u2248 8.3 m\/s.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-2\">\r\n <h3 class=\"font-bold text-amber-300 mb-2\">\u0645\u062b\u0627\u0644 10 (\u0635 85) \u2013 \u0636\u062e \u0627\u0644\u0645\u0627\u0621<\/h3>\r\n <p class=\"text-l text-slate-300\">\u0637\u0627\u0628\u0642 \u0623\u0631\u0636\u064a: <span class=\"font-mono\">r=2cm, v=0.5m\/s, P=3\u00d710\u2075Pa<\/span>. \u0637\u0627\u0628\u0642 \u062b\u0627\u0646\u064d: <span class=\"font-mono\">h=6m, r=1.2cm<\/span>. \u0627\u0644\u0633\u0631\u0639\u0629 = 1.39 m\/s\u060c \u0627\u0644\u0636\u063a\u0637 = 2.39\u00d710\u2075 Pa.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0623\u062c\u0646\u062d\u0629 \u0627\u0644\u0637\u0627\u0626\u0631\u0629 (\u0642\u0648\u0629 \u0627\u0644\u0631\u0641\u0639)<\/h3><p class=\"text-slate-300 text-l\">\u0634\u0643\u0644 \u0627\u0644\u062c\u0646\u0627\u062d \u064a\u0632\u064a\u062f \u0633\u0631\u0639\u0629 \u0627\u0644\u0647\u0648\u0627\u0621 \u0623\u0639\u0644\u0627\u0647 \u0641\u064a\u0642\u0644 \u0627\u0644\u0636\u063a\u0637\u060c \u0641\u064a\u0631\u062a\u0641\u0639 \u0627\u0644\u062c\u0646\u0627\u062d.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0627\u0644\u0645\u0631\u0630\u0627\u0630 (Atomizer)<\/h3><p class=\"text-slate-300 text-l\">\u062a\u064a\u0627\u0631 \u0647\u0648\u0627\u0621 \u0633\u0631\u064a\u0639 \u064a\u0642\u0644\u0644 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a\u0633\u062d\u0628 \u0627\u0644\u0633\u0627\u0626\u0644 \u0648\u064a\u062a\u0641\u062a\u062a \u0625\u0644\u0649 \u0631\u0630\u0627\u0630.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0645\u0642\u064a\u0627\u0633 \u0641\u0646\u062a\u0648\u0631\u064a<\/h3><p class=\"text-slate-300 text-l\">\u064a\u0642\u064a\u0633 \u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062f\u0641\u0642 \u0645\u0646 \u0641\u0631\u0642 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0627\u062e\u062a\u0646\u0627\u0642.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300\">\u0623\u0633\u0642\u0641 \u0627\u0644\u0645\u0646\u0627\u0632\u0644 \u0641\u064a \u0627\u0644\u0639\u0648\u0627\u0635\u0641<\/h3><p class=\"text-slate-300 text-l\">\u0627\u0644\u0631\u064a\u0627\u062d \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u062a\u0642\u0644\u0644 \u0627\u0644\u0636\u063a\u0637 \u0641\u0648\u0642 \u0627\u0644\u0633\u0637\u062d \u0641\u064a\u0631\u062a\u0641\u0639.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0627\u0645\u0633\u0627\u064b: \u0645\u0644\u062e\u0635 \u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 \u0648\u0627\u0644\u0645\u062a\u062d\u0631\u0643<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10\">\r\n <table class=\"w-full text-l text-right text-slate-300\">\r\n <thead class=\"bg-white\/10\"><tr><th class=\"px-4 py-3\">\u0627\u0644\u062e\u0627\u0635\u064a\u0629<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 (\u0627\u0644\u0645\u062b\u0627\u0644\u064a)<\/th><\/tr><\/thead>\r\n <tbody class=\"divide-y divide-white\/10\">\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0633\u0631\u0639\u0629<\/td><td class=\"px-4 py-3\">\u0635\u0641\u0631<\/td><td class=\"px-4 py-3\">\u0645\u062a\u063a\u064a\u0631\u0629 \u062d\u0633\u0628 \u0627\u0644\u0645\u0642\u0637\u0639 \u0648\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0636\u063a\u0637<\/td><td class=\"px-4 py-3 font-mono\">\u03c1gh<\/td><td class=\"px-4 py-3\">\u0645\u0646 \u0645\u0639\u0627\u062f\u0644\u0629 \u0628\u0631\u0646\u0648\u0644\u064a<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/td><td class=\"px-4 py-3\">\u0642\u0627\u0639\u062f\u0629 \u0623\u0631\u062e\u0645\u064a\u062f\u0633<\/td><td class=\"px-4 py-3\">\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 + \u0628\u0631\u0646\u0648\u0644\u064a<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/td><td class=\"px-4 py-3\">\u0637\u0641\u0648 \u0627\u0644\u0633\u0641\u0646\u060c \u0627\u0644\u063a\u0648\u0627\u0635\u0627\u062a<\/td><td class=\"px-4 py-3\">\u0623\u062c\u0646\u062d\u0629 \u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a\u060c \u0641\u0646\u062a\u0648\u0631\u064a\u060c \u0645\u0631\u0630\u0627\u0630<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0633\u0627\u062f\u0633\u0627\u064b: \u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u062f\u0631\u064a\u0628\u0627\u062a \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628 (\u0635 88\u201389)<\/h2>\r\n <div class=\"space-y-3\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-yellow-300\">\u062a\u0637\u0627\u064a\u0631 \u0627\u0644\u0623\u0633\u0642\u0641 \u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629<\/h3><p class=\"text-slate-300\">\u0627\u0644\u0631\u064a\u0627\u062d \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u062a\u0642\u0644\u0644 \u0627\u0644\u0636\u063a\u0637 \u0641\u0648\u0642 \u0627\u0644\u0633\u0637\u062d \u0641\u064a\u0631\u062a\u0641\u0639. \u0627\u0644\u0646\u0635\u064a\u062d\u0629: \u0641\u062a\u062d \u0646\u0648\u0627\u0641\u0630 \u0623\u0648 \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0633\u0637\u062d.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-yellow-300\">\u0645\u0633\u0623\u0644\u0629 3 (\u0635 88)<\/h3><p class=\"text-slate-300\">\u0623\u0646\u0628\u0648\u0628 \u0645\u0627\u0621 \u0627\u0631\u062a\u0641\u0627\u0639\u0647 6 m\u060c \u0645\u0633\u0627\u062d\u0629 \u0645\u0642\u0637\u0639 \u0627\u0644\u0639\u0644\u0648\u064a 0.2 m\u00b2\u060c \u0636\u063a\u0637\u0647 1.5\u00d710\u2075 Pa\u060c \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0641\u0644\u064a 0.05 m\u00b2\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0621 \u0641\u064a\u0647 4 m\/s. \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 = 1 m\/s\u060c \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0633\u0641\u0644\u064a = 2.025\u00d710\u2075 Pa\u060c \u0627\u0644\u062d\u062c\u0645 \u0641\u064a 2 min = 24 m\u00b3.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-yellow-300\">\u0645\u0633\u0623\u0644\u0629 5 (\u0635 88)<\/h3><p class=\"text-slate-300\">\u0627\u0644\u0634\u0631\u064a\u0627\u0646 \u0627\u0644\u0623\u0628\u0647\u0631 \u0642\u0637\u0631\u0647 2 cm (\u0645\u0633\u0627\u062d\u0629 3.14\u00d710\u207b\u2074 m\u00b2)\u060c \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 0.2 m\/s\u060c \u064a\u062a\u0641\u0631\u0639 \u0625\u0644\u0649 \u0634\u0631\u064a\u0627\u0646\u064a\u0646 \u0642\u0637\u0631\u0647\u0645\u0627 1 cm \u0644\u0643\u0644. \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0645 \u0641\u064a \u0627\u0644\u0634\u0631\u064a\u0627\u0646 = 0.4 m\/s.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-l text-slate-300\">\u0628\u0647\u0630\u0627 \u0646\u0643\u0648\u0646 \u0642\u062f \u0623\u062a\u0645\u0645\u0646\u0627 \u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a \u0645\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062e\u0627\u0645\u0633\u0629: \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629. \u0644\u0642\u062f \u0641\u0647\u0645\u0646\u0627 \u0643\u064a\u0641 \u062a\u0631\u062a\u0628\u0637 \u0633\u0631\u0639\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 \u0628\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639\u060c \u0648\u0643\u064a\u0641 \u062a\u0624\u062b\u0631 \u0627\u0644\u0633\u0631\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u062a\u0639\u0644\u0645\u0646\u0627 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u0647\u0645\u0629 \u0641\u064a \u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629 \u0648\u0627\u0644\u0647\u0646\u062f\u0633\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ============================================\r\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 (FlowTypesSimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('flow-types-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646<\/h3>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n <div class=\"lg:col-span-1 space-y-6 bg-slate-800 p-5 rounded-xl\">\r\n <div><label class=\"block text-slate-300 mb-3 font-bold\">\u0646\u0648\u0639 \u0627\u0644\u062c\u0631\u064a\u0627\u0646<\/label><div class=\"space-y-2\"><button id=\"flow-steady\" class=\"w-full py-2 rounded-lg bg-emerald-500 text-white\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645<\/button><button id=\"flow-turbulent\" class=\"w-full py-2 rounded-lg bg-slate-700 text-slate-300 hover:bg-slate-600\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0636\u0637\u0631\u0628<\/button><\/div><\/div>\r\n <div><label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0633\u0631\u0639\u0629 \u0627\u0644\u062a\u062f\u0641\u0642<\/span><span id=\"flow-speed-val\" class=\"text-blue-400\">2<\/span><\/div><input id=\"flow-speed\" type=\"range\" min=\"1\" max=\"10\" step=\"1\" value=\"2\" class=\"w-full accent-blue-500\"\/><\/label><p class=\"text-l text-slate-500 mt-3\">\u0627\u0644\u0633\u0631\u0639\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u064a\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u0627\u062d\u062a\u0645\u0627\u0644\u064a\u0629 \u062a\u062d\u0648\u0644 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0625\u0644\u0649 \u0645\u0636\u0637\u0631\u0628.<\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-3 bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[300px]\"><canvas id=\"flow-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><div class=\"absolute top-4 right-4 bg-black\/60 p-3 rounded-lg\"><h4 id=\"flow-type-label\" class=\"font-bold text-l text-emerald-400\">\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645<\/h4><p id=\"flow-type-desc\" class=\"text-l text-slate-300\">\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u0629 \u0648\u0644\u0627 \u062a\u062a\u0642\u0627\u0637\u0639.<\/p><\/div><\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('flow-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let flowType = 'steady';\r\n let speed = 2;\r\n let time = 0;\r\n let particles = [];\r\n const numParticles = 300;\r\n const obstacle = { x: 0, y: 0, radius: 35 };\r\n let animationId = null;\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < numParticles; i++) {\r\n particles.push({\r\n x: Math.random() * 800,\r\n y: Math.random() * 400,\r\n baseY: 0,\r\n vx: speed,\r\n vy: 0,\r\n size: Math.random() * 2 + 1,\r\n color: `hsla(${190 + Math.random() * 40}, 100%, 70%, ${0.5 + Math.random() * 0.5})`\r\n });\r\n }\r\n }\r\n\r\n function updateSize() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n obstacle.x = width \/ 3;\r\n obstacle.y = height \/ 2;\r\n for (let p of particles) {\r\n p.x = Math.random() * width;\r\n p.y = Math.random() * height;\r\n p.baseY = p.y;\r\n }\r\n }\r\n }\r\n\r\n function drawFlow() {\r\n if (!ctx) return;\r\n updateSize();\r\n if (width === 0 || height === 0) { animationId = requestAnimationFrame(drawFlow); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n ctx.fillStyle = 'rgba(15, 23, 42, 0.3)';\r\n ctx.fillRect(0, 0, width, height);\r\n time += 0.05;\r\n ctx.beginPath();\r\n ctx.arc(obstacle.x, obstacle.y, obstacle.radius, 0, Math.PI * 2);\r\n ctx.fillStyle = '#64748b';\r\n ctx.fill();\r\n ctx.strokeStyle = '#334155';\r\n ctx.stroke();\r\n for (let p of particles) {\r\n const dx = p.x - obstacle.x, dy = p.y - obstacle.y;\r\n const dist = Math.sqrt(dx * dx + dy * dy);\r\n if (flowType === 'steady') {\r\n p.vx = speed;\r\n if (dist < obstacle.radius * 4) {\r\n const angle = Math.atan2(dy, dx);\r\n const deflection = Math.pow(1 - dist \/ (obstacle.radius * 4), 2) * obstacle.radius * 0.8;\r\n p.y += Math.sin(angle) * deflection * 0.1;\r\n p.vx = speed * (0.6 + 0.4 * (dist \/ (obstacle.radius * 4)));\r\n }\r\n p.y += (p.baseY - p.y) * 0.03;\r\n p.x += p.vx;\r\n } else {\r\n p.vx = speed;\r\n if (dist < obstacle.radius + 5) {\r\n const angle = Math.atan2(dy, dx);\r\n p.y += Math.sin(angle) * speed;\r\n p.x += Math.cos(angle) * speed;\r\n } else if (p.x > obstacle.x && p.x < obstacle.x + 400 && Math.abs(p.y - obstacle.y) < 150) {\r\n const wakeX = p.x - obstacle.x;\r\n const intensity = Math.max(0, 1 - wakeX \/ 400);\r\n const vortexForce = Math.sin(wakeX * 0.04 - time * 2) * speed * intensity * 2;\r\n if (p.y < obstacle.y) p.vy += vortexForce * 0.25;\r\n else p.vy -= vortexForce * 0.25;\r\n p.vy += (Math.random() - 0.5) * speed * intensity * 1.5;\r\n p.vx -= Math.random() * speed * 0.6 * intensity;\r\n }\r\n p.vy *= 0.92;\r\n p.x += p.vx;\r\n p.y += p.vy;\r\n }\r\n if (p.x > width + 20 || p.y < -50 || p.y > height + 50) {\r\n p.x = -Math.random() * 50;\r\n p.y = Math.random() * height;\r\n p.baseY = p.y;\r\n p.vy = 0;\r\n }\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color;\r\n ctx.fill();\r\n ctx.beginPath();\r\n ctx.moveTo(p.x, p.y);\r\n const trailLen = flowType === 'steady' ? p.vx * 4 : Math.sqrt(p.vx * p.vx + p.vy * p.vy) * 2;\r\n ctx.lineTo(p.x - p.vx * trailLen, p.y - p.vy * trailLen);\r\n ctx.strokeStyle = p.color;\r\n ctx.globalAlpha = 0.4;\r\n ctx.lineWidth = p.size * 0.8;\r\n ctx.stroke();\r\n ctx.globalAlpha = 1;\r\n }\r\n animationId = requestAnimationFrame(drawFlow);\r\n }\r\n\r\n function setFlowType(type) {\r\n flowType = type;\r\n const steadyBtn = document.getElementById('flow-steady');\r\n const turbBtn = document.getElementById('flow-turbulent');\r\n const typeLabel = document.getElementById('flow-type-label');\r\n const typeDesc = document.getElementById('flow-type-desc');\r\n if (type === 'steady') {\r\n steadyBtn.classList.add('bg-emerald-500', 'text-white');\r\n steadyBtn.classList.remove('bg-slate-700', 'text-slate-300');\r\n turbBtn.classList.remove('bg-rose-500', 'text-white');\r\n turbBtn.classList.add('bg-slate-700', 'text-slate-300');\r\n typeLabel.className = 'font-bold text-l text-emerald-400';\r\n typeLabel.innerText = '\u062c\u0631\u064a\u0627\u0646 \u0645\u0646\u062a\u0638\u0645';\r\n typeDesc.innerText = '\u062e\u0637\u0648\u0637 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u0629 \u0648\u0644\u0627 \u062a\u062a\u0642\u0627\u0637\u0639. \u0627\u0644\u0645\u0627\u0626\u0639 \u064a\u062a\u062d\u0631\u0643 \u0628\u0627\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0626\u0642.';\r\n document.getElementById('flow-speed').value = 2;\r\n document.getElementById('flow-speed-val').innerText = '2';\r\n speed = 2;\r\n } else {\r\n turbBtn.classList.add('bg-rose-500', 'text-white');\r\n turbBtn.classList.remove('bg-slate-700', 'text-slate-300');\r\n steadyBtn.classList.remove('bg-emerald-500', 'text-white');\r\n steadyBtn.classList.add('bg-slate-700', 'text-slate-300');\r\n typeLabel.className = 'font-bold text-l text-rose-400';\r\n typeLabel.innerText = '\u062c\u0631\u064a\u0627\u0646 \u0645\u0636\u0637\u0631\u0628';\r\n typeDesc.innerText = '\u062a\u062a\u0643\u0648\u0646 \u062f\u0648\u0627\u0645\u0627\u062a \u062e\u0644\u0641 \u0627\u0644\u0639\u0627\u0626\u0642 \u0628\u0633\u0628\u0628 \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0639\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643.';\r\n document.getElementById('flow-speed').value = 6;\r\n document.getElementById('flow-speed-val').innerText = '6';\r\n speed = 6;\r\n }\r\n initParticles();\r\n }\r\n\r\n document.getElementById('flow-steady').addEventListener('click', () => setFlowType('steady'));\r\n document.getElementById('flow-turbulent').addEventListener('click', () => setFlowType('turbulent'));\r\n document.getElementById('flow-speed').addEventListener('input', (e) => {\r\n speed = parseInt(e.target.value);\r\n document.getElementById('flow-speed-val').innerText = speed;\r\n if (flowType === 'steady') setFlowType('steady');\r\n else setFlowType('turbulent');\r\n });\r\n initParticles();\r\n drawFlow();\r\n })();\r\n\r\n \/\/ ============================================\r\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 (CompressibilitySimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('compressibility-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637<\/h3>\r\n <div class=\"bg-black\/20 p-4 rounded-xl max-w-md mx-auto\"><label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0643\u0628\u0633<\/span><span id=\"comp-force-val\" class=\"text-purple-400\">0%<\/span><\/div><input id=\"comp-force\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"0\" class=\"w-full accent-purple-500\"\/><\/label><p class=\"text-l text-slate-500 mt-3\">\u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u0642\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u0639\u0646\u062f \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0642\u0648\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0628\u0642\u0649 \u062d\u062c\u0645 \u0627\u0644\u0633\u0627\u0626\u0644 \u062b\u0627\u0628\u062a\u0627\u064b \u062a\u0642\u0631\u064a\u0628\u0627\u064b.<\/p><\/div>\r\n <div class=\"bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[350px] mt-4\"><canvas id=\"comp-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('comp-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let force = 0;\r\n let particles = [];\r\n const numParticles = 80;\r\n const cylWidth = 120;\r\n const cylHeight = 220;\r\n const startY = 60;\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < numParticles; i++) {\r\n particles.push({ x: Math.random() * cylWidth, y: Math.random() * cylHeight, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6, radius: 3 });\r\n }\r\n }\r\n\r\n function drawComp() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n }\r\n if (width === 0 || height === 0) { requestAnimationFrame(drawComp); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n const liquidX = width \/ 4 - cylWidth \/ 2;\r\n const gasX = (3 * width) \/ 4 - cylWidth \/ 2;\r\n const liquidCompression = force * 0.05;\r\n const gasCompression = force * 1.4;\r\n ctx.fillStyle = 'rgba(56, 189, 248, 0.6)';\r\n ctx.fillRect(liquidX + 2, startY + liquidCompression + 15, cylWidth - 4, cylHeight - liquidCompression - 15);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(liquidX, startY, cylWidth, cylHeight);\r\n ctx.fillStyle = '#60a5fa';\r\n ctx.font = 'bold 16px system-ui';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('\u0633\u0627\u0626\u0644 (\u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)', liquidX + cylWidth \/ 2, startY + cylHeight + 30);\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.fillRect(liquidX + 2, startY + liquidCompression, cylWidth - 4, 15);\r\n if (force > 0) {\r\n ctx.fillStyle = '#ef4444';\r\n const arrowY = startY - 40 + liquidCompression;\r\n ctx.beginPath();\r\n ctx.moveTo(liquidX + cylWidth \/ 2, arrowY + 10);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 - 10, arrowY - 5);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 - 4, arrowY - 5);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 - 4, arrowY - 25);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 + 4, arrowY - 25);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 + 4, arrowY - 5);\r\n ctx.lineTo(liquidX + cylWidth \/ 2 + 10, arrowY - 5);\r\n ctx.fill();\r\n }\r\n ctx.fillStyle = 'rgba(244, 63, 94, 0.1)';\r\n ctx.fillRect(gasX + 2, startY + gasCompression + 15, cylWidth - 4, cylHeight - gasCompression - 15);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.strokeRect(gasX, startY, cylWidth, cylHeight);\r\n ctx.fillStyle = '#fb7185';\r\n ctx.fillText('\u063a\u0627\u0632 (\u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637)', gasX + cylWidth \/ 2, startY + cylHeight + 30);\r\n ctx.fillStyle = '#cbd5e1';\r\n ctx.fillRect(gasX + 2, startY + gasCompression, cylWidth - 4, 15);\r\n if (force > 0) {\r\n ctx.fillStyle = '#ef4444';\r\n const arrowY = startY - 40 + gasCompression;\r\n ctx.beginPath();\r\n ctx.moveTo(gasX + cylWidth \/ 2, arrowY + 10);\r\n ctx.lineTo(gasX + cylWidth \/ 2 - 10, arrowY - 5);\r\n ctx.lineTo(gasX + cylWidth \/ 2 - 4, arrowY - 5);\r\n ctx.lineTo(gasX + cylWidth \/ 2 - 4, arrowY - 25);\r\n ctx.lineTo(gasX + cylWidth \/ 2 + 4, arrowY - 25);\r\n ctx.lineTo(gasX + cylWidth \/ 2 + 4, arrowY - 5);\r\n ctx.lineTo(gasX + cylWidth \/ 2 + 10, arrowY - 5);\r\n ctx.fill();\r\n }\r\n ctx.fillStyle = '#fb7185';\r\n for (let p of particles) {\r\n const speedMult = 1 + (force \/ 100) * 0.5;\r\n p.x += p.vx * speedMult;\r\n p.y += p.vy * speedMult;\r\n if (p.x < 5) { p.x = 5; p.vx *= -1; }\r\n if (p.x > cylWidth - 5) { p.x = cylWidth - 5; p.vx *= -1; }\r\n if (p.y > cylHeight - 5) { p.y = cylHeight - 5; p.vy *= -1; }\r\n const pistonBottom = gasCompression + 15;\r\n if (p.y < pistonBottom + 5) { p.y = pistonBottom + 5; p.vy *= -1; }\r\n ctx.beginPath();\r\n ctx.arc(gasX + p.x, startY + p.y, p.radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n requestAnimationFrame(drawComp);\r\n }\r\n\r\n document.getElementById('comp-force').addEventListener('input', (e) => {\r\n force = parseInt(e.target.value);\r\n document.getElementById('comp-force-val').innerText = force + '%';\r\n });\r\n initParticles();\r\n drawComp();\r\n })();\r\n\r\n \/\/ ============================================\r\n \/\/ 3. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629 (ViscositySimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('viscosity-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0644\u0632\u0648\u062c\u0629<\/h3>\r\n <div class=\"flex justify-center gap-4 mb-4\"><button id=\"viscosity-drop\" class=\"px-6 py-2 bg-amber-500 hover:bg-amber-600 text-white font-bold rounded-xl\">\u0625\u0633\u0642\u0627\u0637 \u0627\u0644\u0643\u0631\u0627\u062a<\/button><button id=\"viscosity-reset\" class=\"px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded-xl\">\u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646<\/button><\/div>\r\n <div class=\"bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[400px]\"><canvas id=\"viscosity-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('viscosity-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let isDropping = false;\r\n let positions = [0, 0, 0];\r\n const speeds = [6, 2.5, 0.4];\r\n const maxDropReference = 250;\r\n let animationId = null;\r\n\r\n function drawViscosity() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n }\r\n if (width === 0 || height === 0) { animationId = requestAnimationFrame(drawViscosity); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n const cylWidth = Math.min(80, width \/ 5);\r\n const cylHeight = height - 100;\r\n const startY = 40;\r\n const spacing = width \/ 4;\r\n const fluids = [\r\n { name: '\u0645\u0627\u0621 (\u0644\u0632\u0648\u062c\u0629 \u0645\u0646\u062e\u0641\u0636\u0629)', color: 'rgba(56, 189, 248, 0.6)', labelColor: '#38bdf8' },\r\n { name: '\u0632\u064a\u062a (\u0644\u0632\u0648\u062c\u0629 \u0645\u062a\u0648\u0633\u0637\u0629)', color: 'rgba(250, 204, 21, 0.6)', labelColor: '#facc15' },\r\n { name: '\u0639\u0633\u0644 (\u0644\u0632\u0648\u062c\u0629 \u0639\u0627\u0644\u064a\u0629)', color: 'rgba(217, 119, 6, 0.8)', labelColor: '#d97706' }\r\n ];\r\n for (let i = 0; i < fluids.length; i++) {\r\n const f = fluids[i];\r\n const x = spacing * (i + 1) - cylWidth \/ 2;\r\n ctx.fillStyle = f.color;\r\n ctx.fillRect(x, startY, cylWidth, cylHeight);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.5)';\r\n ctx.lineWidth = 4;\r\n ctx.strokeRect(x, startY, cylWidth, cylHeight);\r\n ctx.fillStyle = f.labelColor;\r\n ctx.font = 'bold 14px system-ui';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(f.name, x + cylWidth \/ 2, startY + cylHeight + 25);\r\n const maxDrop = cylHeight - 30;\r\n const currentDrop = Math.min(positions[i] * (maxDrop \/ maxDropReference), maxDrop);\r\n ctx.beginPath();\r\n ctx.arc(x + cylWidth \/ 2, startY + 15 + currentDrop, 12, 0, Math.PI * 2);\r\n const gradient = ctx.createRadialGradient(x + cylWidth \/ 2 - 4, startY + 15 + currentDrop - 4, 2, x + cylWidth \/ 2, startY + 15 + currentDrop, 12);\r\n gradient.addColorStop(0, '#ffffff');\r\n gradient.addColorStop(1, '#94a3b8');\r\n ctx.fillStyle = gradient;\r\n ctx.fill();\r\n ctx.strokeStyle = '#475569';\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n animationId = requestAnimationFrame(drawViscosity);\r\n }\r\n\r\n function drop() {\r\n if (isDropping) return;\r\n isDropping = true;\r\n positions = [0, 0, 0];\r\n function updateDrop() {\r\n let allFinished = true;\r\n for (let i = 0; i < speeds.length; i++) {\r\n if (positions[i] < maxDropReference) {\r\n positions[i] = Math.min(positions[i] + speeds[i], maxDropReference);\r\n allFinished = false;\r\n }\r\n }\r\n if (!allFinished) setTimeout(updateDrop, 20);\r\n else isDropping = false;\r\n }\r\n updateDrop();\r\n }\r\n\r\n function resetDrop() { isDropping = false; positions = [0, 0, 0]; }\r\n document.getElementById('viscosity-drop').addEventListener('click', drop);\r\n document.getElementById('viscosity-reset').addEventListener('click', resetDrop);\r\n drawViscosity();\r\n })();\r\n\r\n \/\/ ============================================\r\n \/\/ 4. \u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629 (ContinuitySimulation)\r\n \/\/ ============================================\r\n (function() {\r\n const container = document.getElementById('continuity-sim');\r\n if (!container) return;\r\n\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'bg-slate-900 p-6 rounded-2xl border border-slate-700';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u0629<\/h3>\r\n <div class=\"bg-black\/20 p-4 rounded-xl max-w-md mx-auto\"><label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639 \u0627\u0644\u0623\u064a\u0645\u0646 (A\u2082)<\/span><span id=\"cont-area-val\" class=\"text-emerald-400\">40%<\/span><\/div><input id=\"cont-area\" type=\"range\" min=\"20\" max=\"100\" step=\"1\" value=\"40\" class=\"w-full accent-emerald-500\"\/><\/label><p class=\"text-l text-slate-500 mt-3\">\u0643\u0644\u0645\u0627 \u0642\u0644\u062a \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u0642\u0637\u0639\u060c \u0632\u0627\u062f\u062a \u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u0645\u0627\u0626\u0639.<\/p><\/div>\r\n <div class=\"bg-slate-900 rounded-xl border border-slate-700 relative overflow-hidden h-[300px] mt-4\"><canvas id=\"cont-canvas\" class=\"absolute inset-0 w-full h-full\"><\/canvas><\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n let canvas = document.getElementById('cont-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 0, height = 0;\r\n let area2 = 40;\r\n let particles = [];\r\n const numParticles = 300;\r\n let animationId = null;\r\n\r\n function initContParticles() {\r\n particles = [];\r\n for (let i = 0; i < numParticles; i++) particles.push({ x: Math.random() * 1000, y: 0, ny: (Math.random() - 0.5) * 0.9 });\r\n }\r\n\r\n function drawCont() {\r\n const rect = canvas.getBoundingClientRect();\r\n if (rect.width !== width || rect.height !== height) {\r\n width = rect.width;\r\n height = rect.height;\r\n canvas.width = width;\r\n canvas.height = height;\r\n }\r\n if (width === 0 || height === 0) { animationId = requestAnimationFrame(drawCont); return; }\r\n ctx.clearRect(0, 0, width, height);\r\n const centerY = height \/ 2 - 20;\r\n const H1 = 120;\r\n const H2 = (area2 \/ 100) * 120;\r\n const transStart = width \/ 2 - 60;\r\n const transEnd = width \/ 2 + 60;\r\n const getH = (x) => {\r\n if (x < transStart) return H1;\r\n if (x > transEnd) return H2;\r\n const t = (x - transStart) \/ (transEnd - transStart);\r\n const loothT = t * t * (3 - 2 * t);\r\n return H1 + loothT * (H2 - H1);\r\n };\r\n ctx.fillStyle = 'rgba(16, 185, 129, 0.1)';\r\n ctx.beginPath();\r\n for (let x = 0; x <= width; x += 5) ctx.lineTo(x, centerY - getH(x) \/ 2);\r\n for (let x = width; x >= 0; x -= 5) ctx.lineTo(x, centerY + getH(x) \/ 2);\r\n ctx.closePath();\r\n ctx.fill();\r\n ctx.strokeStyle = 'rgba(255,255,255,0.6)';\r\n ctx.lineWidth = 4;\r\n ctx.beginPath();\r\n for (let x = 0; x <= width; x += 5) ctx.lineTo(x, centerY - getH(x) \/ 2);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n for (let x = 0; x <= width; x += 5) ctx.lineTo(x, centerY + getH(x) \/ 2);\r\n ctx.stroke();\r\n const v1 = 1.5;\r\n const Q = H1 * v1;\r\n ctx.fillStyle = '#34d399';\r\n for (let p of particles) {\r\n const currentH = getH(p.x);\r\n const vx = Q \/ currentH;\r\n p.x += vx;\r\n if (p.x > width) { p.x = 0; p.ny = (Math.random() - 0.5) * 0.9; }\r\n const y = centerY + p.ny * currentH;\r\n ctx.beginPath();\r\n ctx.arc(p.x, y, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n ctx.fillStyle = 'white';\r\n ctx.font = 'bold 16px system-ui';\r\n ctx.textAlign = 'center';\r\n ctx.fillText(`A\u2081 = 100%`, width \/ 4, height - 30);\r\n ctx.fillStyle = '#94a3b8';\r\n ctx.fillText(`v\u2081 = 1.0x`, width \/ 4, height - 10);\r\n ctx.fillStyle = 'white';\r\n ctx.fillText(`A\u2082 = ${area2}%`, (3 * width) \/ 4, height - 30);\r\n const v2Ratio = (H1 \/ H2).toFixed(1);\r\n ctx.fillStyle = '#34d399';\r\n ctx.fillText(`v\u2082 = ${v2Ratio}x`, (3 * width) \/ 4, height - 10);\r\n animationId = requestAnimationFrame(drawCont);\r\n }\r\n\r\n document.getElementById('cont-area').addEventListener('input', (e) => {\r\n area2 = parseInt(e.target.value);\r\n document.getElementById('cont-area-val').innerText = area2 + '%';\r\n });\r\n initContParticles();\r\n drawCont();\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18510","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18510","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=18510"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18510\/revisions"}],"predecessor-version":[{"id":18512,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18510\/revisions\/18512"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}