\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/framer-motion@10.16.4\/dist\/framer-motion.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n 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-container {\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 <\/style>\r\n<\/head>\r\n<body>\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\u0623\u0648\u0644: \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062d\u0627\u062f\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\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0634\u063a\u0644_\u0648\u0627\u0644\u0642\u062f\u0631\u0629_audio-1.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\u0634\u063a\u0644_\u0648\u0627\u0644\u0642\u062f\u0631\u0629_audio-1.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-12 text-right\" dir=\"rtl\">\r\n \r\n <section class=\"relative p-8 bg-gradient-to-br from-indigo-900\/40 to-slate-900\/40 rounded-3xl border border-indigo-500\/20 shadow-2xl overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-32 h-32 bg-indigo-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\"><span class=\"w-3 h-10 bg-indigo-500 rounded-full\"><\/span>\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629 (Work and Power)<\/h2>\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0643\u0644\u0645\u0629 \"\u0634\u063a\u0644\" \u0644\u0648\u0635\u0641 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0623\u0646\u0634\u0637\u0629 \u0627\u0644\u062a\u064a \u0646\u0642\u0648\u0645 \u0628\u0647\u0627\u060c \u0645\u062b\u0644 \u0631\u0641\u0639 \u0627\u0644\u0623\u062b\u0642\u0627\u0644 \u0623\u0648 \u062f\u0641\u0639 \u0639\u0631\u0628\u0629. \u0644\u0643\u0646 \u0641\u064a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621\u060c \u0644\u0644\u0634\u063a\u0644 \u0645\u0639\u0646\u0649 \u0645\u062d\u062f\u062f \u0648\u062f\u0642\u064a\u0642. \u064a\u0631\u062a\u0628\u0637 \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0634\u063a\u0644 \u0628\u062a\u0623\u062b\u064a\u0631 \u0642\u0648\u0629 \u0641\u064a \u062c\u0633\u0645 \u0648\u062a\u062d\u0631\u0643 \u0647\u0630\u0627 \u0627\u0644\u062c\u0633\u0645 \u062a\u062d\u062a \u062a\u0623\u062b\u064a\u0631 \u062a\u0644\u0643 \u0627\u0644\u0642\u0648\u0629. \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0642\u0648\u0629 \u0641\u064a \u062c\u0633\u0645 \u0648\u0623\u062d\u062f\u062b\u062a \u0644\u0647 \u0625\u0632\u0627\u062d\u0629\u060c \u0641\u0625\u0646 \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0629 \u062a\u0643\u0648\u0646 \u0642\u062f \u0628\u0630\u0644\u062a \u0634\u063a\u0644\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u062c\u0633\u0645.<\/p>\r\n <div class=\"mt-4 p-4 bg-indigo-500\/10 rounded-2xl border border-indigo-500\/20\"><h3 class=\"text-lg font-bold text-indigo-300 mb-2\">\u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633\u060c \u0633\u0648\u0641 \u0646\u062a\u0639\u0644\u0645:<\/h3><ul class=\"list-disc list-inside text-slate-300 text-l space-y-2\"><li>\u0643\u064a\u0641 \u0646\u062d\u0633\u0628 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0642\u0648\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0648\u0642\u0648\u0649 \u062b\u0627\u0628\u062a\u0629 \u0645\u062a\u0639\u062f\u062f\u0629\u060c \u0648\u0642\u0648\u0629 \u0645\u062a\u063a\u064a\u0631\u0629.<\/li><li>\u0645\u0627 \u0627\u0644\u0645\u0642\u0635\u0648\u062f \u0628\u0627\u0644\u0642\u062f\u0631\u0629\u060c \u0648\u0643\u064a\u0641 \u0646\u062d\u0633\u0628\u0647\u0627\u060c \u0648\u0623\u0647\u0645\u064a\u062a\u0647\u0627 \u0641\u064a \u0645\u0642\u0627\u0631\u0646\u0629 \u0627\u0644\u0622\u0644\u0627\u062a.<\/li><li>\u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629.<\/li><\/ul><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-8\">\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>\u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0634\u063a\u0644 (Work)<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-blue-400 mb-4\">1. \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0634\u063a\u0644<\/h3><p class=\"text-slate-300 text-l leading-relaxed mb-4\">\u0627\u0644\u0634\u063a\u0644 \u0647\u0648 \u0646\u0627\u062a\u062c \u0627\u0644\u0636\u0631\u0628 \u0627\u0644\u0642\u064a\u0627\u0633\u064a \u0644\u0645\u062a\u062c\u0647 \u0627\u0644\u0642\u0648\u0629 \u0641\u064a \u0645\u062a\u062c\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629. \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0642\u0648\u0629 \u062b\u0627\u0628\u062a\u0629 F \u0641\u064a \u062c\u0633\u0645 \u0648\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u0645 \u0625\u0632\u0627\u062d\u0629 d\u060c \u0641\u0625\u0646 \u0627\u0644\u0634\u063a\u0644 W \u064a\u064f\u0639\u0637\u0649 \u0628\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/p><div class=\"bg-black\/30 p-4 rounded-xl text-center font-mono text-xl text-blue-300 mb-4\">W = F \u00b7 d = F d cos\u03b8<\/div><ul class=\"text-l text-slate-400 space-y-2 list-disc list-inside\"><li><b>F<\/b>: \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 (\u0628\u0648\u062d\u062f\u0629 \u0646\u064a\u0648\u062a\u0646 N)<\/li><li><b>d<\/b>: \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u0628\u0648\u062d\u062f\u0629 \u0645\u062a\u0631 m)<\/li><li><b>\u03b8<\/b>: \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0648\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629.<\/li><\/ul><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-cyan-400 mb-4\">2. \u0648\u062d\u062f\u0629 \u0642\u064a\u0627\u0633 \u0627\u0644\u0634\u063a\u0644<\/h3><p class=\"text-slate-300 text-l leading-relaxed mb-4\">\u0648\u062d\u062f\u0629 \u0627\u0644\u0634\u063a\u0644 \u0641\u064a \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u062f\u0648\u0644\u064a \u0647\u064a <span class=\"text-cyan-300 font-bold\">\u0627\u0644\u062c\u0648\u0644 (Joule)<\/span>\u060c \u0648\u0631\u0645\u0632\u0647 J. \u064a\u0639\u0631\u0651\u0641 \u0627\u0644\u062c\u0648\u0644 \u0628\u0623\u0646\u0647 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0642\u0648\u0629 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 1 \u0646\u064a\u0648\u062a\u0646 \u0639\u0646\u062f\u0645\u0627 \u062a\u0624\u062b\u0631 \u0641\u064a \u062c\u0633\u0645 \u0648\u062a\u062d\u0631\u0643\u0647 \u0625\u0632\u0627\u062d\u0629 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 1 \u0645\u062a\u0631 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0646\u0641\u0633\u0647\u0627.<\/p><div class=\"bg-black\/30 p-4 rounded-xl text-center font-mono text-cyan-300\">1 J = 1 N \u00b7 m<\/div><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"vector-work-sim\" class=\"sim-container\"><\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-emerald-400 mb-6 flex items-center gap-2\"><span class=\"w-1.5 h-6 bg-emerald-500 rounded-full\"><\/span>3. \u062d\u0627\u0644\u0627\u062a \u062e\u0627\u0635\u0629 \u0644\u0644\u0634\u063a\u0644 (\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u0648\u0627\u0644\u0633\u0627\u0644\u0628\u0629)<\/h3><p class=\"text-slate-300 mb-6\">\u064a\u0639\u062a\u0645\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0634\u063a\u0644 \u0648\u0625\u0634\u0627\u0631\u062a\u0647 \u0639\u0644\u0649 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03b8) \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0648\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629:<\/p><div class=\"space-y-6\"><div class=\"bg-black\/30 p-6 rounded-2xl border border-emerald-500\/30 flex flex-col md:flex-row gap-6 items-start\"><div class=\"flex-1 space-y-3\"><h4 class=\"text-emerald-400 font-bold text-lg flex items-center gap-2\"><span class=\"w-8 h-8 rounded-full bg-emerald-500\/20 flex items-center justify-center\">\u0623<\/span>\u0634\u063a\u0644 \u0645\u0648\u062c\u0628 (W > 0)<\/h4><p class=\"text-l text-slate-300 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0647\u0648 \u0646\u0641\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u0623\u0648 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u062d\u0627\u062f\u0629). \u0641\u064a \u062d\u0627\u0644\u0629 \u0643\u0627\u0646 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u0646 \u0645\u062a\u0637\u0627\u0628\u0642\u064a\u0646 \u062a\u0645\u0627\u0645\u0627\u064b (\u03b8 = 0\u00b0)\u060c \u0641\u0625\u0646 cos(0\u00b0) = 1 \u0648\u064a\u0643\u0648\u0646 \u0627\u0644\u0634\u063a\u0644 \u0623\u0643\u0628\u0631 \u0645\u0627 \u064a\u0645\u0643\u0646.<br\/><span class=\"text-emerald-300 mt-1 block\"><b>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/b> \u0627\u0644\u0642\u0648\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u0637\u0627\u0642\u0629 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0648\u062a\u0633\u0631\u0651\u0639\u0647.<\/span><\/p><\/div><div class=\"md:w-1\/3 w-full bg-emerald-900\/20 p-4 rounded-xl border border-emerald-500\/20\"><div class=\"text-emerald-300 text-l font-bold mb-2\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a:<\/div><p class=\"text-l text-slate-300 mb-3\">\u0642\u0648\u0629 \u062f\u0641\u0639 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 50 N \u062a\u062d\u0631\u0643 \u0639\u0631\u0628\u0629 \u0645\u0633\u0627\u0641\u0629 4 m \u0641\u064a \u0646\u0641\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629.<\/p><div class=\"font-mono text-l text-emerald-200 bg-black\/40 p-2 rounded-lg text-center\">W = 50 \u00d7 4 \u00d7 cos(0\u00b0) = +200 J<\/div><\/div><\/div><div class=\"bg-black\/30 p-6 rounded-2xl border border-rose-500\/30 flex flex-col md:flex-row gap-6 items-start\"><div class=\"flex-1 space-y-3\"><h4 class=\"text-rose-400 font-bold text-lg flex items-center gap-2\"><span class=\"w-8 h-8 rounded-full bg-rose-500\/20 flex items-center justify-center\">\u0628<\/span>\u0634\u063a\u0644 \u0633\u0627\u0644\u0628 (W < 0)<\/h4><p class=\"text-l text-slate-300 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u0623\u0648 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0645\u0646\u0641\u0631\u062c\u0629). \u0641\u064a \u062d\u0627\u0644\u0629 \u0643\u0627\u0646 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u0646 \u0645\u062a\u0639\u0627\u0643\u0633\u064a\u0646 \u062a\u0645\u0627\u0645\u0627\u064b (\u03b8 = 180\u00b0)\u060c \u0641\u0625\u0646 cos(180\u00b0) = -1.<br\/><span class=\"text-rose-300 mt-1 block\"><b>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/b> \u0627\u0644\u0642\u0648\u0629 \u062a\u0642\u0644\u0644 \u0645\u0646 \u0637\u0627\u0642\u0629 \u0627\u0644\u062c\u0633\u0645\u060c \u0643\u0645\u0627 \u0641\u064a \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643.<\/span><\/p><\/div><div class=\"md:w-1\/3 w-full bg-rose-900\/20 p-4 rounded-xl border border-rose-500\/20\"><div class=\"text-rose-300 text-l font-bold mb-2\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a:<\/div><p class=\"text-l text-slate-300 mb-3\">\u0642\u0648\u0629 \u0627\u062d\u062a\u0643\u0627\u0643 15 N \u062a\u0624\u062b\u0631 \u0639\u0644\u0649 \u0635\u0646\u062f\u0648\u0642 \u0623\u062b\u0646\u0627\u0621 \u0627\u0646\u0632\u0644\u0627\u0642\u0647 \u0645\u0633\u0627\u0641\u0629 2 m \u0644\u062a\u0628\u0637\u0626\u0647.<\/p><div class=\"font-mono text-l text-rose-200 bg-black\/40 p-2 rounded-lg text-center\">W = 15 \u00d7 2 \u00d7 cos(180\u00b0) = -30 J<\/div><\/div><\/div><div class=\"bg-black\/30 p-6 rounded-2xl border border-slate-500\/40 flex flex-col md:flex-row gap-6 items-start\"><div class=\"flex-1 space-y-3\"><h4 class=\"text-slate-300 font-bold text-lg flex items-center gap-2\"><span class=\"w-8 h-8 rounded-full bg-slate-500\/20 flex items-center justify-center\">\u062c\u0640<\/span>\u0627\u0644\u0634\u063a\u0644 \u0635\u0641\u0631 (W = 0)<\/h4><p class=\"text-l text-slate-400 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u0645\u0627\u0645\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u03b8 = 90\u00b0)\u060c \u0641\u0625\u0646 cos(90\u00b0) = 0.<br\/><span class=\"text-slate-300 mt-1 block\"><b>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/b> \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0629 \u0644\u0627 \u062a\u063a\u064a\u0631 \u0645\u0646 \u0645\u0642\u062f\u0627\u0631 \u0633\u0631\u0639\u0629 \u0627\u0644\u062c\u0633\u0645\u060c \u0643\u0645\u0627 \u0641\u064a \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629 \u0623\u0648 \u0642\u0648\u0629 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0644\u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0623\u0641\u0642\u064a\u0627\u064b.<\/span><\/p><\/div><div class=\"md:w-1\/3 w-full bg-slate-800\/50 p-4 rounded-xl border border-slate-600\/50\"><div class=\"text-slate-300 text-l font-bold mb-2\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a:<\/div><p class=\"text-l text-slate-400 mb-3\">\u0646\u0627\u062f\u0644 \u064a\u062d\u0645\u0644 \u0635\u064a\u0646\u064a\u0629 \u0628\u0648\u0632\u0646 30 N \u0648\u064a\u0645\u0634\u064a \u0628\u0647\u0627 \u0645\u0633\u0627\u0641\u0629 5 m \u0628\u062e\u0637 \u0623\u0641\u0642\u064a \u0645\u0633\u062a\u0642\u064a\u0645.<\/p><div class=\"font-mono text-l text-slate-200 bg-black\/40 p-2 rounded-lg text-center\">W = 30 \u00d7 5 \u00d7 cos(90\u00b0) = 0 J<\/div><\/div><\/div><\/div><\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-amber-400 mb-6 flex items-center gap-2\"><span class=\"w-1.5 h-6 bg-amber-500 rounded-full\"><\/span>4. \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0639\u062f\u0629 \u0642\u0648\u0649 \u062b\u0627\u0628\u062a\u0629<\/h3><p class=\"text-slate-300 text-base leading-relaxed mb-6\">\u0639\u0646\u062f\u0645\u0627 \u062a\u0624\u062b\u0631 \u0639\u062f\u0629 \u0642\u0648\u0649 \u062b\u0627\u0628\u062a\u0629 \u0639\u0644\u0649 \u062c\u0633\u0645 \u0645\u0627\u060c \u0641\u0625\u0646 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u0645\u0628\u0630\u0648\u0644 \u064a\u064f\u062d\u0633\u0628 \u0628\u0625\u062d\u062f\u0649 \u0627\u0644\u0637\u0631\u064a\u0642\u062a\u064a\u0646: 1- \u0625\u064a\u062c\u0627\u062f \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0643\u0644 \u0642\u0648\u0629 \u0639\u0644\u0649 \u062d\u062f\u0629 \u062b\u0645 \u062c\u0645\u0639\u0647\u0627 \u062c\u0645\u0639\u0627\u064b \u062c\u0628\u0631\u064a\u0627\u064b. 2- \u0625\u064a\u062c\u0627\u062f \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u062b\u0645 \u062d\u0633\u0627\u0628 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647.<\/p><div class=\"bg-black\/30 p-4 rounded-xl text-center font-mono text-amber-300 text-lg mb-8 max-w-2xl mx-auto border border-amber-500\/20 shadow-md\">W<sub>Total<\/sub> = W<sub>1<\/sub> + W<sub>2<\/sub> + ... = \u03a3 ( F<sub>i<\/sub> d cos\u03b8<sub>i<\/sub> )<\/div><div class=\"grid grid-cols-1 gap-6\"><div class=\"bg-amber-900\/20 p-6 rounded-2xl border border-amber-500\/20 flex flex-col lg:flex-row gap-6 items-center\"><div class=\"flex-1\"><div class=\"text-amber-400 font-bold mb-3 text-lg\">\u0645\u062b\u0627\u0644 1: \u0633\u062d\u0628 \u0635\u0646\u062f\u0648\u0642 \u0628\u0634\u0643\u0644 \u0623\u0641\u0642\u064a<\/div><p class=\"text-l text-slate-300 mb-6 leading-relaxed\">\u0635\u0646\u062f\u0648\u0642 \u064a\u064f\u0633\u062d\u0628 \u0628\u0642\u0648\u0629 100 N \u0644\u0644\u064a\u0645\u064a\u0646\u060c \u0648\u064a\u062a\u0639\u0631\u0636 \u0644\u0642\u0648\u0629 \u0627\u062d\u062a\u0643\u0627\u0643 30 N \u0644\u0644\u064a\u0633\u0627\u0631\u060c \u0641\u062a\u062d\u0631\u0643 5 m. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u0645\u0628\u0630\u0648\u0644\u061f<\/p><ul class=\"text-l text-slate-400 space-y-3 font-mono list-none mb-6 border-r-4 border-amber-500\/30 pr-4\"><li>W<sub>pull<\/sub> = 100 \u00d7 5 \u00d7 cos(0\u00b0) = +500 J<\/li><li>W<sub>fric<\/sub> = 30 \u00d7 5 \u00d7 cos(180\u00b0) = -150 J<\/li><\/ul><div class=\"font-mono text-base shadow-l text-white bg-black\/40 p-4 rounded-xl text-center border border-amber-500\/10\">W<sub>Total<\/sub> = 500 - 150 = <span class=\"text-amber-400 font-bold text-lg\">+350 J<\/span><\/div><\/div><div class=\"lg:w-1\/3 w-full bg-black\/20 rounded-xl flex justify-center py-6 border border-amber-500\/10 h-48 items-center relative overflow-hidden\"><div class=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]\"><\/div><svg width=\"240\" height=\"120\" viewBox=\"0 0 240 120\" class=\"mx-auto block overflow-visible relative z-10 drop-shadow-md\"><defs><marker id=\"arr-pull\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#38bdf8\" \/><\/marker><marker id=\"arr-fric\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#f43f5e\" \/><\/marker><marker id=\"arr-disp\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#10b981\" \/><\/marker><filter id=\"glow\"><feGaussianBlur stdDeviation=\"2\" result=\"coloredBlur\"\/><feMerge><feMergeNode in=\"coloredBlur\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge><\/filter><\/defs><line x1=\"10\" y1=\"85\" x2=\"230\" y2=\"85\" stroke=\"#475569\" strokeWidth=\"3\" strokeLinecap=\"round\" \/><rect x=\"95\" y=\"35\" width=\"50\" height=\"50\" fill=\"#334155\" stroke=\"#cbd5e1\" strokeWidth=\"2\" rx=\"4\" \/><rect x=\"100\" y=\"40\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"#64748b\" strokeWidth=\"1\" rx=\"2\" strokeDasharray=\"2 2\" \/><line x1=\"145\" y1=\"60\" x2=\"210\" y2=\"60\" stroke=\"#38bdf8\" strokeWidth=\"4\" markerEnd=\"url(#arr-pull)\" filter=\"url(#glow)\" \/><text x=\"180\" y=\"45\" fill=\"#38bdf8\" fontSize=\"13\" textAnchor=\"middle\" fontWeight=\"bold\">F = 100N<\/text><line x1=\"95\" y1=\"80\" x2=\"40\" y2=\"80\" stroke=\"#f43f5e\" strokeWidth=\"4\" markerEnd=\"url(#arr-fric)\" filter=\"url(#glow)\" \/><text x=\"65\" y=\"65\" fill=\"#f43f5e\" fontSize=\"13\" textAnchor=\"middle\" fontWeight=\"bold\">f = 30N<\/text><path d=\"M 95 105 L 180 105\" stroke=\"#10b981\" strokeWidth=\"2\" markerEnd=\"url(#arr-disp)\" strokeDasharray=\"4 4\" fill=\"none\" \/><text x=\"137\" y=\"118\" fill=\"#10b981\" fontSize=\"12\" textAnchor=\"middle\" fontWeight=\"bold\">\u0394x = 5m<\/text><\/svg><\/div><\/div><div class=\"bg-amber-900\/20 p-6 rounded-2xl border border-amber-500\/20 flex flex-col lg:flex-row gap-6 items-center\"><div class=\"flex-1\"><div class=\"text-amber-400 font-bold mb-3 text-lg\">\u0645\u062b\u0627\u0644 2: \u0631\u0641\u0639 \u062c\u0633\u0645 \u0644\u0644\u0623\u0639\u0644\u0649 \u0628\u0633\u0631\u0639\u0629 \u0645\u0646\u062a\u0638\u0645\u0629<\/div><p class=\"text-l text-slate-300 mb-6 leading-relaxed\">\u064a\u064e\u0631\u0641\u0639 \u0639\u0627\u0645\u0644 \u0643\u064a\u0633 \u0631\u0645\u0644 \u0648\u0632\u0646\u0647 200 N \u0645\u0633\u0627\u0641\u0629 3 m \u0644\u0644\u0623\u0639\u0644\u0649 \u0628\u0635\u0648\u0631\u0629 \u0628\u0637\u064a\u0626\u0629 (\u0627\u0644\u0633\u0631\u0639\u0629 \u0645\u0646\u062a\u0638\u0645\u0629\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0642\u0648\u0629 \u0627\u0644\u0631\u0641\u0639 \u0645\u0633\u0627\u0648\u064a\u0629 \u0644\u0644\u0648\u0632\u0646 \u062a\u0645\u0627\u0645\u0627\u064b).<\/p><ul class=\"text-l text-slate-400 space-y-3 font-mono list-none mb-6 border-r-4 border-amber-500\/30 pr-4\"><li>W<sub>lift<\/sub> = 200 \u00d7 3 \u00d7 cos(0\u00b0) = +600 J <span class=\"text-slate-500\">(\u0634\u063a\u0644 \u0627\u0644\u0639\u0627\u0645\u0644)<\/span><\/li><li>W<sub>grav<\/sub> = 200 \u00d7 3 \u00d7 cos(180\u00b0) = -600 J <span class=\"text-slate-500\">(\u0634\u063a\u0644 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629)<\/span><\/li><\/ul><div class=\"font-mono text-base shadow-l text-white bg-black\/40 p-4 rounded-xl text-center border border-amber-500\/10\">W<sub>Total<\/sub> = 600 - 600 = <span class=\"text-slate-400 font-bold text-lg\">0 J<\/span><\/div><\/div><div class=\"lg:w-1\/3 w-full bg-black\/20 rounded-xl flex justify-center py-6 border border-amber-500\/10 h-48 items-center relative overflow-hidden\"><div class=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]\"><\/div><svg width=\"200\" height=\"160\" viewBox=\"0 0 200 160\" class=\"mx-auto block overflow-visible relative z-10 drop-shadow-md\"><defs><marker id=\"arr-lift\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#38bdf8\" \/><\/marker><marker id=\"arr-grav\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#f43f5e\" \/><\/marker><marker id=\"arr-disp-up\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#10b981\" \/><\/marker><filter id=\"glow-up\"><feGaussianBlur stdDeviation=\"2\" result=\"coloredBlur\"\/><feMerge><feMergeNode in=\"coloredBlur\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge><\/filter><\/defs><line x1=\"60\" y1=\"140\" x2=\"140\" y2=\"140\" stroke=\"#475569\" strokeWidth=\"2\" strokeDasharray=\"4 2\" \/><rect x=\"80\" y=\"60\" width=\"40\" height=\"40\" fill=\"#a16207\" stroke=\"#fef3c7\" strokeWidth=\"2\" rx=\"4\" \/><path d=\"M 85 70 Q 100 80 115 70 M 85 80 Q 100 90 115 80\" stroke=\"#713f12\" strokeWidth=\"1\" fill=\"none\" \/><line x1=\"100\" y1=\"60\" x2=\"100\" y2=\"15\" stroke=\"#38bdf8\" strokeWidth=\"4\" markerEnd=\"url(#arr-lift)\" filter=\"url(#glow-up)\" \/><text x=\"110\" y=\"30\" fill=\"#38bdf8\" fontSize=\"13\" fontWeight=\"bold\">F = 200N<\/text><line x1=\"100\" y1=\"100\" x2=\"100\" y2=\"145\" stroke=\"#f43f5e\" strokeWidth=\"4\" markerEnd=\"url(#arr-grav)\" filter=\"url(#glow-up)\" \/><text x=\"110\" y=\"130\" fill=\"#f43f5e\" fontSize=\"13\" fontWeight=\"bold\">mg = 200N<\/text><path d=\"M 50 110 L 50 40\" stroke=\"#10b981\" strokeWidth=\"3\" markerEnd=\"url(#arr-disp-up)\" strokeDasharray=\"4 4\" fill=\"none\" \/><text x=\"40\" y=\"75\" fill=\"#10b981\" fontSize=\"13\" textAnchor=\"end\" fontWeight=\"bold\">\u0394y = 3m<\/text><\/svg><\/div><\/div><\/div><\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner flex flex-col pt-10\"><h3 class=\"text-xl font-bold text-orange-400 mb-6 flex items-center gap-2 border-b border-orange-500\/20 pb-4\"><span class=\"w-1.5 h-6 bg-orange-500 rounded-full\"><\/span>5. \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0642\u0648\u0629 \u0645\u062a\u063a\u064a\u0631\u0629<\/h3><p class=\"text-slate-300 text-base leading-relaxed mb-8 bg-slate-900\/30 p-4 rounded-xl border-r-4 border-orange-500\/50\">\u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u063a\u064a\u0631 \u0627\u0644\u0642\u0648\u0629 \u0623\u062b\u0646\u0627\u0621 \u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0633\u0645 (\u0645\u062b\u0644 \u0642\u0648\u0629 \u0627\u0644\u0646\u0627\u0628\u0636)\u060c \u0644\u0627 \u064a\u0645\u0643\u0646\u0646\u0627 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0645\u0628\u0627\u0634\u0631 W = F \u00b7 d. \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0630\u0644\u0643\u060c \u064a\u064f\u062d\u0633\u0628 \u0627\u0644\u0634\u063a\u0644 \u0628\u064a\u0627\u0646\u064a\u0627\u064b: \u062d\u064a\u062b <b>\u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0628\u0630\u0648\u0644 \u064a\u0633\u0627\u0648\u064a \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0645\u0646\u062d\u0646\u0649 (\u0627\u0644\u0642\u0648\u0629 - \u0627\u0644\u0625\u0632\u0627\u062d\u0629) \u0648\u0645\u062d\u0648\u0631 \u0627\u0644\u0625\u0632\u0627\u062d\u0629<\/b>.<\/p>\r\n \r\n <div id=\"variable-force-sim\" class=\"sim-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-8\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-purple-500 rounded-full\"><\/span>\u062b\u0627\u0646\u064a\u0627\u064b: \u0627\u0644\u0642\u062f\u0631\u0629 (Power)<\/h2>\r\n <div class=\"space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner flex items-start gap-4 h-full\"><div class=\"p-3 bg-purple-500\/10 rounded-xl text-purple-400 shrink-0\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2v10\"\/><path d=\"M18.4 4.6a10 10 0 1 1-12.8 0\"\/><\/svg><\/div><div><h3 class=\"text-lg font-bold text-white mb-1\">\u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0642\u062f\u0631\u0629<\/h3><p class=\"text-slate-400 text-l leading-relaxed\">\u0647\u064a \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u0628\u0630\u0644 \u0627\u0644\u0634\u063a\u0644\u060c \u0648\u0647\u064a \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u062e\u0628\u0631\u0646\u0627 \u0628\u0645\u062f\u0649 \u0633\u0631\u0639\u0629 \u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u0639\u0645\u0644 \u0623\u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0645\u0646 \u0634\u0643\u0644 \u0644\u0622\u062e\u0631 \u062e\u0644\u0627\u0644 \u0641\u062a\u0631\u0629 \u0632\u0645\u0646\u064a\u0629 \u0645\u062d\u062f\u062f\u0629.<\/p><\/div><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner flex items-start gap-4 h-full\"><div class=\"p-3 bg-purple-500\/10 rounded-xl text-purple-400 shrink-0\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/div><div><h3 class=\"text-lg font-bold text-white mb-1\">\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0642\u064a\u0627\u0633<\/h3><p class=\"text-slate-400 text-l leading-relaxed\">\u062a\u0642\u0627\u0633 \u0628\u0640 <span class=\"text-purple-300 font-bold\">\u0627\u0644\u0648\u0627\u0637 (Watt = J\/s)<\/span> \u062f\u0648\u0644\u064a\u0627\u064b. \u0643\u0645\u0627 \u064a\u0634\u064a\u0639 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <span class=\"text-purple-300 font-bold\">\u0627\u0644\u062d\u0635\u0627\u0646 (hp)<\/span> \u0641\u064a \u0627\u0644\u0645\u062d\u0631\u0643\u0627\u062a\u060c \u062d\u064a\u062b 1 hp = 746 Watt.<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-purple-900\/20 to-slate-900\/40 p-8 rounded-3xl border border-purple-500\/20 shadow-2xl relative overflow-hidden group\"><div class=\"absolute -right-24 -top-24 w-64 h-64 bg-purple-500\/5 blur-3xl rounded-full group-hover:bg-purple-500\/10 transition-colors duration-700\"><\/div><div class=\"flex flex-col lg:flex-row gap-8 items-start relative z-10\"><div class=\"flex-1\"><div class=\"flex items-center gap-3 mb-6\"><span class=\"w-10 h-10 bg-purple-500\/20 rounded-full flex items-center justify-center text-purple-400 font-bold border border-purple-500\/30\">1<\/span><h4 class=\"text-2xl font-black text-white tracking-tight\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629 (Average Power)<\/h4><\/div><div class=\"space-y-4 text-slate-300\"><p class=\"leading-relaxed\">\u062a\u0645\u062b\u0644 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0628\u0630\u0648\u0644 \u0645\u0642\u0633\u0648\u0645\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0632\u0645\u0646\u064a\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u063a\u0631\u0642\u0629. \u0648\u0647\u064a \u062a\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0643\u0644\u064a \u0644\u0644\u0646\u0638\u0627\u0645 \u062f\u0648\u0646 \u0627\u0644\u062f\u062e\u0648\u0644 \u0641\u064a \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0633\u0631\u0639\u0629 \u0639\u0646\u062f \u0643\u0644 \u0644\u062d\u0638\u0629.<\/p><div class=\"bg-black\/50 p-6 rounded-2xl border border-purple-500\/20 shadow-inner backdrop-blur-l relative\"><div class=\"absolute top-2 left-4 text-[10px] text-purple-500\/50 font-mono uppercase tracking-widest\">Mathematical Formula<\/div><div class=\"text-center py-4\"><span class=\"text-3xl font-mono text-white tracking-tighter\">P<sub>avg<\/sub> = <span class=\"text-purple-400\">W<\/span> \/ <span class=\"text-purple-400\">\u0394t<\/span><\/span><\/div><div class=\"grid grid-cols-2 gap-4 mt-2 pt-4 border-t border-white\/5 text-[11px] text-slate-500 text-center\"><div>W: \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0643\u0644\u064a (J)<\/div><div>t: \u0627\u0644\u0632\u0645\u0646 \u0627\u0644\u0643\u0644\u064a (s)<\/div><\/div><\/div><\/div><\/div><div class=\"lg:w-80 w-full flex flex-col gap-4 shrink-0\"><div class=\"bg-slate-900\/40 p-5 rounded-2xl border border-white\/5\"><h5 class=\"text-purple-300 text-l font-bold mb-3 uppercase tracking-tighter\">\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0645\u0644\u064a<\/h5><p class=\"text-l text-slate-400 leading-normal\">\u0645\u062b\u0627\u0644\u064a\u0629 \u0644\u062a\u0642\u064a\u064a\u0645 \u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u0623\u0648\u0646\u0627\u0634 \u0648\u0627\u0644\u0645\u0635\u0627\u0639\u062f \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0639\u0646\u062f \u0646\u0642\u0644 \u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0645\u0646 \u0627\u0644\u0637\u0627\u0628\u0642 \u0627\u0644\u0623\u0631\u0636\u064a \u0625\u0644\u0649 \u0627\u0644\u0637\u0648\u0627\u0628\u0642 \u0627\u0644\u0639\u0644\u064a\u0627 \u062e\u0644\u0627\u0644 \u0631\u062d\u0644\u0629 \u0643\u0627\u0645\u0644\u0629.<\/p><\/div><div class=\"bg-purple-500\/10 p-5 rounded-2xl border border-purple-500\/20\"><div class=\"flex items-center gap-2 mb-2 text-white text-l font-bold\"><span><\/span><span>\u062a\u0630\u0643\u0651\u0631:<\/span><\/div><p class=\"text-l text-purple-200\/70 italic\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629 \u0644\u0627 \u062a\u0635\u0641 \u0627\u0644\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u0641\u0627\u062c\u0626\u0629 \u0641\u064a \u0627\u0644\u0642\u0648\u0629 \u0623\u0648 \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u0628\u0644 \u062a\u0639\u0637\u064a \"\u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629\" \u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0625\u0646\u062c\u0627\u0632.<\/p><\/div><\/div><\/div><\/div>\r\n <div class=\"bg-gradient-to-br from-blue-900\/20 to-slate-900\/40 p-8 rounded-3xl border border-blue-500\/20 shadow-2xl relative overflow-hidden group\"><div class=\"absolute -left-24 -bottom-24 w-64 h-64 bg-blue-500\/5 blur-3xl rounded-full group-hover:bg-blue-500\/10 transition-colors duration-700\"><\/div><div class=\"flex flex-col lg:flex-row gap-8 items-start relative z-10\"><div class=\"flex-1\"><div class=\"flex items-center gap-3 mb-6\"><span class=\"w-10 h-10 bg-blue-500\/20 rounded-full flex items-center justify-center text-blue-400 font-bold border border-blue-500\/30\">2<\/span><h4 class=\"text-2xl font-black text-white tracking-tight\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 (Instantaneous Power)<\/h4><\/div><div class=\"space-y-4 text-slate-300\"><p class=\"leading-relaxed\">\u0647\u064a \u0642\u062f\u0631\u0629 \u0627\u0644\u0646\u0638\u0627\u0645 \u0639\u0646\u062f \u0644\u062d\u0638\u0629 \u0632\u0645\u0646\u064a\u0629 \u0645\u0639\u064a\u0646\u0629. \u0648\u0644\u0623\u0646 \u0627\u0644\u0634\u063a\u0644 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u0641\u0625\u0646 \u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 \u0647\u064a \u0627\u0644\u0636\u0631\u0628 \u0627\u0644\u0646\u0642\u0637\u064a \u0644\u0645\u062a\u062c\u0647 \u0627\u0644\u0642\u0648\u0629 \u0641\u064a \u0645\u062a\u062c\u0647 \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 \u0644\u0644\u062c\u0633\u0645.<\/p><div class=\"bg-black\/50 p-6 rounded-2xl border border-blue-500\/20 shadow-inner backdrop-blur-l relative\"><div class=\"absolute top-2 left-4 text-[10px] text-blue-500\/50 font-mono uppercase tracking-widest\">Dynamic Relation<\/div><div class=\"text-center py-4\"><span class=\"text-3xl font-mono text-white tracking-tighter\">P = <span class=\"text-blue-400\">F<\/span> \u00b7 <span class=\"text-blue-400\">v<\/span> \u00b7 cos\u03b8<\/span><\/div><div class=\"grid grid-cols-2 gap-4 mt-2 pt-4 border-t border-white\/5 text-[11px] text-slate-500 text-center\"><div>F: \u0627\u0644\u0642\u0648\u0629 (N)<\/div><div>v: \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 (m\/s)<\/div><\/div><\/div><\/div><\/div><div class=\"lg:w-80 w-full flex flex-col gap-4 shrink-0\"><div class=\"bg-slate-900\/40 p-5 rounded-2xl border border-white\/5\"><h5 class=\"text-blue-300 text-l font-bold mb-3 uppercase tracking-tighter\">\u062d\u0627\u0644\u0629 \u062e\u0627\u0635\u0629<\/h5><p class=\"text-l text-slate-400 leading-normal\">\u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0633\u0631\u0639\u0629 \u062a\u0645\u0627\u0645\u0627\u064b (\u03b8 = 0)\u060c \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u062f\u0631\u0629 \u0641\u064a \u0623\u0642\u0635\u0649 \u0642\u064a\u0645\u062a\u0647\u0627 \u0648\u062a\u0633\u0627\u0648\u064a \u0628\u0628\u0633\u0627\u0637\u0629 P = Fv.<\/p><\/div><div class=\"bg-blue-500\/10 p-5 rounded-2xl border border-blue-500\/20\"><div class=\"flex items-center gap-2 mb-2 text-white text-l font-bold\"><span><\/span><span>\u0645\u062b\u0627\u0644:<\/span><\/div><p class=\"text-l text-blue-200\/70 italic\">\u0639\u062f\u0627\u062f \u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062d\u0631\u0643 \u0641\u064a \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u064a\u0638\u0647\u0631 \u0644\u0643 \u0627\u0644\u0642\u062f\u0631\u0629 \"\u0627\u0644\u0644\u062d\u0638\u064a\u0629\" \u0627\u0644\u062a\u064a \u064a\u0648\u0644\u062f\u0647\u0627 \u0627\u0644\u0645\u062d\u0631\u0643 \u0639\u0646\u062f \u0643\u0644 \u0636\u063a\u0637\u0629 \u0639\u0644\u0649 \u0627\u0644\u0648\u0642\u0648\u062f.<\/p><\/div><\/div><\/div><\/div>\r\n\r\n \r\n <div class=\"bg-slate-900 border border-slate-700\/50 rounded-3xl p-1 overflow-hidden shadow-2xl\"><div class=\"bg-slate-800\/50 p-4 border-b border-white\/5 text-center\"><span class=\"text-[10px] text-purple-400 font-bold uppercase tracking-[0.3em]\">Interactive Simulation \/ \u0645\u062e\u062a\u0628\u0631 \u0627\u0644\u0642\u062f\u0631\u0629<\/span><\/div><div id=\"power-sim\" class=\"sim-container\"><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\"><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>\u0623\u0645\u062b\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/h2><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\"><div class=\"bg-slate-900\/60 p-6 rounded-2xl border border-amber-500\/20\"><h4 class=\"text-amber-400 font-bold mb-3 text-l flex justify-between\"><span>\u0645\u062b\u0627\u0644 1: \u0627\u0644\u0634\u063a\u0644 \u0644\u0642\u0648\u0629 \u062b\u0627\u0628\u062a\u0629<\/span><span class=\"text-l bg-amber-500\/10 px-2 py-1 rounded text-amber-300\">\u0635\u0641\u062d\u0629 13<\/span><\/h4><p class=\"text-l text-slate-300 mb-4 leading-relaxed\">\u064a\u0633\u062d\u0628 \u0645\u062d\u0645\u062f \u0635\u0646\u062f\u0648\u0642\u0627\u064b (20 kg) \u0645\u0633\u0627\u0641\u0629 5 m \u0628\u062d\u0628\u0644 \u064a\u0645\u064a\u0644 37\u00b0. \u0642\u0648\u0629 \u0627\u0644\u0634\u062f 140 N.<\/p><div class=\"space-y-2 font-mono text-l text-slate-300\"><p><span class=\"text-amber-500\">W<sub>F<\/sub><\/span> = F d cos(37\u00b0)<\/p><p><span class=\"text-amber-500\">W<sub>F<\/sub><\/span> = 140 \u00d7 5 \u00d7 0.8 = <span class=\"bg-amber-500\/20 px-1 rounded text-white\">560 J<\/span><\/p><p class=\"text-[10px] text-slate-400 mt-2 font-sans border-t border-white\/5 pt-2\">\u0634\u063a\u0644 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 W<sub>g<\/sub> = 0 \u0644\u0623\u0646 \u03b8 = 90\u00b0<\/p><\/div><\/div><div class=\"bg-slate-900\/60 p-6 rounded-2xl border border-amber-500\/20\"><h4 class=\"text-amber-400 font-bold mb-3 text-l flex justify-between\"><span>\u062a\u062f\u0631\u064a\u0628 1: \u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629<\/span><span class=\"text-l bg-amber-500\/10 px-2 py-1 rounded text-amber-300\">\u0635\u0641\u062d\u0629 22<\/span><\/h4><p class=\"text-l text-slate-300 mb-4 leading-relaxed\">\u0633\u064a\u0627\u0631\u0629 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 25 m\/s. \u0645\u062c\u0645\u0648\u0639 \u0642\u0648\u0649 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 2000 N.<\/p><div class=\"space-y-2 font-mono text-l text-slate-300\"><p class=\"text-[10px] font-sans text-slate-400 mb-2\">\u0628\u0645\u0627 \u0623\u0646 \u0627\u0644\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0627\u0644\u0642\u0648\u0629 = \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 = 2000 N<\/p><p><span class=\"text-amber-500\">P<\/span> = F \u00d7 v<\/p><p><span class=\"text-amber-500\">P<\/span> = 2000 \u00d7 25 = <span class=\"bg-amber-500\/20 px-1 rounded text-white\">50 kW<\/span><\/p><\/div><\/div><\/div><\/section>\r\n\r\n \r\n <section class=\"bg-gradient-to-r from-emerald-900\/40 to-teal-900\/40 p-8 rounded-3xl border border-emerald-500\/30\"><h3 class=\"text-xl font-bold text-white mb-6\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h3><div class=\"overflow-x-auto\"><table class=\"w-full text-l text-right\"><thead><tr class=\"text-emerald-300 border-b border-emerald-500\/30\"><th class=\"py-2 px-4\">\u0627\u0644\u0645\u0641\u0647\u0648\u0645<\/th><th class=\"py-2 px-4\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629<\/th><th class=\"py-2 px-4\">\u0627\u0644\u0648\u062d\u062f\u0629<\/th><\/tr><\/thead><tbody class=\"text-slate-300 divide-y divide-emerald-500\/10\"><tr><td class=\"py-3 px-4 font-bold text-white\">\u0627\u0644\u0634\u063a\u0644 (\u062b\u0627\u0628\u062a\u0629)<\/td><td class=\"py-3 px-4 font-mono text-emerald-200\">W = F d cos\u03b8<\/span><\/td><td class=\"py-3 px-4\">\u062c\u0648\u0644 (J)<\/td><\/tr>\r\n <tr><td class=\"py-3 px-4 font-bold text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629<\/span><\/td><td class=\"py-3 px-4 font-mono text-emerald-200\">P = W \/ \u0394t<\/span><\/td><td class=\"py-3 px-4\">\u0648\u0627\u0637 (W)<\/td><\/tr>\r\n <tr><td class=\"py-3 px-4 font-bold text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629<\/span><\/td><td class=\"py-3 px-4 font-mono text-emerald-200\">P = F v cos\u03b8<\/span><\/td><td class=\"py-3 px-4\">\u0648\u0627\u0637 (W)<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div class=\"mt-6 pt-4 border-t border-emerald-500\/20 text-l text-emerald-100\/70\"><b>\u0645\u0644\u0627\u062d\u0638\u0629 \u0647\u0627\u0645\u0629:<\/b> \u0627\u0644\u0634\u063a\u0644 \u0643\u0645\u064a\u0629 \u0642\u064a\u0627\u0633\u064a\u0629 (\u0644\u064a\u0633 \u0644\u0647\u0627 \u0627\u062a\u062c\u0627\u0647)\u060c \u0648\u0644\u0643\u0646\u0647 \u0642\u062f \u064a\u0643\u0648\u0646 \u0645\u0648\u062c\u0628\u0627\u064b (\u064a\u0643\u0633\u0628 \u0637\u0627\u0642\u0629) \u0623\u0648 \u0633\u0627\u0644\u0628\u0627\u064b (\u064a\u0641\u0642\u062f \u0637\u0627\u0642\u0629).<\/div>\r\n <\/section>\r\n<\/div>\r\n <\/div>\r\n\r\n <script type=\"text\/babel\">\r\n \/\/ ------------------------------\r\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062a\u062c\u0647\u064a \u0644\u0644\u0634\u063a\u0644 (WorkVectorSimulation)\r\n \/\/ ------------------------------\r\n const WorkVectorSimulation = () => {\r\n const [force, setForce] = React.useState(50);\r\n const [angle, setAngle] = React.useState(30);\r\n const [displacement, setDisplacement] = React.useState(5);\r\n\r\n const angleRad = (angle * Math.PI) \/ 180;\r\n const Fx = force * Math.cos(angleRad);\r\n const Fy = force * Math.sin(angleRad);\r\n const work = Fx * displacement;\r\n\r\n \/\/ SVG coordinate system\r\n const width = 600;\r\n const height = 300;\r\n const originX = 150;\r\n const originY = 220;\r\n\r\n \/\/ Scaling\r\n const scaleF = 2; \/\/ N to pixels\r\n const scaleD = 40; \/\/ m to pixels\r\n\r\n const endX_F = originX + Fx * scaleF;\r\n const endY_F = originY - Fy * scaleF;\r\n const endX_d = originX + displacement * scaleD;\r\n\r\n \/\/ Generate path for the angle arc\r\n const radiusArc = 40;\r\n const arcX = originX + radiusArc * Math.cos(angleRad);\r\n const arcY = originY - radiusArc * Math.sin(angleRad);\r\n const arcLargeFlag = angle > 180 ? 1 : 0;\r\n const arcPath = `M ${originX + radiusArc} ${originY} A ${radiusArc} ${radiusArc} 0 ${arcLargeFlag} 0 ${arcX} ${arcY}`;\r\n\r\n return (\r\n <div className=\"bg-slate-800\/80 p-6 rounded-2xl border border-slate-700 shadow-xl max-w-4xl mx-auto flex flex-col gap-6\" dir=\"rtl\">\r\n <h3 className=\"text-xl font-bold text-white mb-2 flex items-center gap-2\">\r\n <span className=\"w-2 h-6 bg-indigo-500 rounded-full inline-block\"><\/span>\r\n \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062a\u062c\u0647\u064a \u0644\u0644\u0634\u063a\u0644\r\n <\/h3>\r\n \r\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n {\/* Controls & Data *\/}\r\n <div className=\"lg:col-span-1 space-y-6 bg-slate-900\/50 p-5 rounded-xl border border-slate-700\/50\">\r\n <div className=\"space-y-3\">\r\n <label className=\"flex justify-between text-l font-semibold text-indigo-300\">\r\n <span>\u0627\u0644\u0642\u0648\u0629 (F)<\/span>\r\n <span className=\"tabular-nums\">{force} N<\/span>\r\n <\/label>\r\n <input type=\"range\" min=\"0\" max=\"100\" step=\"1\" value={force} onChange={(e) => setForce(Number(e.target.value))} className=\"w-full accent-indigo-500\" \/>\r\n <\/div>\r\n <div className=\"space-y-3\">\r\n <label className=\"flex justify-between text-l font-semibold text-rose-300\">\r\n <span>\u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03b8)<\/span>\r\n <span className=\"tabular-nums\">{angle}\u00b0<\/span>\r\n <\/label>\r\n <input type=\"range\" min=\"0\" max=\"180\" step=\"1\" value={angle} onChange={(e) => setAngle(Number(e.target.value))} className=\"w-full accent-rose-500\" \/>\r\n <\/div>\r\n <div className=\"space-y-3\">\r\n <label className=\"flex justify-between text-l font-semibold text-emerald-300\">\r\n <span>\u0627\u0644\u0625\u0632\u0627\u062d\u0629 (d)<\/span>\r\n <span className=\"tabular-nums\">{displacement} m<\/span>\r\n <\/label>\r\n <input type=\"range\" min=\"0\" max=\"10\" step=\"1\" value={displacement} onChange={(e) => setDisplacement(Number(e.target.value))} className=\"w-full accent-emerald-500\" \/>\r\n <\/div>\r\n\r\n <div className=\"mt-8 p-4 bg-black\/40 rounded-lg border border-slate-600 space-y-3\">\r\n <div className=\"flex justify-between text-l\">\r\n <span className=\"text-slate-400\">\u0645\u0631\u0643\u0628\u0629 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629 (F<sub>x<\/sub>)<\/span>\r\n <span className=\"text-indigo-300 font-mono tabular-nums\" dir=\"ltr\">{Fx.toFixed(1)} N<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between text-l border-t border-slate-700 pt-3\">\r\n <span className=\"text-slate-200 font-bold\">\u0627\u0644\u0634\u063a\u0644 (W)<\/span>\r\n <span className={`font-mono font-bold tabular-nums text-lg ${work > 0 ? 'text-emerald-400' : work < 0 ? 'text-rose-400' : 'text-slate-400'}`} dir=\"ltr\">\r\n {work.toFixed(1)} J\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* SVG Visual *\/}\r\n <div className=\"lg:col-span-2 relative bg-[#0f172a] rounded-xl border border-slate-750 overflow-hidden flex items-center justify-center min-h-[300px]\">\r\n <svg width=\"100%\" height=\"100%\" viewBox={`0 0 ${width} ${height}`} className=\"mx-auto block\" preserveAspectRatio=\"xMidYMid meet\">\r\n <defs>\r\n <marker id=\"arrow-F\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 L 2 5 z\" fill=\"#6366f1\" \/>\r\n <\/marker>\r\n <marker id=\"arrow-d\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto-start-reverse\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 L 2 5 z\" fill=\"#10b981\" \/>\r\n <\/marker>\r\n <marker id=\"arrow-Fx\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto-start-reverse\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 L 2 5 z\" fill=\"#818cf8\" \/>\r\n <\/marker>\r\n <\/defs>\r\n \r\n {\/* Floor *\/}\r\n <line x1=\"20\" y1={originY} x2={width - 20} y2={originY} stroke=\"#334155\" strokeWidth=\"4\" \/>\r\n \r\n {\/* Box *\/}\r\n <rect x={originX - 30} y={originY - 30} width=\"60\" height=\"60\" fill=\"#475569\" stroke=\"#94a3b8\" strokeWidth=\"2\" rx=\"4\" \/>\r\n <circle cx={originX} cy={originY} r=\"4\" fill=\"#cbd5e1\" \/>\r\n \r\n {\/* Angle Arc *\/}\r\n {angle > 0 && force > 0 && (\r\n <path d={arcPath} fill=\"none\" stroke=\"#f43f5e\" strokeWidth=\"2\" \/>\r\n )}\r\n {angle > 0 && force > 0 && (\r\n <text x={originX + radiusArc + 15} y={originY - radiusArc \/ 2} fill=\"#f43f5e\" fontSize=\"14\" fontWeight=\"bold\">\u03b8 = {angle}\u00b0<\/text>\r\n )}\r\n\r\n {\/* Displacement Vector *\/}\r\n {displacement > 0 && (\r\n <g>\r\n <line \r\n x1={originX} y1={originY + 45} \r\n x2={endX_d} y2={originY + 45} \r\n stroke=\"#10b981\" strokeWidth=\"4\" \r\n markerEnd=\"url(#arrow-d)\" \r\n \/>\r\n <text x={originX + (displacement * scaleD) \/ 2} y={originY + 65} fill=\"#10b981\" fontSize=\"16\" fontWeight=\"bold\" textAnchor=\"middle\">\r\n d = {displacement} m\r\n <\/text>\r\n <\/g>\r\n )}\r\n\r\n {\/* Force Component Fx (Dashed) *\/}\r\n {force > 0 && Math.abs(Fx) > 0.1 && (\r\n <line \r\n x1={originX} y1={originY} \r\n x2={endX_F} y2={originY} \r\n stroke=\"#818cf8\" strokeWidth=\"3\" strokeDasharray=\"6 4\" \r\n markerEnd=\"url(#arrow-Fx)\" \r\n \/>\r\n )}\r\n\r\n {\/* Vertical dotted line from F to Fx *\/}\r\n {force > 0 && angle !== 0 && angle !== 180 && (\r\n <line \r\n x1={endX_F} y1={originY} \r\n x2={endX_F} y2={endY_F} \r\n stroke=\"#64748b\" strokeWidth=\"2\" strokeDasharray=\"4 4\" \r\n \/>\r\n )}\r\n\r\n {\/* Force Vector F *\/}\r\n {force > 0 && (\r\n <g>\r\n <line \r\n x1={originX} y1={originY} \r\n x2={endX_F} y2={endY_F} \r\n stroke=\"#6366f1\" strokeWidth=\"4\" \r\n markerEnd=\"url(#arrow-F)\" \r\n \/>\r\n <text x={endX_F + (angle > 90 ? -40 : 10)} y={endY_F - 10} fill=\"#818cf8\" fontSize=\"14\" fontWeight=\"bold\">\r\n F = {force} N\r\n <\/text>\r\n <\/g>\r\n )}\r\n \r\n {\/* W = 0 indicator when angle is 90 *\/}\r\n {angle === 90 && force > 0 && displacement > 0 && (\r\n <text x={originX + 10} y={originY - 80} fill=\"#94a3b8\" fontSize=\"14\" fontWeight=\"bold\">\r\n \u0627\u0644\u0634\u063a\u0644 = 0 (\u0627\u0644\u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629)\r\n <\/text>\r\n )}\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ------------------------------\r\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0629 (WorkVariableForceSim)\r\n \/\/ ------------------------------\r\n const WorkVariableForceSim = () => {\r\n const [d, setD] = React.useState(0);\r\n const maxD = 5;\r\n const stage1End = 2;\r\n const maxF = 40;\r\n const getCurrentForce = (currentD) => currentD <= stage1End ? (maxF \/ stage1End) * currentD : maxF;\r\n const calculateWork = (currentD) => {\r\n if (currentD <= stage1End) return 0.5 * currentD * getCurrentForce(currentD);\r\n else return 0.5 * stage1End * maxF + (currentD - stage1End) * maxF;\r\n };\r\n const currentF = getCurrentForce(d);\r\n const currentWork = calculateWork(d);\r\n const width = 300, height = 180, padding = 30;\r\n const graphWidth = width - padding * 2;\r\n const graphHeight = height - padding * 2;\r\n const getX = (val) => padding + (val \/ maxD) * graphWidth;\r\n const getY = (val) => height - padding - (val \/ 50) * graphHeight;\r\n return (\r\n <div className=\"bg-slate-900\/50 p-6 rounded-2xl border border-orange-500\/20 shadow-xl overflow-hidden\">\r\n <div className=\"flex flex-col lg:flex-row gap-8 items-center\">\r\n <div className=\"flex-1 w-full flex flex-col items-center\">\r\n <div className=\"relative group w-full max-w-[400px]\">\r\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`} className=\"overflow-visible drop-shadow-lg\">\r\n <defs><marker id=\"arrowhead-gray\" markerWidth=\"6\" markerHeight=\"6\" refX=\"3\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L6,3 L0,6 Z\" fill=\"#94a3b8\" \/><\/marker><pattern id=\"hatch-sim\" width=\"8\" height=\"8\" patternTransform=\"rotate(45 0 0)\" patternUnits=\"userSpaceOnUse\"><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"8\" stroke=\"#f97316\" strokeWidth=\"1\" strokeOpacity=\"0.4\" \/><\/pattern><\/defs>\r\n {[10,20,30,40,50].map(val => (<line key={val} x1={padding} y1={getY(val)} x2={width-padding} y2={getY(val)} stroke=\"#1e293b\" strokeWidth=\"1\" \/>))}\r\n {[1,2,3,4,5].map(val => (<line key={val} x1={getX(val)} y1={padding} x2={getX(val)} y2={height-padding} stroke=\"#1e293b\" strokeWidth=\"1\" \/>))}\r\n <line x1={padding} y1={height-padding} x2={width-10} y2={height-padding} stroke=\"#94a3b8\" strokeWidth=\"2\" markerEnd=\"url(#arrowhead-gray)\" \/>\r\n <line x1={padding} y1={height-padding} x2={padding} y2={10} stroke=\"#94a3b8\" strokeWidth=\"2\" markerEnd=\"url(#arrowhead-gray)\" \/>\r\n <text x={width-5} y={height-padding+15} fill=\"#94a3b8\" fontSize=\"10\" textAnchor=\"end\">d (m)<\/text>\r\n <text x={padding-10} y={15} fill=\"#94a3b8\" fontSize=\"10\" textAnchor=\"start\">F (N)<\/text>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(Math.min(d, stage1End))},${getY(getCurrentForce(Math.min(d, stage1End)))} ${d > stage1End ? `L ${getX(d)},${getY(maxF)}` : ''} L ${getX(d)},${height-padding} L ${getX(0)},${height-padding} Z`} fill=\"url(#hatch-sim)\" className=\"transition-all duration-300 ease-out\" \/>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(Math.min(d, stage1End))},${getY(getCurrentForce(Math.min(d, stage1End)))} ${d > stage1End ? `L ${getX(d)},${getY(maxF)}` : ''} L ${getX(d)},${height-padding} L ${getX(0)},${height-padding} Z`} fill=\"rgba(249, 115, 22, 0.1)\" \/>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(stage1End)},${getY(maxF)} L ${getX(maxD)},${getY(maxF)}`} fill=\"none\" stroke=\"#475569\" strokeWidth=\"2\" strokeDasharray=\"4 4\" \/>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(Math.min(d, stage1End))},${getY(getCurrentForce(Math.min(d, stage1End)))} ${d > stage1End ? `L ${getX(d)},${getY(maxF)}` : ''}`} fill=\"none\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" className=\"transition-all duration-300 ease-out\" \/>\r\n <line x1={getX(d)} y1={height-padding} x2={getX(d)} y2={getY(currentF)} stroke=\"#f97316\" strokeWidth=\"1\" strokeDasharray=\"2 2\" \/>\r\n <circle cx={getX(d)} cy={getY(currentF)} r=\"4\" fill=\"#f97316\" className=\"transition-all duration-300 ease-out\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div className=\"w-full max-w-[300px] mt-4\"><input type=\"range\" min=\"0\" max={maxD} step=\"0.1\" value={d} onChange={(e) => setD(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-orange-500\" \/><div className=\"flex justify-between text-[10px] text-slate-500 font-mono mt-1\"><span>0m<\/span><span>2m<\/span><span>5m<\/span><\/div><\/div>\r\n <\/div>\r\n <div className=\"flex-1 w-full space-y-4\">\r\n <div className=\"grid grid-cols-2 gap-3\"><div className=\"bg-black\/30 p-3 rounded-xl border border-slate-700\"><div className=\"text-[10px] text-slate-500 uppercase tracking-wider mb-1\">\u0627\u0644\u0625\u0632\u0627\u062d\u0629 (d)<\/div><div className=\"text-xl font-bold font-mono text-white leading-none\">{d.toFixed(1)} <span className=\"text-l text-slate-400\">m<\/span><\/div><\/div><div className=\"bg-black\/30 p-3 rounded-xl border border-slate-700\"><div className=\"text-[10px] text-slate-500 uppercase tracking-wider mb-1\">\u0627\u0644\u0642\u0648\u0629 (F)<\/div><div className=\"text-xl font-bold font-mono text-orange-400 leading-none\">{currentF.toFixed(0)} <span className=\"text-l text-slate-400\">N<\/span><\/div><\/div><\/div>\r\n <div className=\"bg-orange-500\/10 p-4 rounded-xl border border-orange-500\/20\"><div className=\"flex justify-between items-end mb-2\"><div className=\"text-l text-orange-300 font-bold\">\u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0628\u0630\u0648\u0644 (\u0627\u0644\u0645\u0633\u0627\u062d\u0629):<\/div><div className=\"text-2xl font-bold font-mono text-white\">{currentWork.toFixed(1)} <span className=\"text-l text-orange-400 font-normal\">Joule<\/span><\/div><\/div><div className=\"space-y-2 border-t border-orange-500\/10 pt-2\"><div className=\"flex text-[11px] justify-between\"><span className=\"text-slate-400\">\u0634\u063a\u0644 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 1 (\u0627\u0644\u0645\u062b\u0644\u062b):<\/span><span className={`font-mono transition-colors ${d <= stage1End ? 'text-orange-300' : 'text-slate-500'}`}>{d <= stage1End ? `\u00bd \u00d7 ${d.toFixed(1)} \u00d7 ${currentF.toFixed(0)}` : `\u00bd \u00d7 2 \u00d7 40 = 40`} J<\/span><\/div>{d > stage1End && (<div className=\"flex text-[11px] justify-between\"><span className=\"text-slate-400\">\u0634\u063a\u0644 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 2 (\u0627\u0644\u0645\u0633\u062a\u0637\u064a\u0644):<\/span><span className=\"font-mono text-cyan-300\">{(d - stage1End).toFixed(1)} \u00d7 40 = {((d - stage1End) * maxF).toFixed(0)} J<\/span><\/div>)}<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ------------------------------\r\n \/\/ 3. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u064a\u0646 \u0627\u0644\u0642\u062f\u0631\u0627\u062a (PowerComparisonSim)\r\n \/\/ ------------------------------\r\n const PowerComparisonSim = () => {\r\n const [weight, setWeight] = React.useState(200);\r\n const [height, setHeight] = React.useState(5);\r\n const [powerA, setPowerA] = React.useState(100);\r\n const [powerB, setPowerB] = React.useState(50);\r\n const [isLifting, setIsLifting] = React.useState(false);\r\n const [progressA, setProgressA] = React.useState(0);\r\n const [progressB, setProgressB] = React.useState(0);\r\n const [timeA, setTimeA] = React.useState(0);\r\n const [timeB, setTimeB] = React.useState(0);\r\n const requestRef = React.useRef(null);\r\n const startTimeRef = React.useRef(null);\r\n const reset = () => { setIsLifting(false); setProgressA(0); setProgressB(0); setTimeA(0); setTimeB(0); if (requestRef.current) cancelAnimationFrame(requestRef.current); };\r\n const animate = (timestamp) => {\r\n if (!startTimeRef.current) startTimeRef.current = timestamp;\r\n const elapsed = (timestamp - startTimeRef.current) \/ 1000;\r\n const totalWork = weight * height;\r\n const targetTimeA = totalWork \/ powerA;\r\n const targetTimeB = totalWork \/ powerB;\r\n let stoppedA = false, stoppedB = false;\r\n if (elapsed < targetTimeA) { setProgressA((elapsed \/ targetTimeA) * 100); setTimeA(elapsed); } else { setProgressA(100); setTimeA(targetTimeA); stoppedA = true; }\r\n if (elapsed < targetTimeB) { setProgressB((elapsed \/ targetTimeB) * 100); setTimeB(elapsed); } else { setProgressB(100); setTimeB(targetTimeB); stoppedB = true; }\r\n if (stoppedA && stoppedB) { setIsLifting(false); return; }\r\n requestRef.current = requestAnimationFrame(animate);\r\n };\r\n const startLifting = () => { reset(); setIsLifting(true); startTimeRef.current = null; requestRef.current = requestAnimationFrame(animate); };\r\n React.useEffect(() => () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }, []);\r\n const totalWork = weight * height;\r\n return (\r\n <div className=\"bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-2xl text-white font-sans max-w-4xl mx-auto overflow-hidden relative\">\r\n <div className=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-blue-500 to-amber-500 opacity-50\"><\/div>\r\n <div className=\"flex flex-col md:flex-row justify-between items-center mb-8 gap-4 border-b border-white\/5 pb-6\">\r\n <div className=\"text-right\"><h3 className=\"text-xl font-black text-white flex items-center gap-2 justify-end\">\u0627\u0644\u0642\u062f\u0631\u0629: \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u0644\u0634\u063a\u0644<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-purple-400 fill-purple-400\"><path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\"><\/path><\/svg><\/h3><p className=\"text-slate-400 text-l mt-1\">\u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \u0645\u062d\u0631\u0643\u064a\u0646 \u064a\u0646\u062c\u0632\u0627\u0646 \u0646\u0641\u0633 \u0627\u0644\u0634\u063a\u0644 \u0628\u0642\u062f\u0631\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u0629<\/p><\/div>\r\n <div className=\"flex gap-2\"><button onClick={reset} className=\"p-3 bg-slate-800 hover:bg-slate-700 rounded-xl transition-colors border border-white\/5 shadow-lg\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-slate-300\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"><\/path><path d=\"M3 3v5h5\"><\/path><\/svg><\/button><button onClick={startLifting} disabled={isLifting} className={`flex items-center gap-2 px-6 py-3 rounded-xl font-bold transition-all shadow-lg ${isLifting ? 'bg-slate-800 text-slate-500 cursor-not-allowed' : 'bg-purple-600 hover:bg-purple-500 text-white active:scale-95'}`}><span>\u0627\u0628\u062f\u0623 \u0627\u0644\u0631\u0641\u0639<\/span><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\"><\/path><\/svg><\/button><\/div>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-4 gap-8\">\r\n <div className=\"lg:col-span-1 space-y-6\">\r\n <div className=\"space-y-4\"><div className=\"flex justify-between items-center bg-black\/20 p-3 rounded-xl border border-white\/5\"><span className=\"text-amber-400 font-mono text-l\">{weight} N<\/span><label className=\"text-l text-slate-400 font-bold flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"5\" r=\"3\"><\/circle><path d=\"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z\"><\/path><\/svg> \u0627\u0644\u0648\u0632\u0646 (\u0627\u0644\u0642\u0648\u0629)<\/label><\/div><input type=\"range\" min=\"50\" max=\"500\" step=\"10\" value={weight} onChange={(e) => setWeight(parseInt(e.target.value))} disabled={isLifting} className=\"w-full accent-amber-500 cursor-pointer h-1.5\" \/><\/div>\r\n <div className=\"space-y-4\"><div className=\"flex justify-between items-center bg-black\/20 p-3 rounded-xl border border-white\/5\"><span className=\"text-blue-400 font-mono text-l\">{height} m<\/span><label className=\"text-l text-slate-400 font-bold flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"m16 12-4-4-4 4\"><\/path><path d=\"M12 16V8\"><\/path><\/svg> \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0637\u0644\u0648\u0628<\/label><\/div><input type=\"range\" min=\"1\" max=\"10\" step=\"0.5\" value={height} onChange={(e) => setHeight(parseFloat(e.target.value))} disabled={isLifting} className=\"w-full accent-blue-500 cursor-pointer h-1.5\" \/><\/div>\r\n <div className=\"bg-indigo-500\/10 p-4 rounded-2xl border border-indigo-500\/20 shadow-inner\"><div className=\"text-l text-indigo-300 font-bold mb-3 border-b border-indigo-500\/10 pb-2\">\u062d\u0633\u0627\u0628 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 (W)<\/div><div className=\"text-center font-mono py-2\"><div className=\"text-[10px] text-slate-500 mb-1 tracking-widest\">W = F \u00d7 d<\/div><div className=\"text-xl text-white font-black\">{totalWork.toLocaleString()} J<\/div><\/div><\/div>\r\n <\/div>\r\n <div className=\"lg:col-span-3 grid grid-cols-2 gap-4 h-[400px]\">\r\n <div className=\"flex flex-col bg-slate-800\/20 rounded-3xl border border-white\/5 overflow-hidden relative\"><div className=\"bg-purple-500\/20 p-3 text-center border-b border-purple-500\/20\"><span className=\"text-l font-black text-purple-300 uppercase tracking-widest\">\u0627\u0644\u0645\u062d\u0631\u0643 (\u0623) - \u0642\u062f\u0631\u0629 \u0623\u0639\u0644\u0649<\/span><\/div><div className=\"flex-1 relative flex items-end justify-center p-6 border-b border-white\/5\"><div className=\"absolute inset-0 bg-[linear-gradient(to_top,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:100%_40px]\"><\/div><div className=\"absolute left-0 w-full border-t border-slate-600\/30\" style={{bottom: 'calc(10% + 80%)'}}><\/div><div className=\"absolute top-4 right-4 w-12 h-12 border-4 border-purple-500\/30 rounded-full flex items-center justify-center\"><div className=\"w-1 h-8 bg-purple-500\/50 rounded-full\"><\/div><\/div><div className=\"absolute w-24 h-24 bg-purple-600\/20 border-2 border-purple-500 rounded-2xl flex items-center justify-center shadow-[0_0_30px_rgba(168,85,247,0.1)] transition-transform duration-300\" style={{bottom: `calc(10% + ${progressA * 0.8}%)`}}><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-purple-400 opacity-50\"><circle cx=\"12\" cy=\"5\" r=\"3\"><\/circle><path d=\"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z\"><\/path><\/svg><div className=\"absolute -top-10 bg-purple-500\/20 px-2 py-0.5 rounded text-[10px] border border-purple-500\/30 font-mono\">{progressA.toFixed(0)}%<\/div><\/div><\/div><div className=\"p-4 bg-black\/40 space-y-3\"><div className=\"flex justify-between items-center border-b border-white\/5 pb-2\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest\">Power (P)<\/span><span className=\"text-l font-mono text-purple-400 font-bold\">{powerA} W<\/span><\/div><div className=\"flex justify-between items-center\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 6v6l4 2\"><\/path><\/svg> Time (t)<\/span><span className=\"text-l font-mono text-white tracking-widest\">{timeA.toFixed(2)}s<\/span><\/div><div className=\"mt-2 h-1 w-full bg-slate-900 rounded-full overflow-hidden\"><div className=\"h-full bg-purple-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]\" style={{width: `${(powerA \/ 100) * 100}%`}}><\/div><\/div><\/div><\/div>\r\n <div className=\"flex flex-col bg-slate-800\/20 rounded-3xl border border-white\/5 overflow-hidden relative\"><div className=\"bg-blue-500\/20 p-3 text-center border-b border-blue-500\/20\"><span className=\"text-l font-black text-blue-300 uppercase tracking-widest\">\u0627\u0644\u0645\u062d\u0631\u0643 (\u0628) - \u0642\u062f\u0631\u0629 \u0623\u0642\u0644<\/span><\/div><div className=\"flex-1 relative flex items-end justify-center p-6 border-b border-white\/5\"><div className=\"absolute inset-0 bg-[linear-gradient(to_top,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:100%_40px]\"><\/div><div className=\"absolute left-0 w-full border-t border-slate-600\/30\" style={{bottom: 'calc(10% + 80%)'}}><\/div><div className=\"absolute top-4 right-4 w-12 h-12 border-4 border-blue-500\/30 rounded-full flex items-center justify-center\"><div className=\"w-1 h-8 bg-blue-500\/50 rounded-full\"><\/div><\/div><div className=\"absolute w-24 h-24 bg-blue-600\/20 border-2 border-blue-500 rounded-2xl flex items-center justify-center shadow-[0_0_30px_rgba(59,130,246,0.1)] transition-transform duration-300\" style={{bottom: `calc(10% + ${progressB * 0.8}%)`}}><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-blue-400 opacity-50\"><circle cx=\"12\" cy=\"5\" r=\"3\"><\/circle><path d=\"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z\"><\/path><\/svg><div className=\"absolute -top-10 bg-blue-500\/20 px-2 py-0.5 rounded text-[10px] border border-blue-500\/30 font-mono\">{progressB.toFixed(0)}%<\/div><\/div><\/div><div className=\"p-4 bg-black\/40 space-y-3\"><div className=\"flex justify-between items-center border-b border-white\/5 pb-2\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest\">Power (P)<\/span><span className=\"text-l font-mono text-blue-400 font-bold\">{powerB} W<\/span><\/div><div className=\"flex justify-between items-center\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 6v6l4 2\"><\/path><\/svg> Time (t)<\/span><span className=\"text-l font-mono text-white tracking-widest\">{timeB.toFixed(2)}s<\/span><\/div><div className=\"mt-2 h-1 w-full bg-slate-900 rounded-full overflow-hidden\"><div className=\"h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]\" style={{width: `${(powerB \/ 100) * 100}%`}}><\/div><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"mt-8 bg-black\/40 rounded-3xl p-6 border border-white\/5 relative overflow-hidden\"><div className=\"absolute top-0 right-0 w-32 h-32 bg-purple-500\/5 blur-3xl -mr-16 -mt-16\"><\/div><div className=\"flex flex-col md:flex-row gap-8 items-center justify-around relative z-10\"><div className=\"text-center group\"><div className=\"text-[10px] text-slate-500 uppercase font-bold mb-2 tracking-[0.2em]\">Conclusion<\/div><div className=\"text-lg text-white font-bold mb-1 leading-relaxed\">\u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0646\u062c\u0632 \u0645\u062a\u0633\u0627\u0648\u064d \u062a\u0645\u0627\u0645\u0627\u064b<\/div><p className=\"text-[11px] text-slate-400\">\u0644\u0623\u0646 \u0627\u0644\u0648\u0632\u0646 \u0648\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0644\u0645 \u064a\u062a\u063a\u064a\u0631\u0627<\/p><div className=\"h-0.5 w-12 bg-purple-500 mx-auto mt-4 group-hover:w-24 transition-all duration-500\"><\/div><\/div><div className=\"h-12 w-px bg-white\/10 hidden md:block\"><\/div><div className=\"text-center group\"><div className=\"text-[10px] text-slate-500 uppercase font-bold mb-2 tracking-[0.2em]\">Variable factor<\/div><div className=\"text-lg text-purple-400 font-black mb-1 leading-relaxed\">\u0627\u0644\u0642\u062f\u0631\u0629 \u062a\u062d\u062f\u062f \"\u0633\u0631\u0639\u0629\" \u0627\u0644\u0625\u0646\u062c\u0627\u0632<\/div><p className=\"text-[11px] text-white\/60 italic\">\u0627\u0644\u0645\u062d\u0631\u0643 (\u0623) \u0623\u062a\u0645\u0651 \u0627\u0644\u0645\u0647\u0645\u0629 \u0641\u064a \u0648\u0642\u062a \u0623\u0642\u0644<\/p><div className=\"h-0.5 w-12 bg-purple-400 mx-auto mt-4 group-hover:w-24 transition-all duration-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]\"><\/div><\/div><\/div><\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ------------------------------\r\n \/\/ \u0631\u0628\u0637 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0641\u064a \u0623\u0645\u0627\u0643\u0646\u0647\u0627\r\n \/\/ ------------------------------\r\n const root1 = ReactDOM.createRoot(document.getElementById('vector-work-sim'));\r\n root1.render(<WorkVectorSimulation \/>);\r\n const root2 = ReactDOM.createRoot(document.getElementById('variable-force-sim'));\r\n root2.render(<WorkVariableForceSim \/>);\r\n const root3 = ReactDOM.createRoot(document.getElementById('power-sim'));\r\n root3.render(<PowerComparisonSim \/>);\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-18558","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18558","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=18558"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18558\/revisions"}],"predecessor-version":[{"id":18559,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18558\/revisions\/18559"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/framer-motion@10.16.4\/dist\/framer-motion.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n 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-container {\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 <\/style>\r\n<\/head>\r\n<body>\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\u0623\u0648\u0644: \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062d\u0627\u062f\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\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0634\u063a\u0644_\u0648\u0627\u0644\u0642\u062f\u0631\u0629_audio-1.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\u0634\u063a\u0644_\u0648\u0627\u0644\u0642\u062f\u0631\u0629_audio-1.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-12 text-right\" dir=\"rtl\">\r\n \r\n <section class=\"relative p-8 bg-gradient-to-br from-indigo-900\/40 to-slate-900\/40 rounded-3xl border border-indigo-500\/20 shadow-2xl overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-32 h-32 bg-indigo-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\"><span class=\"w-3 h-10 bg-indigo-500 rounded-full\"><\/span>\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629 (Work and Power)<\/h2>\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0643\u0644\u0645\u0629 \"\u0634\u063a\u0644\" \u0644\u0648\u0635\u0641 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0623\u0646\u0634\u0637\u0629 \u0627\u0644\u062a\u064a \u0646\u0642\u0648\u0645 \u0628\u0647\u0627\u060c \u0645\u062b\u0644 \u0631\u0641\u0639 \u0627\u0644\u0623\u062b\u0642\u0627\u0644 \u0623\u0648 \u062f\u0641\u0639 \u0639\u0631\u0628\u0629. \u0644\u0643\u0646 \u0641\u064a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621\u060c \u0644\u0644\u0634\u063a\u0644 \u0645\u0639\u0646\u0649 \u0645\u062d\u062f\u062f \u0648\u062f\u0642\u064a\u0642. \u064a\u0631\u062a\u0628\u0637 \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0634\u063a\u0644 \u0628\u062a\u0623\u062b\u064a\u0631 \u0642\u0648\u0629 \u0641\u064a \u062c\u0633\u0645 \u0648\u062a\u062d\u0631\u0643 \u0647\u0630\u0627 \u0627\u0644\u062c\u0633\u0645 \u062a\u062d\u062a \u062a\u0623\u062b\u064a\u0631 \u062a\u0644\u0643 \u0627\u0644\u0642\u0648\u0629. \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0642\u0648\u0629 \u0641\u064a \u062c\u0633\u0645 \u0648\u0623\u062d\u062f\u062b\u062a \u0644\u0647 \u0625\u0632\u0627\u062d\u0629\u060c \u0641\u0625\u0646 \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0629 \u062a\u0643\u0648\u0646 \u0642\u062f \u0628\u0630\u0644\u062a \u0634\u063a\u0644\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u062c\u0633\u0645.<\/p>\r\n <div class=\"mt-4 p-4 bg-indigo-500\/10 rounded-2xl border border-indigo-500\/20\"><h3 class=\"text-lg font-bold text-indigo-300 mb-2\">\u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633\u060c \u0633\u0648\u0641 \u0646\u062a\u0639\u0644\u0645:<\/h3><ul class=\"list-disc list-inside text-slate-300 text-l space-y-2\"><li>\u0643\u064a\u0641 \u0646\u062d\u0633\u0628 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0642\u0648\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0648\u0642\u0648\u0649 \u062b\u0627\u0628\u062a\u0629 \u0645\u062a\u0639\u062f\u062f\u0629\u060c \u0648\u0642\u0648\u0629 \u0645\u062a\u063a\u064a\u0631\u0629.<\/li><li>\u0645\u0627 \u0627\u0644\u0645\u0642\u0635\u0648\u062f \u0628\u0627\u0644\u0642\u062f\u0631\u0629\u060c \u0648\u0643\u064a\u0641 \u0646\u062d\u0633\u0628\u0647\u0627\u060c \u0648\u0623\u0647\u0645\u064a\u062a\u0647\u0627 \u0641\u064a \u0645\u0642\u0627\u0631\u0646\u0629 \u0627\u0644\u0622\u0644\u0627\u062a.<\/li><li>\u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 \u0627\u0644\u0634\u063a\u0644 \u0648\u0627\u0644\u0642\u062f\u0631\u0629.<\/li><\/ul><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-8\">\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>\u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0634\u063a\u0644 (Work)<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-blue-400 mb-4\">1. \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0634\u063a\u0644<\/h3><p class=\"text-slate-300 text-l leading-relaxed mb-4\">\u0627\u0644\u0634\u063a\u0644 \u0647\u0648 \u0646\u0627\u062a\u062c \u0627\u0644\u0636\u0631\u0628 \u0627\u0644\u0642\u064a\u0627\u0633\u064a \u0644\u0645\u062a\u062c\u0647 \u0627\u0644\u0642\u0648\u0629 \u0641\u064a \u0645\u062a\u062c\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629. \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0642\u0648\u0629 \u062b\u0627\u0628\u062a\u0629 F \u0641\u064a \u062c\u0633\u0645 \u0648\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u0645 \u0625\u0632\u0627\u062d\u0629 d\u060c \u0641\u0625\u0646 \u0627\u0644\u0634\u063a\u0644 W \u064a\u064f\u0639\u0637\u0649 \u0628\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/p><div class=\"bg-black\/30 p-4 rounded-xl text-center font-mono text-xl text-blue-300 mb-4\">W = F \u00b7 d = F d cos\u03b8<\/div><ul class=\"text-l text-slate-400 space-y-2 list-disc list-inside\"><li><b>F<\/b>: \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 (\u0628\u0648\u062d\u062f\u0629 \u0646\u064a\u0648\u062a\u0646 N)<\/li><li><b>d<\/b>: \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u0628\u0648\u062d\u062f\u0629 \u0645\u062a\u0631 m)<\/li><li><b>\u03b8<\/b>: \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0648\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629.<\/li><\/ul><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-cyan-400 mb-4\">2. \u0648\u062d\u062f\u0629 \u0642\u064a\u0627\u0633 \u0627\u0644\u0634\u063a\u0644<\/h3><p class=\"text-slate-300 text-l leading-relaxed mb-4\">\u0648\u062d\u062f\u0629 \u0627\u0644\u0634\u063a\u0644 \u0641\u064a \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u062f\u0648\u0644\u064a \u0647\u064a <span class=\"text-cyan-300 font-bold\">\u0627\u0644\u062c\u0648\u0644 (Joule)<\/span>\u060c \u0648\u0631\u0645\u0632\u0647 J. \u064a\u0639\u0631\u0651\u0641 \u0627\u0644\u062c\u0648\u0644 \u0628\u0623\u0646\u0647 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0642\u0648\u0629 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 1 \u0646\u064a\u0648\u062a\u0646 \u0639\u0646\u062f\u0645\u0627 \u062a\u0624\u062b\u0631 \u0641\u064a \u062c\u0633\u0645 \u0648\u062a\u062d\u0631\u0643\u0647 \u0625\u0632\u0627\u062d\u0629 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 1 \u0645\u062a\u0631 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0646\u0641\u0633\u0647\u0627.<\/p><div class=\"bg-black\/30 p-4 rounded-xl text-center font-mono text-cyan-300\">1 J = 1 N \u00b7 m<\/div><\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"vector-work-sim\" class=\"sim-container\"><\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-emerald-400 mb-6 flex items-center gap-2\"><span class=\"w-1.5 h-6 bg-emerald-500 rounded-full\"><\/span>3. \u062d\u0627\u0644\u0627\u062a \u062e\u0627\u0635\u0629 \u0644\u0644\u0634\u063a\u0644 (\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u0648\u0627\u0644\u0633\u0627\u0644\u0628\u0629)<\/h3><p class=\"text-slate-300 mb-6\">\u064a\u0639\u062a\u0645\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0634\u063a\u0644 \u0648\u0625\u0634\u0627\u0631\u062a\u0647 \u0639\u0644\u0649 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03b8) \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0648\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629:<\/p><div class=\"space-y-6\"><div class=\"bg-black\/30 p-6 rounded-2xl border border-emerald-500\/30 flex flex-col md:flex-row gap-6 items-start\"><div class=\"flex-1 space-y-3\"><h4 class=\"text-emerald-400 font-bold text-lg flex items-center gap-2\"><span class=\"w-8 h-8 rounded-full bg-emerald-500\/20 flex items-center justify-center\">\u0623<\/span>\u0634\u063a\u0644 \u0645\u0648\u062c\u0628 (W > 0)<\/h4><p class=\"text-l text-slate-300 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0647\u0648 \u0646\u0641\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u0623\u0648 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u062d\u0627\u062f\u0629). \u0641\u064a \u062d\u0627\u0644\u0629 \u0643\u0627\u0646 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u0646 \u0645\u062a\u0637\u0627\u0628\u0642\u064a\u0646 \u062a\u0645\u0627\u0645\u0627\u064b (\u03b8 = 0\u00b0)\u060c \u0641\u0625\u0646 cos(0\u00b0) = 1 \u0648\u064a\u0643\u0648\u0646 \u0627\u0644\u0634\u063a\u0644 \u0623\u0643\u0628\u0631 \u0645\u0627 \u064a\u0645\u0643\u0646.<br\/><span class=\"text-emerald-300 mt-1 block\"><b>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/b> \u0627\u0644\u0642\u0648\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u0637\u0627\u0642\u0629 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0648\u062a\u0633\u0631\u0651\u0639\u0647.<\/span><\/p><\/div><div class=\"md:w-1\/3 w-full bg-emerald-900\/20 p-4 rounded-xl border border-emerald-500\/20\"><div class=\"text-emerald-300 text-l font-bold mb-2\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a:<\/div><p class=\"text-l text-slate-300 mb-3\">\u0642\u0648\u0629 \u062f\u0641\u0639 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 50 N \u062a\u062d\u0631\u0643 \u0639\u0631\u0628\u0629 \u0645\u0633\u0627\u0641\u0629 4 m \u0641\u064a \u0646\u0641\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629.<\/p><div class=\"font-mono text-l text-emerald-200 bg-black\/40 p-2 rounded-lg text-center\">W = 50 \u00d7 4 \u00d7 cos(0\u00b0) = +200 J<\/div><\/div><\/div><div class=\"bg-black\/30 p-6 rounded-2xl border border-rose-500\/30 flex flex-col md:flex-row gap-6 items-start\"><div class=\"flex-1 space-y-3\"><h4 class=\"text-rose-400 font-bold text-lg flex items-center gap-2\"><span class=\"w-8 h-8 rounded-full bg-rose-500\/20 flex items-center justify-center\">\u0628<\/span>\u0634\u063a\u0644 \u0633\u0627\u0644\u0628 (W < 0)<\/h4><p class=\"text-l text-slate-300 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u0623\u0648 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0645\u0646\u0641\u0631\u062c\u0629). \u0641\u064a \u062d\u0627\u0644\u0629 \u0643\u0627\u0646 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u0646 \u0645\u062a\u0639\u0627\u0643\u0633\u064a\u0646 \u062a\u0645\u0627\u0645\u0627\u064b (\u03b8 = 180\u00b0)\u060c \u0641\u0625\u0646 cos(180\u00b0) = -1.<br\/><span class=\"text-rose-300 mt-1 block\"><b>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/b> \u0627\u0644\u0642\u0648\u0629 \u062a\u0642\u0644\u0644 \u0645\u0646 \u0637\u0627\u0642\u0629 \u0627\u0644\u062c\u0633\u0645\u060c \u0643\u0645\u0627 \u0641\u064a \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643.<\/span><\/p><\/div><div class=\"md:w-1\/3 w-full bg-rose-900\/20 p-4 rounded-xl border border-rose-500\/20\"><div class=\"text-rose-300 text-l font-bold mb-2\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a:<\/div><p class=\"text-l text-slate-300 mb-3\">\u0642\u0648\u0629 \u0627\u062d\u062a\u0643\u0627\u0643 15 N \u062a\u0624\u062b\u0631 \u0639\u0644\u0649 \u0635\u0646\u062f\u0648\u0642 \u0623\u062b\u0646\u0627\u0621 \u0627\u0646\u0632\u0644\u0627\u0642\u0647 \u0645\u0633\u0627\u0641\u0629 2 m \u0644\u062a\u0628\u0637\u0626\u0647.<\/p><div class=\"font-mono text-l text-rose-200 bg-black\/40 p-2 rounded-lg text-center\">W = 15 \u00d7 2 \u00d7 cos(180\u00b0) = -30 J<\/div><\/div><\/div><div class=\"bg-black\/30 p-6 rounded-2xl border border-slate-500\/40 flex flex-col md:flex-row gap-6 items-start\"><div class=\"flex-1 space-y-3\"><h4 class=\"text-slate-300 font-bold text-lg flex items-center gap-2\"><span class=\"w-8 h-8 rounded-full bg-slate-500\/20 flex items-center justify-center\">\u062c\u0640<\/span>\u0627\u0644\u0634\u063a\u0644 \u0635\u0641\u0631 (W = 0)<\/h4><p class=\"text-l text-slate-400 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u0645\u0627\u0645\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0625\u0632\u0627\u062d\u0629 (\u03b8 = 90\u00b0)\u060c \u0641\u0625\u0646 cos(90\u00b0) = 0.<br\/><span class=\"text-slate-300 mt-1 block\"><b>\u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/b> \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0629 \u0644\u0627 \u062a\u063a\u064a\u0631 \u0645\u0646 \u0645\u0642\u062f\u0627\u0631 \u0633\u0631\u0639\u0629 \u0627\u0644\u062c\u0633\u0645\u060c \u0643\u0645\u0627 \u0641\u064a \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629 \u0623\u0648 \u0642\u0648\u0629 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0644\u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0623\u0641\u0642\u064a\u0627\u064b.<\/span><\/p><\/div><div class=\"md:w-1\/3 w-full bg-slate-800\/50 p-4 rounded-xl border border-slate-600\/50\"><div class=\"text-slate-300 text-l font-bold mb-2\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a:<\/div><p class=\"text-l text-slate-400 mb-3\">\u0646\u0627\u062f\u0644 \u064a\u062d\u0645\u0644 \u0635\u064a\u0646\u064a\u0629 \u0628\u0648\u0632\u0646 30 N \u0648\u064a\u0645\u0634\u064a \u0628\u0647\u0627 \u0645\u0633\u0627\u0641\u0629 5 m \u0628\u062e\u0637 \u0623\u0641\u0642\u064a \u0645\u0633\u062a\u0642\u064a\u0645.<\/p><div class=\"font-mono text-l text-slate-200 bg-black\/40 p-2 rounded-lg text-center\">W = 30 \u00d7 5 \u00d7 cos(90\u00b0) = 0 J<\/div><\/div><\/div><\/div><\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner\"><h3 class=\"text-xl font-bold text-amber-400 mb-6 flex items-center gap-2\"><span class=\"w-1.5 h-6 bg-amber-500 rounded-full\"><\/span>4. \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0639\u062f\u0629 \u0642\u0648\u0649 \u062b\u0627\u0628\u062a\u0629<\/h3><p class=\"text-slate-300 text-base leading-relaxed mb-6\">\u0639\u0646\u062f\u0645\u0627 \u062a\u0624\u062b\u0631 \u0639\u062f\u0629 \u0642\u0648\u0649 \u062b\u0627\u0628\u062a\u0629 \u0639\u0644\u0649 \u062c\u0633\u0645 \u0645\u0627\u060c \u0641\u0625\u0646 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u0645\u0628\u0630\u0648\u0644 \u064a\u064f\u062d\u0633\u0628 \u0628\u0625\u062d\u062f\u0649 \u0627\u0644\u0637\u0631\u064a\u0642\u062a\u064a\u0646: 1- \u0625\u064a\u062c\u0627\u062f \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0643\u0644 \u0642\u0648\u0629 \u0639\u0644\u0649 \u062d\u062f\u0629 \u062b\u0645 \u062c\u0645\u0639\u0647\u0627 \u062c\u0645\u0639\u0627\u064b \u062c\u0628\u0631\u064a\u0627\u064b. 2- \u0625\u064a\u062c\u0627\u062f \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u062b\u0645 \u062d\u0633\u0627\u0628 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647.<\/p><div class=\"bg-black\/30 p-4 rounded-xl text-center font-mono text-amber-300 text-lg mb-8 max-w-2xl mx-auto border border-amber-500\/20 shadow-md\">W<sub>Total<\/sub> = W<sub>1<\/sub> + W<sub>2<\/sub> + ... = \u03a3 ( F<sub>i<\/sub> d cos\u03b8<sub>i<\/sub> )<\/div><div class=\"grid grid-cols-1 gap-6\"><div class=\"bg-amber-900\/20 p-6 rounded-2xl border border-amber-500\/20 flex flex-col lg:flex-row gap-6 items-center\"><div class=\"flex-1\"><div class=\"text-amber-400 font-bold mb-3 text-lg\">\u0645\u062b\u0627\u0644 1: \u0633\u062d\u0628 \u0635\u0646\u062f\u0648\u0642 \u0628\u0634\u0643\u0644 \u0623\u0641\u0642\u064a<\/div><p class=\"text-l text-slate-300 mb-6 leading-relaxed\">\u0635\u0646\u062f\u0648\u0642 \u064a\u064f\u0633\u062d\u0628 \u0628\u0642\u0648\u0629 100 N \u0644\u0644\u064a\u0645\u064a\u0646\u060c \u0648\u064a\u062a\u0639\u0631\u0636 \u0644\u0642\u0648\u0629 \u0627\u062d\u062a\u0643\u0627\u0643 30 N \u0644\u0644\u064a\u0633\u0627\u0631\u060c \u0641\u062a\u062d\u0631\u0643 5 m. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u0645\u0628\u0630\u0648\u0644\u061f<\/p><ul class=\"text-l text-slate-400 space-y-3 font-mono list-none mb-6 border-r-4 border-amber-500\/30 pr-4\"><li>W<sub>pull<\/sub> = 100 \u00d7 5 \u00d7 cos(0\u00b0) = +500 J<\/li><li>W<sub>fric<\/sub> = 30 \u00d7 5 \u00d7 cos(180\u00b0) = -150 J<\/li><\/ul><div class=\"font-mono text-base shadow-l text-white bg-black\/40 p-4 rounded-xl text-center border border-amber-500\/10\">W<sub>Total<\/sub> = 500 - 150 = <span class=\"text-amber-400 font-bold text-lg\">+350 J<\/span><\/div><\/div><div class=\"lg:w-1\/3 w-full bg-black\/20 rounded-xl flex justify-center py-6 border border-amber-500\/10 h-48 items-center relative overflow-hidden\"><div class=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]\"><\/div><svg width=\"240\" height=\"120\" viewBox=\"0 0 240 120\" class=\"mx-auto block overflow-visible relative z-10 drop-shadow-md\"><defs><marker id=\"arr-pull\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#38bdf8\" \/><\/marker><marker id=\"arr-fric\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#f43f5e\" \/><\/marker><marker id=\"arr-disp\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#10b981\" \/><\/marker><filter id=\"glow\"><feGaussianBlur stdDeviation=\"2\" result=\"coloredBlur\"\/><feMerge><feMergeNode in=\"coloredBlur\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge><\/filter><\/defs><line x1=\"10\" y1=\"85\" x2=\"230\" y2=\"85\" stroke=\"#475569\" strokeWidth=\"3\" strokeLinecap=\"round\" \/><rect x=\"95\" y=\"35\" width=\"50\" height=\"50\" fill=\"#334155\" stroke=\"#cbd5e1\" strokeWidth=\"2\" rx=\"4\" \/><rect x=\"100\" y=\"40\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"#64748b\" strokeWidth=\"1\" rx=\"2\" strokeDasharray=\"2 2\" \/><line x1=\"145\" y1=\"60\" x2=\"210\" y2=\"60\" stroke=\"#38bdf8\" strokeWidth=\"4\" markerEnd=\"url(#arr-pull)\" filter=\"url(#glow)\" \/><text x=\"180\" y=\"45\" fill=\"#38bdf8\" fontSize=\"13\" textAnchor=\"middle\" fontWeight=\"bold\">F = 100N<\/text><line x1=\"95\" y1=\"80\" x2=\"40\" y2=\"80\" stroke=\"#f43f5e\" strokeWidth=\"4\" markerEnd=\"url(#arr-fric)\" filter=\"url(#glow)\" \/><text x=\"65\" y=\"65\" fill=\"#f43f5e\" fontSize=\"13\" textAnchor=\"middle\" fontWeight=\"bold\">f = 30N<\/text><path d=\"M 95 105 L 180 105\" stroke=\"#10b981\" strokeWidth=\"2\" markerEnd=\"url(#arr-disp)\" strokeDasharray=\"4 4\" fill=\"none\" \/><text x=\"137\" y=\"118\" fill=\"#10b981\" fontSize=\"12\" textAnchor=\"middle\" fontWeight=\"bold\">\u0394x = 5m<\/text><\/svg><\/div><\/div><div class=\"bg-amber-900\/20 p-6 rounded-2xl border border-amber-500\/20 flex flex-col lg:flex-row gap-6 items-center\"><div class=\"flex-1\"><div class=\"text-amber-400 font-bold mb-3 text-lg\">\u0645\u062b\u0627\u0644 2: \u0631\u0641\u0639 \u062c\u0633\u0645 \u0644\u0644\u0623\u0639\u0644\u0649 \u0628\u0633\u0631\u0639\u0629 \u0645\u0646\u062a\u0638\u0645\u0629<\/div><p class=\"text-l text-slate-300 mb-6 leading-relaxed\">\u064a\u064e\u0631\u0641\u0639 \u0639\u0627\u0645\u0644 \u0643\u064a\u0633 \u0631\u0645\u0644 \u0648\u0632\u0646\u0647 200 N \u0645\u0633\u0627\u0641\u0629 3 m \u0644\u0644\u0623\u0639\u0644\u0649 \u0628\u0635\u0648\u0631\u0629 \u0628\u0637\u064a\u0626\u0629 (\u0627\u0644\u0633\u0631\u0639\u0629 \u0645\u0646\u062a\u0638\u0645\u0629\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0642\u0648\u0629 \u0627\u0644\u0631\u0641\u0639 \u0645\u0633\u0627\u0648\u064a\u0629 \u0644\u0644\u0648\u0632\u0646 \u062a\u0645\u0627\u0645\u0627\u064b).<\/p><ul class=\"text-l text-slate-400 space-y-3 font-mono list-none mb-6 border-r-4 border-amber-500\/30 pr-4\"><li>W<sub>lift<\/sub> = 200 \u00d7 3 \u00d7 cos(0\u00b0) = +600 J <span class=\"text-slate-500\">(\u0634\u063a\u0644 \u0627\u0644\u0639\u0627\u0645\u0644)<\/span><\/li><li>W<sub>grav<\/sub> = 200 \u00d7 3 \u00d7 cos(180\u00b0) = -600 J <span class=\"text-slate-500\">(\u0634\u063a\u0644 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629)<\/span><\/li><\/ul><div class=\"font-mono text-base shadow-l text-white bg-black\/40 p-4 rounded-xl text-center border border-amber-500\/10\">W<sub>Total<\/sub> = 600 - 600 = <span class=\"text-slate-400 font-bold text-lg\">0 J<\/span><\/div><\/div><div class=\"lg:w-1\/3 w-full bg-black\/20 rounded-xl flex justify-center py-6 border border-amber-500\/10 h-48 items-center relative overflow-hidden\"><div class=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]\"><\/div><svg width=\"200\" height=\"160\" viewBox=\"0 0 200 160\" class=\"mx-auto block overflow-visible relative z-10 drop-shadow-md\"><defs><marker id=\"arr-lift\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#38bdf8\" \/><\/marker><marker id=\"arr-grav\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#f43f5e\" \/><\/marker><marker id=\"arr-disp-up\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#10b981\" \/><\/marker><filter id=\"glow-up\"><feGaussianBlur stdDeviation=\"2\" result=\"coloredBlur\"\/><feMerge><feMergeNode in=\"coloredBlur\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge><\/filter><\/defs><line x1=\"60\" y1=\"140\" x2=\"140\" y2=\"140\" stroke=\"#475569\" strokeWidth=\"2\" strokeDasharray=\"4 2\" \/><rect x=\"80\" y=\"60\" width=\"40\" height=\"40\" fill=\"#a16207\" stroke=\"#fef3c7\" strokeWidth=\"2\" rx=\"4\" \/><path d=\"M 85 70 Q 100 80 115 70 M 85 80 Q 100 90 115 80\" stroke=\"#713f12\" strokeWidth=\"1\" fill=\"none\" \/><line x1=\"100\" y1=\"60\" x2=\"100\" y2=\"15\" stroke=\"#38bdf8\" strokeWidth=\"4\" markerEnd=\"url(#arr-lift)\" filter=\"url(#glow-up)\" \/><text x=\"110\" y=\"30\" fill=\"#38bdf8\" fontSize=\"13\" fontWeight=\"bold\">F = 200N<\/text><line x1=\"100\" y1=\"100\" x2=\"100\" y2=\"145\" stroke=\"#f43f5e\" strokeWidth=\"4\" markerEnd=\"url(#arr-grav)\" filter=\"url(#glow-up)\" \/><text x=\"110\" y=\"130\" fill=\"#f43f5e\" fontSize=\"13\" fontWeight=\"bold\">mg = 200N<\/text><path d=\"M 50 110 L 50 40\" stroke=\"#10b981\" strokeWidth=\"3\" markerEnd=\"url(#arr-disp-up)\" strokeDasharray=\"4 4\" fill=\"none\" \/><text x=\"40\" y=\"75\" fill=\"#10b981\" fontSize=\"13\" textAnchor=\"end\" fontWeight=\"bold\">\u0394y = 3m<\/text><\/svg><\/div><\/div><\/div><\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 shadow-inner flex flex-col pt-10\"><h3 class=\"text-xl font-bold text-orange-400 mb-6 flex items-center gap-2 border-b border-orange-500\/20 pb-4\"><span class=\"w-1.5 h-6 bg-orange-500 rounded-full\"><\/span>5. \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0630\u064a \u062a\u0628\u0630\u0644\u0647 \u0642\u0648\u0629 \u0645\u062a\u063a\u064a\u0631\u0629<\/h3><p class=\"text-slate-300 text-base leading-relaxed mb-8 bg-slate-900\/30 p-4 rounded-xl border-r-4 border-orange-500\/50\">\u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u063a\u064a\u0631 \u0627\u0644\u0642\u0648\u0629 \u0623\u062b\u0646\u0627\u0621 \u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0633\u0645 (\u0645\u062b\u0644 \u0642\u0648\u0629 \u0627\u0644\u0646\u0627\u0628\u0636)\u060c \u0644\u0627 \u064a\u0645\u0643\u0646\u0646\u0627 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0645\u0628\u0627\u0634\u0631 W = F \u00b7 d. \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0630\u0644\u0643\u060c \u064a\u064f\u062d\u0633\u0628 \u0627\u0644\u0634\u063a\u0644 \u0628\u064a\u0627\u0646\u064a\u0627\u064b: \u062d\u064a\u062b <b>\u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0628\u0630\u0648\u0644 \u064a\u0633\u0627\u0648\u064a \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0645\u0646\u062d\u0646\u0649 (\u0627\u0644\u0642\u0648\u0629 - \u0627\u0644\u0625\u0632\u0627\u062d\u0629) \u0648\u0645\u062d\u0648\u0631 \u0627\u0644\u0625\u0632\u0627\u062d\u0629<\/b>.<\/p>\r\n \r\n <div id=\"variable-force-sim\" class=\"sim-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-8\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-purple-500 rounded-full\"><\/span>\u062b\u0627\u0646\u064a\u0627\u064b: \u0627\u0644\u0642\u062f\u0631\u0629 (Power)<\/h2>\r\n <div class=\"space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner flex items-start gap-4 h-full\"><div class=\"p-3 bg-purple-500\/10 rounded-xl text-purple-400 shrink-0\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2v10\"\/><path d=\"M18.4 4.6a10 10 0 1 1-12.8 0\"\/><\/svg><\/div><div><h3 class=\"text-lg font-bold text-white mb-1\">\u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0642\u062f\u0631\u0629<\/h3><p class=\"text-slate-400 text-l leading-relaxed\">\u0647\u064a \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u0628\u0630\u0644 \u0627\u0644\u0634\u063a\u0644\u060c \u0648\u0647\u064a \u0627\u0644\u0643\u0645\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u062e\u0628\u0631\u0646\u0627 \u0628\u0645\u062f\u0649 \u0633\u0631\u0639\u0629 \u0625\u0646\u062c\u0627\u0632 \u0627\u0644\u0639\u0645\u0644 \u0623\u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0645\u0646 \u0634\u0643\u0644 \u0644\u0622\u062e\u0631 \u062e\u0644\u0627\u0644 \u0641\u062a\u0631\u0629 \u0632\u0645\u0646\u064a\u0629 \u0645\u062d\u062f\u062f\u0629.<\/p><\/div><\/div>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner flex items-start gap-4 h-full\"><div class=\"p-3 bg-purple-500\/10 rounded-xl text-purple-400 shrink-0\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg><\/div><div><h3 class=\"text-lg font-bold text-white mb-1\">\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0642\u064a\u0627\u0633<\/h3><p class=\"text-slate-400 text-l leading-relaxed\">\u062a\u0642\u0627\u0633 \u0628\u0640 <span class=\"text-purple-300 font-bold\">\u0627\u0644\u0648\u0627\u0637 (Watt = J\/s)<\/span> \u062f\u0648\u0644\u064a\u0627\u064b. \u0643\u0645\u0627 \u064a\u0634\u064a\u0639 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <span class=\"text-purple-300 font-bold\">\u0627\u0644\u062d\u0635\u0627\u0646 (hp)<\/span> \u0641\u064a \u0627\u0644\u0645\u062d\u0631\u0643\u0627\u062a\u060c \u062d\u064a\u062b 1 hp = 746 Watt.<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-br from-purple-900\/20 to-slate-900\/40 p-8 rounded-3xl border border-purple-500\/20 shadow-2xl relative overflow-hidden group\"><div class=\"absolute -right-24 -top-24 w-64 h-64 bg-purple-500\/5 blur-3xl rounded-full group-hover:bg-purple-500\/10 transition-colors duration-700\"><\/div><div class=\"flex flex-col lg:flex-row gap-8 items-start relative z-10\"><div class=\"flex-1\"><div class=\"flex items-center gap-3 mb-6\"><span class=\"w-10 h-10 bg-purple-500\/20 rounded-full flex items-center justify-center text-purple-400 font-bold border border-purple-500\/30\">1<\/span><h4 class=\"text-2xl font-black text-white tracking-tight\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629 (Average Power)<\/h4><\/div><div class=\"space-y-4 text-slate-300\"><p class=\"leading-relaxed\">\u062a\u0645\u062b\u0644 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0628\u0630\u0648\u0644 \u0645\u0642\u0633\u0648\u0645\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0632\u0645\u0646\u064a\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u063a\u0631\u0642\u0629. \u0648\u0647\u064a \u062a\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 \u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0643\u0644\u064a \u0644\u0644\u0646\u0638\u0627\u0645 \u062f\u0648\u0646 \u0627\u0644\u062f\u062e\u0648\u0644 \u0641\u064a \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0633\u0631\u0639\u0629 \u0639\u0646\u062f \u0643\u0644 \u0644\u062d\u0638\u0629.<\/p><div class=\"bg-black\/50 p-6 rounded-2xl border border-purple-500\/20 shadow-inner backdrop-blur-l relative\"><div class=\"absolute top-2 left-4 text-[10px] text-purple-500\/50 font-mono uppercase tracking-widest\">Mathematical Formula<\/div><div class=\"text-center py-4\"><span class=\"text-3xl font-mono text-white tracking-tighter\">P<sub>avg<\/sub> = <span class=\"text-purple-400\">W<\/span> \/ <span class=\"text-purple-400\">\u0394t<\/span><\/span><\/div><div class=\"grid grid-cols-2 gap-4 mt-2 pt-4 border-t border-white\/5 text-[11px] text-slate-500 text-center\"><div>W: \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0643\u0644\u064a (J)<\/div><div>t: \u0627\u0644\u0632\u0645\u0646 \u0627\u0644\u0643\u0644\u064a (s)<\/div><\/div><\/div><\/div><\/div><div class=\"lg:w-80 w-full flex flex-col gap-4 shrink-0\"><div class=\"bg-slate-900\/40 p-5 rounded-2xl border border-white\/5\"><h5 class=\"text-purple-300 text-l font-bold mb-3 uppercase tracking-tighter\">\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0645\u0644\u064a<\/h5><p class=\"text-l text-slate-400 leading-normal\">\u0645\u062b\u0627\u0644\u064a\u0629 \u0644\u062a\u0642\u064a\u064a\u0645 \u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u0623\u0648\u0646\u0627\u0634 \u0648\u0627\u0644\u0645\u0635\u0627\u0639\u062f \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0639\u0646\u062f \u0646\u0642\u0644 \u0627\u0644\u0623\u062d\u0645\u0627\u0644 \u0645\u0646 \u0627\u0644\u0637\u0627\u0628\u0642 \u0627\u0644\u0623\u0631\u0636\u064a \u0625\u0644\u0649 \u0627\u0644\u0637\u0648\u0627\u0628\u0642 \u0627\u0644\u0639\u0644\u064a\u0627 \u062e\u0644\u0627\u0644 \u0631\u062d\u0644\u0629 \u0643\u0627\u0645\u0644\u0629.<\/p><\/div><div class=\"bg-purple-500\/10 p-5 rounded-2xl border border-purple-500\/20\"><div class=\"flex items-center gap-2 mb-2 text-white text-l font-bold\"><span><\/span><span>\u062a\u0630\u0643\u0651\u0631:<\/span><\/div><p class=\"text-l text-purple-200\/70 italic\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629 \u0644\u0627 \u062a\u0635\u0641 \u0627\u0644\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u0641\u0627\u062c\u0626\u0629 \u0641\u064a \u0627\u0644\u0642\u0648\u0629 \u0623\u0648 \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u0628\u0644 \u062a\u0639\u0637\u064a \"\u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629\" \u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0625\u0646\u062c\u0627\u0632.<\/p><\/div><\/div><\/div><\/div>\r\n <div class=\"bg-gradient-to-br from-blue-900\/20 to-slate-900\/40 p-8 rounded-3xl border border-blue-500\/20 shadow-2xl relative overflow-hidden group\"><div class=\"absolute -left-24 -bottom-24 w-64 h-64 bg-blue-500\/5 blur-3xl rounded-full group-hover:bg-blue-500\/10 transition-colors duration-700\"><\/div><div class=\"flex flex-col lg:flex-row gap-8 items-start relative z-10\"><div class=\"flex-1\"><div class=\"flex items-center gap-3 mb-6\"><span class=\"w-10 h-10 bg-blue-500\/20 rounded-full flex items-center justify-center text-blue-400 font-bold border border-blue-500\/30\">2<\/span><h4 class=\"text-2xl font-black text-white tracking-tight\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 (Instantaneous Power)<\/h4><\/div><div class=\"space-y-4 text-slate-300\"><p class=\"leading-relaxed\">\u0647\u064a \u0642\u062f\u0631\u0629 \u0627\u0644\u0646\u0638\u0627\u0645 \u0639\u0646\u062f \u0644\u062d\u0638\u0629 \u0632\u0645\u0646\u064a\u0629 \u0645\u0639\u064a\u0646\u0629. \u0648\u0644\u0623\u0646 \u0627\u0644\u0634\u063a\u0644 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0633\u0631\u0639\u0629\u060c \u0641\u0625\u0646 \u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 \u0647\u064a \u0627\u0644\u0636\u0631\u0628 \u0627\u0644\u0646\u0642\u0637\u064a \u0644\u0645\u062a\u062c\u0647 \u0627\u0644\u0642\u0648\u0629 \u0641\u064a \u0645\u062a\u062c\u0647 \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 \u0644\u0644\u062c\u0633\u0645.<\/p><div class=\"bg-black\/50 p-6 rounded-2xl border border-blue-500\/20 shadow-inner backdrop-blur-l relative\"><div class=\"absolute top-2 left-4 text-[10px] text-blue-500\/50 font-mono uppercase tracking-widest\">Dynamic Relation<\/div><div class=\"text-center py-4\"><span class=\"text-3xl font-mono text-white tracking-tighter\">P = <span class=\"text-blue-400\">F<\/span> \u00b7 <span class=\"text-blue-400\">v<\/span> \u00b7 cos\u03b8<\/span><\/div><div class=\"grid grid-cols-2 gap-4 mt-2 pt-4 border-t border-white\/5 text-[11px] text-slate-500 text-center\"><div>F: \u0627\u0644\u0642\u0648\u0629 (N)<\/div><div>v: \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629 (m\/s)<\/div><\/div><\/div><\/div><\/div><div class=\"lg:w-80 w-full flex flex-col gap-4 shrink-0\"><div class=\"bg-slate-900\/40 p-5 rounded-2xl border border-white\/5\"><h5 class=\"text-blue-300 text-l font-bold mb-3 uppercase tracking-tighter\">\u062d\u0627\u0644\u0629 \u062e\u0627\u0635\u0629<\/h5><p class=\"text-l text-slate-400 leading-normal\">\u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0633\u0631\u0639\u0629 \u062a\u0645\u0627\u0645\u0627\u064b (\u03b8 = 0)\u060c \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u062f\u0631\u0629 \u0641\u064a \u0623\u0642\u0635\u0649 \u0642\u064a\u0645\u062a\u0647\u0627 \u0648\u062a\u0633\u0627\u0648\u064a \u0628\u0628\u0633\u0627\u0637\u0629 P = Fv.<\/p><\/div><div class=\"bg-blue-500\/10 p-5 rounded-2xl border border-blue-500\/20\"><div class=\"flex items-center gap-2 mb-2 text-white text-l font-bold\"><span><\/span><span>\u0645\u062b\u0627\u0644:<\/span><\/div><p class=\"text-l text-blue-200\/70 italic\">\u0639\u062f\u0627\u062f \u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062d\u0631\u0643 \u0641\u064a \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u064a\u0638\u0647\u0631 \u0644\u0643 \u0627\u0644\u0642\u062f\u0631\u0629 \"\u0627\u0644\u0644\u062d\u0638\u064a\u0629\" \u0627\u0644\u062a\u064a \u064a\u0648\u0644\u062f\u0647\u0627 \u0627\u0644\u0645\u062d\u0631\u0643 \u0639\u0646\u062f \u0643\u0644 \u0636\u063a\u0637\u0629 \u0639\u0644\u0649 \u0627\u0644\u0648\u0642\u0648\u062f.<\/p><\/div><\/div><\/div><\/div>\r\n\r\n \r\n <div class=\"bg-slate-900 border border-slate-700\/50 rounded-3xl p-1 overflow-hidden shadow-2xl\"><div class=\"bg-slate-800\/50 p-4 border-b border-white\/5 text-center\"><span class=\"text-[10px] text-purple-400 font-bold uppercase tracking-[0.3em]\">Interactive Simulation \/ \u0645\u062e\u062a\u0628\u0631 \u0627\u0644\u0642\u062f\u0631\u0629<\/span><\/div><div id=\"power-sim\" class=\"sim-container\"><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\"><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>\u0623\u0645\u062b\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/h2><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\"><div class=\"bg-slate-900\/60 p-6 rounded-2xl border border-amber-500\/20\"><h4 class=\"text-amber-400 font-bold mb-3 text-l flex justify-between\"><span>\u0645\u062b\u0627\u0644 1: \u0627\u0644\u0634\u063a\u0644 \u0644\u0642\u0648\u0629 \u062b\u0627\u0628\u062a\u0629<\/span><span class=\"text-l bg-amber-500\/10 px-2 py-1 rounded text-amber-300\">\u0635\u0641\u062d\u0629 13<\/span><\/h4><p class=\"text-l text-slate-300 mb-4 leading-relaxed\">\u064a\u0633\u062d\u0628 \u0645\u062d\u0645\u062f \u0635\u0646\u062f\u0648\u0642\u0627\u064b (20 kg) \u0645\u0633\u0627\u0641\u0629 5 m \u0628\u062d\u0628\u0644 \u064a\u0645\u064a\u0644 37\u00b0. \u0642\u0648\u0629 \u0627\u0644\u0634\u062f 140 N.<\/p><div class=\"space-y-2 font-mono text-l text-slate-300\"><p><span class=\"text-amber-500\">W<sub>F<\/sub><\/span> = F d cos(37\u00b0)<\/p><p><span class=\"text-amber-500\">W<sub>F<\/sub><\/span> = 140 \u00d7 5 \u00d7 0.8 = <span class=\"bg-amber-500\/20 px-1 rounded text-white\">560 J<\/span><\/p><p class=\"text-[10px] text-slate-400 mt-2 font-sans border-t border-white\/5 pt-2\">\u0634\u063a\u0644 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 W<sub>g<\/sub> = 0 \u0644\u0623\u0646 \u03b8 = 90\u00b0<\/p><\/div><\/div><div class=\"bg-slate-900\/60 p-6 rounded-2xl border border-amber-500\/20\"><h4 class=\"text-amber-400 font-bold mb-3 text-l flex justify-between\"><span>\u062a\u062f\u0631\u064a\u0628 1: \u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629<\/span><span class=\"text-l bg-amber-500\/10 px-2 py-1 rounded text-amber-300\">\u0635\u0641\u062d\u0629 22<\/span><\/h4><p class=\"text-l text-slate-300 mb-4 leading-relaxed\">\u0633\u064a\u0627\u0631\u0629 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 25 m\/s. \u0645\u062c\u0645\u0648\u0639 \u0642\u0648\u0649 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 2000 N.<\/p><div class=\"space-y-2 font-mono text-l text-slate-300\"><p class=\"text-[10px] font-sans text-slate-400 mb-2\">\u0628\u0645\u0627 \u0623\u0646 \u0627\u0644\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0627\u0644\u0642\u0648\u0629 = \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 = 2000 N<\/p><p><span class=\"text-amber-500\">P<\/span> = F \u00d7 v<\/p><p><span class=\"text-amber-500\">P<\/span> = 2000 \u00d7 25 = <span class=\"bg-amber-500\/20 px-1 rounded text-white\">50 kW<\/span><\/p><\/div><\/div><\/div><\/section>\r\n\r\n \r\n <section class=\"bg-gradient-to-r from-emerald-900\/40 to-teal-900\/40 p-8 rounded-3xl border border-emerald-500\/30\"><h3 class=\"text-xl font-bold text-white mb-6\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h3><div class=\"overflow-x-auto\"><table class=\"w-full text-l text-right\"><thead><tr class=\"text-emerald-300 border-b border-emerald-500\/30\"><th class=\"py-2 px-4\">\u0627\u0644\u0645\u0641\u0647\u0648\u0645<\/th><th class=\"py-2 px-4\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629<\/th><th class=\"py-2 px-4\">\u0627\u0644\u0648\u062d\u062f\u0629<\/th><\/tr><\/thead><tbody class=\"text-slate-300 divide-y divide-emerald-500\/10\"><tr><td class=\"py-3 px-4 font-bold text-white\">\u0627\u0644\u0634\u063a\u0644 (\u062b\u0627\u0628\u062a\u0629)<\/td><td class=\"py-3 px-4 font-mono text-emerald-200\">W = F d cos\u03b8<\/span><\/td><td class=\"py-3 px-4\">\u062c\u0648\u0644 (J)<\/td><\/tr>\r\n <tr><td class=\"py-3 px-4 font-bold text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0645\u062a\u0648\u0633\u0637\u0629<\/span><\/td><td class=\"py-3 px-4 font-mono text-emerald-200\">P = W \/ \u0394t<\/span><\/td><td class=\"py-3 px-4\">\u0648\u0627\u0637 (W)<\/td><\/tr>\r\n <tr><td class=\"py-3 px-4 font-bold text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0627\u0644\u0644\u062d\u0638\u064a\u0629<\/span><\/td><td class=\"py-3 px-4 font-mono text-emerald-200\">P = F v cos\u03b8<\/span><\/td><td class=\"py-3 px-4\">\u0648\u0627\u0637 (W)<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div class=\"mt-6 pt-4 border-t border-emerald-500\/20 text-l text-emerald-100\/70\"><b>\u0645\u0644\u0627\u062d\u0638\u0629 \u0647\u0627\u0645\u0629:<\/b> \u0627\u0644\u0634\u063a\u0644 \u0643\u0645\u064a\u0629 \u0642\u064a\u0627\u0633\u064a\u0629 (\u0644\u064a\u0633 \u0644\u0647\u0627 \u0627\u062a\u062c\u0627\u0647)\u060c \u0648\u0644\u0643\u0646\u0647 \u0642\u062f \u064a\u0643\u0648\u0646 \u0645\u0648\u062c\u0628\u0627\u064b (\u064a\u0643\u0633\u0628 \u0637\u0627\u0642\u0629) \u0623\u0648 \u0633\u0627\u0644\u0628\u0627\u064b (\u064a\u0641\u0642\u062f \u0637\u0627\u0642\u0629).<\/div>\r\n <\/section>\r\n<\/div>\r\n <\/div>\r\n\r\n <script type=\"text\/babel\">\r\n \/\/ ------------------------------\r\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062a\u062c\u0647\u064a \u0644\u0644\u0634\u063a\u0644 (WorkVectorSimulation)\r\n \/\/ ------------------------------\r\n const WorkVectorSimulation = () => {\r\n const [force, setForce] = React.useState(50);\r\n const [angle, setAngle] = React.useState(30);\r\n const [displacement, setDisplacement] = React.useState(5);\r\n\r\n const angleRad = (angle * Math.PI) \/ 180;\r\n const Fx = force * Math.cos(angleRad);\r\n const Fy = force * Math.sin(angleRad);\r\n const work = Fx * displacement;\r\n\r\n \/\/ SVG coordinate system\r\n const width = 600;\r\n const height = 300;\r\n const originX = 150;\r\n const originY = 220;\r\n\r\n \/\/ Scaling\r\n const scaleF = 2; \/\/ N to pixels\r\n const scaleD = 40; \/\/ m to pixels\r\n\r\n const endX_F = originX + Fx * scaleF;\r\n const endY_F = originY - Fy * scaleF;\r\n const endX_d = originX + displacement * scaleD;\r\n\r\n \/\/ Generate path for the angle arc\r\n const radiusArc = 40;\r\n const arcX = originX + radiusArc * Math.cos(angleRad);\r\n const arcY = originY - radiusArc * Math.sin(angleRad);\r\n const arcLargeFlag = angle > 180 ? 1 : 0;\r\n const arcPath = `M ${originX + radiusArc} ${originY} A ${radiusArc} ${radiusArc} 0 ${arcLargeFlag} 0 ${arcX} ${arcY}`;\r\n\r\n return (\r\n <div className=\"bg-slate-800\/80 p-6 rounded-2xl border border-slate-700 shadow-xl max-w-4xl mx-auto flex flex-col gap-6\" dir=\"rtl\">\r\n <h3 className=\"text-xl font-bold text-white mb-2 flex items-center gap-2\">\r\n <span className=\"w-2 h-6 bg-indigo-500 rounded-full inline-block\"><\/span>\r\n \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0645\u062a\u062c\u0647\u064a \u0644\u0644\u0634\u063a\u0644\r\n <\/h3>\r\n \r\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n {\/* Controls & Data *\/}\r\n <div className=\"lg:col-span-1 space-y-6 bg-slate-900\/50 p-5 rounded-xl border border-slate-700\/50\">\r\n <div className=\"space-y-3\">\r\n <label className=\"flex justify-between text-l font-semibold text-indigo-300\">\r\n <span>\u0627\u0644\u0642\u0648\u0629 (F)<\/span>\r\n <span className=\"tabular-nums\">{force} N<\/span>\r\n <\/label>\r\n <input type=\"range\" min=\"0\" max=\"100\" step=\"1\" value={force} onChange={(e) => setForce(Number(e.target.value))} className=\"w-full accent-indigo-500\" \/>\r\n <\/div>\r\n <div className=\"space-y-3\">\r\n <label className=\"flex justify-between text-l font-semibold text-rose-300\">\r\n <span>\u0627\u0644\u0632\u0627\u0648\u064a\u0629 (\u03b8)<\/span>\r\n <span className=\"tabular-nums\">{angle}\u00b0<\/span>\r\n <\/label>\r\n <input type=\"range\" min=\"0\" max=\"180\" step=\"1\" value={angle} onChange={(e) => setAngle(Number(e.target.value))} className=\"w-full accent-rose-500\" \/>\r\n <\/div>\r\n <div className=\"space-y-3\">\r\n <label className=\"flex justify-between text-l font-semibold text-emerald-300\">\r\n <span>\u0627\u0644\u0625\u0632\u0627\u062d\u0629 (d)<\/span>\r\n <span className=\"tabular-nums\">{displacement} m<\/span>\r\n <\/label>\r\n <input type=\"range\" min=\"0\" max=\"10\" step=\"1\" value={displacement} onChange={(e) => setDisplacement(Number(e.target.value))} className=\"w-full accent-emerald-500\" \/>\r\n <\/div>\r\n\r\n <div className=\"mt-8 p-4 bg-black\/40 rounded-lg border border-slate-600 space-y-3\">\r\n <div className=\"flex justify-between text-l\">\r\n <span className=\"text-slate-400\">\u0645\u0631\u0643\u0628\u0629 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629 (F<sub>x<\/sub>)<\/span>\r\n <span className=\"text-indigo-300 font-mono tabular-nums\" dir=\"ltr\">{Fx.toFixed(1)} N<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between text-l border-t border-slate-700 pt-3\">\r\n <span className=\"text-slate-200 font-bold\">\u0627\u0644\u0634\u063a\u0644 (W)<\/span>\r\n <span className={`font-mono font-bold tabular-nums text-lg ${work > 0 ? 'text-emerald-400' : work < 0 ? 'text-rose-400' : 'text-slate-400'}`} dir=\"ltr\">\r\n {work.toFixed(1)} J\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* SVG Visual *\/}\r\n <div className=\"lg:col-span-2 relative bg-[#0f172a] rounded-xl border border-slate-750 overflow-hidden flex items-center justify-center min-h-[300px]\">\r\n <svg width=\"100%\" height=\"100%\" viewBox={`0 0 ${width} ${height}`} className=\"mx-auto block\" preserveAspectRatio=\"xMidYMid meet\">\r\n <defs>\r\n <marker id=\"arrow-F\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 L 2 5 z\" fill=\"#6366f1\" \/>\r\n <\/marker>\r\n <marker id=\"arrow-d\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto-start-reverse\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 L 2 5 z\" fill=\"#10b981\" \/>\r\n <\/marker>\r\n <marker id=\"arrow-Fx\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto-start-reverse\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 L 2 5 z\" fill=\"#818cf8\" \/>\r\n <\/marker>\r\n <\/defs>\r\n \r\n {\/* Floor *\/}\r\n <line x1=\"20\" y1={originY} x2={width - 20} y2={originY} stroke=\"#334155\" strokeWidth=\"4\" \/>\r\n \r\n {\/* Box *\/}\r\n <rect x={originX - 30} y={originY - 30} width=\"60\" height=\"60\" fill=\"#475569\" stroke=\"#94a3b8\" strokeWidth=\"2\" rx=\"4\" \/>\r\n <circle cx={originX} cy={originY} r=\"4\" fill=\"#cbd5e1\" \/>\r\n \r\n {\/* Angle Arc *\/}\r\n {angle > 0 && force > 0 && (\r\n <path d={arcPath} fill=\"none\" stroke=\"#f43f5e\" strokeWidth=\"2\" \/>\r\n )}\r\n {angle > 0 && force > 0 && (\r\n <text x={originX + radiusArc + 15} y={originY - radiusArc \/ 2} fill=\"#f43f5e\" fontSize=\"14\" fontWeight=\"bold\">\u03b8 = {angle}\u00b0<\/text>\r\n )}\r\n\r\n {\/* Displacement Vector *\/}\r\n {displacement > 0 && (\r\n <g>\r\n <line \r\n x1={originX} y1={originY + 45} \r\n x2={endX_d} y2={originY + 45} \r\n stroke=\"#10b981\" strokeWidth=\"4\" \r\n markerEnd=\"url(#arrow-d)\" \r\n \/>\r\n <text x={originX + (displacement * scaleD) \/ 2} y={originY + 65} fill=\"#10b981\" fontSize=\"16\" fontWeight=\"bold\" textAnchor=\"middle\">\r\n d = {displacement} m\r\n <\/text>\r\n <\/g>\r\n )}\r\n\r\n {\/* Force Component Fx (Dashed) *\/}\r\n {force > 0 && Math.abs(Fx) > 0.1 && (\r\n <line \r\n x1={originX} y1={originY} \r\n x2={endX_F} y2={originY} \r\n stroke=\"#818cf8\" strokeWidth=\"3\" strokeDasharray=\"6 4\" \r\n markerEnd=\"url(#arrow-Fx)\" \r\n \/>\r\n )}\r\n\r\n {\/* Vertical dotted line from F to Fx *\/}\r\n {force > 0 && angle !== 0 && angle !== 180 && (\r\n <line \r\n x1={endX_F} y1={originY} \r\n x2={endX_F} y2={endY_F} \r\n stroke=\"#64748b\" strokeWidth=\"2\" strokeDasharray=\"4 4\" \r\n \/>\r\n )}\r\n\r\n {\/* Force Vector F *\/}\r\n {force > 0 && (\r\n <g>\r\n <line \r\n x1={originX} y1={originY} \r\n x2={endX_F} y2={endY_F} \r\n stroke=\"#6366f1\" strokeWidth=\"4\" \r\n markerEnd=\"url(#arrow-F)\" \r\n \/>\r\n <text x={endX_F + (angle > 90 ? -40 : 10)} y={endY_F - 10} fill=\"#818cf8\" fontSize=\"14\" fontWeight=\"bold\">\r\n F = {force} N\r\n <\/text>\r\n <\/g>\r\n )}\r\n \r\n {\/* W = 0 indicator when angle is 90 *\/}\r\n {angle === 90 && force > 0 && displacement > 0 && (\r\n <text x={originX + 10} y={originY - 80} fill=\"#94a3b8\" fontSize=\"14\" fontWeight=\"bold\">\r\n \u0627\u0644\u0634\u063a\u0644 = 0 (\u0627\u0644\u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629)\r\n <\/text>\r\n )}\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ------------------------------\r\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0629 (WorkVariableForceSim)\r\n \/\/ ------------------------------\r\n const WorkVariableForceSim = () => {\r\n const [d, setD] = React.useState(0);\r\n const maxD = 5;\r\n const stage1End = 2;\r\n const maxF = 40;\r\n const getCurrentForce = (currentD) => currentD <= stage1End ? (maxF \/ stage1End) * currentD : maxF;\r\n const calculateWork = (currentD) => {\r\n if (currentD <= stage1End) return 0.5 * currentD * getCurrentForce(currentD);\r\n else return 0.5 * stage1End * maxF + (currentD - stage1End) * maxF;\r\n };\r\n const currentF = getCurrentForce(d);\r\n const currentWork = calculateWork(d);\r\n const width = 300, height = 180, padding = 30;\r\n const graphWidth = width - padding * 2;\r\n const graphHeight = height - padding * 2;\r\n const getX = (val) => padding + (val \/ maxD) * graphWidth;\r\n const getY = (val) => height - padding - (val \/ 50) * graphHeight;\r\n return (\r\n <div className=\"bg-slate-900\/50 p-6 rounded-2xl border border-orange-500\/20 shadow-xl overflow-hidden\">\r\n <div className=\"flex flex-col lg:flex-row gap-8 items-center\">\r\n <div className=\"flex-1 w-full flex flex-col items-center\">\r\n <div className=\"relative group w-full max-w-[400px]\">\r\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`} className=\"overflow-visible drop-shadow-lg\">\r\n <defs><marker id=\"arrowhead-gray\" markerWidth=\"6\" markerHeight=\"6\" refX=\"3\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L6,3 L0,6 Z\" fill=\"#94a3b8\" \/><\/marker><pattern id=\"hatch-sim\" width=\"8\" height=\"8\" patternTransform=\"rotate(45 0 0)\" patternUnits=\"userSpaceOnUse\"><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"8\" stroke=\"#f97316\" strokeWidth=\"1\" strokeOpacity=\"0.4\" \/><\/pattern><\/defs>\r\n {[10,20,30,40,50].map(val => (<line key={val} x1={padding} y1={getY(val)} x2={width-padding} y2={getY(val)} stroke=\"#1e293b\" strokeWidth=\"1\" \/>))}\r\n {[1,2,3,4,5].map(val => (<line key={val} x1={getX(val)} y1={padding} x2={getX(val)} y2={height-padding} stroke=\"#1e293b\" strokeWidth=\"1\" \/>))}\r\n <line x1={padding} y1={height-padding} x2={width-10} y2={height-padding} stroke=\"#94a3b8\" strokeWidth=\"2\" markerEnd=\"url(#arrowhead-gray)\" \/>\r\n <line x1={padding} y1={height-padding} x2={padding} y2={10} stroke=\"#94a3b8\" strokeWidth=\"2\" markerEnd=\"url(#arrowhead-gray)\" \/>\r\n <text x={width-5} y={height-padding+15} fill=\"#94a3b8\" fontSize=\"10\" textAnchor=\"end\">d (m)<\/text>\r\n <text x={padding-10} y={15} fill=\"#94a3b8\" fontSize=\"10\" textAnchor=\"start\">F (N)<\/text>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(Math.min(d, stage1End))},${getY(getCurrentForce(Math.min(d, stage1End)))} ${d > stage1End ? `L ${getX(d)},${getY(maxF)}` : ''} L ${getX(d)},${height-padding} L ${getX(0)},${height-padding} Z`} fill=\"url(#hatch-sim)\" className=\"transition-all duration-300 ease-out\" \/>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(Math.min(d, stage1End))},${getY(getCurrentForce(Math.min(d, stage1End)))} ${d > stage1End ? `L ${getX(d)},${getY(maxF)}` : ''} L ${getX(d)},${height-padding} L ${getX(0)},${height-padding} Z`} fill=\"rgba(249, 115, 22, 0.1)\" \/>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(stage1End)},${getY(maxF)} L ${getX(maxD)},${getY(maxF)}`} fill=\"none\" stroke=\"#475569\" strokeWidth=\"2\" strokeDasharray=\"4 4\" \/>\r\n <path d={`M ${getX(0)},${getY(0)} L ${getX(Math.min(d, stage1End))},${getY(getCurrentForce(Math.min(d, stage1End)))} ${d > stage1End ? `L ${getX(d)},${getY(maxF)}` : ''}`} fill=\"none\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" className=\"transition-all duration-300 ease-out\" \/>\r\n <line x1={getX(d)} y1={height-padding} x2={getX(d)} y2={getY(currentF)} stroke=\"#f97316\" strokeWidth=\"1\" strokeDasharray=\"2 2\" \/>\r\n <circle cx={getX(d)} cy={getY(currentF)} r=\"4\" fill=\"#f97316\" className=\"transition-all duration-300 ease-out\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div className=\"w-full max-w-[300px] mt-4\"><input type=\"range\" min=\"0\" max={maxD} step=\"0.1\" value={d} onChange={(e) => setD(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-orange-500\" \/><div className=\"flex justify-between text-[10px] text-slate-500 font-mono mt-1\"><span>0m<\/span><span>2m<\/span><span>5m<\/span><\/div><\/div>\r\n <\/div>\r\n <div className=\"flex-1 w-full space-y-4\">\r\n <div className=\"grid grid-cols-2 gap-3\"><div className=\"bg-black\/30 p-3 rounded-xl border border-slate-700\"><div className=\"text-[10px] text-slate-500 uppercase tracking-wider mb-1\">\u0627\u0644\u0625\u0632\u0627\u062d\u0629 (d)<\/div><div className=\"text-xl font-bold font-mono text-white leading-none\">{d.toFixed(1)} <span className=\"text-l text-slate-400\">m<\/span><\/div><\/div><div className=\"bg-black\/30 p-3 rounded-xl border border-slate-700\"><div className=\"text-[10px] text-slate-500 uppercase tracking-wider mb-1\">\u0627\u0644\u0642\u0648\u0629 (F)<\/div><div className=\"text-xl font-bold font-mono text-orange-400 leading-none\">{currentF.toFixed(0)} <span className=\"text-l text-slate-400\">N<\/span><\/div><\/div><\/div>\r\n <div className=\"bg-orange-500\/10 p-4 rounded-xl border border-orange-500\/20\"><div className=\"flex justify-between items-end mb-2\"><div className=\"text-l text-orange-300 font-bold\">\u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0628\u0630\u0648\u0644 (\u0627\u0644\u0645\u0633\u0627\u062d\u0629):<\/div><div className=\"text-2xl font-bold font-mono text-white\">{currentWork.toFixed(1)} <span className=\"text-l text-orange-400 font-normal\">Joule<\/span><\/div><\/div><div className=\"space-y-2 border-t border-orange-500\/10 pt-2\"><div className=\"flex text-[11px] justify-between\"><span className=\"text-slate-400\">\u0634\u063a\u0644 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 1 (\u0627\u0644\u0645\u062b\u0644\u062b):<\/span><span className={`font-mono transition-colors ${d <= stage1End ? 'text-orange-300' : 'text-slate-500'}`}>{d <= stage1End ? `\u00bd \u00d7 ${d.toFixed(1)} \u00d7 ${currentF.toFixed(0)}` : `\u00bd \u00d7 2 \u00d7 40 = 40`} J<\/span><\/div>{d > stage1End && (<div className=\"flex text-[11px] justify-between\"><span className=\"text-slate-400\">\u0634\u063a\u0644 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 2 (\u0627\u0644\u0645\u0633\u062a\u0637\u064a\u0644):<\/span><span className=\"font-mono text-cyan-300\">{(d - stage1End).toFixed(1)} \u00d7 40 = {((d - stage1End) * maxF).toFixed(0)} J<\/span><\/div>)}<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ------------------------------\r\n \/\/ 3. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u064a\u0646 \u0627\u0644\u0642\u062f\u0631\u0627\u062a (PowerComparisonSim)\r\n \/\/ ------------------------------\r\n const PowerComparisonSim = () => {\r\n const [weight, setWeight] = React.useState(200);\r\n const [height, setHeight] = React.useState(5);\r\n const [powerA, setPowerA] = React.useState(100);\r\n const [powerB, setPowerB] = React.useState(50);\r\n const [isLifting, setIsLifting] = React.useState(false);\r\n const [progressA, setProgressA] = React.useState(0);\r\n const [progressB, setProgressB] = React.useState(0);\r\n const [timeA, setTimeA] = React.useState(0);\r\n const [timeB, setTimeB] = React.useState(0);\r\n const requestRef = React.useRef(null);\r\n const startTimeRef = React.useRef(null);\r\n const reset = () => { setIsLifting(false); setProgressA(0); setProgressB(0); setTimeA(0); setTimeB(0); if (requestRef.current) cancelAnimationFrame(requestRef.current); };\r\n const animate = (timestamp) => {\r\n if (!startTimeRef.current) startTimeRef.current = timestamp;\r\n const elapsed = (timestamp - startTimeRef.current) \/ 1000;\r\n const totalWork = weight * height;\r\n const targetTimeA = totalWork \/ powerA;\r\n const targetTimeB = totalWork \/ powerB;\r\n let stoppedA = false, stoppedB = false;\r\n if (elapsed < targetTimeA) { setProgressA((elapsed \/ targetTimeA) * 100); setTimeA(elapsed); } else { setProgressA(100); setTimeA(targetTimeA); stoppedA = true; }\r\n if (elapsed < targetTimeB) { setProgressB((elapsed \/ targetTimeB) * 100); setTimeB(elapsed); } else { setProgressB(100); setTimeB(targetTimeB); stoppedB = true; }\r\n if (stoppedA && stoppedB) { setIsLifting(false); return; }\r\n requestRef.current = requestAnimationFrame(animate);\r\n };\r\n const startLifting = () => { reset(); setIsLifting(true); startTimeRef.current = null; requestRef.current = requestAnimationFrame(animate); };\r\n React.useEffect(() => () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }, []);\r\n const totalWork = weight * height;\r\n return (\r\n <div className=\"bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-2xl text-white font-sans max-w-4xl mx-auto overflow-hidden relative\">\r\n <div className=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-blue-500 to-amber-500 opacity-50\"><\/div>\r\n <div className=\"flex flex-col md:flex-row justify-between items-center mb-8 gap-4 border-b border-white\/5 pb-6\">\r\n <div className=\"text-right\"><h3 className=\"text-xl font-black text-white flex items-center gap-2 justify-end\">\u0627\u0644\u0642\u062f\u0631\u0629: \u0627\u0644\u0645\u0639\u062f\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0644\u0644\u0634\u063a\u0644<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-purple-400 fill-purple-400\"><path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\"><\/path><\/svg><\/h3><p className=\"text-slate-400 text-l mt-1\">\u0642\u0627\u0631\u0646 \u0628\u064a\u0646 \u0645\u062d\u0631\u0643\u064a\u0646 \u064a\u0646\u062c\u0632\u0627\u0646 \u0646\u0641\u0633 \u0627\u0644\u0634\u063a\u0644 \u0628\u0642\u062f\u0631\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u0629<\/p><\/div>\r\n <div className=\"flex gap-2\"><button onClick={reset} className=\"p-3 bg-slate-800 hover:bg-slate-700 rounded-xl transition-colors border border-white\/5 shadow-lg\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-slate-300\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"><\/path><path d=\"M3 3v5h5\"><\/path><\/svg><\/button><button onClick={startLifting} disabled={isLifting} className={`flex items-center gap-2 px-6 py-3 rounded-xl font-bold transition-all shadow-lg ${isLifting ? 'bg-slate-800 text-slate-500 cursor-not-allowed' : 'bg-purple-600 hover:bg-purple-500 text-white active:scale-95'}`}><span>\u0627\u0628\u062f\u0623 \u0627\u0644\u0631\u0641\u0639<\/span><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\"><\/path><\/svg><\/button><\/div>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 lg:grid-cols-4 gap-8\">\r\n <div className=\"lg:col-span-1 space-y-6\">\r\n <div className=\"space-y-4\"><div className=\"flex justify-between items-center bg-black\/20 p-3 rounded-xl border border-white\/5\"><span className=\"text-amber-400 font-mono text-l\">{weight} N<\/span><label className=\"text-l text-slate-400 font-bold flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"5\" r=\"3\"><\/circle><path d=\"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z\"><\/path><\/svg> \u0627\u0644\u0648\u0632\u0646 (\u0627\u0644\u0642\u0648\u0629)<\/label><\/div><input type=\"range\" min=\"50\" max=\"500\" step=\"10\" value={weight} onChange={(e) => setWeight(parseInt(e.target.value))} disabled={isLifting} className=\"w-full accent-amber-500 cursor-pointer h-1.5\" \/><\/div>\r\n <div className=\"space-y-4\"><div className=\"flex justify-between items-center bg-black\/20 p-3 rounded-xl border border-white\/5\"><span className=\"text-blue-400 font-mono text-l\">{height} m<\/span><label className=\"text-l text-slate-400 font-bold flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"m16 12-4-4-4 4\"><\/path><path d=\"M12 16V8\"><\/path><\/svg> \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0637\u0644\u0648\u0628<\/label><\/div><input type=\"range\" min=\"1\" max=\"10\" step=\"0.5\" value={height} onChange={(e) => setHeight(parseFloat(e.target.value))} disabled={isLifting} className=\"w-full accent-blue-500 cursor-pointer h-1.5\" \/><\/div>\r\n <div className=\"bg-indigo-500\/10 p-4 rounded-2xl border border-indigo-500\/20 shadow-inner\"><div className=\"text-l text-indigo-300 font-bold mb-3 border-b border-indigo-500\/10 pb-2\">\u062d\u0633\u0627\u0628 \u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 (W)<\/div><div className=\"text-center font-mono py-2\"><div className=\"text-[10px] text-slate-500 mb-1 tracking-widest\">W = F \u00d7 d<\/div><div className=\"text-xl text-white font-black\">{totalWork.toLocaleString()} J<\/div><\/div><\/div>\r\n <\/div>\r\n <div className=\"lg:col-span-3 grid grid-cols-2 gap-4 h-[400px]\">\r\n <div className=\"flex flex-col bg-slate-800\/20 rounded-3xl border border-white\/5 overflow-hidden relative\"><div className=\"bg-purple-500\/20 p-3 text-center border-b border-purple-500\/20\"><span className=\"text-l font-black text-purple-300 uppercase tracking-widest\">\u0627\u0644\u0645\u062d\u0631\u0643 (\u0623) - \u0642\u062f\u0631\u0629 \u0623\u0639\u0644\u0649<\/span><\/div><div className=\"flex-1 relative flex items-end justify-center p-6 border-b border-white\/5\"><div className=\"absolute inset-0 bg-[linear-gradient(to_top,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:100%_40px]\"><\/div><div className=\"absolute left-0 w-full border-t border-slate-600\/30\" style={{bottom: 'calc(10% + 80%)'}}><\/div><div className=\"absolute top-4 right-4 w-12 h-12 border-4 border-purple-500\/30 rounded-full flex items-center justify-center\"><div className=\"w-1 h-8 bg-purple-500\/50 rounded-full\"><\/div><\/div><div className=\"absolute w-24 h-24 bg-purple-600\/20 border-2 border-purple-500 rounded-2xl flex items-center justify-center shadow-[0_0_30px_rgba(168,85,247,0.1)] transition-transform duration-300\" style={{bottom: `calc(10% + ${progressA * 0.8}%)`}}><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-purple-400 opacity-50\"><circle cx=\"12\" cy=\"5\" r=\"3\"><\/circle><path d=\"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z\"><\/path><\/svg><div className=\"absolute -top-10 bg-purple-500\/20 px-2 py-0.5 rounded text-[10px] border border-purple-500\/30 font-mono\">{progressA.toFixed(0)}%<\/div><\/div><\/div><div className=\"p-4 bg-black\/40 space-y-3\"><div className=\"flex justify-between items-center border-b border-white\/5 pb-2\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest\">Power (P)<\/span><span className=\"text-l font-mono text-purple-400 font-bold\">{powerA} W<\/span><\/div><div className=\"flex justify-between items-center\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 6v6l4 2\"><\/path><\/svg> Time (t)<\/span><span className=\"text-l font-mono text-white tracking-widest\">{timeA.toFixed(2)}s<\/span><\/div><div className=\"mt-2 h-1 w-full bg-slate-900 rounded-full overflow-hidden\"><div className=\"h-full bg-purple-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]\" style={{width: `${(powerA \/ 100) * 100}%`}}><\/div><\/div><\/div><\/div>\r\n <div className=\"flex flex-col bg-slate-800\/20 rounded-3xl border border-white\/5 overflow-hidden relative\"><div className=\"bg-blue-500\/20 p-3 text-center border-b border-blue-500\/20\"><span className=\"text-l font-black text-blue-300 uppercase tracking-widest\">\u0627\u0644\u0645\u062d\u0631\u0643 (\u0628) - \u0642\u062f\u0631\u0629 \u0623\u0642\u0644<\/span><\/div><div className=\"flex-1 relative flex items-end justify-center p-6 border-b border-white\/5\"><div className=\"absolute inset-0 bg-[linear-gradient(to_top,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:100%_40px]\"><\/div><div className=\"absolute left-0 w-full border-t border-slate-600\/30\" style={{bottom: 'calc(10% + 80%)'}}><\/div><div className=\"absolute top-4 right-4 w-12 h-12 border-4 border-blue-500\/30 rounded-full flex items-center justify-center\"><div className=\"w-1 h-8 bg-blue-500\/50 rounded-full\"><\/div><\/div><div className=\"absolute w-24 h-24 bg-blue-600\/20 border-2 border-blue-500 rounded-2xl flex items-center justify-center shadow-[0_0_30px_rgba(59,130,246,0.1)] transition-transform duration-300\" style={{bottom: `calc(10% + ${progressB * 0.8}%)`}}><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-blue-400 opacity-50\"><circle cx=\"12\" cy=\"5\" r=\"3\"><\/circle><path d=\"M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z\"><\/path><\/svg><div className=\"absolute -top-10 bg-blue-500\/20 px-2 py-0.5 rounded text-[10px] border border-blue-500\/30 font-mono\">{progressB.toFixed(0)}%<\/div><\/div><\/div><div className=\"p-4 bg-black\/40 space-y-3\"><div className=\"flex justify-between items-center border-b border-white\/5 pb-2\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest\">Power (P)<\/span><span className=\"text-l font-mono text-blue-400 font-bold\">{powerB} W<\/span><\/div><div className=\"flex justify-between items-center\"><span className=\"text-[10px] text-slate-500 uppercase font-bold tracking-widest flex items-center gap-1\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 6v6l4 2\"><\/path><\/svg> Time (t)<\/span><span className=\"text-l font-mono text-white tracking-widest\">{timeB.toFixed(2)}s<\/span><\/div><div className=\"mt-2 h-1 w-full bg-slate-900 rounded-full overflow-hidden\"><div className=\"h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]\" style={{width: `${(powerB \/ 100) * 100}%`}}><\/div><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"mt-8 bg-black\/40 rounded-3xl p-6 border border-white\/5 relative overflow-hidden\"><div className=\"absolute top-0 right-0 w-32 h-32 bg-purple-500\/5 blur-3xl -mr-16 -mt-16\"><\/div><div className=\"flex flex-col md:flex-row gap-8 items-center justify-around relative z-10\"><div className=\"text-center group\"><div className=\"text-[10px] text-slate-500 uppercase font-bold mb-2 tracking-[0.2em]\">Conclusion<\/div><div className=\"text-lg text-white font-bold mb-1 leading-relaxed\">\u0627\u0644\u0634\u063a\u0644 \u0627\u0644\u0645\u0646\u062c\u0632 \u0645\u062a\u0633\u0627\u0648\u064d \u062a\u0645\u0627\u0645\u0627\u064b<\/div><p className=\"text-[11px] text-slate-400\">\u0644\u0623\u0646 \u0627\u0644\u0648\u0632\u0646 \u0648\u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0644\u0645 \u064a\u062a\u063a\u064a\u0631\u0627<\/p><div className=\"h-0.5 w-12 bg-purple-500 mx-auto mt-4 group-hover:w-24 transition-all duration-500\"><\/div><\/div><div className=\"h-12 w-px bg-white\/10 hidden md:block\"><\/div><div className=\"text-center group\"><div className=\"text-[10px] text-slate-500 uppercase font-bold mb-2 tracking-[0.2em]\">Variable factor<\/div><div className=\"text-lg text-purple-400 font-black mb-1 leading-relaxed\">\u0627\u0644\u0642\u062f\u0631\u0629 \u062a\u062d\u062f\u062f \"\u0633\u0631\u0639\u0629\" \u0627\u0644\u0625\u0646\u062c\u0627\u0632<\/div><p className=\"text-[11px] text-white\/60 italic\">\u0627\u0644\u0645\u062d\u0631\u0643 (\u0623) \u0623\u062a\u0645\u0651 \u0627\u0644\u0645\u0647\u0645\u0629 \u0641\u064a \u0648\u0642\u062a \u0623\u0642\u0644<\/p><div className=\"h-0.5 w-12 bg-purple-400 mx-auto mt-4 group-hover:w-24 transition-all duration-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]\"><\/div><\/div><\/div><\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ------------------------------\r\n \/\/ \u0631\u0628\u0637 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0641\u064a \u0623\u0645\u0627\u0643\u0646\u0647\u0627\r\n \/\/ ------------------------------\r\n const root1 = ReactDOM.createRoot(document.getElementById('vector-work-sim'));\r\n root1.render(<WorkVectorSimulation \/>);\r\n const root2 = ReactDOM.createRoot(document.getElementById('variable-force-sim'));\r\n root2.render(<WorkVariableForceSim \/>);\r\n const root3 = ReactDOM.createRoot(document.getElementById('power-sim'));\r\n root3.render(<PowerComparisonSim \/>);\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-18558","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18558","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=18558"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18558\/revisions"}],"predecessor-version":[{"id":18559,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18558\/revisions\/18559"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}