\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\">\r\n <\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\">\r\n <\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\">\r\n <\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\">\r\n <\/script>\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: 1rem;\r\n }\r\n .content-container {\r\n max-width: 100%;\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: 1.5rem;\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 @media (min-width: 1280px) {\r\n .content-container {\r\n max-width: 96rem;\r\n padding: 2rem;\r\n }\r\n }\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #1e1b4b;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #4f46e5;\r\n border-radius: 4px;\r\n }\r\n .simulation-container {\r\n margin: 1.5rem 0;\r\n padding: 1rem;\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .direction-ltr {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631 - \u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0644\u062b__\u0627\u0644\u0632\u062e\u0645_\u0627\u0644\u0632\u0627\u0648\u064a_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\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0644\u062b__\u0627\u0644\u0632\u062e\u0645_\u0627\u0644\u0632\u0627\u0648\u064a_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 <div class=\"space-y-6 text-right\">\r\n <div dir=\"rtl\" class=\"font-sans text-slate-100 space-y-10 leading-relaxed w-full\">\r\n\r\n \r\n <header class=\"bg-gradient-to-br from-indigo-900 to-slate-900 border border-indigo-700\/50 rounded-3xl p-8 shadow-2xl relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-full h-full opacity-10\" style=\"background-image: radial-gradient(circle at center, #818cf8 1px, transparent 1px); background-size: 20px 20px;\"><\/div>\r\n <div class=\"relative z-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-cyan-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h2>\r\n <p class=\"text-lg text-indigo-200\/80 font-light\">Angular Momentum<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border-r-4 border-indigo-500 shadow-lg\">\r\n <p class=\"text-slate-300 leading-relaxed\">\r\n <strong class=\"text-indigo-400\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629:<\/strong>\r\n \u0644\u0644\u0632\u062e\u0645 \u0627\u0644\u062e\u0637\u064a \u0646\u0638\u064a\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629 \u064a\u064f\u0633\u0645\u0649 <strong class=\"text-indigo-300\">\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/strong>. \u0648\u0647\u0648 \u0643\u0645\u064a\u0629 \u0645\u062d\u0641\u0648\u0638\u0629 \u0641\u064a \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0639\u0632\u0648\u0644\u0629\u060c \u0648\u0644\u0647\u0630\u0627 \u0627\u0644\u062d\u0641\u0638 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062b\u064a\u0631\u0629 \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-cyan-400 rounded-full\"><\/span>\r\n \u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"space-y-4\">\r\n <p class=\"text-l md:text-base text-slate-300 leading-relaxed\">\r\n \u0644\u064a\u0633\u062a \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644\u064a\u0629 \u0648\u062d\u062f\u0647\u0627 \u0647\u064a \u0627\u0644\u062a\u064a \u062a\u0645\u062a\u0644\u0643 \u0637\u0627\u0642\u0629\u060c \u0628\u0644 \u0625\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u062a\u064a \u062a\u062f\u0648\u0631 \u062d\u0648\u0644 \u0645\u062d\u0648\u0631 \u062b\u0627\u0628\u062a \u062a\u0645\u062a\u0644\u0643 <strong class=\"text-cyan-300\">\u0637\u0627\u0642\u0629 \u062d\u0631\u0643\u064a\u0629 \u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/strong>.\r\n <\/p>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-2xl border border-cyan-500\/20\">\r\n <h4 class=\"text-cyan-300 font-bold mb-2 text-l italic\">\u0645\u0628\u062f\u0623 \u0627\u0644\u062a\u0646\u0627\u0638\u0631:<\/h4>\r\n <div class=\"grid grid-cols-2 gap-4 text-center\">\r\n <div class=\"bg-black\/30 p-2 rounded-xl border border-white\/5\"><span class=\"text-[10px] text-slate-500 block mb-1\">\u062d\u0631\u0643\u0629 \u062e\u0637\u064a\u0629<\/span><span class=\"font-mono text-l text-slate-300\" dir=\"ltr\">KE = \u00bd m v\u00b2<\/span><\/div>\r\n <div class=\"bg-cyan-500\/10 p-2 rounded-xl border border-cyan-500\/20\"><span class=\"text-[10px] text-cyan-500 block mb-1\">\u062d\u0631\u0643\u0629 \u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/span><span class=\"font-mono text-l text-cyan-300\" dir=\"ltr\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-cyan-900\/10 p-5 rounded-2xl border border-cyan-500\/20 flex flex-col justify-center\">\r\n <h4 class=\"text-cyan-400 font-bold mb-3 text-l\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629:<\/h4>\r\n <div dir=\"ltr\" class=\"bg-black\/40 p-6 rounded-2xl font-mono text-3xl font-bold text-cyan-300 shadow-inner border border-cyan-500\/20 text-center mb-2\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2<\/div>\r\n <div class=\"flex justify-between px-2 text-[10px] text-slate-400 font-sans\"><span>\u0634\u063a\u0644 \/ \u0637\u0627\u0642\u0629 (J)<\/span><span>\u0642\u0635\u0648\u0631 \u0630\u0627\u062a\u064a (kg.m\u00b2)<\/span><span>\u0633\u0631\u0639\u0629 \u0632\u0627\u0648\u064a\u0629 (rad\/s)<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"rotational-ke-sim-root\" class=\"simulation-container\"><\/div>\r\n\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5 space-y-2\">\r\n <h4 class=\"text-slate-300 font-bold text-l\">\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0647\u0627\u0645\u0629:<\/h4>\r\n <ul class=\"list-disc list-inside text-l text-slate-400 space-y-1 pr-4\">\r\n <li>\u062a\u0639\u062a\u0645\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629 <strong class=\"text-cyan-300 italic\">\u0637\u0631\u062f\u064a\u064b\u0627<\/strong> \u0639\u0644\u0649 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a.<\/li>\r\n <li>\u062a\u0639\u062a\u0645\u062f <strong class=\"text-cyan-300 italic\">\u0637\u0631\u062f\u064a\u064b\u0627<\/strong> \u0639\u0644\u0649 <strong class=\"text-indigo-300 font-bold\">\u0645\u0631\u0628\u0639<\/strong> \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629.<\/li>\r\n <li>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u062c\u0633\u0645 \u064a\u062a\u062f\u062d\u0631\u062c \u0641\u0625\u0646\u0647 \u064a\u0645\u062a\u0644\u0643 \u0637\u0627\u0642\u0629 \u062d\u0631\u0643\u064a\u0629 <strong class=\"text-emerald-400 font-bold\">\u062e\u0637\u064a\u0629 \u0648\u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/strong> \u0645\u0639\u0627\u064b.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-cyan-500\/20 shadow-lg\">\r\n <h4 class=\"text-base font-bold text-cyan-300 mb-3 flex items-center gap-2 border-b border-cyan-500\/20 pb-3\"><span class=\"w-6 h-6 rounded-full bg-cyan-500\/20 flex items-center justify-center text-l\">9<\/span> \u0645\u062b\u0627\u0644 9 (\u0635 69)<\/h4>\r\n <p class=\"text-l text-slate-200 leading-relaxed mb-3\">\u0642\u0631\u0635 \u0643\u062a\u0644\u062a\u0647 2.0 kg \u0648\u0646\u0635\u0641 \u0642\u0637\u0631\u0647 0.50 m \u064a\u062f\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 8.0 rad\/s.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-cyan-500\/10\">\r\n <div dir=\"ltr\" class=\"font-mono text-cyan-200 bg-black\/40 p-2 rounded text-center text-l\">I = \u00bd m r\u00b2 = \u00bd \u00d7 2.0 \u00d7 (0.50)\u00b2 = 0.25 kg.m\u00b2<\/div>\r\n <div dir=\"ltr\" class=\"font-mono text-cyan-200 bg-black\/40 p-2 rounded text-center text-l mt-2\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2 = \u00bd \u00d7 0.25 \u00d7 64 = 8 J<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-indigo-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0646\u064a\u064b\u0627: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (Angular Momentum)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-6\">\r\n <p class=\"text-l md:text-base text-slate-300 leading-relaxed\">\r\n \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (L) \u0647\u0648 \u062d\u0627\u0635\u0644 \u0636\u0631\u0628 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a \u0641\u064a \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629. \u0647\u0648 \u0643\u0645\u064a\u0629 \u0645\u062a\u062c\u0647\u0629 \u062a\u062d\u062f\u062f \"\u0643\u0645\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\" \u0627\u0644\u062a\u064a \u064a\u0645\u062a\u0644\u0643\u0647\u0627 \u0627\u0644\u062c\u0633\u0645.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-indigo-500\/20 text-center\">\r\n <div dir=\"ltr\" class=\"font-mono text-3xl font-bold text-indigo-300 mb-2\">L = I \u03c9<\/div>\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u0648\u062d\u062f\u0629: kg.m\u00b2\/s<\/p>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/10 p-5 rounded-2xl border border-indigo-500\/20\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2 text-l\">\u0627\u0644\u0627\u062a\u062c\u0627\u0647 (\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u064a\u062f \u0627\u0644\u064a\u0645\u0646\u0649):<\/h4>\r\n <ul class=\"text-l text-slate-300 space-y-2\">\r\n <li><strong class=\"text-emerald-400\">\u0639\u0643\u0633 \u0627\u0644\u0639\u0642\u0627\u0631\u0628:<\/strong> \u0627\u0644\u0645\u062a\u062c\u0647 \u0646\u062d\u0648 \u0627\u0644\u062e\u0627\u0631\u062c (+z).<\/li>\r\n <li><strong class=\"text-rose-400\">\u0645\u0639 \u0627\u0644\u0639\u0642\u0627\u0631\u0628:<\/strong> \u0627\u0644\u0645\u062a\u062c\u0647 \u0646\u062d\u0648 \u0627\u0644\u062f\u0627\u062e\u0644 (-z).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-indigo-500\/20 shadow-lg\">\r\n <h4 class=\"text-base font-bold text-indigo-300 mb-3 flex items-center gap-2 border-b border-indigo-500\/20 pb-3\"><span class=\"w-6 h-6 rounded-full bg-indigo-500\/20 flex items-center justify-center text-l\">10<\/span> \u0645\u062b\u0627\u0644 10 (\u0635 70)<\/h4>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-indigo-500\/10 text-l text-slate-300\">\r\n <p class=\"mb-2\">\u062c\u0633\u064a\u0645 \u0643\u062a\u0644\u062a\u0647 50.0 g \u064a\u062f\u0648\u0631 \u0641\u064a \u0645\u0633\u0627\u0631 \u0646\u0635\u0641 \u0642\u0637\u0631\u0647 20.0 cm \u0628\u0633\u0631\u0639\u0629 \u0632\u0627\u0648\u064a\u0629 5.0 rad\/s.<\/p>\r\n <div dir=\"ltr\" class=\"font-mono text-slate-400 text-l bg-slate-900\/50 p-2 rounded\">I = m r\u00b2 = 0.050 \u00d7 (0.20)\u00b2 = 0.002 kg.m\u00b2<br\/>L = I \u03c9 = 0.002 \u00d7 5.0 = 0.01 kg.m\u00b2\/s<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-amber-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0644\u062b\u0627\u064b: \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u0627\u0644\u0639\u0632\u0645 \u0648\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-6\">\r\n <p class=\"text-l md:text-base text-slate-300 leading-relaxed\">\r\n \u062a\u0645\u0627\u0645\u0627 \u0643\u0645\u0627 \u0641\u064a \u0627\u0644\u0643\u0645\u064a\u0627\u062a \u0627\u0644\u062e\u0637\u064a\u0629\u060c \u0641\u0625\u0646 <strong class=\"text-amber-300\">\u0627\u0644\u0639\u0632\u0645 \u0627\u0644\u0645\u062d\u0635\u0644<\/strong> \u0627\u0644\u0645\u0624\u062b\u0631 \u0641\u064a \u062c\u0633\u0645 \u064a\u0633\u0627\u0648\u064a \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u062a\u063a\u064a\u0631 \u0632\u062e\u0645\u0647 \u0627\u0644\u0632\u0627\u0648\u064a.\r\n <\/p>\r\n <div class=\"flex flex-col md:flex-row gap-6 items-center justify-center\">\r\n <div dir=\"ltr\" class=\"bg-black\/40 p-6 rounded-2xl font-mono text-2xl font-bold text-rose-300 shadow-inner border border-rose-500\/20 text-center min-w-[200px]\">\u03a3\u03c4 = \u0394L \/ \u0394t<\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/5 max-w-l\"><p class=\"text-l text-slate-400 leading-relaxed italic\">\"\u0644\u0643\u064a \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u0644\u0644\u062c\u0633\u0645\u060c \u0644\u0627 \u0628\u062f \u0645\u0646 \u0648\u062c\u0648\u062f \u0639\u0632\u0645 \u062e\u0627\u0631\u062c\u064a \u064a\u0624\u062b\u0631 \u0639\u0644\u064a\u0647 \u062e\u0644\u0627\u0644 \u0641\u062a\u0631\u0629 \u0632\u0645\u0646\u064a\u0629.\"<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-emerald-400 rounded-full\"><\/span>\r\n \u0631\u0627\u0628\u0639\u0627\u064b: \u0642\u0627\u0646\u0648\u0646 \u062d\u0641\u0638 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-8\">\r\n <div class=\"bg-emerald-900\/10 p-6 rounded-2xl border border-emerald-500\/20\">\r\n <h4 class=\"text-emerald-300 font-bold mb-3\">\u0645\u0628\u062f\u0623 \u0627\u0644\u0635\u0648\u0646<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 <strong class=\"text-emerald-400\">\u0627\u0644\u0639\u0632\u0645 \u0627\u0644\u0645\u062d\u0635\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u064a<\/strong> \u0627\u0644\u0645\u0624\u062b\u0631 \u0641\u064a \u0646\u0638\u0627\u0645 \u0645\u0639\u0632\u0648\u0644 \u0645\u0633\u0627\u0648\u064a\u0627\u064b \u0644\u0644\u0635\u0641\u0631 (\u03a3\u03c4 = 0)\u060c \u0641\u0625\u0646 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u0644\u0644\u0646\u0638\u0627\u0645 \u064a\u0628\u0642\u0649 <strong class=\"text-emerald-400\">\u062b\u0627\u0628\u062a\u0627\u064b<\/strong>.<\/p>\r\n <\/div>\r\n <div dir=\"ltr\" class=\"font-mono text-center text-emerald-200 bg-black\/40 py-4 rounded-xl text-2xl border border-emerald-500\/20 w-full shadow-lg\">L<sub>i<\/sub> = L<sub>f<\/sub> \u2192 I<sub>i<\/sub> \u03c9<sub>i<\/sub> = I<sub>f<\/sub> \u03c9<sub>f<\/sub><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border-r-4 border-rose-500\"><h5 class=\"text-l font-bold text-rose-400 mb-1\">\u0625\u0630\u0627 \u0642\u0644 \u0627\u0644\u0642\u0635\u0648\u0631 (I) \u2193 :<\/h5><p class=\"text-l text-slate-200 font-bold\">\u062a\u0632\u062f\u0627\u062f \u0627\u0644\u0633\u0631\u0639\u0629 (\u03c9) \u2191<\/p><p class=\"text-[10px] text-slate-500 italic mt-1\">(\u0627\u0644\u0645\u062a\u0632\u0644\u062c \u064a\u0636\u0645 \u0630\u0631\u0627\u0639\u064a\u0647)<\/p><\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border-r-4 border-blue-500\"><h5 class=\"text-l font-bold text-blue-400 mb-1\">\u0625\u0630\u0627 \u0632\u0627\u062f \u0627\u0644\u0642\u0635\u0648\u0631 (I) \u2191 :<\/h5><p class=\"text-l text-slate-200 font-bold\">\u062a\u0642\u0644 \u0627\u0644\u0633\u0631\u0639\u0629 (\u03c9) \u2193<\/p><p class=\"text-[10px] text-slate-500 italic mt-1\">(\u0627\u0644\u063a\u0637\u0627\u0633 \u064a\u0645\u062f \u062c\u0633\u0645\u0647)<\/p><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"angular-momentum-sim-root\" class=\"simulation-container\"><\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-emerald-500\/20 shadow-lg\">\r\n <h4 class=\"text-base font-bold text-emerald-300 mb-3 flex items-center gap-2 border-b border-emerald-500\/20 pb-3\"><span class=\"w-6 h-6 rounded-full bg-emerald-500\/20 flex items-center justify-center text-l\">12<\/span> \u0645\u062b\u0627\u0644 12 (\u0635 74)<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u064a\u0646\u062a\u0642\u0644 \u0637\u0641\u0644 \u0645\u0646 \u062d\u0627\u0641\u0629 \u0642\u0631\u0635 \u062f\u0648\u0627\u0631 \u0625\u0644\u0649 \u0645\u0631\u0643\u0632\u0647\u060c \u064a\u0642\u0644 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (I) \u0641\u062a\u0632\u062f\u0627\u062f \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9) \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u062b\u0627\u0628\u062a\u0627\u064b.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5\"><h5 class=\"text-emerald-400 font-bold text-l\">\u0627\u0644\u0645\u062a\u0632\u0644\u062c \u0639\u0644\u0649 \u0627\u0644\u062c\u0644\u064a\u062f<\/h5><p class=\"text-l text-slate-400\">\u064a\u0636\u0645 \u0630\u0631\u0627\u0639\u064a\u0647 \u0641\u062a\u0642\u0631\u0651\u0628 \u0643\u062a\u0644\u062a\u0647 \u0645\u0646 \u0627\u0644\u0645\u062d\u0648\u0631 (\u064a\u0642\u0644 I) \u0641\u064a\u062f\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 \u0623\u0643\u0628\u0631.<\/p><\/div>\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5\"><h5 class=\"text-blue-400 font-bold text-l\">\u0627\u0644\u063a\u0637\u0627\u0633<\/h5><p class=\"text-l text-slate-400\">\u064a\u0636\u0645 \u0631\u0643\u0628\u062a\u064a\u0647 \u0644\u0635\u062f\u0631\u0647 \u0644\u064a\u0642\u0644\u0644 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0648\u064a\u062f\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 \u0628\u0647\u0644\u0648\u0627\u0646\u064a\u0629.<\/p><\/div>\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5\"><h5 class=\"text-pink-400 font-bold text-l\">\u0627\u0644\u0642\u0637\u0637<\/h5><p class=\"text-l text-slate-400\">\u062a\u062d\u0631\u0643 \u062c\u0633\u0645\u0647\u0627 \u0628\u0634\u0643\u0644 \u0645\u062a\u0639\u0627\u0643\u0633 \u0644\u062a\u0647\u0628\u0637 \u0639\u0644\u0649 \u0623\u0642\u062f\u0627\u0645\u0647\u0627 (\u0635\u064a\u0627\u0646\u0629 L=0).<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-emerald-400 rounded-full\"><\/span>\r\n \u0645\u0631\u0627\u062c\u0639\u0629 \u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u062a\u0646\u0627\u0638\u0631\r\n <\/h3>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-l text-right\">\r\n <thead><tr class=\"text-emerald-300 border-b border-emerald-500\/20\"><th class=\"p-3\">\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u062e\u0637\u064a\u0629<\/th><th class=\"p-3\">\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/th><th class=\"p-3\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629<\/th><\/tr><\/thead>\r\n <tbody class=\"text-slate-300 divide-y divide-white\/5\">\r\n <tr><td class=\"p-3\">\u0627\u0644\u0625\u0632\u0627\u062d\u0629 (x)<\/td><td class=\"p-3\">\u0627\u0644\u0625\u0632\u0627\u062d\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03b8)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">s = r \u03b8<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0633\u0631\u0639\u0629 (v)<\/td><td class=\"p-3\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">v = r \u03c9<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0643\u062a\u0644\u0629 (m)<\/td><td class=\"p-3\">\u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 (I)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">I = \u03a3 m r\u00b2<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0632\u062e\u0645 (p = mv)<\/td><td class=\"p-3\">\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (L = I\u03c9)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">L = r p sin\u03b8<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0642\u0648\u0629 (\u03a3F = ma)<\/td><td class=\"p-3\">\u0627\u0644\u0639\u0632\u0645 (\u03a3\u03c4 = I\u03b1)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">\u03c4 = r F sin\u03b8<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0637\u0627\u0642\u0629 (KE = \u00bd m v\u00b2)<\/td><td class=\"p-3\">\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629 (KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2)<\/td><td class=\"p-3\">-<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6 mt-12 bg-slate-900\/60 p-6 rounded-3xl border border-slate-700 w-full shadow-2xl\">\r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xl font-bold text-indigo-300 flex items-center gap-2\"> \u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 text-l text-slate-300\">\r\n <ul class=\"list-disc list-inside space-y-2 bg-slate-950\/40 p-4 rounded-xl border border-white\/5 pr-4\">\r\n <li>\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629: <span class=\"text-cyan-300 font-mono\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2<\/span>.<\/li>\r\n <li>\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a <strong class=\"text-indigo-300\">(L)<\/strong> = I \u00d7 \u03c9.<\/li>\r\n <li>\u0627\u0644\u0639\u0632\u0645 \u0627\u0644\u0645\u062d\u0635\u0644 = \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u062a\u063a\u064a\u0631 L: <span class=\"text-rose-300 font-mono\">\u03a3\u03c4 = \u0394L \/ \u0394t<\/span>.<\/li>\r\n <\/ul>\r\n <ul class=\"list-disc list-inside space-y-2 bg-slate-950\/40 p-4 rounded-xl border border-white\/5 pr-4\">\r\n <li>\u0641\u064a \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0645\u0639\u0632\u0648\u0644: <span class=\"font-mono text-emerald-300\">L<sub>i<\/sub> = L<sub>f<\/sub><\/span>.<\/li>\r\n <li>\u062a\u063a\u064a\u0631 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0643\u062a\u0644\u0629 \u064a\u0624\u062f\u064a \u0644\u062a\u063a\u064a\u0631 \u03c9 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b.<\/li>\r\n <li>\u0648\u062d\u062f\u0629 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a: <strong class=\"text-cyan-300\">kg.m\u00b2\/s<\/strong>.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pt-6 mt-6 border-t border-slate-700\/50\">\r\n <h3 class=\"text-xl font-bold text-emerald-300 flex items-center gap-2 mb-4\"> \u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062a\u0645\u064a\u0632<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-indigo-950\/20 p-4 rounded-2xl border border-indigo-500\/10\"><h4 class=\"text-indigo-400 font-bold mb-2 text-l\">\u062a\u062e\u064a\u0644 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/h4><p class=\"text-l text-slate-400\">\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u062a\u0632\u0644\u062c \u0627\u0644\u0630\u064a \u064a\u0636\u0645 \u0630\u0631\u0627\u0639\u064a\u0647 \u0647\u064a \u0627\u0644\u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0630\u0647\u0628\u064a \u0644\u0641\u0647\u0645 \u062d\u0641\u0638 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a.<\/p><\/div>\r\n <div class=\"bg-rose-950\/20 p-4 rounded-2xl border border-rose-500\/10\"><h4 class=\"text-rose-400 font-bold mb-2 text-l\">\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u064a\u062f \u0627\u0644\u064a\u0645\u0646\u0649<\/h4><p class=\"text-l text-slate-400\">\u0644\u0641 \u0623\u0635\u0627\u0628\u0639\u0643 \u0645\u0639 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u060c \u0633\u064a\u0634\u064a\u0631 \u0625\u0628\u0647\u0627\u0645\u0643 \u0644\u0645\u062a\u062c\u0647 \u0627\u0644\u0632\u062e\u0645.<\/p><\/div>\r\n <div class=\"bg-amber-950\/20 p-4 rounded-2xl border border-amber-500\/10\"><h4 class=\"text-amber-400 font-bold mb-2 text-l\">\u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 \u0644\u0644\u062a\u062d\u0648\u064a\u0644\u0627\u062a<\/h4><p class=\"text-l text-slate-400\">\u0627\u0644\u0643\u062a\u0644\u0629 \u0628\u0627\u0644\u0643\u064a\u0644\u0648\u063a\u0631\u0627\u0645\u060c \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u0627\u0644\u0645\u062a\u0631\u060c \u0627\u0644\u0633\u0631\u0639\u0629 \u0628\u0627\u0644\u0631\u0627\u062f\u064a\u0627\u0646\/\u062b\u0627\u0646\u064a\u0629.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useRef } = React;\r\n\r\n \/\/ ==================== ROTATIONAL KINETIC ENERGY SIMULATION ====================\r\n const RotationalKineticEnergySimulation = () => {\r\n const [inertia, setInertia] = useState(1.0);\r\n const [omega, setOmega] = useState(2.0);\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [angle, setAngle] = useState(0);\r\n const ker = 0.5 * inertia * (omega * omega);\r\n const requestRef = useRef(null);\r\n const lastTimeRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (!isPlaying) { lastTimeRef.current = undefined; return; }\r\n const update = (timeNow) => {\r\n if (lastTimeRef.current != null) {\r\n const deltaTime = (timeNow - lastTimeRef.current) \/ 1000;\r\n setAngle((prev) => prev + omega * deltaTime);\r\n }\r\n lastTimeRef.current = timeNow;\r\n requestRef.current = requestAnimationFrame(update);\r\n };\r\n requestRef.current = requestAnimationFrame(update);\r\n return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };\r\n }, [isPlaying, omega]);\r\n\r\n const handleReset = () => { setIsPlaying(false); setAngle(0); setInertia(1.0); setOmega(2.0); };\r\n\r\n return (\r\n <div className=\"bg-slate-900 mx-auto rounded-3xl border border-slate-700 overflow-hidden rtl shadow-xl my-8 leading-relaxed w-full\">\r\n <div className=\"p-4 bg-slate-800 border-b border-slate-700 flex justify-between items-center text-white\">\r\n <h3 className=\"text-lg font-bold text-cyan-400 flex items-center gap-2\"> \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/h3>\r\n <button onClick={handleReset} className=\"p-2 hover:bg-slate-700 rounded-lg transition-colors\"><span><\/span><\/button>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2\">\r\n <div className=\"p-8 flex flex-col items-center justify-center bg-slate-950 min-h-[350px] relative overflow-hidden\">\r\n <div className=\"absolute inset-0 bg-cyan-500\/5 transition-opacity\" style={{opacity: Math.min(0.3, ker \/ 50)}}><\/div>\r\n <div className=\"relative mb-8\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"-100 -100 200 200\" className=\"drop-shadow-2xl\">\r\n <g transform={`rotate(${(angle * 180) \/ Math.PI})`}>\r\n <circle cx=\"0\" cy=\"0\" r={30 + inertia * 10} fill=\"transparent\" stroke=\"#06b6d4\" strokeWidth={4 + inertia * 2} strokeDasharray=\"10,5\" \/>\r\n <circle cx=\"0\" cy={-(30 + inertia * 10)} r=\"6\" fill=\"#22d3ee\" \/>\r\n <circle cx={30 + inertia * 10} cy=\"0\" r=\"4\" fill=\"#0891b2\" \/>\r\n <\/g>\r\n <circle cx=\"0\" cy=\"0\" r=\"8\" fill=\"#fff\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div className=\"w-full max-w-l space-y-2\">\r\n <div className=\"flex justify-between text-l text-slate-500\"><span>\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0637\u0627\u0642\u0629 (J)<\/span><span className=\"text-cyan-400 font-bold\">{ker.toFixed(1)} J<\/span><\/div>\r\n <div className=\"h-3 w-full bg-slate-800 rounded-full overflow-hidden border border-white\/5\"><div className=\"h-full bg-gradient-to-r from-cyan-600 to-cyan-300 transition-all duration-300\" style={{width: `${Math.min(100, (ker \/ 100) * 100)}%`}}><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"p-8 bg-slate-800 border-r border-slate-700\">\r\n <div className=\"space-y-8\">\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\"><label className=\"text-slate-300 text-l font-bold\">\u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (I):<\/label><span className=\"font-mono text-cyan-400 text-l\">{inertia.toFixed(2)} kg.m\u00b2<\/span><\/div>\r\n <input type=\"range\" min=\"0.1\" max=\"5.0\" step=\"0.1\" value={inertia} onChange={(e) => setInertia(parseFloat(e.target.value))} className=\"w-full accent-cyan-500\" \/>\r\n <p className=\"text-l text-slate-500 italic\">\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0643\u062a\u0644\u0629 \u0623\u0648 \u062a\u0648\u0632\u064a\u0639\u0647\u0627 \u0628\u0639\u064a\u062f\u0627\u064b \u064a\u0632\u064a\u062f \u0627\u0644\u0642\u0635\u0648\u0631.<\/p>\r\n <\/div>\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\"><label className=\"text-slate-300 text-l font-bold\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9):<\/label><span className=\"font-mono text-blue-400 text-l\">{omega.toFixed(1)} rad\/s<\/span><\/div>\r\n <input type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value={omega} onChange={(e) => setOmega(parseFloat(e.target.value))} className=\"w-full accent-blue-500\" \/>\r\n <p className=\"text-l text-slate-500 italic\">\u0627\u0644\u0637\u0627\u0642\u0629 \u062a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0645\u0631\u0628\u0639 \u0627\u0644\u0633\u0631\u0639\u0629.<\/p>\r\n <\/div>\r\n <button onClick={() => setIsPlaying(!isPlaying)} className={`w-full py-4 rounded-2xl font-bold flex items-center justify-center gap-3 transition-all ${isPlaying ? 'bg-rose-500 hover:bg-rose-600 text-white' : 'bg-cyan-500 hover:bg-cyan-600 text-white'}`}>\r\n {isPlaying ? <span> \u0625\u064a\u0642\u0627\u0641<\/span> : <span> \u0628\u062f\u0621 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/span>}\r\n <\/button>\r\n <div className=\"bg-black\/40 p-4 rounded-xl border border-cyan-500\/20 font-mono text-center\">\r\n <div className=\"text-l text-slate-500 mb-2 font-sans\">\u0627\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0644\u062d\u0638\u064a:<\/div>\r\n <div className=\"text-l text-cyan-200\" dir=\"ltr\">\u00bd \u00d7 {inertia.toFixed(1)} \u00d7 {omega.toFixed(1)}\u00b2 = <span className=\"text-white font-bold\">{ker.toFixed(1)} J<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ==================== ANGULAR MOMENTUM CONSERVATION SIMULATION ====================\r\n const AngularMomentumConservationSimulation = () => {\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [armLength, setArmLength] = useState(1.0);\r\n const [angle, setAngle] = useState(0);\r\n const [omega, setOmega] = useState(2.0);\r\n const baseInertia = 0.5;\r\n const massAtArms = 2.0;\r\n const currentInertia = baseInertia + massAtArms * (armLength * armLength);\r\n const angularMomentum = currentInertia * omega;\r\n const requestRef = useRef(null);\r\n const lastTimeRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (!isPlaying) { lastTimeRef.current = undefined; return; }\r\n const update = (timeNow) => {\r\n if (lastTimeRef.current != null) {\r\n const deltaTime = (timeNow - lastTimeRef.current) \/ 1000;\r\n setAngle((prev) => prev + omega * deltaTime);\r\n }\r\n lastTimeRef.current = timeNow;\r\n requestRef.current = requestAnimationFrame(update);\r\n };\r\n requestRef.current = requestAnimationFrame(update);\r\n return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };\r\n }, [isPlaying, omega]);\r\n\r\n const handleArmChange = (newLength) => {\r\n const nextInertia = baseInertia + massAtArms * (newLength * newLength);\r\n const nextOmega = angularMomentum \/ nextInertia;\r\n setArmLength(newLength);\r\n setOmega(nextOmega);\r\n };\r\n\r\n const handleReset = () => { setIsPlaying(false); setAngle(0); setOmega(2.0); setArmLength(1.0); };\r\n\r\n return (\r\n <div className=\"bg-slate-900 mx-auto rounded-3xl border border-slate-700 overflow-hidden rtl shadow-xl my-8 leading-relaxed w-full\">\r\n <div className=\"p-4 bg-slate-800 border-b border-slate-700 flex justify-between items-center text-white\">\r\n <h3 className=\"text-lg font-bold text-amber-400\"> \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0645\u062a\u0632\u0644\u062c: \u062d\u0641\u0638 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h3>\r\n <button onClick={handleReset} className=\"p-2 hover:bg-slate-700 rounded-lg transition-colors\"><span><\/span><\/button>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2\">\r\n <div className=\"p-8 flex items-center justify-center bg-slate-950 min-h-[350px]\">\r\n <div className=\"relative\">\r\n <div className=\"absolute inset-0 flex items-center justify-center opacity-20\">\r\n <div className=\"w-48 h-48 border-4 border-amber-500 rounded-full animate-spin\" style={{animationDuration: `${Math.max(0.1, 5 \/ Math.abs(omega))}s`, transform: `rotate(${(angle * 180) \/ Math.PI}deg)`}} \/>\r\n <\/div>\r\n <svg width=\"200\" height=\"200\" viewBox=\"-100 -100 200 200\" className=\"drop-shadow-2xl\">\r\n <g transform={`rotate(${(angle * 180) \/ Math.PI})`}>\r\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#fcd34d\" stroke=\"#f59e0b\" strokeWidth=\"2\" \/>\r\n <line x1={-armLength * 40} y1=\"0\" x2={armLength * 40} y2=\"0\" stroke=\"#fcd34d\" strokeWidth=\"12\" strokeLinecap=\"round\" \/>\r\n <circle cx={-armLength * 40} cy=\"0\" r=\"8\" fill=\"#f59e0b\" \/>\r\n <circle cx={armLength * 40} cy=\"0\" r=\"8\" fill=\"#f59e0b\" \/>\r\n <circle cx=\"0\" cy=\"-6\" r=\"3\" fill=\"#000\" \/>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div className=\"p-8 bg-slate-800 border-r border-slate-700\">\r\n <div className=\"space-y-8\">\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\"><label className=\"text-slate-300 font-bold text-l\">\u0628\u0633\u0637\/\u0636\u0645 \u0627\u0644\u0630\u0631\u0627\u0639\u064a\u0646 (r):<\/label>\r\n <div className=\"flex items-center gap-2\">\r\n <button onClick={() => handleArmChange(Math.max(0.5, armLength - 0.1))} className=\"p-1 bg-slate-700 hover:bg-slate-600 rounded text-amber-300\"><span>\u2296<\/span><\/button>\r\n <span className=\"font-mono text-amber-400 w-12 text-center\">{armLength.toFixed(1)}m<\/span>\r\n <button onClick={() => handleArmChange(Math.min(2.0, armLength + 0.1))} className=\"p-1 bg-slate-700 hover:bg-slate-600 rounded text-amber-300\"><span>\u2295<\/span><\/button>\r\n <\/div>\r\n <\/div>\r\n <input type=\"range\" min=\"0.5\" max=\"2.0\" step=\"0.1\" value={armLength} onChange={(e) => handleArmChange(parseFloat(e.target.value))} className=\"w-full accent-amber-500\" \/>\r\n <\/div>\r\n <div className=\"space-y-3 bg-black\/30 p-4 rounded-xl border border-white\/5 font-mono text-l\">\r\n <div className=\"flex justify-between\"><span className=\"text-slate-400\">\u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 (I):<\/span><span className=\"text-amber-300\">{currentInertia.toFixed(2)} kg.m\u00b2<\/span><\/div>\r\n <div className=\"flex justify-between pt-2 border-t border-white\/5\"><span className=\"text-slate-400\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9):<\/span><span className=\"text-cyan-300\">{omega.toFixed(2)} rad\/s<\/span><\/div>\r\n <div className=\"flex justify-between pt-2 border-t border-white\/5\"><span className=\"text-slate-400 text-l italic\">\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (L):<\/span><span className=\"text-emerald-400 text-l font-bold\">{angularMomentum.toFixed(1)} kg.m\u00b2\/s <\/span><\/div>\r\n <\/div>\r\n <button onClick={() => setIsPlaying(!isPlaying)} className={`w-full py-3 rounded-xl font-bold flex items-center justify-center gap-2 transition-all ${isPlaying ? 'bg-rose-500 hover:bg-rose-600 text-white' : 'bg-emerald-500 hover:bg-emerald-600 text-white'}`}>\r\n {isPlaying ? <span> \u0625\u064a\u0642\u0627\u0641<\/span> : <span> \u0628\u062f\u0621 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/span>}\r\n <\/button>\r\n <p className=\"text-l text-slate-400 text-center leading-normal\">\u0644\u0627\u062d\u0638 \u0627\u0632\u062f\u064a\u0627\u062f \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646 \u0622\u0644\u064a\u0627\u064b \u0639\u0646\u062f \u0636\u0645 \u0627\u0644\u0630\u0631\u0627\u0639\u064a\u0646 (\u062a\u0642\u0644\u064a\u0644 I)\u060c \u0648\u062a\u0628\u0627\u0637\u0624\u0647\u0627 \u0639\u0646\u062f \u0628\u0633\u0637\u0647\u0645\u0627 (\u0632\u064a\u0627\u062f\u0629 I) \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u062b\u0627\u0628\u062a\u0627\u064b.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ==================== RENDER ALL COMPONENTS ====================\r\n const root1 = document.getElementById('rotational-ke-sim-root');\r\n if (root1) ReactDOM.render(<RotationalKineticEnergySimulation \/>, root1);\r\n\r\n const root2 = document.getElementById('angular-momentum-sim-root');\r\n if (root2) ReactDOM.render(<AngularMomentumConservationSimulation \/>, root2);\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-18721","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18721","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=18721"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18721\/revisions"}],"predecessor-version":[{"id":18722,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18721\/revisions\/18722"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\">\r\n <\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\">\r\n <\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\">\r\n <\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\">\r\n <\/script>\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: 1rem;\r\n }\r\n .content-container {\r\n max-width: 100%;\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: 1.5rem;\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 @media (min-width: 1280px) {\r\n .content-container {\r\n max-width: 96rem;\r\n padding: 2rem;\r\n }\r\n }\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #1e1b4b;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #4f46e5;\r\n border-radius: 4px;\r\n }\r\n .simulation-container {\r\n margin: 1.5rem 0;\r\n padding: 1rem;\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .direction-ltr {\r\n direction: ltr;\r\n text-align: left;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631 - \u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0644\u062b__\u0627\u0644\u0632\u062e\u0645_\u0627\u0644\u0632\u0627\u0648\u064a_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\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0644\u062b__\u0627\u0644\u0632\u062e\u0645_\u0627\u0644\u0632\u0627\u0648\u064a_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 <div class=\"space-y-6 text-right\">\r\n <div dir=\"rtl\" class=\"font-sans text-slate-100 space-y-10 leading-relaxed w-full\">\r\n\r\n \r\n <header class=\"bg-gradient-to-br from-indigo-900 to-slate-900 border border-indigo-700\/50 rounded-3xl p-8 shadow-2xl relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-full h-full opacity-10\" style=\"background-image: radial-gradient(circle at center, #818cf8 1px, transparent 1px); background-size: 20px 20px;\"><\/div>\r\n <div class=\"relative z-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-cyan-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h2>\r\n <p class=\"text-lg text-indigo-200\/80 font-light\">Angular Momentum<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border-r-4 border-indigo-500 shadow-lg\">\r\n <p class=\"text-slate-300 leading-relaxed\">\r\n <strong class=\"text-indigo-400\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629:<\/strong>\r\n \u0644\u0644\u0632\u062e\u0645 \u0627\u0644\u062e\u0637\u064a \u0646\u0638\u064a\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629 \u064a\u064f\u0633\u0645\u0649 <strong class=\"text-indigo-300\">\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/strong>. \u0648\u0647\u0648 \u0643\u0645\u064a\u0629 \u0645\u062d\u0641\u0648\u0638\u0629 \u0641\u064a \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u0645\u0639\u0632\u0648\u0644\u0629\u060c \u0648\u0644\u0647\u0630\u0627 \u0627\u0644\u062d\u0641\u0638 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062b\u064a\u0631\u0629 \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-cyan-400 rounded-full\"><\/span>\r\n \u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"space-y-4\">\r\n <p class=\"text-l md:text-base text-slate-300 leading-relaxed\">\r\n \u0644\u064a\u0633\u062a \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644\u064a\u0629 \u0648\u062d\u062f\u0647\u0627 \u0647\u064a \u0627\u0644\u062a\u064a \u062a\u0645\u062a\u0644\u0643 \u0637\u0627\u0642\u0629\u060c \u0628\u0644 \u0625\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u062a\u064a \u062a\u062f\u0648\u0631 \u062d\u0648\u0644 \u0645\u062d\u0648\u0631 \u062b\u0627\u0628\u062a \u062a\u0645\u062a\u0644\u0643 <strong class=\"text-cyan-300\">\u0637\u0627\u0642\u0629 \u062d\u0631\u0643\u064a\u0629 \u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/strong>.\r\n <\/p>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-2xl border border-cyan-500\/20\">\r\n <h4 class=\"text-cyan-300 font-bold mb-2 text-l italic\">\u0645\u0628\u062f\u0623 \u0627\u0644\u062a\u0646\u0627\u0638\u0631:<\/h4>\r\n <div class=\"grid grid-cols-2 gap-4 text-center\">\r\n <div class=\"bg-black\/30 p-2 rounded-xl border border-white\/5\"><span class=\"text-[10px] text-slate-500 block mb-1\">\u062d\u0631\u0643\u0629 \u062e\u0637\u064a\u0629<\/span><span class=\"font-mono text-l text-slate-300\" dir=\"ltr\">KE = \u00bd m v\u00b2<\/span><\/div>\r\n <div class=\"bg-cyan-500\/10 p-2 rounded-xl border border-cyan-500\/20\"><span class=\"text-[10px] text-cyan-500 block mb-1\">\u062d\u0631\u0643\u0629 \u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/span><span class=\"font-mono text-l text-cyan-300\" dir=\"ltr\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-cyan-900\/10 p-5 rounded-2xl border border-cyan-500\/20 flex flex-col justify-center\">\r\n <h4 class=\"text-cyan-400 font-bold mb-3 text-l\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629:<\/h4>\r\n <div dir=\"ltr\" class=\"bg-black\/40 p-6 rounded-2xl font-mono text-3xl font-bold text-cyan-300 shadow-inner border border-cyan-500\/20 text-center mb-2\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2<\/div>\r\n <div class=\"flex justify-between px-2 text-[10px] text-slate-400 font-sans\"><span>\u0634\u063a\u0644 \/ \u0637\u0627\u0642\u0629 (J)<\/span><span>\u0642\u0635\u0648\u0631 \u0630\u0627\u062a\u064a (kg.m\u00b2)<\/span><span>\u0633\u0631\u0639\u0629 \u0632\u0627\u0648\u064a\u0629 (rad\/s)<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"rotational-ke-sim-root\" class=\"simulation-container\"><\/div>\r\n\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5 space-y-2\">\r\n <h4 class=\"text-slate-300 font-bold text-l\">\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0647\u0627\u0645\u0629:<\/h4>\r\n <ul class=\"list-disc list-inside text-l text-slate-400 space-y-1 pr-4\">\r\n <li>\u062a\u0639\u062a\u0645\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629 <strong class=\"text-cyan-300 italic\">\u0637\u0631\u062f\u064a\u064b\u0627<\/strong> \u0639\u0644\u0649 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a.<\/li>\r\n <li>\u062a\u0639\u062a\u0645\u062f <strong class=\"text-cyan-300 italic\">\u0637\u0631\u062f\u064a\u064b\u0627<\/strong> \u0639\u0644\u0649 <strong class=\"text-indigo-300 font-bold\">\u0645\u0631\u0628\u0639<\/strong> \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629.<\/li>\r\n <li>\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u062c\u0633\u0645 \u064a\u062a\u062f\u062d\u0631\u062c \u0641\u0625\u0646\u0647 \u064a\u0645\u062a\u0644\u0643 \u0637\u0627\u0642\u0629 \u062d\u0631\u0643\u064a\u0629 <strong class=\"text-emerald-400 font-bold\">\u062e\u0637\u064a\u0629 \u0648\u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/strong> \u0645\u0639\u0627\u064b.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-cyan-500\/20 shadow-lg\">\r\n <h4 class=\"text-base font-bold text-cyan-300 mb-3 flex items-center gap-2 border-b border-cyan-500\/20 pb-3\"><span class=\"w-6 h-6 rounded-full bg-cyan-500\/20 flex items-center justify-center text-l\">9<\/span> \u0645\u062b\u0627\u0644 9 (\u0635 69)<\/h4>\r\n <p class=\"text-l text-slate-200 leading-relaxed mb-3\">\u0642\u0631\u0635 \u0643\u062a\u0644\u062a\u0647 2.0 kg \u0648\u0646\u0635\u0641 \u0642\u0637\u0631\u0647 0.50 m \u064a\u062f\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 8.0 rad\/s.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-cyan-500\/10\">\r\n <div dir=\"ltr\" class=\"font-mono text-cyan-200 bg-black\/40 p-2 rounded text-center text-l\">I = \u00bd m r\u00b2 = \u00bd \u00d7 2.0 \u00d7 (0.50)\u00b2 = 0.25 kg.m\u00b2<\/div>\r\n <div dir=\"ltr\" class=\"font-mono text-cyan-200 bg-black\/40 p-2 rounded text-center text-l mt-2\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2 = \u00bd \u00d7 0.25 \u00d7 64 = 8 J<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-indigo-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0646\u064a\u064b\u0627: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (Angular Momentum)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-6\">\r\n <p class=\"text-l md:text-base text-slate-300 leading-relaxed\">\r\n \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (L) \u0647\u0648 \u062d\u0627\u0635\u0644 \u0636\u0631\u0628 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a \u0641\u064a \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629. \u0647\u0648 \u0643\u0645\u064a\u0629 \u0645\u062a\u062c\u0647\u0629 \u062a\u062d\u062f\u062f \"\u0643\u0645\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\" \u0627\u0644\u062a\u064a \u064a\u0645\u062a\u0644\u0643\u0647\u0627 \u0627\u0644\u062c\u0633\u0645.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-indigo-500\/20 text-center\">\r\n <div dir=\"ltr\" class=\"font-mono text-3xl font-bold text-indigo-300 mb-2\">L = I \u03c9<\/div>\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u0648\u062d\u062f\u0629: kg.m\u00b2\/s<\/p>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/10 p-5 rounded-2xl border border-indigo-500\/20\">\r\n <h4 class=\"text-indigo-300 font-bold mb-2 text-l\">\u0627\u0644\u0627\u062a\u062c\u0627\u0647 (\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u064a\u062f \u0627\u0644\u064a\u0645\u0646\u0649):<\/h4>\r\n <ul class=\"text-l text-slate-300 space-y-2\">\r\n <li><strong class=\"text-emerald-400\">\u0639\u0643\u0633 \u0627\u0644\u0639\u0642\u0627\u0631\u0628:<\/strong> \u0627\u0644\u0645\u062a\u062c\u0647 \u0646\u062d\u0648 \u0627\u0644\u062e\u0627\u0631\u062c (+z).<\/li>\r\n <li><strong class=\"text-rose-400\">\u0645\u0639 \u0627\u0644\u0639\u0642\u0627\u0631\u0628:<\/strong> \u0627\u0644\u0645\u062a\u062c\u0647 \u0646\u062d\u0648 \u0627\u0644\u062f\u0627\u062e\u0644 (-z).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-indigo-500\/20 shadow-lg\">\r\n <h4 class=\"text-base font-bold text-indigo-300 mb-3 flex items-center gap-2 border-b border-indigo-500\/20 pb-3\"><span class=\"w-6 h-6 rounded-full bg-indigo-500\/20 flex items-center justify-center text-l\">10<\/span> \u0645\u062b\u0627\u0644 10 (\u0635 70)<\/h4>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-indigo-500\/10 text-l text-slate-300\">\r\n <p class=\"mb-2\">\u062c\u0633\u064a\u0645 \u0643\u062a\u0644\u062a\u0647 50.0 g \u064a\u062f\u0648\u0631 \u0641\u064a \u0645\u0633\u0627\u0631 \u0646\u0635\u0641 \u0642\u0637\u0631\u0647 20.0 cm \u0628\u0633\u0631\u0639\u0629 \u0632\u0627\u0648\u064a\u0629 5.0 rad\/s.<\/p>\r\n <div dir=\"ltr\" class=\"font-mono text-slate-400 text-l bg-slate-900\/50 p-2 rounded\">I = m r\u00b2 = 0.050 \u00d7 (0.20)\u00b2 = 0.002 kg.m\u00b2<br\/>L = I \u03c9 = 0.002 \u00d7 5.0 = 0.01 kg.m\u00b2\/s<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-amber-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0644\u062b\u0627\u064b: \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u0627\u0644\u0639\u0632\u0645 \u0648\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-6\">\r\n <p class=\"text-l md:text-base text-slate-300 leading-relaxed\">\r\n \u062a\u0645\u0627\u0645\u0627 \u0643\u0645\u0627 \u0641\u064a \u0627\u0644\u0643\u0645\u064a\u0627\u062a \u0627\u0644\u062e\u0637\u064a\u0629\u060c \u0641\u0625\u0646 <strong class=\"text-amber-300\">\u0627\u0644\u0639\u0632\u0645 \u0627\u0644\u0645\u062d\u0635\u0644<\/strong> \u0627\u0644\u0645\u0624\u062b\u0631 \u0641\u064a \u062c\u0633\u0645 \u064a\u0633\u0627\u0648\u064a \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u062a\u063a\u064a\u0631 \u0632\u062e\u0645\u0647 \u0627\u0644\u0632\u0627\u0648\u064a.\r\n <\/p>\r\n <div class=\"flex flex-col md:flex-row gap-6 items-center justify-center\">\r\n <div dir=\"ltr\" class=\"bg-black\/40 p-6 rounded-2xl font-mono text-2xl font-bold text-rose-300 shadow-inner border border-rose-500\/20 text-center min-w-[200px]\">\u03a3\u03c4 = \u0394L \/ \u0394t<\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/5 max-w-l\"><p class=\"text-l text-slate-400 leading-relaxed italic\">\"\u0644\u0643\u064a \u064a\u062a\u063a\u064a\u0631 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u0644\u0644\u062c\u0633\u0645\u060c \u0644\u0627 \u0628\u062f \u0645\u0646 \u0648\u062c\u0648\u062f \u0639\u0632\u0645 \u062e\u0627\u0631\u062c\u064a \u064a\u0624\u062b\u0631 \u0639\u0644\u064a\u0647 \u062e\u0644\u0627\u0644 \u0641\u062a\u0631\u0629 \u0632\u0645\u0646\u064a\u0629.\"<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-emerald-400 rounded-full\"><\/span>\r\n \u0631\u0627\u0628\u0639\u0627\u064b: \u0642\u0627\u0646\u0648\u0646 \u062d\u0641\u0638 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a\r\n <\/h3>\r\n <div class=\"bg-slate-800\/60 p-6 rounded-3xl border border-white\/10 space-y-8\">\r\n <div class=\"bg-emerald-900\/10 p-6 rounded-2xl border border-emerald-500\/20\">\r\n <h4 class=\"text-emerald-300 font-bold mb-3\">\u0645\u0628\u062f\u0623 \u0627\u0644\u0635\u0648\u0646<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 <strong class=\"text-emerald-400\">\u0627\u0644\u0639\u0632\u0645 \u0627\u0644\u0645\u062d\u0635\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u064a<\/strong> \u0627\u0644\u0645\u0624\u062b\u0631 \u0641\u064a \u0646\u0638\u0627\u0645 \u0645\u0639\u0632\u0648\u0644 \u0645\u0633\u0627\u0648\u064a\u0627\u064b \u0644\u0644\u0635\u0641\u0631 (\u03a3\u03c4 = 0)\u060c \u0641\u0625\u0646 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u0644\u0644\u0646\u0638\u0627\u0645 \u064a\u0628\u0642\u0649 <strong class=\"text-emerald-400\">\u062b\u0627\u0628\u062a\u0627\u064b<\/strong>.<\/p>\r\n <\/div>\r\n <div dir=\"ltr\" class=\"font-mono text-center text-emerald-200 bg-black\/40 py-4 rounded-xl text-2xl border border-emerald-500\/20 w-full shadow-lg\">L<sub>i<\/sub> = L<sub>f<\/sub> \u2192 I<sub>i<\/sub> \u03c9<sub>i<\/sub> = I<sub>f<\/sub> \u03c9<sub>f<\/sub><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border-r-4 border-rose-500\"><h5 class=\"text-l font-bold text-rose-400 mb-1\">\u0625\u0630\u0627 \u0642\u0644 \u0627\u0644\u0642\u0635\u0648\u0631 (I) \u2193 :<\/h5><p class=\"text-l text-slate-200 font-bold\">\u062a\u0632\u062f\u0627\u062f \u0627\u0644\u0633\u0631\u0639\u0629 (\u03c9) \u2191<\/p><p class=\"text-[10px] text-slate-500 italic mt-1\">(\u0627\u0644\u0645\u062a\u0632\u0644\u062c \u064a\u0636\u0645 \u0630\u0631\u0627\u0639\u064a\u0647)<\/p><\/div>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-xl border-r-4 border-blue-500\"><h5 class=\"text-l font-bold text-blue-400 mb-1\">\u0625\u0630\u0627 \u0632\u0627\u062f \u0627\u0644\u0642\u0635\u0648\u0631 (I) \u2191 :<\/h5><p class=\"text-l text-slate-200 font-bold\">\u062a\u0642\u0644 \u0627\u0644\u0633\u0631\u0639\u0629 (\u03c9) \u2193<\/p><p class=\"text-[10px] text-slate-500 italic mt-1\">(\u0627\u0644\u063a\u0637\u0627\u0633 \u064a\u0645\u062f \u062c\u0633\u0645\u0647)<\/p><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"angular-momentum-sim-root\" class=\"simulation-container\"><\/div>\r\n\r\n \r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-emerald-500\/20 shadow-lg\">\r\n <h4 class=\"text-base font-bold text-emerald-300 mb-3 flex items-center gap-2 border-b border-emerald-500\/20 pb-3\"><span class=\"w-6 h-6 rounded-full bg-emerald-500\/20 flex items-center justify-center text-l\">12<\/span> \u0645\u062b\u0627\u0644 12 (\u0635 74)<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u064a\u0646\u062a\u0642\u0644 \u0637\u0641\u0644 \u0645\u0646 \u062d\u0627\u0641\u0629 \u0642\u0631\u0635 \u062f\u0648\u0627\u0631 \u0625\u0644\u0649 \u0645\u0631\u0643\u0632\u0647\u060c \u064a\u0642\u0644 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (I) \u0641\u062a\u0632\u062f\u0627\u062f \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9) \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u062b\u0627\u0628\u062a\u0627\u064b.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5\"><h5 class=\"text-emerald-400 font-bold text-l\">\u0627\u0644\u0645\u062a\u0632\u0644\u062c \u0639\u0644\u0649 \u0627\u0644\u062c\u0644\u064a\u062f<\/h5><p class=\"text-l text-slate-400\">\u064a\u0636\u0645 \u0630\u0631\u0627\u0639\u064a\u0647 \u0641\u062a\u0642\u0631\u0651\u0628 \u0643\u062a\u0644\u062a\u0647 \u0645\u0646 \u0627\u0644\u0645\u062d\u0648\u0631 (\u064a\u0642\u0644 I) \u0641\u064a\u062f\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 \u0623\u0643\u0628\u0631.<\/p><\/div>\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5\"><h5 class=\"text-blue-400 font-bold text-l\">\u0627\u0644\u063a\u0637\u0627\u0633<\/h5><p class=\"text-l text-slate-400\">\u064a\u0636\u0645 \u0631\u0643\u0628\u062a\u064a\u0647 \u0644\u0635\u062f\u0631\u0647 \u0644\u064a\u0642\u0644\u0644 \u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0648\u064a\u062f\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 \u0628\u0647\u0644\u0648\u0627\u0646\u064a\u0629.<\/p><\/div>\r\n <div class=\"bg-slate-900\/40 p-4 rounded-xl border border-white\/5\"><h5 class=\"text-pink-400 font-bold text-l\">\u0627\u0644\u0642\u0637\u0637<\/h5><p class=\"text-l text-slate-400\">\u062a\u062d\u0631\u0643 \u062c\u0633\u0645\u0647\u0627 \u0628\u0634\u0643\u0644 \u0645\u062a\u0639\u0627\u0643\u0633 \u0644\u062a\u0647\u0628\u0637 \u0639\u0644\u0649 \u0623\u0642\u062f\u0627\u0645\u0647\u0627 (\u0635\u064a\u0627\u0646\u0629 L=0).<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-emerald-400 rounded-full\"><\/span>\r\n \u0645\u0631\u0627\u062c\u0639\u0629 \u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u062a\u0646\u0627\u0638\u0631\r\n <\/h3>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n <table class=\"w-full text-l text-right\">\r\n <thead><tr class=\"text-emerald-300 border-b border-emerald-500\/20\"><th class=\"p-3\">\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u062e\u0637\u064a\u0629<\/th><th class=\"p-3\">\u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/th><th class=\"p-3\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629<\/th><\/tr><\/thead>\r\n <tbody class=\"text-slate-300 divide-y divide-white\/5\">\r\n <tr><td class=\"p-3\">\u0627\u0644\u0625\u0632\u0627\u062d\u0629 (x)<\/td><td class=\"p-3\">\u0627\u0644\u0625\u0632\u0627\u062d\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03b8)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">s = r \u03b8<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0633\u0631\u0639\u0629 (v)<\/td><td class=\"p-3\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">v = r \u03c9<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0643\u062a\u0644\u0629 (m)<\/td><td class=\"p-3\">\u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 (I)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">I = \u03a3 m r\u00b2<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0632\u062e\u0645 (p = mv)<\/td><td class=\"p-3\">\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (L = I\u03c9)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">L = r p sin\u03b8<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0642\u0648\u0629 (\u03a3F = ma)<\/td><td class=\"p-3\">\u0627\u0644\u0639\u0632\u0645 (\u03a3\u03c4 = I\u03b1)<\/td><td class=\"p-3 font-mono\" dir=\"ltr\">\u03c4 = r F sin\u03b8<\/td><\/tr>\r\n <tr><td class=\"p-3\">\u0627\u0644\u0637\u0627\u0642\u0629 (KE = \u00bd m v\u00b2)<\/td><td class=\"p-3\">\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629 (KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2)<\/td><td class=\"p-3\">-<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6 mt-12 bg-slate-900\/60 p-6 rounded-3xl border border-slate-700 w-full shadow-2xl\">\r\n <div class=\"space-y-4\">\r\n <h3 class=\"text-xl font-bold text-indigo-300 flex items-center gap-2\"> \u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633: \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 text-l text-slate-300\">\r\n <ul class=\"list-disc list-inside space-y-2 bg-slate-950\/40 p-4 rounded-xl border border-white\/5 pr-4\">\r\n <li>\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629: <span class=\"text-cyan-300 font-mono\">KE<sub>R<\/sub> = \u00bd I \u03c9\u00b2<\/span>.<\/li>\r\n <li>\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a <strong class=\"text-indigo-300\">(L)<\/strong> = I \u00d7 \u03c9.<\/li>\r\n <li>\u0627\u0644\u0639\u0632\u0645 \u0627\u0644\u0645\u062d\u0635\u0644 = \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u062a\u063a\u064a\u0631 L: <span class=\"text-rose-300 font-mono\">\u03a3\u03c4 = \u0394L \/ \u0394t<\/span>.<\/li>\r\n <\/ul>\r\n <ul class=\"list-disc list-inside space-y-2 bg-slate-950\/40 p-4 rounded-xl border border-white\/5 pr-4\">\r\n <li>\u0641\u064a \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0645\u0639\u0632\u0648\u0644: <span class=\"font-mono text-emerald-300\">L<sub>i<\/sub> = L<sub>f<\/sub><\/span>.<\/li>\r\n <li>\u062a\u063a\u064a\u0631 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0643\u062a\u0644\u0629 \u064a\u0624\u062f\u064a \u0644\u062a\u063a\u064a\u0631 \u03c9 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b.<\/li>\r\n <li>\u0648\u062d\u062f\u0629 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a: <strong class=\"text-cyan-300\">kg.m\u00b2\/s<\/strong>.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pt-6 mt-6 border-t border-slate-700\/50\">\r\n <h3 class=\"text-xl font-bold text-emerald-300 flex items-center gap-2 mb-4\"> \u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062a\u0645\u064a\u0632<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-indigo-950\/20 p-4 rounded-2xl border border-indigo-500\/10\"><h4 class=\"text-indigo-400 font-bold mb-2 text-l\">\u062a\u062e\u064a\u0644 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/h4><p class=\"text-l text-slate-400\">\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u062a\u0632\u0644\u062c \u0627\u0644\u0630\u064a \u064a\u0636\u0645 \u0630\u0631\u0627\u0639\u064a\u0647 \u0647\u064a \u0627\u0644\u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0630\u0647\u0628\u064a \u0644\u0641\u0647\u0645 \u062d\u0641\u0638 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a.<\/p><\/div>\r\n <div class=\"bg-rose-950\/20 p-4 rounded-2xl border border-rose-500\/10\"><h4 class=\"text-rose-400 font-bold mb-2 text-l\">\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u064a\u062f \u0627\u0644\u064a\u0645\u0646\u0649<\/h4><p class=\"text-l text-slate-400\">\u0644\u0641 \u0623\u0635\u0627\u0628\u0639\u0643 \u0645\u0639 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u060c \u0633\u064a\u0634\u064a\u0631 \u0625\u0628\u0647\u0627\u0645\u0643 \u0644\u0645\u062a\u062c\u0647 \u0627\u0644\u0632\u062e\u0645.<\/p><\/div>\r\n <div class=\"bg-amber-950\/20 p-4 rounded-2xl border border-amber-500\/10\"><h4 class=\"text-amber-400 font-bold mb-2 text-l\">\u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 \u0644\u0644\u062a\u062d\u0648\u064a\u0644\u0627\u062a<\/h4><p class=\"text-l text-slate-400\">\u0627\u0644\u0643\u062a\u0644\u0629 \u0628\u0627\u0644\u0643\u064a\u0644\u0648\u063a\u0631\u0627\u0645\u060c \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u0627\u0644\u0645\u062a\u0631\u060c \u0627\u0644\u0633\u0631\u0639\u0629 \u0628\u0627\u0644\u0631\u0627\u062f\u064a\u0627\u0646\/\u062b\u0627\u0646\u064a\u0629.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useRef } = React;\r\n\r\n \/\/ ==================== ROTATIONAL KINETIC ENERGY SIMULATION ====================\r\n const RotationalKineticEnergySimulation = () => {\r\n const [inertia, setInertia] = useState(1.0);\r\n const [omega, setOmega] = useState(2.0);\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [angle, setAngle] = useState(0);\r\n const ker = 0.5 * inertia * (omega * omega);\r\n const requestRef = useRef(null);\r\n const lastTimeRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (!isPlaying) { lastTimeRef.current = undefined; return; }\r\n const update = (timeNow) => {\r\n if (lastTimeRef.current != null) {\r\n const deltaTime = (timeNow - lastTimeRef.current) \/ 1000;\r\n setAngle((prev) => prev + omega * deltaTime);\r\n }\r\n lastTimeRef.current = timeNow;\r\n requestRef.current = requestAnimationFrame(update);\r\n };\r\n requestRef.current = requestAnimationFrame(update);\r\n return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };\r\n }, [isPlaying, omega]);\r\n\r\n const handleReset = () => { setIsPlaying(false); setAngle(0); setInertia(1.0); setOmega(2.0); };\r\n\r\n return (\r\n <div className=\"bg-slate-900 mx-auto rounded-3xl border border-slate-700 overflow-hidden rtl shadow-xl my-8 leading-relaxed w-full\">\r\n <div className=\"p-4 bg-slate-800 border-b border-slate-700 flex justify-between items-center text-white\">\r\n <h3 className=\"text-lg font-bold text-cyan-400 flex items-center gap-2\"> \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646\u064a\u0629<\/h3>\r\n <button onClick={handleReset} className=\"p-2 hover:bg-slate-700 rounded-lg transition-colors\"><span><\/span><\/button>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2\">\r\n <div className=\"p-8 flex flex-col items-center justify-center bg-slate-950 min-h-[350px] relative overflow-hidden\">\r\n <div className=\"absolute inset-0 bg-cyan-500\/5 transition-opacity\" style={{opacity: Math.min(0.3, ker \/ 50)}}><\/div>\r\n <div className=\"relative mb-8\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"-100 -100 200 200\" className=\"drop-shadow-2xl\">\r\n <g transform={`rotate(${(angle * 180) \/ Math.PI})`}>\r\n <circle cx=\"0\" cy=\"0\" r={30 + inertia * 10} fill=\"transparent\" stroke=\"#06b6d4\" strokeWidth={4 + inertia * 2} strokeDasharray=\"10,5\" \/>\r\n <circle cx=\"0\" cy={-(30 + inertia * 10)} r=\"6\" fill=\"#22d3ee\" \/>\r\n <circle cx={30 + inertia * 10} cy=\"0\" r=\"4\" fill=\"#0891b2\" \/>\r\n <\/g>\r\n <circle cx=\"0\" cy=\"0\" r=\"8\" fill=\"#fff\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div className=\"w-full max-w-l space-y-2\">\r\n <div className=\"flex justify-between text-l text-slate-500\"><span>\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0637\u0627\u0642\u0629 (J)<\/span><span className=\"text-cyan-400 font-bold\">{ker.toFixed(1)} J<\/span><\/div>\r\n <div className=\"h-3 w-full bg-slate-800 rounded-full overflow-hidden border border-white\/5\"><div className=\"h-full bg-gradient-to-r from-cyan-600 to-cyan-300 transition-all duration-300\" style={{width: `${Math.min(100, (ker \/ 100) * 100)}%`}}><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"p-8 bg-slate-800 border-r border-slate-700\">\r\n <div className=\"space-y-8\">\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\"><label className=\"text-slate-300 text-l font-bold\">\u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (I):<\/label><span className=\"font-mono text-cyan-400 text-l\">{inertia.toFixed(2)} kg.m\u00b2<\/span><\/div>\r\n <input type=\"range\" min=\"0.1\" max=\"5.0\" step=\"0.1\" value={inertia} onChange={(e) => setInertia(parseFloat(e.target.value))} className=\"w-full accent-cyan-500\" \/>\r\n <p className=\"text-l text-slate-500 italic\">\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0643\u062a\u0644\u0629 \u0623\u0648 \u062a\u0648\u0632\u064a\u0639\u0647\u0627 \u0628\u0639\u064a\u062f\u0627\u064b \u064a\u0632\u064a\u062f \u0627\u0644\u0642\u0635\u0648\u0631.<\/p>\r\n <\/div>\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\"><label className=\"text-slate-300 text-l font-bold\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9):<\/label><span className=\"font-mono text-blue-400 text-l\">{omega.toFixed(1)} rad\/s<\/span><\/div>\r\n <input type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value={omega} onChange={(e) => setOmega(parseFloat(e.target.value))} className=\"w-full accent-blue-500\" \/>\r\n <p className=\"text-l text-slate-500 italic\">\u0627\u0644\u0637\u0627\u0642\u0629 \u062a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0645\u0631\u0628\u0639 \u0627\u0644\u0633\u0631\u0639\u0629.<\/p>\r\n <\/div>\r\n <button onClick={() => setIsPlaying(!isPlaying)} className={`w-full py-4 rounded-2xl font-bold flex items-center justify-center gap-3 transition-all ${isPlaying ? 'bg-rose-500 hover:bg-rose-600 text-white' : 'bg-cyan-500 hover:bg-cyan-600 text-white'}`}>\r\n {isPlaying ? <span> \u0625\u064a\u0642\u0627\u0641<\/span> : <span> \u0628\u062f\u0621 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/span>}\r\n <\/button>\r\n <div className=\"bg-black\/40 p-4 rounded-xl border border-cyan-500\/20 font-mono text-center\">\r\n <div className=\"text-l text-slate-500 mb-2 font-sans\">\u0627\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0644\u062d\u0638\u064a:<\/div>\r\n <div className=\"text-l text-cyan-200\" dir=\"ltr\">\u00bd \u00d7 {inertia.toFixed(1)} \u00d7 {omega.toFixed(1)}\u00b2 = <span className=\"text-white font-bold\">{ker.toFixed(1)} J<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ==================== ANGULAR MOMENTUM CONSERVATION SIMULATION ====================\r\n const AngularMomentumConservationSimulation = () => {\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [armLength, setArmLength] = useState(1.0);\r\n const [angle, setAngle] = useState(0);\r\n const [omega, setOmega] = useState(2.0);\r\n const baseInertia = 0.5;\r\n const massAtArms = 2.0;\r\n const currentInertia = baseInertia + massAtArms * (armLength * armLength);\r\n const angularMomentum = currentInertia * omega;\r\n const requestRef = useRef(null);\r\n const lastTimeRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (!isPlaying) { lastTimeRef.current = undefined; return; }\r\n const update = (timeNow) => {\r\n if (lastTimeRef.current != null) {\r\n const deltaTime = (timeNow - lastTimeRef.current) \/ 1000;\r\n setAngle((prev) => prev + omega * deltaTime);\r\n }\r\n lastTimeRef.current = timeNow;\r\n requestRef.current = requestAnimationFrame(update);\r\n };\r\n requestRef.current = requestAnimationFrame(update);\r\n return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };\r\n }, [isPlaying, omega]);\r\n\r\n const handleArmChange = (newLength) => {\r\n const nextInertia = baseInertia + massAtArms * (newLength * newLength);\r\n const nextOmega = angularMomentum \/ nextInertia;\r\n setArmLength(newLength);\r\n setOmega(nextOmega);\r\n };\r\n\r\n const handleReset = () => { setIsPlaying(false); setAngle(0); setOmega(2.0); setArmLength(1.0); };\r\n\r\n return (\r\n <div className=\"bg-slate-900 mx-auto rounded-3xl border border-slate-700 overflow-hidden rtl shadow-xl my-8 leading-relaxed w-full\">\r\n <div className=\"p-4 bg-slate-800 border-b border-slate-700 flex justify-between items-center text-white\">\r\n <h3 className=\"text-lg font-bold text-amber-400\"> \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0645\u062a\u0632\u0644\u062c: \u062d\u0641\u0638 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a<\/h3>\r\n <button onClick={handleReset} className=\"p-2 hover:bg-slate-700 rounded-lg transition-colors\"><span><\/span><\/button>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2\">\r\n <div className=\"p-8 flex items-center justify-center bg-slate-950 min-h-[350px]\">\r\n <div className=\"relative\">\r\n <div className=\"absolute inset-0 flex items-center justify-center opacity-20\">\r\n <div className=\"w-48 h-48 border-4 border-amber-500 rounded-full animate-spin\" style={{animationDuration: `${Math.max(0.1, 5 \/ Math.abs(omega))}s`, transform: `rotate(${(angle * 180) \/ Math.PI}deg)`}} \/>\r\n <\/div>\r\n <svg width=\"200\" height=\"200\" viewBox=\"-100 -100 200 200\" className=\"drop-shadow-2xl\">\r\n <g transform={`rotate(${(angle * 180) \/ Math.PI})`}>\r\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#fcd34d\" stroke=\"#f59e0b\" strokeWidth=\"2\" \/>\r\n <line x1={-armLength * 40} y1=\"0\" x2={armLength * 40} y2=\"0\" stroke=\"#fcd34d\" strokeWidth=\"12\" strokeLinecap=\"round\" \/>\r\n <circle cx={-armLength * 40} cy=\"0\" r=\"8\" fill=\"#f59e0b\" \/>\r\n <circle cx={armLength * 40} cy=\"0\" r=\"8\" fill=\"#f59e0b\" \/>\r\n <circle cx=\"0\" cy=\"-6\" r=\"3\" fill=\"#000\" \/>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div className=\"p-8 bg-slate-800 border-r border-slate-700\">\r\n <div className=\"space-y-8\">\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\"><label className=\"text-slate-300 font-bold text-l\">\u0628\u0633\u0637\/\u0636\u0645 \u0627\u0644\u0630\u0631\u0627\u0639\u064a\u0646 (r):<\/label>\r\n <div className=\"flex items-center gap-2\">\r\n <button onClick={() => handleArmChange(Math.max(0.5, armLength - 0.1))} className=\"p-1 bg-slate-700 hover:bg-slate-600 rounded text-amber-300\"><span>\u2296<\/span><\/button>\r\n <span className=\"font-mono text-amber-400 w-12 text-center\">{armLength.toFixed(1)}m<\/span>\r\n <button onClick={() => handleArmChange(Math.min(2.0, armLength + 0.1))} className=\"p-1 bg-slate-700 hover:bg-slate-600 rounded text-amber-300\"><span>\u2295<\/span><\/button>\r\n <\/div>\r\n <\/div>\r\n <input type=\"range\" min=\"0.5\" max=\"2.0\" step=\"0.1\" value={armLength} onChange={(e) => handleArmChange(parseFloat(e.target.value))} className=\"w-full accent-amber-500\" \/>\r\n <\/div>\r\n <div className=\"space-y-3 bg-black\/30 p-4 rounded-xl border border-white\/5 font-mono text-l\">\r\n <div className=\"flex justify-between\"><span className=\"text-slate-400\">\u0639\u0632\u0645 \u0627\u0644\u0642\u0635\u0648\u0631 (I):<\/span><span className=\"text-amber-300\">{currentInertia.toFixed(2)} kg.m\u00b2<\/span><\/div>\r\n <div className=\"flex justify-between pt-2 border-t border-white\/5\"><span className=\"text-slate-400\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03c9):<\/span><span className=\"text-cyan-300\">{omega.toFixed(2)} rad\/s<\/span><\/div>\r\n <div className=\"flex justify-between pt-2 border-t border-white\/5\"><span className=\"text-slate-400 text-l italic\">\u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a (L):<\/span><span className=\"text-emerald-400 text-l font-bold\">{angularMomentum.toFixed(1)} kg.m\u00b2\/s <\/span><\/div>\r\n <\/div>\r\n <button onClick={() => setIsPlaying(!isPlaying)} className={`w-full py-3 rounded-xl font-bold flex items-center justify-center gap-2 transition-all ${isPlaying ? 'bg-rose-500 hover:bg-rose-600 text-white' : 'bg-emerald-500 hover:bg-emerald-600 text-white'}`}>\r\n {isPlaying ? <span> \u0625\u064a\u0642\u0627\u0641<\/span> : <span> \u0628\u062f\u0621 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/span>}\r\n <\/button>\r\n <p className=\"text-l text-slate-400 text-center leading-normal\">\u0644\u0627\u062d\u0638 \u0627\u0632\u062f\u064a\u0627\u062f \u0633\u0631\u0639\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646 \u0622\u0644\u064a\u0627\u064b \u0639\u0646\u062f \u0636\u0645 \u0627\u0644\u0630\u0631\u0627\u0639\u064a\u0646 (\u062a\u0642\u0644\u064a\u0644 I)\u060c \u0648\u062a\u0628\u0627\u0637\u0624\u0647\u0627 \u0639\u0646\u062f \u0628\u0633\u0637\u0647\u0645\u0627 (\u0632\u064a\u0627\u062f\u0629 I) \u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u0632\u062e\u0645 \u0627\u0644\u0632\u0627\u0648\u064a \u062b\u0627\u0628\u062a\u0627\u064b.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ==================== RENDER ALL COMPONENTS ====================\r\n const root1 = document.getElementById('rotational-ke-sim-root');\r\n if (root1) ReactDOM.render(<RotationalKineticEnergySimulation \/>, root1);\r\n\r\n const root2 = document.getElementById('angular-momentum-sim-root');\r\n if (root2) ReactDOM.render(<AngularMomentumConservationSimulation \/>, root2);\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-18721","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18721","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=18721"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18721\/revisions"}],"predecessor-version":[{"id":18722,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18721\/revisions\/18722"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}