\u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 | \u0641\u064a\u0632\u064a\u0627\u0621 \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/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 .sim-card {\r\n background: #0f172a;\r\n border-radius: 1rem;\r\n border: 1px solid #334155;\r\n padding: 1.5rem;\r\n margin: 2rem 0;\r\n }\r\n button {\r\n transition: all 0.2s ease;\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\u0627\u0648\u0644: \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 (Static Fluids)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u062a\u0627\u0633\u0639<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0645\u0627\u0626\u0639_\u0627\u0644\u0633\u0627\u0643\u0646_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\u0623\u0648\u0644__\u0627\u0644\u0645\u0627\u0626\u0639_\u0627\u0644\u0633\u0627\u0643\u0646_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 <div class=\"space-y-12 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section class=\"relative p-8 bg-gradient-to-br from-blue-900\/20 to-slate-900\/40 rounded-3xl border border-blue-500\/20 shadow-2xl overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-32 h-32 bg-blue-500\/10 blur-3xl rounded-full -translate-x-1\/2 -translate-y-1\/2\"><\/div>\r\n <h2 class=\"text-3xl font-black text-white mb-6 flex items-center gap-3\">\r\n <span class=\"w-3 h-10 bg-blue-500 rounded-full\"><\/span>\r\n \u0645\u0642\u062f\u0645\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0626\u0639\r\n <\/h2>\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\r\n \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629\u060c \u0646\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0633\u0627\u0626\u0644\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u0632\u064a\u062a) \u0648\u0627\u0644\u063a\u0627\u0632\u0627\u062a (\u0645\u062b\u0644 \u0627\u0644\u0647\u0648\u0627\u0621). \u0647\u0630\u0647 \u0627\u0644\u0645\u0648\u0627\u062f \u062a\u0634\u062a\u0631\u0643 \u0641\u064a \u062e\u0627\u0635\u064a\u0629 \u0645\u0647\u0645\u0629: \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0648\u062a\u063a\u064a\u064a\u0631 \u0634\u0643\u0644\u0647\u0627 \u062d\u0633\u0628 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647. \u0644\u0630\u0644\u0643\u060c \u064a\u064f\u0637\u0644\u0642 \u0639\u0644\u064a\u0647\u0627 \u0627\u0633\u0645 <span class=\"text-blue-400 font-bold underline decoration-blue-500\/30 underline-offset-4\">\u0645\u0648\u0627\u0626\u0639 (Fluids)<\/span>.\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 hover:border-blue-500\/30 transition-all group\">\r\n <h3 class=\"text-blue-400 font-bold text-xl mb-4 flex items-center gap-2\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"group-hover:rotate-12 transition-transform\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><\/svg>\r\n \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0645\u0627\u0626\u0639 (Fluid)\r\n <\/h3>\r\n <p class=\"text-slate-300 text-l leading-loose\">\r\n \u0627\u0644\u0645\u0627\u0626\u0639 \u0647\u0648 \u0623\u064a \u0645\u0627\u062f\u0629 \u0644\u0647\u0627 \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0648\u062a\u0623\u062e\u0630 \u0634\u0643\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u062d\u062a\u0648\u064a\u0647. \u064a\u0634\u0645\u0644 \u0627\u0644\u0645\u0627\u0626\u0639:\r\n <\/p>\r\n <ul class=\"mt-4 space-y-2\">\r\n <li class=\"flex items-center gap-2 text-slate-400 text-l\"><span class=\"w-1.5 h-1.5 bg-blue-500 rounded-full\"><\/span> \u0627\u0644\u0633\u0648\u0627\u0626\u0644 (\u0645\u062b\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u0632\u064a\u062a)<\/li>\r\n <li class=\"flex items-center gap-2 text-slate-400 text-l\"><span class=\"w-1.5 h-1.5 bg-blue-500 rounded-full\"><\/span> \u0627\u0644\u063a\u0627\u0632\u0627\u062a (\u0645\u062b\u0644 \u0627\u0644\u0647\u0648\u0627\u0621)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-blue-900\/10 p-6 rounded-2xl border border-blue-500\/20\">\r\n <h3 class=\"text-blue-300 font-bold text-lg mb-3\">\u0644\u0645\u0627\u0630\u0627 \u062a\u0635\u0646\u0641 \u0643\u0645\u0648\u0627\u0626\u0639\u061f<\/h3>\r\n <p class=\"text-slate-400 text-l leading-relaxed\">\u0644\u0623\u0646 \u062c\u0633\u064a\u0645\u0627\u062a\u0647\u0627 \u063a\u064a\u0631 \u0645\u062a\u0631\u0627\u0628\u0637\u0629 \u0628\u0634\u0643\u0644 \u062b\u0627\u0628\u062a\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0644\u0647\u0627 \u0628\u0627\u0644\u062a\u062d\u0631\u0643 \u0648\u0627\u0644\u0627\u0646\u0633\u0644\u0627\u0644 \u0628\u0633\u0647\u0648\u0644\u0629. \u062f\u0631\u0627\u0633\u062a\u0646\u0627 \u0647\u0646\u0627 \u062a\u0642\u062a\u0635\u0631 \u0639\u0644\u0649 <span class=\"text-white font-bold\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/span> (\u063a\u064a\u0631 \u0627\u0644\u062c\u0627\u0631\u064a).<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\u062b\u0627\u0646\u064a\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner\">\r\n <div class=\"flex flex-col md:flex-row gap-8 items-center\">\r\n <div class=\"flex-1 space-y-4\">\r\n <p class=\"text-slate-300\">\u0627\u0644\u0636\u063a\u0637 (P) \u0647\u0648 \u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u0624\u062b\u0631 \u0641\u064a \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629.<\/p>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-emerald-500\/20 text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = F \/ A<\/div><\/div>\r\n <div class=\"grid grid-cols-2 gap-4 text-l\"><div class=\"bg-slate-900\/60 p-3 rounded-lg border border-white\/5\"><span class=\"text-emerald-400 font-bold\">F:<\/span> \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 (N)<\/div><div class=\"bg-slate-900\/60 p-3 rounded-lg border border-white\/5\"><span class=\"text-emerald-400 font-bold\">A:<\/span> \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (m\u00b2)<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex-1 bg-emerald-500\/5 p-6 rounded-2xl border border-emerald-500\/20\"><h4 class=\"text-emerald-400 font-bold mb-3 italic text-l\">\u0648\u062d\u062f\u0629 \u0627\u0644\u0642\u064a\u0627\u0633:<\/h4><p class=\"text-slate-300 text-l\">\u0648\u062d\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u062f\u0648\u0644\u064a \u0647\u064a <span class=\"text-white font-bold\">\u0627\u0644\u0628\u0627\u0633\u0643\u0627\u0644 (Pa)<\/span>.<\/p><div class=\"mt-2\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">1 Pa = 1 N\/m\u00b2<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"pressureForceAreaSim\" class=\"sim-card\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-blue-500 rounded-full\"><\/span>\u062b\u0627\u0644\u062b\u0627\u064b: \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 \u0639\u0646\u062f \u0646\u0642\u0637\u0629 \u062f\u0627\u062e\u0644\u064a\u0629<\/h2>\r\n <div class=\"bg-blue-900\/5 p-8 rounded-3xl border border-blue-500\/20\">\r\n <p class=\"text-slate-300 mb-6\">\u0627\u0644\u0633\u0628\u0628 \u0641\u064a \u0648\u062c\u0648\u062f \u0636\u063a\u0637 \u0647\u0648 \u0648\u0632\u0646 \u0639\u0645\u0648\u062f \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0648\u0627\u0642\u0639 \u0641\u0648\u0642 \u062a\u0644\u0643 \u0627\u0644\u0646\u0642\u0637\u0629. \u064a\u064f\u0639\u0637\u0649 \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 \u0628\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/p>\r\n <div class=\"bg-black\/40 p-8 rounded-2xl border border-blue-500\/30 text-center mb-8\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P_fluid = \u03c1 \u00d7 h \u00d7 g<\/div><\/div>\r\n <div class=\"grid grid-cols-1 l:grid-cols-3 gap-4\"><div class=\"bg-slate-800\/60 p-4 rounded-xl text-center\"><div class=\"text-blue-400 font-black text-xl mb-1\">\u03c1<\/div><div class=\"text-[10px] text-slate-500\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 (kg\/m\u00b3)<\/div><\/div><div class=\"bg-slate-800\/60 p-4 rounded-xl text-center\"><div class=\"text-blue-400 font-black text-xl mb-1\">h<\/div><div class=\"text-[10px] text-slate-500\">\u0627\u0644\u0639\u0645\u0642 \u062a\u062d\u062a \u0627\u0644\u0633\u0637\u062d (m)<\/div><\/div><div class=\"bg-slate-800\/60 p-4 rounded-xl text-center\"><div class=\"text-blue-400 font-black text-xl mb-1\">g<\/div><div class=\"text-[10px] text-slate-500\">\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 (m\/s\u00b2)<\/div><\/div><\/div>\r\n <div class=\"mt-8 p-6 bg-amber-500\/5 rounded-2xl border border-amber-500\/20\"><h4 class=\"text-amber-400 font-bold mb-2 text-l\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a (\u0627\u0644\u0645\u0637\u0644\u0642):<\/h4><p class=\"text-slate-400 text-l mb-4\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0633\u0637\u062d \u0645\u0644\u0627\u0645\u0633\u0627\u064b \u0644\u0644\u0647\u0648\u0627\u0621\u060c \u0646\u0636\u064a\u0641 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (P\u2080):<\/p><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = P\u2080 + \u03c1 \u00d7 h \u00d7 g<\/div><\/div>\r\n <\/div>\r\n \r\n <div id=\"staticFluidsSim\" class=\"sim-card\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-amber-500 rounded-full\"><\/span>\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 text-center space-y-3\"><div class=\"w-12 h-12 bg-blue-500\/20 rounded-full flex items-center justify-center mx-auto text-blue-400 font-bold\">1<\/div><h4 class=\"text-white font-bold\">\u0627\u0644\u0639\u0645\u0642 (h)<\/h4><p class=\"text-l text-slate-400\">\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629: \u0643\u0644\u0645\u0627 \u0632\u0627\u062f \u0627\u0644\u0639\u0645\u0642\u060c \u0632\u0627\u062f \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 text-center space-y-3\"><div class=\"w-12 h-12 bg-emerald-500\/20 rounded-full flex items-center justify-center mx-auto text-emerald-400 font-bold\">2<\/div><h4 class=\"text-white font-bold\">\u0627\u0644\u0643\u062b\u0627\u0641\u0629 (\u03c1)<\/h4><p class=\"text-l text-slate-400\">\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629: \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0645\u0627\u0644\u062d \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u0639\u0630\u0628.<\/p><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 text-center space-y-3\"><div class=\"w-12 h-12 bg-rose-500\/20 rounded-full flex items-center justify-center mx-auto text-rose-400 font-bold\">3<\/div><h4 class=\"text-white font-bold\">\u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 (g)<\/h4><p class=\"text-l text-slate-400\">\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629 (\u062b\u0627\u0628\u062a\u0629 \u062a\u0642\u0631\u064a\u0628\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636).<\/p><\/div>\r\n <\/div>\r\n <div class=\"bg-rose-500\/5 p-6 rounded-2xl border border-rose-500\/20\"><p class=\"text-rose-300 text-l font-bold italic\"> \u0645\u0644\u0627\u062d\u0638\u0629 \u0647\u0627\u0645\u0629: \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0634\u0643\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0623\u0648 \u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d\u0647.<\/p><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-indigo-500 rounded-full\"><\/span>\u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u0648\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644<\/h2>\r\n <div class=\"bg-indigo-900\/10 p-8 rounded-3xl border border-indigo-500\/30\">\r\n <div class=\"flex flex-col md:flex-row gap-8 items-start\">\r\n <div class=\"flex-1 space-y-4\"><h3 class=\"text-indigo-400 font-bold text-xl\">\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644:<\/h3><blockquote class=\"border-r-4 border-indigo-500 pr-4 py-2 text-slate-300 italic\">\"\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0645\u0637\u0628\u0642 \u0639\u0644\u0649 \u0645\u0627\u0626\u0639 \u0645\u062d\u0635\u0648\u0631 \u0641\u064a \u0648\u0639\u0627\u0621 \u0645\u063a\u0644\u0642 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a \u0625\u0644\u0649 \u062c\u0645\u064a\u0639 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0645\u0627\u0626\u0639 \u0648\u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.\"<\/blockquote><p class=\"text-l text-slate-400 leading-relaxed\">\u0647\u0630\u0627 \u0627\u0644\u0645\u0628\u062f\u0623 \u0647\u0648 \u0623\u0633\u0627\u0633 \u0639\u0645\u0644 <span class=\"text-white font-bold\">\u0627\u0644\u0631\u0627\u0641\u0639\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629<\/span> \u0648\u0646\u0638\u0627\u0645 <span class=\"text-white font-bold\">\u0627\u0644\u0643\u0648\u0627\u0628\u062d (\u0627\u0644\u0641\u0631\u0627\u0645\u0644)<\/span> \u0641\u064a \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a.<\/p><\/div>\r\n <div class=\"flex-1 bg-black\/40 p-6 rounded-2xl border border-white\/5 space-y-4\"><h4 class=\"text-indigo-300 font-bold text-l\">\u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0627\u0644\u0641\u0631\u0627\u0645\u0644\u061f<\/h4><ol class=\"text-l text-slate-400 space-y-3 list-decimal list-inside\"><li>\u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u062f\u0648\u0627\u0633\u0629 \u064a\u062f\u0641\u0639 \u0645\u0643\u0628\u0633 \u0627\u0644\u0623\u0633\u0637\u0648\u0627\u0646\u0629.<\/li><li>\u064a\u0646\u062a\u0642\u0644 \u0627\u0644\u0636\u063a\u0637 \u0639\u0628\u0631 \u0627\u0644\u0633\u0627\u0626\u0644 (\u0644\u0623\u0646\u0647 \u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637).<\/li><li>\u064a\u062f\u0641\u0639 \u0627\u0644\u0633\u0627\u0626\u0644 \u0645\u0643\u0627\u0628\u0633 \u0627\u0644\u0639\u062c\u0644\u0627\u062a \u0644\u062a\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0631\u0627\u0635.<\/li><li>\u064a\u0646\u0634\u0623 \u0627\u062d\u062a\u0643\u0627\u0643 \u064a\u0648\u0642\u0641 \u062d\u0631\u0643\u0629 \u0627\u0644\u0633\u064a\u0627\u0631\u0629.<\/li><\/ol><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"hydraulicSim\" class=\"sim-card\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-slate-500 rounded-full\"><\/span>\u0623\u0645\u062b\u0644\u0629 \u0645\u062d\u0644\u0648\u0644\u0629<\/h2>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/60 p-6 rounded-2xl border border-slate-700\"><p class=\"text-amber-400 font-bold text-l mb-4\">\u0645\u062b\u0627\u0644 1: \u0627\u062d\u0633\u0628 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0639\u0644\u0649 \u063a\u0648\u0627\u0635 \u0641\u064a \u0628\u062d\u064a\u0631\u0629 \u0639\u0644\u0649 \u0639\u0645\u0642 20m.<\/p><div class=\"space-y-2 text-l text-slate-300 bg-black\/20 p-4 rounded-xl\"><p>P = P\u2080 + \u03c1hg<\/p><p>P = 10\u2075 + (1000 \u00d7 20 \u00d7 10)<\/p><p>P = 10\u2075 + 2 \u00d7 10\u2075 = <span class=\"text-emerald-400 font-bold\">3 \u00d7 10\u2075 Pa<\/span><\/p><\/div><\/div>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-2xl border border-slate-700\"><p class=\"text-amber-400 font-bold text-l mb-4\">\u0645\u062b\u0627\u0644 2: \u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644<\/p><div class=\"space-y-2 text-l text-slate-300 bg-black\/20 p-4 rounded-xl\"><p class=\"text-l text-slate-400 mb-2\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 (\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644):<\/p><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">F\u2081 \/ A\u2081 = F\u2082 \/ A\u2082<\/div><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">100 \/ 10 = 500 \/ 50<\/div><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633: \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-blue-500\/20 text-center\"><div class=\"text-blue-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0627\u0644\u0645\u0648\u0627\u0626\u0639<\/h4><p class=\"text-[10px] text-slate-400\">\u0645\u0648\u0627\u062f \u0644\u0647\u0627 \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0648\u062a\u063a\u064a\u064a\u0631 \u0634\u0643\u0644\u0647\u0627 (\u0627\u0644\u0633\u0648\u0627\u0626\u0644 \u0648\u0627\u0644\u063a\u0627\u0632\u0627\u062a).<\/p><\/div>\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-emerald-500\/20 text-center\"><div class=\"text-emerald-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0645<\/h4><p class=\"text-[10px] text-slate-400\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u0627\u064b \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629: <div class=\"text-center font-mono text-l my-2\" dir=\"ltr\">P = F \/ A<\/div><\/p><\/div>\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-amber-500\/20 text-center\"><div class=\"text-amber-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639<\/h4><p class=\"text-[10px] text-slate-400\">\u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u0642 \u0648\u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0648\u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629: <div class=\"text-center font-mono text-l my-2\" dir=\"ltr\">P = \u03c1 \u00d7 h \u00d7 g<\/div><\/p><\/div>\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-indigo-500\/20 text-center\"><div class=\"text-indigo-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644<\/h4><p class=\"text-[10px] text-slate-400\">\u0627\u0644\u0636\u063a\u0637 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a \u0641\u064a \u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u062d\u0635\u0648\u0631 (\u0627\u0644\u0631\u0627\u0641\u0639\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629).<\/p><\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-6 rounded-2xl border border-white\/5\"><h4 class=\"text-white font-bold mb-4 text-l\">\u062d\u0642\u0627\u0626\u0642 \u0633\u0631\u064a\u0639\u0629:<\/h4><ul class=\"grid grid-cols-1 md:grid-cols-2 gap-3\"><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0648\u062d\u062f\u0629 \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0647\u064a \u0627\u0644\u0628\u0627\u0633\u0643\u0627\u0644 (Pa).<\/li><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0627\u0644\u0636\u063a\u0637 \u0645\u062a\u0633\u0627\u0648\u064d \u0639\u0646\u062f \u062c\u0645\u064a\u0639 \u0627\u0644\u0646\u0642\u0627\u0637 \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u0645\u0642 \u0641\u064a \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062c\u0627\u0646\u0633.<\/li><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0623\u0648 \u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d\u0647.<\/li><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0642\u0648\u0629 \u0644\u0643\u0646\u0647\u0627 \u0644\u0627 \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0634\u063a\u0644.<\/li><\/ul><\/div>\r\n <\/section>\r\n\r\n <section class=\"bg-gradient-to-r from-blue-600\/20 to-indigo-600\/20 p-8 rounded-3xl border border-blue-500\/30 text-center\"><h3 class=\"text-2xl font-black text-white mb-4\">\u062a\u0630\u0643\u0631 \u062f\u0627\u0626\u0645\u0627\u064b<\/h3><p class=\"text-slate-300 max-w-2xl mx-auto leading-relaxed\">\u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 \u064a\u0639\u062a\u0645\u062f \u0641\u0642\u0637 \u0639\u0644\u0649 \u0646\u0648\u0639 \u0627\u0644\u0633\u0627\u0626\u0644 (\u0643\u062b\u0627\u0641\u062a\u0647) \u0648\u0645\u062f\u0649 \u0639\u0645\u0642\u0643 \u0641\u064a\u0647. \u0644\u0627 \u064a\u0647\u0645 \u0625\u0630\u0627 \u0643\u0646\u062a \u0641\u064a \u0645\u0633\u0628\u062d \u0635\u063a\u064a\u0631 \u0623\u0648 \u0641\u064a \u0627\u0644\u0645\u062d\u064a\u0637 \u0627\u0644\u0634\u0627\u0633\u0639\u060c \u0637\u0627\u0644\u0645\u0627 \u0623\u0646\u0643 \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u0645\u0642\u060c \u0641\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0646\u0641\u0633\u0647!<\/p><\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ======================== \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0636\u063a\u0637 = \u0627\u0644\u0642\u0648\u0629 \/ \u0627\u0644\u0645\u0633\u0627\u062d\u0629 ========================\r\n (function() {\r\n const container = document.getElementById('pressureForceAreaSim');\r\n if (!container) return;\r\n let force = 100, area = 2;\r\n const render = () => {\r\n const pressure = force \/ area;\r\n container.innerHTML = `\r\n <div class=\"bg-slate-900\/80 p-6 rounded-3xl border border-white\/10 shadow-2xl space-y-8\" dir=\"rtl\">\r\n <div class=\"text-center\"><h3 class=\"text-2xl font-black text-emerald-400 mb-2\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0648\u0627\u0644\u0636\u063a\u0637<\/h3><p class=\"text-slate-400 text-l\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0643\u064a\u0641 \u064a\u062a\u0623\u062b\u0631 \u0627\u0644\u0636\u063a\u0637 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u0648\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0637\u062d<\/p><\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"space-y-6 bg-black\/20 p-6 rounded-2xl border border-white\/5\">\r\n <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 (F)<\/span><span class=\"text-blue-400 font-bold\">${force} \u0646\u064a\u0648\u062a\u0646<\/span><\/div><input type=\"range\" id=\"forceRangePFA\" min=\"10\" max=\"500\" step=\"10\" value=\"${force}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"><\/label>\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0645\u0633\u0627\u062d\u0629 (A)<\/span><span class=\"text-emerald-400 font-bold\">${area} \u0645\u00b2<\/span><\/div><input type=\"range\" id=\"areaRangePFA\" min=\"0.5\" max=\"10\" step=\"0.5\" value=\"${area}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\"><\/label>\r\n <div class=\"bg-emerald-900\/20 p-4 rounded-xl border border-emerald-500\/20 text-center\"><p class=\"text-l text-emerald-300 mb-1\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0627\u062a\u062c (P):<\/p><p class=\"text-3xl font-black text-white\">${pressure.toFixed(1)} <span class=\"text-l font-normal text-slate-400\">Pa<\/span><\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-black\/40 rounded-2xl border border-white\/5 relative flex flex-col items-center justify-center min-h-[300px] p-8\">\r\n <div class=\"relative flex flex-col items-center\"><div class=\"flex flex-col items-center transition-all duration-300\" style=\"transform: scale(${0.5 + force\/500})\"><div class=\"text-[10px] text-blue-400 font-bold mb-1\">\u0627\u0644\u0642\u0648\u0629 F<\/div><div class=\"w-2 h-16 bg-blue-500 relative\"><div class=\"absolute bottom-0 left-[-6px] border-l-[10px] border-r-[10px] border-t-[15px] border-l-transparent border-r-transparent border-t-blue-500\"><\/div><\/div><\/div><div class=\"bg-emerald-500\/20 border-2 border-emerald-500 transition-all duration-300 flex items-center justify-center mt-2 shadow-[0_0_20px_rgba(16,185,129,0.2)]\" style=\"width: ${area * 30}px; height: 20px; border-radius: 4px\"><span class=\"text-[10px] text-emerald-300 font-bold\">A<\/span><\/div><div class=\"flex flex-wrap justify-center gap-1 mt-4 max-w-[200px]\">${Array.from({ length: Math.min(50, Math.floor(pressure \/ 5)) }).map(() => `<div class=\"w-1 h-1 bg-rose-400 rounded-full animate-pulse\"><\/div>`).join('')}<\/div><\/div>\r\n <div class=\"mt-8 text-center\"><p class=\"text-l text-slate-400 italic\">${pressure > 100 ? '\u0636\u063a\u0637 \u0645\u0631\u062a\u0641\u0639: \u0642\u0648\u0629 \u0643\u0628\u064a\u0631\u0629 \u0639\u0644\u0649 \u0645\u0633\u0627\u062d\u0629 \u0635\u063a\u064a\u0631\u0629.' : pressure < 20 ? '\u0636\u063a\u0637 \u0645\u0646\u062e\u0641\u0636: \u0642\u0648\u0629 \u0635\u063a\u064a\u0631\u0629 \u0645\u0648\u0632\u0639\u0629 \u0639\u0644\u0649 \u0645\u0633\u0627\u062d\u0629 \u0643\u0628\u064a\u0631\u0629.' : '\u0636\u063a\u0637 \u0645\u062a\u0648\u0633\u0637.'}<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-slate-700 text-center\"><h4 class=\"text-emerald-400 font-bold text-l mb-4\">\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h4><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = F \/ A = ${force} \/ ${area} = ${pressure.toFixed(1)} Pa<\/div><\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('forceRangePFA')?.addEventListener('input', (e) => { force = parseFloat(e.target.value); render(); });\r\n document.getElementById('areaRangePFA')?.addEventListener('input', (e) => { area = parseFloat(e.target.value); render(); });\r\n };\r\n render();\r\n })();\r\n\r\n \/\/ ======================== \u0645\u062d\u0627\u0643\u0627\u0629 \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 ========================\r\n (function() {\r\n const container = document.getElementById('staticFluidsSim');\r\n if (!container) return;\r\n let depth = 5, density = 1000, showAtm = true;\r\n const P0 = 101325;\r\n const g = 9.8;\r\n const render = () => {\r\n const fluidPressure = density * depth * g;\r\n const totalPressure = showAtm ? P0 + fluidPressure : fluidPressure;\r\n container.innerHTML = `\r\n <div class=\"bg-slate-900\/80 p-6 rounded-3xl border border-white\/10 shadow-2xl space-y-8\" dir=\"rtl\">\r\n <div class=\"text-center\"><h3 class=\"text-2xl font-black text-blue-400 mb-2\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/h3><p class=\"text-slate-400 text-l\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0643\u064a\u0641 \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637 \u0645\u0639 \u0627\u0644\u0639\u0645\u0642 \u0648\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0626\u0639<\/p><\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"space-y-6 bg-black\/20 p-6 rounded-2xl border border-white\/5\">\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0639\u0645\u0642 (h)<\/span><span class=\"text-blue-400 font-bold\">${depth} \u0645\u062a\u0631<\/span><\/div><input type=\"range\" id=\"depthRange\" min=\"0\" max=\"50\" step=\"1\" value=\"${depth}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"><\/label>\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 (\u03c1)<\/span><span class=\"text-emerald-400 font-bold\">${density} kg\/m\u00b3<\/span><\/div><select id=\"densitySelect\" class=\"w-full bg-slate-800 text-white p-2 rounded-lg border border-slate-700 focus:ring-2 focus:ring-emerald-500 outline-none\"><option value=\"800\" ${density===800?'selected':''}>\u0632\u064a\u062a (800)<\/option><option value=\"1000\" ${density===1000?'selected':''}>\u0645\u0627\u0621 \u0639\u0630\u0628 (1000)<\/option><option value=\"1030\" ${density===1030?'selected':''}>\u0645\u0627\u0621 \u0628\u062d\u0631 (1030)<\/option><option value=\"13600\" ${density===13600?'selected':''}>\u0632\u0626\u0628\u0642 (13600)<\/option><\/select><\/label>\r\n <div class=\"flex items-center gap-3 p-3 bg-slate-800\/50 rounded-xl border border-white\/5\"><input type=\"checkbox\" id=\"atmCheck\" ${showAtm ? 'checked' : ''} class=\"w-4 h-4 accent-blue-500\"><label class=\"text-l text-slate-300 cursor-pointer\">\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (P\u2080)<\/label><\/div>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-xl border border-blue-500\/20\"><p class=\"text-l text-blue-300 mb-1\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a (P):<\/p><p class=\"text-2xl font-black text-white\">${(totalPressure\/1000).toFixed(1)} <span class=\"text-l font-normal text-slate-400\">kPa<\/span><\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-black\/40 rounded-2xl border border-white\/5 relative flex items-center justify-center min-h-[400px] overflow-hidden\">\r\n <div class=\"relative w-64 h-80 border-x-4 border-b-4 border-slate-600 rounded-b-xl overflow-hidden bg-slate-900\/30\"><div class=\"absolute bottom-0 w-full bg-blue-500\/40 transition-all duration-500 border-t-2 border-blue-300\" style=\"height: 100%\"><\/div><div class=\"absolute left-1\/2 -translate-x-1\/2 flex flex-col items-center transition-all duration-500\" style=\"top: ${(depth\/50)*100}%\"><div class=\"w-4 h-4 bg-rose-500 rounded-full shadow-[0_0_10px_rgba(244,63,94,0.8)] animate-pulse\"><\/div><div class=\"mt-2 px-2 py-1 bg-slate-900\/90 rounded border border-white\/10 text-[10px] text-white whitespace-nowrap\">\u0627\u0644\u0639\u0645\u0642: ${depth}m<\/div><\/div>${[0,10,20,30,40,50].map(m => `<div class=\"absolute right-0 w-4 h-px bg-slate-500\/50\" style=\"top: ${(m\/50)*100}%\"><span class=\"absolute right-5 -top-2 text-[8px] text-slate-500\">${m}m<\/span><\/div>`).join('')}<\/div>\r\n <div class=\"absolute left-10 space-y-4\"><div class=\"flex items-center gap-2\"><div class=\"w-8 h-1 bg-blue-400\"><\/div><span class=\"text-[10px] text-slate-400\">\u0636\u063a\u0637 \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\"><h4 class=\"text-blue-400 font-bold text-l mb-3\">\u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 (P_fluid):<\/h4><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P_fluid = \u03c1 \u00d7 h \u00d7 g<\/div><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">${density} \u00d7 ${depth} \u00d7 ${g} = ${fluidPressure.toFixed(0)} Pa<\/div><\/div><div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\"><h4 class=\"text-emerald-400 font-bold text-l mb-3\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a (P):<\/h4><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = P\u2080 + \u03c1 \u00d7 h \u00d7 g<\/div><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">${showAtm ? '101325' : '0'} + ${fluidPressure.toFixed(0)} = ${totalPressure.toFixed(0)} Pa<\/div><\/div><\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('depthRange')?.addEventListener('input', (e) => { depth = parseInt(e.target.value); render(); });\r\n document.getElementById('densitySelect')?.addEventListener('change', (e) => { density = parseInt(e.target.value); render(); });\r\n document.getElementById('atmCheck')?.addEventListener('change', (e) => { showAtm = e.target.checked; render(); });\r\n };\r\n render();\r\n })();\r\n\r\n \/\/ ======================== \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0627\u0641\u0639\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 (\u0628\u062f\u0648\u0646 \u062a\u062d\u0643\u0645 \u064a\u062f\u0648\u064a) ========================\r\n (function() {\r\n const container = document.getElementById('hydraulicSim');\r\n if (!container) return;\r\n let force1 = 100, area1 = 10, area2 = 50;\r\n \/\/ \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\u0629 \u0644\u0644\u0645\u0643\u0628\u0633 \u0627\u0644\u0623\u0648\u0644 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0642\u0648\u0629 (\u0646\u0633\u0628\u0629 \u0645\u0646 80 \u0628\u0643\u0633\u0644 \u0643\u062d\u062f \u0623\u0642\u0635\u0649)\r\n const getDisplacement1 = (f) => (f \/ 500) * 80; \/\/ \u0623\u0642\u0635\u0649 \u0625\u0632\u0627\u062d\u0629 \u0639\u0646\u062f 500 \u0646\u064a\u0648\u062a\u0646\r\n \r\n const render = () => {\r\n const force2 = (force1 * area2) \/ area1;\r\n const d1 = getDisplacement1(force1);\r\n const d2 = d1 * (area1 \/ area2);\r\n const width1 = area1 * 2.5;\r\n const width2 = area2 * 2.5;\r\n container.innerHTML = `\r\n <div class=\"bg-slate-900\/80 p-6 rounded-3xl border border-white\/10 shadow-2xl space-y-8\" dir=\"rtl\">\r\n <div class=\"text-center\"><h3 class=\"text-2xl font-black text-indigo-400 mb-2\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0627\u0641\u0639\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629<\/h3><p class=\"text-slate-400 text-l\">\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644: \u0627\u0644\u0636\u063a\u0637 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a \u0641\u064a \u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u062d\u0635\u0648\u0631<\/p><p class=\"text-slate-500 text-l mt-1\">\u064a\u062a\u062d\u0631\u0643 \u0627\u0644\u0645\u0643\u0628\u0633 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0642\u0648\u0629 \u0623\u0648 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a<\/p><\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"space-y-6 bg-black\/20 p-6 rounded-2xl border border-white\/5\">\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u062f\u0627\u062e\u0644\u0629 (F\u2081)<\/span><span class=\"text-indigo-400 font-bold\">${force1} N<\/span><\/div><input type=\"range\" id=\"force1Slider\" min=\"10\" max=\"500\" step=\"10\" value=\"${force1}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-indigo-500\"><\/label>\r\n <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\u0643\u0628\u0633 \u0627\u0644\u0623\u0648\u0644 (A\u2081)<\/span><span class=\"text-blue-400 font-bold\">${area1} \u0648\u062d\u062f\u0629<\/span><\/div><input type=\"range\" id=\"area1Slider\" min=\"10\" max=\"30\" step=\"1\" value=\"${area1}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"><\/label>\r\n <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\u0643\u0628\u0633 \u0627\u0644\u062b\u0627\u0646\u064a (A\u2082)<\/span><span class=\"text-emerald-400 font-bold\">${area2} \u0648\u062d\u062f\u0629<\/span><\/div><input type=\"range\" id=\"area2Slider\" min=\"40\" max=\"120\" step=\"5\" value=\"${area2}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\"><\/label>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/20 shadow-inner\"><p class=\"text-l text-indigo-300 mb-1\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0646\u0627\u062a\u062c\u0629 \u0627\u0644\u0645\u062a\u0648\u0644\u062f\u0629 (F\u2082):<\/p><p class=\"text-3xl font-black text-white\">${force2.toFixed(0)} <span class=\"text-l font-normal text-slate-400\">N<\/span><\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-black\/40 rounded-2xl border border-white\/5 relative flex items-center justify-center min-h-[450px] p-4 overflow-hidden\">\r\n <svg width=\"100%\" height=\"400\" viewBox=\"0 0 400 400\" preserveAspectRatio=\"xMidYMid meet\">\r\n <defs><linearGradient id=\"fluidGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\"><stop offset=\"0%\" stopColor=\"#3b82f6\" stopOpacity=\"0.8\"\/><stop offset=\"100%\" stopColor=\"#1d4ed8\" stopOpacity=\"0.9\"\/><\/linearGradient><marker id=\"arrow-indigo\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\"><polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#818cf8\"\/><\/marker><marker id=\"arrow-emerald-up\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\"><polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#10b981\"\/><\/marker><\/defs>\r\n <path d=\"M 60 250 L 340 250\" stroke=\"url(#fluidGradient)\" strokeWidth=\"40\" fill=\"none\"\/>\r\n <rect x=\"${80 - width1\/2}\" y=\"100\" width=\"${width1}\" height=\"170\" fill=\"url(#fluidGradient)\" opacity=\"0.4\"\/><rect x=\"${80 - width1\/2}\" y=\"100\" width=\"${width1}\" height=\"170\" fill=\"none\" stroke=\"#64748b\" strokeWidth=\"3\"\/>\r\n <g transform=\"translate(0, ${d1})\"><rect x=\"${80 - width1\/2}\" y=\"95\" width=\"${width1}\" height=\"15\" fill=\"#94a3b8\" stroke=\"#475569\"\/><rect x=\"77\" y=\"20\" width=\"6\" height=\"80\" fill=\"#94a3b8\"\/><path d=\"M 80 -20 L 80 10\" stroke=\"#818cf8\" strokeWidth=\"4\" markerEnd=\"url(#arrow-indigo)\"\/><text x=\"80\" y=\"-35\" fill=\"#818cf8\" fontSize=\"16\" textAnchor=\"middle\" fontWeight=\"black\">F\u2081<\/text><\/g>\r\n <rect x=\"${300 - width2\/2}\" y=\"100\" width=\"${width2}\" height=\"170\" fill=\"url(#fluidGradient)\" opacity=\"0.4\"\/><rect x=\"${300 - width2\/2}\" y=\"100\" width=\"${width2}\" height=\"170\" fill=\"none\" stroke=\"#64748b\" strokeWidth=\"3\"\/>\r\n <g transform=\"translate(0, ${-d2})\"><rect x=\"${300 - width2\/2}\" y=\"240\" width=\"${width2}\" height=\"15\" fill=\"#94a3b8\" stroke=\"#475569\"\/><rect x=\"297\" y=\"250\" width=\"6\" height=\"40\" fill=\"#94a3b8\"\/><g transform=\"translate(260, 180)\"><path d=\"M10 40 L10 30 Q10 20 20 20 L60 20 Q70 20 70 30 L70 40 Z\" fill=\"#ef4444\"\/><rect x=\"5\" y=\"40\" width=\"70\" height=\"15\" rx=\"5\" fill=\"#ef4444\"\/><circle cx=\"20\" cy=\"55\" r=\"7\" fill=\"#1e293b\"\/><circle cx=\"60\" cy=\"55\" r=\"7\" fill=\"#1e293b\"\/><text x=\"40\" y=\"35\" fill=\"white\" fontSize=\"8\" textAnchor=\"middle\" fontWeight=\"bold\">\u0627\u0644\u062d\u0645\u0648\u0644\u0629<\/text><\/g><path d=\"M 300 380 L 300 350\" stroke=\"#10b981\" strokeWidth=\"4\" markerEnd=\"url(#arrow-emerald-up)\"\/><text x=\"300\" y=\"400\" fill=\"#10b981\" fontSize=\"16\" textAnchor=\"middle\" fontWeight=\"black\">F\u2082<\/text><\/g>\r\n <text x=\"200\" y=\"290\" fill=\"#3b82f6\" fontSize=\"14\" textAnchor=\"middle\" fontWeight=\"black\" class=\"animate-pulse\">\u0627\u0644\u0636\u063a\u0637 P \u0645\u062a\u0633\u0627\u0648\u064d \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0646\u0642\u0627\u0637<\/text>\r\n <\/svg>\r\n <div class=\"absolute top-4 right-4 bg-slate-900\/90 p-3 rounded-xl border border-white\/10 text-[10px] max-w-[180px] space-y-1 shadow-2xl\"><p class=\"text-indigo-400 font-bold underline\">\u0645\u0628\u062f\u0623 \u0627\u0644\u0639\u0645\u0644:<\/p><p class=\"text-slate-300 leading-relaxed\">\u0628\u0633\u0628\u0628 \u0639\u062f\u0645 \u0627\u0646\u0636\u063a\u0627\u0637 \u0627\u0644\u0633\u0627\u0626\u0644\u060c \u0641\u0625\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646 \u0627\u0644\u0645\u0643\u0628\u0633 \u0627\u0644\u0635\u063a\u064a\u0631 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0644\u0644\u0645\u0643\u0628\u0633 \u0627\u0644\u0643\u0628\u064a\u0631\u060c \u0645\u0645\u0627 \u064a\u0648\u0644\u062f \u0642\u0648\u0629 \u0647\u0627\u0626\u0644\u0629 \u0642\u0627\u062f\u0631\u0629 \u0639\u0644\u0649 \u0631\u0641\u0639 \u0627\u0644\u0623\u0648\u0632\u0627\u0646 \u0627\u0644\u062b\u0642\u064a\u0644\u0629.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-slate-700 text-center shadow-inner\"><h4 class=\"text-indigo-400 font-bold text-l mb-4\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 (\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644):<\/h4><div class=\"flex flex-col md:flex-row items-center justify-center gap-8\"><div class=\"p-4 bg-black\/20 rounded-xl border border-white\/5\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">F\u2081 \/ A\u2081 = F\u2082 \/ A\u2082<\/div><\/div><div class=\"hidden md:block text-slate-600 text-3xl\">\u2794<\/div><div class=\"p-4 bg-black\/20 rounded-xl border border-white\/5\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">${force1} \/ ${area1} = ${force2.toFixed(0)} \/ ${area2}<\/div><\/div><\/div><div class=\"mt-6 flex flex-wrap justify-center gap-4 text-l\"><div class=\"flex flex-col items-center bg-indigo-500\/10 p-3 rounded-xl border border-indigo-500\/20 min-w-[120px]\"><span class=\"text-slate-400 mb-1\">\u0627\u0644\u0641\u0627\u0626\u062f\u0629 \u0627\u0644\u0622\u0644\u064a\u0629<\/span><span class=\"text-indigo-300 font-bold text-lg\">${(area2\/area1).toFixed(1)}\u00d7<\/span><\/div><div class=\"flex flex-col items-center bg-emerald-500\/10 p-3 rounded-xl border border-emerald-500\/20 min-w-[120px]\"><span class=\"text-slate-400 mb-1\">\u0646\u0633\u0628\u0629 \u0627\u0644\u062d\u0631\u0643\u0629<\/span><span class=\"text-emerald-300 font-bold text-lg\">${(area1\/area2).toFixed(2)}<\/span><\/div><div class=\"flex flex-col items-center bg-blue-500\/10 p-3 rounded-xl border border-blue-500\/20 min-w-[120px]\"><span class=\"text-slate-400 mb-1\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u064a<\/span><span class=\"text-blue-300 font-bold text-lg\">${(force1\/area1).toFixed(1)} Pa\/u<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('force1Slider')?.addEventListener('input', (e) => { force1 = parseInt(e.target.value); render(); });\r\n document.getElementById('area1Slider')?.addEventListener('input', (e) => { area1 = parseInt(e.target.value); render(); });\r\n document.getElementById('area2Slider')?.addEventListener('input', (e) => { area2 = parseInt(e.target.value); render(); });\r\n };\r\n render();\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-18359","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18359","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=18359"}],"version-history":[{"count":2,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18359\/revisions"}],"predecessor-version":[{"id":18361,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18359\/revisions\/18361"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 | \u0641\u064a\u0632\u064a\u0627\u0621 \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/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 .sim-card {\r\n background: #0f172a;\r\n border-radius: 1rem;\r\n border: 1px solid #334155;\r\n padding: 1.5rem;\r\n margin: 2rem 0;\r\n }\r\n button {\r\n transition: all 0.2s ease;\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\u0627\u0648\u0644: \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 (Static Fluids)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u062a\u0627\u0633\u0639<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0645\u0627\u0626\u0639_\u0627\u0644\u0633\u0627\u0643\u0646_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\u0623\u0648\u0644__\u0627\u0644\u0645\u0627\u0626\u0639_\u0627\u0644\u0633\u0627\u0643\u0646_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 <div class=\"space-y-12 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section class=\"relative p-8 bg-gradient-to-br from-blue-900\/20 to-slate-900\/40 rounded-3xl border border-blue-500\/20 shadow-2xl overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-32 h-32 bg-blue-500\/10 blur-3xl rounded-full -translate-x-1\/2 -translate-y-1\/2\"><\/div>\r\n <h2 class=\"text-3xl font-black text-white mb-6 flex items-center gap-3\">\r\n <span class=\"w-3 h-10 bg-blue-500 rounded-full\"><\/span>\r\n \u0645\u0642\u062f\u0645\u0629 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0626\u0639\r\n <\/h2>\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\r\n \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629\u060c \u0646\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0633\u0627\u0626\u0644\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u0632\u064a\u062a) \u0648\u0627\u0644\u063a\u0627\u0632\u0627\u062a (\u0645\u062b\u0644 \u0627\u0644\u0647\u0648\u0627\u0621). \u0647\u0630\u0647 \u0627\u0644\u0645\u0648\u0627\u062f \u062a\u0634\u062a\u0631\u0643 \u0641\u064a \u062e\u0627\u0635\u064a\u0629 \u0645\u0647\u0645\u0629: \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0648\u062a\u063a\u064a\u064a\u0631 \u0634\u0643\u0644\u0647\u0627 \u062d\u0633\u0628 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647. \u0644\u0630\u0644\u0643\u060c \u064a\u064f\u0637\u0644\u0642 \u0639\u0644\u064a\u0647\u0627 \u0627\u0633\u0645 <span class=\"text-blue-400 font-bold underline decoration-blue-500\/30 underline-offset-4\">\u0645\u0648\u0627\u0626\u0639 (Fluids)<\/span>.\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 hover:border-blue-500\/30 transition-all group\">\r\n <h3 class=\"text-blue-400 font-bold text-xl mb-4 flex items-center gap-2\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"group-hover:rotate-12 transition-transform\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><\/svg>\r\n \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0645\u0627\u0626\u0639 (Fluid)\r\n <\/h3>\r\n <p class=\"text-slate-300 text-l leading-loose\">\r\n \u0627\u0644\u0645\u0627\u0626\u0639 \u0647\u0648 \u0623\u064a \u0645\u0627\u062f\u0629 \u0644\u0647\u0627 \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0648\u062a\u0623\u062e\u0630 \u0634\u0643\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u062d\u062a\u0648\u064a\u0647. \u064a\u0634\u0645\u0644 \u0627\u0644\u0645\u0627\u0626\u0639:\r\n <\/p>\r\n <ul class=\"mt-4 space-y-2\">\r\n <li class=\"flex items-center gap-2 text-slate-400 text-l\"><span class=\"w-1.5 h-1.5 bg-blue-500 rounded-full\"><\/span> \u0627\u0644\u0633\u0648\u0627\u0626\u0644 (\u0645\u062b\u0644 \u0627\u0644\u0645\u0627\u0621 \u0648\u0627\u0644\u0632\u064a\u062a)<\/li>\r\n <li class=\"flex items-center gap-2 text-slate-400 text-l\"><span class=\"w-1.5 h-1.5 bg-blue-500 rounded-full\"><\/span> \u0627\u0644\u063a\u0627\u0632\u0627\u062a (\u0645\u062b\u0644 \u0627\u0644\u0647\u0648\u0627\u0621)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-blue-900\/10 p-6 rounded-2xl border border-blue-500\/20\">\r\n <h3 class=\"text-blue-300 font-bold text-lg mb-3\">\u0644\u0645\u0627\u0630\u0627 \u062a\u0635\u0646\u0641 \u0643\u0645\u0648\u0627\u0626\u0639\u061f<\/h3>\r\n <p class=\"text-slate-400 text-l leading-relaxed\">\u0644\u0623\u0646 \u062c\u0633\u064a\u0645\u0627\u062a\u0647\u0627 \u063a\u064a\u0631 \u0645\u062a\u0631\u0627\u0628\u0637\u0629 \u0628\u0634\u0643\u0644 \u062b\u0627\u0628\u062a\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0644\u0647\u0627 \u0628\u0627\u0644\u062a\u062d\u0631\u0643 \u0648\u0627\u0644\u0627\u0646\u0633\u0644\u0627\u0644 \u0628\u0633\u0647\u0648\u0644\u0629. \u062f\u0631\u0627\u0633\u062a\u0646\u0627 \u0647\u0646\u0627 \u062a\u0642\u062a\u0635\u0631 \u0639\u0644\u0649 <span class=\"text-white font-bold\">\u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/span> (\u063a\u064a\u0631 \u0627\u0644\u062c\u0627\u0631\u064a).<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\u062b\u0627\u0646\u064a\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner\">\r\n <div class=\"flex flex-col md:flex-row gap-8 items-center\">\r\n <div class=\"flex-1 space-y-4\">\r\n <p class=\"text-slate-300\">\u0627\u0644\u0636\u063a\u0637 (P) \u0647\u0648 \u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u0624\u062b\u0631 \u0641\u064a \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629.<\/p>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-emerald-500\/20 text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = F \/ A<\/div><\/div>\r\n <div class=\"grid grid-cols-2 gap-4 text-l\"><div class=\"bg-slate-900\/60 p-3 rounded-lg border border-white\/5\"><span class=\"text-emerald-400 font-bold\">F:<\/span> \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 (N)<\/div><div class=\"bg-slate-900\/60 p-3 rounded-lg border border-white\/5\"><span class=\"text-emerald-400 font-bold\">A:<\/span> \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (m\u00b2)<\/div><\/div>\r\n <\/div>\r\n <div class=\"flex-1 bg-emerald-500\/5 p-6 rounded-2xl border border-emerald-500\/20\"><h4 class=\"text-emerald-400 font-bold mb-3 italic text-l\">\u0648\u062d\u062f\u0629 \u0627\u0644\u0642\u064a\u0627\u0633:<\/h4><p class=\"text-slate-300 text-l\">\u0648\u062d\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u062f\u0648\u0644\u064a \u0647\u064a <span class=\"text-white font-bold\">\u0627\u0644\u0628\u0627\u0633\u0643\u0627\u0644 (Pa)<\/span>.<\/p><div class=\"mt-2\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">1 Pa = 1 N\/m\u00b2<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"pressureForceAreaSim\" class=\"sim-card\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-blue-500 rounded-full\"><\/span>\u062b\u0627\u0644\u062b\u0627\u064b: \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 \u0639\u0646\u062f \u0646\u0642\u0637\u0629 \u062f\u0627\u062e\u0644\u064a\u0629<\/h2>\r\n <div class=\"bg-blue-900\/5 p-8 rounded-3xl border border-blue-500\/20\">\r\n <p class=\"text-slate-300 mb-6\">\u0627\u0644\u0633\u0628\u0628 \u0641\u064a \u0648\u062c\u0648\u062f \u0636\u063a\u0637 \u0647\u0648 \u0648\u0632\u0646 \u0639\u0645\u0648\u062f \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0648\u0627\u0642\u0639 \u0641\u0648\u0642 \u062a\u0644\u0643 \u0627\u0644\u0646\u0642\u0637\u0629. \u064a\u064f\u0639\u0637\u0649 \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 \u0628\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/p>\r\n <div class=\"bg-black\/40 p-8 rounded-2xl border border-blue-500\/30 text-center mb-8\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P_fluid = \u03c1 \u00d7 h \u00d7 g<\/div><\/div>\r\n <div class=\"grid grid-cols-1 l:grid-cols-3 gap-4\"><div class=\"bg-slate-800\/60 p-4 rounded-xl text-center\"><div class=\"text-blue-400 font-black text-xl mb-1\">\u03c1<\/div><div class=\"text-[10px] text-slate-500\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 (kg\/m\u00b3)<\/div><\/div><div class=\"bg-slate-800\/60 p-4 rounded-xl text-center\"><div class=\"text-blue-400 font-black text-xl mb-1\">h<\/div><div class=\"text-[10px] text-slate-500\">\u0627\u0644\u0639\u0645\u0642 \u062a\u062d\u062a \u0627\u0644\u0633\u0637\u062d (m)<\/div><\/div><div class=\"bg-slate-800\/60 p-4 rounded-xl text-center\"><div class=\"text-blue-400 font-black text-xl mb-1\">g<\/div><div class=\"text-[10px] text-slate-500\">\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 (m\/s\u00b2)<\/div><\/div><\/div>\r\n <div class=\"mt-8 p-6 bg-amber-500\/5 rounded-2xl border border-amber-500\/20\"><h4 class=\"text-amber-400 font-bold mb-2 text-l\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a (\u0627\u0644\u0645\u0637\u0644\u0642):<\/h4><p class=\"text-slate-400 text-l mb-4\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0633\u0637\u062d \u0645\u0644\u0627\u0645\u0633\u0627\u064b \u0644\u0644\u0647\u0648\u0627\u0621\u060c \u0646\u0636\u064a\u0641 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (P\u2080):<\/p><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = P\u2080 + \u03c1 \u00d7 h \u00d7 g<\/div><\/div>\r\n <\/div>\r\n \r\n <div id=\"staticFluidsSim\" class=\"sim-card\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-amber-500 rounded-full\"><\/span>\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 text-center space-y-3\"><div class=\"w-12 h-12 bg-blue-500\/20 rounded-full flex items-center justify-center mx-auto text-blue-400 font-bold\">1<\/div><h4 class=\"text-white font-bold\">\u0627\u0644\u0639\u0645\u0642 (h)<\/h4><p class=\"text-l text-slate-400\">\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629: \u0643\u0644\u0645\u0627 \u0632\u0627\u062f \u0627\u0644\u0639\u0645\u0642\u060c \u0632\u0627\u062f \u0627\u0644\u0636\u063a\u0637.<\/p><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 text-center space-y-3\"><div class=\"w-12 h-12 bg-emerald-500\/20 rounded-full flex items-center justify-center mx-auto text-emerald-400 font-bold\">2<\/div><h4 class=\"text-white font-bold\">\u0627\u0644\u0643\u062b\u0627\u0641\u0629 (\u03c1)<\/h4><p class=\"text-l text-slate-400\">\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629: \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0621 \u0627\u0644\u0645\u0627\u0644\u062d \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u0639\u0630\u0628.<\/p><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-slate-700 text-center space-y-3\"><div class=\"w-12 h-12 bg-rose-500\/20 rounded-full flex items-center justify-center mx-auto text-rose-400 font-bold\">3<\/div><h4 class=\"text-white font-bold\">\u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 (g)<\/h4><p class=\"text-l text-slate-400\">\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629 (\u062b\u0627\u0628\u062a\u0629 \u062a\u0642\u0631\u064a\u0628\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636).<\/p><\/div>\r\n <\/div>\r\n <div class=\"bg-rose-500\/5 p-6 rounded-2xl border border-rose-500\/20\"><p class=\"text-rose-300 text-l font-bold italic\"> \u0645\u0644\u0627\u062d\u0638\u0629 \u0647\u0627\u0645\u0629: \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0634\u0643\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0623\u0648 \u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d\u0647.<\/p><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-indigo-500 rounded-full\"><\/span>\u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u0648\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644<\/h2>\r\n <div class=\"bg-indigo-900\/10 p-8 rounded-3xl border border-indigo-500\/30\">\r\n <div class=\"flex flex-col md:flex-row gap-8 items-start\">\r\n <div class=\"flex-1 space-y-4\"><h3 class=\"text-indigo-400 font-bold text-xl\">\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644:<\/h3><blockquote class=\"border-r-4 border-indigo-500 pr-4 py-2 text-slate-300 italic\">\"\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0645\u0637\u0628\u0642 \u0639\u0644\u0649 \u0645\u0627\u0626\u0639 \u0645\u062d\u0635\u0648\u0631 \u0641\u064a \u0648\u0639\u0627\u0621 \u0645\u063a\u0644\u0642 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a \u0625\u0644\u0649 \u062c\u0645\u064a\u0639 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0645\u0627\u0626\u0639 \u0648\u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.\"<\/blockquote><p class=\"text-l text-slate-400 leading-relaxed\">\u0647\u0630\u0627 \u0627\u0644\u0645\u0628\u062f\u0623 \u0647\u0648 \u0623\u0633\u0627\u0633 \u0639\u0645\u0644 <span class=\"text-white font-bold\">\u0627\u0644\u0631\u0627\u0641\u0639\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629<\/span> \u0648\u0646\u0638\u0627\u0645 <span class=\"text-white font-bold\">\u0627\u0644\u0643\u0648\u0627\u0628\u062d (\u0627\u0644\u0641\u0631\u0627\u0645\u0644)<\/span> \u0641\u064a \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a.<\/p><\/div>\r\n <div class=\"flex-1 bg-black\/40 p-6 rounded-2xl border border-white\/5 space-y-4\"><h4 class=\"text-indigo-300 font-bold text-l\">\u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0627\u0644\u0641\u0631\u0627\u0645\u0644\u061f<\/h4><ol class=\"text-l text-slate-400 space-y-3 list-decimal list-inside\"><li>\u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u062f\u0648\u0627\u0633\u0629 \u064a\u062f\u0641\u0639 \u0645\u0643\u0628\u0633 \u0627\u0644\u0623\u0633\u0637\u0648\u0627\u0646\u0629.<\/li><li>\u064a\u0646\u062a\u0642\u0644 \u0627\u0644\u0636\u063a\u0637 \u0639\u0628\u0631 \u0627\u0644\u0633\u0627\u0626\u0644 (\u0644\u0623\u0646\u0647 \u063a\u064a\u0631 \u0642\u0627\u0628\u0644 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637).<\/li><li>\u064a\u062f\u0641\u0639 \u0627\u0644\u0633\u0627\u0626\u0644 \u0645\u0643\u0627\u0628\u0633 \u0627\u0644\u0639\u062c\u0644\u0627\u062a \u0644\u062a\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u0642\u0631\u0627\u0635.<\/li><li>\u064a\u0646\u0634\u0623 \u0627\u062d\u062a\u0643\u0627\u0643 \u064a\u0648\u0642\u0641 \u062d\u0631\u0643\u0629 \u0627\u0644\u0633\u064a\u0627\u0631\u0629.<\/li><\/ol><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"hydraulicSim\" class=\"sim-card\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-slate-500 rounded-full\"><\/span>\u0623\u0645\u062b\u0644\u0629 \u0645\u062d\u0644\u0648\u0644\u0629<\/h2>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/60 p-6 rounded-2xl border border-slate-700\"><p class=\"text-amber-400 font-bold text-l mb-4\">\u0645\u062b\u0627\u0644 1: \u0627\u062d\u0633\u0628 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0639\u0644\u0649 \u063a\u0648\u0627\u0635 \u0641\u064a \u0628\u062d\u064a\u0631\u0629 \u0639\u0644\u0649 \u0639\u0645\u0642 20m.<\/p><div class=\"space-y-2 text-l text-slate-300 bg-black\/20 p-4 rounded-xl\"><p>P = P\u2080 + \u03c1hg<\/p><p>P = 10\u2075 + (1000 \u00d7 20 \u00d7 10)<\/p><p>P = 10\u2075 + 2 \u00d7 10\u2075 = <span class=\"text-emerald-400 font-bold\">3 \u00d7 10\u2075 Pa<\/span><\/p><\/div><\/div>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-2xl border border-slate-700\"><p class=\"text-amber-400 font-bold text-l mb-4\">\u0645\u062b\u0627\u0644 2: \u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644<\/p><div class=\"space-y-2 text-l text-slate-300 bg-black\/20 p-4 rounded-xl\"><p class=\"text-l text-slate-400 mb-2\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 (\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644):<\/p><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">F\u2081 \/ A\u2081 = F\u2082 \/ A\u2082<\/div><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">100 \/ 10 = 500 \/ 50<\/div><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633: \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-blue-500\/20 text-center\"><div class=\"text-blue-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0627\u0644\u0645\u0648\u0627\u0626\u0639<\/h4><p class=\"text-[10px] text-slate-400\">\u0645\u0648\u0627\u062f \u0644\u0647\u0627 \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062c\u0631\u064a\u0627\u0646 \u0648\u062a\u063a\u064a\u064a\u0631 \u0634\u0643\u0644\u0647\u0627 (\u0627\u0644\u0633\u0648\u0627\u0626\u0644 \u0648\u0627\u0644\u063a\u0627\u0632\u0627\u062a).<\/p><\/div>\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-emerald-500\/20 text-center\"><div class=\"text-emerald-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0645<\/h4><p class=\"text-[10px] text-slate-400\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u0627\u064b \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629: <div class=\"text-center font-mono text-l my-2\" dir=\"ltr\">P = F \/ A<\/div><\/p><\/div>\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-amber-500\/20 text-center\"><div class=\"text-amber-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639<\/h4><p class=\"text-[10px] text-slate-400\">\u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u0642 \u0648\u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0648\u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629: <div class=\"text-center font-mono text-l my-2\" dir=\"ltr\">P = \u03c1 \u00d7 h \u00d7 g<\/div><\/p><\/div>\r\n <div class=\"bg-slate-800\/60 p-5 rounded-2xl border border-indigo-500\/20 text-center\"><div class=\"text-indigo-400 text-2xl mb-2\"><\/div><h4 class=\"text-white font-bold text-l mb-2\">\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644<\/h4><p class=\"text-[10px] text-slate-400\">\u0627\u0644\u0636\u063a\u0637 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a \u0641\u064a \u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u062d\u0635\u0648\u0631 (\u0627\u0644\u0631\u0627\u0641\u0639\u0627\u062a \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629).<\/p><\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-6 rounded-2xl border border-white\/5\"><h4 class=\"text-white font-bold mb-4 text-l\">\u062d\u0642\u0627\u0626\u0642 \u0633\u0631\u064a\u0639\u0629:<\/h4><ul class=\"grid grid-cols-1 md:grid-cols-2 gap-3\"><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0648\u062d\u062f\u0629 \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0647\u064a \u0627\u0644\u0628\u0627\u0633\u0643\u0627\u0644 (Pa).<\/li><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0627\u0644\u0636\u063a\u0637 \u0645\u062a\u0633\u0627\u0648\u064d \u0639\u0646\u062f \u062c\u0645\u064a\u0639 \u0627\u0644\u0646\u0642\u0627\u0637 \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u0645\u0642 \u0641\u064a \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0645\u062a\u062c\u0627\u0646\u0633.<\/li><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0623\u0648 \u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d\u0647.<\/li><li class=\"flex items-start gap-2 text-l text-slate-300\"><span class=\"text-emerald-500 mt-1\">\u2714<\/span> \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0642\u0648\u0629 \u0644\u0643\u0646\u0647\u0627 \u0644\u0627 \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0634\u063a\u0644.<\/li><\/ul><\/div>\r\n <\/section>\r\n\r\n <section class=\"bg-gradient-to-r from-blue-600\/20 to-indigo-600\/20 p-8 rounded-3xl border border-blue-500\/30 text-center\"><h3 class=\"text-2xl font-black text-white mb-4\">\u062a\u0630\u0643\u0631 \u062f\u0627\u0626\u0645\u0627\u064b<\/h3><p class=\"text-slate-300 max-w-2xl mx-auto leading-relaxed\">\u0627\u0644\u0636\u063a\u0637 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 \u064a\u0639\u062a\u0645\u062f \u0641\u0642\u0637 \u0639\u0644\u0649 \u0646\u0648\u0639 \u0627\u0644\u0633\u0627\u0626\u0644 (\u0643\u062b\u0627\u0641\u062a\u0647) \u0648\u0645\u062f\u0649 \u0639\u0645\u0642\u0643 \u0641\u064a\u0647. \u0644\u0627 \u064a\u0647\u0645 \u0625\u0630\u0627 \u0643\u0646\u062a \u0641\u064a \u0645\u0633\u0628\u062d \u0635\u063a\u064a\u0631 \u0623\u0648 \u0641\u064a \u0627\u0644\u0645\u062d\u064a\u0637 \u0627\u0644\u0634\u0627\u0633\u0639\u060c \u0637\u0627\u0644\u0645\u0627 \u0623\u0646\u0643 \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u0645\u0642\u060c \u0641\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0646\u0641\u0633\u0647!<\/p><\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ======================== \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0636\u063a\u0637 = \u0627\u0644\u0642\u0648\u0629 \/ \u0627\u0644\u0645\u0633\u0627\u062d\u0629 ========================\r\n (function() {\r\n const container = document.getElementById('pressureForceAreaSim');\r\n if (!container) return;\r\n let force = 100, area = 2;\r\n const render = () => {\r\n const pressure = force \/ area;\r\n container.innerHTML = `\r\n <div class=\"bg-slate-900\/80 p-6 rounded-3xl border border-white\/10 shadow-2xl space-y-8\" dir=\"rtl\">\r\n <div class=\"text-center\"><h3 class=\"text-2xl font-black text-emerald-400 mb-2\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0648\u0627\u0644\u0636\u063a\u0637<\/h3><p class=\"text-slate-400 text-l\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0643\u064a\u0641 \u064a\u062a\u0623\u062b\u0631 \u0627\u0644\u0636\u063a\u0637 \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u0648\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0637\u062d<\/p><\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"space-y-6 bg-black\/20 p-6 rounded-2xl border border-white\/5\">\r\n <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 (F)<\/span><span class=\"text-blue-400 font-bold\">${force} \u0646\u064a\u0648\u062a\u0646<\/span><\/div><input type=\"range\" id=\"forceRangePFA\" min=\"10\" max=\"500\" step=\"10\" value=\"${force}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"><\/label>\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0645\u0633\u0627\u062d\u0629 (A)<\/span><span class=\"text-emerald-400 font-bold\">${area} \u0645\u00b2<\/span><\/div><input type=\"range\" id=\"areaRangePFA\" min=\"0.5\" max=\"10\" step=\"0.5\" value=\"${area}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\"><\/label>\r\n <div class=\"bg-emerald-900\/20 p-4 rounded-xl border border-emerald-500\/20 text-center\"><p class=\"text-l text-emerald-300 mb-1\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0627\u062a\u062c (P):<\/p><p class=\"text-3xl font-black text-white\">${pressure.toFixed(1)} <span class=\"text-l font-normal text-slate-400\">Pa<\/span><\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-black\/40 rounded-2xl border border-white\/5 relative flex flex-col items-center justify-center min-h-[300px] p-8\">\r\n <div class=\"relative flex flex-col items-center\"><div class=\"flex flex-col items-center transition-all duration-300\" style=\"transform: scale(${0.5 + force\/500})\"><div class=\"text-[10px] text-blue-400 font-bold mb-1\">\u0627\u0644\u0642\u0648\u0629 F<\/div><div class=\"w-2 h-16 bg-blue-500 relative\"><div class=\"absolute bottom-0 left-[-6px] border-l-[10px] border-r-[10px] border-t-[15px] border-l-transparent border-r-transparent border-t-blue-500\"><\/div><\/div><\/div><div class=\"bg-emerald-500\/20 border-2 border-emerald-500 transition-all duration-300 flex items-center justify-center mt-2 shadow-[0_0_20px_rgba(16,185,129,0.2)]\" style=\"width: ${area * 30}px; height: 20px; border-radius: 4px\"><span class=\"text-[10px] text-emerald-300 font-bold\">A<\/span><\/div><div class=\"flex flex-wrap justify-center gap-1 mt-4 max-w-[200px]\">${Array.from({ length: Math.min(50, Math.floor(pressure \/ 5)) }).map(() => `<div class=\"w-1 h-1 bg-rose-400 rounded-full animate-pulse\"><\/div>`).join('')}<\/div><\/div>\r\n <div class=\"mt-8 text-center\"><p class=\"text-l text-slate-400 italic\">${pressure > 100 ? '\u0636\u063a\u0637 \u0645\u0631\u062a\u0641\u0639: \u0642\u0648\u0629 \u0643\u0628\u064a\u0631\u0629 \u0639\u0644\u0649 \u0645\u0633\u0627\u062d\u0629 \u0635\u063a\u064a\u0631\u0629.' : pressure < 20 ? '\u0636\u063a\u0637 \u0645\u0646\u062e\u0641\u0636: \u0642\u0648\u0629 \u0635\u063a\u064a\u0631\u0629 \u0645\u0648\u0632\u0639\u0629 \u0639\u0644\u0649 \u0645\u0633\u0627\u062d\u0629 \u0643\u0628\u064a\u0631\u0629.' : '\u0636\u063a\u0637 \u0645\u062a\u0648\u0633\u0637.'}<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-slate-700 text-center\"><h4 class=\"text-emerald-400 font-bold text-l mb-4\">\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h4><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = F \/ A = ${force} \/ ${area} = ${pressure.toFixed(1)} Pa<\/div><\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('forceRangePFA')?.addEventListener('input', (e) => { force = parseFloat(e.target.value); render(); });\r\n document.getElementById('areaRangePFA')?.addEventListener('input', (e) => { area = parseFloat(e.target.value); render(); });\r\n };\r\n render();\r\n })();\r\n\r\n \/\/ ======================== \u0645\u062d\u0627\u0643\u0627\u0629 \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646 ========================\r\n (function() {\r\n const container = document.getElementById('staticFluidsSim');\r\n if (!container) return;\r\n let depth = 5, density = 1000, showAtm = true;\r\n const P0 = 101325;\r\n const g = 9.8;\r\n const render = () => {\r\n const fluidPressure = density * depth * g;\r\n const totalPressure = showAtm ? P0 + fluidPressure : fluidPressure;\r\n container.innerHTML = `\r\n <div class=\"bg-slate-900\/80 p-6 rounded-3xl border border-white\/10 shadow-2xl space-y-8\" dir=\"rtl\">\r\n <div class=\"text-center\"><h3 class=\"text-2xl font-black text-blue-400 mb-2\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 \u0627\u0644\u0633\u0627\u0643\u0646<\/h3><p class=\"text-slate-400 text-l\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0643\u064a\u0641 \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u0636\u063a\u0637 \u0645\u0639 \u0627\u0644\u0639\u0645\u0642 \u0648\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0626\u0639<\/p><\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"space-y-6 bg-black\/20 p-6 rounded-2xl border border-white\/5\">\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0639\u0645\u0642 (h)<\/span><span class=\"text-blue-400 font-bold\">${depth} \u0645\u062a\u0631<\/span><\/div><input type=\"range\" id=\"depthRange\" min=\"0\" max=\"50\" step=\"1\" value=\"${depth}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"><\/label>\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0645\u0627\u0626\u0639 (\u03c1)<\/span><span class=\"text-emerald-400 font-bold\">${density} kg\/m\u00b3<\/span><\/div><select id=\"densitySelect\" class=\"w-full bg-slate-800 text-white p-2 rounded-lg border border-slate-700 focus:ring-2 focus:ring-emerald-500 outline-none\"><option value=\"800\" ${density===800?'selected':''}>\u0632\u064a\u062a (800)<\/option><option value=\"1000\" ${density===1000?'selected':''}>\u0645\u0627\u0621 \u0639\u0630\u0628 (1000)<\/option><option value=\"1030\" ${density===1030?'selected':''}>\u0645\u0627\u0621 \u0628\u062d\u0631 (1030)<\/option><option value=\"13600\" ${density===13600?'selected':''}>\u0632\u0626\u0628\u0642 (13600)<\/option><\/select><\/label>\r\n <div class=\"flex items-center gap-3 p-3 bg-slate-800\/50 rounded-xl border border-white\/5\"><input type=\"checkbox\" id=\"atmCheck\" ${showAtm ? 'checked' : ''} class=\"w-4 h-4 accent-blue-500\"><label class=\"text-l text-slate-300 cursor-pointer\">\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (P\u2080)<\/label><\/div>\r\n <div class=\"bg-blue-900\/20 p-4 rounded-xl border border-blue-500\/20\"><p class=\"text-l text-blue-300 mb-1\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a (P):<\/p><p class=\"text-2xl font-black text-white\">${(totalPressure\/1000).toFixed(1)} <span class=\"text-l font-normal text-slate-400\">kPa<\/span><\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-black\/40 rounded-2xl border border-white\/5 relative flex items-center justify-center min-h-[400px] overflow-hidden\">\r\n <div class=\"relative w-64 h-80 border-x-4 border-b-4 border-slate-600 rounded-b-xl overflow-hidden bg-slate-900\/30\"><div class=\"absolute bottom-0 w-full bg-blue-500\/40 transition-all duration-500 border-t-2 border-blue-300\" style=\"height: 100%\"><\/div><div class=\"absolute left-1\/2 -translate-x-1\/2 flex flex-col items-center transition-all duration-500\" style=\"top: ${(depth\/50)*100}%\"><div class=\"w-4 h-4 bg-rose-500 rounded-full shadow-[0_0_10px_rgba(244,63,94,0.8)] animate-pulse\"><\/div><div class=\"mt-2 px-2 py-1 bg-slate-900\/90 rounded border border-white\/10 text-[10px] text-white whitespace-nowrap\">\u0627\u0644\u0639\u0645\u0642: ${depth}m<\/div><\/div>${[0,10,20,30,40,50].map(m => `<div class=\"absolute right-0 w-4 h-px bg-slate-500\/50\" style=\"top: ${(m\/50)*100}%\"><span class=\"absolute right-5 -top-2 text-[8px] text-slate-500\">${m}m<\/span><\/div>`).join('')}<\/div>\r\n <div class=\"absolute left-10 space-y-4\"><div class=\"flex items-center gap-2\"><div class=\"w-8 h-1 bg-blue-400\"><\/div><span class=\"text-[10px] text-slate-400\">\u0636\u063a\u0637 \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\"><h4 class=\"text-blue-400 font-bold text-l mb-3\">\u0636\u063a\u0637 \u0627\u0644\u0645\u0627\u0626\u0639 (P_fluid):<\/h4><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P_fluid = \u03c1 \u00d7 h \u00d7 g<\/div><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">${density} \u00d7 ${depth} \u00d7 ${g} = ${fluidPressure.toFixed(0)} Pa<\/div><\/div><div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\"><h4 class=\"text-emerald-400 font-bold text-l mb-3\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a (P):<\/h4><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">P = P\u2080 + \u03c1 \u00d7 h \u00d7 g<\/div><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">${showAtm ? '101325' : '0'} + ${fluidPressure.toFixed(0)} = ${totalPressure.toFixed(0)} Pa<\/div><\/div><\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('depthRange')?.addEventListener('input', (e) => { depth = parseInt(e.target.value); render(); });\r\n document.getElementById('densitySelect')?.addEventListener('change', (e) => { density = parseInt(e.target.value); render(); });\r\n document.getElementById('atmCheck')?.addEventListener('change', (e) => { showAtm = e.target.checked; render(); });\r\n };\r\n render();\r\n })();\r\n\r\n \/\/ ======================== \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0627\u0641\u0639\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 (\u0628\u062f\u0648\u0646 \u062a\u062d\u0643\u0645 \u064a\u062f\u0648\u064a) ========================\r\n (function() {\r\n const container = document.getElementById('hydraulicSim');\r\n if (!container) return;\r\n let force1 = 100, area1 = 10, area2 = 50;\r\n \/\/ \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\u0629 \u0644\u0644\u0645\u0643\u0628\u0633 \u0627\u0644\u0623\u0648\u0644 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0642\u0648\u0629 (\u0646\u0633\u0628\u0629 \u0645\u0646 80 \u0628\u0643\u0633\u0644 \u0643\u062d\u062f \u0623\u0642\u0635\u0649)\r\n const getDisplacement1 = (f) => (f \/ 500) * 80; \/\/ \u0623\u0642\u0635\u0649 \u0625\u0632\u0627\u062d\u0629 \u0639\u0646\u062f 500 \u0646\u064a\u0648\u062a\u0646\r\n \r\n const render = () => {\r\n const force2 = (force1 * area2) \/ area1;\r\n const d1 = getDisplacement1(force1);\r\n const d2 = d1 * (area1 \/ area2);\r\n const width1 = area1 * 2.5;\r\n const width2 = area2 * 2.5;\r\n container.innerHTML = `\r\n <div class=\"bg-slate-900\/80 p-6 rounded-3xl border border-white\/10 shadow-2xl space-y-8\" dir=\"rtl\">\r\n <div class=\"text-center\"><h3 class=\"text-2xl font-black text-indigo-400 mb-2\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0627\u0641\u0639\u0629 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u0644\u064a\u0643\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629<\/h3><p class=\"text-slate-400 text-l\">\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644: \u0627\u0644\u0636\u063a\u0637 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a \u0641\u064a \u0627\u0644\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u062d\u0635\u0648\u0631<\/p><p class=\"text-slate-500 text-l mt-1\">\u064a\u062a\u062d\u0631\u0643 \u0627\u0644\u0645\u0643\u0628\u0633 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u062a\u063a\u064a\u0631 \u0627\u0644\u0642\u0648\u0629 \u0623\u0648 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a<\/p><\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"space-y-6 bg-black\/20 p-6 rounded-2xl border border-white\/5\">\r\n <label class=\"block\"><div class=\"flex justify-between text-l mb-2\"><span class=\"text-slate-300\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u062f\u0627\u062e\u0644\u0629 (F\u2081)<\/span><span class=\"text-indigo-400 font-bold\">${force1} N<\/span><\/div><input type=\"range\" id=\"force1Slider\" min=\"10\" max=\"500\" step=\"10\" value=\"${force1}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-indigo-500\"><\/label>\r\n <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\u0643\u0628\u0633 \u0627\u0644\u0623\u0648\u0644 (A\u2081)<\/span><span class=\"text-blue-400 font-bold\">${area1} \u0648\u062d\u062f\u0629<\/span><\/div><input type=\"range\" id=\"area1Slider\" min=\"10\" max=\"30\" step=\"1\" value=\"${area1}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"><\/label>\r\n <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\u0643\u0628\u0633 \u0627\u0644\u062b\u0627\u0646\u064a (A\u2082)<\/span><span class=\"text-emerald-400 font-bold\">${area2} \u0648\u062d\u062f\u0629<\/span><\/div><input type=\"range\" id=\"area2Slider\" min=\"40\" max=\"120\" step=\"5\" value=\"${area2}\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\"><\/label>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/20 shadow-inner\"><p class=\"text-l text-indigo-300 mb-1\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0646\u0627\u062a\u062c\u0629 \u0627\u0644\u0645\u062a\u0648\u0644\u062f\u0629 (F\u2082):<\/p><p class=\"text-3xl font-black text-white\">${force2.toFixed(0)} <span class=\"text-l font-normal text-slate-400\">N<\/span><\/p><\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2 bg-black\/40 rounded-2xl border border-white\/5 relative flex items-center justify-center min-h-[450px] p-4 overflow-hidden\">\r\n <svg width=\"100%\" height=\"400\" viewBox=\"0 0 400 400\" preserveAspectRatio=\"xMidYMid meet\">\r\n <defs><linearGradient id=\"fluidGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\"><stop offset=\"0%\" stopColor=\"#3b82f6\" stopOpacity=\"0.8\"\/><stop offset=\"100%\" stopColor=\"#1d4ed8\" stopOpacity=\"0.9\"\/><\/linearGradient><marker id=\"arrow-indigo\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\"><polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#818cf8\"\/><\/marker><marker id=\"arrow-emerald-up\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\"><polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#10b981\"\/><\/marker><\/defs>\r\n <path d=\"M 60 250 L 340 250\" stroke=\"url(#fluidGradient)\" strokeWidth=\"40\" fill=\"none\"\/>\r\n <rect x=\"${80 - width1\/2}\" y=\"100\" width=\"${width1}\" height=\"170\" fill=\"url(#fluidGradient)\" opacity=\"0.4\"\/><rect x=\"${80 - width1\/2}\" y=\"100\" width=\"${width1}\" height=\"170\" fill=\"none\" stroke=\"#64748b\" strokeWidth=\"3\"\/>\r\n <g transform=\"translate(0, ${d1})\"><rect x=\"${80 - width1\/2}\" y=\"95\" width=\"${width1}\" height=\"15\" fill=\"#94a3b8\" stroke=\"#475569\"\/><rect x=\"77\" y=\"20\" width=\"6\" height=\"80\" fill=\"#94a3b8\"\/><path d=\"M 80 -20 L 80 10\" stroke=\"#818cf8\" strokeWidth=\"4\" markerEnd=\"url(#arrow-indigo)\"\/><text x=\"80\" y=\"-35\" fill=\"#818cf8\" fontSize=\"16\" textAnchor=\"middle\" fontWeight=\"black\">F\u2081<\/text><\/g>\r\n <rect x=\"${300 - width2\/2}\" y=\"100\" width=\"${width2}\" height=\"170\" fill=\"url(#fluidGradient)\" opacity=\"0.4\"\/><rect x=\"${300 - width2\/2}\" y=\"100\" width=\"${width2}\" height=\"170\" fill=\"none\" stroke=\"#64748b\" strokeWidth=\"3\"\/>\r\n <g transform=\"translate(0, ${-d2})\"><rect x=\"${300 - width2\/2}\" y=\"240\" width=\"${width2}\" height=\"15\" fill=\"#94a3b8\" stroke=\"#475569\"\/><rect x=\"297\" y=\"250\" width=\"6\" height=\"40\" fill=\"#94a3b8\"\/><g transform=\"translate(260, 180)\"><path d=\"M10 40 L10 30 Q10 20 20 20 L60 20 Q70 20 70 30 L70 40 Z\" fill=\"#ef4444\"\/><rect x=\"5\" y=\"40\" width=\"70\" height=\"15\" rx=\"5\" fill=\"#ef4444\"\/><circle cx=\"20\" cy=\"55\" r=\"7\" fill=\"#1e293b\"\/><circle cx=\"60\" cy=\"55\" r=\"7\" fill=\"#1e293b\"\/><text x=\"40\" y=\"35\" fill=\"white\" fontSize=\"8\" textAnchor=\"middle\" fontWeight=\"bold\">\u0627\u0644\u062d\u0645\u0648\u0644\u0629<\/text><\/g><path d=\"M 300 380 L 300 350\" stroke=\"#10b981\" strokeWidth=\"4\" markerEnd=\"url(#arrow-emerald-up)\"\/><text x=\"300\" y=\"400\" fill=\"#10b981\" fontSize=\"16\" textAnchor=\"middle\" fontWeight=\"black\">F\u2082<\/text><\/g>\r\n <text x=\"200\" y=\"290\" fill=\"#3b82f6\" fontSize=\"14\" textAnchor=\"middle\" fontWeight=\"black\" class=\"animate-pulse\">\u0627\u0644\u0636\u063a\u0637 P \u0645\u062a\u0633\u0627\u0648\u064d \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0646\u0642\u0627\u0637<\/text>\r\n <\/svg>\r\n <div class=\"absolute top-4 right-4 bg-slate-900\/90 p-3 rounded-xl border border-white\/10 text-[10px] max-w-[180px] space-y-1 shadow-2xl\"><p class=\"text-indigo-400 font-bold underline\">\u0645\u0628\u062f\u0623 \u0627\u0644\u0639\u0645\u0644:<\/p><p class=\"text-slate-300 leading-relaxed\">\u0628\u0633\u0628\u0628 \u0639\u062f\u0645 \u0627\u0646\u0636\u063a\u0627\u0637 \u0627\u0644\u0633\u0627\u0626\u0644\u060c \u0641\u0625\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646 \u0627\u0644\u0645\u0643\u0628\u0633 \u0627\u0644\u0635\u063a\u064a\u0631 \u064a\u0646\u062a\u0642\u0644 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 \u0644\u0644\u0645\u0643\u0628\u0633 \u0627\u0644\u0643\u0628\u064a\u0631\u060c \u0645\u0645\u0627 \u064a\u0648\u0644\u062f \u0642\u0648\u0629 \u0647\u0627\u0626\u0644\u0629 \u0642\u0627\u062f\u0631\u0629 \u0639\u0644\u0649 \u0631\u0641\u0639 \u0627\u0644\u0623\u0648\u0632\u0627\u0646 \u0627\u0644\u062b\u0642\u064a\u0644\u0629.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-slate-700 text-center shadow-inner\"><h4 class=\"text-indigo-400 font-bold text-l mb-4\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 (\u0645\u0628\u062f\u0623 \u0628\u0627\u0633\u0643\u0627\u0644):<\/h4><div class=\"flex flex-col md:flex-row items-center justify-center gap-8\"><div class=\"p-4 bg-black\/20 rounded-xl border border-white\/5\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">F\u2081 \/ A\u2081 = F\u2082 \/ A\u2082<\/div><\/div><div class=\"hidden md:block text-slate-600 text-3xl\">\u2794<\/div><div class=\"p-4 bg-black\/20 rounded-xl border border-white\/5\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">${force1} \/ ${area1} = ${force2.toFixed(0)} \/ ${area2}<\/div><\/div><\/div><div class=\"mt-6 flex flex-wrap justify-center gap-4 text-l\"><div class=\"flex flex-col items-center bg-indigo-500\/10 p-3 rounded-xl border border-indigo-500\/20 min-w-[120px]\"><span class=\"text-slate-400 mb-1\">\u0627\u0644\u0641\u0627\u0626\u062f\u0629 \u0627\u0644\u0622\u0644\u064a\u0629<\/span><span class=\"text-indigo-300 font-bold text-lg\">${(area2\/area1).toFixed(1)}\u00d7<\/span><\/div><div class=\"flex flex-col items-center bg-emerald-500\/10 p-3 rounded-xl border border-emerald-500\/20 min-w-[120px]\"><span class=\"text-slate-400 mb-1\">\u0646\u0633\u0628\u0629 \u0627\u0644\u062d\u0631\u0643\u0629<\/span><span class=\"text-emerald-300 font-bold text-lg\">${(area1\/area2).toFixed(2)}<\/span><\/div><div class=\"flex flex-col items-center bg-blue-500\/10 p-3 rounded-xl border border-blue-500\/20 min-w-[120px]\"><span class=\"text-slate-400 mb-1\">\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u064a<\/span><span class=\"text-blue-300 font-bold text-lg\">${(force1\/area1).toFixed(1)} Pa\/u<\/span><\/div><\/div><\/div>\r\n <\/div>\r\n `;\r\n document.getElementById('force1Slider')?.addEventListener('input', (e) => { force1 = parseInt(e.target.value); render(); });\r\n document.getElementById('area1Slider')?.addEventListener('input', (e) => { area1 = parseInt(e.target.value); render(); });\r\n document.getElementById('area2Slider')?.addEventListener('input', (e) => { area2 = parseInt(e.target.value); render(); });\r\n };\r\n render();\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-18359","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18359","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=18359"}],"version-history":[{"count":2,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18359\/revisions"}],"predecessor-version":[{"id":18361,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18359\/revisions\/18361"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}