\u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 - \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n direction: rtl;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6366f1; }\r\n input[type=\"range\"] {\r\n direction: ltr;\r\n -webkit-appearance: none;\r\n background: #334155;\r\n height: 4px;\r\n border-radius: 5px;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 16px;\r\n width: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .ltr { direction: ltr; text-align: left; }\r\n .ltr-inline { direction: ltr; display: inline-block; }\r\n button {\r\n transition: all 0.2s ease;\r\n }\r\n .sim-canvas {\r\n background: #1e293b;\r\n border-radius: 0.75rem;\r\n }\r\n .tab-btn.active { background-color: #2563eb; color: white; }\r\n .distance-tab.active { background-color: #9333ea; color: white; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n \r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton's Laws of Motion)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0642\u0648\u0627\u0646\u064a\u0646_\u0646\u064a\u0648\u062a\u0646_\u0641\u064a_\u0627\u0644\u062d\u0631\u0643\u0629_audio.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0642\u0648\u0627\u0646\u064a\u0646_\u0646\u064a\u0648\u062a\u0646_\u0641\u064a_\u0627\u0644\u062d\u0631\u0643\u0629_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u0642\u062f\u0645\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-base text-slate-300 leading-relaxed mb-2\">\r\n \u0639\u0646\u062f\u0645\u0627 \u0646\u0646\u0638\u0631 \u062d\u0648\u0644\u0646\u0627\u060c \u0646\u0631\u0649 \u0623\u062c\u0633\u0627\u0645\u064b\u0627 \u0633\u0627\u0643\u0646\u0629 \u0648\u0623\u062e\u0631\u0649 \u0645\u062a\u062d\u0631\u0643\u0629. \u0642\u062f \u064a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646\u060c \u0648\u0642\u062f \u062a\u062a\u063a\u064a\u0631 \u0633\u0631\u0639\u0629 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0623\u0648 \u0627\u062a\u062c\u0627\u0647 \u062d\u0631\u0643\u062a\u0647. \u0627\u0644\u0633\u0628\u0628 \u0641\u064a \u0630\u0644\u0643 \u0647\u0648 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0641\u064a \u0627\u0644\u0623\u062c\u0633\u0627\u0645. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0627\u0644\u0637\u0627\u0626\u0631\u0629 \u0639\u0646\u062f \u0625\u0642\u0644\u0627\u0639\u0647\u0627 \u062a\u062e\u062a\u0644\u0641 \u0639\u0646 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647\u0627 \u0648\u0647\u064a \u0648\u0627\u0642\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u062f\u0631\u062c.\r\n <\/p>\r\n <p class=\"text-base text-amber-200\/80\">\r\n \u062a\u0631\u0628\u0637 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0648\u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646\u0647\u0627. \u0648\u0628\u062a\u0637\u0628\u064a\u0642\u0647\u0627\u060c \u064a\u0645\u0643\u0646 \u0648\u0635\u0641 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0642\u0648\u0649 \u0641\u064a \u0627\u0644\u0623\u062c\u0633\u0627\u0645.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0642\u0648\u0629 (Force)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-base text-slate-300 mb-3\"><strong>\u0627\u0644\u0642\u0648\u0629<\/strong> \u0647\u064a \u0645\u0624\u062b\u0631 \u0642\u062f \u064a\u063a\u064a\u0631 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u0645 \u0623\u0648 \u0634\u0643\u0644\u0647 \u0623\u0648 \u0643\u0644\u064a\u0647\u0645\u0627.<\/p>\r\n <h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0623\u0645\u062b\u0644\u0629:<\/h3>\r\n <ul class=\"list-disc list-inside text-base text-slate-400 space-y-1\">\r\n <li>\u0639\u0646\u062f\u0645\u0627 \u0623\u062f\u0641\u0639 \u062c\u0633\u0645\u064b\u0627 \u0623\u0648 \u0623\u0633\u062d\u0628\u0647\u060c \u0642\u062f \u0623\u062d\u0631\u0643\u0647 \u0625\u0646 \u0643\u0627\u0646 \u0633\u0627\u0643\u0646\u064b\u0627\u060c \u0623\u0648 \u0623\u0648\u0642\u0641\u0647 \u0625\u0646 \u0643\u0627\u0646 \u0645\u062a\u062d\u0631\u0643\u064b\u0627.<\/li>\r\n <li>\u0639\u0646\u062f\u0645\u0627 \u0623\u0631\u0641\u0639 \u062c\u0633\u0645\u064b\u0627 \u062b\u0645 \u0623\u062a\u0631\u0643\u0647\u060c \u062a\u0624\u062b\u0631 \u0627\u0644\u0623\u0631\u0636 \u0641\u064a\u0647 \u0628\u0642\u0648\u0629 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0642\u0648\u0649<\/h2>\r\n <p class=\"text-base text-slate-300 mb-4\">\u064a\u0645\u0643\u0646 \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0642\u0648\u0649 \u0625\u0644\u0649 \u0646\u0648\u0639\u064a\u0646 \u0631\u0626\u064a\u0633\u064a\u064a\u0646:<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border border-blue-500\/30\">\r\n <h3 class=\"font-bold text-blue-300 mb-2\">1. \u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633 (Contact Forces)<\/h3>\r\n <p class=\"text-base text-blue-100\/80 mb-2\">\u0642\u0648\u0649 \u062a\u062a\u0637\u0644\u0628 \u062a\u0644\u0627\u0645\u0633\u064b\u0627 \u0645\u0628\u0627\u0634\u0631\u064b\u0627 \u0628\u064a\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645.<\/p>\r\n <p class=\"text-base text-blue-200\/60 bg-black\/20 p-2 rounded mb-3\"><strong>\u0645\u062b\u0627\u0644:<\/strong> \u0639\u0646\u062f\u0645\u0627 \u064a\u0631\u0643\u0644 \u0627\u0644\u0644\u0627\u0639\u0628 \u0627\u0644\u0643\u0631\u0629 \u0628\u0642\u062f\u0645\u0647\u060c \u062a\u0624\u062b\u0631 \u0627\u0644\u0642\u062f\u0645 \u0641\u064a \u0627\u0644\u0643\u0631\u0629 \u0628\u0642\u0648\u0629 \u062a\u0644\u0627\u0645\u0633.<\/p>\r\n <h4 class=\"font-bold text-blue-300 text-base mb-1\">\u0648\u0645\u0646 \u0623\u0645\u062b\u0644\u0629 \u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633: \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 (Normal Force)<\/h4>\r\n <ul class=\"list-disc list-inside text-base text-blue-100\/80 space-y-1\">\r\n <li>\u062a\u0646\u0634\u0623 \u0628\u064a\u0646 \u0627\u0644\u062c\u0633\u0645 \u0648\u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0630\u064a \u064a\u0648\u0636\u064e\u0639 \u0639\u0644\u064a\u0647.<\/li>\r\n <li>\u062a\u0643\u0648\u0646 \u062f\u0627\u0626\u0645\u064b\u0627 \u0639\u0645\u0648\u062f\u064a\u0629 \u0639\u0644\u0649 \u0633\u0637\u062d \u0627\u0644\u062a\u0644\u0627\u0645\u0633.<\/li>\r\n <li><strong>\u0645\u062b\u0627\u0644:<\/strong> \u0627\u0644\u0643\u062a\u0627\u0628 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0639\u0644\u0649 \u0637\u0627\u0648\u0644\u0629 \u064a\u062a\u0623\u062b\u0631 \u0628\u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u0625\u0644\u0649 \u0623\u0639\u0644\u0649.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-purple-900\/20 p-4 rounded-lg border border-purple-500\/30\">\r\n <h3 class=\"font-bold text-purple-300 mb-2\">2. \u0642\u0648\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f (Action-at-a-Distance Forces)<\/h3>\r\n <p class=\"text-base text-purple-100\/80 mb-2\">\u0642\u0648\u0649 \u062a\u0646\u0634\u0623 \u0628\u064a\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u062a\u0644\u0627\u0645\u0633 \u0645\u0628\u0627\u0634\u0631.<\/p>\r\n <h4 class=\"font-bold text-purple-300 text-base mb-1\">\u0623\u0645\u062b\u0644\u0629:<\/h4>\r\n <ul class=\"list-disc list-inside text-base text-purple-100\/80 space-y-2\">\r\n <li><strong>\u0642\u0648\u0629 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629:<\/strong> \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0639\u0644\u0649 \u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0646 \u0633\u0637\u062d \u0627\u0644\u0623\u0631\u0636 \u064a\u062a\u0623\u062b\u0631 \u0628\u0647\u0627 \u062d\u062a\u0649 \u062f\u0648\u0646 \u062a\u0644\u0627\u0645\u0633.<\/li>\r\n <li><strong>\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629<\/strong><\/li>\r\n <li><strong>\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629:<\/strong> (\u0645\u062b\u0644 \u062c\u0630\u0628 \u0627\u0644\u0628\u0627\u0644\u0648\u0646 \u0627\u0644\u0645\u0634\u062d\u0648\u0646 \u0644\u0642\u0635\u0627\u0635\u0627\u062a \u0627\u0644\u0648\u0631\u0642).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"forcesSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\r\n \u0645\u062d\u0627\u0643\u0627\u0629: \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0642\u0648\u0649\r\n <\/h3>\r\n <div class=\"flex gap-2 mb-6\">\r\n <button id=\"contactTabBtn\" class=\"tab-btn px-4 py-2 rounded-lg font-bold bg-blue-600 text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633<\/button>\r\n <button id=\"distanceTabBtn\" class=\"distance-tab px-4 py-2 rounded-lg font-bold bg-slate-800 text-slate-400 hover:bg-slate-700\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f<\/button>\r\n <\/div>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[400px] h-[200px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\">\r\n <svg id=\"forcesSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 400 200\" class=\"absolute inset-0\"><\/svg>\r\n <\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"forcesControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0622\u062b\u0627\u0631 \u0627\u0644\u0642\u0648\u0649<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-base text-slate-300\">\u062a\u0624\u062b\u0631 \u0627\u0644\u0642\u0648\u0649 \u0641\u064a \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0628\u0637\u0631\u0627\u0626\u0642 \u0645\u062e\u062a\u0644\u0641\u0629. \u0644\u0641\u0647\u0645 \u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0646\u0627\u062a\u062c \u0648\u0648\u0635\u0641 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u0623\u062c\u0633\u0627\u0645\u060c \u0646\u0637\u0628\u0642 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton\u2019s First Law)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30 mb-4\">\r\n <h3 class=\"font-bold text-amber-400 mb-2\">\u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3>\r\n <p class=\"text-lg text-amber-100 font-serif italic text-center\">\"\u064a\u062d\u0627\u0641\u0638 \u0627\u0644\u062c\u0633\u0645 \u0639\u0644\u0649 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0645\u0646 \u062d\u064a\u062b \u0627\u0644\u0633\u0643\u0648\u0646\u060c \u0623\u0648 \u0627\u0644\u062d\u0631\u0643\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 \u0648\u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0645\u0627 \u0644\u0645 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u0645\u062d\u0635\u0644\u0629 \u062a\u063a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629.\"<\/p>\r\n <\/div>\r\n <h3 class=\"font-bold text-white text-base mb-3\">\u0634\u0631\u062d \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded border border-slate-700\"><h4 class=\"font-bold text-teal-300 mb-2 text-base\">\u0627\u0644\u062d\u0627\u0644\u0629 1: \u062c\u0633\u0645 \u0633\u0627\u0643\u0646 \u0639\u0644\u0649 \u0633\u0637\u062d \u0623\u0641\u0642\u064a \u062e\u0634\u0646<\/h4><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u064a\u062a\u0623\u062b\u0631 \u0628\u0642\u0648\u062a\u064a\u0646: \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 (\u2191) \u0648\u0627\u0644\u0648\u0632\u0646 (\u2193)<\/li><li>\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0642\u0648\u0649 = \u0635\u0641\u0631 \u2192 \u0627\u0644\u062c\u0633\u0645 \u064a\u0628\u0642\u0649 \u0633\u0627\u0643\u0646\u064b\u0627.<\/li><\/ul><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded border border-slate-700\"><h4 class=\"font-bold text-teal-300 mb-2 text-base\">\u0627\u0644\u062d\u0627\u0644\u0629 2: \u062f\u0641\u0639 \u0642\u0631\u0635 \u0639\u0644\u0649 \u0633\u0637\u062d \u062e\u0634\u0646<\/h4><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u0628\u0639\u062f \u062f\u0641\u0639 \u0627\u0644\u0642\u0631\u0635\u060c \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u0627\u062d\u062a\u0643\u0627\u0643 (f) \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629.<\/li><li>\u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0625\u0628\u0637\u0627\u0621 \u0633\u0631\u0639\u0629 \u0627\u0644\u0642\u0631\u0635 \u062d\u062a\u0649 \u064a\u062a\u0648\u0642\u0641.<\/li><\/ul><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded border border-slate-700\"><h4 class=\"font-bold text-teal-300 mb-2 text-base\">\u0627\u0644\u062d\u0627\u0644\u0629 3: \u062d\u0631\u0643\u0629 \u0642\u0631\u0635 \u0639\u0644\u0649 \u0633\u0637\u062d \u0623\u0645\u0644\u0633 (\u0628\u062f\u0648\u0646 \u0627\u062d\u062a\u0643\u0627\u0643)<\/h4><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0623\u0641\u0642\u064a = \u0635\u0641\u0631.<\/li><li>\u064a\u0633\u062a\u0645\u0631 \u0627\u0644\u0642\u0631\u0635 \u0628\u0627\u0644\u062d\u0631\u0643\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 \u0648\u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u062f\u0648\u0646 \u062a\u0648\u0642\u0641.<\/li><\/ul><\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u0646\u0633\u062a\u0646\u062a\u062c \u0645\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646\u060c \u0648\u0643\u0630\u0644\u0643 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u060c \u062a\u0633\u0627\u0648\u064a \u0635\u0641\u0631\u064b\u0627.<\/p><p class=\"text-base text-slate-300\"><strong class=\"text-white\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (Inertia):<\/strong> \u0627\u0644\u062c\u0633\u0645 \u0639\u0627\u062c\u0632 \u0639\u0646 \u062a\u063a\u064a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0645\u0646 \u062a\u0644\u0642\u0627\u0621 \u0646\u0641\u0633\u0647. \u0641\u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646 \u0644\u0627 \u064a\u062a\u062d\u0631\u0643 \u0625\u0644\u0627 \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629\u060c \u0648\u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0644\u0627 \u064a\u063a\u064a\u0631 \u0633\u0631\u0639\u062a\u0647 \u0623\u0648 \u0627\u062a\u062c\u0627\u0647\u0647 \u0625\u0644\u0627 \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629.<\/p><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"firstLawSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646 (\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a)<\/h3>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[400px] h-[200px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\"><svg id=\"firstLawSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 400 200\"><\/svg><\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"firstLawControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0627\u0645\u0633\u0627\u064b: \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 \u0648\u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">1. \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 (Constant Velocity)<\/h3><ul class=\"list-disc list-inside text-base text-slate-300 mb-3\"><li>\u0627\u0644\u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0645\u0646\u062a\u0638\u0645\u0629.<\/li><li>\u064a\u0642\u0637\u0639 \u0625\u0632\u0627\u062d\u0627\u062a \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0641\u064a \u0623\u0632\u0645\u0646\u0629 \u0645\u062a\u0633\u0627\u0648\u064a\u0629.<\/li><\/ul><div class=\"bg-black\/30 p-4 rounded-xl text-center overflow-x-auto mb-3 flex justify-center items-center gap-3 font-serif text-2xl\" dir=\"ltr\"><span class=\"text-amber-400 font-bold\">v<\/span><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">\u0394x<\/span><span class=\"px-3\">\u0394t<\/span><\/div><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">x<sub>f<\/sub> - x<sub>i<\/sub><\/span><span class=\"px-3\">\u0394t<\/span><\/div><\/div><p class=\"text-base text-slate-300 mb-1\"><strong>\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0631\u0639\u0629:<\/strong> m\/s<\/p><p class=\"text-base text-slate-400 bg-black\/20 p-2 rounded\"><strong>\u0645\u062b\u0627\u0644:<\/strong> \u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 10 m\/s \u064a\u0642\u0637\u0639 10 m \u0643\u0644 \u062b\u0627\u0646\u064a\u0629.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">2. \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a (Constant Acceleration)<\/h3><ul class=\"list-disc list-inside text-base text-slate-300 mb-3\"><li>\u0627\u0644\u0633\u0631\u0639\u0629 \u062a\u062a\u063a\u064a\u0631 \u0628\u0627\u0646\u062a\u0638\u0627\u0645 (\u062a\u0632\u062f\u0627\u062f \u0623\u0648 \u062a\u062a\u0646\u0627\u0642\u0635 \u0628\u0645\u0642\u062f\u0627\u0631 \u062b\u0627\u0628\u062a \u0641\u064a \u0643\u0644 \u062b\u0627\u0646\u064a\u0629).<\/li><\/ul><div class=\"bg-black\/30 p-4 rounded-xl text-center overflow-x-auto mb-3 flex justify-center items-center gap-3 font-serif text-2xl\" dir=\"ltr\"><span class=\"text-amber-400 font-bold\">a<\/span><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">\u0394v<\/span><span class=\"px-3\">\u0394t<\/span><\/div><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">v<sub>f<\/sub> - v<sub>i<\/sub><\/span><span class=\"px-3\">\u0394t<\/span><\/div><\/div><p class=\"text-base text-slate-300 mb-1\"><strong>\u0648\u062d\u062f\u0629 \u0627\u0644\u062a\u0633\u0627\u0631\u0639:<\/strong> m\/s\u00b2<\/p><p class=\"text-base text-slate-400 bg-black\/20 p-2 rounded mb-2\"><strong>\u0645\u062b\u0627\u0644:<\/strong> \u0633\u064a\u0627\u0631\u0629 \u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0645\u0642\u062f\u0627\u0631 10 m\/s \u0643\u0644 \u062b\u0627\u0646\u064a\u0629.<\/p><p class=\"text-base text-amber-200\/80\"><strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0643\u0645\u064a\u0629 \u0645\u062a\u062c\u0647\u0629. \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u062a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u062a\u0633\u0627\u0631\u0639)\u060c \u0648\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0633\u0627\u0644\u0628\u0629 \u062a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u062a\u0628\u0627\u0637\u0624).<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"velocityAccelSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a<\/h3>\r\n <div class=\"space-y-6\">\r\n <div class=\"space-y-2\"><div class=\"flex justify-between text-base text-slate-400 px-2\"><span>\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 (v = 2.0 m\/s)<\/span><span id=\"distVLabel\">\u0627\u0644\u0645\u0633\u0627\u0641\u0629: 0.0 m<\/span><\/div><div class=\"relative h-12 bg-slate-800 rounded border border-slate-700 overflow-hidden\"><div id=\"carV\" class=\"absolute bottom-1 w-12 h-8 bg-blue-500 rounded transition-all duration-50\" style=\"right:0; transform:translateX(0px)\"><\/div><div class=\"absolute bottom-0 left-0 w-full h-1 bg-slate-700\"><\/div><\/div><\/div>\r\n <div class=\"space-y-2\"><div class=\"flex justify-between text-base text-slate-400 px-2\"><span>\u062a\u0633\u0627\u0631\u0639 \u062b\u0627\u0628\u062a (a = 1.0 m\/s\u00b2)<\/span><span id=\"distALabel\">\u0627\u0644\u0645\u0633\u0627\u0641\u0629: 0.0 m<\/span><\/div><div class=\"relative h-12 bg-slate-800 rounded border border-slate-700 overflow-hidden\"><div id=\"carA\" class=\"absolute bottom-1 w-12 h-8 bg-green-500 rounded transition-all duration-50\" style=\"right:0; transform:translateX(0px)\"><\/div><div class=\"absolute bottom-0 left-0 w-full h-1 bg-slate-700\"><\/div><\/div><\/div>\r\n <div class=\"flex flex-wrap gap-4 items-center justify-center bg-slate-800\/50 p-4 rounded-lg\"><div class=\"flex items-center gap-2\"><span class=\"text-base\">\u0627\u0644\u0632\u0645\u0646:<\/span><span id=\"timeVal\" class=\"text-lg font-mono text-amber-400\">0.0 s<\/span><\/div><div class=\"flex gap-2\"><button id=\"playPauseBtn\" class=\"bg-green-600 hover:bg-green-500 px-6 py-2 rounded\">\u0628\u062f\u0621<\/button><button id=\"resetVABtn\" class=\"bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded\">\u062a\u0635\u0641\u064a\u0631<\/button><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0645\u062b\u0627\u0644 1 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0642\u0637\u0627\u0631 \u064a\u0628\u062f\u0623 \u062d\u0631\u0643\u062a\u0647 \u0645\u0646 \u0627\u0644\u0633\u0643\u0648\u0646 (v\u1d62 = 0) \u0648\u062a\u0635\u0628\u062d \u0633\u0631\u0639\u062a\u0647 20 m\/s \u0628\u0639\u062f 16 s. \u0627\u062d\u0633\u0628 \u062a\u0633\u0627\u0631\u0639\u0647.<\/p><div class=\"bg-black\/20 p-3 rounded border border-white\/5\"><p class=\"text-base text-slate-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">a = (20 - 0) \/ 16 = 1.25 m\/s\u00b2<\/div><\/div><p class=\"text-base text-green-400 text-center\">\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0645\u0648\u062c\u0628\u0629 \u2192 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u0627\u0644\u0642\u0637\u0627\u0631 \u064a\u062a\u0633\u0627\u0631\u0639).<\/p><\/div><\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0645\u062b\u0627\u0644 2 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0633\u064a\u0627\u0631\u0629 \u0633\u0628\u0627\u0642 \u062a\u062a\u0646\u0627\u0642\u0635 \u0633\u0631\u0639\u062a\u0647\u0627 \u0645\u0646 45 m\/s \u0625\u0644\u0649 0 \u062e\u0644\u0627\u0644 3 s. \u0627\u062d\u0633\u0628 \u062a\u0633\u0627\u0631\u0639\u0647\u0627.<\/p><div class=\"bg-black\/20 p-3 rounded border border-white\/5\"><p class=\"text-base text-slate-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">a = (0 - 45) \/ 3 = -15 m\/s\u00b2<\/div><\/div><p class=\"text-base text-red-400 text-center\">\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0633\u0627\u0644\u0628\u0629 \u2192 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u062a\u062a\u0628\u0627\u0637\u0623).<\/p><\/div><\/div>\r\n <\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a \u0644\u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton\u2019s Second Law)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30 mb-4\"><h3 class=\"font-bold text-amber-400 mb-2\">\u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3><p class=\"text-lg text-amber-100 font-serif italic text-center\">\"\u064a\u062a\u0646\u0627\u0633\u0628 \u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062c\u0633\u0645 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647\u060c \u0648\u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0643\u062a\u0644\u062a\u0647.\"<\/p><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\"><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629:<\/h3><div class=\"bg-black\/30 p-3 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">\u03a3F = m \u00d7 a<\/div><\/div><ul class=\"list-disc list-inside text-base text-slate-300\"><li><strong>\u03a3F:<\/strong> \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 (\u0646\u064a\u0648\u062a\u0646 N)<\/li><li><strong>m:<\/strong> \u0627\u0644\u0643\u062a\u0644\u0629 (kg)<\/li><li><strong>a:<\/strong> \u0627\u0644\u062a\u0633\u0627\u0631\u0639 (m\/s\u00b2)<\/li><\/ul><\/div><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u062f\u0644\u0627\u0644\u0627\u062a \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3><ul class=\"list-disc list-inside text-base text-slate-300\"><li><strong>\u0628\u062b\u0628\u0648\u062a \u0627\u0644\u0643\u062a\u0644\u0629:<\/strong> \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629\u060c \u0632\u0627\u062f \u0627\u0644\u062a\u0633\u0627\u0631\u0639 (\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629).<\/li><li><strong>\u0628\u062b\u0628\u0648\u062a \u0627\u0644\u0642\u0648\u0629:<\/strong> \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0627\u0644\u0643\u062a\u0644\u0629\u060c \u0642\u0644 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 (\u0639\u0644\u0627\u0642\u0629 \u0639\u0643\u0633\u064a\u0629).<\/li><\/ul><\/div><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"secondLawSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a \u0644\u0646\u064a\u0648\u062a\u0646 (F = m \u00d7 a)<\/h3>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[450px] h-[220px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\"><svg id=\"secondLawSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 450 220\"><\/svg><\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"secondLawControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-4\"><h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0645\u062b\u0627\u0644 3 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0627\u062d\u0633\u0628 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u0643\u064a \u064a\u0643\u062a\u0633\u0628 \u062c\u0633\u0645 \u0643\u062a\u0644\u062a\u0647 5 kg \u062a\u0633\u0627\u0631\u0639\u064b\u0627 \u062b\u0627\u0628\u062a\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 2 m\/s\u00b2.<\/p><div class=\"bg-black\/20 p-3 rounded\"><p class=\"text-base text-slate-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">\u03a3F = 5 \u00d7 2 = 10 N<\/div><\/div><\/div><\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0633\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b \u0644\u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton\u2019s Third Law)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30 mb-4\"><h3 class=\"font-bold text-amber-400 mb-2\">\u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3><p class=\"text-lg text-amber-100 font-serif italic text-center mb-4\">\"\u0625\u0630\u0627 \u062a\u0641\u0627\u0639\u0644 \u062c\u0633\u0645\u0627\u0646 A \u0648 B\u060c \u0641\u0625\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u062a\u064a \u064a\u0624\u062b\u0631 \u0628\u0647\u0627 \u0627\u0644\u062c\u0633\u0645 A \u0641\u064a \u0627\u0644\u062c\u0633\u0645 B \u062a\u0633\u0627\u0648\u064a \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u062a\u0639\u0627\u0643\u0633 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u062a\u064a \u064a\u0624\u062b\u0631 \u0628\u0647\u0627 \u0627\u0644\u062c\u0633\u0645 B \u0641\u064a \u0627\u0644\u062c\u0633\u0645 A.\"<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">F_AB = -F_BA<\/div><\/div><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\"><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u062e\u0635\u0627\u0626\u0635 \u0642\u0648\u0649 \u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644:<\/h3><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u0645\u062a\u0633\u0627\u0648\u064a\u062a\u0627\u0646 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631.<\/li><li>\u0645\u062a\u0636\u0627\u062f\u062a\u0627\u0646 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647.<\/li><li>\u0645\u0646 \u0627\u0644\u0646\u0648\u0639 \u0646\u0641\u0633\u0647 (\u0643\u0644\u0627\u0647\u0645\u0627 \u062a\u0644\u0627\u0645\u0633 \u0623\u0648 \u0643\u0644\u0627\u0647\u0645\u0627 \u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f).<\/li><li>\u062a\u0646\u0634\u0622\u0646 \u0641\u064a \u0627\u0644\u0644\u062d\u0638\u0629 \u0646\u0641\u0633\u0647\u0627.<\/li><li><strong class=\"text-white\">\u062a\u0624\u062b\u0631\u0627\u0646 \u0641\u064a \u062c\u0633\u0645\u064a\u0646 \u0645\u062e\u062a\u0644\u0641\u064a\u0646<\/strong> (\u0644\u0630\u0644\u0643 \u0644\u0627 \u062a\u0644\u063a\u064a \u0625\u062d\u062f\u0627\u0647\u0645\u0627 \u0627\u0644\u0623\u062e\u0631\u0649).<\/li><\/ul><\/div><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u0623\u0645\u062b\u0644\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><div class=\"space-y-3\"><div class=\"bg-black\/20 p-2 rounded\"><h4 class=\"font-bold text-white text-base mb-1\">\u0645\u062b\u0627\u0644 1: \u062a\u0635\u0627\u062f\u0645 \u0643\u0631\u062a\u064a\u0646<\/h4><p class=\"text-base text-slate-300\">\u0627\u0644\u0643\u0631\u0629 A \u062a\u0624\u062b\u0631 \u0641\u064a \u0627\u0644\u0643\u0631\u0629 B \u0628\u0642\u0648\u0629 \u062f\u0641\u0639 F<sub>AB<\/sub>\u060c \u0648\u0627\u0644\u0643\u0631\u0629 B \u062a\u0624\u062b\u0631 \u0641\u064a A \u0628\u0642\u0648\u0629 F<sub>BA<\/sub>.<\/p><\/div><div class=\"bg-black\/20 p-2 rounded\"><h4 class=\"font-bold text-white text-base mb-1\">\u0645\u062b\u0627\u0644 2: \u0627\u0644\u0645\u0634\u064a<\/h4><p class=\"text-base text-slate-300\">\u0627\u0644\u0642\u062f\u0645 \u062a\u062f\u0641\u0639 \u0627\u0644\u0623\u0631\u0636 \u0625\u0644\u0649 \u0627\u0644\u062e\u0644\u0641 (\u0641\u0639\u0644)\u060c \u0648\u0627\u0644\u0623\u0631\u0636 \u062a\u062f\u0641\u0639 \u0627\u0644\u0642\u062f\u0645 \u0625\u0644\u0649 \u0627\u0644\u0623\u0645\u0627\u0645 \u0628\u0642\u0648\u0629 \u0645\u0633\u0627\u0648\u064a\u0629 (\u0631\u062f \u0641\u0639\u0644) \u2192 \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0629 \u0647\u064a \u0627\u0644\u062a\u064a \u062a\u062f\u0641\u0639\u0646\u0627 \u0644\u0644\u0623\u0645\u0627\u0645.<\/p><\/div><\/div><\/div><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"thirdLawSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b \u0644\u0646\u064a\u0648\u062a\u0646 (\u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644)<\/h3>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[500px] h-[220px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\"><svg id=\"thirdLawSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 500 220\"><\/svg><\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"thirdLawControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-indigo-900\/20 p-4 rounded-lg border border-indigo-500\/30 mt-4\"><h3 class=\"font-bold text-indigo-300 mb-2\">\u0633\u0624\u0627\u0644 \u0644\u0644\u062a\u0641\u0643\u064a\u0631:<\/h3><p class=\"text-base text-indigo-100\/80 mb-2\">\u0641\u064a \u0623\u062b\u0646\u0627\u0621 \u0633\u0642\u0648\u0637 \u0643\u0631\u0629 \u0646\u062d\u0648 \u0627\u0644\u0623\u0631\u0636\u060c \u062a\u0624\u062b\u0631 \u0627\u0644\u0623\u0631\u0636 \u0641\u064a \u0627\u0644\u0643\u0631\u0629 \u0628\u0642\u0648\u0629 \u062c\u0630\u0628 \u0646\u062d\u0648 \u0627\u0644\u0623\u0633\u0641\u0644 (\u0627\u0644\u0648\u0632\u0646). \u0625\u0630\u0627 \u0627\u0639\u062a\u0628\u0631\u0646\u0627 \u0627\u0644\u0648\u0632\u0646 \u0647\u0648 \u0642\u0648\u0629 \u0627\u0644\u0641\u0639\u0644\u060c \u0641\u0645\u0627 \u0631\u062f \u0627\u0644\u0641\u0639\u0644\u061f<\/p><p class=\"text-base text-indigo-200 bg-black\/20 p-2 rounded\"><strong>\u0627\u0644\u0625\u062c\u0627\u0628\u0629:<\/strong> \u0627\u0644\u0643\u0631\u0629 \u062a\u0624\u062b\u0631 \u0641\u064a \u0627\u0644\u0623\u0631\u0636 \u0628\u0642\u0648\u0629 \u062c\u0630\u0628 \u0645\u0633\u0627\u0648\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0645\u0639\u0627\u0643\u0633\u0629 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 (\u0625\u0644\u0649 \u0623\u0639\u0644\u0649).<\/p><\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0645\u0646\u0627\u064b: \u0623\u0645\u062b\u0644\u0629 \u0648\u062a\u062f\u0631\u064a\u0628\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628<\/h2>\r\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 relative overflow-hidden\"><div class=\"flex items-center gap-2 mb-3\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-indigo-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg><h3 class=\"font-bold text-indigo-300 text-base\">\u0627\u0644\u0633\u0624\u0627\u0644 4 (\u0635\u0641\u062d\u0629 55):<\/h3><\/div><p class=\"text-base text-indigo-100\/90 mb-4\">\u0627\u062d\u0633\u0628 \u062a\u0633\u0627\u0631\u0639 \u0633\u064a\u0627\u0631\u0629 \u0643\u062a\u0644\u062a\u0647\u0627 1200 kg \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647\u0627 \u0628\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0623\u0641\u0642\u064a 6000 N.<\/p><div class=\"bg-black\/40 p-4 rounded-lg\"><p class=\"text-base font-bold text-emerald-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/50 p-3 rounded-md text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">a = F \/ m = 6000 \/ 1200 = 5 m\/s\u00b2<\/div><\/div><\/div><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062a\u0627\u0633\u0639\u0627\u064b: \u0645\u0644\u062e\u0635 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u0629<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10 mb-6\">\r\n <table class=\"w-full text-base text-right text-slate-300\"><thead class=\"bg-white\/10 text-base text-slate-200 uppercase\"><tr><th class=\"px-4 py-3\">\u0627\u0644\u0642\u0627\u0646\u0648\u0646<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0646\u0635<\/th><th class=\"px-4 py-3 text-center\">\u0627\u0644\u0635\u064a\u063a\u0629<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0645\u0641\u062a\u0627\u062d<\/th><\/tr><\/thead><tbody><tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0623\u0648\u0644<\/td><td class=\"px-4 py-3\">\u0627\u0644\u062c\u0633\u0645 \u064a\u0628\u0642\u0649 \u0639\u0644\u0649 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0645\u0627 \u0644\u0645 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629<\/td><td class=\"px-4 py-3 text-center font-mono text-base\" dir=\"ltr\">\u03a3F = 0 \u2192 a = 0<\/td><td class=\"px-4 py-3 font-bold text-teal-300\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u062b\u0627\u0646\u064a<\/td><td class=\"px-4 py-3\">\u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0642\u0648\u0629 \u0648\u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0643\u062a\u0644\u0629<\/td><td class=\"px-4 py-3 text-center font-mono text-base\" dir=\"ltr\">\u03a3F = m\u00b7a<\/td><td class=\"px-4 py-3 font-bold text-blue-300\">\u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u062b\u0627\u0644\u062b<\/td><td class=\"px-4 py-3\">\u0644\u0643\u0644 \u0641\u0639\u0644 \u0631\u062f \u0641\u0639\u0644 \u0645\u0633\u0627\u0648\u064d \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0645\u0639\u0627\u0643\u0633 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647<\/td><td class=\"px-4 py-3 text-center font-mono text-base\" dir=\"ltr\">F<sub>AB<\/sub> = -F<sub>BA<\/sub><\/td><td class=\"px-4 py-3 font-bold text-purple-300\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0628\u064a\u0646 \u062c\u0633\u0645\u064a\u0646<\/td><\/tr><\/tbody><\/table>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-lg border border-indigo-500\/30 mb-6\"><ul class=\"list-decimal list-inside text-base text-indigo-200 space-y-3\"><li>\u0623\u0635\u0641 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u0645 \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647 \u0635\u0641\u0631\u064b\u0627\u060c \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629.<\/li><li>\u0647\u0644 \u064a\u0645\u0643\u0646 \u0627\u0639\u062a\u0628\u0627\u0631 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u0648\u0627\u0644\u0648\u0632\u0646 \u0642\u0648\u062a\u064a \u0641\u0639\u0644 \u0648\u0631\u062f \u0641\u0639\u0644\u061f <span class=\"text-indigo-300\/80\">(\u0644\u0627\u060c \u0644\u0623\u0646\u0647\u0645\u0627 \u062a\u0624\u062b\u0631\u0627\u0646 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0646\u0641\u0633\u0647\u060c \u0648\u0644\u064a\u0633\u062a\u0627 \u0645\u0646 \u0627\u0644\u0646\u0648\u0639 \u0646\u0641\u0633\u0647 \u2013 \u0627\u0644\u0648\u0632\u0646 \u062c\u0627\u0630\u0628\u064a\u0629\u060c \u0648\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u0644\u0627\u0645\u0633).<\/span><\/li><li>\u0644\u0645\u0627\u0630\u0627 \u062a\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u062f\u0648\u0627\u0633\u0629 \u0627\u0644\u0628\u0646\u0632\u064a\u0646\u060c \u0648\u062a\u062a\u0628\u0627\u0637\u0623 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0641\u0631\u0627\u0645\u0644\u061f<\/li><\/ul><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10 mt-6\"><h2 class=\"text-xl font-semibold text-white mb-3\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h2><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-base text-slate-300\"><ul class=\"list-disc list-inside space-y-2\"><li><strong>\u0627\u0644\u0642\u0648\u0629<\/strong> \u0645\u0624\u062b\u0631 \u064a\u063a\u064a\u0631 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0623\u0648 \u0627\u0644\u0634\u0643\u0644.<\/li><li><strong>\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644:<\/strong> \u0628\u062f\u0648\u0646 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629 \u2192 \u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 (\u0623\u0648 \u0633\u0643\u0648\u0646).<\/li><li><strong>\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a:<\/strong> \u0627\u0644\u0642\u0648\u0629 = \u0627\u0644\u0643\u062a\u0644\u0629 \u00d7 \u0627\u0644\u062a\u0633\u0627\u0631\u0639.<\/li><li><strong>\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b:<\/strong> \u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644 \u0645\u062a\u0633\u0627\u0648\u064a\u0627\u0646 \u0648\u0645\u062a\u0636\u0627\u062f\u0627\u0646 \u0648\u064a\u0624\u062b\u0631\u0627\u0646 \u0641\u064a \u062c\u0633\u0645\u064a\u0646 \u0645\u062e\u062a\u0644\u0641\u064a\u0646.<\/li><\/ul><ul class=\"list-disc list-inside space-y-2\"><li><strong>\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629:<\/strong> \u0625\u0632\u0627\u062d\u0629 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0641\u064a \u0623\u0632\u0645\u0646\u0629 \u0645\u062a\u0633\u0627\u0648\u064a\u0629.<\/li><li><strong>\u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a:<\/strong> \u062a\u063a\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 \u0641\u064a \u0627\u0644\u0633\u0631\u0639\u0629.<\/li><\/ul><\/div><p class=\"text-base text-amber-300 mt-4 font-bold text-center border-t border-white\/10 pt-4\">\u0628\u0647\u0630\u0627 \u0646\u0643\u0648\u0646 \u0642\u062f \u0641\u0647\u0645\u0646\u0627 \u0643\u064a\u0641 \u062a\u0631\u0628\u0637 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0649 \u0648\u0627\u0644\u062d\u0631\u0643\u0629\u060c \u0648\u0643\u064a\u0641 \u0646\u0633\u062a\u062e\u062f\u0645\u0647\u0627 \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0627\u0644\u062d\u0633\u0627\u0628\u064a\u0629 \u0648\u0648\u0635\u0641 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0627\u0644\u064a\u0648\u0645\u064a\u0629.<\/p><\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0648\u0644\u0649: \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0642\u0648\u0649 ========================\r\n (function() {\r\n let activeTab = 'contact';\r\n let blockX = 50, magnetX = 280, ballX = 50, isPushing = false, isAttracting = false, pushingTimer = null;\r\n const svg = document.getElementById('forcesSvg'), controlsDiv = document.getElementById('forcesControls');\r\n const contactBtn = document.getElementById('contactTabBtn'), distanceBtn = document.getElementById('distanceTabBtn');\r\n function drawContact() { svg.innerHTML = `<line x1=\"0\" y1=\"160\" x2=\"400\" y2=\"160\" stroke=\"#475569\" stroke-width=\"4\" \/><rect x=\"${blockX}\" y=\"100\" width=\"60\" height=\"60\" fill=\"#8B4513\" rx=\"4\" stroke=\"#5c2e0b\" stroke-width=\"2\" \/><text x=\"${blockX+30}\" y=\"135\" fill=\"white\" font-size=\"14\" text-anchor=\"middle\" font-weight=\"bold\">\u0635\u0646\u062f\u0648\u0642<\/text>${isPushing ? `<g transform=\"translate(${blockX-50}, 130)\"><line x1=\"0\" y1=\"0\" x2=\"40\" y2=\"0\" stroke=\"#ef4444\" stroke-width=\"4\" \/><polygon points=\"40,-6 50,0 40,6\" fill=\"#ef4444\" \/><text x=\"20\" y=\"-10\" fill=\"#ef4444\" font-size=\"12\" text-anchor=\"middle\">\u0642\u0648\u0629 \u062f\u0641\u0639<\/text><\/g>` : ''}`; }\r\n function drawDistance() { svg.innerHTML = `<line x1=\"0\" y1=\"160\" x2=\"400\" y2=\"160\" stroke=\"#475569\" stroke-width=\"4\" \/><circle cx=\"${ballX}\" cy=\"145\" r=\"15\" fill=\"#94a3b8\" stroke=\"#64748b\" stroke-width=\"2\" \/>${isAttracting ? `<g><path d=\"M ${ballX+15} 145 Q ${(ballX+magnetX)\/2} 120 ${magnetX} 135\" fill=\"none\" stroke=\"#a855f7\" stroke-width=\"2\" stroke-dasharray=\"4 4\" \/><path d=\"M ${ballX+15} 145 Q ${(ballX+magnetX)\/2} 170 ${magnetX} 155\" fill=\"none\" stroke=\"#a855f7\" stroke-width=\"2\" stroke-dasharray=\"4 4\" \/><text x=\"${(ballX+magnetX)\/2}\" y=\"115\" fill=\"#a855f7\" font-size=\"12\" text-anchor=\"middle\">\u0642\u0648\u0629 \u062c\u0630\u0628 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629<\/text><\/g>` : ''}<g transform=\"translate(${magnetX}, 125)\"><rect x=\"0\" y=\"0\" width=\"20\" height=\"35\" fill=\"#ef4444\" \/><rect x=\"20\" y=\"0\" width=\"20\" height=\"35\" fill=\"#3b82f6\" \/><text x=\"10\" y=\"22\" fill=\"white\" font-size=\"12\" text-anchor=\"middle\">N<\/text><text x=\"30\" y=\"22\" fill=\"white\" font-size=\"12\" text-anchor=\"middle\">S<\/text><\/g>`; }\r\n function render() { activeTab === 'contact' ? drawContact() : drawDistance(); }\r\n function updateControls() {\r\n if (activeTab === 'contact') {\r\n controlsDiv.innerHTML = `<div class=\"bg-slate-800 p-4 rounded-lg\"><h4 class=\"font-bold text-blue-300 mb-2\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633<\/h4><p class=\"text-base text-slate-300 mb-4\">\u062a\u062a\u0637\u0644\u0628 \u062a\u0644\u0627\u0645\u0633\u0627\u064b \u0645\u0628\u0627\u0634\u0631\u0627\u064b. \u0627\u0636\u063a\u0637 \u0644\u062f\u0641\u0639 \u0627\u0644\u0635\u0646\u062f\u0648\u0642.<\/p><div class=\"flex gap-2\"><button id=\"pushBtn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded\">\u0627\u062f\u0641\u0639 \u0627\u0644\u0635\u0646\u062f\u0648\u0642<\/button><button id=\"resetContactBtn\" class=\"bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><\/div>`;\r\n document.getElementById('pushBtn')?.addEventListener('click', () => { if (blockX >= 250) return; isPushing = true; render(); if (pushingTimer) clearTimeout(pushingTimer); pushingTimer = setTimeout(() => { blockX = Math.min(blockX+60,250); isPushing = false; render(); },300); });\r\n document.getElementById('resetContactBtn')?.addEventListener('click', () => { blockX = 50; isPushing = false; render(); });\r\n } else {\r\n controlsDiv.innerHTML = `<div class=\"bg-slate-800 p-4 rounded-lg\"><h4 class=\"font-bold text-purple-300 mb-2\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f<\/h4><p class=\"text-base text-slate-300 mb-4\">\u0642\u0631\u0651\u0628 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633 \u0645\u0646 \u0627\u0644\u0643\u0631\u0629 \u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629.<\/p><div><label class=\"block text-base text-slate-400 mb-1\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633:<\/label><input type=\"range\" id=\"magnetSlider\" min=\"80\" max=\"350\" value=\"${magnetX}\" class=\"w-full accent-purple-500\" dir=\"ltr\"><\/div><button id=\"resetDistanceBtn\" class=\"w-full mt-4 bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0643\u0631\u0629 \u0648\u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633<\/button><\/div>`;\r\n const slider = document.getElementById('magnetSlider');\r\n slider?.addEventListener('input', (e) => { magnetX = parseInt(e.target.value); const dist = magnetX - ballX; if (dist < 120 && dist > 30 && !isAttracting) { isAttracting = true; render(); setTimeout(() => { ballX = magnetX - 30; isAttracting = false; render(); },400); } else render(); });\r\n document.getElementById('resetDistanceBtn')?.addEventListener('click', () => { magnetX = 280; ballX = 50; isAttracting = false; render(); });\r\n }\r\n }\r\n contactBtn.addEventListener('click', () => { activeTab='contact'; contactBtn.classList.add('bg-blue-600','text-white'); contactBtn.classList.remove('bg-slate-800','text-slate-400'); distanceBtn.classList.remove('bg-purple-600','text-white'); distanceBtn.classList.add('bg-slate-800','text-slate-400'); render(); updateControls(); });\r\n distanceBtn.addEventListener('click', () => { activeTab='distance'; distanceBtn.classList.add('bg-purple-600','text-white'); distanceBtn.classList.remove('bg-slate-800','text-slate-400'); contactBtn.classList.remove('bg-blue-600','text-white'); contactBtn.classList.add('bg-slate-800','text-slate-400'); render(); updateControls(); });\r\n render(); updateControls();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 ========================\r\n (function() {\r\n let surface = 'rough', isPlaying = false, velocity = 0, position = 50, isPushing = false, animFrame = null, lastTime = 0;\r\n const svg = document.getElementById('firstLawSvg'), controlsDiv = document.getElementById('firstLawControls');\r\n const friction = { rough: 0.5, smooth: 0 };\r\n function updateSVG() { svg.innerHTML = `<line x1=\"0\" y1=\"160\" x2=\"400\" y2=\"160\" stroke=\"${surface==='rough'?'#78350f':'#7dd3fc'}\" stroke-width=\"4\" \/><rect x=\"${position}\" y=\"110\" width=\"50\" height=\"50\" fill=\"#eab308\" rx=\"4\" stroke=\"#ca8a04\" stroke-width=\"2\" \/><text x=\"${position+25}\" y=\"140\" fill=\"#713f12\" font-size=\"12\" text-anchor=\"middle\" font-weight=\"bold\">\u062c\u0633\u0645<\/text>${isPushing?`<g transform=\"translate(${position-40},130)\"><line x1=\"0\" y1=\"0\" x2=\"30\" y2=\"0\" stroke=\"#ef4444\" stroke-width=\"4\" \/><polygon points=\"30,-5 38,0 30,5\" fill=\"#ef4444\" \/><\/g>`:''}${velocity>0?`<g transform=\"translate(${position+55},135)\"><line x1=\"0\" y1=\"0\" x2=\"${velocity\/2}\" y2=\"0\" stroke=\"#22c55e\" stroke-width=\"3\" \/><polygon points=\"${velocity\/2},-4 ${velocity\/2+6},0 ${velocity\/2},4\" fill=\"#22c55e\" \/><text x=\"${velocity\/4}\" y=\"-8\" fill=\"#22c55e\" font-size=\"10\">v<\/text><\/g>`:''}${velocity>0 && surface==='rough'?`<g transform=\"translate(${position-5},165)\"><line x1=\"0\" y1=\"0\" x2=\"-20\" y2=\"0\" stroke=\"#f97316\" stroke-width=\"2\" \/><polygon points=\"-20,-3 -26,0 -20,3\" fill=\"#f97316\" \/><text x=\"-13\" y=\"12\" fill=\"#f97316\" font-size=\"10\">\u0627\u062d\u062a\u0643\u0627\u0643<\/text><\/g>`:''}`; }\r\n function reset() { if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; velocity=0; position=50; isPushing=false; updateSVG(); if(document.getElementById('velValue')) document.getElementById('velValue').innerText='0.0'; }\r\n function animate(now) { if(!lastTime) lastTime=now; let delta=Math.min(0.033,(now-lastTime)\/1000); lastTime=now; if(isPlaying){ velocity=Math.max(0,velocity-friction[surface]*delta*20); position+=velocity*delta; if(position>=350||velocity<=0){ position=Math.min(position,350); isPlaying=false; if(animFrame) cancelAnimationFrame(animFrame); animFrame=null; } updateSVG(); if(document.getElementById('velValue')) document.getElementById('velValue').innerText=velocity.toFixed(1); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n function renderControls() {\r\n controlsDiv.innerHTML = `<div class=\"bg-slate-800 p-4 rounded-lg\"><div class=\"mb-4\"><label class=\"block text-base font-bold mb-2\">\u0646\u0648\u0639 \u0627\u0644\u0633\u0637\u062d:<\/label><div class=\"flex gap-2\"><button id=\"roughBtn\" class=\"flex-1 py-2 rounded font-bold ${surface==='rough'?'bg-amber-700 text-white':'bg-slate-700 text-slate-400'}\">\u062e\u0634\u0646 (\u0627\u062d\u062a\u0643\u0627\u0643)<\/button><button id=\"smoothBtn\" class=\"flex-1 py-2 rounded font-bold ${surface==='smooth'?'bg-blue-600 text-white':'bg-slate-700 text-slate-400'}\">\u0623\u0645\u0644\u0633 (\u0645\u062b\u0627\u0644\u064a)<\/button><\/div><\/div><div class=\"flex gap-2 mb-4\"><button id=\"pushFirstBtn\" class=\"flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded\">\u062f\u0641\u0639 \u0627\u0644\u062c\u0633\u0645<\/button><button id=\"resetFirstBtn\" class=\"bg-slate-600 hover:bg-slate-500 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><div class=\"bg-black\/30 p-3 rounded\"><p><strong>\u0627\u0644\u0633\u0631\u0639\u0629:<\/strong> <span id=\"velValue\">0.0<\/span> m\/s<\/p><p class=\"text-base text-amber-200\/80\">${surface==='smooth'?'\u0641\u064a \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0623\u0645\u0644\u0633\u060c \u064a\u062d\u0627\u0641\u0638 \u0627\u0644\u062c\u0633\u0645 \u0639\u0644\u0649 \u0633\u0631\u0639\u062a\u0647 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 (\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a).':'\u0641\u064a \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u062e\u0634\u0646\u060c \u062a\u0639\u0645\u0644 \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 \u0639\u0644\u0649 \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062c\u0633\u0645.'}<\/p><\/div><\/div>`;\r\n document.getElementById('roughBtn')?.addEventListener('click',()=>{ surface='rough'; reset(); renderControls(); updateSVG(); });\r\n document.getElementById('smoothBtn')?.addEventListener('click',()=>{ surface='smooth'; reset(); renderControls(); updateSVG(); });\r\n document.getElementById('pushFirstBtn')?.addEventListener('click',()=>{ if(isPlaying) return; isPushing=true; updateSVG(); setTimeout(()=>{ velocity=50; isPlaying=true; isPushing=false; updateSVG(); if(animFrame) cancelAnimationFrame(animFrame); lastTime=performance.now(); animFrame=requestAnimationFrame(animate); },200); });\r\n document.getElementById('resetFirstBtn')?.addEventListener('click',reset);\r\n }\r\n renderControls(); updateSVG();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629: \u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \/ \u062a\u0633\u0627\u0631\u0639 \u062b\u0627\u0628\u062a ========================\r\n (function() {\r\n let time=0, isPlaying=false, animFrame=null, lastTimestamp=0;\r\n const v=20, a=10, maxTime=10;\r\n const carV=document.getElementById('carV'), carA=document.getElementById('carA'), distVLabel=document.getElementById('distVLabel'), distALabel=document.getElementById('distALabel'), timeSpan=document.getElementById('timeVal'), playBtn=document.getElementById('playPauseBtn'), resetBtn=document.getElementById('resetVABtn');\r\n function updateDisplay(){ const posV=v*time, posA=0.5*a*time*time; carV.style.transform=`translateX(-${Math.min(posV,380)}px)`; carA.style.transform=`translateX(-${Math.min(posA,380)}px)`; distVLabel.innerText=`\u0627\u0644\u0645\u0633\u0627\u0641\u0629: ${(posV\/10).toFixed(1)} m`; distALabel.innerText=`\u0627\u0644\u0645\u0633\u0627\u0641\u0629: ${(posA\/10).toFixed(1)} m`; timeSpan.innerText=time.toFixed(1)+' s'; }\r\n function reset(){ if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; time=0; updateDisplay(); playBtn.innerText='\u0628\u062f\u0621'; }\r\n function animate(now){ if(!lastTimestamp) lastTimestamp=now; const delta=Math.min(0.033,(now-lastTimestamp)\/1000); lastTimestamp=now; if(isPlaying){ time+=delta; if(time>=maxTime){ time=maxTime; isPlaying=false; playBtn.innerText='\u0625\u0639\u0627\u062f\u0629'; cancelAnimationFrame(animFrame); animFrame=null; } updateDisplay(); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n playBtn.addEventListener('click',()=>{ if(isPlaying){ isPlaying=false; playBtn.innerText='\u0628\u062f\u0621'; if(animFrame) cancelAnimationFrame(animFrame); } else { if(time>=maxTime) reset(); isPlaying=true; lastTimestamp=performance.now(); animFrame=requestAnimationFrame(animate); playBtn.innerText='\u0625\u064a\u0642\u0627\u0641'; } });\r\n resetBtn.addEventListener('click',reset);\r\n updateDisplay();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a ========================\r\n (function() {\r\n let force=50, mass=5, isPlaying=false, time=0, animFrame=null, lastTimestamp=0;\r\n const svg=document.getElementById('secondLawSvg'), controlsDiv=document.getElementById('secondLawControls');\r\n const acceleration=()=>force\/mass;\r\n function updateSVG(){ const aVal=acceleration(), pos=0.5*aVal*time*time*10, boxSize=30+mass*3, forceArrow=force*0.8; svg.innerHTML=`<rect x=\"0\" y=\"160\" width=\"450\" height=\"60\" fill=\"#334155\" \/><line x1=\"0\" y1=\"160\" x2=\"450\" y2=\"160\" stroke=\"#475569\" stroke-width=\"4\" \/>${[0,1,2,3].map(i=>`<g transform=\"translate(${50+i*100},160)\"><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"10\" stroke=\"#94a3b8\" stroke-width=\"2\" \/><text x=\"0\" y=\"25\" fill=\"#94a3b8\" font-size=\"10\" text-anchor=\"middle\">${i*10}m<\/text><\/g>`).join('')}<g transform=\"translate(${50+Math.min(pos,350)}, ${160-boxSize})\"><rect x=\"0\" y=\"0\" width=\"${boxSize}\" height=\"${boxSize}\" fill=\"#eab308\" rx=\"4\" stroke=\"#ca8a04\" stroke-width=\"2\" \/><text x=\"${boxSize\/2}\" y=\"${boxSize\/2+5}\" fill=\"#713f12\" font-size=\"14\" text-anchor=\"middle\" font-weight=\"bold\">${mass}kg<\/text><g transform=\"translate(${boxSize}, ${boxSize\/2})\"><line x1=\"0\" y1=\"0\" x2=\"${forceArrow}\" y2=\"0\" stroke=\"#ef4444\" stroke-width=\"4\" \/><polygon points=\"${forceArrow},-5 ${forceArrow+8},0 ${forceArrow},5\" fill=\"#ef4444\" \/><text x=\"${forceArrow\/2}\" y=\"-10\" fill=\"#ef4444\" font-size=\"12\" text-anchor=\"middle\">F = ${force}N<\/text><\/g>${aVal>0?`<g transform=\"translate(${boxSize\/2}, -20)\"><line x1=\"0\" y1=\"0\" x2=\"${aVal*3}\" y2=\"0\" stroke=\"#22c55e\" stroke-width=\"3\" \/><polygon points=\"${aVal*3},-4 ${aVal*3+6},0 ${aVal*3},4\" fill=\"#22c55e\" \/><text x=\"${(aVal*3)\/2}\" y=\"-8\" fill=\"#22c55e\" font-size=\"12\" text-anchor=\"middle\">a<\/text><\/g>`:''}<\/g>`; }\r\n function reset(){ if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; time=0; updateSVG(); if(document.getElementById('aValueSpan')) document.getElementById('aValueSpan').innerText=acceleration().toFixed(1); if(document.getElementById('timeSecSpan')) document.getElementById('timeSecSpan').innerText='0.0'; if(document.getElementById('velSecSpan')) document.getElementById('velSecSpan').innerText='0.0'; }\r\n function animate(now){ if(!lastTimestamp) lastTimestamp=now; const delta=Math.min(0.033,(now-lastTimestamp)\/1000); lastTimestamp=now; if(isPlaying){ time+=delta; const pos=0.5*acceleration()*time*time*10; if(pos>=350){ isPlaying=false; cancelAnimationFrame(animFrame); } updateSVG(); const v=acceleration()*time; if(document.getElementById('timeSecSpan')) document.getElementById('timeSecSpan').innerText=time.toFixed(1); if(document.getElementById('velSecSpan')) document.getElementById('velSecSpan').innerText=v.toFixed(1); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n function renderControls(){\r\n controlsDiv.innerHTML=`<div class=\"bg-slate-800 p-4 rounded-lg space-y-4\"><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-red-400\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 (F)<\/label><span id=\"forceVal\">${force} N<\/span><\/div><input type=\"range\" id=\"forceSlider\" min=\"10\" max=\"100\" step=\"10\" value=\"${force}\" class=\"w-full accent-red-500\" dir=\"ltr\"><\/div><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-amber-400\">\u0627\u0644\u0643\u062a\u0644\u0629 (m)<\/label><span id=\"massVal\">${mass} kg<\/span><\/div><input type=\"range\" id=\"massSlider\" min=\"1\" max=\"10\" step=\"1\" value=\"${mass}\" class=\"w-full accent-amber-500\" dir=\"ltr\"><\/div><div class=\"flex gap-2\"><button id=\"playSecondBtn\" class=\"flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded\">\u062a\u0634\u063a\u064a\u0644<\/button><button id=\"resetSecondBtn\" class=\"bg-slate-600 hover:bg-slate-500 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><div class=\"bg-black\/30 p-3 rounded\"><div class=\"flex justify-center gap-2 text-lg mb-2\"><span class=\"text-green-400 font-bold\">a<\/span><span>=<\/span><div class=\"flex flex-col items-center\"><span class=\"text-red-400 border-b px-2\" id=\"aForceSpan\">${force}<\/span><span class=\"text-amber-400 px-2\" id=\"aMassSpan\">${mass}<\/span><\/div><span>=<\/span><span class=\"text-green-400 font-bold\" id=\"aValueSpan\">${acceleration().toFixed(1)} m\/s\u00b2<\/span><\/div><div class=\"flex justify-between text-base\"><span><strong>\u0627\u0644\u0632\u0645\u0646:<\/strong> <span id=\"timeSecSpan\">0.0<\/span> s<\/span><span><strong>\u0627\u0644\u0633\u0631\u0639\u0629:<\/strong> <span id=\"velSecSpan\">0.0<\/span> m\/s<\/span><\/div><\/div><\/div>`;\r\n const forceSlider=document.getElementById('forceSlider'), massSlider=document.getElementById('massSlider');\r\n forceSlider.addEventListener('input',(e)=>{ force=parseInt(e.target.value); document.getElementById('forceVal').innerText=force; document.getElementById('aForceSpan').innerText=force; document.getElementById('aValueSpan').innerText=acceleration().toFixed(1); reset(); });\r\n massSlider.addEventListener('input',(e)=>{ mass=parseInt(e.target.value); document.getElementById('massVal').innerText=mass; document.getElementById('aMassSpan').innerText=mass; document.getElementById('aValueSpan').innerText=acceleration().toFixed(1); reset(); });\r\n document.getElementById('playSecondBtn').addEventListener('click',()=>{ if(!isPlaying){ isPlaying=true; lastTimestamp=performance.now(); animFrame=requestAnimationFrame(animate); } });\r\n document.getElementById('resetSecondBtn').addEventListener('click',reset);\r\n }\r\n renderControls(); updateSVG();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062e\u0627\u0645\u0633\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b ========================\r\n (function() {\r\n let massA=5, massB=5, forceVal=50, isPlaying=false, time=0, animFrame=null, lastTimestamp=0;\r\n const pushDuration=0.5, svg=document.getElementById('thirdLawSvg'), controlsDiv=document.getElementById('thirdLawControls');\r\n function getState(t){ const aA=forceVal\/massA, aB=forceVal\/massB; if(t<=pushDuration) return { posA:-0.5*aA*t*t*10, posB:0.5*aB*t*t*10, vA:-aA*t, vB:aB*t, pushing:true }; else{ const pushDistA=-0.5*aA*pushDuration*pushDuration*10, pushDistB=0.5*aB*pushDuration*pushDuration*10, finalVA=-aA*pushDuration, finalVB=aB*pushDuration, dt=t-pushDuration; return { posA:pushDistA+finalVA*dt*10, posB:pushDistB+finalVB*dt*10, vA:finalVA, vB:finalVB, pushing:false }; } }\r\n function updateSVG(){ const {posA,posB,pushing}=getState(time), boxA=30+massA*3, boxB=30+massB*3; svg.innerHTML=`<rect x=\"0\" y=\"160\" width=\"500\" height=\"60\" fill=\"#bae6fd\" \/><line x1=\"0\" y1=\"160\" x2=\"500\" y2=\"160\" stroke=\"#7dd3fc\" stroke-width=\"4\" \/><line x1=\"250\" y1=\"140\" x2=\"250\" y2=\"160\" stroke=\"#94a3b8\" stroke-width=\"2\" stroke-dasharray=\"4 4\" \/><g transform=\"translate(${250+posA-boxA}, ${160-boxA})\"><rect x=\"0\" y=\"0\" width=\"${boxA}\" height=\"${boxA}\" fill=\"#ef4444\" rx=\"4\" stroke=\"#b91c1c\" stroke-width=\"2\" \/><text x=\"${boxA\/2}\" y=\"${boxA\/2+5}\" fill=\"#fee2e2\" font-size=\"14\" text-anchor=\"middle\">A (${massA}kg)<\/text><\/g><g transform=\"translate(${250+posB}, ${160-boxB})\"><rect x=\"0\" y=\"0\" width=\"${boxB}\" height=\"${boxB}\" fill=\"#3b82f6\" rx=\"4\" stroke=\"#1d4ed8\" stroke-width=\"2\" \/><text x=\"${boxB\/2}\" y=\"${boxB\/2+5}\" fill=\"#dbeafe\" font-size=\"14\" text-anchor=\"middle\">B (${massB}kg)<\/text><\/g>${pushing?`<g transform=\"translate(250,100)\"><line x1=\"0\" y1=\"-10\" x2=\"${forceVal*0.8}\" y2=\"-10\" stroke=\"#3b82f6\" stroke-width=\"3\" \/><polygon points=\"${forceVal*0.8},-14 ${forceVal*0.8+6},-10 ${forceVal*0.8},-6\" fill=\"#3b82f6\" \/><text x=\"${(forceVal*0.8)\/2}\" y=\"-20\" fill=\"#3b82f6\" font-size=\"12\" text-anchor=\"middle\">F (A\u2192B)<\/text><line x1=\"0\" y1=\"10\" x2=\"${-forceVal*0.8}\" y2=\"10\" stroke=\"#ef4444\" stroke-width=\"3\" \/><polygon points=\"${-forceVal*0.8},6 ${-forceVal*0.8-6},10 ${-forceVal*0.8},14\" fill=\"#ef4444\" \/><text x=\"${(-forceVal*0.8)\/2}\" y=\"25\" fill=\"#ef4444\" font-size=\"12\" text-anchor=\"middle\">F (B\u2192A)<\/text><\/g>`:''}`; }\r\n function reset(){ if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; time=0; updateSVG(); if(document.getElementById('vA')) document.getElementById('vA').innerText='0.0'; if(document.getElementById('vB')) document.getElementById('vB').innerText='0.0'; }\r\n function animate(now){ if(!lastTimestamp) lastTimestamp=now; const delta=Math.min(0.033,(now-lastTimestamp)\/1000); lastTimestamp=now; if(isPlaying){ time+=delta; if(time>=3){ isPlaying=false; cancelAnimationFrame(animFrame); } updateSVG(); const {vA,vB}=getState(time); if(document.getElementById('vA')) document.getElementById('vA').innerText=Math.abs(vA).toFixed(1); if(document.getElementById('vB')) document.getElementById('vB').innerText=Math.abs(vB).toFixed(1); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n function renderControls(){\r\n controlsDiv.innerHTML=`<div class=\"bg-slate-800 p-4 rounded-lg space-y-4\"><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-white\">\u0642\u0648\u0629 \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u0645\u062a\u0628\u0627\u062f\u0644\u0629 (F)<\/label><span id=\"forceThirdVal\">${forceVal} N<\/span><\/div><input type=\"range\" id=\"forceThirdSlider\" min=\"10\" max=\"100\" step=\"10\" value=\"${forceVal}\" class=\"w-full accent-green-500\" dir=\"ltr\"><\/div><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-red-400\">\u0643\u062a\u0644\u0629 \u0627\u0644\u062c\u0633\u0645 A<\/label><span id=\"massAVal\">${massA} kg<\/span><\/div><input type=\"range\" id=\"massASlider\" min=\"1\" max=\"10\" step=\"1\" value=\"${massA}\" class=\"w-full accent-red-500\" dir=\"ltr\"><\/div><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-blue-400\">\u0643\u062a\u0644\u0629 \u0627\u0644\u062c\u0633\u0645 B<\/label><span id=\"massBVal\">${massB} kg<\/span><\/div><input type=\"range\" id=\"massBSlider\" min=\"1\" max=\"10\" step=\"1\" value=\"${massB}\" class=\"w-full accent-blue-500\" dir=\"ltr\"><\/div><div class=\"flex gap-2\"><button id=\"playThirdBtn\" class=\"flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded\">\u0627\u062f\u0641\u0639<\/button><button id=\"resetThirdBtn\" class=\"bg-slate-600 hover:bg-slate-500 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><div class=\"bg-black\/30 p-3 rounded\"><div class=\"flex justify-between text-base\"><span class=\"text-red-400\"><strong>\u0633\u0631\u0639\u0629 A:<\/strong> <span id=\"vA\">0.0<\/span> m\/s<\/span><span class=\"text-blue-400\"><strong>\u0633\u0631\u0639\u0629 B:<\/strong> <span id=\"vB\">0.0<\/span> m\/s<\/span><\/div><p class=\"text-base text-amber-300\/80 mt-2\">\u0627\u0636\u063a\u0637 \"\u0627\u062f\u0641\u0639\" \u0644\u0645\u0644\u0627\u062d\u0638\u0629 \u0642\u0648\u0649 \u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644.<\/p><\/div><\/div>`;\r\n document.getElementById('forceThirdSlider')?.addEventListener('input',(e)=>{ forceVal=parseInt(e.target.value); document.getElementById('forceThirdVal').innerText=forceVal; reset(); });\r\n document.getElementById('massASlider')?.addEventListener('input',(e)=>{ massA=parseInt(e.target.value); document.getElementById('massAVal').innerText=massA; reset(); });\r\n document.getElementById('massBSlider')?.addEventListener('input',(e)=>{ massB=parseInt(e.target.value); document.getElementById('massBVal').innerText=massB; reset(); });\r\n document.getElementById('playThirdBtn')?.addEventListener('click',()=>{ if(!isPlaying){ isPlaying=true; lastTimestamp=performance.now(); animFrame=requestAnimationFrame(animate); } });\r\n document.getElementById('resetThirdBtn')?.addEventListener('click',reset);\r\n }\r\n renderControls(); updateSVG();\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18331","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18331","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=18331"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18331\/revisions"}],"predecessor-version":[{"id":18332,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18331\/revisions\/18332"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 - \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n direction: rtl;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6366f1; }\r\n input[type=\"range\"] {\r\n direction: ltr;\r\n -webkit-appearance: none;\r\n background: #334155;\r\n height: 4px;\r\n border-radius: 5px;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 16px;\r\n width: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .ltr { direction: ltr; text-align: left; }\r\n .ltr-inline { direction: ltr; display: inline-block; }\r\n button {\r\n transition: all 0.2s ease;\r\n }\r\n .sim-canvas {\r\n background: #1e293b;\r\n border-radius: 0.75rem;\r\n }\r\n .tab-btn.active { background-color: #2563eb; color: white; }\r\n .distance-tab.active { background-color: #9333ea; color: white; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n \r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton's Laws of Motion)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0642\u0648\u0627\u0646\u064a\u0646_\u0646\u064a\u0648\u062a\u0646_\u0641\u064a_\u0627\u0644\u062d\u0631\u0643\u0629_audio.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0642\u0648\u0627\u0646\u064a\u0646_\u0646\u064a\u0648\u062a\u0646_\u0641\u064a_\u0627\u0644\u062d\u0631\u0643\u0629_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u0642\u062f\u0645\u0629<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-base text-slate-300 leading-relaxed mb-2\">\r\n \u0639\u0646\u062f\u0645\u0627 \u0646\u0646\u0638\u0631 \u062d\u0648\u0644\u0646\u0627\u060c \u0646\u0631\u0649 \u0623\u062c\u0633\u0627\u0645\u064b\u0627 \u0633\u0627\u0643\u0646\u0629 \u0648\u0623\u062e\u0631\u0649 \u0645\u062a\u062d\u0631\u0643\u0629. \u0642\u062f \u064a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646\u060c \u0648\u0642\u062f \u062a\u062a\u063a\u064a\u0631 \u0633\u0631\u0639\u0629 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0623\u0648 \u0627\u062a\u062c\u0627\u0647 \u062d\u0631\u0643\u062a\u0647. \u0627\u0644\u0633\u0628\u0628 \u0641\u064a \u0630\u0644\u0643 \u0647\u0648 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0641\u064a \u0627\u0644\u0623\u062c\u0633\u0627\u0645. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0627\u0644\u0637\u0627\u0626\u0631\u0629 \u0639\u0646\u062f \u0625\u0642\u0644\u0627\u0639\u0647\u0627 \u062a\u062e\u062a\u0644\u0641 \u0639\u0646 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647\u0627 \u0648\u0647\u064a \u0648\u0627\u0642\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u062f\u0631\u062c.\r\n <\/p>\r\n <p class=\"text-base text-amber-200\/80\">\r\n \u062a\u0631\u0628\u0637 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0648\u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646\u0647\u0627. \u0648\u0628\u062a\u0637\u0628\u064a\u0642\u0647\u0627\u060c \u064a\u0645\u0643\u0646 \u0648\u0635\u0641 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0642\u0648\u0649 \u0641\u064a \u0627\u0644\u0623\u062c\u0633\u0627\u0645.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0642\u0648\u0629 (Force)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-base text-slate-300 mb-3\"><strong>\u0627\u0644\u0642\u0648\u0629<\/strong> \u0647\u064a \u0645\u0624\u062b\u0631 \u0642\u062f \u064a\u063a\u064a\u0631 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u0645 \u0623\u0648 \u0634\u0643\u0644\u0647 \u0623\u0648 \u0643\u0644\u064a\u0647\u0645\u0627.<\/p>\r\n <h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0623\u0645\u062b\u0644\u0629:<\/h3>\r\n <ul class=\"list-disc list-inside text-base text-slate-400 space-y-1\">\r\n <li>\u0639\u0646\u062f\u0645\u0627 \u0623\u062f\u0641\u0639 \u062c\u0633\u0645\u064b\u0627 \u0623\u0648 \u0623\u0633\u062d\u0628\u0647\u060c \u0642\u062f \u0623\u062d\u0631\u0643\u0647 \u0625\u0646 \u0643\u0627\u0646 \u0633\u0627\u0643\u0646\u064b\u0627\u060c \u0623\u0648 \u0623\u0648\u0642\u0641\u0647 \u0625\u0646 \u0643\u0627\u0646 \u0645\u062a\u062d\u0631\u0643\u064b\u0627.<\/li>\r\n <li>\u0639\u0646\u062f\u0645\u0627 \u0623\u0631\u0641\u0639 \u062c\u0633\u0645\u064b\u0627 \u062b\u0645 \u0623\u062a\u0631\u0643\u0647\u060c \u062a\u0624\u062b\u0631 \u0627\u0644\u0623\u0631\u0636 \u0641\u064a\u0647 \u0628\u0642\u0648\u0629 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0642\u0648\u0649<\/h2>\r\n <p class=\"text-base text-slate-300 mb-4\">\u064a\u0645\u0643\u0646 \u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0642\u0648\u0649 \u0625\u0644\u0649 \u0646\u0648\u0639\u064a\u0646 \u0631\u0626\u064a\u0633\u064a\u064a\u0646:<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-blue-900\/20 p-4 rounded-lg border border-blue-500\/30\">\r\n <h3 class=\"font-bold text-blue-300 mb-2\">1. \u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633 (Contact Forces)<\/h3>\r\n <p class=\"text-base text-blue-100\/80 mb-2\">\u0642\u0648\u0649 \u062a\u062a\u0637\u0644\u0628 \u062a\u0644\u0627\u0645\u0633\u064b\u0627 \u0645\u0628\u0627\u0634\u0631\u064b\u0627 \u0628\u064a\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645.<\/p>\r\n <p class=\"text-base text-blue-200\/60 bg-black\/20 p-2 rounded mb-3\"><strong>\u0645\u062b\u0627\u0644:<\/strong> \u0639\u0646\u062f\u0645\u0627 \u064a\u0631\u0643\u0644 \u0627\u0644\u0644\u0627\u0639\u0628 \u0627\u0644\u0643\u0631\u0629 \u0628\u0642\u062f\u0645\u0647\u060c \u062a\u0624\u062b\u0631 \u0627\u0644\u0642\u062f\u0645 \u0641\u064a \u0627\u0644\u0643\u0631\u0629 \u0628\u0642\u0648\u0629 \u062a\u0644\u0627\u0645\u0633.<\/p>\r\n <h4 class=\"font-bold text-blue-300 text-base mb-1\">\u0648\u0645\u0646 \u0623\u0645\u062b\u0644\u0629 \u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633: \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 (Normal Force)<\/h4>\r\n <ul class=\"list-disc list-inside text-base text-blue-100\/80 space-y-1\">\r\n <li>\u062a\u0646\u0634\u0623 \u0628\u064a\u0646 \u0627\u0644\u062c\u0633\u0645 \u0648\u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0630\u064a \u064a\u0648\u0636\u064e\u0639 \u0639\u0644\u064a\u0647.<\/li>\r\n <li>\u062a\u0643\u0648\u0646 \u062f\u0627\u0626\u0645\u064b\u0627 \u0639\u0645\u0648\u062f\u064a\u0629 \u0639\u0644\u0649 \u0633\u0637\u062d \u0627\u0644\u062a\u0644\u0627\u0645\u0633.<\/li>\r\n <li><strong>\u0645\u062b\u0627\u0644:<\/strong> \u0627\u0644\u0643\u062a\u0627\u0628 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0639\u0644\u0649 \u0637\u0627\u0648\u0644\u0629 \u064a\u062a\u0623\u062b\u0631 \u0628\u0642\u0648\u0629 \u0639\u0645\u0648\u062f\u064a\u0629 \u0625\u0644\u0649 \u0623\u0639\u0644\u0649.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-purple-900\/20 p-4 rounded-lg border border-purple-500\/30\">\r\n <h3 class=\"font-bold text-purple-300 mb-2\">2. \u0642\u0648\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f (Action-at-a-Distance Forces)<\/h3>\r\n <p class=\"text-base text-purple-100\/80 mb-2\">\u0642\u0648\u0649 \u062a\u0646\u0634\u0623 \u0628\u064a\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u062a\u0644\u0627\u0645\u0633 \u0645\u0628\u0627\u0634\u0631.<\/p>\r\n <h4 class=\"font-bold text-purple-300 text-base mb-1\">\u0623\u0645\u062b\u0644\u0629:<\/h4>\r\n <ul class=\"list-disc list-inside text-base text-purple-100\/80 space-y-2\">\r\n <li><strong>\u0642\u0648\u0629 \u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0627\u0644\u0623\u0631\u0636\u064a\u0629:<\/strong> \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0639\u0644\u0649 \u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0646 \u0633\u0637\u062d \u0627\u0644\u0623\u0631\u0636 \u064a\u062a\u0623\u062b\u0631 \u0628\u0647\u0627 \u062d\u062a\u0649 \u062f\u0648\u0646 \u062a\u0644\u0627\u0645\u0633.<\/li>\r\n <li><strong>\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629<\/strong><\/li>\r\n <li><strong>\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629:<\/strong> (\u0645\u062b\u0644 \u062c\u0630\u0628 \u0627\u0644\u0628\u0627\u0644\u0648\u0646 \u0627\u0644\u0645\u0634\u062d\u0648\u0646 \u0644\u0642\u0635\u0627\u0635\u0627\u062a \u0627\u0644\u0648\u0631\u0642).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"forcesSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\r\n \u0645\u062d\u0627\u0643\u0627\u0629: \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0642\u0648\u0649\r\n <\/h3>\r\n <div class=\"flex gap-2 mb-6\">\r\n <button id=\"contactTabBtn\" class=\"tab-btn px-4 py-2 rounded-lg font-bold bg-blue-600 text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633<\/button>\r\n <button id=\"distanceTabBtn\" class=\"distance-tab px-4 py-2 rounded-lg font-bold bg-slate-800 text-slate-400 hover:bg-slate-700\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f<\/button>\r\n <\/div>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[400px] h-[200px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\">\r\n <svg id=\"forcesSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 400 200\" class=\"absolute inset-0\"><\/svg>\r\n <\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"forcesControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0622\u062b\u0627\u0631 \u0627\u0644\u0642\u0648\u0649<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <p class=\"text-base text-slate-300\">\u062a\u0624\u062b\u0631 \u0627\u0644\u0642\u0648\u0649 \u0641\u064a \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0628\u0637\u0631\u0627\u0626\u0642 \u0645\u062e\u062a\u0644\u0641\u0629. \u0644\u0641\u0647\u0645 \u0627\u0644\u0623\u062b\u0631 \u0627\u0644\u0646\u0627\u062a\u062c \u0648\u0648\u0635\u0641 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u0623\u062c\u0633\u0627\u0645\u060c \u0646\u0637\u0628\u0642 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton\u2019s First Law)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30 mb-4\">\r\n <h3 class=\"font-bold text-amber-400 mb-2\">\u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3>\r\n <p class=\"text-lg text-amber-100 font-serif italic text-center\">\"\u064a\u062d\u0627\u0641\u0638 \u0627\u0644\u062c\u0633\u0645 \u0639\u0644\u0649 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0645\u0646 \u062d\u064a\u062b \u0627\u0644\u0633\u0643\u0648\u0646\u060c \u0623\u0648 \u0627\u0644\u062d\u0631\u0643\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 \u0648\u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0645\u0627 \u0644\u0645 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u0645\u062d\u0635\u0644\u0629 \u062a\u063a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629.\"<\/p>\r\n <\/div>\r\n <h3 class=\"font-bold text-white text-base mb-3\">\u0634\u0631\u062d \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <div class=\"bg-slate-800\/50 p-3 rounded border border-slate-700\"><h4 class=\"font-bold text-teal-300 mb-2 text-base\">\u0627\u0644\u062d\u0627\u0644\u0629 1: \u062c\u0633\u0645 \u0633\u0627\u0643\u0646 \u0639\u0644\u0649 \u0633\u0637\u062d \u0623\u0641\u0642\u064a \u062e\u0634\u0646<\/h4><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u064a\u062a\u0623\u062b\u0631 \u0628\u0642\u0648\u062a\u064a\u0646: \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 (\u2191) \u0648\u0627\u0644\u0648\u0632\u0646 (\u2193)<\/li><li>\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0642\u0648\u0649 = \u0635\u0641\u0631 \u2192 \u0627\u0644\u062c\u0633\u0645 \u064a\u0628\u0642\u0649 \u0633\u0627\u0643\u0646\u064b\u0627.<\/li><\/ul><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded border border-slate-700\"><h4 class=\"font-bold text-teal-300 mb-2 text-base\">\u0627\u0644\u062d\u0627\u0644\u0629 2: \u062f\u0641\u0639 \u0642\u0631\u0635 \u0639\u0644\u0649 \u0633\u0637\u062d \u062e\u0634\u0646<\/h4><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u0628\u0639\u062f \u062f\u0641\u0639 \u0627\u0644\u0642\u0631\u0635\u060c \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u0627\u062d\u062a\u0643\u0627\u0643 (f) \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629.<\/li><li>\u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 \u062a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0625\u0628\u0637\u0627\u0621 \u0633\u0631\u0639\u0629 \u0627\u0644\u0642\u0631\u0635 \u062d\u062a\u0649 \u064a\u062a\u0648\u0642\u0641.<\/li><\/ul><\/div>\r\n <div class=\"bg-slate-800\/50 p-3 rounded border border-slate-700\"><h4 class=\"font-bold text-teal-300 mb-2 text-base\">\u0627\u0644\u062d\u0627\u0644\u0629 3: \u062d\u0631\u0643\u0629 \u0642\u0631\u0635 \u0639\u0644\u0649 \u0633\u0637\u062d \u0623\u0645\u0644\u0633 (\u0628\u062f\u0648\u0646 \u0627\u062d\u062a\u0643\u0627\u0643)<\/h4><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0623\u0641\u0642\u064a = \u0635\u0641\u0631.<\/li><li>\u064a\u0633\u062a\u0645\u0631 \u0627\u0644\u0642\u0631\u0635 \u0628\u0627\u0644\u062d\u0631\u0643\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 \u0648\u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u062f\u0648\u0646 \u062a\u0648\u0642\u0641.<\/li><\/ul><\/div>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u0646\u0633\u062a\u0646\u062a\u062c \u0645\u0646 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646\u060c \u0648\u0643\u0630\u0644\u0643 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u060c \u062a\u0633\u0627\u0648\u064a \u0635\u0641\u0631\u064b\u0627.<\/p><p class=\"text-base text-slate-300\"><strong class=\"text-white\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (Inertia):<\/strong> \u0627\u0644\u062c\u0633\u0645 \u0639\u0627\u062c\u0632 \u0639\u0646 \u062a\u063a\u064a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0645\u0646 \u062a\u0644\u0642\u0627\u0621 \u0646\u0641\u0633\u0647. \u0641\u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646 \u0644\u0627 \u064a\u062a\u062d\u0631\u0643 \u0625\u0644\u0627 \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629\u060c \u0648\u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0644\u0627 \u064a\u063a\u064a\u0631 \u0633\u0631\u0639\u062a\u0647 \u0623\u0648 \u0627\u062a\u062c\u0627\u0647\u0647 \u0625\u0644\u0627 \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629.<\/p><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"firstLawSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646 (\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a)<\/h3>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[400px] h-[200px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\"><svg id=\"firstLawSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 400 200\"><\/svg><\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"firstLawControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062e\u0627\u0645\u0633\u0627\u064b: \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 \u0648\u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">1. \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 (Constant Velocity)<\/h3><ul class=\"list-disc list-inside text-base text-slate-300 mb-3\"><li>\u0627\u0644\u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0645\u0646\u062a\u0638\u0645\u0629.<\/li><li>\u064a\u0642\u0637\u0639 \u0625\u0632\u0627\u062d\u0627\u062a \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0641\u064a \u0623\u0632\u0645\u0646\u0629 \u0645\u062a\u0633\u0627\u0648\u064a\u0629.<\/li><\/ul><div class=\"bg-black\/30 p-4 rounded-xl text-center overflow-x-auto mb-3 flex justify-center items-center gap-3 font-serif text-2xl\" dir=\"ltr\"><span class=\"text-amber-400 font-bold\">v<\/span><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">\u0394x<\/span><span class=\"px-3\">\u0394t<\/span><\/div><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">x<sub>f<\/sub> - x<sub>i<\/sub><\/span><span class=\"px-3\">\u0394t<\/span><\/div><\/div><p class=\"text-base text-slate-300 mb-1\"><strong>\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0631\u0639\u0629:<\/strong> m\/s<\/p><p class=\"text-base text-slate-400 bg-black\/20 p-2 rounded\"><strong>\u0645\u062b\u0627\u0644:<\/strong> \u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 10 m\/s \u064a\u0642\u0637\u0639 10 m \u0643\u0644 \u062b\u0627\u0646\u064a\u0629.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">2. \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a (Constant Acceleration)<\/h3><ul class=\"list-disc list-inside text-base text-slate-300 mb-3\"><li>\u0627\u0644\u0633\u0631\u0639\u0629 \u062a\u062a\u063a\u064a\u0631 \u0628\u0627\u0646\u062a\u0638\u0627\u0645 (\u062a\u0632\u062f\u0627\u062f \u0623\u0648 \u062a\u062a\u0646\u0627\u0642\u0635 \u0628\u0645\u0642\u062f\u0627\u0631 \u062b\u0627\u0628\u062a \u0641\u064a \u0643\u0644 \u062b\u0627\u0646\u064a\u0629).<\/li><\/ul><div class=\"bg-black\/30 p-4 rounded-xl text-center overflow-x-auto mb-3 flex justify-center items-center gap-3 font-serif text-2xl\" dir=\"ltr\"><span class=\"text-amber-400 font-bold\">a<\/span><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">\u0394v<\/span><span class=\"px-3\">\u0394t<\/span><\/div><span class=\"text-slate-400\">=<\/span><div class=\"flex flex-col items-center\"><span class=\"border-b border-slate-500 px-3\">v<sub>f<\/sub> - v<sub>i<\/sub><\/span><span class=\"px-3\">\u0394t<\/span><\/div><\/div><p class=\"text-base text-slate-300 mb-1\"><strong>\u0648\u062d\u062f\u0629 \u0627\u0644\u062a\u0633\u0627\u0631\u0639:<\/strong> m\/s\u00b2<\/p><p class=\"text-base text-slate-400 bg-black\/20 p-2 rounded mb-2\"><strong>\u0645\u062b\u0627\u0644:<\/strong> \u0633\u064a\u0627\u0631\u0629 \u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0645\u0642\u062f\u0627\u0631 10 m\/s \u0643\u0644 \u062b\u0627\u0646\u064a\u0629.<\/p><p class=\"text-base text-amber-200\/80\"><strong>\u0645\u0644\u0627\u062d\u0638\u0629:<\/strong> \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0643\u0645\u064a\u0629 \u0645\u062a\u062c\u0647\u0629. \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u062a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u062a\u0633\u0627\u0631\u0639)\u060c \u0648\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0627\u0644\u0633\u0627\u0644\u0628\u0629 \u062a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u062a\u0628\u0627\u0637\u0624).<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"velocityAccelSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a<\/h3>\r\n <div class=\"space-y-6\">\r\n <div class=\"space-y-2\"><div class=\"flex justify-between text-base text-slate-400 px-2\"><span>\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 (v = 2.0 m\/s)<\/span><span id=\"distVLabel\">\u0627\u0644\u0645\u0633\u0627\u0641\u0629: 0.0 m<\/span><\/div><div class=\"relative h-12 bg-slate-800 rounded border border-slate-700 overflow-hidden\"><div id=\"carV\" class=\"absolute bottom-1 w-12 h-8 bg-blue-500 rounded transition-all duration-50\" style=\"right:0; transform:translateX(0px)\"><\/div><div class=\"absolute bottom-0 left-0 w-full h-1 bg-slate-700\"><\/div><\/div><\/div>\r\n <div class=\"space-y-2\"><div class=\"flex justify-between text-base text-slate-400 px-2\"><span>\u062a\u0633\u0627\u0631\u0639 \u062b\u0627\u0628\u062a (a = 1.0 m\/s\u00b2)<\/span><span id=\"distALabel\">\u0627\u0644\u0645\u0633\u0627\u0641\u0629: 0.0 m<\/span><\/div><div class=\"relative h-12 bg-slate-800 rounded border border-slate-700 overflow-hidden\"><div id=\"carA\" class=\"absolute bottom-1 w-12 h-8 bg-green-500 rounded transition-all duration-50\" style=\"right:0; transform:translateX(0px)\"><\/div><div class=\"absolute bottom-0 left-0 w-full h-1 bg-slate-700\"><\/div><\/div><\/div>\r\n <div class=\"flex flex-wrap gap-4 items-center justify-center bg-slate-800\/50 p-4 rounded-lg\"><div class=\"flex items-center gap-2\"><span class=\"text-base\">\u0627\u0644\u0632\u0645\u0646:<\/span><span id=\"timeVal\" class=\"text-lg font-mono text-amber-400\">0.0 s<\/span><\/div><div class=\"flex gap-2\"><button id=\"playPauseBtn\" class=\"bg-green-600 hover:bg-green-500 px-6 py-2 rounded\">\u0628\u062f\u0621<\/button><button id=\"resetVABtn\" class=\"bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded\">\u062a\u0635\u0641\u064a\u0631<\/button><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0645\u062b\u0627\u0644 1 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0642\u0637\u0627\u0631 \u064a\u0628\u062f\u0623 \u062d\u0631\u0643\u062a\u0647 \u0645\u0646 \u0627\u0644\u0633\u0643\u0648\u0646 (v\u1d62 = 0) \u0648\u062a\u0635\u0628\u062d \u0633\u0631\u0639\u062a\u0647 20 m\/s \u0628\u0639\u062f 16 s. \u0627\u062d\u0633\u0628 \u062a\u0633\u0627\u0631\u0639\u0647.<\/p><div class=\"bg-black\/20 p-3 rounded border border-white\/5\"><p class=\"text-base text-slate-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">a = (20 - 0) \/ 16 = 1.25 m\/s\u00b2<\/div><\/div><p class=\"text-base text-green-400 text-center\">\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0645\u0648\u062c\u0628\u0629 \u2192 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0641\u064a \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u0627\u0644\u0642\u0637\u0627\u0631 \u064a\u062a\u0633\u0627\u0631\u0639).<\/p><\/div><\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0645\u062b\u0627\u0644 2 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0633\u064a\u0627\u0631\u0629 \u0633\u0628\u0627\u0642 \u062a\u062a\u0646\u0627\u0642\u0635 \u0633\u0631\u0639\u062a\u0647\u0627 \u0645\u0646 45 m\/s \u0625\u0644\u0649 0 \u062e\u0644\u0627\u0644 3 s. \u0627\u062d\u0633\u0628 \u062a\u0633\u0627\u0631\u0639\u0647\u0627.<\/p><div class=\"bg-black\/20 p-3 rounded border border-white\/5\"><p class=\"text-base text-slate-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">a = (0 - 45) \/ 3 = -15 m\/s\u00b2<\/div><\/div><p class=\"text-base text-red-400 text-center\">\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0633\u0627\u0644\u0628\u0629 \u2192 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062d\u0631\u0643\u0629 (\u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u062a\u062a\u0628\u0627\u0637\u0623).<\/p><\/div><\/div>\r\n <\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a \u0644\u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton\u2019s Second Law)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30 mb-4\"><h3 class=\"font-bold text-amber-400 mb-2\">\u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3><p class=\"text-lg text-amber-100 font-serif italic text-center\">\"\u064a\u062a\u0646\u0627\u0633\u0628 \u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062c\u0633\u0645 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647\u060c \u0648\u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0643\u062a\u0644\u062a\u0647.\"<\/p><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\"><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629:<\/h3><div class=\"bg-black\/30 p-3 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">\u03a3F = m \u00d7 a<\/div><\/div><ul class=\"list-disc list-inside text-base text-slate-300\"><li><strong>\u03a3F:<\/strong> \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 (\u0646\u064a\u0648\u062a\u0646 N)<\/li><li><strong>m:<\/strong> \u0627\u0644\u0643\u062a\u0644\u0629 (kg)<\/li><li><strong>a:<\/strong> \u0627\u0644\u062a\u0633\u0627\u0631\u0639 (m\/s\u00b2)<\/li><\/ul><\/div><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u062f\u0644\u0627\u0644\u0627\u062a \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3><ul class=\"list-disc list-inside text-base text-slate-300\"><li><strong>\u0628\u062b\u0628\u0648\u062a \u0627\u0644\u0643\u062a\u0644\u0629:<\/strong> \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629\u060c \u0632\u0627\u062f \u0627\u0644\u062a\u0633\u0627\u0631\u0639 (\u0639\u0644\u0627\u0642\u0629 \u0637\u0631\u062f\u064a\u0629).<\/li><li><strong>\u0628\u062b\u0628\u0648\u062a \u0627\u0644\u0642\u0648\u0629:<\/strong> \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0627\u0644\u0643\u062a\u0644\u0629\u060c \u0642\u0644 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 (\u0639\u0644\u0627\u0642\u0629 \u0639\u0643\u0633\u064a\u0629).<\/li><\/ul><\/div><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"secondLawSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a \u0644\u0646\u064a\u0648\u062a\u0646 (F = m \u00d7 a)<\/h3>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[450px] h-[220px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\"><svg id=\"secondLawSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 450 220\"><\/svg><\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"secondLawControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mt-4\"><h3 class=\"font-bold text-amber-300 mb-2 text-base\">\u0645\u062b\u0627\u0644 3 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><p class=\"text-base text-slate-300 mb-3\">\u0627\u062d\u0633\u0628 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u0643\u064a \u064a\u0643\u062a\u0633\u0628 \u062c\u0633\u0645 \u0643\u062a\u0644\u062a\u0647 5 kg \u062a\u0633\u0627\u0631\u0639\u064b\u0627 \u062b\u0627\u0628\u062a\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 2 m\/s\u00b2.<\/p><div class=\"bg-black\/20 p-3 rounded\"><p class=\"text-base text-slate-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">\u03a3F = 5 \u00d7 2 = 10 N<\/div><\/div><\/div><\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0633\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b \u0644\u0646\u064a\u0648\u062a\u0646 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 (Newton\u2019s Third Law)<\/h2>\r\n <div class=\"bg-amber-900\/20 p-4 rounded-lg border border-amber-500\/30 mb-4\"><h3 class=\"font-bold text-amber-400 mb-2\">\u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646:<\/h3><p class=\"text-lg text-amber-100 font-serif italic text-center mb-4\">\"\u0625\u0630\u0627 \u062a\u0641\u0627\u0639\u0644 \u062c\u0633\u0645\u0627\u0646 A \u0648 B\u060c \u0641\u0625\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u062a\u064a \u064a\u0624\u062b\u0631 \u0628\u0647\u0627 \u0627\u0644\u062c\u0633\u0645 A \u0641\u064a \u0627\u0644\u062c\u0633\u0645 B \u062a\u0633\u0627\u0648\u064a \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u062a\u0639\u0627\u0643\u0633 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u062a\u064a \u064a\u0624\u062b\u0631 \u0628\u0647\u0627 \u0627\u0644\u062c\u0633\u0645 B \u0641\u064a \u0627\u0644\u062c\u0633\u0645 A.\"<\/p><div class=\"bg-black\/30 p-2 rounded text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">F_AB = -F_BA<\/div><\/div><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\"><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u062e\u0635\u0627\u0626\u0635 \u0642\u0648\u0649 \u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644:<\/h3><ul class=\"list-disc list-inside text-base text-slate-300\"><li>\u0645\u062a\u0633\u0627\u0648\u064a\u062a\u0627\u0646 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631.<\/li><li>\u0645\u062a\u0636\u0627\u062f\u062a\u0627\u0646 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647.<\/li><li>\u0645\u0646 \u0627\u0644\u0646\u0648\u0639 \u0646\u0641\u0633\u0647 (\u0643\u0644\u0627\u0647\u0645\u0627 \u062a\u0644\u0627\u0645\u0633 \u0623\u0648 \u0643\u0644\u0627\u0647\u0645\u0627 \u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f).<\/li><li>\u062a\u0646\u0634\u0622\u0646 \u0641\u064a \u0627\u0644\u0644\u062d\u0638\u0629 \u0646\u0641\u0633\u0647\u0627.<\/li><li><strong class=\"text-white\">\u062a\u0624\u062b\u0631\u0627\u0646 \u0641\u064a \u062c\u0633\u0645\u064a\u0646 \u0645\u062e\u062a\u0644\u0641\u064a\u0646<\/strong> (\u0644\u0630\u0644\u0643 \u0644\u0627 \u062a\u0644\u063a\u064a \u0625\u062d\u062f\u0627\u0647\u0645\u0627 \u0627\u0644\u0623\u062e\u0631\u0649).<\/li><\/ul><\/div><div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\"><h3 class=\"font-bold text-amber-300 mb-2\">\u0623\u0645\u062b\u0644\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628:<\/h3><div class=\"space-y-3\"><div class=\"bg-black\/20 p-2 rounded\"><h4 class=\"font-bold text-white text-base mb-1\">\u0645\u062b\u0627\u0644 1: \u062a\u0635\u0627\u062f\u0645 \u0643\u0631\u062a\u064a\u0646<\/h4><p class=\"text-base text-slate-300\">\u0627\u0644\u0643\u0631\u0629 A \u062a\u0624\u062b\u0631 \u0641\u064a \u0627\u0644\u0643\u0631\u0629 B \u0628\u0642\u0648\u0629 \u062f\u0641\u0639 F<sub>AB<\/sub>\u060c \u0648\u0627\u0644\u0643\u0631\u0629 B \u062a\u0624\u062b\u0631 \u0641\u064a A \u0628\u0642\u0648\u0629 F<sub>BA<\/sub>.<\/p><\/div><div class=\"bg-black\/20 p-2 rounded\"><h4 class=\"font-bold text-white text-base mb-1\">\u0645\u062b\u0627\u0644 2: \u0627\u0644\u0645\u0634\u064a<\/h4><p class=\"text-base text-slate-300\">\u0627\u0644\u0642\u062f\u0645 \u062a\u062f\u0641\u0639 \u0627\u0644\u0623\u0631\u0636 \u0625\u0644\u0649 \u0627\u0644\u062e\u0644\u0641 (\u0641\u0639\u0644)\u060c \u0648\u0627\u0644\u0623\u0631\u0636 \u062a\u062f\u0641\u0639 \u0627\u0644\u0642\u062f\u0645 \u0625\u0644\u0649 \u0627\u0644\u0623\u0645\u0627\u0645 \u0628\u0642\u0648\u0629 \u0645\u0633\u0627\u0648\u064a\u0629 (\u0631\u062f \u0641\u0639\u0644) \u2192 \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0629 \u0647\u064a \u0627\u0644\u062a\u064a \u062a\u062f\u0641\u0639\u0646\u0627 \u0644\u0644\u0623\u0645\u0627\u0645.<\/p><\/div><\/div><\/div><\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"bg-slate-900 rounded-xl p-6 border border-slate-700 my-6\" id=\"thirdLawSimulation\">\r\n <h3 class=\"text-xl font-bold text-amber-400 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 14l-7 7m0 0l-7-7m7 7V3\" \/><\/svg>\u0645\u062d\u0627\u0643\u0627\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b \u0644\u0646\u064a\u0648\u062a\u0646 (\u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644)<\/h3>\r\n <div class=\"flex flex-col lg:flex-row gap-8 items-center justify-center\">\r\n <div class=\"relative w-full max-w-[500px] h-[220px] bg-slate-800 rounded-lg overflow-hidden border-2 border-slate-600\"><svg id=\"thirdLawSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 500 220\"><\/svg><\/div>\r\n <div class=\"flex-1 w-full max-w-sm space-y-4\" id=\"thirdLawControls\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-indigo-900\/20 p-4 rounded-lg border border-indigo-500\/30 mt-4\"><h3 class=\"font-bold text-indigo-300 mb-2\">\u0633\u0624\u0627\u0644 \u0644\u0644\u062a\u0641\u0643\u064a\u0631:<\/h3><p class=\"text-base text-indigo-100\/80 mb-2\">\u0641\u064a \u0623\u062b\u0646\u0627\u0621 \u0633\u0642\u0648\u0637 \u0643\u0631\u0629 \u0646\u062d\u0648 \u0627\u0644\u0623\u0631\u0636\u060c \u062a\u0624\u062b\u0631 \u0627\u0644\u0623\u0631\u0636 \u0641\u064a \u0627\u0644\u0643\u0631\u0629 \u0628\u0642\u0648\u0629 \u062c\u0630\u0628 \u0646\u062d\u0648 \u0627\u0644\u0623\u0633\u0641\u0644 (\u0627\u0644\u0648\u0632\u0646). \u0625\u0630\u0627 \u0627\u0639\u062a\u0628\u0631\u0646\u0627 \u0627\u0644\u0648\u0632\u0646 \u0647\u0648 \u0642\u0648\u0629 \u0627\u0644\u0641\u0639\u0644\u060c \u0641\u0645\u0627 \u0631\u062f \u0627\u0644\u0641\u0639\u0644\u061f<\/p><p class=\"text-base text-indigo-200 bg-black\/20 p-2 rounded\"><strong>\u0627\u0644\u0625\u062c\u0627\u0628\u0629:<\/strong> \u0627\u0644\u0643\u0631\u0629 \u062a\u0624\u062b\u0631 \u0641\u064a \u0627\u0644\u0623\u0631\u0636 \u0628\u0642\u0648\u0629 \u062c\u0630\u0628 \u0645\u0633\u0627\u0648\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0645\u0639\u0627\u0643\u0633\u0629 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 (\u0625\u0644\u0649 \u0623\u0639\u0644\u0649).<\/p><\/div>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0645\u0646\u0627\u064b: \u0623\u0645\u062b\u0644\u0629 \u0648\u062a\u062f\u0631\u064a\u0628\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628<\/h2>\r\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 relative overflow-hidden\"><div class=\"flex items-center gap-2 mb-3\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-indigo-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg><h3 class=\"font-bold text-indigo-300 text-base\">\u0627\u0644\u0633\u0624\u0627\u0644 4 (\u0635\u0641\u062d\u0629 55):<\/h3><\/div><p class=\"text-base text-indigo-100\/90 mb-4\">\u0627\u062d\u0633\u0628 \u062a\u0633\u0627\u0631\u0639 \u0633\u064a\u0627\u0631\u0629 \u0643\u062a\u0644\u062a\u0647\u0627 1200 kg \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647\u0627 \u0628\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0623\u0641\u0642\u064a 6000 N.<\/p><div class=\"bg-black\/40 p-4 rounded-lg\"><p class=\"text-base font-bold text-emerald-400 mb-2\">\u0627\u0644\u062d\u0644:<\/p><div class=\"bg-black\/50 p-3 rounded-md text-center\"><div class=\"text-center font-mono text-lg my-2\" dir=\"ltr\">a = F \/ m = 6000 \/ 1200 = 5 m\/s\u00b2<\/div><\/div><\/div><\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062a\u0627\u0633\u0639\u0627\u064b: \u0645\u0644\u062e\u0635 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u062b\u0644\u0627\u062b\u0629<\/h2>\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10 mb-6\">\r\n <table class=\"w-full text-base text-right text-slate-300\"><thead class=\"bg-white\/10 text-base text-slate-200 uppercase\"><tr><th class=\"px-4 py-3\">\u0627\u0644\u0642\u0627\u0646\u0648\u0646<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0646\u0635<\/th><th class=\"px-4 py-3 text-center\">\u0627\u0644\u0635\u064a\u063a\u0629<\/th><th class=\"px-4 py-3\">\u0627\u0644\u0645\u0641\u062a\u0627\u062d<\/th><\/tr><\/thead><tbody><tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u0623\u0648\u0644<\/td><td class=\"px-4 py-3\">\u0627\u0644\u062c\u0633\u0645 \u064a\u0628\u0642\u0649 \u0639\u0644\u0649 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0645\u0627 \u0644\u0645 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629<\/td><td class=\"px-4 py-3 text-center font-mono text-base\" dir=\"ltr\">\u03a3F = 0 \u2192 a = 0<\/td><td class=\"px-4 py-3 font-bold text-teal-300\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u062b\u0627\u0646\u064a<\/td><td class=\"px-4 py-3\">\u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0642\u0648\u0629 \u0648\u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0643\u062a\u0644\u0629<\/td><td class=\"px-4 py-3 text-center font-mono text-base\" dir=\"ltr\">\u03a3F = m\u00b7a<\/td><td class=\"px-4 py-3 font-bold text-blue-300\">\u0627\u0644\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-amber-400\">\u0627\u0644\u062b\u0627\u0644\u062b<\/td><td class=\"px-4 py-3\">\u0644\u0643\u0644 \u0641\u0639\u0644 \u0631\u062f \u0641\u0639\u0644 \u0645\u0633\u0627\u0648\u064d \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0645\u0639\u0627\u0643\u0633 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647<\/td><td class=\"px-4 py-3 text-center font-mono text-base\" dir=\"ltr\">F<sub>AB<\/sub> = -F<sub>BA<\/sub><\/td><td class=\"px-4 py-3 font-bold text-purple-300\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0628\u064a\u0646 \u062c\u0633\u0645\u064a\u0646<\/td><\/tr><\/tbody><\/table>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-lg border border-indigo-500\/30 mb-6\"><ul class=\"list-decimal list-inside text-base text-indigo-200 space-y-3\"><li>\u0623\u0635\u0641 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u0645 \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a\u0647 \u0635\u0641\u0631\u064b\u0627\u060c \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629.<\/li><li>\u0647\u0644 \u064a\u0645\u0643\u0646 \u0627\u0639\u062a\u0628\u0627\u0631 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u0648\u0627\u0644\u0648\u0632\u0646 \u0642\u0648\u062a\u064a \u0641\u0639\u0644 \u0648\u0631\u062f \u0641\u0639\u0644\u061f <span class=\"text-indigo-300\/80\">(\u0644\u0627\u060c \u0644\u0623\u0646\u0647\u0645\u0627 \u062a\u0624\u062b\u0631\u0627\u0646 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0646\u0641\u0633\u0647\u060c \u0648\u0644\u064a\u0633\u062a\u0627 \u0645\u0646 \u0627\u0644\u0646\u0648\u0639 \u0646\u0641\u0633\u0647 \u2013 \u0627\u0644\u0648\u0632\u0646 \u062c\u0627\u0630\u0628\u064a\u0629\u060c \u0648\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u0644\u0627\u0645\u0633).<\/span><\/li><li>\u0644\u0645\u0627\u0630\u0627 \u062a\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u062f\u0648\u0627\u0633\u0629 \u0627\u0644\u0628\u0646\u0632\u064a\u0646\u060c \u0648\u062a\u062a\u0628\u0627\u0637\u0623 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0641\u0631\u0627\u0645\u0644\u061f<\/li><\/ul><\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10 mt-6\"><h2 class=\"text-xl font-semibold text-white mb-3\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h2><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-base text-slate-300\"><ul class=\"list-disc list-inside space-y-2\"><li><strong>\u0627\u0644\u0642\u0648\u0629<\/strong> \u0645\u0624\u062b\u0631 \u064a\u063a\u064a\u0631 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0623\u0648 \u0627\u0644\u0634\u0643\u0644.<\/li><li><strong>\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644:<\/strong> \u0628\u062f\u0648\u0646 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629 \u2192 \u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 (\u0623\u0648 \u0633\u0643\u0648\u0646).<\/li><li><strong>\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a:<\/strong> \u0627\u0644\u0642\u0648\u0629 = \u0627\u0644\u0643\u062a\u0644\u0629 \u00d7 \u0627\u0644\u062a\u0633\u0627\u0631\u0639.<\/li><li><strong>\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b:<\/strong> \u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644 \u0645\u062a\u0633\u0627\u0648\u064a\u0627\u0646 \u0648\u0645\u062a\u0636\u0627\u062f\u0627\u0646 \u0648\u064a\u0624\u062b\u0631\u0627\u0646 \u0641\u064a \u062c\u0633\u0645\u064a\u0646 \u0645\u062e\u062a\u0644\u0641\u064a\u0646.<\/li><\/ul><ul class=\"list-disc list-inside space-y-2\"><li><strong>\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629:<\/strong> \u0625\u0632\u0627\u062d\u0629 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0641\u064a \u0623\u0632\u0645\u0646\u0629 \u0645\u062a\u0633\u0627\u0648\u064a\u0629.<\/li><li><strong>\u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a:<\/strong> \u062a\u063a\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 \u0641\u064a \u0627\u0644\u0633\u0631\u0639\u0629.<\/li><\/ul><\/div><p class=\"text-base text-amber-300 mt-4 font-bold text-center border-t border-white\/10 pt-4\">\u0628\u0647\u0630\u0627 \u0646\u0643\u0648\u0646 \u0642\u062f \u0641\u0647\u0645\u0646\u0627 \u0643\u064a\u0641 \u062a\u0631\u0628\u0637 \u0642\u0648\u0627\u0646\u064a\u0646 \u0646\u064a\u0648\u062a\u0646 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0649 \u0648\u0627\u0644\u062d\u0631\u0643\u0629\u060c \u0648\u0643\u064a\u0641 \u0646\u0633\u062a\u062e\u062f\u0645\u0647\u0627 \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0627\u0644\u062d\u0633\u0627\u0628\u064a\u0629 \u0648\u0648\u0635\u0641 \u0627\u0644\u0638\u0648\u0627\u0647\u0631 \u0627\u0644\u064a\u0648\u0645\u064a\u0629.<\/p><\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0648\u0644\u0649: \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0642\u0648\u0649 ========================\r\n (function() {\r\n let activeTab = 'contact';\r\n let blockX = 50, magnetX = 280, ballX = 50, isPushing = false, isAttracting = false, pushingTimer = null;\r\n const svg = document.getElementById('forcesSvg'), controlsDiv = document.getElementById('forcesControls');\r\n const contactBtn = document.getElementById('contactTabBtn'), distanceBtn = document.getElementById('distanceTabBtn');\r\n function drawContact() { svg.innerHTML = `<line x1=\"0\" y1=\"160\" x2=\"400\" y2=\"160\" stroke=\"#475569\" stroke-width=\"4\" \/><rect x=\"${blockX}\" y=\"100\" width=\"60\" height=\"60\" fill=\"#8B4513\" rx=\"4\" stroke=\"#5c2e0b\" stroke-width=\"2\" \/><text x=\"${blockX+30}\" y=\"135\" fill=\"white\" font-size=\"14\" text-anchor=\"middle\" font-weight=\"bold\">\u0635\u0646\u062f\u0648\u0642<\/text>${isPushing ? `<g transform=\"translate(${blockX-50}, 130)\"><line x1=\"0\" y1=\"0\" x2=\"40\" y2=\"0\" stroke=\"#ef4444\" stroke-width=\"4\" \/><polygon points=\"40,-6 50,0 40,6\" fill=\"#ef4444\" \/><text x=\"20\" y=\"-10\" fill=\"#ef4444\" font-size=\"12\" text-anchor=\"middle\">\u0642\u0648\u0629 \u062f\u0641\u0639<\/text><\/g>` : ''}`; }\r\n function drawDistance() { svg.innerHTML = `<line x1=\"0\" y1=\"160\" x2=\"400\" y2=\"160\" stroke=\"#475569\" stroke-width=\"4\" \/><circle cx=\"${ballX}\" cy=\"145\" r=\"15\" fill=\"#94a3b8\" stroke=\"#64748b\" stroke-width=\"2\" \/>${isAttracting ? `<g><path d=\"M ${ballX+15} 145 Q ${(ballX+magnetX)\/2} 120 ${magnetX} 135\" fill=\"none\" stroke=\"#a855f7\" stroke-width=\"2\" stroke-dasharray=\"4 4\" \/><path d=\"M ${ballX+15} 145 Q ${(ballX+magnetX)\/2} 170 ${magnetX} 155\" fill=\"none\" stroke=\"#a855f7\" stroke-width=\"2\" stroke-dasharray=\"4 4\" \/><text x=\"${(ballX+magnetX)\/2}\" y=\"115\" fill=\"#a855f7\" font-size=\"12\" text-anchor=\"middle\">\u0642\u0648\u0629 \u062c\u0630\u0628 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629<\/text><\/g>` : ''}<g transform=\"translate(${magnetX}, 125)\"><rect x=\"0\" y=\"0\" width=\"20\" height=\"35\" fill=\"#ef4444\" \/><rect x=\"20\" y=\"0\" width=\"20\" height=\"35\" fill=\"#3b82f6\" \/><text x=\"10\" y=\"22\" fill=\"white\" font-size=\"12\" text-anchor=\"middle\">N<\/text><text x=\"30\" y=\"22\" fill=\"white\" font-size=\"12\" text-anchor=\"middle\">S<\/text><\/g>`; }\r\n function render() { activeTab === 'contact' ? drawContact() : drawDistance(); }\r\n function updateControls() {\r\n if (activeTab === 'contact') {\r\n controlsDiv.innerHTML = `<div class=\"bg-slate-800 p-4 rounded-lg\"><h4 class=\"font-bold text-blue-300 mb-2\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0644\u0627\u0645\u0633<\/h4><p class=\"text-base text-slate-300 mb-4\">\u062a\u062a\u0637\u0644\u0628 \u062a\u0644\u0627\u0645\u0633\u0627\u064b \u0645\u0628\u0627\u0634\u0631\u0627\u064b. \u0627\u0636\u063a\u0637 \u0644\u062f\u0641\u0639 \u0627\u0644\u0635\u0646\u062f\u0648\u0642.<\/p><div class=\"flex gap-2\"><button id=\"pushBtn\" class=\"flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded\">\u0627\u062f\u0641\u0639 \u0627\u0644\u0635\u0646\u062f\u0648\u0642<\/button><button id=\"resetContactBtn\" class=\"bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><\/div>`;\r\n document.getElementById('pushBtn')?.addEventListener('click', () => { if (blockX >= 250) return; isPushing = true; render(); if (pushingTimer) clearTimeout(pushingTimer); pushingTimer = setTimeout(() => { blockX = Math.min(blockX+60,250); isPushing = false; render(); },300); });\r\n document.getElementById('resetContactBtn')?.addEventListener('click', () => { blockX = 50; isPushing = false; render(); });\r\n } else {\r\n controlsDiv.innerHTML = `<div class=\"bg-slate-800 p-4 rounded-lg\"><h4 class=\"font-bold text-purple-300 mb-2\">\u0642\u0648\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646 \u0628\u064f\u0639\u062f<\/h4><p class=\"text-base text-slate-300 mb-4\">\u0642\u0631\u0651\u0628 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633 \u0645\u0646 \u0627\u0644\u0643\u0631\u0629 \u0627\u0644\u0645\u0639\u062f\u0646\u064a\u0629.<\/p><div><label class=\"block text-base text-slate-400 mb-1\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633:<\/label><input type=\"range\" id=\"magnetSlider\" min=\"80\" max=\"350\" value=\"${magnetX}\" class=\"w-full accent-purple-500\" dir=\"ltr\"><\/div><button id=\"resetDistanceBtn\" class=\"w-full mt-4 bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0643\u0631\u0629 \u0648\u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633<\/button><\/div>`;\r\n const slider = document.getElementById('magnetSlider');\r\n slider?.addEventListener('input', (e) => { magnetX = parseInt(e.target.value); const dist = magnetX - ballX; if (dist < 120 && dist > 30 && !isAttracting) { isAttracting = true; render(); setTimeout(() => { ballX = magnetX - 30; isAttracting = false; render(); },400); } else render(); });\r\n document.getElementById('resetDistanceBtn')?.addEventListener('click', () => { magnetX = 280; ballX = 50; isAttracting = false; render(); });\r\n }\r\n }\r\n contactBtn.addEventListener('click', () => { activeTab='contact'; contactBtn.classList.add('bg-blue-600','text-white'); contactBtn.classList.remove('bg-slate-800','text-slate-400'); distanceBtn.classList.remove('bg-purple-600','text-white'); distanceBtn.classList.add('bg-slate-800','text-slate-400'); render(); updateControls(); });\r\n distanceBtn.addEventListener('click', () => { activeTab='distance'; distanceBtn.classList.add('bg-purple-600','text-white'); distanceBtn.classList.remove('bg-slate-800','text-slate-400'); contactBtn.classList.remove('bg-blue-600','text-white'); contactBtn.classList.add('bg-slate-800','text-slate-400'); render(); updateControls(); });\r\n render(); updateControls();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 ========================\r\n (function() {\r\n let surface = 'rough', isPlaying = false, velocity = 0, position = 50, isPushing = false, animFrame = null, lastTime = 0;\r\n const svg = document.getElementById('firstLawSvg'), controlsDiv = document.getElementById('firstLawControls');\r\n const friction = { rough: 0.5, smooth: 0 };\r\n function updateSVG() { svg.innerHTML = `<line x1=\"0\" y1=\"160\" x2=\"400\" y2=\"160\" stroke=\"${surface==='rough'?'#78350f':'#7dd3fc'}\" stroke-width=\"4\" \/><rect x=\"${position}\" y=\"110\" width=\"50\" height=\"50\" fill=\"#eab308\" rx=\"4\" stroke=\"#ca8a04\" stroke-width=\"2\" \/><text x=\"${position+25}\" y=\"140\" fill=\"#713f12\" font-size=\"12\" text-anchor=\"middle\" font-weight=\"bold\">\u062c\u0633\u0645<\/text>${isPushing?`<g transform=\"translate(${position-40},130)\"><line x1=\"0\" y1=\"0\" x2=\"30\" y2=\"0\" stroke=\"#ef4444\" stroke-width=\"4\" \/><polygon points=\"30,-5 38,0 30,5\" fill=\"#ef4444\" \/><\/g>`:''}${velocity>0?`<g transform=\"translate(${position+55},135)\"><line x1=\"0\" y1=\"0\" x2=\"${velocity\/2}\" y2=\"0\" stroke=\"#22c55e\" stroke-width=\"3\" \/><polygon points=\"${velocity\/2},-4 ${velocity\/2+6},0 ${velocity\/2},4\" fill=\"#22c55e\" \/><text x=\"${velocity\/4}\" y=\"-8\" fill=\"#22c55e\" font-size=\"10\">v<\/text><\/g>`:''}${velocity>0 && surface==='rough'?`<g transform=\"translate(${position-5},165)\"><line x1=\"0\" y1=\"0\" x2=\"-20\" y2=\"0\" stroke=\"#f97316\" stroke-width=\"2\" \/><polygon points=\"-20,-3 -26,0 -20,3\" fill=\"#f97316\" \/><text x=\"-13\" y=\"12\" fill=\"#f97316\" font-size=\"10\">\u0627\u062d\u062a\u0643\u0627\u0643<\/text><\/g>`:''}`; }\r\n function reset() { if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; velocity=0; position=50; isPushing=false; updateSVG(); if(document.getElementById('velValue')) document.getElementById('velValue').innerText='0.0'; }\r\n function animate(now) { if(!lastTime) lastTime=now; let delta=Math.min(0.033,(now-lastTime)\/1000); lastTime=now; if(isPlaying){ velocity=Math.max(0,velocity-friction[surface]*delta*20); position+=velocity*delta; if(position>=350||velocity<=0){ position=Math.min(position,350); isPlaying=false; if(animFrame) cancelAnimationFrame(animFrame); animFrame=null; } updateSVG(); if(document.getElementById('velValue')) document.getElementById('velValue').innerText=velocity.toFixed(1); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n function renderControls() {\r\n controlsDiv.innerHTML = `<div class=\"bg-slate-800 p-4 rounded-lg\"><div class=\"mb-4\"><label class=\"block text-base font-bold mb-2\">\u0646\u0648\u0639 \u0627\u0644\u0633\u0637\u062d:<\/label><div class=\"flex gap-2\"><button id=\"roughBtn\" class=\"flex-1 py-2 rounded font-bold ${surface==='rough'?'bg-amber-700 text-white':'bg-slate-700 text-slate-400'}\">\u062e\u0634\u0646 (\u0627\u062d\u062a\u0643\u0627\u0643)<\/button><button id=\"smoothBtn\" class=\"flex-1 py-2 rounded font-bold ${surface==='smooth'?'bg-blue-600 text-white':'bg-slate-700 text-slate-400'}\">\u0623\u0645\u0644\u0633 (\u0645\u062b\u0627\u0644\u064a)<\/button><\/div><\/div><div class=\"flex gap-2 mb-4\"><button id=\"pushFirstBtn\" class=\"flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded\">\u062f\u0641\u0639 \u0627\u0644\u062c\u0633\u0645<\/button><button id=\"resetFirstBtn\" class=\"bg-slate-600 hover:bg-slate-500 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><div class=\"bg-black\/30 p-3 rounded\"><p><strong>\u0627\u0644\u0633\u0631\u0639\u0629:<\/strong> <span id=\"velValue\">0.0<\/span> m\/s<\/p><p class=\"text-base text-amber-200\/80\">${surface==='smooth'?'\u0641\u064a \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0623\u0645\u0644\u0633\u060c \u064a\u062d\u0627\u0641\u0638 \u0627\u0644\u062c\u0633\u0645 \u0639\u0644\u0649 \u0633\u0631\u0639\u062a\u0647 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 (\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a).':'\u0641\u064a \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u062e\u0634\u0646\u060c \u062a\u0639\u0645\u0644 \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 \u0639\u0644\u0649 \u0625\u064a\u0642\u0627\u0641 \u0627\u0644\u062c\u0633\u0645.'}<\/p><\/div><\/div>`;\r\n document.getElementById('roughBtn')?.addEventListener('click',()=>{ surface='rough'; reset(); renderControls(); updateSVG(); });\r\n document.getElementById('smoothBtn')?.addEventListener('click',()=>{ surface='smooth'; reset(); renderControls(); updateSVG(); });\r\n document.getElementById('pushFirstBtn')?.addEventListener('click',()=>{ if(isPlaying) return; isPushing=true; updateSVG(); setTimeout(()=>{ velocity=50; isPlaying=true; isPushing=false; updateSVG(); if(animFrame) cancelAnimationFrame(animFrame); lastTime=performance.now(); animFrame=requestAnimationFrame(animate); },200); });\r\n document.getElementById('resetFirstBtn')?.addEventListener('click',reset);\r\n }\r\n renderControls(); updateSVG();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629: \u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \/ \u062a\u0633\u0627\u0631\u0639 \u062b\u0627\u0628\u062a ========================\r\n (function() {\r\n let time=0, isPlaying=false, animFrame=null, lastTimestamp=0;\r\n const v=20, a=10, maxTime=10;\r\n const carV=document.getElementById('carV'), carA=document.getElementById('carA'), distVLabel=document.getElementById('distVLabel'), distALabel=document.getElementById('distALabel'), timeSpan=document.getElementById('timeVal'), playBtn=document.getElementById('playPauseBtn'), resetBtn=document.getElementById('resetVABtn');\r\n function updateDisplay(){ const posV=v*time, posA=0.5*a*time*time; carV.style.transform=`translateX(-${Math.min(posV,380)}px)`; carA.style.transform=`translateX(-${Math.min(posA,380)}px)`; distVLabel.innerText=`\u0627\u0644\u0645\u0633\u0627\u0641\u0629: ${(posV\/10).toFixed(1)} m`; distALabel.innerText=`\u0627\u0644\u0645\u0633\u0627\u0641\u0629: ${(posA\/10).toFixed(1)} m`; timeSpan.innerText=time.toFixed(1)+' s'; }\r\n function reset(){ if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; time=0; updateDisplay(); playBtn.innerText='\u0628\u062f\u0621'; }\r\n function animate(now){ if(!lastTimestamp) lastTimestamp=now; const delta=Math.min(0.033,(now-lastTimestamp)\/1000); lastTimestamp=now; if(isPlaying){ time+=delta; if(time>=maxTime){ time=maxTime; isPlaying=false; playBtn.innerText='\u0625\u0639\u0627\u062f\u0629'; cancelAnimationFrame(animFrame); animFrame=null; } updateDisplay(); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n playBtn.addEventListener('click',()=>{ if(isPlaying){ isPlaying=false; playBtn.innerText='\u0628\u062f\u0621'; if(animFrame) cancelAnimationFrame(animFrame); } else { if(time>=maxTime) reset(); isPlaying=true; lastTimestamp=performance.now(); animFrame=requestAnimationFrame(animate); playBtn.innerText='\u0625\u064a\u0642\u0627\u0641'; } });\r\n resetBtn.addEventListener('click',reset);\r\n updateDisplay();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0646\u064a ========================\r\n (function() {\r\n let force=50, mass=5, isPlaying=false, time=0, animFrame=null, lastTimestamp=0;\r\n const svg=document.getElementById('secondLawSvg'), controlsDiv=document.getElementById('secondLawControls');\r\n const acceleration=()=>force\/mass;\r\n function updateSVG(){ const aVal=acceleration(), pos=0.5*aVal*time*time*10, boxSize=30+mass*3, forceArrow=force*0.8; svg.innerHTML=`<rect x=\"0\" y=\"160\" width=\"450\" height=\"60\" fill=\"#334155\" \/><line x1=\"0\" y1=\"160\" x2=\"450\" y2=\"160\" stroke=\"#475569\" stroke-width=\"4\" \/>${[0,1,2,3].map(i=>`<g transform=\"translate(${50+i*100},160)\"><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"10\" stroke=\"#94a3b8\" stroke-width=\"2\" \/><text x=\"0\" y=\"25\" fill=\"#94a3b8\" font-size=\"10\" text-anchor=\"middle\">${i*10}m<\/text><\/g>`).join('')}<g transform=\"translate(${50+Math.min(pos,350)}, ${160-boxSize})\"><rect x=\"0\" y=\"0\" width=\"${boxSize}\" height=\"${boxSize}\" fill=\"#eab308\" rx=\"4\" stroke=\"#ca8a04\" stroke-width=\"2\" \/><text x=\"${boxSize\/2}\" y=\"${boxSize\/2+5}\" fill=\"#713f12\" font-size=\"14\" text-anchor=\"middle\" font-weight=\"bold\">${mass}kg<\/text><g transform=\"translate(${boxSize}, ${boxSize\/2})\"><line x1=\"0\" y1=\"0\" x2=\"${forceArrow}\" y2=\"0\" stroke=\"#ef4444\" stroke-width=\"4\" \/><polygon points=\"${forceArrow},-5 ${forceArrow+8},0 ${forceArrow},5\" fill=\"#ef4444\" \/><text x=\"${forceArrow\/2}\" y=\"-10\" fill=\"#ef4444\" font-size=\"12\" text-anchor=\"middle\">F = ${force}N<\/text><\/g>${aVal>0?`<g transform=\"translate(${boxSize\/2}, -20)\"><line x1=\"0\" y1=\"0\" x2=\"${aVal*3}\" y2=\"0\" stroke=\"#22c55e\" stroke-width=\"3\" \/><polygon points=\"${aVal*3},-4 ${aVal*3+6},0 ${aVal*3},4\" fill=\"#22c55e\" \/><text x=\"${(aVal*3)\/2}\" y=\"-8\" fill=\"#22c55e\" font-size=\"12\" text-anchor=\"middle\">a<\/text><\/g>`:''}<\/g>`; }\r\n function reset(){ if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; time=0; updateSVG(); if(document.getElementById('aValueSpan')) document.getElementById('aValueSpan').innerText=acceleration().toFixed(1); if(document.getElementById('timeSecSpan')) document.getElementById('timeSecSpan').innerText='0.0'; if(document.getElementById('velSecSpan')) document.getElementById('velSecSpan').innerText='0.0'; }\r\n function animate(now){ if(!lastTimestamp) lastTimestamp=now; const delta=Math.min(0.033,(now-lastTimestamp)\/1000); lastTimestamp=now; if(isPlaying){ time+=delta; const pos=0.5*acceleration()*time*time*10; if(pos>=350){ isPlaying=false; cancelAnimationFrame(animFrame); } updateSVG(); const v=acceleration()*time; if(document.getElementById('timeSecSpan')) document.getElementById('timeSecSpan').innerText=time.toFixed(1); if(document.getElementById('velSecSpan')) document.getElementById('velSecSpan').innerText=v.toFixed(1); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n function renderControls(){\r\n controlsDiv.innerHTML=`<div class=\"bg-slate-800 p-4 rounded-lg space-y-4\"><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-red-400\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 (F)<\/label><span id=\"forceVal\">${force} N<\/span><\/div><input type=\"range\" id=\"forceSlider\" min=\"10\" max=\"100\" step=\"10\" value=\"${force}\" class=\"w-full accent-red-500\" dir=\"ltr\"><\/div><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-amber-400\">\u0627\u0644\u0643\u062a\u0644\u0629 (m)<\/label><span id=\"massVal\">${mass} kg<\/span><\/div><input type=\"range\" id=\"massSlider\" min=\"1\" max=\"10\" step=\"1\" value=\"${mass}\" class=\"w-full accent-amber-500\" dir=\"ltr\"><\/div><div class=\"flex gap-2\"><button id=\"playSecondBtn\" class=\"flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded\">\u062a\u0634\u063a\u064a\u0644<\/button><button id=\"resetSecondBtn\" class=\"bg-slate-600 hover:bg-slate-500 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><div class=\"bg-black\/30 p-3 rounded\"><div class=\"flex justify-center gap-2 text-lg mb-2\"><span class=\"text-green-400 font-bold\">a<\/span><span>=<\/span><div class=\"flex flex-col items-center\"><span class=\"text-red-400 border-b px-2\" id=\"aForceSpan\">${force}<\/span><span class=\"text-amber-400 px-2\" id=\"aMassSpan\">${mass}<\/span><\/div><span>=<\/span><span class=\"text-green-400 font-bold\" id=\"aValueSpan\">${acceleration().toFixed(1)} m\/s\u00b2<\/span><\/div><div class=\"flex justify-between text-base\"><span><strong>\u0627\u0644\u0632\u0645\u0646:<\/strong> <span id=\"timeSecSpan\">0.0<\/span> s<\/span><span><strong>\u0627\u0644\u0633\u0631\u0639\u0629:<\/strong> <span id=\"velSecSpan\">0.0<\/span> m\/s<\/span><\/div><\/div><\/div>`;\r\n const forceSlider=document.getElementById('forceSlider'), massSlider=document.getElementById('massSlider');\r\n forceSlider.addEventListener('input',(e)=>{ force=parseInt(e.target.value); document.getElementById('forceVal').innerText=force; document.getElementById('aForceSpan').innerText=force; document.getElementById('aValueSpan').innerText=acceleration().toFixed(1); reset(); });\r\n massSlider.addEventListener('input',(e)=>{ mass=parseInt(e.target.value); document.getElementById('massVal').innerText=mass; document.getElementById('aMassSpan').innerText=mass; document.getElementById('aValueSpan').innerText=acceleration().toFixed(1); reset(); });\r\n document.getElementById('playSecondBtn').addEventListener('click',()=>{ if(!isPlaying){ isPlaying=true; lastTimestamp=performance.now(); animFrame=requestAnimationFrame(animate); } });\r\n document.getElementById('resetSecondBtn').addEventListener('click',reset);\r\n }\r\n renderControls(); updateSVG();\r\n })();\r\n\r\n \/\/ ======================== \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062e\u0627\u0645\u0633\u0629: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062b\u0627\u0644\u062b ========================\r\n (function() {\r\n let massA=5, massB=5, forceVal=50, isPlaying=false, time=0, animFrame=null, lastTimestamp=0;\r\n const pushDuration=0.5, svg=document.getElementById('thirdLawSvg'), controlsDiv=document.getElementById('thirdLawControls');\r\n function getState(t){ const aA=forceVal\/massA, aB=forceVal\/massB; if(t<=pushDuration) return { posA:-0.5*aA*t*t*10, posB:0.5*aB*t*t*10, vA:-aA*t, vB:aB*t, pushing:true }; else{ const pushDistA=-0.5*aA*pushDuration*pushDuration*10, pushDistB=0.5*aB*pushDuration*pushDuration*10, finalVA=-aA*pushDuration, finalVB=aB*pushDuration, dt=t-pushDuration; return { posA:pushDistA+finalVA*dt*10, posB:pushDistB+finalVB*dt*10, vA:finalVA, vB:finalVB, pushing:false }; } }\r\n function updateSVG(){ const {posA,posB,pushing}=getState(time), boxA=30+massA*3, boxB=30+massB*3; svg.innerHTML=`<rect x=\"0\" y=\"160\" width=\"500\" height=\"60\" fill=\"#bae6fd\" \/><line x1=\"0\" y1=\"160\" x2=\"500\" y2=\"160\" stroke=\"#7dd3fc\" stroke-width=\"4\" \/><line x1=\"250\" y1=\"140\" x2=\"250\" y2=\"160\" stroke=\"#94a3b8\" stroke-width=\"2\" stroke-dasharray=\"4 4\" \/><g transform=\"translate(${250+posA-boxA}, ${160-boxA})\"><rect x=\"0\" y=\"0\" width=\"${boxA}\" height=\"${boxA}\" fill=\"#ef4444\" rx=\"4\" stroke=\"#b91c1c\" stroke-width=\"2\" \/><text x=\"${boxA\/2}\" y=\"${boxA\/2+5}\" fill=\"#fee2e2\" font-size=\"14\" text-anchor=\"middle\">A (${massA}kg)<\/text><\/g><g transform=\"translate(${250+posB}, ${160-boxB})\"><rect x=\"0\" y=\"0\" width=\"${boxB}\" height=\"${boxB}\" fill=\"#3b82f6\" rx=\"4\" stroke=\"#1d4ed8\" stroke-width=\"2\" \/><text x=\"${boxB\/2}\" y=\"${boxB\/2+5}\" fill=\"#dbeafe\" font-size=\"14\" text-anchor=\"middle\">B (${massB}kg)<\/text><\/g>${pushing?`<g transform=\"translate(250,100)\"><line x1=\"0\" y1=\"-10\" x2=\"${forceVal*0.8}\" y2=\"-10\" stroke=\"#3b82f6\" stroke-width=\"3\" \/><polygon points=\"${forceVal*0.8},-14 ${forceVal*0.8+6},-10 ${forceVal*0.8},-6\" fill=\"#3b82f6\" \/><text x=\"${(forceVal*0.8)\/2}\" y=\"-20\" fill=\"#3b82f6\" font-size=\"12\" text-anchor=\"middle\">F (A\u2192B)<\/text><line x1=\"0\" y1=\"10\" x2=\"${-forceVal*0.8}\" y2=\"10\" stroke=\"#ef4444\" stroke-width=\"3\" \/><polygon points=\"${-forceVal*0.8},6 ${-forceVal*0.8-6},10 ${-forceVal*0.8},14\" fill=\"#ef4444\" \/><text x=\"${(-forceVal*0.8)\/2}\" y=\"25\" fill=\"#ef4444\" font-size=\"12\" text-anchor=\"middle\">F (B\u2192A)<\/text><\/g>`:''}`; }\r\n function reset(){ if(animFrame) cancelAnimationFrame(animFrame); isPlaying=false; time=0; updateSVG(); if(document.getElementById('vA')) document.getElementById('vA').innerText='0.0'; if(document.getElementById('vB')) document.getElementById('vB').innerText='0.0'; }\r\n function animate(now){ if(!lastTimestamp) lastTimestamp=now; const delta=Math.min(0.033,(now-lastTimestamp)\/1000); lastTimestamp=now; if(isPlaying){ time+=delta; if(time>=3){ isPlaying=false; cancelAnimationFrame(animFrame); } updateSVG(); const {vA,vB}=getState(time); if(document.getElementById('vA')) document.getElementById('vA').innerText=Math.abs(vA).toFixed(1); if(document.getElementById('vB')) document.getElementById('vB').innerText=Math.abs(vB).toFixed(1); } if(isPlaying) animFrame=requestAnimationFrame(animate); }\r\n function renderControls(){\r\n controlsDiv.innerHTML=`<div class=\"bg-slate-800 p-4 rounded-lg space-y-4\"><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-white\">\u0642\u0648\u0629 \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u0645\u062a\u0628\u0627\u062f\u0644\u0629 (F)<\/label><span id=\"forceThirdVal\">${forceVal} N<\/span><\/div><input type=\"range\" id=\"forceThirdSlider\" min=\"10\" max=\"100\" step=\"10\" value=\"${forceVal}\" class=\"w-full accent-green-500\" dir=\"ltr\"><\/div><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-red-400\">\u0643\u062a\u0644\u0629 \u0627\u0644\u062c\u0633\u0645 A<\/label><span id=\"massAVal\">${massA} kg<\/span><\/div><input type=\"range\" id=\"massASlider\" min=\"1\" max=\"10\" step=\"1\" value=\"${massA}\" class=\"w-full accent-red-500\" dir=\"ltr\"><\/div><div><div class=\"flex justify-between text-base\"><label class=\"font-bold text-blue-400\">\u0643\u062a\u0644\u0629 \u0627\u0644\u062c\u0633\u0645 B<\/label><span id=\"massBVal\">${massB} kg<\/span><\/div><input type=\"range\" id=\"massBSlider\" min=\"1\" max=\"10\" step=\"1\" value=\"${massB}\" class=\"w-full accent-blue-500\" dir=\"ltr\"><\/div><div class=\"flex gap-2\"><button id=\"playThirdBtn\" class=\"flex-1 bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded\">\u0627\u062f\u0641\u0639<\/button><button id=\"resetThirdBtn\" class=\"bg-slate-600 hover:bg-slate-500 text-white font-bold py-2 px-4 rounded\">\u0625\u0639\u0627\u062f\u0629<\/button><\/div><div class=\"bg-black\/30 p-3 rounded\"><div class=\"flex justify-between text-base\"><span class=\"text-red-400\"><strong>\u0633\u0631\u0639\u0629 A:<\/strong> <span id=\"vA\">0.0<\/span> m\/s<\/span><span class=\"text-blue-400\"><strong>\u0633\u0631\u0639\u0629 B:<\/strong> <span id=\"vB\">0.0<\/span> m\/s<\/span><\/div><p class=\"text-base text-amber-300\/80 mt-2\">\u0627\u0636\u063a\u0637 \"\u0627\u062f\u0641\u0639\" \u0644\u0645\u0644\u0627\u062d\u0638\u0629 \u0642\u0648\u0649 \u0627\u0644\u0641\u0639\u0644 \u0648\u0631\u062f \u0627\u0644\u0641\u0639\u0644.<\/p><\/div><\/div>`;\r\n document.getElementById('forceThirdSlider')?.addEventListener('input',(e)=>{ forceVal=parseInt(e.target.value); document.getElementById('forceThirdVal').innerText=forceVal; reset(); });\r\n document.getElementById('massASlider')?.addEventListener('input',(e)=>{ massA=parseInt(e.target.value); document.getElementById('massAVal').innerText=massA; reset(); });\r\n document.getElementById('massBSlider')?.addEventListener('input',(e)=>{ massB=parseInt(e.target.value); document.getElementById('massBVal').innerText=massB; reset(); });\r\n document.getElementById('playThirdBtn')?.addEventListener('click',()=>{ if(!isPlaying){ isPlaying=true; lastTimestamp=performance.now(); animFrame=requestAnimationFrame(animate); } });\r\n document.getElementById('resetThirdBtn')?.addEventListener('click',reset);\r\n }\r\n renderControls(); updateSVG();\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-18331","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18331","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=18331"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18331\/revisions"}],"predecessor-version":[{"id":18332,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18331\/revisions\/18332"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}