{"id":18456,"date":"2026-04-18T11:23:50","date_gmt":"2026-04-18T08:23:50","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=18456"},"modified":"2026-04-18T11:27:16","modified_gmt":"2026-04-18T08:27:16","slug":"%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%a7%d9%84%d9%82%d8%a7%d9%86%d9%88%d9%86-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d8%ad%d8%b1%d9%83%d8%a9-%d9%84%d9%86","status":"publish","type":"page","link":"https:\/\/smartedujo.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%a7%d9%84%d9%82%d8%a7%d9%86%d9%88%d9%86-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d9%81%d9%8a-%d8%a7%d9%84%d8%ad%d8%b1%d9%83%d8%a9-%d9%84%d9%86\/","title":{"rendered":"\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0644\u0646\u064a\u0648\u062a\u0646"},"content":{"rendered":"\n<section class=\"codevo-theme-alloys\"><div class=\"codevo-lesson-wrap\" dir=\"rtl\"><!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0644\u0646\u064a\u0648\u062a\u0646 - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\r\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    body {\r\n      background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n      font-family: 'Cairo', sans-serif;\r\n      color: #f1f5f9;\r\n      min-height: 100vh;\r\n      padding: 2rem;\r\n    }\r\n    .content-container {\r\n      max-width: 96rem;\r\n      margin: 0 auto;\r\n      background-color: rgba(30, 27, 75, 0.6);\r\n      backdrop-filter: blur(12px);\r\n      border: 1px solid rgba(255, 255, 255, 0.1);\r\n      border-radius: 1rem;\r\n      padding: 2rem;\r\n      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n    }\r\n    ::-webkit-scrollbar { width: 8px; }\r\n    ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n    ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n    .simulation-container {\r\n      margin: 2rem 0;\r\n      padding: 1.5rem;\r\n      background-color: rgba(0, 0, 0, 0.2);\r\n      border: 1px solid rgba(255, 255, 255, 0.1);\r\n      border-radius: 0.75rem;\r\n    }\r\n    \/* \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062d\u0631\u0643\u0627\u062a *\/\r\n    .bus-container, .tablecloth-container {\r\n      position: relative;\r\n      height: 14rem;\r\n      background: linear-gradient(to bottom, #0f172a, #1e293b);\r\n      border-radius: 0.75rem;\r\n      overflow: hidden;\r\n      border: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n    .road {\r\n      position: absolute;\r\n      bottom: 0;\r\n      width: 100%;\r\n      height: 3rem;\r\n      background-color: #334155;\r\n      border-top: 4px solid #475569;\r\n      display: flex;\r\n      justify-content: space-around;\r\n      align-items: center;\r\n    }\r\n    .road-line {\r\n      width: 2rem;\r\n      height: 0.25rem;\r\n      background-color: rgba(255,255,255,0.3);\r\n      border-radius: 999px;\r\n    }\r\n    .car {\r\n      position: absolute;\r\n      bottom: 0;\r\n      right: 3rem;\r\n      width: 10rem;\r\n      height: 5rem;\r\n      background-color: #2563eb;\r\n      border-radius: 1rem 1rem 0 1rem;\r\n      border: 2px solid #60a5fa;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: flex-end;\r\n      padding-bottom: 0.5rem;\r\n      z-index: 10;\r\n      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);\r\n      transition: transform 0.3s ease-out;\r\n    }\r\n    .car-window {\r\n      position: absolute;\r\n      top: 0.5rem;\r\n      right: 0.5rem;\r\n      width: 3rem;\r\n      height: 2rem;\r\n      background-color: rgba(186, 230, 253, 0.3);\r\n      border-radius: 0.5rem 0.5rem 0 0.25rem;\r\n    }\r\n    .car-window-left {\r\n      left: 0.5rem;\r\n      right: auto;\r\n      border-radius: 0.5rem 0.5rem 0.25rem 0;\r\n    }\r\n    .wheel {\r\n      position: absolute;\r\n      bottom: -1rem;\r\n      width: 2rem;\r\n      height: 2rem;\r\n      background-color: #0f172a;\r\n      border: 4px solid #cbd5e1;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n    .wheel-inner {\r\n      width: 0.5rem;\r\n      height: 0.5rem;\r\n      background-color: #64748b;\r\n      border-radius: 50%;\r\n    }\r\n    .passenger {\r\n      position: absolute;\r\n      bottom: 5rem;\r\n      right: 6rem;\r\n      width: 3rem;\r\n      height: 4rem;\r\n      background-color: #f43f5e;\r\n      border-radius: 0.75rem 0.75rem 0 0;\r\n      border: 2px solid #fda4af;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      padding-top: 0.5rem;\r\n      z-index: 20;\r\n      transition: transform 0.4s ease-out;\r\n      transform-origin: bottom center;\r\n    }\r\n    .passenger-head {\r\n      width: 1.5rem;\r\n      height: 1.5rem;\r\n      background-color: #fecdd3;\r\n      border-radius: 50%;\r\n      margin-bottom: 0.25rem;\r\n    }\r\n    .passenger-body {\r\n      width: 2rem;\r\n      height: 0.5rem;\r\n      background-color: #fda4af;\r\n      border-radius: 999px;\r\n    }\r\n    .table {\r\n      position: absolute;\r\n      bottom: 3rem;\r\n      right: 25%;\r\n      width: 16rem;\r\n      height: 1.5rem;\r\n      background-color: #78350f;\r\n      border-radius: 0.25rem;\r\n      border-top: 2px solid #b45309;\r\n      z-index: 10;\r\n    }\r\n    .table-leg {\r\n      position: absolute;\r\n      top: 1.5rem;\r\n      width: 1rem;\r\n      height: 8rem;\r\n      background-color: #451a03;\r\n      border-radius: 0 0 0.25rem 0.25rem;\r\n    }\r\n    .tablecloth {\r\n      position: absolute;\r\n      bottom: 3rem;\r\n      right: 25%;\r\n      width: 14rem;\r\n      height: 0.5rem;\r\n      background-color: #ef4444;\r\n      border-radius: 999px 0 0 999px;\r\n      z-index: 20;\r\n      transition: transform 0.2s ease-out;\r\n    }\r\n    .plate {\r\n      position: absolute;\r\n      bottom: 3.8rem;\r\n      right: 33%;\r\n      width: 4rem;\r\n      height: 1rem;\r\n      background-color: #f8fafc;\r\n      border-radius: 0.5rem 0.5rem 0 0;\r\n      border-bottom: 2px solid #e2e8f0;\r\n      z-index: 30;\r\n      transition: transform 0.2s ease-out;\r\n      display: flex;\r\n      justify-content: center;\r\n    }\r\n    .plate-inner {\r\n      width: 2.5rem;\r\n      height: 0.5rem;\r\n      background-color: #f1f5f9;\r\n      border-radius: 999px;\r\n      position: absolute;\r\n      top: -0.25rem;\r\n    }\r\n    button:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"content-container\">\r\n    <!-- Header -->\r\n    <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n      <div>\r\n        <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0644\u0646\u064a\u0648\u062a\u0646<\/h1>\r\n        <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u0639\u0627\u0634\u0631<\/p>\r\n      <\/div>\r\n      <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n        <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n          <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n          <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n        <\/div>\r\n        <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n                    <\/svg>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n      <!-- \u0645\u0634\u063a\u0644 \u0627\u0644\u0635\u0648\u062a -->\r\n      <div class=\"mt-4 w-full\">\r\n        <audio controls class=\"w-full h-10\">\r\n          <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0642\u0627\u0646\u0648\u0646_\u0627\u0644\u0623\u0648\u0644_\u0641\u064a_\u0627\u0644\u062d\u0631\u0643\u0629_\u0644\u0646\u064a\u0648\u062a\u0646_audio.mp3\" type=\"audio\/mpeg\">\r\n          <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n          \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0642\u0627\u0646\u0648\u0646_\u0627\u0644\u0623\u0648\u0644_\u0641\u064a_\u0627\u0644\u062d\u0631\u0643\u0629_\u0644\u0646\u064a\u0648\u062a\u0646_audio.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n        <\/audio>\r\n        <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n    <!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0635\u0644\u064a (\u0628\u062f\u0648\u0646 \u0627\u0644\u0631\u0645\u0648\u0632 \u0627\u0644\u062a\u0639\u0628\u064a\u0631\u064a\u0629) -->\r\n    <div class=\"space-y-8\" dir=\"rtl\">\r\n      <!-- \u0645\u0642\u062f\u0645\u0629 -->\r\n      <section class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-2xl border border-white\/10 shadow-lg\">\r\n        <h2 class=\"text-2xl font-bold text-white mb-4 flex items-center gap-2\"><span class=\"text-blue-400\"><\/span> \u0645\u0642\u062f\u0645\u0629<\/h2>\r\n        <p class=\"text-slate-300 leading-relaxed\">\u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a\u0629\u060c \u0646\u0644\u0627\u062d\u0638 \u0623\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u0633\u0627\u0643\u0646\u0629 \u062a\u0628\u0642\u0649 \u0633\u0627\u0643\u0646\u0629 \u062d\u062a\u0649 \u062a\u064f\u062f\u0641\u0639\u060c \u0648\u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0642\u062f \u062a\u062a\u0628\u0627\u0637\u0623 \u0623\u0648 \u062a\u062a\u0648\u0642\u0641. \u0644\u0643\u0646 \u0647\u0644 \u062a\u062d\u062a\u0627\u062c \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0625\u0644\u0649 \u0642\u0648\u0629 \u062f\u0627\u0626\u0645\u0629 \u0644\u0643\u064a \u062a\u0633\u062a\u0645\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629\u061f \u0647\u0630\u0627 \u0645\u0627 \u0623\u0648\u0636\u062d\u0647 \u0644\u0646\u0627 <span class=\"text-blue-300 font-bold\">\u0642\u0627\u0646\u0648\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u0623\u0648\u0644<\/span>\u060c \u0627\u0644\u0630\u064a \u064a\u064f\u0639\u062f\u064f\u0651 \u062b\u0648\u0631\u0629 \u0641\u064a \u0641\u0647\u0645 \u0627\u0644\u062d\u0631\u0643\u0629 \u0628\u0639\u062f \u0623\u0641\u0643\u0627\u0631 \u0623\u0631\u0633\u0637\u0648 \u0627\u0644\u0642\u062f\u064a\u0645\u0629.<\/p>\r\n      <\/section>\r\n\r\n      <!-- \u0623\u0648\u0644\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0642\u0648\u0629 -->\r\n      <section class=\"space-y-4\">\r\n        <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-blue-500 rounded-full\"><\/span> \u0623\u0648\u0644\u0627\u064b: \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0642\u0648\u0629 (Force)<\/h2>\r\n        <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-blue-500\/20 space-y-4\">\r\n          <p class=\"text-slate-300 leading-relaxed\"><span class=\"font-bold text-blue-400\">\u0627\u0644\u0642\u0648\u0629:<\/span> \u0647\u064a \u0645\u0624\u062b\u0631 (\u062f\u0641\u0639 \u0623\u0648 \u0633\u062d\u0628) \u064a\u063a\u064a\u0631 \u0645\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u0645 (\u064a\u062d\u0631\u0643\u0647 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0633\u0627\u0643\u0646\u0627\u064b\u060c \u0623\u0648 \u064a\u0648\u0642\u0641\u0647 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062a\u062d\u0631\u0643\u0627\u064b\u060c \u0623\u0648 \u064a\u063a\u064a\u0631 \u0627\u062a\u062c\u0627\u0647\u0647). \u0627\u0644\u0642\u0648\u0629 \u0643\u0645\u064a\u0629 \u0645\u062a\u062c\u0647\u0629\u060c \u062a\u0642\u0627\u0633 \u0628\u0648\u062d\u062f\u0629 \u0646\u064a\u0648\u062a\u0646 <span class=\"font-mono text-white\">(N)<\/span>.<\/p>\r\n          <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 space-y-3\">\r\n            <h3 class=\"text-lg font-bold text-blue-300\">\u0645\u062e\u0637\u0637 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u062d\u0631 (Free-Body Diagram)<\/h3>\r\n            <p class=\"text-l text-slate-400\">\u0647\u0648 \u0631\u0633\u0645 \u062a\u062e\u0637\u064a\u0637\u064a \u064a\u0628\u064a\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u062c\u0633\u0645 (\u0646\u0638\u0627\u0645) \u0645\u0639\u064a\u0646. \u0646\u0645\u062b\u0644 \u0627\u0644\u062c\u0633\u0645 \u0628\u0646\u0642\u0637\u0629 (\u0623\u0648 \u0628\u0634\u0643\u0644 \u0645\u0628\u0633\u0637)\u060c \u0648\u0646\u0631\u0633\u0645 \u0633\u0647\u0645\u0627\u064b \u0644\u0643\u0644 \u0642\u0648\u0629\u060c \u0628\u062d\u064a\u062b \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0648\u0644 \u0627\u0644\u0633\u0647\u0645 \u0645\u0639 \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0642\u0648\u0629\u060c \u0648\u064a\u0634\u064a\u0631 \u0627\u062a\u062c\u0627\u0647\u0647 \u0625\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 \u062a\u0623\u062b\u064a\u0631\u0647\u0627.<\/p>\r\n            <div class=\"bg-blue-500\/10 p-4 rounded-lg border border-blue-500\/20 mt-4\">\r\n              <div class=\"text-l font-bold text-white mb-2\">\u0645\u062b\u0627\u0644: \u0643\u062a\u0627\u0628 \u0645\u0648\u0636\u0648\u0639 \u0639\u0644\u0649 \u064a\u062f \u0637\u0627\u0644\u0628<\/div>\r\n              <p class=\"text-l text-slate-300 mb-4\">\u064a\u062a\u0623\u062b\u0631 \u0627\u0644\u0643\u062a\u0627\u0628 \u0628\u0642\u0648\u062a\u064a\u0646:<\/p>\r\n              <div class=\"flex justify-center\">\r\n                <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" class=\"overflow-visible\">\r\n                  <path d=\"M 50 110 L 150 110\" stroke=\"#64748b\" stroke-width=\"8\" stroke-linecap=\"round\" \/><text x=\"160\" y=\"115\" fill=\"#94a3b8\" font-size=\"12\">\u0627\u0644\u064a\u062f<\/text>\r\n                  <rect x=\"70\" y=\"80\" width=\"60\" height=\"20\" fill=\"#3b82f6\" rx=\"2\" \/><text x=\"100\" y=\"95\" fill=\"white\" font-size=\"12\" text-anchor=\"middle\">\u0643\u062a\u0627\u0628<\/text>\r\n                  <circle cx=\"100\" cy=\"90\" r=\"4\" fill=\"#ef4444\" \/>\r\n                  <line x1=\"100\" y1=\"90\" x2=\"100\" y2=\"30\" stroke=\"#10b981\" stroke-width=\"3\" marker-end=\"url(#arrow-green)\" \/><text x=\"110\" y=\"50\" fill=\"#10b981\" font-size=\"14\" font-weight=\"bold\" font-family=\"monospace\">F<tspan dy=\"5\" font-size=\"10\">hand<\/tspan><\/text>\r\n                  <line x1=\"100\" y1=\"90\" x2=\"100\" y2=\"150\" stroke=\"#ef4444\" stroke-width=\"3\" marker-end=\"url(#arrow-red)\" \/><text x=\"110\" y=\"140\" fill=\"#ef4444\" font-size=\"14\" font-weight=\"bold\" font-family=\"monospace\">F<tspan dy=\"5\" font-size=\"10\">g<\/tspan><\/text>\r\n                  <defs><marker id=\"arrow-green\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#10b981\" \/><\/marker><marker id=\"arrow-red\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"5\" markerHeight=\"5\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#ef4444\" \/><\/marker><\/defs>\r\n                <\/svg>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- \u062b\u0627\u0646\u064a\u0627\u064b: \u062a\u0627\u0631\u064a\u062e \u062a\u0637\u0648\u0631 \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u062d\u0631\u0643\u0629 -->\r\n      <section class=\"space-y-4\">\r\n        <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-purple-500 rounded-full\"><\/span> \u062b\u0627\u0646\u064a\u0627\u064b: \u062a\u0627\u0631\u064a\u062e \u062a\u0637\u0648\u0631 \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u062d\u0631\u0643\u0629<\/h2>\r\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n          <div class=\"bg-slate-800\/40 p-5 rounded-2xl border border-purple-500\/20\"><h3 class=\"text-lg font-bold text-purple-400\">\u0623\u0631\u0633\u0637\u0648 (384\u2013322 \u0642.\u0645)<\/h3><p class=\"text-l text-slate-300 leading-relaxed\">\u0627\u0639\u062a\u0642\u062f \u0623\u0646 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629 \u0644\u0644\u0623\u062c\u0633\u0627\u0645 \u0647\u064a \u0627\u0644\u0633\u0643\u0648\u0646\u060c \u0648\u0623\u0646 \u0627\u0644\u0642\u0648\u0629 \u0636\u0631\u0648\u0631\u064a\u0629 \u0644\u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u062c\u0633\u0645\u060c \u0643\u0645\u0627 \u0623\u0646\u0647\u0627 \u0636\u0631\u0648\u0631\u064a\u0629 \u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0627\u0644\u062d\u0631\u0643\u0629\u061b \u0641\u0625\u0630\u0627 \u0632\u0627\u0644\u062a \u0627\u0644\u0642\u0648\u0629 \u062a\u0648\u0642\u0641 \u0627\u0644\u062c\u0633\u0645. <span class=\"text-rose-400 font-bold\">\u0647\u0630\u0627 \u0627\u0644\u0631\u0623\u064a \u062e\u0627\u0637\u0626 \u0643\u0645\u0627 \u062a\u0628\u064a\u0646 \u0644\u0627\u062d\u0642\u0627\u064b.<\/span><\/p><\/div>\r\n          <div class=\"bg-slate-800\/40 p-5 rounded-2xl border border-purple-500\/20\"><h3 class=\"text-lg font-bold text-purple-400\">\u063a\u0627\u0644\u064a\u0644\u064a\u0648 (1564\u20131642 \u0645)<\/h3><p class=\"text-l text-slate-300 leading-relaxed\">\u0635\u062d\u062d \u0647\u0630\u0627 \u0627\u0644\u0645\u0641\u0647\u0648\u0645. \u0627\u0633\u062a\u0646\u062a\u062c \u0623\u0646 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643 \u0639\u0644\u0649 \u0633\u0637\u062d \u0623\u0641\u0642\u064a \u0623\u0645\u0644\u0633 (\u0628\u062f\u0648\u0646 \u0627\u062d\u062a\u0643\u0627\u0643) \u0633\u064a\u0633\u062a\u0645\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0625\u0644\u0649 \u0623\u062c\u0644 \u063a\u064a\u0631 \u0645\u0633\u0645\u0649\u060c \u0645\u0627 \u0644\u0645 \u062a\u0624\u062b\u0631 \u0641\u064a\u0647 \u0642\u0648\u0629 \u062a\u0639\u064a\u0642\u0647. \u0648\u0628\u0630\u0644\u0643\u060c <span class=\"text-emerald-400 font-bold\">\u0627\u0644\u062d\u0631\u0643\u0629 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0647\u064a \u062d\u0627\u0644\u0629 \u0637\u0628\u064a\u0639\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0633\u0643\u0648\u0646.<\/span><\/p><\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- \u062b\u0627\u0644\u062b\u0627\u064b: \u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646 -->\r\n      <section class=\"space-y-4\">\r\n        <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span> \u062b\u0627\u0644\u062b\u0627\u064b: \u0646\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646<\/h2>\r\n        <div class=\"bg-emerald-500\/10 p-6 rounded-2xl border border-emerald-500\/30 text-center\"><p class=\"text-xl font-bold text-emerald-300 leading-relaxed\">\"\u064a\u062d\u0627\u0641\u0638 \u0627\u0644\u062c\u0633\u0645 \u0639\u0644\u0649 \u062d\u0627\u0644\u062a\u0647 \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 \u0645\u0646 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629.\"<\/p><\/div>\r\n        <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-white\/5 space-y-6\">\r\n          <h3 class=\"text-lg font-bold text-white\">\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u062c\u0633\u0645 \u0648\u0641\u0642\u0627\u064b \u0644\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644:<\/h3>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n            <div class=\"space-y-3\"><div class=\"flex items-center gap-2\"><div class=\"w-8 h-8 rounded-full bg-blue-500\/20 flex items-center justify-center text-blue-400 font-bold\">\u0623<\/div><h4 class=\"font-bold text-blue-300\">\u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u062a\u0632\u0646 (\u2211F = 0)<\/h4><\/div><p class=\"text-l text-slate-400\">\u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0642\u0648\u0649 \u0635\u0641\u0631\u0627\u064b\u060c \u064a\u0643\u0648\u0646 \u0627\u0644\u062c\u0633\u0645 \u0641\u064a \u062d\u0627\u0644\u0629 \u0627\u062a\u0632\u0627\u0646\u060c \u0648\u064a\u0634\u0645\u0644 \u062d\u0627\u0644\u062a\u064a\u0646:<\/p><ul class=\"list-disc list-inside text-l text-slate-300 space-y-2\"><li><span class=\"text-emerald-400 font-bold\">\u0627\u062a\u0632\u0627\u0646 \u0633\u0643\u0648\u0646\u064a:<\/span> \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0633\u0627\u0643\u0646 \u064a\u0628\u0642\u0649 \u0633\u0627\u0643\u0646\u0627\u064b (\u0645\u062b\u0644 \u0643\u062a\u0627\u0628 \u0639\u0644\u0649 \u0637\u0627\u0648\u0644\u0629).<\/li><li><span class=\"text-emerald-400 font-bold\">\u0627\u062a\u0632\u0627\u0646 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a:<\/span> \u0627\u0644\u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645 (\u0645\u062b\u0644 \u0633\u064a\u0627\u0631\u0629 \u062a\u0633\u064a\u0631 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629).<\/li><\/ul><\/div>\r\n            <div class=\"space-y-3\"><div class=\"flex items-center gap-2\"><div class=\"w-8 h-8 rounded-full bg-rose-500\/20 flex items-center justify-center text-rose-400 font-bold\">\u0628<\/div><h4 class=\"font-bold text-rose-300\">\u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0639\u0627\u062c\u0632 (\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a)<\/h4><\/div><p class=\"text-l text-slate-400\">\u0627\u0644\u062c\u0633\u0645 \u0642\u0627\u0635\u0631 (\u0639\u0627\u062c\u0632) \u0628\u0630\u0627\u062a\u0647 \u0639\u0646 \u062a\u063a\u064a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629.<\/p><div class=\"bg-black\/30 p-3 rounded-lg border border-white\/5 text-l text-slate-300 leading-relaxed\">\u0644\u0627 \u064a\u0645\u0643\u0646 \u0644\u0644\u062c\u0633\u0645 \u0623\u0646 \u064a\u0628\u062f\u0623 \u0627\u0644\u062d\u0631\u0643\u0629\u060c \u0623\u0648 \u064a\u062a\u0648\u0642\u0641\u060c \u0623\u0648 \u064a\u063a\u064a\u0631 \u0633\u0631\u0639\u062a\u0647 \u0623\u0648 \u0627\u062a\u062c\u0627\u0647 \u0645\u0633\u0627\u0631\u0647 \u0645\u0646 \u062a\u0644\u0642\u0627\u0621 \u0646\u0641\u0633\u0647\u060c \u0628\u0644 \u064a\u062d\u062a\u0627\u062c \u062f\u0627\u0626\u0645\u0627\u064b \u0625\u0644\u0649 <span class=\"text-rose-400 font-bold\">\u0642\u0648\u0629 \u062e\u0627\u0631\u062c\u064a\u0629 \u0645\u062d\u0635\u0644\u0629<\/span> \u0644\u0625\u062d\u062f\u0627\u062b \u0647\u0630\u0627 \u0627\u0644\u062a\u063a\u064a\u064a\u0631.<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- \u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a -->\r\n      <section class=\"space-y-4\">\r\n        <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-rose-500 rounded-full\"><\/span> \u0631\u0627\u0628\u0639\u0627\u064b: \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (Inertia)<\/h2>\r\n        <div class=\"bg-slate-800\/40 p-6 rounded-2xl border border-rose-500\/20 space-y-4\">\r\n          <p class=\"text-slate-300 leading-relaxed\"><span class=\"font-bold text-rose-400\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a:<\/span> \u0647\u0648 \u0645\u0645\u0627\u0646\u0639\u0629 \u0627\u0644\u062c\u0633\u0645 \u0644\u0623\u064a \u062a\u063a\u064a\u064a\u0631 \u0641\u064a \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 (\u0633\u0643\u0648\u0646 \u0623\u0648 \u062d\u0631\u0643\u0629 \u0645\u0646\u062a\u0638\u0645\u0629). \u0641\u0627\u0644\u062c\u0633\u0645 \u064a\u0642\u0627\u0648\u0645 \u0627\u0644\u062a\u063a\u064a\u064a\u0631.<\/p>\r\n          <p class=\"text-slate-300 leading-relaxed\"><span class=\"font-bold text-rose-400\">\u0627\u0644\u0643\u062a\u0644\u0629:<\/span> \u0647\u064a \u0645\u0642\u064a\u0627\u0633 \u0644\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a. \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0643\u062a\u0644\u0629 \u0627\u0644\u062c\u0633\u0645\u060c \u0632\u0627\u062f \u0642\u0635\u0648\u0631\u0647 \u0627\u0644\u0630\u0627\u062a\u064a\u060c \u0648\u0627\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629 \u0623\u0643\u0628\u0631 \u0644\u062a\u063a\u064a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629.<\/p>\r\n          <div><h3 class=\"text-lg font-bold text-white mb-4\">\u0623\u0645\u062b\u0644\u0629 \u0645\u0646 \u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u064a\u0648\u0645\u064a\u0629:<\/h3><div class=\"grid grid-cols-1 l:grid-cols-2 gap-3\"><div class=\"bg-black\/30 p-3 rounded-xl border border-white\/5 flex items-start gap-3\"><p class=\"text-l text-slate-300\">\u0627\u0646\u062f\u0641\u0627\u0639 \u0627\u0644\u0631\u0643\u0627\u0628 \u0625\u0644\u0649 \u0627\u0644\u0623\u0645\u0627\u0645 \u0639\u0646\u062f \u062a\u0648\u0642\u0641 \u0627\u0644\u062d\u0627\u0641\u0644\u0629 \u0641\u062c\u0623\u0629 \u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0623\u062c\u0633\u0627\u062f\u0647\u0645 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629.<\/p><\/div><div class=\"bg-black\/30 p-3 rounded-xl border border-white\/5 flex items-start gap-3\"><p class=\"text-l text-slate-300\">\u0645\u064a\u0644 \u0627\u0644\u0631\u0643\u0627\u0628 \u0625\u0644\u0649 \u0627\u0644\u062c\u0627\u0646\u0628 \u0639\u0646\u062f \u0627\u0646\u0639\u0637\u0627\u0641 \u0627\u0644\u0633\u064a\u0627\u0631\u0629.<\/p><\/div><div class=\"bg-black\/30 p-3 rounded-xl border border-white\/5 flex items-start gap-3\"><p class=\"text-l text-slate-300\">\u0639\u0646\u062f \u0646\u0641\u0636 \u0627\u0644\u063a\u0628\u0627\u0631 \u0639\u0646 \u0627\u0644\u0633\u062c\u0627\u062f\u0629\u060c \u064a\u0633\u062a\u0645\u0631 \u0627\u0644\u063a\u0628\u0627\u0631 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0641\u064a\u062a\u0637\u0627\u064a\u0631.<\/p><\/div><div class=\"bg-black\/30 p-3 rounded-xl border border-white\/5 flex items-start gap-3\"><p class=\"text-l text-slate-300\">\u0633\u062d\u0628 \u0645\u0641\u0631\u0634 \u0627\u0644\u0633\u0641\u0631\u0629 \u0628\u0633\u0631\u0639\u0629 \u064a\u0628\u0642\u064a \u0627\u0644\u0623\u0637\u0628\u0627\u0642 \u0641\u064a \u0645\u0643\u0627\u0646\u0647\u0627 \u062a\u0642\u0631\u064a\u0628\u0627\u064b.<\/p><\/div><\/div><\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a (\u062d\u0627\u0648\u064a\u0629) -->\r\n      <div class=\"simulation-container\" id=\"inertia-simulation\"><\/div>\r\n\r\n      <!-- \u062e\u0627\u0645\u0633\u0627\u064b: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0648\u0623\u0645\u062b\u0644\u0629 -->\r\n      <section class=\"space-y-4\">\r\n        <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\"><span class=\"w-2 h-8 bg-amber-500 rounded-full\"><\/span> \u062e\u0627\u0645\u0633\u0627\u064b: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0648\u0623\u0645\u062b\u0644\u0629<\/h2>\r\n        <div class=\"space-y-4\">\r\n          <div class=\"bg-amber-500\/10 p-5 rounded-2xl border border-amber-500\/20\"><h3 class=\"text-amber-400 font-bold mb-2\">\u062a\u0637\u0628\u064a\u0642: \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a<\/h3><p class=\"text-l text-slate-300\">\u0639\u0646\u062f \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0633\u064a\u0627\u0631\u0629 \u0628\u062a\u0635\u0627\u062f\u0645\u0647\u0627 \u0628\u062d\u0627\u062c\u0632\u060c \u062a\u0648\u0636\u0639 \u062f\u0645\u0649 \u0641\u064a \u0645\u0642\u0639\u062f \u0627\u0644\u0633\u0627\u0626\u0642. \u0628\u0633\u0628\u0628 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a\u060c \u062a\u0633\u062a\u0645\u0631 \u0627\u0644\u062f\u0645\u064a\u0629 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0646\u062d\u0648 \u0627\u0644\u0623\u0645\u0627\u0645 \u0639\u0646\u062f \u0627\u0644\u0627\u0635\u0637\u062f\u0627\u0645\u060c \u0641\u062a\u0635\u0637\u062f\u0645 \u0628\u0639\u062c\u0644\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0623\u0648 \u0627\u0644\u0648\u0633\u0627\u062f\u0629 \u0627\u0644\u0647\u0648\u0627\u0626\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0628\u0642\u064a\u0627\u0633 \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0648\u0627\u0644\u0642\u0648\u0649.<\/p><\/div>\r\n          <div class=\"flex flex-col gap-6\">\r\n            <!-- \u0645\u062b\u0627\u0644 1 -->\r\n            <div class=\"bg-slate-800\/60 p-6 rounded-2xl border border-white\/5 space-y-6\">\r\n              <div class=\"flex justify-between items-center border-b border-white\/10 pb-4\"><div class=\"flex items-center gap-3\"><div class=\"w-10 h-10 rounded-xl bg-blue-500\/20 flex items-center justify-center text-blue-400 font-bold\">1<\/div><h3 class=\"text-xl font-bold text-white\">\u0645\u062b\u0627\u0644 1 (\u0635 88)<\/h3><\/div><span class=\"text-l bg-blue-500\/20 text-blue-300 px-3 py-1 rounded-full font-medium\">\u0627\u062a\u0632\u0627\u0646 \u0633\u0643\u0648\u0646\u064a<\/span><\/div>\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n                <div class=\"space-y-4\"><p class=\"text-slate-300 leading-relaxed\">\u064a\u062a\u0632\u0646 \u0635\u0646\u062f\u0648\u0642 \u0643\u062a\u0644\u062a\u0647 <span class=\"text-white font-bold\">20 kg<\/span> \u0645\u0648\u0636\u0648\u0639 \u0639\u0644\u0649 \u0633\u0637\u062d \u0623\u0641\u0642\u064a \u062a\u062d\u062a \u062a\u0623\u062b\u064a\u0631 \u0623\u0631\u0628\u0639 \u0642\u0648\u0649 \u0643\u0645\u0627 \u0641\u064a \u0627\u0644\u0634\u0643\u0644. \u062c\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0642\u0648\u062a\u064a\u0646 <span class=\"text-blue-400 font-mono\">F\u2082<\/span> \u0648 <span class=\"text-blue-400 font-mono\">F\u2083<\/span>.<\/p>\r\n                  <div class=\"p-4 bg-black\/30 rounded-xl border border-white\/5\"><h4 class=\"text-emerald-400 font-bold flex items-center gap-2\"><span class=\"w-1.5 h-1.5 rounded-full bg-emerald-400\"><\/span>\u0623. \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629:<\/h4><p class=\"text-l text-slate-400 mr-4\">\u0628\u0645\u0627 \u0623\u0646 \u0627\u0644\u062c\u0633\u0645 \u0645\u062a\u0632\u0646\u060c \u0641\u0625\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u062a\u0633\u0627\u0648\u064a \u0635\u0641\u0631\u0627\u064b:<\/p><div class=\"text-center font-mono text-lg text-white bg-emerald-500\/10 py-2 rounded-lg\">\u2211F = 0<\/div><\/div>\r\n                  <div class=\"p-4 bg-black\/30 rounded-xl border border-white\/5\"><h4 class=\"text-emerald-400 font-bold flex items-center gap-2\"><span class=\"w-1.5 h-1.5 rounded-full bg-emerald-400\"><\/span>\u0628. \u0627\u0644\u062d\u0644 \u0627\u0644\u0631\u064a\u0627\u0636\u064a:<\/h4><div class=\"space-y-4 mr-4\"><div><p class=\"text-l text-blue-300 font-bold\">\u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0648\u0631 \u0627\u0644\u0623\u0641\u0642\u064a (x):<\/p><div class=\"text-l font-mono text-slate-300 space-y-1 bg-blue-500\/5 p-2 rounded\"><div>\u2211Fx = 0<\/div><div>F\u2081x - F\u2083 = 0<\/div><div>100 cos(37\u00b0) - F\u2083 = 0<\/div><div class=\"text-white font-bold\">F\u2083 = 100 \u00d7 0.8 = 80 N<\/div><\/div><\/div><div><p class=\"text-l text-blue-300 font-bold\">\u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0648\u0631 \u0627\u0644\u0639\u0645\u0648\u062f\u064a (y):<\/p><div class=\"text-l font-mono text-slate-300 space-y-1 bg-blue-500\/5 p-2 rounded\"><div>\u2211Fy = 0<\/div><div>F\u2082 + F\u2081y - Fg = 0<\/div><div>F\u2082 + 100 sin(37\u00b0) - (20 \u00d7 10) = 0<\/div><div>F\u2082 + 60 - 200 = 0<\/div><div class=\"text-white font-bold\">F\u2082 = 140 N<\/div><\/div><\/div><\/div><\/div><\/div>\r\n                <div class=\"bg-slate-900\/50 p-6 rounded-2xl border border-white\/5 flex flex-col items-center gap-4\"><span class=\"text-l text-slate-500 font-bold\">\u0645\u062e\u0637\u0637 \u0627\u0644\u0642\u0648\u0649 \u0644\u0644\u0635\u0646\u062f\u0648\u0642<\/span>\r\n                  <svg width=\"280\" height=\"280\" viewBox=\"0 0 280 280\" class=\"overflow-visible\"><line x1=\"40\" y1=\"180\" x2=\"240\" y2=\"180\" stroke=\"#475569\" stroke-width=\"2\" \/><rect x=\"100\" y=\"140\" width=\"80\" height=\"40\" fill=\"#1e293b\" stroke=\"#3b82f6\" stroke-width=\"2\" rx=\"4\" \/><text x=\"140\" y=\"165\" fill=\"white\" font-size=\"12\" text-anchor=\"middle\" font-weight=\"bold\">20 kg<\/text><circle cx=\"140\" cy=\"160\" r=\"3\" fill=\"#ef4444\" \/>\r\n                    <line x1=\"140\" y1=\"160\" x2=\"220\" y2=\"100\" stroke=\"#10b981\" stroke-width=\"3\" marker-end=\"url(#arr-g)\" \/><text x=\"210\" y=\"90\" fill=\"#10b981\" font-size=\"14\" font-weight=\"bold\">F\u2081=100N<\/text><path d=\"M 170 160 A 30 30 0 0 0 165 142\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"1\" \/><text x=\"175\" y=\"155\" fill=\"#94a3b8\" font-size=\"10\">37\u00b0<\/text>\r\n                    <line x1=\"140\" y1=\"160\" x2=\"140\" y2=\"60\" stroke=\"#3b82f6\" stroke-width=\"3\" marker-end=\"url(#arr-b)\" \/><text x=\"145\" y=\"55\" fill=\"#3b82f6\" font-size=\"14\" font-weight=\"bold\">F\u2082<\/text>\r\n                    <line x1=\"140\" y1=\"160\" x2=\"60\" y2=\"160\" stroke=\"#f59e0b\" stroke-width=\"3\" marker-end=\"url(#arr-y)\" \/><text x=\"40\" y=\"155\" fill=\"#f59e0b\" font-size=\"14\" font-weight=\"bold\">F\u2083<\/text>\r\n                    <line x1=\"140\" y1=\"160\" x2=\"140\" y2=\"240\" stroke=\"#ef4444\" stroke-width=\"3\" marker-end=\"url(#arr-r)\" \/><text x=\"145\" y=\"235\" fill=\"#ef4444\" font-size=\"14\" font-weight=\"bold\">F<tspan dy=\"4\" font-size=\"10\">g<\/tspan><\/text>\r\n                    <defs><marker id=\"arr-g\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"4\" markerHeight=\"4\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#10b981\" \/><\/marker><marker id=\"arr-b\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"4\" markerHeight=\"4\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#3b82f6\" \/><\/marker><marker id=\"arr-y\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"4\" markerHeight=\"4\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#f59e0b\" \/><\/marker><marker id=\"arr-r\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"4\" markerHeight=\"4\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#ef4444\" \/><\/marker><\/defs>\r\n                  <\/svg>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n            <!-- \u0645\u062b\u0627\u0644 2 -->\r\n            <div class=\"bg-slate-800\/60 p-6 rounded-2xl border border-white\/5 space-y-6\">\r\n              <div class=\"flex justify-between items-center border-b border-white\/10 pb-4\"><div class=\"flex items-center gap-3\"><div class=\"w-10 h-10 rounded-xl bg-purple-500\/20 flex items-center justify-center text-purple-400 font-bold\">2<\/div><h3 class=\"text-xl font-bold text-white\">\u0645\u062b\u0627\u0644 2 (\u0635 88)<\/h3><\/div><span class=\"text-l bg-purple-500\/20 text-purple-300 px-3 py-1 rounded-full font-medium\">\u062a\u062d\u0644\u064a\u0644 \u0642\u0648\u0649<\/span><\/div>\r\n              <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n                <div class=\"space-y-4\"><p class=\"text-slate-300 leading-relaxed\">\u062a\u0624\u062b\u0631 \u062b\u0644\u0627\u062b \u0642\u0648\u0649 \u0641\u064a \u062f\u0645\u064a\u0629\u060c \u0641\u062a\u0628\u0642\u064a\u0647\u0627 \u0645\u062a\u0632\u0646\u0629. \u0625\u0630\u0627 \u0639\u0644\u0645\u062a \u0623\u0646 <span class=\"text-white font-bold\">F\u2081 = 36 N<\/span> \u0648 <span class=\"text-white font-bold\">F\u2083 = 60 N<\/span> \u0628\u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a \u0627\u0644\u0645\u0648\u0636\u062d\u0629\u060c \u0641\u062c\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0642\u0648\u0629 <span class=\"text-purple-400 font-mono\">F\u2082<\/span> \u0648\u0632\u0627\u0648\u064a\u062a\u0647\u0627 <span class=\"text-purple-400 font-mono\">\u03b8<\/span>.<\/p>\r\n                  <div class=\"bg-purple-500\/5 p-4 rounded-xl border border-purple-500\/20 space-y-3\"><h4 class=\"text-purple-400 font-bold\">\u062e\u0637\u0648\u0627\u062a \u0627\u0644\u062d\u0644:<\/h4><ol class=\"list-decimal list-inside text-l text-slate-400 space-y-2 mr-2\"><li>\u0646\u062d\u0644\u0644 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0627\u0626\u0644\u0629 \u0625\u0644\u0649 \u0645\u0631\u0643\u0628\u0627\u062a\u0647\u0627 \u0627\u0644\u0623\u0641\u0642\u064a\u0629 \u0648\u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629.<\/li><li>\u0646\u0637\u0628\u0642 \u0634\u0631\u0637 \u0627\u0644\u0627\u062a\u0632\u0627\u0646 \u0627\u0644\u0623\u0641\u0642\u064a <span class=\"text-white font-mono\">\u2211Fx = 0<\/span> \u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0631\u0643\u0628\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629 \u0644\u0640 F\u2082.<\/li><li>\u0646\u0637\u0628\u0642 \u0634\u0631\u0637 \u0627\u0644\u0627\u062a\u0632\u0627\u0646 \u0627\u0644\u0639\u0645\u0648\u062f\u064a <span class=\"text-white font-mono\">\u2211Fy = 0<\/span> \u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0631\u0643\u0628\u0629 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u0644\u0640 F\u2082.<\/li><li>\u0646\u0633\u062a\u062e\u062f\u0645 \u0646\u0638\u0631\u064a\u0629 \u0641\u064a\u062b\u0627\u063a\u0648\u0631\u0633 \u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 <span class=\"text-white font-mono\">F\u2082 = \u221a(F\u2082x\u00b2 + F\u2082y\u00b2)<\/span>.<\/li><\/ol><\/div><\/div>\r\n                <div class=\"bg-slate-900\/50 p-6 rounded-2xl border border-white\/5 flex flex-col items-center gap-4\"><span class=\"text-l text-slate-500 font-bold\">\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0642\u0648\u0649 \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0631<\/span>\r\n                  <svg width=\"280\" height=\"280\" viewBox=\"0 0 280 280\" class=\"overflow-visible\"><line x1=\"40\" y1=\"140\" x2=\"240\" y2=\"140\" stroke=\"#94a3b8\" stroke-width=\"1\" marker-end=\"url(#axis-arr)\" marker-start=\"url(#axis-arr)\" \/><line x1=\"140\" y1=\"40\" x2=\"140\" y2=\"260\" stroke=\"#94a3b8\" stroke-width=\"1\" marker-end=\"url(#axis-arr)\" marker-start=\"url(#axis-arr)\" \/>\r\n                    <line x1=\"140\" y1=\"140\" x2=\"204\" y2=\"92\" stroke=\"#0ea5e9\" stroke-width=\"4\" marker-end=\"url(#blue-arr)\" \/><text x=\"210\" y=\"105\" fill=\"#d946ef\" font-size=\"14\" font-weight=\"bold\">F\u2081 = 36 N<\/text><path d=\"M 165 140 A 25 25 0 0 0 160 125\" fill=\"none\" stroke=\"#d946ef\" stroke-width=\"1\" \/><text x=\"170\" y=\"135\" fill=\"#d946ef\" font-size=\"11\">37\u00b0<\/text>\r\n                    <line x1=\"140\" y1=\"140\" x2=\"92\" y2=\"76\" stroke=\"#0ea5e9\" stroke-width=\"4\" marker-end=\"url(#blue-arr)\" \/><text x=\"70\" y=\"60\" fill=\"#d946ef\" font-size=\"14\" font-weight=\"bold\">F\u2082<\/text><path d=\"M 115 140 A 25 25 0 0 1 120 115\" fill=\"none\" stroke=\"#d946ef\" stroke-width=\"1\" \/><text x=\"100\" y=\"135\" fill=\"#d946ef\" font-size=\"11\">53\u00b0<\/text>\r\n                    <line x1=\"140\" y1=\"140\" x2=\"140\" y2=\"240\" stroke=\"#0ea5e9\" stroke-width=\"4\" marker-end=\"url(#blue-arr)\" \/><text x=\"155\" y=\"245\" fill=\"#d946ef\" font-size=\"14\" font-weight=\"bold\">F\u2083 = 60 N<\/text>\r\n                    <defs><marker id=\"blue-arr\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"4\" markerHeight=\"4\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#0ea5e9\" \/><\/marker><marker id=\"axis-arr\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"3\" markerHeight=\"3\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#94a3b8\" \/><\/marker><\/defs>\r\n                  <\/svg>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/section>\r\n\r\n      <!-- \u0633\u0627\u062f\u0633\u0627\u064b: \u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u062f\u0631\u0633 -->\r\n      <section class=\"bg-gradient-to-r from-slate-800\/60 to-slate-900\/60 p-8 rounded-3xl border border-white\/10\">\r\n        <h3 class=\"text-xl font-bold text-white mb-6 flex items-center gap-2\"><span class=\"text-yellow-400\"><\/span> \u0633\u0627\u062f\u0633\u0627\u064b: \u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u062f\u0631\u0633 (\u0635 89)<\/h3>\r\n        <div class=\"space-y-4\"><div class=\"bg-white\/5 p-4 rounded-xl\"><div class=\"text-l font-bold text-yellow-300 mb-2\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629: \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 \u0635\u0641\u0631\u0627\u064b.<\/div><div class=\"text-l text-slate-300\">\u0627\u0644\u062c\u0648\u0627\u0628: \u0627\u0644\u062c\u0633\u0645 \u0625\u0645\u0627 \u0633\u0627\u0643\u0646\u060c \u0623\u0648 \u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0641\u064a \u062e\u0637 \u0645\u0633\u062a\u0642\u064a\u0645.<\/div><\/div>\r\n        <div class=\"bg-white\/5 p-4 rounded-xl\"><div class=\"text-l font-bold text-yellow-300 mb-2\">\u0633\u064a\u0627\u0631\u0629 \u062a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629\u060c \u0642\u0648\u0629 \u062f\u0641\u0639 \u0627\u0644\u0645\u062d\u0631\u0643 6000 N<\/div><div class=\"text-l text-slate-300\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0639\u064a\u0642\u0629 (\u0627\u062d\u062a\u0643\u0627\u0643 + \u0645\u0642\u0627\u0648\u0645\u0629 \u0647\u0648\u0627\u0621) = 6000 N \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u0639\u0627\u0643\u0633 (\u0644\u0623\u0646 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0635\u0641\u0631\u0627\u064b).<\/div><\/div>\r\n        <div class=\"bg-white\/5 p-4 rounded-xl\"><div class=\"text-l font-bold text-yellow-300 mb-2\">\u0645\u0646\u0627\u0642\u0634\u0629 \u0642\u0648\u0644 \u064a\u0648\u0633\u0641: \"\u064a\u062c\u0628 \u0623\u0646 \u062a\u0624\u062b\u0631 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629 \u0641\u064a \u0627\u0644\u062c\u0633\u0645 \u0628\u0634\u0643\u0644 \u062f\u0627\u0626\u0645 \u0644\u0643\u064a \u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629\"<\/div><div class=\"text-l text-slate-300\">\u0647\u0630\u0627 \u0627\u0644\u0642\u0648\u0644 <span class=\"text-rose-400 font-bold\">\u062e\u0627\u0637\u0626<\/span>\u061b \u0644\u0623\u0646 \u0627\u0644\u062c\u0633\u0645 \u064a\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0635\u0641\u0631\u0627\u064b\u060c \u0623\u064a \u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629 \u062f\u0627\u0626\u0645\u0629.<\/div><\/div><\/div>\r\n      <\/section>\r\n\r\n      <!-- \u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633 -->\r\n      <section class=\"space-y-4\"><h3 class=\"text-xl font-bold text-white\">\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u062f\u0631\u0633<\/h3>        <div class=\"overflow-x-auto bg-white\/20 rounded-xl border border-white\/10\">\r\n<table class=\"w-full text-l text-right text-slate-300\"><thead class=\"text-l text-slate-400 bg-slate-800\/80 uppercase\"><tr><th class=\"px-4 py-3 rounded-tr-lg w-1\/3\">\u0627\u0644\u0645\u0641\u0647\u0648\u0645<\/th><th class=\"px-4 py-3 rounded-tl-lg\">\u0627\u0644\u062a\u0648\u0636\u064a\u062d<\/th><\/tr><\/thead><tbody class=\"divide-y divide-white\/5 bg-slate-800\/40\"><tr><td class=\"px-4 py-3 font-bold text-blue-300\">\u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u0623\u0648\u0644 \u0644\u0646\u064a\u0648\u062a\u0646<\/td><td class=\"px-4 py-3 text-slate-300\">\u0627\u0644\u062c\u0633\u0645 \u064a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0633\u0643\u0648\u0646\u0647 \u0623\u0648 \u062d\u0631\u0643\u062a\u0647 \u0627\u0644\u0645\u0646\u062a\u0638\u0645\u0629 \u0625\u0644\u0627 \u0625\u0630\u0627 \u0623\u062b\u0631\u062a \u0639\u0644\u064a\u0647 \u0642\u0648\u0629 \u0645\u062d\u0635\u0644\u0629.<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-emerald-300\">\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0642\u0648\u0649 = 0<\/td><td class=\"px-4 py-3 text-slate-300\">\u0627\u0644\u062c\u0633\u0645 \u0625\u0645\u0627 \u0633\u0627\u0643\u0646 \u0623\u0648 \u0645\u062a\u062d\u0631\u0643 \u0628\u0633\u0631\u0639\u0629 \u062b\u0627\u0628\u062a\u0629 (\u0627\u062a\u0632\u0627\u0646 \u0633\u0643\u0648\u0646\u064a \u0623\u0648 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a).<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-rose-300\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a<\/td><td class=\"px-4 py-3 text-slate-300\">\u0645\u064a\u0644 \u0627\u0644\u062c\u0633\u0645 \u0644\u0645\u0642\u0627\u0648\u0645\u0629 \u062a\u063a\u064a\u064a\u0631 \u062d\u0627\u0644\u062a\u0647 \u0627\u0644\u062d\u0631\u0643\u064a\u0629\u060c \u0648\u064a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0643\u062a\u0644\u062a\u0647.<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-purple-300\">\u0645\u062e\u0637\u0637 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u062d\u0631<\/td><td class=\"px-4 py-3 text-slate-300\">\u0631\u0633\u0645 \u062a\u0648\u0636\u064a\u062d\u064a \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0642\u0648\u0649 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0641\u064a \u062c\u0633\u0645 \u0645\u0627.<\/td><\/tr><tr><td class=\"px-4 py-3 font-bold text-amber-300\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/td><td class=\"px-4 py-3 text-slate-300\">\u0623\u062d\u0632\u0645\u0629 \u0627\u0644\u0623\u0645\u0627\u0646\u060c \u0627\u0646\u062f\u0641\u0627\u0639 \u0627\u0644\u0631\u0643\u0627\u0628 \u0639\u0646\u062f \u0627\u0644\u062a\u0648\u0642\u0641 \u0627\u0644\u0645\u0641\u0627\u062c\u0626\u060c \u0646\u0641\u0636 \u0627\u0644\u063a\u0628\u0627\u0631\u060c \u0633\u062d\u0628 \u0627\u0644\u0645\u0641\u0631\u0634.<\/td><\/tr><\/tbody><\/table><\/div><\/section>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u0643\u0648\u062f \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 (JavaScript \u062e\u0627\u0644\u0635) -->\r\n  <script>\r\n    (function() {\r\n      const container = document.getElementById('inertia-simulation');\r\n      if (!container) return;\r\n\r\n      \/\/ \u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n      const wrapper = document.createElement('div');\r\n      wrapper.className = 'w-full bg-slate-900\/80 rounded-2xl border border-slate-700 p-6 flex flex-col gap-6';\r\n      wrapper.setAttribute('dir', 'rtl');\r\n      wrapper.innerHTML = `\r\n        <div class=\"flex flex-col l:flex-row justify-between items-center gap-4 border-b border-slate-700 pb-4\">\r\n          <h3 class=\"text-xl font-bold text-white flex items-center gap-2\"><span class=\"text-rose-400\">\u25a0<\/span> \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a<\/h3>\r\n          <div class=\"flex gap-2 bg-slate-800 p-1 rounded-lg\">\r\n            <button id=\"tab-bus\" class=\"px-4 py-2 rounded-md text-l font-bold transition-all bg-blue-600 text-white shadow-md\">\u062a\u0648\u0642\u0641 \u0627\u0644\u062d\u0627\u0641\u0644\u0629<\/button>\r\n            <button id=\"tab-cloth\" class=\"px-4 py-2 rounded-md text-l font-bold transition-all text-slate-400 hover:text-white hover:bg-slate-700\">\u0633\u062d\u0628 \u0627\u0644\u0645\u0641\u0631\u0634<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div id=\"sim-content\" class=\"bg-black\/40 rounded-xl p-4 border border-white\/5\"><\/div>\r\n      `;\r\n      container.appendChild(wrapper);\r\n\r\n      \/\/ \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u0629\r\n      let activeTab = 'bus'; \/\/ 'bus' or 'cloth'\r\n      let busStatus = 'idle'; \/\/ idle, moving, braking\r\n      let clothStatus = 'idle'; \/\/ idle, slow, fast\r\n      let busTimer = null;\r\n      let clothTimer = null;\r\n\r\n      \/\/ \u062f\u0648\u0627\u0644 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\r\n      function buildBusSimulation() {\r\n        const div = document.createElement('div');\r\n        div.className = 'flex flex-col gap-6';\r\n        div.innerHTML = `\r\n          <div class=\"bus-container relative h-56 bg-gradient-to-b from-sky-900\/20 to-slate-800 rounded-xl overflow-hidden border border-slate-700\">\r\n            <div class=\"road absolute bottom-0 w-full h-12 bg-slate-700 border-t-4 border-slate-500 flex items-center justify-around\">\r\n              ${Array(10).fill().map(() => '<div class=\"road-line w-8 h-1 bg-slate-400\/50 rounded-full\"><\/div>').join('')}\r\n            <\/div>\r\n            <div id=\"car\" class=\"car absolute bottom-0 right-12 w-40 h-20 bg-blue-600 rounded-t-2xl rounded-bl-2xl border-2 border-blue-400 flex items-end justify-center pb-2 shadow-lg z-10 transition-all duration-300\" style=\"transform: translateX(0);\">\r\n              <div class=\"car-window absolute top-2 right-2 w-14 h-8 bg-sky-200\/30 rounded-tr-xl rounded-bl-l\"><\/div>\r\n              <div class=\"car-window-left absolute top-2 left-2 w-14 h-8 bg-sky-200\/30 rounded-tl-xl rounded-br-l\"><\/div>\r\n              <div class=\"wheel absolute -bottom-4 right-4 w-8 h-8 bg-slate-900 rounded-full border-4 border-slate-300 flex items-center justify-center\"><div class=\"w-2 h-2 bg-slate-400 rounded-full\"><\/div><\/div>\r\n              <div class=\"wheel absolute -bottom-4 left-4 w-8 h-8 bg-slate-900 rounded-full border-4 border-slate-300 flex items-center justify-center\"><div class=\"w-2 h-2 bg-slate-400 rounded-full\"><\/div><\/div>\r\n            <\/div>\r\n            <div id=\"passenger\" class=\"passenger absolute bottom-20 right-24 w-12 h-16 bg-rose-500 rounded-t-xl border-2 border-rose-300 flex flex-col items-center justify-start pt-2 shadow-md z-20 transition-all duration-300\" style=\"transform: translateX(0) rotate(0deg);\">\r\n              <div class=\"passenger-head w-6 h-6 bg-rose-200 rounded-full mb-1\"><\/div>\r\n              <div class=\"passenger-body w-8 h-2 bg-rose-400 rounded-full\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"flex flex-col items-center gap-4\">\r\n            <div class=\"flex justify-center gap-3\">\r\n              <button id=\"bus-start\" class=\"flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-bold shadow-lg transition-all active:scale-95\">\u0627\u0646\u0637\u0644\u0627\u0642<\/button>\r\n              <button id=\"bus-brake\" class=\"flex items-center gap-2 px-5 py-2.5 bg-rose-600 hover:bg-rose-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-bold shadow-lg transition-all active:scale-95\" disabled>\u062a\u0648\u0642\u0641 \u0645\u0641\u0627\u062c\u0626<\/button>\r\n              <button id=\"bus-reset\" class=\"flex items-center gap-2 px-5 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold shadow-lg transition-all active:scale-95\">\u0625\u0639\u0627\u062f\u0629<\/button>\r\n            <\/div>\r\n            <div class=\"bg-blue-500\/10 border border-blue-500\/20 p-3 rounded-lg max-w-lg text-center\">\r\n              <p class=\"text-l text-blue-200\"><span class=\"font-bold text-white\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629:<\/span> \u0639\u0646\u062f \u0627\u0644\u062a\u0648\u0642\u0641 \u0627\u0644\u0645\u0641\u0627\u062c\u0626 \u0644\u0644\u062d\u0627\u0641\u0644\u0629\u060c \u062a\u0633\u062a\u0645\u0631 \u0643\u062a\u0644\u0629 \u0627\u0644\u0631\u0627\u0643\u0628 \u0641\u064a \u0627\u0644\u062d\u0631\u0643\u0629 \u0644\u0644\u0623\u0645\u0627\u0645 \u0628\u0627\u0644\u0633\u0631\u0639\u0629 \u0646\u0641\u0633\u0647\u0627 \u0628\u0633\u0628\u0628 <span class=\"text-rose-400 font-bold\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a<\/span> (\u0645\u0645\u0627\u0646\u0639\u0629 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629).<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        `;\r\n        \r\n        const startBtn = div.querySelector('#bus-start');\r\n        const brakeBtn = div.querySelector('#bus-brake');\r\n        const resetBtn = div.querySelector('#bus-reset');\r\n        const carEl = div.querySelector('#car');\r\n        const passengerEl = div.querySelector('#passenger');\r\n\r\n        function resetBus() {\r\n          if (busTimer) clearTimeout(busTimer);\r\n          busStatus = 'idle';\r\n          carEl.style.transform = 'translateX(0)';\r\n          passengerEl.style.transform = 'translateX(0) rotate(0deg)';\r\n          startBtn.disabled = false;\r\n          brakeBtn.disabled = true;\r\n        }\r\n\r\n        function startBus() {\r\n          if (busStatus !== 'idle') return;\r\n          busStatus = 'moving';\r\n          startBtn.disabled = true;\r\n          carEl.style.transition = 'transform 3s linear';\r\n          passengerEl.style.transition = 'transform 3s linear';\r\n          carEl.style.transform = 'translateX(-300px)';\r\n          passengerEl.style.transform = 'translateX(-300px)';\r\n          busTimer = setTimeout(() => {\r\n            if (busStatus === 'moving') {\r\n              brakeBtn.disabled = false;\r\n            }\r\n          }, 3000);\r\n        }\r\n\r\n        function brakeBus() {\r\n          if (busStatus !== 'moving') return;\r\n          busStatus = 'braking';\r\n          brakeBtn.disabled = true;\r\n          carEl.style.transition = 'transform 0.3s ease-out';\r\n          passengerEl.style.transition = 'transform 0.6s ease-out';\r\n          carEl.style.transform = 'translateX(-350px)';\r\n          passengerEl.style.transform = 'translateX(-420px) rotate(-45deg)';\r\n          if (busTimer) clearTimeout(busTimer);\r\n        }\r\n\r\n        startBtn.addEventListener('click', startBus);\r\n        brakeBtn.addEventListener('click', brakeBus);\r\n        resetBtn.addEventListener('click', resetBus);\r\n        \r\n        return div;\r\n      }\r\n\r\n      function buildTableclothSimulation() {\r\n        const div = document.createElement('div');\r\n        div.className = 'flex flex-col gap-6';\r\n        div.innerHTML = `\r\n          <div class=\"tablecloth-container relative h-56 bg-gradient-to-b from-amber-900\/10 to-slate-800 rounded-xl overflow-hidden border border-slate-700\">\r\n            <div class=\"table absolute bottom-12 right-1\/4 w-64 h-6 bg-amber-800 rounded-l border-t-2 border-amber-700 shadow-xl z-10\">\r\n              <div class=\"table-leg absolute top-6 right-4 w-4 h-32 bg-amber-900 rounded-b-l\"><\/div>\r\n              <div class=\"table-leg absolute top-6 left-4 w-4 h-32 bg-amber-900 rounded-b-l\"><\/div>\r\n            <\/div>\r\n            <div id=\"tablecloth\" class=\"tablecloth absolute bottom-[72px] right-1\/4 w-56 h-2 bg-red-500 shadow-md z-20 rounded-l-full transition-all duration-200\" style=\"transform: translateX(0);\"><\/div>\r\n            <div id=\"plate\" class=\"plate absolute bottom-[76px] right-[35%] w-16 h-4 bg-white rounded-t-lg shadow-lg border-b-2 border-slate-200 z-30 flex justify-center transition-all duration-200\" style=\"transform: translateX(0);\">\r\n              <div class=\"plate-inner w-10 h-2 bg-slate-100 rounded-t-full absolute -top-2\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"flex flex-col items-center gap-4\">\r\n            <div class=\"flex justify-center gap-3\">\r\n              <button id=\"cloth-slow\" class=\"flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-bold shadow-lg transition-all active:scale-95\">\u0633\u062d\u0628 \u0628\u0637\u064a\u0621<\/button>\r\n              <button id=\"cloth-fast\" class=\"flex items-center gap-2 px-5 py-2.5 bg-rose-600 hover:bg-rose-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-bold shadow-lg transition-all active:scale-95\">\u0633\u062d\u0628 \u0633\u0631\u064a\u0639<\/button>\r\n              <button id=\"cloth-reset\" class=\"flex items-center gap-2 px-5 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold shadow-lg transition-all active:scale-95\">\u0625\u0639\u0627\u062f\u0629<\/button>\r\n            <\/div>\r\n            <div class=\"bg-amber-500\/10 border border-amber-500\/20 p-3 rounded-lg max-w-lg text-center\">\r\n              <p class=\"text-l text-amber-200\"><span class=\"font-bold text-white\">\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0629:<\/span> \u0641\u064a \u0627\u0644\u0633\u062d\u0628 \u0627\u0644\u0633\u0631\u064a\u0639\u060c \u0644\u0627 \u064a\u0643\u0641\u064a \u0632\u0645\u0646 \u062a\u0623\u062b\u064a\u0631 \u0642\u0648\u0629 \u0627\u0644\u0627\u062d\u062a\u0643\u0627\u0643 \u0644\u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u0637\u0628\u0642\u060c \u0641\u064a\u0628\u0642\u0649 \u0633\u0627\u0643\u0646\u0627\u064b \u0641\u064a \u0645\u0643\u0627\u0646\u0647 \u062a\u0642\u0631\u064a\u0628\u0627\u064b \u0628\u0633\u0628\u0628 <span class=\"text-rose-400 font-bold\">\u0627\u0644\u0642\u0635\u0648\u0631 \u0627\u0644\u0630\u0627\u062a\u064a<\/span>.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n        `;\r\n        \r\n        const slowBtn = div.querySelector('#cloth-slow');\r\n        const fastBtn = div.querySelector('#cloth-fast');\r\n        const resetBtn = div.querySelector('#cloth-reset');\r\n        const clothEl = div.querySelector('#tablecloth');\r\n        const plateEl = div.querySelector('#plate');\r\n\r\n        function resetCloth() {\r\n          if (clothTimer) clearTimeout(clothTimer);\r\n          clothStatus = 'idle';\r\n          clothEl.style.transition = 'transform 0.2s ease-out';\r\n          plateEl.style.transition = 'transform 0.2s ease-out';\r\n          clothEl.style.transform = 'translateX(0)';\r\n          plateEl.style.transform = 'translateX(0)';\r\n          slowBtn.disabled = false;\r\n          fastBtn.disabled = false;\r\n        }\r\n\r\n        function slowPull() {\r\n          if (clothStatus !== 'idle') return;\r\n          clothStatus = 'slow';\r\n          slowBtn.disabled = true;\r\n          fastBtn.disabled = true;\r\n          clothEl.style.transition = 'transform 2s ease-in-out';\r\n          plateEl.style.transition = 'transform 2s ease-in-out';\r\n          clothEl.style.transform = 'translateX(-300px)';\r\n          plateEl.style.transform = 'translateX(-300px)';\r\n          clothTimer = setTimeout(() => resetCloth(), 2200);\r\n        }\r\n\r\n        function fastPull() {\r\n          if (clothStatus !== 'idle') return;\r\n          clothStatus = 'fast';\r\n          slowBtn.disabled = true;\r\n          fastBtn.disabled = true;\r\n          clothEl.style.transition = 'transform 0.2s ease-out';\r\n          plateEl.style.transition = 'transform 0.2s ease-out';\r\n          clothEl.style.transform = 'translateX(-300px)';\r\n          plateEl.style.transform = 'translateX(-10px)'; \/\/ barely moves\r\n          clothTimer = setTimeout(() => resetCloth(), 400);\r\n        }\r\n\r\n        slowBtn.addEventListener('click', slowPull);\r\n        fastBtn.addEventListener('click', fastPull);\r\n        resetBtn.addEventListener('click', resetCloth);\r\n        \r\n        return div;\r\n      }\r\n\r\n      function switchTab(tab) {\r\n        activeTab = tab;\r\n        const contentDiv = document.getElementById('sim-content');\r\n        if (!contentDiv) return;\r\n        if (activeTab === 'bus') {\r\n          contentDiv.innerHTML = '';\r\n          contentDiv.appendChild(buildBusSimulation());\r\n        } else {\r\n          contentDiv.innerHTML = '';\r\n          contentDiv.appendChild(buildTableclothSimulation());\r\n        }\r\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0638\u0647\u0631 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n        const busBtn = document.getElementById('tab-bus');\r\n        const clothBtn = document.getElementById('tab-cloth');\r\n        if (activeTab === 'bus') {\r\n          busBtn.classList.add('bg-blue-600', 'text-white', 'shadow-md');\r\n          busBtn.classList.remove('text-slate-400', 'hover:bg-slate-700');\r\n          clothBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-md');\r\n          clothBtn.classList.add('text-slate-400', 'hover:bg-slate-700');\r\n        } else {\r\n          clothBtn.classList.add('bg-blue-600', 'text-white', 'shadow-md');\r\n          clothBtn.classList.remove('text-slate-400', 'hover:bg-slate-700');\r\n          busBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-md');\r\n          busBtn.classList.add('text-slate-400', 'hover:bg-slate-700');\r\n        }\r\n      }\r\n\r\n      \/\/ \u0631\u0628\u0637 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n      document.getElementById('tab-bus').addEventListener('click', () => switchTab('bus'));\r\n      document.getElementById('tab-cloth').addEventListener('click', () => switchTab('cloth'));\r\n      \r\n      \/\/ \u0627\u0644\u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0623\u0648\u0644\u064a\u0629\r\n      switchTab('bus');\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-18456","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18456","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=18456"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18456\/revisions"}],"predecessor-version":[{"id":18457,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18456\/revisions\/18457"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}