{"id":18334,"date":"2026-04-16T10:42:29","date_gmt":"2026-04-16T07:42:29","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=18334"},"modified":"2026-04-16T15:09:13","modified_gmt":"2026-04-16T12:09:13","slug":"%d8%a7%d9%84%d9%81%d9%8a%d8%b2%d9%8a%d8%a7%d8%a1-%d9%88%d8%a7%d9%84%d8%ad%d9%8a%d8%a7%d8%a9-%d9%85%d8%b1%d9%83%d8%b2-%d8%a7%d9%84%d9%83%d8%aa%d9%84%d8%a9-center-of-mass","status":"publish","type":"page","link":"https:\/\/smartedujo.com\/ar\/%d8%a7%d9%84%d9%81%d9%8a%d8%b2%d9%8a%d8%a7%d8%a1-%d9%88%d8%a7%d9%84%d8%ad%d9%8a%d8%a7%d8%a9-%d9%85%d8%b1%d9%83%d8%b2-%d8%a7%d9%84%d9%83%d8%aa%d9%84%d8%a9-center-of-mass\/","title":{"rendered":"\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0648\u0627\u0644\u062d\u064a\u0627\u0629-\u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 (Center of Mass)"},"content":{"rendered":"\n
\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0648\u0627\u0644\u062d\u064a\u0627\u0629 | \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 (Center of Mass)<\/title>\r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <!-- \u062e\u0637 Cairo -->\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-container {\r\n background: #0f172a;\r\n border-radius: 1rem;\r\n border: 1px solid #334155;\r\n padding: 1.5rem;\r\n margin: 2rem 0;\r\n }\r\n .com-line {\r\n position: absolute;\r\n width: 2px;\r\n background-color: #f43f5e;\r\n opacity: 0.7;\r\n pointer-events: none;\r\n transform-origin: top;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"content-container\">\r\n <!-- \u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629: \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u062f\u0631\u0633 + \u0645\u0639\u0644\u0645 \u0627\u0644\u0645\u0627\u062f\u0629 -->\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\">\u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 (Center of Mass)<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639 - \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 <!-- \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\u0625\u062b\u0631\u0627\u0621_\u0648\u0627\u0644\u062a\u0648\u0633\u0639__\u0645\u0631\u0643\u0632_\u0627\u0644\u0643\u062a\u0644\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\u0625\u062b\u0631\u0627\u0621_\u0648\u0627\u0644\u062a\u0648\u0633\u0639__\u0645\u0631\u0643\u0632_\u0627\u0644\u0643\u062a\u0644\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 <div class=\"space-y-8\" dir=\"rtl\">\r\n <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0639\u0644\u0648\u064a \u0627\u0644\u0645\u0645\u064a\u0632 -->\r\n <div class=\"bg-gradient-to-br from-indigo-900 to-slate-900 p-8 rounded-3xl shadow-2xl border border-indigo-500\/30 relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-full h-full bg-[url('https:\/\/www.transparenttextures.com\/patterns\/cubes.png')] opacity-10\"><\/div>\r\n <h1 class=\"text-4xl md:text-5xl font-extrabold mb-4 leading-tight text-white\">\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0648\u0627\u0644\u062d\u064a\u0627\u0629: \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 (Center of Mass)<\/h1>\r\n <p class=\"text-lg md:text-xl text-indigo-200 mb-6\">\r\n \u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0643\u0645\u0627 \u0648\u0631\u062f \u0641\u064a \u0643\u062a\u0627\u0628 \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0644\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639\u060c \u0627\u0644\u0641\u0635\u0644 \u0627\u0644\u0623\u0648\u0644 (\u0635\u0641\u062d\u0629 62).\r\n <\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-indigo-500\/20 backdrop-blur-sm\">\r\n <p class=\"text-slate-300\">\r\n \u064a\u0634\u0631\u062d \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u0645\u0641\u0647\u0648\u0645 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0648\u0623\u0647\u0645\u064a\u062a\u0647 \u0641\u064a \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u0644\u0623\u062c\u0633\u0627\u0645\u060c \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u0645\u0646 \u062d\u064a\u0627\u0629 \u0627\u0644\u0625\u0646\u0633\u0627\u0646 \u0627\u0644\u064a\u0648\u0645\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0645\u0627 \u0647\u0648 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629\u061f -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\">\r\n <span class=\"w-2 h-8 bg-indigo-500 rounded-full\"><\/span>\r\n \u0645\u0627 \u0647\u0648 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629\u061f\r\n <\/h2>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-indigo-500\/20\">\r\n <p class=\"text-slate-300 leading-relaxed mb-4\">\r\n <strong class=\"text-white\">\u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629<\/strong> \u0647\u0648 \u0646\u0642\u0637\u0629 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0641\u064a \u0627\u0644\u062c\u0633\u0645\u060c \u064a\u0628\u062f\u0648 \u0648\u0643\u0623\u0646 \u0643\u0644 \u0643\u062a\u0644\u0629 \u0627\u0644\u062c\u0633\u0645 \u062a\u062a\u0631\u0643\u0632 \u0641\u064a\u0647\u0627. \u0628\u0645\u0639\u0646\u0649 \u0622\u062e\u0631\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u062e\u064a\u0644 \u0623\u0646 \u0648\u0632\u0646 \u0627\u0644\u062c\u0633\u0645 \u0628\u0623\u0643\u0645\u0644\u0647 \u064a\u0624\u062b\u0631 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0647\u0630\u0647 \u0627\u0644\u0646\u0642\u0637\u0629 \u0627\u0644\u0648\u0627\u062d\u062f\u0629.\r\n <\/p>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/30\">\r\n <p class=\"text-l text-indigo-200 italic\">\r\n \u0645\u062b\u0627\u0644 \u0628\u0633\u064a\u0637: \u0627\u0644\u0645\u0633\u0637\u0631\u0629 \u0627\u0644\u0645\u062a\u0631\u064a\u0629 \u062a\u062a\u0648\u0627\u0632\u0646 \u0639\u0646\u062f \u0645\u0646\u062a\u0635\u0641\u0647\u0627 \u062a\u0645\u0627\u0645\u064b\u0627\u060c \u0644\u0623\u0646 \u0645\u0631\u0643\u0632 \u0643\u062a\u0644\u062a\u0647\u0627 \u0641\u064a \u0627\u0644\u0645\u0646\u062a\u0635\u0641. \u0623\u0645\u0627 \u0625\u0630\u0627 \u0648\u0636\u0639\u062a \u062b\u0642\u0644\u064b\u0627 \u0639\u0644\u0649 \u0623\u062d\u062f \u0637\u0631\u0641\u064a\u0647\u0627\u060c \u0641\u0625\u0646 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u064a\u0646\u062a\u0642\u0644 \u0646\u062d\u0648 \u0627\u0644\u062b\u0642\u0644\u060c \u0648\u062a\u0635\u0628\u062d \u0646\u0642\u0637\u0629 \u0627\u0644\u062a\u0648\u0627\u0632\u0646 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0623\u0642\u0631\u0628 \u0625\u0644\u0649 \u0627\u0644\u0637\u0631\u0641 \u0627\u0644\u0645\u062b\u0642\u0644.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0641\u064a \u062c\u0633\u0645 \u0627\u0644\u0625\u0646\u0633\u0627\u0646 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\">\r\n <span class=\"w-2 h-8 bg-pink-500 rounded-full\"><\/span>\r\n \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0641\u064a \u062c\u0633\u0645 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-pink-500\/20\">\r\n <h4 class=\"font-bold text-pink-400 mb-3\">\u0627\u0644\u0634\u062e\u0635 \u0627\u0644\u0628\u0627\u0644\u063a<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u0641\u064a \u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0645\u0634\u064a \u0627\u0644\u0639\u0627\u062f\u064a\u0629\u060c \u064a\u0642\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u062a\u0642\u0631\u064a\u0628\u064b\u0627 \u0639\u0646\u062f \u0645\u0646\u062a\u0635\u0641 \u0627\u0644\u062c\u0633\u0645 (\u062d\u0648\u0627\u0644\u064a \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0633\u0631\u0629 \u0623\u0648 \u0623\u0633\u0641\u0644 \u0627\u0644\u0638\u0647\u0631).\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-pink-500\/20\">\r\n <h4 class=\"font-bold text-pink-400 mb-3\">\u0627\u0644\u0623\u0637\u0641\u0627\u0644<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u064a\u0642\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0644\u062f\u064a\u0647\u0645 \u0623\u0639\u0644\u0649 \u0645\u0646 \u0645\u0646\u062a\u0635\u0641 \u0627\u0644\u062c\u0633\u0645 (\u0646\u0633\u0628\u0629 \u0625\u0644\u0649 \u0637\u0648\u0644\u0647\u0645) \u0644\u0623\u0646 \u0631\u0624\u0648\u0633\u0647\u0645 \u0648\u0623\u062c\u0633\u0627\u062f\u0647\u0645 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 \u0623\u062b\u0642\u0644 \u0646\u0633\u0628\u064a\u064b\u0627.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0648\u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631 + \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\">\r\n <span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\r\n \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0648\u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631\r\n <\/h2>\r\n <div class=\"bg-emerald-900\/20 p-6 rounded-2xl border border-emerald-500\/30\">\r\n <p class=\"text-slate-300 mb-6\">\r\n \u0647\u0630\u0627 \u0647\u0648 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0639\u0645\u0644\u064a \u0627\u0644\u0623\u0647\u0645: \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u0644\u062c\u0633\u0645 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0645\u0648\u0642\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0625\u0644\u0649 <strong class=\"text-white\">\"\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632\"<\/strong> (\u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u064a\u0646 \u0646\u0642\u0627\u0637 \u062a\u0645\u0627\u0633 \u0627\u0644\u062c\u0633\u0645 \u0645\u0639 \u0627\u0644\u0623\u0631\u0636).\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\">\r\n <div class=\"bg-black\/30 p-4 rounded-xl\">\r\n <h5 class=\"text-emerald-400 font-bold mb-2\">\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632:<\/h5>\r\n <p class=\"text-l text-slate-400\">\u062a\u0645\u062b\u0644 \u0627\u0644\u062f\u0627\u0626\u0631\u0629 \u0627\u0644\u0648\u0647\u0645\u064a\u0629 \u0627\u0644\u0645\u062d\u064a\u0637\u0629 \u0628\u0642\u062f\u0645\u064a\u0643 (\u0623\u0648 \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0623\u0631\u062c\u0644 \u0641\u064a \u0627\u0644\u0643\u0631\u0633\u064a \u0623\u0648 \u0627\u0644\u0637\u0627\u0648\u0644\u0629).<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl\">\r\n <h5 class=\"text-emerald-400 font-bold mb-2\">\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631:<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0645\u0627 \u062f\u0627\u0645 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u064a\u0642\u0639 \u062f\u0627\u062e\u0644 \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632\u060c \u0641\u0625\u0646 \u0627\u0644\u062c\u0633\u0645 \u064a\u0643\u0648\u0646 \u0645\u0633\u062a\u0642\u0631\u064b\u0627.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629: \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 -->\r\n <div id=\"centerOfMassSimulation\" class=\"sim-container\">\r\n <h3 class=\"text-xl font-bold text-white mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0648\u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631<\/h3>\r\n <div class=\"flex flex-wrap gap-2 justify-center md:justify-start mb-6\">\r\n <button data-type=\"ruler\" class=\"type-btn px-3 py-1.5 rounded-lg text-l font-bold bg-slate-800 text-slate-400 hover:bg-slate-700\">\u0645\u0633\u0637\u0631\u0629 \u0645\u062a\u0648\u0627\u0632\u0646\u0629<\/button>\r\n <button data-type=\"adult\" class=\"type-btn px-3 py-1.5 rounded-lg text-l font-bold bg-indigo-600 text-white\">\u0634\u062e\u0635 \u0628\u0627\u0644\u063a<\/button>\r\n <button data-type=\"child\" class=\"type-btn px-3 py-1.5 rounded-lg text-l font-bold bg-slate-800 text-slate-400 hover:bg-slate-700\">\u0637\u0641\u0644 (\u0631\u0623\u0633 \u0623\u062b\u0642\u0644)<\/button>\r\n <button data-type=\"chair\" class=\"type-btn px-3 py-1.5 rounded-lg text-l font-bold bg-slate-800 text-slate-400 hover:bg-slate-700\">\u0643\u0631\u0633\u064a<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n <!-- \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0631\u0633\u0645 -->\r\n <div class=\"relative h-80 bg-slate-950 rounded-xl border border-slate-800 overflow-hidden\" id=\"canvasContainer\">\r\n <!-- \u0627\u0644\u0623\u0631\u0636 -->\r\n <div class=\"absolute bottom-0 w-full h-2 bg-slate-600\"><\/div>\r\n <!-- \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632 -->\r\n <div id=\"baseIndicator\" class=\"absolute bottom-0 bg-indigo-500\/20 border-x border-indigo-500\/50 h-4 transition-all duration-300\" style=\"width: 0px;\"><\/div>\r\n <!-- SVG \u0644\u0644\u062c\u0633\u0645 -->\r\n <svg id=\"objectSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 400 320\" class=\"absolute inset-0\"><\/svg>\r\n <!-- \u0646\u0642\u0637\u0629 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 -->\r\n <div id=\"comPoint\" class=\"absolute w-4 h-4 bg-rose-500 rounded-full border-2 border-white shadow-lg z-10 hidden\"><\/div>\r\n <!-- \u0627\u0644\u062e\u0637 \u0627\u0644\u0631\u0623\u0633\u064a -->\r\n <div id=\"comVerticalLine\" class=\"com-line hidden\"><\/div>\r\n <!-- \u062d\u0627\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631 -->\r\n <div id=\"stabilityBadge\" class=\"absolute top-4 right-4 px-4 py-2 rounded-full font-bold text-l border bg-emerald-500\/10 border-emerald-500 text-emerald-400\">\u0645\u0633\u062a\u0642\u0631 \u2713<\/div>\r\n <\/div>\r\n\r\n <!-- \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u062d\u0643\u0645 -->\r\n <div class=\"space-y-6\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <label class=\"text-l text-slate-400 flex justify-between mb-2\">\r\n <span>\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u064a\u0644\u0627\u0646<\/span>\r\n <span id=\"angleValue\" class=\"text-white font-mono\">0\u00b0<\/span>\r\n <\/label>\r\n <input type=\"range\" id=\"tiltSlider\" min=\"-60\" max=\"60\" step=\"1\" value=\"0\" class=\"w-full accent-indigo-500\">\r\n <\/div>\r\n\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/30\">\r\n <h4 class=\"text-indigo-400 font-bold mb-2 text-l\">\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631:<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u064a\u0643\u0648\u0646 \u0627\u0644\u062c\u0633\u0645 \u0645\u0633\u062a\u0642\u0631\u0627\u064b \u0637\u0627\u0644\u0645\u0627 \u0623\u0646 \u0627\u0644\u062e\u0637 \u0627\u0644\u0631\u0623\u0633\u064a \u0627\u0644\u0646\u0627\u0632\u0644 \u0645\u0646 <span class=\"text-rose-400 font-bold\">\u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629<\/span> \u064a\u0642\u0639 \u062f\u0627\u062e\u0644 <span class=\"text-indigo-400 font-bold\">\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632<\/span>.\r\n <\/p>\r\n <div class=\"mt-4 p-3 bg-black\/40 rounded border border-white\/5 text-[10px] text-slate-400 italic\">\r\n * \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u0623\u0646 \u0627\u0644\u0623\u0637\u0641\u0627\u0644 \u064a\u0633\u0642\u0637\u0648\u0646 \u0623\u0633\u0647\u0644 \u0644\u0623\u0646 \u0645\u0631\u0643\u0632 \u0643\u062a\u0644\u062a\u0647\u0645 \u0623\u0639\u0644\u0649\u060c \u0648\u0627\u0644\u0643\u0631\u0633\u064a \u0645\u0633\u062a\u0642\u0631 \u062c\u062f\u0627\u064b \u0644\u0623\u0646 \u0642\u0627\u0639\u062f\u062a\u0647 \u0639\u0631\u064a\u0636\u0629 \u0648\u0645\u0631\u0643\u0632 \u0643\u062a\u0644\u062a\u0647 \u0645\u0646\u062e\u0641\u0636.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div class=\"p-3 bg-slate-800 rounded-lg border border-slate-700 text-center\">\r\n <div class=\"text-[10px] text-slate-500 mb-1\">\u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629<\/div>\r\n <div id=\"comHeightValue\" class=\"text-lg font-bold text-white\">55%<\/div>\r\n <\/div>\r\n <div class=\"p-3 bg-slate-800 rounded-lg border border-slate-700 text-center\">\r\n <div class=\"text-[10px] text-slate-500 mb-1\">\u0639\u0631\u0636 \u0627\u0644\u0642\u0627\u0639\u062f\u0629<\/div>\r\n <div id=\"baseWidthValue\" class=\"text-lg font-bold text-white\">40 \u0648\u062d\u062f\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-l text-slate-300 mt-4\">\r\n \u0625\u0630\u0627 \u0627\u0646\u062d\u0631\u0641 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0639\u0646 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0623\u0648 \u062e\u0631\u062c \u0639\u0646\u0647\u0627 (\u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u064a\u0644\u0627\u0646 \u0623\u0648 \u0627\u0644\u062f\u0641\u0639)\u060c \u064a\u0635\u0628\u062d \u0627\u0644\u062c\u0633\u0645 \u063a\u064a\u0631 \u0645\u0633\u062a\u0642\u0631 \u0648\u064a\u0633\u0642\u0637 \u0623\u0648 \u064a\u0646\u0642\u0644\u0628.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0623\u0645\u062b\u0644\u0629 \u062d\u064a\u0627\u062a\u064a\u0629 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\">\r\n <span class=\"w-2 h-8 bg-amber-500 rounded-full\"><\/span>\r\n \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0623\u0645\u062b\u0644\u0629 \u062d\u064a\u0627\u062a\u064a\u0629\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-amber-500\/20\">\r\n <h4 class=\"font-bold text-amber-400 mb-3\">\u0627\u0644\u062c\u0644\u0648\u0633 \u0627\u0644\u062e\u0627\u0637\u0626 \u0639\u0644\u0649 \u0627\u0644\u0643\u0631\u0633\u064a<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u0627\u0644\u0645\u064a\u0644 \u0628\u0627\u0644\u0643\u0631\u0633\u064a \u064a\u0646\u0642\u0644 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u062e\u0627\u0631\u062c \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0643\u0631\u0633\u064a (\u0627\u0644\u0623\u0631\u062c\u0644 \u0627\u0644\u0623\u0631\u0628\u0639\u0629)\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0644\u0644\u0627\u0646\u0642\u0644\u0627\u0628 \u0648\u0627\u0644\u0633\u0642\u0648\u0637.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-amber-500\/20\">\r\n <h4 class=\"font-bold text-amber-400 mb-3\">\u0627\u0644\u0645\u0634\u064a \u0648\u0627\u0644\u0648\u0642\u0648\u0641<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u0639\u0646\u062f \u0631\u0641\u0639 \u0625\u062d\u062f\u0649 \u0642\u062f\u0645\u064a\u0643\u060c \u062a\u0636\u064a\u0642 \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632\u060c \u0648\u064a\u0635\u0628\u062d \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0627\u0632\u0646 \u0623\u0635\u0639\u0628 \u0644\u0623\u0646 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u064a\u062c\u0628 \u0623\u0646 \u064a\u0628\u0642\u0649 \u0641\u0648\u0642 \u0627\u0644\u0642\u062f\u0645 \u0627\u0644\u0648\u0627\u062d\u062f\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0646\u0634\u0627\u0637 \u0628\u062d\u062b\u064a -->\r\n <section class=\"bg-indigo-900\/40 p-8 rounded-3xl border border-indigo-500\/30\">\r\n <h2 class=\"text-2xl font-bold text-white mb-6\">\u0646\u0634\u0627\u0637 \u0628\u062d\u062b\u064a \u0644\u0644\u0645\u062a\u0639\u0644\u0645<\/h2>\r\n <p class=\"text-slate-300 mb-4\">\u0627\u0628\u062d\u062b \u0639\u0646 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0623\u062e\u0631\u0649 \u0644\u0623\u0647\u0645\u064a\u0629 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0648\u0623\u062b\u0631\u0647 \u0641\u064a \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u0644\u0623\u062c\u0633\u0627\u0645:<\/p>\r\n <ul class=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-l text-indigo-200\">\r\n <li class=\"flex items-center gap-2 bg-black\/20 p-3 rounded-lg\"><span class=\"w-2 h-2 bg-indigo-500 rounded-full\"><\/span> \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a (\u0645\u0631\u0643\u0632 \u0643\u062a\u0644\u0629 \u0645\u0646\u062e\u0641\u0636 \u064a\u0645\u0646\u0639 \u0627\u0644\u0627\u0646\u0642\u0644\u0627\u0628).<\/li>\r\n <li class=\"flex items-center gap-2 bg-black\/20 p-3 rounded-lg\"><span class=\"w-2 h-2 bg-indigo-500 rounded-full\"><\/span> \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0623\u062b\u0627\u062b \u0648\u0627\u0644\u0645\u0646\u0634\u0622\u062a.<\/li>\r\n <li class=\"flex items-center gap-2 bg-black\/20 p-3 rounded-lg\"><span class=\"w-2 h-2 bg-indigo-500 rounded-full\"><\/span> \u0627\u0644\u0631\u064a\u0627\u0636\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u062c\u0645\u0628\u0627\u0632 \u0648\u0627\u0644\u0645\u0644\u0627\u0643\u0645\u0629.<\/li>\r\n <li class=\"flex items-center gap-2 bg-black\/20 p-3 rounded-lg\"><span class=\"w-2 h-2 bg-indigo-500 rounded-full\"><\/span> \u0627\u0644\u0623\u0644\u0639\u0627\u0628 \u0645\u062b\u0644 \"\u0627\u0644\u062f\u0645\u064a\u0629 \u0627\u0644\u0631\u0648\u0633\u064a\u0629\" (Matryoshka).<\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n <div class=\"bg-slate-800\/80 p-6 rounded-2xl border border-white\/10 text-center\">\r\n <p class=\"text-slate-400 text-l\">\r\n \u0641\u0647\u0645 \u0647\u0630\u0627 \u0627\u0644\u0645\u0628\u062f\u0623 \u064a\u0633\u0627\u0639\u062f\u0643 \u0639\u0644\u0649 \u062a\u0641\u0633\u064a\u0631 \u062d\u0648\u0627\u062f\u062b \u0627\u0644\u0633\u0642\u0648\u0637 \u0627\u0644\u064a\u0648\u0645\u064a\u0629\u060c \u0648\u062a\u0635\u0645\u064a\u0645 \u0623\u0634\u064a\u0627\u0621 \u0623\u0643\u062b\u0631 \u0623\u0645\u0627\u0646\u064b\u0627 (\u0645\u062b\u0644 \u0643\u0631\u0627\u0633\u064a \u0644\u0627 \u062a\u0646\u0642\u0644\u0628 \u0628\u0633\u0647\u0648\u0644\u0629\u060c \u0623\u0648 \u0633\u064a\u0627\u0631\u0627\u062a \u0645\u0646\u062e\u0641\u0636\u0629 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629).\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 - \u0646\u0633\u062e\u0629 \u0645\u0635\u062d\u062d\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 (\u0645\u062d\u0641\u0648\u0638\u0629 \u0643\u0645\u0627 \u0647\u064a)\r\n (function() {\r\n \/\/ \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0623\u062c\u0633\u0627\u0645\r\n \/\/ comHeight: \u0646\u0633\u0628\u0629 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0645\u0646 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 (0=\u0623\u0633\u0641\u0644, 1=\u0623\u0639\u0644\u0649)\r\n \/\/ baseWidth: \u0646\u0635\u0641 \u0639\u0631\u0636 \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632 (\u0628\u0627\u0644\u0628\u0643\u0633\u0644 \u0641\u064a \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0631\u0633\u0645)\r\n \/\/ totalHeight: \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0643\u0644\u064a \u0644\u0644\u062c\u0633\u0645 \u0628\u0627\u0644\u0628\u0643\u0633\u0644 (\u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u062d\u0633\u0627\u0628 \u0645\u0648\u0642\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629)\r\n \/\/ drawFunction: \u062f\u0627\u0644\u0629 \u0631\u0633\u0645 \u062a\u0623\u062e\u0630 SVG group \u0648\u062a\u0636\u064a\u0641 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062c\u0633\u0645\r\n const properties = {\r\n ruler: {\r\n comHeight: 0.5,\r\n baseWidth: 20,\r\n totalHeight: 140,\r\n label: '\u0645\u0633\u0637\u0631\u0629 \u0645\u062a\u0648\u0627\u0632\u0646\u0629',\r\n draw: (group) => {\r\n const rect = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n rect.setAttribute('x', '-10');\r\n rect.setAttribute('y', '-140');\r\n rect.setAttribute('width', '20');\r\n rect.setAttribute('height', '140');\r\n rect.setAttribute('fill', '#b45309');\r\n rect.setAttribute('stroke', '#78350f');\r\n rect.setAttribute('stroke-width', '2');\r\n rect.setAttribute('rx', '3');\r\n group.appendChild(rect);\r\n }\r\n },\r\n adult: {\r\n comHeight: 0.55,\r\n baseWidth: 40,\r\n totalHeight: 160,\r\n label: '\u0634\u062e\u0635 \u0628\u0627\u0644\u063a',\r\n draw: (group) => {\r\n \/\/ \u062c\u0630\u0639\r\n const body = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n body.setAttribute('x', '-15');\r\n body.setAttribute('y', '-110');\r\n body.setAttribute('width', '30');\r\n body.setAttribute('height', '90');\r\n body.setAttribute('fill', '#3b82f6');\r\n body.setAttribute('stroke', '#1e40af');\r\n body.setAttribute('stroke-width', '2');\r\n body.setAttribute('rx', '6');\r\n group.appendChild(body);\r\n \/\/ \u0631\u0623\u0633\r\n const head = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\r\n head.setAttribute('cx', '0');\r\n head.setAttribute('cy', '-125');\r\n head.setAttribute('r', '18');\r\n head.setAttribute('fill', '#fbbf24');\r\n head.setAttribute('stroke', '#b45309');\r\n head.setAttribute('stroke-width', '2');\r\n group.appendChild(head);\r\n \/\/ \u0633\u0627\u0642\u0627\u0646\r\n const legL = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n legL.setAttribute('x', '-12');\r\n legL.setAttribute('y', '-20');\r\n legL.setAttribute('width', '8');\r\n legL.setAttribute('height', '20');\r\n legL.setAttribute('fill', '#1e40af');\r\n legL.setAttribute('rx', '2');\r\n group.appendChild(legL);\r\n const legR = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n legR.setAttribute('x', '4');\r\n legR.setAttribute('y', '-20');\r\n legR.setAttribute('width', '8');\r\n legR.setAttribute('height', '20');\r\n legR.setAttribute('fill', '#1e40af');\r\n legR.setAttribute('rx', '2');\r\n group.appendChild(legR);\r\n }\r\n },\r\n child: {\r\n comHeight: 0.65,\r\n baseWidth: 35,\r\n totalHeight: 130,\r\n label: '\u0637\u0641\u0644 (\u0631\u0623\u0633 \u0623\u062b\u0642\u0644)',\r\n draw: (group) => {\r\n const body = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n body.setAttribute('x', '-12');\r\n body.setAttribute('y', '-80');\r\n body.setAttribute('width', '24');\r\n body.setAttribute('height', '60');\r\n body.setAttribute('fill', '#10b981');\r\n body.setAttribute('stroke', '#047857');\r\n body.setAttribute('stroke-width', '2');\r\n body.setAttribute('rx', '6');\r\n group.appendChild(body);\r\n const head = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\r\n head.setAttribute('cx', '0');\r\n head.setAttribute('cy', '-95');\r\n head.setAttribute('r', '20');\r\n head.setAttribute('fill', '#fbbf24');\r\n head.setAttribute('stroke', '#b45309');\r\n head.setAttribute('stroke-width', '2');\r\n group.appendChild(head);\r\n const legL = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n legL.setAttribute('x', '-10');\r\n legL.setAttribute('y', '-20');\r\n legL.setAttribute('width', '7');\r\n legL.setAttribute('height', '20');\r\n legL.setAttribute('fill', '#047857');\r\n legL.setAttribute('rx', '2');\r\n group.appendChild(legL);\r\n const legR = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n legR.setAttribute('x', '3');\r\n legR.setAttribute('y', '-20');\r\n legR.setAttribute('width', '7');\r\n legR.setAttribute('height', '20');\r\n legR.setAttribute('fill', '#047857');\r\n legR.setAttribute('rx', '2');\r\n group.appendChild(legR);\r\n }\r\n },\r\n chair: {\r\n comHeight: 0.4,\r\n baseWidth: 60,\r\n totalHeight: 90,\r\n label: '\u0643\u0631\u0633\u064a',\r\n draw: (group) => {\r\n const seat = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n seat.setAttribute('x', '-30');\r\n seat.setAttribute('y', '-40');\r\n seat.setAttribute('width', '60');\r\n seat.setAttribute('height', '10');\r\n seat.setAttribute('fill', '#94a3b8');\r\n seat.setAttribute('stroke', '#475569');\r\n seat.setAttribute('stroke-width', '2');\r\n group.appendChild(seat);\r\n const back = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n back.setAttribute('x', '-30');\r\n back.setAttribute('y', '-90');\r\n back.setAttribute('width', '10');\r\n back.setAttribute('height', '50');\r\n back.setAttribute('fill', '#94a3b8');\r\n back.setAttribute('stroke', '#475569');\r\n back.setAttribute('stroke-width', '2');\r\n group.appendChild(back);\r\n \/\/ \u0623\u0631\u062c\u0644\r\n [-25, 25].forEach(x => {\r\n const leg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n leg.setAttribute('x', x-4);\r\n leg.setAttribute('y', '-30');\r\n leg.setAttribute('width', '8');\r\n leg.setAttribute('height', '30');\r\n leg.setAttribute('fill', '#64748b');\r\n leg.setAttribute('stroke', '#334155');\r\n leg.setAttribute('stroke-width', '1');\r\n group.appendChild(leg);\r\n });\r\n }\r\n }\r\n };\r\n\r\n let currentType = 'adult';\r\n let tiltAngle = 0; \/\/ \u0628\u0627\u0644\u062f\u0631\u062c\u0627\u062a\r\n let isStable = true;\r\n\r\n \/\/ \u0639\u0646\u0627\u0635\u0631 DOM\r\n const svg = document.getElementById('objectSvg');\r\n const baseIndicator = document.getElementById('baseIndicator');\r\n const comPoint = document.getElementById('comPoint');\r\n const comLine = document.getElementById('comVerticalLine');\r\n const stabilityBadge = document.getElementById('stabilityBadge');\r\n const angleValueSpan = document.getElementById('angleValue');\r\n const tiltSlider = document.getElementById('tiltSlider');\r\n const comHeightValueSpan = document.getElementById('comHeightValue');\r\n const baseWidthValueSpan = document.getElementById('baseWidthValue');\r\n const typeBtns = document.querySelectorAll('.type-btn');\r\n const canvasContainer = document.getElementById('canvasContainer');\r\n\r\n const centerX = 200; \/\/ \u0645\u0646\u062a\u0635\u0641 \u0639\u0631\u0636 viewBox (400px)\r\n const groundY = 300; \/\/ \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0623\u0631\u0636 (\u0623\u0633\u0641\u0644)\r\n\r\n function clearSvg() {\r\n while(svg.firstChild) svg.removeChild(svg.firstChild);\r\n }\r\n\r\n function updateSimulation() {\r\n const prop = properties[currentType];\r\n if (!prop) return;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0635\u0648\u0635\r\n comHeightValueSpan.innerText = (prop.comHeight * 100).toFixed(0) + '%';\r\n baseWidthValueSpan.innerText = prop.baseWidth + ' \u0648\u062d\u062f\u0629';\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632 (\u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0643\u0644\u064a = 2 * \u0646\u0635\u0641 \u0627\u0644\u0642\u0627\u0639\u062f\u0629)\r\n const totalBaseWidth = prop.baseWidth * 2;\r\n baseIndicator.style.width = totalBaseWidth + 'px';\r\n baseIndicator.style.left = (centerX - prop.baseWidth) + 'px';\r\n\r\n \/\/ \u062d\u0633\u0627\u0628 \u0645\u0648\u0642\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0645\u0639 \u0627\u0644\u0645\u064a\u0644\u0627\u0646\r\n const tiltRad = tiltAngle * Math.PI \/ 180;\r\n const comHeightPx = prop.comHeight * prop.totalHeight; \/\/ \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629 \u0639\u0646 \u0627\u0644\u0642\u0627\u0639\u062f\u0629\r\n const comShift = comHeightPx * Math.sin(tiltRad); \/\/ \u0627\u0644\u0625\u0632\u0627\u062d\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629\r\n const comX = centerX + comShift;\r\n const comY = groundY - comHeightPx;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0646\u0642\u0637\u0629 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629\r\n comPoint.style.display = 'block';\r\n comPoint.style.left = (comX - 8) + 'px';\r\n comPoint.style.top = (comY - 8) + 'px';\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u062e\u0637 \u0627\u0644\u0631\u0623\u0633\u064a \u0627\u0644\u0646\u0627\u0632\u0644 \u0645\u0646 \u0645\u0631\u0643\u0632 \u0627\u0644\u0643\u062a\u0644\u0629\r\n comLine.style.display = 'block';\r\n comLine.style.left = (comX - 1) + 'px';\r\n comLine.style.top = comY + 'px';\r\n comLine.style.height = (groundY - comY) + 'px';\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631: \u0647\u0644 comX \u062f\u0627\u062e\u0644 \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632\u061f\r\n const baseLeft = centerX - prop.baseWidth;\r\n const baseRight = centerX + prop.baseWidth;\r\n isStable = (comX >= baseLeft && comX <= baseRight);\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0634\u0627\u0631\u0629 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631\r\n stabilityBadge.innerText = isStable ? '\u0645\u0633\u062a\u0642\u0631 \u2713' : '\u063a\u064a\u0631 \u0645\u0633\u062a\u0642\u0631 \u26a0';\r\n stabilityBadge.className = `absolute top-4 right-4 px-4 py-2 rounded-full font-bold text-l border ${isStable ? 'bg-emerald-500\/10 border-emerald-500 text-emerald-400' : 'bg-rose-500\/10 border-rose-500 text-rose-400'}`;\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u0627\u0626\u0644\r\n clearSvg();\r\n const group = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'g');\r\n \/\/ \u0646\u0642\u0637\u0629 \u0627\u0644\u0627\u0631\u062a\u0643\u0627\u0632 \u0647\u064a \u0645\u0646\u062a\u0635\u0641 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0639\u0646\u062f \u0627\u0644\u0623\u0631\u0636 (centerX, groundY)\r\n group.setAttribute('transform', `translate(${centerX}, ${groundY}) rotate(${tiltAngle})`);\r\n prop.draw(group);\r\n svg.appendChild(group);\r\n }\r\n\r\n \/\/ \u062d\u062f\u062b \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0632\u0627\u0648\u064a\u0629\r\n tiltSlider.addEventListener('input', (e) => {\r\n tiltAngle = parseInt(e.target.value);\r\n angleValueSpan.innerText = tiltAngle + '\u00b0';\r\n updateSimulation();\r\n });\r\n\r\n \/\/ \u062a\u063a\u064a\u064a\u0631 \u0646\u0648\u0639 \u0627\u0644\u062c\u0633\u0645\r\n typeBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const type = btn.getAttribute('data-type');\r\n if (type && properties[type]) {\r\n currentType = type;\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0625\u0644\u0649 0\r\n tiltAngle = 0;\r\n tiltSlider.value = '0';\r\n angleValueSpan.innerText = '0\u00b0';\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0645\u0638\u0647\u0631 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n typeBtns.forEach(b => {\r\n b.classList.remove('bg-indigo-600', 'text-white');\r\n b.classList.add('bg-slate-800', 'text-slate-400');\r\n });\r\n btn.classList.remove('bg-slate-800', 'text-slate-400');\r\n btn.classList.add('bg-indigo-600', 'text-white');\r\n updateSimulation();\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n updateSimulation();\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-18334","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18334","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=18334"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18334\/revisions"}],"predecessor-version":[{"id":18335,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18334\/revisions\/18335"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}